All/None links for each category of filter #28

server/webserver.py

@@ -32,7 +32,7 @@ class WebServer:
         bottle.get("/api/status")(lambda: self.serve_api(self.status_data))
         bottle.post("/api/spot")(lambda: self.accept_spot())
         # Routes for templated pages
-        bottle.get("/")(lambda: self.serve_template('webpage_home'))
+        bottle.get("/")(lambda: self.serve_template('webpage_spots'))
         bottle.get("/about")(lambda: self.serve_template('webpage_about'))
         bottle.get("/apidocs")(lambda: self.serve_template('webpage_apidocs'))
         # Default route to serve from "webassets"

views/webpage_spots.tpl

@@ -53,11 +53,6 @@
         <div class="card-body">
             <div id="filters-container-1" class="row row-cols-1 g-4 mb-4"></div>
             <div id="filters-container-2" class="row row-cols-1 row-cols-md-4 g-4"></div>
-
-            <p class="text-end mt-3 mb-0">
-                <button id="deselect-all-button" type="button" class="btn btn-outline-primary">Deselect All</button>
-                <button id="select-all-button" type="button" class="btn btn-outline-primary">Select All</button>
-            </p>
         </div>
     </div>
 

webassets/js/code.js

@@ -256,9 +256,13 @@ function generateFilterCard(displayName, filterQuery, options) {
     let $card_body = $("<div class='card-body'>");
     $card_body.append(`<h5 class='card-title'>${displayName}</h5>`);
     $p = $("<p class='card-text filter-card-text'>");
+    // Create a button for each option
     options.forEach(o => {
         $p.append(`<input type="checkbox" class="btn-check filter-button-${filterQuery} storeable-checkbox" name="options" id="filter-button-${filterQuery}-${o}" value="${o}" autocomplete="off" onClick="filtersUpdated()" checked><label class="btn btn-outline-primary" for="filter-button-${filterQuery}-${o}">${o}</label> `);
     });
+    // Create All/None buttons
+    $p.append(` <span style="display: inline-block"><button id="filter-button-${filterQuery}-all" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('${filterQuery}', true);">All</button>&nbsp;<button id="filter-button-${filterQuery}-none" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('${filterQuery}', false);">None</button></span>`);
+    // Compile HTML elements to return
     $card_body.append($p);
     $card.append($card_body);
     $col.append($card);
@@ -272,18 +276,30 @@ function generateBandsFilterCard(displayName, filterQuery, band_options) {
     let $card_body = $("<div class='card-body'>");
     $card_body.append(`<h5 class='card-title'>${displayName}</h5>`);
     $p = $("<p class='card-text filter-card-text'>");
+    // Create a button for each option
     band_options.forEach(o => {
         // CSS doesn't like IDs with decimal points in, so we need to replace that in the same way as when we originally
         // queried the options endpoint and set our CSS.
         var cssFormattedBandName = o['name'] ? o['name'].replace('.', 'p') : "unknown";
         $p.append(`<input type="checkbox" class="btn-check filter-button-${filterQuery} storeable-checkbox" name="options" id="filter-button-${filterQuery}-${cssFormattedBandName}" value="${o['name']}" autocomplete="off" onClick="filtersUpdated()" checked><label class="btn btn-outline" id="filter-button-label-${filterQuery}-${cssFormattedBandName}" for="filter-button-${filterQuery}-${cssFormattedBandName}">${o['name']}</label> `);
     });
+    // Create All/None buttons
+    $p.append(` <span style="display: inline-block"><button id="filter-button-${filterQuery}-all" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('${filterQuery}', true);">All</button>&nbsp;<button id="filter-button-${filterQuery}-none" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('${filterQuery}', false);">None</button></span>`);
+    // Compile HTML elements to return
     $card_body.append($p);
     $card.append($card_body);
     $col.append($card);
     return $col;
 }
 
+// Method called when "All" or "None" is clicked
+function toggleFilterButtons(filterQuery, state) {
+    $(".filter-button-" + filterQuery).each(function() {
+        $(this).prop('checked', state);
+    });
+    filtersUpdated();
+}
+
 // Method called when any filter is changed to reload the spots and persist the filter settings.
 function filtersUpdated() {
     loadSpots();
@@ -373,18 +389,6 @@ function setUpEventListeners() {
         $("#filters-button").button("toggle");
         $("#filters-area").hide();
     });
-    $("#select-all-button").click(function() {
-        $(".storeable-checkbox").each(function() {
-            $(this).prop('checked', true);
-        });
-        filtersUpdated();
-    });
-    $("#deselect-all-button").click(function() {
-        $(".storeable-checkbox").each(function() {
-            $(this).prop('checked', false);
-        });
-        filtersUpdated();
-    });
 }
 
 // Startup