Support sorting in the list of games

app/routers/games.py

@@ -68,7 +68,7 @@ def list_games(
     skip: int = 0, limit: int = 100, sort_by="id", sort_order="asc", db=Depends(get_db)
 ):
     match sort_by:
-        case "id":
+        case "id" | "date":
             return crud.get_games(
                 db, skip=skip, limit=limit, sort_by=sort_by, sort_order=sort_order
             )

app/static/css/base.css

@@ -62,9 +62,32 @@ a#create_game_link {
     margin-top: 5px;
     padding: 2px 10px;
     border-radius: 10px;
-    
 }
 
+/*
+ * Tables
+ */
+th {
+    background-color: #0080ff;
+}
+
+th.active {
+    background-color: #0007ee;
+    color: grey;
+}
+
+th.asc::after {
+    content: "^"
+}
+
+th.desc::after {
+    content: "V"
+}
+
+/*
+ * Footer
+ */
+
 footer {
     position: fixed;
     left: 0;

app/static/js/game_list.js

@@ -0,0 +1,37 @@
+$(document).ready(function() {
+    // Set header-active indication depending on variables
+    const search_params = new Proxy(new URLSearchParams(window.location.search), {
+        get: (searchParams, prop) => searchParams.get(prop),
+      });
+    sort_by = search_params['sort_by']
+    if (sort_by != undefined) {
+        header_object = $('th#' + sort_by + '_header')
+        header_object.addClass('active')
+        if (search_params['sort_order'] == 'desc') {
+            header_object.addClass('desc')
+        } else {
+            header_object.addClass('asc')
+        }
+    }
+
+    $('th').click(function() {
+        sort_order = 'asc'
+        sort_by = $(this).attr('id').replace('_header', '')
+        if (sort_by == 'decks') {
+            alert('Sorting by the set-of-decks is not currently supported (how would that even work?)');
+            return;
+        }
+        if ($(this).hasClass('active')) {
+            // Header has already been clicked at some point - so reverse the sorting
+            if ($(this).hasClass('asc')) {
+                sort_order = 'desc'
+            }
+        }
+        const url = new URL(window.location.href)
+        url.searchParams.set('skip', 0)
+        url.searchParams.set('sort_by', sort_by)
+        url.searchParams.set('sort_order', sort_order)
+        window.location.href = url.href
+    })
+
+})

app/templates/games/list.html

@@ -4,15 +4,16 @@
 
 {% block head %}
 {{ super() }}
+<script src="/static/js/game_list.js"></script>
 {% endblock %}
 
 {% block content %}
 <h1>Games</h1>
 <table>
 <tr>
-    <th>Date</th>
-    <th>Decks</th>
-    <th>Winning Deck</th>
+    <th id="date_header">Date</th>
+    <th id="decks_header">Decks</th>
+    <th id="winning_deck_header">Winning Deck</th>
 </tr>
 {% for game in games %}
 <tr>