Web UI options faff

README.md

@@ -10,7 +10,7 @@ The API is deliberately well-defined with an OpenAPI specification and auto-gene
 
 Spothole itself is also open source, Public Domain licenced code that anyone can take and modify.
 
-Supported data sources include DX Clusters, the Reverse Beacon Network (RBN), the APRS Internet Service (APRS-IS), POTA, SOTA, WWFF, GMA, WWBOTA, HEMA, Parks 'n' Peaks, ZLOTA, WOTA, BOTA, the UK Packet Repeater Network, NG3K, and any site based on the xOTA software by nischu.
+Supported data sources include DX Clusters, the Reverse Beacon Network (RBN), the APRS Internet Service (APRS-IS), POTA, SOTA, WWFF, GMA, WWBOTA, HEMA, Parks 'n' Peaks, ZLOTA, WOTA, BOTA, LLOTA, WWTOTA, the UK Packet Repeater Network, NG3K, and any site based on the xOTA software by nischu.
 
 ![Screenshot](/images/screenshot2.png)
 
@@ -34,20 +34,20 @@ These are supplied with the URL to the page you want to embed, for example for a
 
 The supported parameters are as follows. Generally these match the equivalent parameters in the real Spothole API, where a mapping exists.
 
-| Name           | Allowed Values        | Default | Example                 | Description                                                                                                                                                           |
+| Name           | Allowed Values          | Default | Example                 | Description                                                                                                                                                           |
-|----------------|-----------------------|---------|-------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+|----------------|-------------------------|---------|-------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| `embedded`     | `true`, `false`       | `false` | `?embedded=true`        | Enables embedded mode.                                                                                                                                                |
+| `embedded`     | `true`, `false`         | `false` | `?embedded=true`        | Enables embedded mode.                                                                                                                                                |
-| `dark-mode`    | `true`, `false`       | `false` | `?dark-mode=true`       | Enables dark mode.                                                                                                                                                    |
+| `color-scheme` | `light`, `dark`, `auto` | `auto`  | `?color-scheme=dark`    | Forces light or dark mode in preference to the operating system default.                                                                                              |
-| `time-zone`    | `UTC`, `local`        | `UTC`   | `?time-zone=local`      | Sets times to be in UTC or local time.                                                                                                                                |
+| `time-zone`    | `UTC`, `local`          | `UTC`   | `?time-zone=local`      | Sets times to be in UTC or local time.                                                                                                                                |
-| `limit`        | 10, 25, 50, 100       | 50      | `?limit=50`             | Sets the number of spots that will be displayed on the main spots page                                                                                                |
+| `limit`        | 10, 25, 50, 100         | 50      | `?limit=50`             | Sets the number of spots that will be displayed on the main spots page                                                                                                |
-| `limit`        | 25, 50, 100, 200, 500 | 100     | `?limit=100`            | Sets the number of alerts that will be displayed on the alerts page                                                                                                   |
+| `limit`        | 25, 50, 100, 200, 500   | 100     | `?limit=100`            | Sets the number of alerts that will be displayed on the alerts page                                                                                                   |
-| `max_age`      | 300, 600, 1800, 3600  | 1800    | `?max_age=1800`         | Sets the maximum age of spots displayed on the map and bands pages, in seconds.                                                                                       |
+| `max_age`      | 300, 600, 1800, 3600    | 1800    | `?max_age=1800`         | Sets the maximum age of spots displayed on the map and bands pages, in seconds.                                                                                       |
-| `band`         | Comma-separated list  | (all)   | `?band=20m,40m`         | Sets the list of bands that will be shown on the spots, bands and map pages. Available options match the labels of the buttons in the standard web interface.         |
+| `band`         | Comma-separated list    | (all)   | `?band=20m,40m`         | Sets the list of bands that will be shown on the spots, bands and map pages. Available options match the labels of the buttons in the standard web interface.         |
-| `sig`          | Comma-separated list  | (all)   | `?sig=POTA,SOTA,NO_SIG` | Sets the list of SIGs that will be shown on the spots, bands and map pages. Available options match the labels of the buttons in the standard web interface.          |
+| `sig`          | Comma-separated list    | (all)   | `?sig=POTA,SOTA,NO_SIG` | Sets the list of SIGs that will be shown on the spots, bands and map pages. Available options match the labels of the buttons in the standard web interface.          |
-| `source`       | Comma-separated list  | (all)   | `?source=Cluster`       | Sets the list of sources that will be shown on any spot or alert pages. Available options match the labels of the buttons in the standard web interface.              |
+| `source`       | Comma-separated list    | (all)   | `?source=Cluster`       | Sets the list of sources that will be shown on any spot or alert pages. Available options match the labels of the buttons in the standard web interface.              |
-| `mode_type`    | Comma-separated list  | (all)   | `?mode_type=PHONE,CW`   | Sets the list of mode types that will be shown on the spots, bands and map pages. Available options match the labels of the buttons in the standard web interface.    |
+| `mode_type`    | Comma-separated list    | (all)   | `?mode_type=PHONE,CW`   | Sets the list of mode types that will be shown on the spots, bands and map pages. Available options match the labels of the buttons in the standard web interface.    |
-| `dx_continent` | Comma-separated list  | (all)   | `?dx_continent=NA,SA`   | Sets the list of DX Continents that will be shown on any spot or alert pages. Available options match the labels of the buttons in the standard web interface.        |
+| `dx_continent` | Comma-separated list    | (all)   | `?dx_continent=NA,SA`   | Sets the list of DX Continents that will be shown on any spot or alert pages. Available options match the labels of the buttons in the standard web interface.        |
-| `de_continent` | Comma-separated list  | (all)   | `?de_continent=EU`      | Sets the list of DE Continents that will be shown on the spots, bands and map pages. Available options match the labels of the buttons in the standard web interface. |
+| `de_continent` | Comma-separated list    | (all)   | `?de_continent=EU`      | Sets the list of DE Continents that will be shown on the spots, bands and map pages. Available options match the labels of the buttons in the standard web interface. |
 
 More will be added soon to allow customisation of filters and other display properties.
 
@@ -83,6 +83,8 @@ cp config-example.yml config.yml
 
 Then edit `config.yml` in your text editor of choice to set up the software as you like it. Mostly, this will involve enabling or disabling the various providers of spot and alert data.
 
+By default, all outdoor programme providers are enabled, as is one cluster node and the NG3K DXpedition data. The RBN spot providers are turned off by default due to the volume of traffic from CW/RTTY/FT8 skimmers, and the APRS and Packet spot providers are off by default on the assumption that Spothole users want a spot with a human at the other end of it, but all can be easily re-enabled.
+
 `config.yml` has some entries for QRZ.com username & password, and Clublog API keys. If provided, these allow Spothole to retrieve more information about DX spots, such as the country their callsign corresponds to. The software will work just fine without them, but you may find a few country flags etc. are less accurate or missing.
 
 Clublog API keys are free, but you'll need to get your own by submitting a helpdesk ticket and explaining what you'll use it for. The admin team are happy with the rate of requests made by my Spothole server, so unless you change the source code of yours to radically increase the rate of querying Clublog, I'm sure they will be fine with your server too.
@@ -102,6 +104,102 @@ The software can take a few seconds to start up, mostly because it is downloadin
 
 If you see some errors on startup, check your configuration, e.g. in case you have specified a port for the web server that is already in use by something else.
 
