Allow check/unchecking all decks for a player in graph page

app/routers/stats.py

@@ -62,7 +62,6 @@ def stats_graph_api(
         # Add a fake final datapoint to the series for any decks that weren't played in the latest game, so that lines
         # continue all the way to the end of the graph
         latest_date_formatted = latest_date_so_far.strftime("%Y-%m-%d")
-        print(f"DEBUG = {latest_date_formatted=}")
         for games in data_grouped_by_deck.values():
             if games[-1]["date"] != latest_date_formatted:
                 games.append(

app/static/css/graph.css

@@ -3,3 +3,11 @@
     margin: 2px;
     background-color: lightblue;
 }
+
+p.playerName {
+    cursor: pointer;
+}
+
+p.all_checked {
+    font-weight: bold;
+}

app/static/js/stats/graph.js

@@ -15,6 +15,16 @@ function updateGraphWithFilter() {
 $(document).ready(function() {
 
   $('#filter_button').click(updateGraphWithFilter)
+  $('body').on('click', 'p.playerName', function() {
+    // Check or uncheck all checkboxes in that div
+    if ($(this).hasClass('all_checked')) {
+      $(this).parent().children('input[type=checkbox]').prop('checked', false);
+      $(this).removeClass('all_checked')
+    } else {
+      $(this).parent().children('input[type=checkbox]').prop('checked', true);
+      $(this).addClass('all_checked')
+    }
+  })
 
   fetch('/api/deck/by_player')
     .then(response => response.json())
@@ -58,7 +68,7 @@ function buildPlayerDecksDiv(parentDiv, playerName, playerDecks) {
   div = $('<div>',
     id='player_div_for_' + playerName
   )
-  div.append('<p>' + playerName + '</p>')
+  div.append('<p class="playerName">' + playerName + '</p>')
   for (deck of playerDecks) {
     div.append('<input type="checkbox" id="' + deck["id"] + '" name="' + deck["name"] + '" value="' + deck["name"] + '"><label for="' + deck["name"] + '">' + deck["name"] + '</label><br/>')
   }

app/templates/stats/graph.html

@@ -16,6 +16,7 @@
 
 <div id="options">
     <h2>Filter</h2>
+    <h3>(Click a player name to check/uncheck all their decks)</h3>
     <button id="filter_button">Go!</button><br/>
 </div>
 {% endblock %}