Allow filtering based on mode, not just mode type. #96

alertproviders/bota.py

@@ -20,27 +20,29 @@ class BOTA(HTTPAlertProvider):
         new_alerts = []
         # Find the table of upcoming alerts
         bs = BeautifulSoup(http_response.content.decode(), features="lxml")
-        tbody = bs.body.find('div', attrs={'class': 'view-activations-public'}).find('table', attrs={'class': 'views-table'}).find('tbody')
+        forthcoming_activations_div = bs.body.find('div', attrs={'class': 'view-activations-public'})
-        for row in tbody.find_all('tr'):
+        if forthcoming_activations_div:
-            cells = row.find_all('td')
+            tbody = forthcoming_activations_div.find('table', attrs={'class': 'views-table'}).find('tbody')
-            first_cell_text = str(cells[0].find('a').contents[0]).strip()
+            for row in tbody.find_all('tr'):
-            ref_name = first_cell_text.split(" by ")[0]
+                cells = row.find_all('td')
-            dx_call = str(cells[1].find('a').contents[0]).strip().upper()
+                first_cell_text = str(cells[0].find('a').contents[0]).strip()
+                ref_name = first_cell_text.split(" by ")[0]
+                dx_call = str(cells[1].find('a').contents[0]).strip().upper()
 
-            # Get the date, dealing with the fact we get no year so have to figure out if it's last year or next year
+                # Get the date, dealing with the fact we get no year so have to figure out if it's last year or next year
-            date_text = str(cells[2].find('span').contents[0]).strip()
+                date_text = str(cells[2].find('span').contents[0]).strip()
-            date_time = datetime.strptime(date_text,"%d %b - %H:%M UTC").replace(tzinfo=pytz.UTC)
+                date_time = datetime.strptime(date_text,"%d %b - %H:%M UTC").replace(tzinfo=pytz.UTC)
-            date_time = date_time.replace(year=datetime.now(pytz.UTC).year)
+                date_time = date_time.replace(year=datetime.now(pytz.UTC).year)
-            # If this was more than a day ago, activation is actually next year
+                # If this was more than a day ago, activation is actually next year
-            if date_time < datetime.now(pytz.UTC) - timedelta(days=1):
+                if date_time < datetime.now(pytz.UTC) - timedelta(days=1):
-                date_time = date_time.replace(year=datetime.now(pytz.UTC).year + 1)
+                    date_time = date_time.replace(year=datetime.now(pytz.UTC).year + 1)
 
-            # Convert to our alert format
+                # Convert to our alert format
-            alert = Alert(source=self.name,
+                alert = Alert(source=self.name,
-                          dx_calls=[dx_call],
+                              dx_calls=[dx_call],
-                          sig_refs=[SIGRef(id=ref_name, sig="BOTA")],
+                              sig_refs=[SIGRef(id=ref_name, sig="BOTA")],
-                          start_time=date_time.timestamp(),
+                              start_time=date_time.timestamp(),
-                          is_dxpedition=False)
+                              is_dxpedition=False)
 
-            new_alerts.append(alert)
+                new_alerts.append(alert)
         return new_alerts

core/constants.py

@@ -4,7 +4,7 @@ from data.sig import SIG
 
 # General software
 SOFTWARE_NAME = "Spothole by M0TRT"
-SOFTWARE_VERSION = "1.1.1"
+SOFTWARE_VERSION = "1.2-pre"
 
 # HTTP headers used for spot providers that use HTTP
 HTTP_HEADERS = {"User-Agent": SOFTWARE_NAME + ", v" + SOFTWARE_VERSION + " (operated by " + SERVER_OWNER_CALLSIGN + ")"}

templates/spots.html

@@ -17,17 +17,17 @@
             <p class="d-inline-flex gap-1">
                 <span class="btn-group" role="group">
                   <input type="radio" class="btn-check" name="runPause" id="runButton" autocomplete="off" checked>
-                  <label class="btn btn-outline-primary" for="runButton"><i class="fa-solid fa-play"></i> Run</label>
+                    <label class="btn btn-outline-primary" for="runButton"><i class="fa-solid fa-play"></i><span class="hideonmobile"> Run</span></label>
 
                   <input type="radio" class="btn-check" name="runPause" id="pauseButton" autocomplete="off">
-                  <label class="btn btn-outline-primary" for="pauseButton"><i class="fa-solid fa-pause"></i> Pause</label>
+                    <label class="btn btn-outline-primary" for="pauseButton"><i class="fa-solid fa-pause"></i><span class="hideonmobile"> Pause</span></label>
                 </span>