+### Multiple cluster nodes with different settings
+
+Dan, S50U has written in with his Spothole cluster settings. He is using a cluster node which provides RBN spots, and uses different SSIDs on his callsign to get different settings when logged into the same cluster node. For example:
+
+```
+  -
+    class: "DXCluster"
+    name: "S50CLX"
+    enabled: true
+    host: "s50clx.si"
+    port: 41112
+    login_prompt: "login: "
+    login_callsign: "callsign-10"
+```
+
+Telnet to DXSpider and log in with "callsign-10" and execute the following commands:
+
+`CLEAR/SPOTS ALL` (delete all previous filters)<br/>
+`UNSET/ANN` (stop announce messages)<br/>
+`UNSET/WCY` (stop wcy messages)<br/>
+`UNSET/WWV` (stop wwv messages)<br/>
+`SET/DX` (enable human DX spots)
+
+```
+  -
+    class: "DXCluster"
+    name: "RBN CW"
+    enabled: true
+    host: "s50clx.si"
+    port: 41112
+    login_prompt: "login: "
+    login_callsign: "callsign-11"
+    allow_rbn_spots: true
+    enabled-by-default-in-web-ui: false
+```
+
+Telnet to DXSpider and log in with "callsign-11" and execute the following commands:
+
+`CLEAR/SPOTS ALL` (delete all previous filters)<br/>
+`UNSET/ANN` (stop announce messages)<br/>
+`UNSET/WCY` (stop wcy messages)<br/>
+`UNSET/WWV` (stop wwv messages)<br/>
+`UNSET/DX` (stop human DX spots)<br/>
+`SET/SKIMMER CW` (enable CW RBN spots)
+
+```
+  -
+    class: "DXCluster"
+    name: "RBN RTTY"
+    enabled: true
+    host: "s50clx.si"
+    port: 41112
+    login_prompt: "login: "
+    login_callsign: "callsign-12"
+    allow_rbn_spots: true
+    enabled-by-default-in-web-ui: false
+```
+
+Telnet to DXSpider and log in with "callsign-12" and execute the following commands:
+
+`CLEAR/SPOTS ALL` (delete all previous filters)<br/>
+`UNSET/ANN` (stop announce messages)<br/>
+`UNSET/WCY` (stop wcy messages)<br/>
+`UNSET/WWV` (stop wwv messages)<br/>
+`UNSET/DX` (stop human DX spots)<br/>
+`SET/SKIMMER RTTY` (enable RTTY RBN spots)
+
+```
+  -
+    class: "DXCluster"
+    name: "RBN FT4/8"
+    enabled: true
+    host: "s50clx.si"
+    port: 41112
+    login_prompt: "login: "
+    login_callsign: "callsign-13"
+    allow_rbn_spots: true
+    enabled-by-default-in-web-ui: false
+```
+
+Telnet to DXSpider and log in with "callsign-13" and execute the following commands:
+
+`CLEAR/SPOTS ALL` (delete all previous filters)<br/>
+`UNSET/ANN` (stop announce messages)<br/>
+`UNSET/WCY` (stop wcy messages)<br/>
+`UNSET/WWV` (stop wwv messages)<br/>
+`UNSET/DX` (stop human DX spots)<br/>
+`SET/SKIMMER FT` (enable FT RBN spots)
+
+For each callsign-SSID, we also specify our basic information with commands:
+
+`SET/NAME Spothole10`, Spothole11... etc.<br/>
+`SET/QTH Cerkno`<br/>
+`SET/QRA JN66XD`<br/>
+`SET/HOME S50CLX`
+
 ### systemd configuration
 
 If you want Spothole to run automatically on startup on a Linux distribution that uses `systemd`, follow the instructions here. For distros that don't use `systemd`, or Windows/OSX/etc., you can find generic instructions for your OS online.

alertproviders/bota.py

@@ -20,27 +20,31 @@ 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')
+        div = bs.body.find('div', attrs={'class': 'view-activations-public'})
-        for row in tbody.find_all('tr'):
+        if div:
-            cells = row.find_all('td')
+            table = div.find('table', attrs={'class': 'views-table'})
-            first_cell_text = str(cells[0].find('a').contents[0]).strip()
+            if table:
-            ref_name = first_cell_text.split(" by ")[0]
+                tbody = table.find('tbody')
-            dx_call = str(cells[1].find('a').contents[0]).strip().upper()
+                for row in tbody.find_all('tr'):
+                    cells = row.find_all('td')
+                    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

config-example.yml

@@ -49,6 +49,14 @@ spot-providers:
     class: "WOTA"
     name: "WOTA"
     enabled: true
+  -
+    class: "LLOTA"
+    name: "LLOTA"
+    enabled: true
+  -
+    class: "WWTOTA"
+    name: "WWTOTA"
+    enabled: true
   -
     class: "APRSIS"
     name: "APRS-IS"
@@ -181,3 +189,5 @@ web-ui-options:
   max-spot-age-default: 30
   alert-count: [25, 50, 100, 200, 500]
   alert-count-default: 100
+  default-color-scheme: "auto"
+  default-band-color-scheme: "PSK Reporter (Adjusted)"

core/config.py

@@ -24,3 +24,7 @@ WEB_UI_OPTIONS = config["web-ui-options"]
 # but for consistency we provide this to the front-end in web-ui-options because it has no impact outside of the web UI.
 WEB_UI_OPTIONS["spot-providers-enabled-by-default"] = [p["name"] for p in config["spot-providers"] if p["enabled"] and (
             "enabled-by-default-in-web-ui" not in p or p["enabled-by-default-in-web-ui"] == True)]
+# If spotting to this server is enabled, "API" is another valid spot source even though it does not come from
+# one of our proviers. We set that to also be enabled by default.
+if ALLOW_SPOTTING:
+    WEB_UI_OPTIONS["spot-providers-enabled-by-default"].append("API")

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.3-pre"
 
 # HTTP headers used for spot providers that use HTTP
 HTTP_HEADERS = {"User-Agent": SOFTWARE_NAME + ", v" + SOFTWARE_VERSION + " (operated by " + SERVER_OWNER_CALLSIGN + ")"}
