w1cdn/spothole
1
0
Fork 0
mirror of https://git.ianrenton.com/ian/spothole.git synced 2025-10-27 16:59:25 +00:00
Code Issues 11 Packages Projects Releases Wiki Activity

Do more filter panel generation in HTML, less in JS

Browse Source
This commit is contained in:
Ian Renton
2025-10-13 20:41:13 +01:00
parent cfa3aaedb0
commit c051aad157
6 changed files with 106 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
webassets/js/alerts.js
View File

@@ -263,12 +263,8 @@ function loadOptions() {
options = jsonData;
// Populate the filters panel
$("#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.
$("#filters-container").append(generateMaxDurationDropdownFilterCard(options["alert_sources"]));
generateMultiToggleFilterCard("#dx-continent-options", "dx_continent", options["continents"]);
generateMultiToggleFilterCard("#source-options", "source", options["alert_sources"]);
// Load filters from settings storage
loadSettings();
@@ -279,33 +275,6 @@ function loadOptions() {
});
}
// Generate maximum duration drop-down filter card. This one is a special case.
function generateMaxDurationDropdownFilterCard(band_options) {
let $col = $("<div class='col'>")
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 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>
<option value="43200">12 hours</option>
<option value="86400" selected>24 hours</option>
<option value="604800">1 week</option>
<option value="2419200">4 weeks</option>
<option value="9999999999">No limit</option>
</select>`);
$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);
$card_body.append($p2);
$card.append($card_body);
$col.append($card);
return $col;
}
// Method called when any filter is changed to reload the alerts and persist the filter settings.
function filtersUpdated() {
loadAlerts();