diff --git a/views/webpage_alerts.tpl b/views/webpage_alerts.tpl index 2f24278..33b9227 100644 --- a/views/webpage_alerts.tpl +++ b/views/webpage_alerts.tpl @@ -25,14 +25,14 @@
-
+

Alerts to view: - diff --git a/views/webpage_spots.tpl b/views/webpage_spots.tpl index cc9fe75..ec014d0 100644 --- a/views/webpage_spots.tpl +++ b/views/webpage_spots.tpl @@ -66,7 +66,7 @@

Spots to view: - diff --git a/webassets/js/alerts.js b/webassets/js/alerts.js index c4ad8fa..e09fb7a 100644 --- a/webassets/js/alerts.js +++ b/webassets/js/alerts.js @@ -26,7 +26,10 @@ function buildQueryString() { } }); 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; } @@ -139,8 +142,12 @@ function loadOptions() { options = jsonData; // Populate the filters panel - $("#settings-container").append(generateFilterCard("DX Continent", "dx_continent", options["continents"])); - $("#settings-container").append(generateFilterCard("Sources", "source", options["alert_sources"])); + $("#settings-container").append(generateMultiToggleFilterCard("DX Continent", "dx_continent", options["continents"])); + $("#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 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 = $("

") + let $card = $("
"); + let $card_body = $("
"); + $card_body.append(`
Duration Limit
`); + $p = $("

"); + $p.append("Hide any alerts lasting more than:
"); + $p.append(``); + $p.append(" "); + // 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. function filtersUpdated() { loadAlerts(); @@ -165,9 +196,6 @@ function setUpEventListeners() { $("#settings-button").button("toggle"); $("#settings-area").hide(); }); - $("#alerts-to-fetch").click(function() { - filtersUpdated(); - }); } // Startup diff --git a/webassets/js/common.js b/webassets/js/common.js index d24c645..1efe32e 100644 --- a/webassets/js/common.js +++ b/webassets/js/common.js @@ -28,8 +28,8 @@ function allFilterOptionsSelected(parameter) { } -// Generate filter card -function generateFilterCard(displayName, filterQuery, options) { +// Generate a filter card with multiple toggle buttons plus All/None buttons +function generateMultiToggleFilterCard(displayName, filterQuery, options) { let $col = $("

") let $card = $("
"); let $card_body = $("
"); diff --git a/webassets/js/spots.js b/webassets/js/spots.js index 3c3274e..6200206 100644 --- a/webassets/js/spots.js +++ b/webassets/js/spots.js @@ -193,11 +193,11 @@ function loadOptions() { addBandColourCSS(options["bands"]); // Populate the filters panel - $("#settings-container-1").append(generateBandsFilterCard("Bands", "band", options["bands"])); - $("#settings-container-2").append(generateFilterCard("DX Continent", "dx_continent", options["continents"])); - $("#settings-container-2").append(generateFilterCard("DE Continent", "de_continent", options["continents"])); - $("#settings-container-2").append(generateFilterCard("Modes", "mode_type", options["mode_types"])); - $("#settings-container-2").append(generateFilterCard("Sources", "source", options["spot_sources"])); + $("#settings-container-1").append(generateBandsMultiToggleFilterCard(options["bands"])); + $("#settings-container-2").append(generateMultiToggleFilterCard("DX Continent", "dx_continent", options["continents"])); + $("#settings-container-2").append(generateMultiToggleFilterCard("DE Continent", "de_continent", options["continents"])); + $("#settings-container-2").append(generateMultiToggleFilterCard("Modes", "mode_type", options["mode_types"])); + $("#settings-container-2").append(generateMultiToggleFilterCard("Sources", "source", options["spot_sources"])); // Load settings from settings storage loadSettings(); @@ -223,21 +223,21 @@ function addBandColourCSS(band_options) { } // Generate bands filter card. This one is a special case. -function generateBandsFilterCard(displayName, filterQuery, band_options) { +function generateBandsMultiToggleFilterCard(band_options) { let $col = $("
") let $card = $("
"); let $card_body = $("
"); - $card_body.append(`
${displayName}
`); + $card_body.append(`
Bands
`); $p = $("

"); // 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 // queried the options endpoint and set our CSS. var cssFormattedBandName = o['name'] ? o['name'].replace('.', 'p') : "unknown"; - $p.append(` `); + $p.append(` `); }); // Create All/None buttons - $p.append(`  `); + $p.append(`  `); // Compile HTML elements to return $card_body.append($p); $card.append($card_body); @@ -280,9 +280,6 @@ function setUpEventListeners() { $("#settings-button").button("toggle"); $("#settings-area").hide(); }); - $("#spots-to-fetch").click(function() { - filtersUpdated(); - }); } // Display the intro box, unless the user has already dismissed it once.