use tablesorter to sort the history table

debomatic-webui/public/javascripts/page_history.js

@@ -20,11 +20,36 @@ function Page_History() {
         var package_url = Utils.get_url_to_package(p);
         row += '<td><a href="' + distribution_url + '">' + p.distribution + '</a></td>';
         row += '<td><a href="' + package_url + '">' + p.package + '</td>';
+        row += '<td>' + Utils.format_time(p.start, false, true) + '</td>';
+        row += '<td>' + Utils.format_time(p.end, false, true) + '</td>';
         row += '<td>' + p.uploader + '</td>';
-        row += '<td>' + Utils.format_time(p.start) + '</td>';
-        row += '<td>' + Utils.format_time(p.end) + '</td>';
         row += '<td class="' + info.className + ' text-' + info.className + '">' + label + '</td>';
         row += '</tr>';
-        $('.table tbody').append(row);
+        $('table tbody').append(row);
     }
+
+    // create the theme for tablesorter
+    $.extend($.tablesorter.themes.bootstrap, {
+        table: 'table table-condensed table-bordered table-striped',
+        caption: 'caption',
+        header: 'bootstrap-header',
+        sortNone: 'bootstrap-icon-unsorted',
+        sortAsc: 'glyphicon glyphicon-chevron-up',
+        sortDesc: 'glyphicon glyphicon-chevron-down',
+    });
+
+    // call the tablesorter plugin and apply the uitheme widget
+    $("table").tablesorter({
+        theme: "bootstrap",
+        widthFixed: true,
+        headerTemplate: '{content} {icon}',
+        widgets: ["uitheme", "filter"],
+        sortList: [
+            [3, 1]
+        ]
+    });
+
+    // add some funcy class to inputs field
+    $("table input").addClass('form-control');
+    $("table select").addClass('form-control');
 }

debomatic-webui/public/javascripts/utils.js

@@ -117,15 +117,23 @@ var Utils = {
     },
 
     // format time from a timestamp
-    format_time: function (timestamp, time_in_bold) {
+    format_time: function (timestamp, time_in_bold, short) {
         var date = new Date(timestamp * 1000);
         var locale = navigator.language || 'en-US';
-        var options = {
-            weekday: "long",
-            year: "numeric",
-            month: "long",
-            day: "numeric",
-        };
+        var options = null;
+        if (short)
+            options = {
+                year: "numeric",
+                month: "numeric",
+                day: "numeric",
+            };
+        else
+            options = {
+                weekday: "long",
+                year: "numeric",
+                month: "long",
+                day: "numeric",
+            };
         var result_date = date.toLocaleDateString(locale, options);
         var result_time = Utils.num_two_digits(date.getHours()) + ':' + Utils.num_two_digits(date.getMinutes());
         if (time_in_bold) result_time = '<b>' + result_time + '</b>';

debomatic-webui/scripts/install/download_external_libs.sh

@@ -25,6 +25,18 @@ get_jquery() {
   cd ..
 }
 
+get_tablesorter() {
+  DIR_TABLESORTER="tablesorter"
+  if [ -d ${EXT_LIBS_DIR}/${DIR_TABLESORTER} ] ; then return ; fi
+  mkdir ${DIR_TABLESORTER}
+  cd ${DIR_TABLESORTER}
+  echo "Downloading tablesorter ..."
+  curl -s -O -L "http://mottie.github.io/tablesorter/js/jquery.tablesorter.min.js"
+  curl -s -O -L "http://mottie.github.io/tablesorter/js/jquery.tablesorter.widgets.min.js"
+  curl -s -O -L "http://mottie.github.io/tablesorter/css/theme.bootstrap.css"
+  cd ..
+}
+
 if [ ! -d ${EXT_LIBS_DIR} ] ; then mkdir -p ${EXT_LIBS_DIR} ; fi
 
 TMP_DIR="`mktemp -d`"
@@ -32,6 +44,7 @@ cd ${TMP_DIR}
 
 get_jquery
 get_bootstrap
+get_tablesorter
 
 if [ "`ls -1`" != "" ] ; then mv * ${EXT_LIBS_DIR} ; fi
 cd && rm -r ${TMP_DIR}

debomatic-webui/views/footer.ejs

@@ -14,8 +14,10 @@
       </div>
     </footer>
 
-    <script src='/socket.io/socket.io.js?<%= version %>'></script>
-    <script src='/external_libs/jquery/jquery-1.11.0.min.js'></script>
+    <script src="/socket.io/socket.io.js?<%= version %>"></script>
+    <script src="/external_libs/jquery/jquery-1.11.0.min.js"></script>
+    <script src="/external_libs/tablesorter/jquery.tablesorter.min.js"></script>
+    <script src="/external_libs/tablesorter/jquery.tablesorter.widgets.min.js"></script>
     <script src="/external_libs/bootstrap-3.2.0-dist/js/bootstrap.min.js"></script>
 
     <script>

debomatic-webui/views/header.ejs

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="/external_libs/bootstrap-3.2.0-dist/css/bootstrap.min.css">
     <link rel="stylesheet" href="/external_libs/bootstrap-3.2.0-dist/css/bootstrap-theme.min.css">
+    <link rel="stylesheet" href="/external_libs/tablesorter/theme.bootstrap.css">
     <link rel="stylesheet" href="/stylesheets/style.css?<%= version %>">
   </head>
 

debomatic-webui/views/history.ejs

@@ -6,15 +6,15 @@
         The log of packages
     </p>
     <script> var dom_history = <%- JSON.stringify(history) %> </script>
-    <table class="table table-condensed table-bordered table-striped">
+    <table id="history" class="tablesorter">
         <thead>
             <tr>
-                <th>Distribution</th>
+                <th class="filter-select filter-exact" data-placeholder="All">Distribution</th>
                 <th>Package</th>
+                <th data-placeholder=">= 01/01/1990">Start</th>
+                <th data-placeholder=">= 01/01/1990">End</th>
                 <th>Uploader</th>
-                <th>Start</th>
-                <th>End</th>
-                <th>Status</th>
+                <th class="filter-select filter-exact" data-placeholder="All">Status</th>
             </tr>
         </thead>
         <tbody></tbody>