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

Various UI things #7

Browse Source
This commit is contained in:
Ian Renton
2025-10-02 18:13:48 +01:00
parent 6a3f1d2e10
commit 9f3fc8146b
7 changed files with 82 additions and 658441 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
webassets/css/style.css
View File

@@ -12,17 +12,20 @@
span.flag-wrapper {
display: inline-block;
width: 1.7em;
text-align: center;
cursor: default;
}
span.icon-wrapper {
display: inline-block;
width: 1.5em;
text-align: center;
cursor: default;
}
span.freq-mhz {
display: inline-block;
width: 2em;
min-width: 1.5em;
text-align: right;
font-weight: bold;
}
@@ -35,7 +38,13 @@ span.freq-hz {
font-size: 0.8em;
}
span.mode-q {
padding-left: 0.5em;
font-size: 0.7em;
color: lightgray;
}
tr.table-faded td {
color: gray;
color: lightgray;
text-decoration: line-through !important;
}

45
webassets/js/code.js
View File

@@ -7,6 +7,8 @@ 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() {
@@ -41,6 +43,12 @@ function updateTable() {
var time = moment.utc(s["time"], moment.ISO_8601);
var time_formatted = time.format("HH:mm")
// Format dx country
var dx_country = s["dx_country"]
if (dx_country == null) {
dx_country = "Unknown or not a country"
}
// Format the frequency
var mhz = Math.floor(s["freq"] / 1000.0);
var khz = Math.floor(s["freq"] - (mhz * 1000.0));
@@ -48,6 +56,18 @@ function updateTable() {
var hz_string = (hz > 0) ? hz.toFixed(0) : "";
var freq_string = `<span class='freq-mhz'>${mhz.toFixed(0)}</span><span class='freq-khz'>${khz.toFixed(0).padStart(3, '0')}</span><span class='freq-hz'>${hz_string}</span>`
// Format the mode
mode_string = s["mode"];
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>"
}
// 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"]) {
@@ -55,20 +75,26 @@ function updateTable() {
}
// Format DE flag
var de_flag = "<i class='fa-solid fa-question'></i>";
var de_flag = "<i class='fa-solid fa-circle-question'></i>";
if (s["de_flag"] && s["de_flag"] != "") {
de_flag = s["de_flag"];
}
// Format de country
var de_country = s["de_country"]
if (de_country == null) {
de_country = "Unknown or not a country"
}
// Populate the row
$tr.append(`<td>${time_formatted}</td>`);
$tr.append(`<td><span class='flag-wrapper'>${s["dx_flag"]}</span>${s["dx_call"]}</td>`);
$tr.append(`<td>${freq_string}</td>`);
$tr.append(`<td>${s["mode"]}</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>${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>`);
$tr.append(`<td>${sig_refs}</td>`);
$tr.append(`<td><span class='flag-wrapper'>${s["de_flag"]}</span>${s["de_call"]}</td>`);
$tr.append(`<td><span class='flag-wrapper' title='${de_country}'>${de_flag}</span>${s["de_call"]}</td>`);
table.find('tbody').append($tr);
});
@@ -87,8 +113,15 @@ function loadStatus() {
// spots repeatedly.
function loadOptions() {
$.getJSON('/api/options', function(jsonData) {
// Store options
options = jsonData;
console.log(options); //todo remove
// Separately store colour lookups for bands
options["bands"].forEach(m => {
band_colors[m["name"]] = m["color"]
});
// Load spots and set up the timer
loadSpots();
setInterval(loadSpots, REFRESH_INTERVAL_SEC * 1000)
});