small improvements

rowers/templates/list_courses.html

@@ -11,6 +11,9 @@
   #mypointer {
   cursor: pointer;
   }
+  tr:hover {
+      background-color: #f5f5f5;
+  }
 </style>
 
 
@@ -58,15 +61,18 @@
       <form enctype="multipart/form-data" method="post">
 	{% csrf_token %}
 	<input name="courses" type="submit" value="Download selected courses">
-	<table width="100%" class="listtable shortpadded">
+	Click on a column header to sort the table.
+	<table width="100%" class="listtable shortpadded" id="courseTable">
 	  <thead>
             <tr>
 	      <th> Download</th>
-              <th> Country</th>
-              <th> Name</th>
-              <th> Distance</th>
-              <th> Updated on</th>
-	      <th> Like</th>
+              <th onClick="sortTable(1)"> Country</th>
+              <th onClick="sortTable(2)"> Name</th>
+              <th onClick="sortTable(3)"> Distance</th>
+              <th onClick="sortTable(4)"> Updated on</th>
+	      {% if not user.is_anonymous %}
+	      <th onClick="sortTable(5)"> Like</th>
+	      {% endif %}
             </tr>
 	  </thead>
 	  <tbody>
@@ -83,6 +89,7 @@
 	      <td>
 		{{ course.updated|date:"Y-m-d" }}
 	      </td>
+	      {% if not user.is_anonymous %}
 	      <td>
 		{% if course in rower.followed_courses.all %}
 		<a class="unfollow" href="/rowers/courses/{{ course.id }}/unfollow"><span class="icon"><i class="fas fa-star"></i></span></a>
@@ -90,6 +97,7 @@
 		<a class="follow" href="/rowers/courses/{{ course.id }}/follow"><span class="icon"><i class="far fa-star"></i></span></a>
 		{% endif %}
             </tr>
+	    {% endif %}
 	    
             {% endfor %}
 	  </tbody>
@@ -210,9 +218,41 @@
 
       
   });
+  </script>
+<script>
+var ascending = true;
+
+function sortTable(col) {
+  var table, rows, switching, i, x, y, shouldSwitch;
+  table = document.getElementById("courseTable");
+  switching = true;
+  while (switching) {
+    switching = false;
+    rows = table.rows;
+    for (i = 1; i < (rows.length - 1); i++) {
+      shouldSwitch = false;
+      x = rows[i].getElementsByTagName("td")[col];
+      y = rows[i + 1].getElementsByTagName("td")[col];
+      if (ascending) {
+        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
+          shouldSwitch = true;
+          break;
+        }
+      } else {
+        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
+          shouldSwitch = true;
+          break;
+        }
+      }
+    }
+    if (shouldSwitch) {
+      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
+      switching = true;
+    }
+  }
+  ascending = !ascending; // Reverse the sorting order
+}
 </script>
-
-
   {% endblock %}
 
 {% block sidebar %}