From d509008bc122260c5eb354cbd3a8a07ee2f65b96 Mon Sep 17 00:00:00 2001
From: Alex Yatskov <alex@foosoft.net>
Date: Fri, 27 Mar 2015 12:46:59 +0900
Subject: [PATCH] Sorting arrows

---
 static/index.html        | 35 ++++++++++++++++++++++++++++-------
 static/scripts/search.js |  9 +++++++++
 2 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/static/index.html b/static/index.html
index 47cebc6..7fefe2e 100644
--- a/static/index.html
+++ b/static/index.html
@@ -96,13 +96,34 @@
                         <table class="table table-striped table-condensed">
                         <thead>
                             <tr>
-                                <th><a href="javascript:sortReviewsBy('name');">Name</a></th>
-                                <th><a href="javascript:sortReviewsBy('distanceToUser');">Distance to user</a></th>
-                                <th><a href="javascript:sortReviewsBy('closestStn');">Closest station</a></th>
-                                <th><a href="javascript:sortReviewsBy('distanceToStn');">Distance to station</a></th>
-                                <th><a href="javascript:sortReviewsBy('compatibility');">Compatibility</a></th>
-                                <th><a href="javascript:sortReviewsBy('score');">Score</a></th>
-                                <th><a href="javascript:sortReviewsBy('accessCount');">Access count</a></th>
+                                <th>
+                                    <a href="javascript:sortReviewsBy('name');">Name</a>
+                                    <span class="sort-icon glyphicon text-muted" data-sort="name"></span>
+                                </th>
+                                <th>
+                                    <a href="javascript:sortReviewsBy('distanceToUser');">Distance to user</a>
+                                    <span class="sort-icon glyphicon text-muted" data-sort="distanceToUser"></span>
+                                </th>
+                                <th>
+                                    <a href="javascript:sortReviewsBy('closestStn');">Closest station</a>
+                                    <span class="sort-icon glyphicon text-muted" data-sort="closestStn"></span>
+                                </th>
+                                <th>
+                                    <a href="javascript:sortReviewsBy('distanceToStn');">Distance to station</a>
+                                    <span class="sort-icon glyphicon text-muted" data-sort="distanceToStn"></span>
+                                </th>
+                                <th>
+                                    <a href="javascript:sortReviewsBy('compatibility');">Compatibility</a>
+                                    <span class="sort-icon glyphicon text-muted" data-sort="compatibility"></span>
+                                </th>
+                                <th>
+                                    <a href="javascript:sortReviewsBy('score');">Score</a>
+                                    <span class="sort-icon glyphicon text-muted" data-sort="score"></span>
+                                </th>
+                                <th>
+                                    <a href="javascript:sortReviewsBy('accessCount');">Access count</a>
+                                    <span class="sort-icon glyphicon text-muted" data-sort="accessCount"></span>
+                                </th>
                             </tr>
                         </thead>
                         {{#each records}}
diff --git a/static/scripts/search.js b/static/scripts/search.js
index c4d46b9..e70e9f1 100644
--- a/static/scripts/search.js
+++ b/static/scripts/search.js
@@ -157,6 +157,15 @@
         $('#records').empty();
         $('#records').append(template({records: results.records}));
 
+        $('span.sort-icon').css('visibility', 'hidden');
+        var currentColumn = $('span.sort-icon[data-sort="' + _ctx.sortKey + '"]').css('visibility', 'visible');
+        if (_ctx.sortAsc) {
+            currentColumn.removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
+        }
+        else {
+            currentColumn.removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
+        }
+
         if (results.records.length === 0) {
             $('#resultPanel').slideUp();
         }