w1cdn/spothole
1
0
Fork 0
mirror of https://git.ianrenton.com/ian/spothole.git synced 2025-10-27 08:49:27 +00:00
Code Issues 11 Packages Projects Releases Wiki Activity

Filters work now #7

Browse Source
This commit is contained in:
Ian Renton
2025-10-03 12:22:06 +01:00
parent f725e0e57b
commit f489c75bb1
1 changed files with 29 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
webassets/js/code.js
View File

@@ -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();
});
});