@@ -28,6 +28,8 @@ SIGS = [
    SIG(name="WOTA", description="Wainwrights on the Air", ref_regex=r"[A-Z]{3}-[0-9]{2}"),
    SIG(name="BOTA", description="Beaches on the Air"),
    SIG(name="KRMNPA", description="Keith Roget Memorial National Parks Award"),
+   SIG(name="LLOTA", description="Lagos y Lagunas on the Air", ref_regex=r"[A-Z]{2}\-\d{4}"),
+   SIG(name="WWTOTA", description="Towers on the Air", ref_regex=r"[A-Z]{2}R\-\d{4}"),
    SIG(name="WAB", description="Worked All Britain", ref_regex=r"[A-Z]{1,2}[0-9]{2}"),
    SIG(name="WAI", description="Worked All Ireland", ref_regex=r"[A-Z][0-9]{2}"),
    SIG(name="TOTA", description="Toilets on the Air", ref_regex=r"T\-[0-9]{2}")

core/lookup_helper.py

@@ -140,12 +140,14 @@ class LookupHelper:
     # database live if possible.
     def download_clublog_ctyxml(self):
         try:
-            logging.info("Downloading Clublog cty.xml...")
+            logging.info("Downloading Clublog cty.xml.gz...")
             response = self.CLUBLOG_CTY_XML_CACHE.get("https://cdn.clublog.org/cty.php?api=" + self.CLUBLOG_API_KEY,
                                                       headers=HTTP_HEADERS)
+            logging.info("Caching Clublog cty.xml.gz...")
             open(self.CLUBLOG_XML_DOWNLOAD_LOCATION + ".gz", 'wb').write(response.content)
             with gzip.open(self.CLUBLOG_XML_DOWNLOAD_LOCATION + ".gz", "rb") as uncompressed:
                 file_content = uncompressed.read()
+            logging.info("Caching Clublog cty.xml...")
             with open(self.CLUBLOG_XML_DOWNLOAD_LOCATION, "wb") as f:
                 f.write(file_content)
                 f.flush()
@@ -416,7 +418,12 @@ class LookupHelper:
     # Infer a grid locator from a callsign (using DXCC, probably very inaccurate)
     def infer_grid_from_callsign_dxcc(self, call):
         latlon = self.infer_latlon_from_callsign_dxcc(call)
-        return latlong_to_locator(latlon[0], latlon[1], 8)
+        grid = None
+        try:
+            grid = latlong_to_locator(latlon[0], latlon[1], 8)
+        except:
+            logging.debug("Invalid lat/lon received for DXCC")
+        return grid
 
     # Infer a mode from the frequency (in Hz) according to the band plan. Just a guess really.
     def infer_mode_from_frequency(self, freq):

core/sig_utils.py

@@ -1,7 +1,7 @@
 import csv
 import logging
 
-from pyhamtools.locator import latlong_to_locator
+from pyhamtools.locator import latlong_to_locator, locator_to_latlong
 
 from core.cache_utils import SEMI_STATIC_URL_DATA_CACHE
 from core.constants import SIGS, HTTP_HEADERS
@@ -21,7 +21,7 @@ def get_ref_regex_for_sig(sig):
 # Note there is currently no support for KRMNPA location lookup, see issue #61.
 def populate_sig_ref_info(sig_ref):
     if sig_ref.sig is None or sig_ref.id is None:
-        logging.warn("Failed to look up sig_ref info, sig or id were not set.")
+        logging.warning("Failed to look up sig_ref info, sig or id were not set.")
 
     sig = sig_ref.sig
     ref_id = sig_ref.id
@@ -73,9 +73,9 @@ def populate_sig_ref_info(sig_ref):
                 if row["reference"] == ref_id:
                     sig_ref.name = row["name"] if "name" in row else None
                     sig_ref.url = "https://wwff.co/directory/?showRef=" + ref_id
-                    sig_ref.grid = row["iaruLocator"] if "iaruLocator" in row else None
+                    sig_ref.grid = row["iaruLocator"] if "iaruLocator" in row and row["iaruLocator"] != "-" else None
-                    sig_ref.latitude = float(row["latitude"]) if "latitude" in row else None
+                    sig_ref.latitude = float(row["latitude"]) if "latitude" in row and row["latitude"] != "-" else None
-                    sig_ref.longitude = float(row["longitude"]) if "longitude" in row else None
+                    sig_ref.longitude = float(row["longitude"]) if "longitude" in row and row["longitude"] != "-" else None
                     break
         elif sig.upper() == "SIOTA":
             siota_csv_data = SEMI_STATIC_URL_DATA_CACHE.get("https://www.silosontheair.com/data/silos.csv",
@@ -112,23 +112,45 @@ def populate_sig_ref_info(sig_ref):
                     if asset["code"] == ref_id:
                         sig_ref.name = asset["name"]
                         sig_ref.url = "https://ontheair.nz/assets/ZLI_OT-030" + ref_id.replace("/", "_")
-                        sig_ref.grid = latlong_to_locator(asset["y"], asset["x"], 6)
+                        try:
-                        sig_ref.latitude = asset["y"]
+                            sig_ref.grid = latlong_to_locator(asset["y"], asset["x"], 6)
-                        sig_ref.longitude = asset["x"]
+                        except:
+                            logging.debug("Invalid lat/lon received for reference")
+                            sig_ref.latitude = asset["y"]
+                            sig_ref.longitude = asset["x"]
                         break
         elif sig.upper() == "BOTA":
             if not sig_ref.name:
                 sig_ref.name = sig_ref.id
             sig_ref.url = "https://www.beachesontheair.com/beaches/" + sig_ref.name.lower().replace(" ", "-")
+        elif sig.upper() == "LLOTA":
+            data = SEMI_STATIC_URL_DATA_CACHE.get("https://llota.app/api/public/references", headers=HTTP_HEADERS).json()
+            if data:
+                for ref in data:
+                    if ref["reference_code"] == ref_id:
+                        sig_ref.name = ref["name"]
+                        sig_ref.url = "https://llota.app/list/ref/" + ref_id
+                        sig_ref.grid = ref["grid_locator"]
+                        ll = locator_to_latlong(sig_ref.grid)
+                        sig_ref.latitude = ll[0]
+                        sig_ref.longitude = ll[1]
+                        break
+        elif sig.upper() == "WWTOTA":
+            if not sig_ref.name:
+                sig_ref.name = sig_ref.id
+            sig_ref.url = "https://wwtota.com/seznam/karta_rozhledny.php?ref=" + sig_ref.name
         elif sig.upper() == "WAB" or sig.upper() == "WAI":
             ll = wab_wai_square_to_lat_lon(ref_id)
             if ll:
                 sig_ref.name = ref_id
-                sig_ref.grid = latlong_to_locator(ll[0], ll[1], 6)
+                try:
-                sig_ref.latitude = ll[0]
+                    sig_ref.grid = latlong_to_locator(ll[0], ll[1], 6)
-                sig_ref.longitude = ll[1]
+                    sig_ref.latitude = ll[0]
+                    sig_ref.longitude = ll[1]
+                except:
+                    logging.debug("Invalid lat/lon received for reference")
     except:
-        logging.warn("Failed to look up sig_ref info for " + sig + " ref " + ref_id + ".")
+        logging.warning("Failed to look up sig_ref info for " + sig + " ref " + ref_id + ".")
     return sig_ref
 
 

core/status_reporter.py

@@ -47,13 +47,13 @@ class StatusReporter:
         self.status_data["spot_providers"] = list(
             map(lambda p: {"name": p.name, "enabled": p.enabled, "status": p.status,
                            "last_updated": p.last_update_time.replace(
-                               tzinfo=pytz.UTC).timestamp() if p.last_update_time else 0,
+                               tzinfo=pytz.UTC).timestamp() if p.last_update_time.year > 2000 else 0,
                            "last_spot": p.last_spot_time.replace(
-                               tzinfo=pytz.UTC).timestamp() if p.last_spot_time else 0}, self.spot_providers))
+                               tzinfo=pytz.UTC).timestamp() if p.last_spot_time.year > 2000 else 0}, self.spot_providers))
         self.status_data["alert_providers"] = list(
             map(lambda p: {"name": p.name, "enabled": p.enabled, "status": p.status,
                            "last_updated": p.last_update_time.replace(
-                               tzinfo=pytz.UTC).timestamp() if p.last_update_time else 0},
+                               tzinfo=pytz.UTC).timestamp() if p.last_update_time.year > 2000 else 0},
                 self.alert_providers))
         self.status_data["cleanup"] = {"status": self.cleanup_timer.status,
                                        "last_ran": self.cleanup_timer.last_cleanup_time.replace(

data/spot.py

@@ -284,9 +284,13 @@ class Spot:
 
         # DX Grid to lat/lon and vice versa in case one is missing
         if self.dx_grid and not self.dx_latitude:
-            ll = locator_to_latlong(self.dx_grid)
+            try:
-            self.dx_latitude = ll[0]
+                print(json.dumps(self))
-            self.dx_longitude = ll[1]
+                ll = locator_to_latlong(self.dx_grid)
+                self.dx_latitude = ll[0]
+                self.dx_longitude = ll[1]
+            except:
+                logging.debug("Invalid grid received for spot")
         if self.dx_latitude and self.dx_longitude and not self.dx_grid:
             try:
                 self.dx_grid = latlong_to_locator(self.dx_latitude, self.dx_longitude, 8)

server/handlers/api/options.py

@@ -34,13 +34,11 @@ class APIOptionsHandler(tornado.web.RequestHandler):
                        map(lambda p: p["name"], filter(lambda p: p["enabled"], self.status_data["alert_providers"]))),
                    "continents": CONTINENTS,
                    "max_spot_age": MAX_SPOT_AGE,
-                   "spot_allowed": ALLOW_SPOTTING,
+                   "spot_allowed": ALLOW_SPOTTING}
-                   "web-ui-options": WEB_UI_OPTIONS}
         # If spotting to this server is enabled, "API" is another valid spot source even though it does not come from
         # one of our proviers.
         if ALLOW_SPOTTING:
             options["spot_sources"].append("API")
