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

Start adding filters #7

Browse Source
This commit is contained in:
Ian Renton
2025-10-03 09:58:49 +01:00
parent 0e262f68f5
commit 222e3d9c5e
7 changed files with 89 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
webassets/css/style.css
View File

@@ -55,4 +55,8 @@ div.appearing-panel {
div.status-card {
max-width: 18rem;
}
p.filter-card-text {
line-height: 2.5em !important;
}

80
webassets/js/code.js
View File

@@ -58,6 +58,9 @@ function updateTable() {
// Format the mode
mode_string = s["mode"];
if (s["mode"] == null) {
mode_string = "???"
}
if (s["mode_source"] == "BANDPLAN") {
mode_string = mode_string + "<span class='mode-q'><i class='fa-solid fa-circle-question' title='The mode was not reported via the spotting service. This is a guess based on the frequency.'></i></span>"
}
@@ -151,12 +154,19 @@ function loadOptions() {
options = jsonData;
// Separately store colour lookups for bands
options["bands"].forEach(m => {
band_colors[m["name"]] = m["color"]
options["bands"].forEach(b => {
band_colors[b["name"]] = b["color"];
});
// Add CSS for band toggle buttons
addBandToggleButtonCSS(options["bands"]);
// Populate the filters panel
$("#filters-container").text(JSON.stringify(options));
$("#filters-container").append(generateFilterCard("DX Continent", "dx_continent", options["continents"]));
$("#filters-container").append(generateFilterCard("DE Continent", "de_continent", options["continents"]));
$("#filters-container").append(generateFilterCard("Modes", "mode_type", options["mode_types"]));
$("#filters-container").append(generateFilterCard("Sources", "source", options["sources"]));
$("#filters-container").append(generateBandsFilterCard("Bands", "band", options["bands"]));
// Load spots and set up the timer
loadSpots();
@@ -164,6 +174,48 @@ function loadOptions() {
});
}
// Dynamically add CSS code for the band toggle buttons to be in the appropriate colour
function addBandToggleButtonCSS(band_options) {
var $style = $('<style>');
band_options.forEach(o => {
$style.append(`#filter-button-label-band-${o['name']} { border-color: ${o['color']}; color: var(--bs-primary);}`);
$style.append(`.btn-check:checked + #filter-button-label-band-${o['name']} { background-color: ${o['color']}; color: ${o['contrast_color']};}`);
});
$('html > head').append($style);
}
// Generate filter card
function generateFilterCard(displayName, filterQuery, options) {
let $col = $("<div class='col-3'>")
let $card = $("<div class='card status-card'>");
let $card_body = $("<div class='card-body'>");
$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> `);
});
$card_body.append($p);
$card.append($card_body);
$col.append($card);
return $col;
}
// Generate bands filter card. This one is a special case.
function generateBandsFilterCard(displayName, filterQuery, band_options) {
let $col = $("<div class='col-12'>")
let $card = $("<div class='card status-card'>");
let $card_body = $("<div class='card-body'>");
$card_body.append(`<h5 class='card-title'>${displayName}</h5>`);
$p = $("<p class='card-text filter-card-text'>");
band_options.forEach(o => {
$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}-${o['name']}" for="filter-button-${filterQuery}-${o['name']}">${o['name']}</label> `);
});
$card_body.append($p);
$card.append($card_body);
$col.append($card);
return $col;
}
// Update the refresh timing display
function updateRefreshDisplay() {
if (lastUpdateTime != null) {
@@ -208,13 +260,27 @@ $(document).ready(function() {
// Event listeners
$("#status-button").click(function() {
// If we are going to display status, load the data
// If we are going to display status, load the data for the status panel
if (!$("#status-area").is(":visible")) {
loadStatus();
}
$("#status-area").toggle();
});
$("#close-status-button").click(function() { $("#status-area").hide(); });
$("#filters-button").click(function() { $("#filters-area").toggle(); });
$("#close-filters-button").click(function() { $("#filters-area").hide(); });
$("#close-status-button").click(function() {
$("#status-button").button("toggle");
$("#status-area").hide();
});
$("#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();
});
});