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

Add max_duration filter for alerts #17

Browse Source
This commit is contained in:
Ian Renton
2025-10-07 20:36:46 +01:00
parent 63429c16c3
commit 73ef0c7621
5 changed files with 48 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
views/webpage_alerts.tpl
View File

@@ -25,14 +25,14 @@
</div> </div>
<div class="card-body"> <div class="card-body">
<div id="settings-container" class="row row-cols-1 row-cols-md-4 g-4"></div> <div id="settings-container" class="row row-cols-1 row-cols-md-3 g-4"></div>
</div> </div>
</div> </div>
<div id="table-container"></div> <div id="table-container"></div>
<p>Alerts to view: <p>Alerts to view:
<select id="alerts-to-fetch" class="storeable-select form-select ms-2" style="width: 5em;display: inline-block;"> <select id="alerts-to-fetch" class="storeable-select form-select ms-2" onclick="filtersUpdated();" style="width: 5em;display: inline-block;">
<option value="25">25</option> <option value="25">25</option>
<option value="50">50</option> <option value="50">50</option>
<option value="100" selected>100</option> <option value="100" selected>100</option>

2
views/webpage_spots.tpl
View File

@@ -66,7 +66,7 @@
<div id="table-container"></div> <div id="table-container"></div>
<p>Spots to view: <p>Spots to view:
<select id="spots-to-fetch" class="storeable-select form-select ms-2" style="width: 5em;display: inline-block;"> <select id="spots-to-fetch" class="storeable-select form-select ms-2" onclick="filtersUpdated();" style="width: 5em;display: inline-block;">
<option value="10">10</option> <option value="10">10</option>
<option value="25">25</option> <option value="25">25</option>
<option value="50" selected>50</option> <option value="50" selected>50</option>

40
webassets/js/alerts.js
View File

@@ -26,7 +26,10 @@ function buildQueryString() {
} }
}); });
str = str + "limit=" + $("#alerts-to-fetch option:selected").val(); str = str + "limit=" + $("#alerts-to-fetch option:selected").val();
str = str + "&max_duration=604800"; var maxDur = $("#max-duration option:selected").val();
if (maxDur != "") {
str = str + "&max_duration=" + maxDur;
}
return str; return str;
} }
@@ -139,8 +142,12 @@ function loadOptions() {
options = jsonData; options = jsonData;
// Populate the filters panel // Populate the filters panel
$("#settings-container").append(generateFilterCard("DX Continent", "dx_continent", options["continents"])); $("#settings-container").append(generateMultiToggleFilterCard("DX Continent", "dx_continent", options["continents"]));
$("#settings-container").append(generateFilterCard("Sources", "source", options["alert_sources"])); $("#settings-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"]));
// Load settings from settings storage // Load settings from settings storage
loadSettings(); loadSettings();
@@ -151,6 +158,30 @@ 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</h5>`);
$p = $("<p class='card-text filter-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="">No limit</option>
</select>`);
$p.append(" <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, not just the times they are specifically on the air. Use this control to restrict the maximum duration of spots that the software will display, and exclude any with a long duration.'></i>");
// Compile HTML elements to return
$card_body.append($p);
$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. // Method called when any filter is changed to reload the alerts and persist the filter settings.
function filtersUpdated() { function filtersUpdated() {
loadAlerts(); loadAlerts();
@@ -165,9 +196,6 @@ function setUpEventListeners() {
$("#settings-button").button("toggle"); $("#settings-button").button("toggle");
$("#settings-area").hide(); $("#settings-area").hide();
}); });
$("#alerts-to-fetch").click(function() {
filtersUpdated();
});
} }
// Startup // Startup

4
webassets/js/common.js
View File