-            options["web-ui-options"]["spot-providers-enabled-by-default"].append("API")
 
         self.write(json.dumps(options, default=serialize_everything))
         self.set_status(200)

server/handlers/pagetemplate.py

@@ -2,8 +2,9 @@ from datetime import datetime
 
 import pytz
 import tornado
+import json
 
-from core.config import ALLOW_SPOTTING
+from core.config import ALLOW_SPOTTING, WEB_UI_OPTIONS
 from core.constants import SOFTWARE_VERSION
 from core.prometheus_metrics_handler import page_requests_counter
 
@@ -22,5 +23,6 @@ class PageTemplateHandler(tornado.web.RequestHandler):
         page_requests_counter.inc()
 
         # Load named template, and provide variables used in templates
-        self.render(self.template_name + ".html", software_version=SOFTWARE_VERSION, allow_spotting=ALLOW_SPOTTING)
+        self.render(self.template_name + ".html", software_version=SOFTWARE_VERSION, allow_spotting=ALLOW_SPOTTING,
+                    web_ui_options=json.dumps(WEB_UI_OPTIONS))
 

spotproviders/llota.py

@@ -0,0 +1,41 @@
+from datetime import datetime
+
+from data.sig_ref import SIGRef
+from data.spot import Spot
+from spotproviders.http_spot_provider import HTTPSpotProvider
+
+
+# Spot provider for Lagos y Lagunas On the Air
+class LLOTA(HTTPSpotProvider):
+    POLL_INTERVAL_SEC = 120
+    SPOTS_URL = "https://llota.app/api/public/spots"
+
+    def __init__(self, provider_config):
+        super().__init__(provider_config, self.SPOTS_URL, self.POLL_INTERVAL_SEC)
+
+    def http_response_to_spots(self, http_response):
+        new_spots = []
+        # Iterate through source data
+        for source_spot in http_response.json():
+            # Find the most recent spotter and comment from the history array
+            comment = None
+            spotter = None
+            if "history" in source_spot and len(source_spot["history"]) > 0:
+                comment = source_spot["history"][-1]["comment"]
+                spotter = source_spot["history"][-1]["spotter_callsign"]
+            # Convert to our spot format
+            spot = Spot(source=self.name,
+                        source_id=source_spot["id"],
+                        dx_call=source_spot["callsign"].upper(),
+                        de_call=spotter.upper() if spotter else None,
+                        freq=float(source_spot["frequency"]) * 1000000,
+                        mode=source_spot["mode"].upper(),
+                        comment=comment,
+                        sig="LLOTA",
+                        sig_refs=[SIGRef(id=source_spot["reference"], sig="LLOTA", name=source_spot["reference_name"])],
+                        time=datetime.fromisoformat(source_spot["updated_at"].replace("Z", "+00:00")).timestamp())
+
+            # Add to our list. Don't worry about de-duping, removing old spots etc. at this point; other code will do
+            # that for us.
+            new_spots.append(spot)
+        return new_spots

spotproviders/pota.py

@@ -11,8 +11,6 @@ from spotproviders.http_spot_provider import HTTPSpotProvider
 class POTA(HTTPSpotProvider):
     POLL_INTERVAL_SEC = 120
     SPOTS_URL = "https://api.pota.app/spot/activator"
-    # Might need to look up extra park data
-    PARK_URL_ROOT = "https://api.pota.app/park/"
 
     def __init__(self, provider_config):
         super().__init__(provider_config, self.SPOTS_URL, self.POLL_INTERVAL_SEC)

spotproviders/wwtota.py

@@ -0,0 +1,41 @@
+from datetime import datetime
+
+import json
+import pytz
+
+from data.sig_ref import SIGRef
+from data.spot import Spot
+from spotproviders.http_spot_provider import HTTPSpotProvider
+
+
+# Spot provider for Towers on the Air
+class WWTOTA(HTTPSpotProvider):
+    POLL_INTERVAL_SEC = 120
+    SPOTS_URL = "https://wwtota.com/api/cluster_live.php"
+
+    def __init__(self, provider_config):
+        super().__init__(provider_config, self.SPOTS_URL, self.POLL_INTERVAL_SEC)
+
+    def http_response_to_spots(self, http_response):
+        new_spots = []
+        response_fixed = http_response.text.replace("\\/", "/")
+        response_json = json.loads(response_fixed)
+
+        # Iterate through source data
+        for source_spot in response_json["spots"]:
+            # Convert to our spot format
+            likely_freq = float(source_spot["freq"]) * 1000
+            if likely_freq < 1000000:
+                likely_freq = likely_freq * 1000
+            spot = Spot(source=self.name,
+                        dx_call=source_spot["call"].upper(),
+                        freq=likely_freq,
+                        comment=source_spot["comment"],
+                        sig="WWTOTA",
+                        sig_refs=[SIGRef(id=source_spot["ref"], sig="WWTOTA")],
+                        time=datetime.strptime(response_json["updated"][:10] + source_spot["time"], "%Y-%m-%d%H:%M").timestamp())
+
+            # Add to our list. Don't worry about de-duping, removing old spots etc. at this point; other code will do
+            # that for us.
+            new_spots.append(spot)
+        return new_spots

templates/about.html

@@ -25,10 +25,10 @@
     <h4 class="mt-4">What are "DX", "DE" and modes?</h4>
     <p>In amateur radio terminology, the "DX" contact is the "interesting" one that is using the frequency shown and looking for callers. They might be on a remote island or just in a local park, but either way it's interesting enough that someone has "spotted" them. The callsign listed under "DE" is the person who entered the spot of the "DX" operator. "Modes" are the type of communication they are using. For example you might see "CW" which is Morse Code, or voice "modes" like SSB or FM, or more exotic "data" modes which are used for computer-to-computer communication.</p>
     <h4 class="mt-4">What data sources are supported?</h4>
