Provide UTC/local toggle. Closes #32

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

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();
});
}