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 17:19:38 +01:00
parent 4f2c19b666
commit 6a3f1d2e10
7 changed files with 134 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
webassets/css/style.css
View File

@@ -9,8 +9,33 @@
}
}
span.flag-wrapper {
display: inline-block;
width: 1.7em;
}
span.icon-wrapper {
display: inline-block;
width: 1.5em;
text-align: center;
}
span.freq-mhz {
display: inline-block;
width: 2em;
text-align: right;
font-weight: bold;
}
span.freq-khz {
padding: 0 0.2em;
}
span.freq-hz {
font-size: 0.8em;
}
tr.table-faded td {
color: gray;
text-decoration: line-through !important;
}

131
webassets/js/code.js
View File

@@ -1,6 +1,8 @@
// How often to query the server?
const REFRESH_INTERVAL_SEC = 60;
// Storage for the spot data that the server gives us.
var spots = []
// Storage for the options that the server gives us. This will define our filters.
var options = {};
// Last time we updated the spots list on display.
@@ -11,48 +13,69 @@ function loadSpots() {
$.getJSON('/api/spots', function(jsonData) {
// Store last updated time
lastUpdateTime = moment.utc();
// Populate table with headers
let headers = Object.keys(jsonData[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", "DE"].forEach(header => table.find('thead tr').append(`<th>${header}</th>`));
jsonData.forEach(row => {
// Create row
let $tr = $('<tr>');
// Show in red if QRT
if (row["qrt"] == true) {
$tr.addClass("table-danger");
}
// Format a UTC time for display
var time = moment.utc(row["time"], moment.ISO_8601);
var time_formatted = time.format("HH:mm")
// Figure out a SIG or Source
var source = row["source"];
if (row["sig"]) {
source = row["sig"];
}
// Populate the table data
$tr.append(`<td>${time_formatted}</td>`);
$tr.append(`<td>${row["dx_flag"]}&nbsp;${row["dx_call"]}</td>`);
$tr.append(`<td>${row["freq"]}</td>`);
$tr.append(`<td>${row["mode"]}</td>`);
$tr.append('<td>' + escapeHtml(`${row["comment"]}`) + '</td>');
$tr.append(`<td><span class='icon-wrapper'><i class='fa-solid fa-${row["icon"]}'></i></span> ${source}</td>`);
$tr.append(`<td>${row["de_flag"]}&nbsp;${row["de_call"]}</td>`);
table.find('tbody').append($tr);
});
// Update DOM
$('#table-container').html(table);
updateRefreshDisplay();
// Store data
spots = jsonData;
// Update table
updateTable();
});
}
// 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>`));
spots.forEach(s => {
// Create row
let $tr = $('<tr>');
// Show in red if QRT
if (s["qrt"] == true) {
$tr.addClass("table-faded");
}
// Format a UTC time for display
var time = moment.utc(s["time"], moment.ISO_8601);
var time_formatted = time.format("HH:mm")
// Format the frequency
var mhz = Math.floor(s["freq"] / 1000.0);
var khz = Math.floor(s["freq"] - (mhz * 1000.0));
var hz = Math.floor((s["freq"] - Math.floor(s["freq"])) * 1000.0);
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 sig_refs
var sig_refs = ""
if (s["sig_refs"]) {
sig_refs = s["sig_refs"].join(", ")
}
// Format DE flag
var de_flag = "<i class='fa-solid fa-question'></i>";
if (s["de_flag"] && s["de_flag"] != "") {
de_flag = s["de_flag"];
}
// 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>' + 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>`);
table.find('tbody').append($tr);
});
// Update DOM
$('#table-container').html(table);
}
// Load server status
function loadStatus() {
$.getJSON('/api/status', function(jsonData) {
@@ -81,29 +104,29 @@ function updateRefreshDisplay() {
count = REFRESH_INTERVAL_SEC - secSinceUpdate;
updatingString = "Updating in " + count.toFixed(0) + " seconds...";
}
$("#timing-container").text("Last updated at " + lastUpdateTime.format('hh:mm') + " UTC. " + updatingString);
$("#timing-container").text("Last updated at " + lastUpdateTime.format('HH:mm') + " UTC. " + updatingString);
}
}
// Utility function to escape HTML characters from a string.
function escapeHtml(str) {
if (typeof str !== 'string') {
return '';
}
const escapeCharacter = (match) => {
switch (match) {
case '&': return '&amp;';
case '<': return '&lt;';
case '>': return '&gt;';
case '"': return '&quot;';
case '\'': return '&#039;';
case '`': return '&#096;';
default: return match;
if (typeof str !== 'string') {
return '';
}
};
return str.replace(/[&<>"'`]/g, escapeCharacter);
const escapeCharacter = (match) => {
switch (match) {
case '&': return '&amp;';
case '<': return '&lt;';
case '>': return '&gt;';
case '"': return '&quot;';
case '\'': return '&#039;';
case '`': return '&#096;';
default: return match;
}
};
return str.replace(/[&<>"'`]/g, escapeCharacter);
}