Move Display-like settings into Display panel, add input for grid locator and (not yet implemented) toggles for columns. #19

This commit is contained in:
Ian Renton
2025-10-12 10:06:09 +01:00
parent 3500ec7e03
commit b61f08768c
8 changed files with 260 additions and 68 deletions

View File

@@ -39,7 +39,7 @@ function buildQueryString() {
// Update the alerts table
function updateTable() {
// Use local time instead of UTC?
var useLocalTime = $("#useLocalTime")[0].checked;
var useLocalTime = $("#timeZone")[0].value == "local";
// Populate table with headers
let table = $('<table class="table table-striped-custom table-hover">').append('<thead><tr class="table-primary"></tr></thead><tbody></tbody>');
@@ -89,7 +89,7 @@ function addAlertRowsToTable(tbody, alerts) {
let $tr = $('<tr>');
// Use local time instead of UTC?
var useLocalTime = $("#useLocalTime")[0].checked;
var useLocalTime = $("#timeZone")[0].value == "local";
// Get times for the alert, and convert to local time if necessary.
var start_time_unix = moment.unix(a["start_time"]);
@@ -226,7 +226,7 @@ function generateMaxDurationDropdownFilterCard(band_options) {
let $card = $("<div class='card'>");
let $card_body = $("<div class='card-body'>");
$card_body.append(`<h5 class='card-title'>Duration Limit <i class='fa-solid fa-circle-question' title='Some users create long-duration alerts for the period they will be generally in and around xOTA references, when they are not indending to be on the air most of the time. Use this control to restrict the maximum duration of spots that the software will display, and exclude any with a long duration, to avoid these filling up the list. By default, we allow DXpeditions to be displayed even if they are longer than this limit, because on a DXpedition the operators typically ARE on the air most of the time.'></i></h5>`);
$p = $("<p class='card-text filter-card-text'>");
$p = $("<p class='card-text spothole-card-text'>");
$p.append("Hide any alerts lasting more than:<br/>");
$p.append(`<select id="max-duration" class="storeable-select form-select" onclick="filtersUpdated();" style="width: 8em; display: inline-block;">
<option value="10800">3 hours</option>
@@ -237,7 +237,7 @@ function generateMaxDurationDropdownFilterCard(band_options) {
<option value="9999999999">No limit</option>
</select>`);
$p2 = $("<p class='card-text filter-card-text' style='line-height: 1.5em !important;'>");
$p2 = $("<p class='card-text spothole-card-text' style='line-height: 1.5em !important;'>");
$p2.append(`<input class="form-check-input storeable-checkbox" type="checkbox" value="" onclick="filtersUpdated();" id="dxpeditions_skip_max_duration_check" checked><label class="form-check-label ms-2" for="dxpeditions_skip_max_duration_check">Allow DXpeditions that are longer</label>`);
// Compile HTML elements to return
$card_body.append($p);
@@ -252,15 +252,32 @@ function filtersUpdated() {
loadAlerts();
saveSettings();
}
// Set up UI element event listeners, after the document is ready
function setUpEventListeners() {
$("#filters-button").click(function() {
$("#filters-area").toggle();
});
$("#close-filters-button").click(function() {
$("#filters-button").button("toggle");
// React to toggling/closing panels
function toggleFiltersPanel() {
// If we are going to display the filters panel, hide the display panel
if (!$("#filters-area").is(":visible") && $("#display-area").is(":visible")) {
$("#display-area").hide();
$("#display-button").button("toggle");
}
$("#filters-area").toggle();
}
function closeFiltersPanel() {
$("#filters-button").button("toggle");
$("#filters-area").hide();
}
function toggleDisplayPanel() {
// If we are going to display status, load the data for the status panel, and hide the filters panel
if (!$("#display-area").is(":visible") && $("#filters-area").is(":visible")) {
$("#filters-area").hide();
});
$("#filters-button").button("toggle");
}
$("#display-area").toggle();
}
function closeDisplayPanel() {
$("#display-button").button("toggle");
$("#display-area").hide();
}
// Startup
@@ -269,6 +286,4 @@ $(document).ready(function() {
loadOptions();
// Update the refresh timing display every second
setInterval(updateRefreshDisplay, 1000);
// Set up event listeners
setUpEventListeners();
});