-    <p>Spothole can retrieve spots from: <a href="https://www.dxcluster.info/telnet/">Telnet-based DX clusters</a>, the <a href="https://www.reversebeacon.net/">Reverse Beacon Network (RBN)</a>, the <a href="https://www.aprs-is.net/">APRS Internet Service (APRS-IS)</a>, <a href="https://pota.app">POTA</a>, <a href="https://www.sota.org.uk/">SOTA</a>, <a href="https://wwff.co/">WWFF</a>, <a href="https://www.cqgma.org/">GMA</a>, <a href="https://wwbota.net/">WWBOTA</a>, <a href="http://www.hema.org.uk/">HEMA</a>, <a href="https://www.parksnpeaks.org/">Parks 'n' Peaks</a>, <a href="https://ontheair.nz">ZLOTA</a>, <a href="https://www.wota.org.uk/">WOTA</a>, the <a href="https://ukpacketradio.network/">UK Packet Repeater Network</a>, and any site based on the <a href="https://github.com/nischu/xOTA">xOTA software by nischu</a>.</p>
+    <p>Spothole can retrieve spots from: <a href="https://www.dxcluster.info/telnet/">Telnet-based DX clusters</a>, the <a href="https://www.reversebeacon.net/">Reverse Beacon Network (RBN)</a>, the <a href="https://www.aprs-is.net/">APRS Internet Service (APRS-IS)</a>, <a href="https://pota.app">POTA</a>, <a href="https://www.sota.org.uk/">SOTA</a>, <a href="https://wwff.co/">WWFF</a>, <a href="https://www.cqgma.org/">GMA</a>, <a href="https://wwbota.net/">WWBOTA</a>, <a href="http://www.hema.org.uk/">HEMA</a>, <a href="https://www.parksnpeaks.org/">Parks 'n' Peaks</a>, <a href="https://ontheair.nz">ZLOTA</a>, <a href="https://www.wota.org.uk/">WOTA</a>, <a href="https://llota.app">LLOTA</a>, <a href="https://wwtota.com">WWTOTA</a>, the <a href="https://ukpacketradio.network/">UK Packet Repeater Network</a>, and any site based on the <a href="https://github.com/nischu/xOTA">xOTA software by nischu</a>.</p>
     <p>Spothole can retrieve alerts from: <a href="https://www.ng3k.com/">NG3K</a>, <a href="https://pota.app">POTA</a>, <a href="https://www.sota.org.uk/">SOTA</a>, <a href="https://wwff.co/">WWFF</a>, <a href="https://www.parksnpeaks.org/">Parks 'n' Peaks</a>, <a href="https://www.wota.org.uk/">WOTA</a> and <a href="https://www.beachesontheair.com/">BOTA</a>.</p>
     <p>Note that the server owner has not necessarily enabled all these data sources. In particular it is common to disable RBN, to avoid the server being swamped with FT8 traffic, and to disable APRS-IS and UK Packet Net so that the server only displays stations where there is likely to be an operator physically present for a QSO.</p>
-    <p>Between the various data sources, the following Special Interest Groups (SIGs) are supported: Parks on the Air (POTA), Summits on the Air (SOTA), Worldwide Flora & Fauna (WWFF), Global Mountain Activity (GMA), Worldwide Bunkers on the Air (WWBOTA), HuMPs Excluding Marilyns Award (HEMA), Islands on the Air (IOTA), Mills on the Air (MOTA), the Amateur Radio Lighthouse Socirty (ARLHS), International Lighthouse Lightship Weekend (ILLW), Silos on the Air (SIOTA), World Castles Award (WCA), New Zealand on the Air (ZLOTA), Keith Roget Memorial National Parks Award (KRMNPA), Wainwrights on the Air (WOTA), Beaches on the Air (BOTA), Worked All Britain (WAB), Worked All Ireland (WAI), and Toilets on the Air (TOTA).</p>
+    <p>Between the various data sources, the following Special Interest Groups (SIGs) are supported: Parks on the Air (POTA), Summits on the Air (SOTA), Worldwide Flora & Fauna (WWFF), Global Mountain Activity (GMA), Worldwide Bunkers on the Air (WWBOTA), HuMPs Excluding Marilyns Award (HEMA), Islands on the Air (IOTA), Mills on the Air (MOTA), the Amateur Radio Lighthouse Socirty (ARLHS), International Lighthouse Lightship Weekend (ILLW), Silos on the Air (SIOTA), World Castles Award (WCA), New Zealand on the Air (ZLOTA), Keith Roget Memorial National Parks Award (KRMNPA), Wainwrights on the Air (WOTA), Beaches on the Air (BOTA), Lagos y Lagunas On the Air (LLOTA), Towers on the Air (WWTOTA), Worked All Britain (WAB), Worked All Ireland (WAI), and Toilets on the Air (TOTA).</p>
     <p>As of the time of writing in November 2025, I think Spothole captures essentially all outdoor radio programmes that have a defined reference list, and almost certainly those that have a spotting/alerting API. If you know of one I've missed, please let me know!</p>
     <h4 class="mt-4">Why can I filter spots by both SIG and Source? Isn't that basically the same thing?</h4>
     <p>Mostly, but not quite. While POTA spots generally come from the POTA source and so on, there are a few exceptions:</p>
@@ -63,7 +63,7 @@
     <p>This software is dedicated to the memory of Tom G1PJB, SK, a friend and colleague who sadly passed away around the time I started writing it in Autumn 2025. I was looking forward to showing it to you when it was done.</p>
 </div>
 
-<script src="/js/common.js?v=6"></script>
+<script src="/js/common.js?v=7"></script>
 <script>$(document).ready(function() { $("#nav-link-about").addClass("active"); }); <!-- highlight active page in nav --></script>
 
 {% end %}

templates/add_spot.html

@@ -69,8 +69,8 @@
 
 </div>
 
-<script src="/js/common.js?v=6"></script>
+<script src="/js/common.js?v=7"></script>
-<script src="/js/add-spot.js?v=6"></script>
+<script src="/js/add-spot.js?v=7"></script>
 <script>$(document).ready(function() { $("#nav-link-add-spot").addClass("active"); }); <!-- highlight active page in nav --></script>
 
 {% end %}

templates/alerts.html

@@ -8,8 +8,8 @@
         </div>
         <div class="col-auto">
             <p class="d-inline-flex gap-1">
-                <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>&nbsp;Filters</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>&nbsp;Display</button>
             </p>
         </div>
     </div>
@@ -112,12 +112,14 @@
                     <div class="card">
                         <div class="card-body">
                             <h5 class="card-title">Theme</h5>
-                                <div class="form-group">
+                            <p class="card-text spothole-card-text">
-                                    <div class="form-check form-check-inline">
+                                <label class="form-check-label" for="color-scheme">UI color scheme</label>
-                                        <input class="form-check-input storeable-checkbox" type="checkbox" id="darkMode" value="darkMode" oninput="toggleDarkMode();">
+                                <select id="color-scheme" class="storeable-select form-select d-inline-block" oninput="setColorSchemeFromUI();" style="display: inline-block;">
-                                        <label class="form-check-label" for="darkMode">Dark mode</label>
+                                    <option value="auto">Automatic</option>
-                                    </div>
+                                    <option value="light">Light</option>
-                                </div>
+                                    <option value="dark">Dark</option>
+                                </select>
+                            </p>
                         </div>
                     </div>
                 </div>
@@ -168,8 +170,8 @@
 
 </div>
 
-<script src="/js/common.js?v=6"></script>
+<script src="/js/common.js?v=7"></script>
-<script src="/js/alerts.js?v=6"></script>
+<script src="/js/alerts.js?v=7"></script>
 <script>$(document).ready(function() { $("#nav-link-alerts").addClass("active"); }); <!-- highlight active page in nav --></script>
 
 {% end %}

templates/bands.html

@@ -8,8 +8,8 @@
         </div>
         <div class="col-auto">
             <p class="d-inline-flex gap-1">
-                <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>&nbsp;Filters</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>&nbsp;Display</button>
             </p>
         </div>
     </div>
@@ -112,17 +112,19 @@
                     <div class="card">
                         <div class="card-body">
                             <h5 class="card-title">Theme</h5>