@@ -28,8 +28,8 @@ function allFilterOptionsSelected(parameter) {
} }
// Generate filter card // Generate a filter card with multiple toggle buttons plus All/None buttons
function generateFilterCard(displayName, filterQuery, options) { function generateMultiToggleFilterCard(displayName, filterQuery, options) {
let $col = $("<div class='col'>") let $col = $("<div class='col'>")
let $card = $("<div class='card'>"); let $card = $("<div class='card'>");
let $card_body = $("<div class='card-body'>"); let $card_body = $("<div class='card-body'>");

21
webassets/js/spots.js
View File

@@ -193,11 +193,11 @@ function loadOptions() {
addBandColourCSS(options["bands"]); addBandColourCSS(options["bands"]);
// Populate the filters panel // Populate the filters panel
$("#settings-container-1").append(generateBandsFilterCard("Bands", "band", options["bands"])); $("#settings-container-1").append(generateBandsMultiToggleFilterCard(options["bands"]));
$("#settings-container-2").append(generateFilterCard("DX Continent", "dx_continent", options["continents"])); $("#settings-container-2").append(generateMultiToggleFilterCard("DX Continent", "dx_continent", options["continents"]));
$("#settings-container-2").append(generateFilterCard("DE Continent", "de_continent", options["continents"])); $("#settings-container-2").append(generateMultiToggleFilterCard("DE Continent", "de_continent", options["continents"]));
$("#settings-container-2").append(generateFilterCard("Modes", "mode_type", options["mode_types"])); $("#settings-container-2").append(generateMultiToggleFilterCard("Modes", "mode_type", options["mode_types"]));
$("#settings-container-2").append(generateFilterCard("Sources", "source", options["spot_sources"])); $("#settings-container-2").append(generateMultiToggleFilterCard("Sources", "source", options["spot_sources"]));
// Load settings from settings storage // Load settings from settings storage
loadSettings(); loadSettings();
@@ -223,21 +223,21 @@ function addBandColourCSS(band_options) {
} }
// Generate bands filter card. This one is a special case. // Generate bands filter card. This one is a special case.
function generateBandsFilterCard(displayName, filterQuery, band_options) { function generateBandsMultiToggleFilterCard(band_options) {
let $col = $("<div class='col'>") let $col = $("<div class='col'>")
let $card = $("<div class='card'>"); let $card = $("<div class='card'>");
let $card_body = $("<div class='card-body'>"); let $card_body = $("<div class='card-body'>");
$card_body.append(`<h5 class='card-title'>${displayName}</h5>`); $card_body.append(`<h5 class='card-title'>Bands</h5>`);
$p = $("<p class='card-text filter-card-text'>"); $p = $("<p class='card-text filter-card-text'>");
// Create a button for each option // Create a button for each option
band_options.forEach(o => { 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 // CSS doesn't like IDs with decimal points in, so we need to replace that in the same way as when we originally
// queried the options endpoint and set our CSS. // queried the options endpoint and set our CSS.
var cssFormattedBandName = o['name'] ? o['name'].replace('.', 'p') : "unknown"; var cssFormattedBandName = o['name'] ? o['name'].replace('.', 'p') : "unknown";
$p.append(`<input type="checkbox" class="btn-check filter-button-${filterQuery} storeable-checkbox" name="options" id="filter-button-${filterQuery}-${cssFormattedBandName}" value="${o['name']}" autocomplete="off" onClick="filtersUpdated()" checked><label class="btn btn-outline" id="filter-button-label-${filterQuery}-${cssFormattedBandName}" for="filter-button-${filterQuery}-${cssFormattedBandName}">${o['name']}</label> `); $p.append(`<input type="checkbox" class="btn-check filter-button-bands storeable-checkbox" name="options" id="filter-button-bands-${cssFormattedBandName}" value="${o['name']}" autocomplete="off" onClick="filtersUpdated()" checked><label class="btn btn-outline" id="filter-button-label-bands-${cssFormattedBandName}" for="filter-button-bands-${cssFormattedBandName}">${o['name']}</label> `);
}); });
// Create All/None buttons // Create All/None buttons
$p.append(` <span style="display: inline-block"><button id="filter-button-${filterQuery}-all" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('${filterQuery}', true);">All</button>&nbsp;<button id="filter-button-${filterQuery}-none" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('${filterQuery}', false);">None</button></span>`); $p.append(` <span style="display: inline-block"><button id="filter-button-bands-all" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('bands', true);">All</button>&nbsp;<button id="filter-button-bands-none" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('bands', false);">None</button></span>`);
// Compile HTML elements to return // Compile HTML elements to return
$card_body.append($p); $card_body.append($p);
$card.append($card_body); $card.append($card_body);
@@ -280,9 +280,6 @@ function setUpEventListeners() {
$("#settings-button").button("toggle"); $("#settings-button").button("toggle");
$("#settings-area").hide(); $("#settings-area").hide();
}); });
$("#spots-to-fetch").click(function() {
filtersUpdated();
});
} }
// Display the intro box, unless the user has already dismissed it once. // Display the intro box, unless the user has already dismissed it once.