diff --git a/views/webpage_alerts.tpl b/views/webpage_alerts.tpl index 4f7a553..8012377 100644 --- a/views/webpage_alerts.tpl +++ b/views/webpage_alerts.tpl @@ -26,7 +26,45 @@
-
+
+
+
+
+
DX Continent
+

+
+
+
+
+
+
+
Sources
+

+
+
+
+
+
+
+
Duration Limit
+

+ Hide any alerts lasting more than:
+ +

+

+ +

+
+
+
+
diff --git a/views/webpage_spots.tpl b/views/webpage_spots.tpl index 5e0bccb..d9ca3a5 100644 --- a/views/webpage_spots.tpl +++ b/views/webpage_spots.tpl @@ -22,6 +22,7 @@

+

@@ -41,8 +42,50 @@
-
-
+
+
+
+
+
Bands
+

+
+
+
+
+
+
+
+
+
DX Continent
+

+
+
+
+
+
+
+
DE Continent
+

+
+
+
+
+
+
+
Modes
+

+
+
+
+
+
+
+
Sources
+

+
+
+
+
diff --git a/webassets/css/style.css b/webassets/css/style.css index cebe765..204ca34 100644 --- a/webassets/css/style.css +++ b/webassets/css/style.css @@ -47,6 +47,10 @@ div.appearing-panel { display: none; } +button#add-spot-button { + display: none; +} + .spothole-card-text { line-height: 2.5em !important; } diff --git a/webassets/js/alerts.js b/webassets/js/alerts.js index 58809ca..a908850 100644 --- a/webassets/js/alerts.js +++ b/webassets/js/alerts.js @@ -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 = $("
") - let $card = $("
"); - let $card_body = $("
"); - $card_body.append(`
Duration Limit
`); - $p = $("

"); - $p.append("Hide any alerts lasting more than:
"); - $p.append(``); - - $p2 = $("

"); - $p2.append(``); - // 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(); diff --git a/webassets/js/common.js b/webassets/js/common.js index dc1f2db..08386f8 100644 --- a/webassets/js/common.js +++ b/webassets/js/common.js @@ -28,24 +28,14 @@ function allFilterOptionsSelected(parameter) { } -// Generate a filter card with multiple toggle buttons plus All/None buttons -function generateMultiToggleFilterCard(displayName, filterQuery, options) { - let $col = $("

") - let $card = $("
"); - let $card_body = $("
"); - $card_body.append(`
${displayName}
`); - $p = $("

"); +// Generate a filter card with multiple toggle buttons plus All/None buttons. +function generateMultiToggleFilterCard(elementID, filterQuery, options) { // Create a button for each option options.forEach(o => { - $p.append(` `); + $(elementID).append(` `); }); // Create All/None buttons - $p.append(`  `); - // Compile HTML elements to return - $card_body.append($p); - $card.append($card_body); - $col.append($card); - return $col; + $(elementID).append(`  `); } // Method called when "All" or "None" is clicked diff --git a/webassets/js/spots.js b/webassets/js/spots.js index 821ae7f..c3a5d4b 100644 --- a/webassets/js/spots.js +++ b/webassets/js/spots.js @@ -255,11 +255,11 @@ function loadOptions() { addBandColourCSS(options["bands"]); // Populate the filters panel - $("#filters-container-1").append(generateBandsMultiToggleFilterCard(options["bands"])); - $("#filters-container-2").append(generateMultiToggleFilterCard("DX Continent", "dx_continent", options["continents"])); - $("#filters-container-2").append(generateMultiToggleFilterCard("DE Continent", "de_continent", options["continents"])); - $("#filters-container-2").append(generateMultiToggleFilterCard("Modes", "mode_type", options["mode_types"])); - $("#filters-container-2").append(generateMultiToggleFilterCard("Sources", "source", options["spot_sources"])); + generateBandsMultiToggleFilterCard(options["bands"]); + generateMultiToggleFilterCard("#dx-continent-options", "dx_continent", options["continents"]); + generateMultiToggleFilterCard("#de-continent-options", "de_continent", options["continents"]); + generateMultiToggleFilterCard("#mode-options", "mode_type", options["mode_types"]); + generateMultiToggleFilterCard("#source-options", "source", options["spot_sources"]); // Load settings from settings storage now all the controls are available loadSettings(); @@ -272,6 +272,11 @@ function loadOptions() { $("#tableShowBearing").prop('checked', false); } + // Show the Add Spot button if spotting is allowed + if (options["spot_allowed"]) { + $("#add-spot-button").show(); + } + // Load spots and set up the timer loadSpots(); setInterval(loadSpots, REFRESH_INTERVAL_SEC * 1000); @@ -294,25 +299,15 @@ function addBandColourCSS(band_options) { // Generate bands filter card. This one is a special case. function generateBandsMultiToggleFilterCard(band_options) { - let $col = $("

") - let $card = $("
"); - let $card_body = $("
"); - $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(` `); + $("#band-options").append(` `); }); // Create All/None buttons - $p.append(`  `); - // Compile HTML elements to return - $card_body.append($p); - $card.append($card_body); - $col.append($card); - return $col; + $("#band-options").append(`  `); } // Work out if the user's entered grid is a valid Maidenhead grid