Filters work now #7

webassets/js/code.js

@@ -10,7 +10,7 @@ var lastUpdateTime;
 
 // Load spots and populate the table.
 function loadSpots() {
-    $.getJSON('/api/spots', function(jsonData) {
+    $.getJSON('/api/spots' + buildQueryString(), function(jsonData) {
         // Store last updated time
         lastUpdateTime = moment.utc();
         updateRefreshDisplay();
@@ -21,13 +21,38 @@ function loadSpots() {
     });
 }
 
+// Build a query string for the API, based on the filters that the user has selected.
+function buildQueryString() {
+    var str =  "?";
+    var filterNames = ["dx_continent", "de_continent", "mode_type", "source", "band"];
+    str = str + filterNames.map(n => { return getQueryStringFor(n); }).join("&");
+    return str;
+}
+
+// For a parameter, such as dx_continent, get the query string for the current filter options.
+function getQueryStringFor(parameter) {
+    return parameter + "=" + encodeURIComponent(getSelectedFilterOptions(parameter));
+}
+
+// For a parameter, such as dx_continent, get the filter options that are currently selected in the UI.
+function getSelectedFilterOptions(parameter) {
+    return $(".filter-button-" + parameter).filter(function() {
+        return this.checked;
+    }).map(function() {
+        return this.value;
+    }).get().join(",");
+}
+
 // Update the spots table
 function updateTable() {
     // Populate table with headers
-    let headers = Object.keys(spots[0]);
     let table = $('<table class="table table-striped table-hover">').append('<thead><tr class="table-primary"></tr></thead><tbody></tbody>');
     ["UTC", "DX", "Frequency", "Mode", "Comment", "Source", "Ref.", "DE"].forEach(header => table.find('thead tr').append(`<th>${header}</th>`));
 
+    if (spots.length == 0) {
+        table.find('tbody').append('<tr class="table-danger"><td colspan="100" style="text-align:center;">No spots match your filters.</td></tr>');
+    }
+
     spots.forEach(s => {
         // Create row
         let $tr = $('<tr>');
@@ -188,7 +213,7 @@ function generateFilterCard(displayName, filterQuery, options) {
     $card_body.append(`<h5 class='card-title'>${displayName}</h5>`);
     $p = $("<p class='card-text filter-card-text'>");
     options.forEach(o => {
-        $p.append(`<input type="checkbox" class="btn-check filter-button-${filterQuery}" name="options" id="filter-button-${filterQuery}-${o}" value="${filterQuery}:${o}" autocomplete="off" checked><label class="btn btn-outline-primary" for="filter-button-${filterQuery}-${o}">${o}</label> `);
+        $p.append(`<input type="checkbox" class="btn-check filter-button-${filterQuery}" name="options" id="filter-button-${filterQuery}-${o}" value="${o}" autocomplete="off" onClick="loadSpots()" checked><label class="btn btn-outline-primary" for="filter-button-${filterQuery}-${o}">${o}</label> `);
     });
     $card_body.append($p);
     $card.append($card_body);
@@ -207,7 +232,7 @@ function generateBandsFilterCard(displayName, filterQuery, band_options) {
         // 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}" name="options" id="filter-button-${filterQuery}-${o['name']}" value="${filterQuery}:${o['name']}" autocomplete="off" checked><label class="btn btn-outline" id="filter-button-label-${filterQuery}-${cssFormattedBandName}" for="filter-button-${filterQuery}-${o['name']}">${o['name']}</label> `);
+        $p.append(`<input type="checkbox" class="btn-check filter-button-${filterQuery}" name="options" id="filter-button-${filterQuery}-${o['name']}" value="${o['name']}" autocomplete="off" onClick="loadSpots()" checked><label class="btn btn-outline" id="filter-button-label-${filterQuery}-${cssFormattedBandName}" for="filter-button-${filterQuery}-${o['name']}">${o['name']}</label> `);
     });
     $card_body.append($p);
     $card.append($card_body);
@@ -271,15 +296,9 @@ $(document).ready(function() {
     });
     $("#filters-button").click(function() {
          $("#filters-area").toggle();
-        // If we have just dismissed the filters panel, reload spots
-        if (!$("#filters-area").is(":visible")) {
-            loadSpots()();
-        }
     });
     $("#close-filters-button").click(function() {
         $("#filters-button").button("toggle");
         $("#filters-area").hide();
-        // We have just dismissed the filters panel, reload spots
-        loadSpots();
     });
 });