-                                <div class="form-group">
+                            <p class="card-text spothole-card-text">
-                                    <div class="form-check form-check-inline">
+                                <label class="form-check-label" for="color-scheme">UI color scheme</label>
-                                        <input class="form-check-input storeable-checkbox" type="checkbox" id="darkMode" value="darkMode" oninput="toggleDarkMode();">
+                                <select id="color-scheme" class="storeable-select form-select d-inline-block" oninput="setColorSchemeFromUI();" style="display: inline-block;">
-                                        <label class="form-check-label" for="darkMode">Dark mode</label>
+                                    <option value="auto">Automatic</option>
-                                    </div>
+                                    <option value="light">Light</option>
-                                    <p class="card-text spothole-card-text">
+                                    <option value="dark">Dark</option>
-                                        Band color scheme<br/>
+                                </select>
-                                        <select id="band-color-scheme" class="storeable-select form-select d-inline-block" oninput="setBandColorSchemeFromUI();" style="display: inline-block;">
+                            </p>
-                                        </select>
+                            <p class="card-text spothole-card-text">
-                                    </p>
+                                <label class="form-check-label" for="band-color-scheme">Band color scheme</label><br/>
-                                </div>
+                                <select id="band-color-scheme" class="storeable-select form-select d-inline-block" oninput="setBandColorSchemeFromUI();" style="display: inline-block;">
+                                </select>
+                            </p>
                         </div>
                     </div>
                 </div>
@@ -134,9 +136,9 @@
 
 </div>
 
-<script src="/js/common.js?v=6"></script>
+<script src="/js/common.js?v=7"></script>
-<script src="/js/spotsbandsandmap.js?v=6"></script>
+<script src="/js/spotsbandsandmap.js?v=7"></script>
-<script src="/js/bands.js?v=6"></script>
+<script src="/js/bands.js?v=7"></script>
 <script>$(document).ready(function() { $("#nav-link-bands").addClass("active"); }); <!-- highlight active page in nav --></script>
 
 {% end %}

templates/base.html

@@ -46,10 +46,14 @@
             crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/tinycolor2@1.6.0/cjs/tinycolor.min.js"></script>
 
-    <script src="https://misc.ianrenton.com/jsutils/utils.js?v=6"></script>
+    <script src="https://misc.ianrenton.com/jsutils/utils.js?v=7"></script>
-    <script src="https://misc.ianrenton.com/jsutils/storage.js?v=6"></script>
+    <script src="https://misc.ianrenton.com/jsutils/storage.js?v=7"></script>
-    <script src="https://misc.ianrenton.com/jsutils/ui-ham.js?v=6"></script>
+    <script src="https://misc.ianrenton.com/jsutils/ui-ham.js?v=7"></script>
-    <script src="https://misc.ianrenton.com/jsutils/geo.js?v=6"></script>
+    <script src="https://misc.ianrenton.com/jsutils/geo.js?v=7"></script>
+    <script>
+        // Get Web UI Options from the backend to the frontend as a JS object.
+        let web_ui_options = JSON.parse('{{ web_ui_options }}'.replace(/&quot;/g, '\"'));
+    </script>
 
 </head>
 <body>

templates/map.html

@@ -7,8 +7,8 @@
             <div class="col-auto me-auto pt-3"></div>
             <div class="col-auto">
                 <p class="d-inline-flex gap-1">
-                    <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>&nbsp;Filters</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>&nbsp;Display</button>
                 </p>
             </div>
         </div>
@@ -124,17 +124,19 @@
                         <div class="card">
                             <div class="card-body">
                                 <h5 class="card-title">Theme</h5>
-                                    <div class="form-group">
+                                <p class="card-text spothole-card-text">
-                                        <div class="form-check form-check-inline">
+                                    <label class="form-check-label" for="color-scheme">UI color scheme</label>
-                                            <input class="form-check-input storeable-checkbox" type="checkbox" id="darkMode" value="darkMode" oninput="toggleDarkMode();">
+                                    <select id="color-scheme" class="storeable-select form-select d-inline-block" oninput="setColorSchemeFromUI();" style="display: inline-block;">
-                                            <label class="form-check-label" for="darkMode">Dark mode</label>
+                                    <option value="auto">Automatic</option>
-                                        </div>
+                                    <option value="light">Light</option>
-                                        <p class="card-text spothole-card-text">
+                                    <option value="dark">Dark</option>
-                                            Band color scheme<br/>
+                                    </select>
-                                            <select id="band-color-scheme" class="storeable-select form-select d-inline-block" oninput="setBandColorSchemeFromUI();" style="display: inline-block;">
+                                </p>
-                                            </select>
+                                <p class="card-text spothole-card-text">
-                                        </p>
+                                    <label class="form-check-label" for="band-color-scheme">Band color scheme</label><br/>
-                                    </div>
+                                    <select id="band-color-scheme" class="storeable-select form-select d-inline-block" oninput="setBandColorSchemeFromUI();" style="display: inline-block;">
+                                    </select>
+                                </p>
                             </div>
                         </div>
                     </div>
@@ -152,9 +154,9 @@
 <script src="https://cdn.jsdelivr.net/npm/leaflet.geodesic"></script>
 <script src="https://cdn.jsdelivr.net/npm/@joergdietrich/leaflet.terminator@1.1.0/L.Terminator.min.js"></script>
 
-<script src="/js/common.js?v=6"></script>
+<script src="/js/common.js?v=7"></script>
-<script src="/js/spotsbandsandmap.js?v=6"></script>
+<script src="/js/spotsbandsandmap.js?v=7"></script>
-<script src="/js/map.js?v=6"></script>
+<script src="/js/map.js?v=7"></script>
 <script>$(document).ready(function() { $("#nav-link-map").addClass("active"); }); <!-- highlight active page in nav --></script>
 
 {% end %}

templates/spots.html

@@ -10,24 +10,25 @@
 
 <div class="mt-3">
     <div id="settingsButtonRow" class="row">
-        <div class="col-lg-6 me-auto pt-3 hideonmobile">
+        <div class="col-4">
-            <p id="timing-container">Loading...</p>
-        </div>
-        <div class="col-lg-6 text-end">
             <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">&nbsp;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">&nbsp;Pause</span></label>
                 </span>
-                <span class="hideonmobile" style="position: relative;">
+            </p>
+        </div>
+        <div class="col-8 text-end">
+            <p class="d-inline-flex gap-1">
+                <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">&nbsp;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">&nbsp;Display</span></button>
             </p>
         </div>
     </div>
@@ -154,14 +155,16 @@
                     <div class="card">
                         <div class="card-body">
                             <h5 class="card-title">Theme</h5>
-                            <div class="form-group">
-                                <div class="form-check form-check-inline">
-                                    <input class="form-check-input storeable-checkbox" type="checkbox" id="darkMode" value="darkMode" oninput="toggleDarkMode();">
-                                    <label class="form-check-label" for="darkMode">Dark mode</label>
-                                </div>
-                            </div>
                             <p class="card-text spothole-card-text">
-                                Band color scheme<br/>
+                                <label class="form-check-label" for="color-scheme">UI color scheme</label>
+                                <select id="color-scheme" class="storeable-select form-select d-inline-block" oninput="setColorSchemeFromUI();" style="display: inline-block;">
+                                    <option value="auto">Automatic</option>
+                                    <option value="light">Light</option>
+                                    <option value="dark">Dark</option>
+                                </select>
+                            </p>
+                            <p class="card-text spothole-card-text">
+                                <label class="form-check-label" for="band-color-scheme">Band color scheme</label><br/>
                                 <select id="band-color-scheme" class="storeable-select form-select d-inline-block" oninput="setBandColorSchemeFromUI();" style="display: inline-block;">
                                 </select>
                             </p>
@@ -223,9 +226,9 @@
 
 </div>
 
-<script src="/js/common.js?v=6"></script>
+<script src="/js/common.js?v=7"></script>
-<script src="/js/spotsbandsandmap.js?v=6"></script>
+<script src="/js/spotsbandsandmap.js?v=7"></script>
-<script src="/js/spots.js?v=6"></script>
+<script src="/js/spots.js?v=7"></script>
 <script>$(document).ready(function() { $("#nav-link-spots").addClass("active"); }); <!-- highlight active page in nav --></script>
 
 {% end %}

