Added support for table sorting to the HTML output.

Instead of manually adding this functionality with our own code; we use
the JQuery tablesorter plugin which adds support for sorting with a few
simple rows of code.
This commit is contained in:
Adam Waldenberg 2013-05-20 16:07:02 +02:00
parent 128b8b3b56
commit 1992d3dc94
3 changed files with 38 additions and 5 deletions

View file

@ -48,8 +48,8 @@ def __output_html_template__(name):
file_r = open(template_path, "rb") file_r = open(template_path, "rb")
return file_r.read().decode("utf-8", "replace") return file_r.read().decode("utf-8", "replace")
def __get_zip_file_content__(name): def __get_zip_file_content__(name, fileName="/html/flot.zip"):
zip_file = zipfile.ZipFile(basedir.get_basedir() + "/html/flot.zip", "r") zip_file = zipfile.ZipFile(basedir.get_basedir() + fileName, "r")
content = zip_file.read(name) content = zip_file.read(name)
zip_file.close() zip_file.close()
return content.decode("utf-8", "replace") return content.decode("utf-8", "replace")
@ -59,6 +59,7 @@ def output_header():
base = basedir.get_basedir() base = basedir.get_basedir()
html_header = __output_html_template__(base + "/html/html.header") html_header = __output_html_template__(base + "/html/html.header")
jquery_js = __get_zip_file_content__("jquery.js") jquery_js = __get_zip_file_content__("jquery.js")
tablesorter_js = __get_zip_file_content__("jquery.tablesorter.min.js", "/html/jquery.tablesorter.min.js.zip")
flot_js = __get_zip_file_content__("jquery.flot.js") flot_js = __get_zip_file_content__("jquery.flot.js")
pie_js = __get_zip_file_content__("jquery.flot.pie.js") pie_js = __get_zip_file_content__("jquery.flot.pie.js")
@ -67,7 +68,7 @@ def output_header():
logo_file.close() logo_file.close()
logo = base64.b64encode(logo) logo = base64.b64encode(logo)
print(html_header.format(version.__version__, jquery_js, flot_js, pie_js, logo.decode("utf-8", "replace"))) print(html_header.format(version.__version__, jquery_js, tablesorter_js, flot_js, pie_js, logo.decode("utf-8", "replace")))
elif __selected_format__ == "xml": elif __selected_format__ == "xml":
print("<gitinspector>") print("<gitinspector>")
print("\t<version>" + version.__version__ + "</version>") print("\t<version>" + version.__version__ + "</version>")

View file

@ -6,10 +6,12 @@
<script type="application/javascript">{1}</script> <script type="application/javascript">{1}</script>
<script type="application/javascript">{2}</script> <script type="application/javascript">{2}</script>
<script type="application/javascript">{3}</script> <script type="application/javascript">{3}</script>
<script type="application/javascript">{4}</script>
<script type="application/javascript"> <script type="application/javascript">
$(document).ready(function() {{ $(document).ready(function() {{
var row = 0; var row = 0;
var MINOR_AUTHOR_PERCENTAGE = 1.00; var MINOR_AUTHOR_PERCENTAGE = 1.00;
var isReversed = false;
var colorRows = function() {{ var colorRows = function() {{
$(this).removeClass("odd"); $(this).removeClass("odd");
@ -35,6 +37,32 @@
$("table.git tbody tr:visible").each(colorRows); $("table.git tbody tr:visible").each(colorRows);
$("table#changes, table#blame").tablesorter({{
sortList: [[0,0]],
headers: {{
0: {{ sorter: "text" }}
}}
}}).bind("sortEnd", function() {{
$(this).find("tbody tr:visible").each(colorRows);
}});
$("table#changes thead tr th, table#blame thead tr th").click(function() {{
$(this).parent().find("th strong").remove();
var parentIndex = $(this).index();
if (this.isReversed) {{
$(this).append("<strong> &and;</strong>");
}} else {{
$(this).append("<strong> &or;</strong>");
}}
this.isReversed = !this.isReversed;
}});
$("table#changes thead tr th:first-child, table#blame thead tr th:first-child").each(function() {{
this.isReversed = true;
$(this).append("<strong> &or;</strong>");
}});
$("table.git tfoot tr td:first-child").filter(function() {{ $("table.git tfoot tr td:first-child").filter(function() {{
return $(this).parent().parent().parent().find("tbody tr:hidden").length > 0; return $(this).parent().parent().parent().find("tbody tr:hidden").length > 0;
}}).each(function() {{ }}).each(function() {{
@ -121,10 +149,13 @@
border-radius: 8px 8px 0px 0px; border-radius: 8px 8px 0px 0px;
-moz-border-radius: 8px 8px 0px 0px; -moz-border-radius: 8px 8px 0px 0px;
}} }}
table#changes thead tr th, table#blame thead tr th, table.git tfoot tr td {{
border: 1px solid #eee;
text-align: center;
}}
table.git tfoot tr td {{ table.git tfoot tr td {{
border-radius: 0px 0px 8px 8px; border-radius: 0px 0px 8px 8px;
-moz-border-radius: 0px 0px 8px 8px; -moz-border-radius: 0px 0px 8px 8px;
border: 1px solid #eee;
text-align: center; text-align: center;
}} }}
table.git td {{ table.git td {{
@ -166,6 +197,7 @@
background-color: #ddcece; background-color: #ddcece;
min-height: 0; min-height: 0;
}} }}
table#changes thead tr th:hover, table#blame thead tr th:hover,
table#changes tfoot tr td:hover, table#blame tfoot tr td:hover, div.button:hover {{ table#changes tfoot tr td:hover, table#blame tfoot tr td:hover, div.button:hover {{
background-color: #eddede; background-color: #eddede;
border: 1px solid #bbb; border: 1px solid #bbb;
@ -175,7 +207,7 @@
</head> </head>
<body> <body>
<div><div class="box logo"> <div><div class="box logo">
<img src="data:image/png;base64,{4}" /> <img src="data:image/png;base64,{5}" />
<p>The output has been generated by <a href="http://gitinspector.googlecode.com">gitinspector</a>; <p>The output has been generated by <a href="http://gitinspector.googlecode.com">gitinspector</a>;
the statistical analysis tool for git repositories.<p> the statistical analysis tool for git repositories.<p>
</div></div> </div></div>

Binary file not shown.