mirror of
https://git.ianrenton.com/ian/spothole.git
synced 2025-10-27 08:49:27 +00:00
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
@@ -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();
|
||||
});
|
||||
@@ -34,7 +34,7 @@ function generateMultiToggleFilterCard(displayName, filterQuery, options) {
|
||||
let $card = $("<div class='card'>");
|
||||
let $card_body = $("<div class='card-body'>");
|
||||
$card_body.append(`<h5 class='card-title'>${displayName}</h5>`);
|
||||
$p = $("<p class='card-text filter-card-text'>");
|
||||
$p = $("<p class='card-text spothole-card-text'>");
|
||||
// Create a button for each option
|
||||
options.forEach(o => {
|
||||
$p.append(`<input type="checkbox" class="btn-check filter-button-${filterQuery} storeable-checkbox" name="options" id="filter-button-${filterQuery}-${o}" value="${o}" autocomplete="off" onClick="filtersUpdated()" checked><label class="btn btn-outline-primary" for="filter-button-${filterQuery}-${o}">${o}</label> `);
|
||||
@@ -98,7 +98,7 @@ function escapeHtml(str) {
|
||||
}
|
||||
|
||||
// When the "use local time" field is changed, reload the table and save settings
|
||||
function localTimeUpdated() {
|
||||
function timeZoneUpdated() {
|
||||
updateTable();
|
||||
saveSettings();
|
||||
}
|
||||
@@ -108,10 +108,13 @@ function saveSettings() {
|
||||
// Find all storeable UI elements, store a key of "element id:property name" mapped to the value of that
|
||||
// property. For a checkbox, that's the "checked" property.
|
||||
$(".storeable-checkbox").each(function() {
|
||||
localStorage.setItem("#" + $(this)[0].id + ":checked", $(this)[0].checked);
|
||||
localStorage.setItem("#" + $(this)[0].id + ":checked", JSON.stringify($(this)[0].checked));
|
||||
});
|
||||
$(".storeable-select").each(function() {
|
||||
localStorage.setItem("#" + $(this)[0].id + ":value", $(this)[0].value);
|
||||
localStorage.setItem("#" + $(this)[0].id + ":value", JSON.stringify($(this)[0].value));
|
||||
});
|
||||
$(".storeable-text").each(function() {
|
||||
localStorage.setItem("#" + $(this)[0].id + ":value", JSON.stringify($(this)[0].value));
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -32,7 +32,7 @@ function buildQueryString() {
|
||||
// Update the spots 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>');
|
||||
@@ -211,7 +211,7 @@ function generateBandsMultiToggleFilterCard(band_options) {
|
||||
let $card = $("<div class='card'>");
|
||||
let $card_body = $("<div class='card-body'>");
|
||||
$card_body.append(`<h5 class='card-title'>Bands</h5>`);
|
||||
$p = $("<p class='card-text filter-card-text'>");
|
||||
$p = $("<p class='card-text spothole-card-text'>");
|
||||
// Create a button for each option
|
||||
band_options.forEach(o => {
|
||||
// CSS doesn't like IDs with decimal points in, so we need to replace that in the same way as when we originally
|
||||
@@ -234,15 +234,31 @@ function filtersUpdated() {
|
||||
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();
|
||||
}
|
||||
|
||||
// Display the intro box, unless the user has already dismissed it once.
|
||||
@@ -261,8 +277,6 @@ $(document).ready(function() {
|
||||
loadOptions();
|
||||
// Update the refresh timing display every second
|
||||
setInterval(updateRefreshDisplay, 1000);
|
||||
// Set up event listeners
|
||||
setUpEventListeners();
|
||||
// Display intro box
|
||||
displayIntroBox();
|
||||
});
|
||||
Reference in New Issue
Block a user