templates/status.html

@@ -3,8 +3,8 @@
 
 <div id="status-container" class="row row-cols-1 row-cols-md-4 g-4 mt-4"></div>
 
-<script src="/js/common.js?v=6"></script>
+<script src="/js/common.js?v=7"></script>
-<script src="/js/status.js?v=6"></script>
+<script src="/js/status.js?v=7"></script>
 <script>$(document).ready(function() { $("#nav-link-status").addClass("active"); }); <!-- highlight active page in nav --></script>
 
 {% end %}

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
@@ -751,6 +752,8 @@ components:
         - ParksNPeaks
         - ZLOTA
         - WOTA
+        - LLOTA
+        - WWTOTA
         - Cluster
         - RBN
         - APRS-IS
@@ -776,6 +779,8 @@ components:
         - IOTA
         - WOTA
         - BOTA
+        - LLOTA
+        - WWTOTA
         - WAB
         - WAI
         - TOTA
@@ -800,6 +805,8 @@ components:
         - IOTA
         - WOTA
         - BOTA
+        - LLOTA
+        - WWTOTA
         - WAB
         - WAI
         - TOTA
@@ -864,7 +871,6 @@ components:
         - DSTAR
         - C4FM
         - M17
-        - DIGI
         - DATA
         - FT8
         - FT4
@@ -1234,11 +1240,11 @@ components:
           example: OK
         last_updated:
           type: number
-          description: The last time at which this provider received data, UTC seconds since UNIX epoch.
+          description: The last time at which this provider received data, UTC seconds since UNIX epoch. If this is zero, the spot provider has never updated.
           example: 1759579508
         last_spot:
           type: number
-          description: The time of the latest spot received by this provider, UTC seconds since UNIX epoch.
+          description: The time of the latest spot received by this provider, UTC seconds since UNIX epoch. If this is zero, the spot provider has never received a spot that was accepted by the system.
           example: 1759579508
 
     AlertProviderStatus:
@@ -1257,7 +1263,7 @@ components:
           example: OK
         last_updated:
           type: number
-          description: The last time at which this provider received data, UTC seconds since UNIX epoch.
+          description: The last time at which this provider received data, UTC seconds since UNIX epoch. If this is zero, the alert provider has never updated.
           example: 1759579508
 
     Band:

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/alerts.js