-                <span class="hideonmobile" style="position: relative;">
+                <span style="position: relative;">
                     <i id="searchicon" class="fa-solid fa-magnifying-glass"></i>
                     <input id="search" type="search" class="form-control" oninput="filtersUpdated();" placeholder="Search">
                 </span>
-                <button id="filters-button" type="button" class="btn btn-outline-primary" data-bs-toggle="button" onclick="toggleFiltersPanel();"><i class="fa-solid fa-filter"></i> Filters</button>
+                <button id="filters-button" type="button" class="btn btn-outline-primary" data-bs-toggle="button" onclick="toggleFiltersPanel();"><i class="fa-solid fa-filter"></i><span class="hideonmobile"> Filters</span></button>
-                <button id="display-button" type="button" class="btn btn-outline-primary" data-bs-toggle="button" onclick="toggleDisplayPanel();"><i class="fa-solid fa-desktop"></i> Display</button>
+                <button id="display-button" type="button" class="btn btn-outline-primary" data-bs-toggle="button" onclick="toggleDisplayPanel();"><i class="fa-solid fa-desktop"></i><span class="hideonmobile"> Display</span></button>
             </p>
         </div>
     </div>

webassets/apidocs/openapi.yml

@@ -1,3 +1,4 @@
+$schema: "https://spec.openapis.org/oas/3.1.0"
 openapi: 3.1.0
 info:
   title: Spothole API
@@ -864,7 +865,6 @@ components:
         - DSTAR
         - C4FM
         - M17
-        - DIGI
         - DATA
         - FT8
         - FT4

webassets/css/style.css

@@ -349,6 +349,9 @@ div.band-spot:hover span.band-spot-info {
         max-height: 26em;
         overflow: scroll;
     }
