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

Provide UTC/local toggle. Closes #32

Browse Source
This commit is contained in:
Ian Renton
2025-10-08 17:16:56 +01:00
parent 62c187178b
commit 1843286f92
6 changed files with 109 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
webassets/js/alerts.js
View File

@@ -35,10 +35,13 @@ function buildQueryString() {
// Update the alerts table
function updateTable() {
// Use local time instead of UTC?
var useLocalTime = $("#useLocalTime")[0].checked;
// Populate table with headers
let table = $('<table class="table table-striped-custom table-hover">').append('<thead><tr class="table-primary"></tr></thead><tbody></tbody>');
table.find('thead tr').append(`<th>Start UTC</th>`);
table.find('thead tr').append(`<th>End UTC</th>`);
table.find('thead tr').append(`<th>${useLocalTime ? "Start&nbsp;(Local)" : "Start&nbsp;UTC"}</th>`);
table.find('thead tr').append(`<th>${useLocalTime ? "End&nbsp;(Local)" : "End&nbsp;UTC"}</th>`);
table.find('thead tr').append(`<th>DX</th>`);
table.find('thead tr').append(`<th class='hideonmobile'>Freq<span class='hideonmobile'>uencie</span>s & Modes</th>`);
table.find('thead tr').append(`<th class='hideonmobile'>Comment</th>`);
@@ -82,18 +85,31 @@ function addAlertRowsToTable(tbody, alerts) {
// Create row
let $tr = $('<tr>');
// Format UTC times for display. Start time is displayed as e.g. 7 Oct 12:34 unless the time is in a different
// year to the current year, in which case the year is inserted between month and hour.
// Use local time instead of UTC?
var useLocalTime = $("#useLocalTime")[0].checked;
// Get times for the alert, and convert to local time if necessary.
var start_time = moment.unix(a["start_time"]).utc();
if (useLocalTime) {
start_time = start_time.local();
}
var end_time_unix = moment.unix(a["end_time"]);
var end_time = end_time_unix.utc();
if (useLocalTime) {
end_time = end_time.local();
}
// Format the times for display. Start time is displayed as e.g. 7 Oct 12:34 unless the time is in a
// different year to the current year, in which case the year is inserted between month and hour.
// If the time is set to local not UTC, and the date in local time is "today", we display that instead.
// End time is displayed the same as above, except if the end date is the same as the start date, in which case
// just e.g. 23:45 is used. Finally, if there is no end date set, "---" is displayed.
var start_time = moment.unix(a["start_time"]).utc();
var start_time_formatted = start_time.format("D MMM HH:mm");
if (start_time.format("YYYY") != moment().format("YYYY")) {
start_time_formatted = start_time.format("D MMM YYYY HH:mm");
} else if (useLocalTime && start_time.format("D MMM YYYY") == moment().format("D MMM YYYY")) {
start_time_formatted = start_time.format("[Today] HH:mm");
}
var end_time_unix = moment.unix(a["end_time"]);
var end_time = end_time_unix.utc();
var end_time_formatted = "---";
if (end_time_unix != null && end_time_unix > 0 && end_time != null) {
var end_time_formatted = end_time.format("HH:mm");
@@ -166,14 +182,14 @@ function loadOptions() {
options = jsonData;
// Populate the filters panel
$("#settings-container").append(generateMultiToggleFilterCard("DX Continent", "dx_continent", options["continents"]));
$("#settings-container").append(generateMultiToggleFilterCard("Sources", "source", options["alert_sources"]));
$("#filters-container").append(generateMultiToggleFilterCard("DX Continent", "dx_continent", options["continents"]));
$("#filters-container").append(generateMultiToggleFilterCard("Sources", "source", options["alert_sources"]));
// Options doesn't give us anything for Max Duration as it's a free numeric input, but we generate our own
// filter card for this.
$("#settings-container").append(generateMaxDurationDropdownFilterCard(options["alert_sources"]));
$("#filters-container").append(generateMaxDurationDropdownFilterCard(options["alert_sources"]));
// Load settings from settings storage
// Load filters from settings storage
loadSettings();
// Load alerts and set up the timer
@@ -213,12 +229,12 @@ function filtersUpdated() {
}
// Set up UI element event listeners, after the document is ready
function setUpEventListeners() {
$("#settings-button").click(function() {
$("#settings-area").toggle();
$("#filters-button").click(function() {
$("#filters-area").toggle();
});
$("#close-settings-button").click(function() {
$("#settings-button").button("toggle");
$("#settings-area").hide();
$("#close-filters-button").click(function() {
$("#filters-button").button("toggle");
$("#filters-area").hide();
});
}

6
webassets/js/common.js
View File

@@ -97,6 +97,12 @@ function escapeHtml(str) {
return str.replace(/[&<>"'`]/g, escapeCharacter);
}
// When the "use local time" field is changed, reload the table and save settings
function localTimeUpdated() {
updateTable();
saveSettings();
}
// Save settings to local storage
function saveSettings() {
// Find all storeable UI elements, store a key of "element id:property name" mapped to the value of that

32
webassets/js/spots.js
View File

@@ -31,9 +31,12 @@ function buildQueryString() {
// Update the spots table
function updateTable() {
// Use local time instead of UTC?
var useLocalTime = $("#useLocalTime")[0].checked;
// Populate table with headers
let table = $('<table class="table table-striped-custom table-hover">').append('<thead><tr class="table-primary"></tr></thead><tbody></tbody>');
table.find('thead tr').append(`<th>UTC</th>`);
table.find('thead tr').append(`<th>${useLocalTime ? "Local" : "UTC"}</th>`);
table.find('thead tr').append(`<th>DX</th>`);
table.find('thead tr').append(`<th>Freq<span class='hideonmobile'>uency</span></th>`);
table.find('thead tr').append(`<th>Mode</th>`);
@@ -55,8 +58,11 @@ function updateTable() {
$tr.addClass("table-faded");
}
// Format a UTC time for display
// Format a UTC or local time for display
var time = moment.unix(s["time"]).utc();
if (useLocalTime) {
time = time.local();
}
var time_formatted = time.format("HH:mm");
// Format DX flag
@@ -157,13 +163,13 @@ function loadOptions() {
addBandColourCSS(options["bands"]);
// Populate the filters panel
$("#settings-container-1").append(generateBandsMultiToggleFilterCard(options["bands"]));
$("#settings-container-2").append(generateMultiToggleFilterCard("DX Continent", "dx_continent", options["continents"]));
$("#settings-container-2").append(generateMultiToggleFilterCard("DE Continent", "de_continent", options["continents"]));
$("#settings-container-2").append(generateMultiToggleFilterCard("Modes", "mode_type", options["mode_types"]));
$("#settings-container-2").append(generateMultiToggleFilterCard("Sources", "source", options["spot_sources"]));
$("#filters-container-1").append(generateBandsMultiToggleFilterCard(options["bands"]));
$("#filters-container-2").append(generateMultiToggleFilterCard("DX Continent", "dx_continent", options["continents"]));
$("#filters-container-2").append(generateMultiToggleFilterCard("DE Continent", "de_continent", options["continents"]));
$("#filters-container-2").append(generateMultiToggleFilterCard("Modes", "mode_type", options["mode_types"]));
$("#filters-container-2").append(generateMultiToggleFilterCard("Sources", "source", options["spot_sources"]));
// Load settings from settings storage
// Load filters from settings storage
loadSettings();
// Load spots and set up the timer
@@ -217,12 +223,12 @@ function filtersUpdated() {
// Set up UI element event listeners, after the document is ready
function setUpEventListeners() {
$("#settings-button").click(function() {
$("#settings-area").toggle();
$("#filters-button").click(function() {
$("#filters-area").toggle();
});
$("#close-settings-button").click(function() {
$("#settings-button").button("toggle");
$("#settings-area").hide();
$("#close-filters-button").click(function() {
$("#filters-button").button("toggle");
$("#filters-area").hide();
});
}