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

More bands, filters layout, screenshots #7

Browse Source
This commit is contained in:
Ian Renton
2025-10-03 11:56:04 +01:00
parent 222e3d9c5e
commit f725e0e57b
7 changed files with 56 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
webassets/js/code.js
View File

@@ -7,8 +7,6 @@ var spots = []
var options = {};
// Last time we updated the spots list on display.
var lastUpdateTime;
// Options-based lookups for band colours
band_colors = {}
// Load spots and populate the table.
function loadSpots() {
@@ -65,12 +63,6 @@ function updateTable() {
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>"
}
// Band-based colour
var band_dot_style = ""
if (band_colors[s["band"]]) {
band_dot_style = `color: ${band_colors[s["band"]]}; `
}
// Format sig_refs
var sig_refs = ""
if (s["sig_refs"]) {
@@ -89,10 +81,15 @@ function updateTable() {
de_country = "Unknown or not a country"
}
// CSS doesn't like classes 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 = s['band'] ? s['band'].replace('.', 'p') : "unknown";
var bandFullName = s['band'] ? s['band'] + " band": "Unknown band";
// Populate the row
$tr.append(`<td>${time_formatted}</td>`);
$tr.append(`<td><span class='flag-wrapper' title='${dx_country}'>${s["dx_flag"]}</span>${s["dx_call"]}</td>`);
$tr.append(`<td><span class='band-dot' style='${band_dot_style}'>&#9632;</span>${freq_string}</td>`);
$tr.append(`<td><span class='band-bullet band-bullet-${cssFormattedBandName}' title='${bandFullName}'>&#9632;</span>${freq_string}</td>`);
$tr.append(`<td>${mode_string}</td>`);
$tr.append('<td>' + escapeHtml(`${s["comment"]}`) + '</td>');
$tr.append(`<td><span class='icon-wrapper'><i class='fa-solid fa-${s["icon"]}'></i></span> ${s["source"]}</td>`);
@@ -137,7 +134,7 @@ function loadStatus() {
// Generate a status card
function generateStatusCard(title, textLines) {
let $col = $("<div class='col'>")
let $card = $("<div class='card status-card'>");
let $card = $("<div class='card'>");
let $card_body = $("<div class='card-body'>");
$card_body.append(`<h5 class='card-title'>${title}</h5>`);
$card_body.append(`<p class='card-text'>${textLines.join("<br/>")}</p>`);
@@ -153,20 +150,15 @@ function loadOptions() {
// Store options
options = jsonData;
// Separately store colour lookups for bands
options["bands"].forEach(b => {
band_colors[b["name"]] = b["color"];
});
// Add CSS for band toggle buttons
addBandToggleButtonCSS(options["bands"]);
// Add CSS for band bullets and band toggle buttons
addBandColourCSS(options["bands"]);
// Populate the filters panel
$("#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"]));
$("#filters-container-1").append(generateBandsFilterCard("Bands", "band", options["bands"]));
$("#filters-container-2").append(generateFilterCard("DX Continent", "dx_continent", options["continents"]));
$("#filters-container-2").append(generateFilterCard("DE Continent", "de_continent", options["continents"]));
$("#filters-container-2").append(generateFilterCard("Modes", "mode_type", options["mode_types"]));
$("#filters-container-2").append(generateFilterCard("Sources", "source", options["sources"]));
// Load spots and set up the timer
loadSpots();
@@ -174,20 +166,24 @@ function loadOptions() {
});
}
// Dynamically add CSS code for the band toggle buttons to be in the appropriate colour
function addBandToggleButtonCSS(band_options) {
// Dynamically add CSS code for the band bullets and band toggle buttons to be in the appropriate colour.
// Some band names contain decimal points which are not allowed in CSS classes, so we text-replace them to "p".
function addBandColourCSS(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']};}`);
// CSS doesn't like IDs with decimal points in, so we need to replace that
var cssFormattedBandName = o['name'] ? o['name'].replace('.', 'p') : "unknown";
$style.append(`.band-bullet-${cssFormattedBandName} { color: ${o['color']}; }`);
$style.append(`#filter-button-label-band-${cssFormattedBandName} { border-color: ${o['color']}; color: var(--bs-primary);}`);
$style.append(`.btn-check:checked + #filter-button-label-band-${cssFormattedBandName} { 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 $col = $("<div class='col'>")
let $card = $("<div class='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'>");
@@ -202,13 +198,16 @@ function generateFilterCard(displayName, filterQuery, options) {
// 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 $col = $("<div class='col'>")
let $card = $("<div class='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> `);
// 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> `);
});
$card_body.append($p);
$card.append($card_body);