Make folder listing sortable

frontend/css/style.css

@@ -39,10 +39,6 @@ pre {
     cursor: pointer;
 }
 
-th {
-    vertical-align: middle !important;
-}
-
 .main {
     margin-bottom: 40px;
 }
@@ -65,7 +61,8 @@ footer:hover {
     opacity: 1;
 }
 
-th {
+td {
+    vertical-align: middle !important;
     overflow: hidden;
 }
 
@@ -77,3 +74,11 @@ th {
 tr:hover .entry-toolbar {
     opacity: 1;
 }
+
+table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after {
+    content: " \25B4\25BE"
+}
+
+th {
+    cursor: pointer;
+}

frontend/index.html

@@ -160,34 +160,34 @@
                 </center>
             </div>
             <div class="col-lg-12" v-show="!busy">
-                <table class="table table-hover table-condensed">
+                <table class="table table-hover table-condensed sortable">
                     <thead>
                         <tr>
                             <th>Type</th>
                             <th>Name</th>
-                            <th>Size</th>
-                            <th>Modified</th>
-                            <th>&nbsp;</th>
+                            <th class="sorttable_numeric">Size</th>
+                            <th class="sorttable_numeric">Modified</th>
+                            <th class="sorttable_nosort" style="text-align: right;">Actions</th>
                         </tr>
                     </thead>
                     <tbody>
                         <tr v-show="entries.length === 0">
-                            <th colspan="5"><i>Empty folder</i></th>
+                            <td colspan="5"><i>Empty folder</i></td>
                         </tr>
                         <tr v-for="entry in entries" v-on:click="open(entry)" class="hand">
-                            <th>
+                            <td sorttable_customkey="{{ entry.extension }}">
                                 <img v-bind:src="entry.previewUrl" height="48px" width="48px"/>
-                            </th>
-                            <th>{{ entry.filePath }}</th>
-                            <th>{{ entry.size | prettyFileSize }}</th>
-                            <th><span v-my-tooltip="foobar" data-toggle="tooltip" title="{{ entry.mtime }}">{{ entry.mtime | prettyDate }}</span></th>
-                            <th style="text-align: right;">
+                            </td>
+                            <td>{{ entry.filePath }}</td>
+                            <td sorttable_customkey="{{ entry.size }}">{{ entry.size | prettyFileSize }}</td>
+                            <td><span v-my-tooltip="foobar" data-toggle="tooltip" title="{{ entry.mtime }}">{{ entry.mtime | prettyDate }}</span></td>
+                            <td style="text-align: right;">
                                 <span class="entry-toolbar">
                                     <button class="btn btn-sm btn-default" v-on:click.stop="download(entry)" title="Download" v-show="entry.isFile"><i class="fa fa-download"></i></button>
                                     <button class="btn btn-sm btn-default" v-on:click.stop="renameAsk(entry)" title="Rename"><i class="fa fa-pencil"></i></button>
                                     <button class="btn btn-sm btn-danger" v-on:click.stop="delAsk(entry)" title="Delete"><i class="fa fa-trash"></i></button>
                                 </span>
-                            </th>
+                            </td>
                         </tr>
                     </tbody>
                 </table>
@@ -205,6 +205,7 @@
     <script src="/_admin/js/vue.min.js"></script>
     <script src="/_admin/js/filesize.min.js"></script>
     <script src="/_admin/js/superagent.js"></script>
+    <script src="/_admin/js/sorttable.js"></script>
     <script src="/_admin/js/app.js"></script>
 
 </body>

frontend/js/app.js

@@ -85,6 +85,12 @@ function getPreviewUrl(entry, basePath) {
     return path + 'unknown.png';
 }
 
+// simple extension detection, does not work with double extension like .tar.gz
+function getExtension(entry) {
+    if (entry.isFile) return entry.filePath.slice(entry.filePath.lastIndexOf('.') + 1);
+    return '';
+}
+
 function refresh() {
     loadDirectory(app.path);
 }
@@ -103,6 +109,7 @@ function loadDirectory(filePath) {
         result.body.entries.sort(function (a, b) { return a.isDirectory && b.isFile ? -1 : 1; });
         app.entries = result.body.entries.map(function (entry) {
             entry.previewUrl = getPreviewUrl(entry, filePath);
+            entry.extension = getExtension(entry);
             return entry;
         });
         app.path = filePath;