+    input#search {
+        max-width: 7em;
+    }
 }
 
 @media (min-width: 992px) {

webassets/js/bands.js

@@ -26,7 +26,7 @@ function loadSpots() {
 // Build a query string for the API, based on the filters that the user has selected.
 function buildQueryString() {
     var str =  "?";
-    ["dx_continent", "de_continent", "mode_type", "source", "band", "sig"].forEach(fn => {
+    ["dx_continent", "de_continent", "mode", "source", "band", "sig"].forEach(fn => {
         if (!allFilterOptionsSelected(fn)) {
             str = str + getQueryStringFor(fn) + "&";
         }
@@ -251,7 +251,7 @@ function loadOptions() {
         generateSIGsMultiToggleFilterCard(options["sigs"]);
         generateMultiToggleFilterCard("#dx-continent-options", "dx_continent", options["continents"]);
         generateMultiToggleFilterCard("#de-continent-options", "de_continent", options["continents"]);
-        generateMultiToggleFilterCard("#mode-options", "mode_type", options["mode_types"]);
+        generateModesMultiToggleFilterCard(options["modes"]);
         generateSourcesMultiToggleFilterCard(options["spot_sources"], options["web-ui-options"]["spot-providers-enabled-by-default"]);
 
         // Load URL params. These may select things from the various filter & display options, so the function needs

webassets/js/common.js

@@ -28,7 +28,7 @@ function loadURLParams() {
     updateFilterFromParam(params, "band", "band");
     updateFilterFromParam(params, "sig", "sig");
     updateFilterFromParam(params, "source", "source");
-    updateFilterFromParam(params, "mode_type", "mode_type");
+    updateFilterFromParam(params, "mode", "mode");
     updateFilterFromParam(params, "dx_continent", "dx_continent");
     updateFilterFromParam(params, "de_continent", "de_continent");
 }

webassets/js/map.js

@@ -20,7 +20,7 @@ function loadSpots() {
 // Build a query string for the API, based on the filters that the user has selected.
 function buildQueryString() {
     var str =  "?";
-    ["dx_continent", "de_continent", "mode_type", "source", "band", "sig"].forEach(fn => {
+    ["dx_continent", "de_continent", "mode", "source", "band", "sig"].forEach(fn => {
         if (!allFilterOptionsSelected(fn)) {
             str = str + getQueryStringFor(fn) + "&";
         }
@@ -183,7 +183,7 @@ function loadOptions() {
         generateSIGsMultiToggleFilterCard(options["sigs"]);
         generateMultiToggleFilterCard("#dx-continent-options", "dx_continent", options["continents"]);
         generateMultiToggleFilterCard("#de-continent-options", "de_continent", options["continents"]);
-        generateMultiToggleFilterCard("#mode-options", "mode_type", options["mode_types"]);
+        generateModesMultiToggleFilterCard(options["modes"]);
         generateSourcesMultiToggleFilterCard(options["spot_sources"], options["web-ui-options"]["spot-providers-enabled-by-default"]);
 
         // Load URL params. These may select things from the various filter & display options, so the function needs

webassets/js/spots.js

@@ -87,7 +87,7 @@ function updateTimingDisplayRunPause() {
 // Build a query string for the API, based on the filters that the user has selected.
 function buildQueryString() {
     var str =  "?";
-    ["dx_continent", "de_continent", "mode_type", "source", "band", "sig"].forEach(fn => {
+    ["dx_continent", "de_continent", "mode", "source", "band", "sig"].forEach(fn => {
         if (!allFilterOptionsSelected(fn)) {
             str = str + getQueryStringFor(fn) + "&";
         }
@@ -421,7 +421,7 @@ function loadOptions() {
         generateSIGsMultiToggleFilterCard(options["sigs"]);
         generateMultiToggleFilterCard("#dx-continent-options", "dx_continent", options["continents"]);
         generateMultiToggleFilterCard("#de-continent-options", "de_continent", options["continents"]);
-        generateMultiToggleFilterCard("#mode-options", "mode_type", options["mode_types"]);
+        generateModesMultiToggleFilterCard(options["modes"]);
         generateSourcesMultiToggleFilterCard(options["spot_sources"], options["web-ui-options"]["spot-providers-enabled-by-default"]);
 
         // Load URL params. These may select things from the various filter & display options, so the function needs

webassets/js/spotsbandsandmap.js

@@ -47,6 +47,49 @@ function generateSIGsMultiToggleFilterCard(sig_options) {
     $("#sig-options").append(` <span style="display: inline-block"><button id="filter-button-sig-all" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('sig', true);">All</button>&nbsp;<button id="filter-button-sig-none" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('sig', false);">None</button></span>`);
 }
 
+// Generate modes filter card. This one is also a special case.
+function generateModesMultiToggleFilterCard(mode_options) {
+    // Create a button for each option
+    mode_options.forEach(o => {
+        var domSafeName = o.replace(/^[^A-Za-z0-9]+|[^\w]+/gi, "");
+        $("#mode-options").append(`<input type="checkbox" class="btn-check filter-button-mode storeable-checkbox" name="options" id="filter-button-mode-${domSafeName}" value="${o}" autocomplete="off" onClick="filtersUpdated()" checked><label class="btn btn-outline-primary" id="filter-button-label-mode-${domSafeName}" for="filter-button-mode-${domSafeName}">${o}</label> `);
+    });
+    // Create All/None buttons
+    $("#mode-options").append(` <span style="display: inline-block"><button id="filter-button-mode-all" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('mode', true);">All</button>&nbsp;<button id="filter-button-mode-none" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('mode', false);">None</button></span>`);
+    // Create category buttons
+    $("#mode-options").append(` <button id="filter-button-mode-av" type="button" class="btn btn-outline-secondary" onclick="toggleAnalogVoiceModeToggles();">Analog Voice</button>&nbsp;<button id="filter-button-mode-dv" type="button" class="btn btn-outline-secondary" onclick="toggleDigitalVoiceModeToggles();">Digital Voice</button>&nbsp;<button id="filter-button-mode-digi" type="button" class="btn btn-outline-secondary" onclick="toggleDigiModeToggles();">Digimodes</button></span>`);
+}
+
+// Toggle the mode toggles that relate to Analog Voice.
+function toggleAnalogVoiceModeToggles() {
+    toggleToggles("mode", ["PHONE", "SSB", "LSB", "USB", "AM", "FM"]);
+}
+
+// Toggle the mode toggles that relate to Digital Voice.
+function toggleDigitalVoiceModeToggles() {
+    toggleToggles("mode", ["DV", "DMR", "DSTAR", "C4FM", "M17"]);
+}
+
+// Toggle the mode toggles that relate to Digimodes.
+function toggleDigiModeToggles() {
+    toggleToggles("mode", ["DATA", "FT8", "FT4", "RTTY", "SSTV", "JS8", "HELL", "PSK", "OLIVIA", "PKT", "MSK144"]);
+}
+
+// Toggle the a set of toggles of the given type (e.g. "mode") that match the given values (e.g. ["SSB", "AM", "FM"]).
+function toggleToggles(type, values) {
+    let toggle = null;
+    $(".filter-button-" + type).each(function() {
+        console.log($(this));
+        if (values.includes($(this).val().replace("filter-button-" + type, ""))) {
+            if (toggle == null) {
+                toggle = !$(this).prop('checked');
+            }
+            $(this).prop('checked', toggle);
+        }
+    });
+    filtersUpdated();
+}
+
 // Generate Sources filter card. This one is a minor special case as we create the buttons in the normal way, but then
 // set which ones are enabled by default based on config rather than having them all enabled by default. We also sanitise
 // names here for HTML elements.