@@ -286,11 +286,11 @@ function loadOptions() {
         generateMultiToggleFilterCard("#source-options", "source", options["alert_sources"]);
 
         // Populate the Display panel
-        options["web-ui-options"]["alert-count"].forEach(sc => $("#alerts-to-fetch").append($('<option>', {
+        web_ui_options["alert-count"].forEach(sc => $("#alerts-to-fetch").append($('<option>', {
             value: sc,
             text: sc
         })));
-        $("#alerts-to-fetch").val(options["web-ui-options"]["alert-count-default"]);
+        $("#alerts-to-fetch").val(web_ui_options["alert-count-default"]);
 
         // Load URL params. These may select things from the various filter & display options, so the function needs
         // to be called after these are set up, but if the URL params ask for "embedded mode", this will suppress
@@ -312,12 +312,6 @@ function filtersUpdated() {
     saveSettings();
 }
 
-// Function to set dark mode based on the state of the UI toggle in spots, bands and map pages
-function toggleDarkMode() {
-    enableDarkMode($("#darkMode")[0].checked);
-    saveSettings();
-}
-
 // React to toggling/closing panels
 function toggleFiltersPanel() {
     // If we are going to display the filters panel, hide the display panel

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) + "&";
         }
@@ -229,15 +229,16 @@ function loadOptions() {
         options = jsonData;
 
         // Populate the Display panel
-        options["web-ui-options"]["max-spot-age"].forEach(sc => $("#max-spot-age").append($('<option>', {
+        web_ui_options["max-spot-age"].forEach(sc => $("#max-spot-age").append($('<option>', {
             value: sc * 60,
             text: sc
         })));
-        $("#max-spot-age").val(options["web-ui-options"]["max-spot-age-default"] * 60);
+        $("#max-spot-age").val(web_ui_options["max-spot-age-default"] * 60);
         getAvailableBandColorSchemes().forEach(sc => $("#band-color-scheme").append($('<option>', {
             value: sc,
             text: sc
         })));
+        $("#band-color-scheme").val(web_ui_options["default-band-color-scheme"]);
 
         // First pass loading settings, so we can load the band colour scheme before the filters that need to use it
         loadSettings();
@@ -251,8 +252,8 @@ 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"]);
+        generateSourcesMultiToggleFilterCard(options["spot_sources"], 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
         // to be called after these are set up, but if the URL params ask for "embedded mode", this will suppress

webassets/js/common.js

@@ -20,15 +20,15 @@ function loadURLParams() {
     }
 
     // Handle other params
-    updateCheckboxFromParam(params, "dark-mode", "darkMode");
+    updateSelectFromParam(params, "color-scheme", "color-scheme");
-    updateSelectFromParam(params, "time-zone", "timeZone"); // Only on Spots and Alerts pages
+    updateSelectFromParam(params, "time-zone", "time-zone"); // Only on Spots and Alerts pages
     updateSelectFromParam(params, "limit", "spots-to-fetch"); // Only on Spots page
     updateSelectFromParam(params, "limit", "alerts-to-fetch"); // Only on Alerts page
     updateSelectFromParam(params, "max_age", "max-spot-age"); // Only on Map & Bands pages
     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");
 }
@@ -38,10 +38,6 @@ function updateCheckboxFromParam(params, paramName, checkboxID) {
     let v = params.get(paramName);
     if (v != null) {
         $("#" + checkboxID).prop("checked", (v === "true") ? true : false);
-        // Extra check if this is the "dark mode" toggle
-        if (checkboxID == "darkMode") {
-            enableDarkMode((v === "true") ? true : false);
-        }
     }
 }
 
@@ -50,6 +46,10 @@ function updateSelectFromParam(params, paramName, selectID) {
     let v = params.get(paramName);
     if (v != null) {
         $("#" + selectID).prop("value", v);
+        // Extra check if this is the "color scheme" select
+        if (selectID == "color-scheme") {
+            setColorScheme(v);
+        }
     }
 }
 
@@ -142,30 +142,50 @@ function columnsUpdated() {
     saveSettings();
 }
 
-// Function to set dark mode on or off
+// Function to set the colour scheme based on the state of the UI select box
-function enableDarkMode(dark) {
+function setColorSchemeFromUI() {
-    $("html").attr("data-bs-theme", dark ? "dark" : "light");
+    setColorScheme($("#color-scheme option:selected").val());
-    const metaThemeColor = document.querySelector("meta[name=theme-color]");
+    saveSettings();
-    metaThemeColor.setAttribute("content", dark ? "black" : "white");
-    const metaAppleStatusBarStyle = document.querySelector("meta[name=apple-mobile-web-app-status-bar-style]");
-    metaAppleStatusBarStyle.setAttribute("content", dark ? "black-translucent" : "white-translucent");
 }
 
-// Startup function to determine whether to use light or dark mode
+// Function to set the color scheme. Supported values: "dark", "light", "auto"
-function usePreferredTheme() {
+function setColorScheme(mode) {
-    // First, work out if we have ever explicitly saved the value of our toggle
+    let effectiveModeDark = mode == "dark";
-    let val = localStorage.getItem("#darkMode:checked");
+    if (mode == "auto") {
-    if (val != null) {
+        effectiveModeDark = window.matchMedia('(prefers-color-scheme: dark)').matches
-        enableDarkMode(JSON.parse(val));
-    } else {
-        // Never set it before, so use the system default theme and set the toggle up to match
-        let dark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-        enableDarkMode(dark);
-        $("#darkMode").prop('checked', dark);
     }
+    $("html").attr("data-bs-theme", effectiveModeDark ? "dark" : "light");
+    const metaThemeColor = document.querySelector("meta[name=theme-color]");
+    metaThemeColor.setAttribute("content", effectiveModeDark ? "black" : "white");
+    const metaAppleStatusBarStyle = document.querySelector("meta[name=apple-mobile-web-app-status-bar-style]");
+    metaAppleStatusBarStyle.setAttribute("content", effectiveModeDark ? "black-translucent" : "white-translucent");
+}
+
+// Startup function to determine whether to use light or dark mode, or leave as auto
+function usePreferredTheme() {
+    // Set the value of the select box to the server's default
+    $("#color-scheme").val(web_ui_options["default-color-scheme"]);
+
+    // Work out if we have ever explicitly saved the value of our select box. If so, we set our colour scheme now based
+    // on that. If not, we let the select retain its default value from Spothole config and apply that.
+    let val = localStorage.getItem("#color-scheme:value");
+    if (val != null) {
+        setColorScheme(JSON.parse(val));
+    } else {
+        setColorSchemeFromUI();
+    }
+}
+
+// Sets up a listener on the OS light-dark theme change. If the Spothole user theme is set to Auto, the UI will be
+// updated, otherwise if the Spothole user theme is forced to light or dark, that preference will remain.
+function listenForOSThemeChange() {
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+        setColorScheme($("#color-scheme option:selected").val());
+    });
 }
 
 // Startup
 $(document).ready(function() {
     usePreferredTheme();
+    listenForOSThemeChange();
 });

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) + "&";
         }
@@ -161,15 +161,16 @@ function loadOptions() {
         options = jsonData;
 
         // Populate the Display panel
-        options["web-ui-options"]["max-spot-age"].forEach(sc => $("#max-spot-age").append($('<option>', {
+        web_ui_options["max-spot-age"].forEach(sc => $("#max-spot-age").append($('<option>', {
             value: sc * 60,
             text: sc
         })));
-        $("#max-spot-age").val(options["web-ui-options"]["max-spot-age-default"] * 60);
+        $("#max-spot-age").val(web_ui_options["max-spot-age-default"] * 60);
         getAvailableBandColorSchemes().forEach(sc => $("#band-color-scheme").append($('<option>', {
             value: sc,
             text: sc
         })));
+        $("#band-color-scheme").val(web_ui_options["default-band-color-scheme"]);
 
         // First pass loading settings, so we can load the band colour scheme before the filters that need to use it
         loadSettings();
@@ -183,8 +184,8 @@ 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"]);
+        generateSourcesMultiToggleFilterCard(options["spot_sources"], 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
         // to be called after these are set up, but if the URL params ask for "embedded mode", this will suppress

webassets/js/spots.js

@@ -13,9 +13,6 @@ function loadSpots() {
 
     // Make the new query
     $.getJSON('/api/v1/spots' + buildQueryString(), function(jsonData) {
-        // Store last updated time
-        lastUpdateTime = moment.utc();
-        updateTimingDisplayRunPause();
         // Store data
         spots = jsonData;
         // Update table
@@ -37,9 +34,6 @@ function startSSEConnection() {
     evtSource = new EventSource('/api/v1/spots/stream' + buildQueryString());
 
     evtSource.onmessage = function(event) {
-        // Store last updated time
-        lastUpdateTime = moment.utc();
-        updateTimingDisplayRunPause();
         // Get the new spot
         newSpot = JSON.parse(event.data);
         // Awful fudge to ensure new incoming spots at the top of the list don't have timestamps that make them look
@@ -78,16 +72,10 @@ function startSSEConnection() {
     };
 }
 
-// Update the special timing display for the live spots page, which varies depending on run/pause selection.
-function updateTimingDisplayRunPause() {
-    let run = $('#runButton:checked').val();
-    $("#timing-container").html((run ? "Connected to server. Last update at " : "Paused at ") + lastUpdateTime.format('HH:mm') + " UTC.");
-}
-
 // 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) + "&";
         }
@@ -399,15 +387,17 @@ function loadOptions() {
         options = jsonData;
 
         // Populate the Display panel
-        options["web-ui-options"]["spot-count"].forEach(sc => $("#spots-to-fetch").append($('<option>', {
+        web_ui_options["spot-count"].forEach(sc => $("#spots-to-fetch").append($('<option>', {
             value: sc,
-            text: sc
+            text: sc,
+            selected: sc == web_ui_options["spot-count-default"] // todo remove this?
         })));
-        $("#spots-to-fetch").val(options["web-ui-options"]["spot-count-default"]);
+        $("#spots-to-fetch").val(web_ui_options["spot-count-default"]); // todo setting val doesn't update UI?
         getAvailableBandColorSchemes().forEach(sc => $("#band-color-scheme").append($('<option>', {
             value: sc,
             text: sc
         })));
+        $("#band-color-scheme").val(web_ui_options["default-band-color-scheme"]);
 
         // First pass loading settings, so we can load the band colour scheme before the filters that need to use it
         loadSettings();
@@ -421,8 +411,8 @@ 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"]);
+        generateSourcesMultiToggleFilterCard(options["spot_sources"], 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
         // to be called after these are set up, but if the URL params ask for "embedded mode", this will suppress
@@ -515,13 +505,11 @@ $(document).ready(function() {
         // Need to start the SSE connection but also do a full re-query to catch up anything that we missed, so we
         // might as well just call loadSpots again which will trigger it all
         loadSpots();
-        updateTimingDisplayRunPause();
     });
     $("#pauseButton").change(function() {
         // If we are pausing and have an open SSE connection, stop it
         if (evtSource != null) {
             evtSource.close();
         }
-        updateTimingDisplayRunPause();
     });
 });

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.
@@ -67,12 +110,6 @@ function filtersUpdated() {
     saveSettings();
 }
 
-// Function to set dark mode based on the state of the UI toggle in spots, bands and map pages
-function toggleDarkMode() {
-    enableDarkMode($("#darkMode")[0].checked);
-    saveSettings();
-}
-
 // Function to update the band colour scheme in spots, bands and map pages
 function setBandColorSchemeFromUI() {
     setBandColorScheme($("#band-color-scheme option:selected").val());

webassets/js/status.js

@@ -22,14 +22,14 @@ function loadStatus() {
         jsonData["spot_providers"].forEach(p => {
             $("#status-container").append(generateStatusCard("Spot Provider: " + p["name"], [
                 `Status: ${p["status"]}`,
-                `Last Updated: ${p["enabled"] ? moment.unix(p["last_updated"]).utc().fromNow() : "N/A"}`,
+                `Last Updated: ${(p["enabled"] && p["last_updated"] > 0) ? moment.unix(p["last_updated"]).utc().fromNow() : "N/A"}`,
-                `Latest Spot: ${p["enabled"] ? moment.unix(p["last_spot"]).utc().fromNow() : "N/A"}`
+                `Latest Spot: ${(p["enabled"] && p["last_spot"] > 0) ? moment.unix(p["last_spot"]).utc().fromNow() : "N/A"}`
             ]));
         });
         jsonData["alert_providers"].forEach(p => {
             $("#status-container").append(generateStatusCard("Alert Provider: " + p["name"], [
                 `Status: ${p["status"]}`,
-                `Last Updated: ${p["enabled"] ? moment.unix(p["last_updated"]).utc().fromNow() : "N/A"}`
+                `Last Updated: ${(p["enabled"] && p["last_updated"] > 0) ? moment.unix(p["last_updated"]).utc().fromNow() : "N/A"}`
             ]));
         });
     });