w1cdn/spothole
1
0
Fork 0
mirror of https://git.ianrenton.com/ian/spothole.git synced 2026-04-29 18:25:58 +00:00
Code Issues 13 Packages Projects Releases Wiki Activity

Compare commits

base: w1cdn:d51e5184a1b9dbeb9da86f398729f620bb926042
Branches Tags
w1cdn:main w1cdn:web_ui_options_faff w1cdn:97-wwtota w1cdn:88-colour-schemes w1cdn:3-sse-endpoints w1cdn:82-tota w1cdn:73-hamqth-lookup
w1cdn:1.2 w1cdn:1.1.1 w1cdn:1.1 w1cdn:1.0.1 w1cdn:1.0
...
compare: w1cdn:main
Branches Tags
w1cdn:main w1cdn:web_ui_options_faff w1cdn:97-wwtota w1cdn:88-colour-schemes w1cdn:3-sse-endpoints w1cdn:82-tota w1cdn:73-hamqth-lookup
w1cdn:1.2 w1cdn:1.1.1 w1cdn:1.1 w1cdn:1.0.1 w1cdn:1.0

16 Commits
d51e5184a1 ... main

Author SHA1 Message Date
Ian Renton
461ce94204 Cache-busting ?v= strings for CSS 2026-04-22 10:23:50 +01:00
Ian Renton
49949a0b2e Fix display of the last time cleanup ran 2026-04-11 08:17:30 +01:00
Ian Renton
a3332aa023 Fix a parsing bug with NG3K 2026-04-11 08:14:52 +01:00
Ian Renton
ac1ab4bd2d Ping on new spots option 2026-04-10 08:05:57 +01:00
Ian Renton
82944b9c38 Layout tweaks 2026-04-10 08:02:45 +01:00
Ian Renton
36dba30089 Ping on new spots option 2026-04-10 07:51:26 +01:00
Ian Renton
1ed175e099 Layout fix 2026-04-07 06:20:07 +01:00
Ian Renton
3870e560ec Bring localstorage stuff in from jsutils, it's only used here 2026-04-06 19:11:47 +01:00
Ian Renton
236ac1a584 Wider bands/sigs/sources columns on mobile 2026-04-06 18:22:45 +01:00
Ian Renton
9243f98604 Style tweak 2026-04-06 16:37:45 +01:00
Ian Renton
8f062320d3 Re-add Dark Mapnik theme (via dodgy CSS hacks) 2026-04-06 16:16:19 +01:00
Ian Renton
60126b0010 Add the ability to centre and zoom the map with URL params. #50 2026-04-05 10:42:01 +01:00
Ian Renton
06c16e2f1f Zoom to the extent of map markers on first load #50 2026-04-05 10:26:20 +01:00
Ian Renton
b3353b168c Replace toggle buttons with checkboxes for better clarity of function 2026-04-05 10:03:42 +01:00
Ian Renton
e170f9c6c2 Merge remote-tracking branch 'origin/main' 
# Conflicts:
#	templates/about.html
#	templates/add_spot.html
#	templates/alerts.html
#	templates/bands.html
#	templates/base.html
#	templates/conditions.html
#	templates/map.html
#	templates/spots.html
#	templates/status.html
 2026-04-05 09:28:44 +01:00
Ian Renton
497b84f5dc Bring Spothole mapping to parity with my other tools by adding choice of basemap, opacity and overlays #50 2026-04-05 09:27:23 +01:00
33 changed files with 529 additions and 196 deletions
Expand all files Collapse all files

31
README.md
View File

@@ -34,20 +34,23 @@ 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. 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. |
| `color-scheme` | `light`, `dark`, `auto` | `auto` | `?color-scheme=dark` | Forces light or dark mode in preference to the operating system default. | | `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. |
| `map-center-lat` | Numeric (decimal) | (auto) | `?map-center-lat=51.5` | Sets the initial latitude of the map centre on the map page. If omitted, the map auto-fits to the loaded spots. |
| `map-center-lon` | Numeric (decimal) | (auto) | `?map-center-lon=-0.1` | Sets the initial longitude of the map centre on the map page. If omitted, the map auto-fits to the loaded spots. |
| `map-zoom` | Numeric (integer) | (auto) | `?map-zoom=6` | Sets the initial zoom level of the map on the map page. If omitted, the map auto-fits to the loaded spots. |
More will be added soon to allow customisation of filters and other display properties. More will be added soon to allow customisation of filters and other display properties.

6
alertproviders/ng3k.py
View File

@@ -68,9 +68,9 @@ class NG3K(HTTPAlertProvider):
dx_country = parts[1] dx_country = parts[1]
qsl_info = parts[3] qsl_info = parts[3]
bands = extra_parts[1] bands = extra_parts[1] if len(extra_parts) > 1 else ""
modes = extra_parts[2] if len(extra_parts) > 3 else "" modes = extra_parts[2] if len(extra_parts) > 2 else ""
comment = extra_parts[-1] comment = extra_parts[3] if len(extra_parts) > 3 else ""
# Convert to our alert format # Convert to our alert format
alert = Alert(source=self.name, alert = Alert(source=self.name,

2
templates/about.html
View File

@@ -67,7 +67,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> <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> </div>
<script src="/js/common.js?v=1775295943"></script> <script src="/js/common.js?v=1776849830"></script>
<script>$(document).ready(function() { $("#nav-link-about").addClass("active"); }); <!-- highlight active page in nav --></script> <script>$(document).ready(function() { $("#nav-link-about").addClass("active"); }); <!-- highlight active page in nav --></script>
{% end %} {% end %}

4
templates/add_spot.html
View File

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

6
templates/alerts.html
View File

@@ -33,7 +33,7 @@
<div id="display-area" class="appearing-panel card mb-3"> <div id="display-area" class="appearing-panel card mb-3">
{% module Template("widgets/display-area-header.html", web_ui_options=web_ui_options) %} {% module Template("widgets/display-area-header.html", web_ui_options=web_ui_options) %}
<div class="card-body"> <div class="card-body">
<div id="display-container" class="row row-cols-1 row-cols-md-3 g-4"> <div id="display-container" class="row row-cols-1 row-cols-md-4 g-4">
<div class="col"> <div class="col">
{% module Template("cards/time-zone.html", web_ui_options=web_ui_options) %} {% module Template("cards/time-zone.html", web_ui_options=web_ui_options) %}
</div> </div>
@@ -56,8 +56,8 @@
</div> </div>
<script src="/js/common.js?v=1775295943"></script> <script src="/js/common.js?v=1776849830"></script>
<script src="/js/alerts.js?v=1775295943"></script> <script src="/js/alerts.js?v=1776849830"></script>
<script>$(document).ready(function() { $("#nav-link-alerts").addClass("active"); }); <!-- highlight active page in nav --></script> <script>$(document).ready(function() { $("#nav-link-alerts").addClass("active"); }); <!-- highlight active page in nav --></script>
{% end %} {% end %}

6
templates/bands.html
View File

@@ -62,9 +62,9 @@
<script> <script>
let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %}; let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %};
</script> </script>
<script src="/js/common.js?v=1775295943"></script> <script src="/js/common.js?v=1776849830"></script>
<script src="/js/spotsbandsandmap.js?v=1775295943"></script> <script src="/js/spotsbandsandmap.js?v=1776849830"></script>
<script src="/js/bands.js?v=1775295943"></script> <script src="/js/bands.js?v=1776849830"></script>
<script>$(document).ready(function() { $("#nav-link-bands").addClass("active"); }); <!-- highlight active page in nav --></script> <script>$(document).ready(function() { $("#nav-link-bands").addClass("active"); }); <!-- highlight active page in nav --></script>
{% end %} {% end %}

10
templates/base.html
View File

@@ -24,7 +24,7 @@
<title>Spothole</title> <title>Spothole</title>
<link rel="stylesheet" href="/css/style.css" type="text/css"> <link rel="stylesheet" href="/css/style.css?v=1776849830" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous"> integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
<link href="/fa/css/fontawesome.min.css" rel="stylesheet" /> <link href="/fa/css/fontawesome.min.css" rel="stylesheet" />
@@ -45,12 +45,10 @@
integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
crossorigin="anonymous"></script> crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/tinycolor2@1.6.0/cjs/tinycolor.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/tinycolor2@1.6.0/cjs/tinycolor.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.9/dist/chart.umd.min.js"></script>
<script src="https://misc.ianrenton.com/jsutils/utils.js?v=1775295943"></script> <script src="https://misc.ianrenton.com/jsutils/utils.js?v=1776849830"></script>
<script src="https://misc.ianrenton.com/jsutils/storage.js?v=1775295943"></script> <script src="https://misc.ianrenton.com/jsutils/ui-ham.js?v=1776849830"></script>
<script src="https://misc.ianrenton.com/jsutils/ui-ham.js?v=1775295943"></script> <script src="https://misc.ianrenton.com/jsutils/geo.js?v=1776849830"></script>
<script src="https://misc.ianrenton.com/jsutils/geo.js?v=1775295943"></script>
</head> </head>
<body> <body>

11
templates/cards/audio.html Normal file
View File

@@ -0,0 +1,11 @@
<div class="card">
<div class="card-body">
<h5 class="card-title mb-3">Audio</h5>
<div class="form-group">
<div class="form-check form-check-inline">
<input class="form-check-input storeable-checkbox" type="checkbox" id="pingOnNewSpots" value="pingOnNewSpots" oninput="saveSettings();">
<label class="form-check-label" for="pingOnNewSpots">Ping on new spots</label>
</div>
</div>
</div>
</div>

2
templates/cards/bands.html
View File

@@ -1,6 +1,6 @@
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<h5 class="card-title">Bands</h5> <h5 class="card-title">Bands</h5>
<p id="band-options" class="card-text spothole-card-text"></p> <div id="band-options" class="card-text spothole-card-text"></div>
</div> </div>
</div> </div>

27
templates/cards/basemap.html Normal file
View File

@@ -0,0 +1,27 @@
<div class="card">
<div class="card-body">
<h5 class="card-title">Map Style</h5>
<p class="card-text spothole-card-text">
<label for="basemap" class="form-label">Basemap</label>
<select id="basemap" class="storeable-select form-select" oninput="displayUpdated();">
<option value="OpenStreetMap.Mapnik" selected>OpenStreetMap Mapnik</option>
<option value="OpenStreetMap.Mapnik.Dark">OpenStreetMap Mapnik (Dark)</option>
<option value="Esri.NatGeoWorldMap">ESRI NatGeo World Map</option>
<option value="Esri.WorldTopoMap">ESRI World Topo Map</option>
<option value="Esri.WorldShadedRelief">ESRI World Shaded Relief</option>
<option value="Esri.WorldImagery">ESRI World Imagery</option>
<option value="CartoDB.Voyager">CartoDB Voyager</option>
<option value="CartoDB.DarkMatter">CartoDB DarkMatter</option>
</select>
</p>
<p class="card-text spothole-card-text">
<label for="basemapOpacity" class="form-label">Opacity</label>
<select id="basemapOpacity" class="storeable-select form-select" oninput="displayUpdated();">
<option value="1">100%</option>
<option value="0.75">75%</option>
<option value="0.5">50%</option>
<option value="0.25">25%</option>
</select>
</p>
</div>
</div>

2
templates/cards/de-continent.html
View File

@@ -1,6 +1,6 @@
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<h5 class="card-title">DE Continent</h5> <h5 class="card-title">DE Continent</h5>
<p id="de-continent-options" class="card-text spothole-card-text"></p> <div id="de-continent-options" class="card-text spothole-card-text"></div>
</div> </div>
</div> </div>

2
templates/cards/duration-limit-alerts.html
View File

@@ -2,7 +2,7 @@
<div class="card-body"> <div class="card-body">
<h5 class="card-title">Duration Limit <i class='fa-solid fa-circle-question' title='Some users create long-duration alerts for the period they will be generally in and around xOTA references, when they are not indending to be on the air most of the time. Use this control to restrict the maximum duration of spots that the software will display, and exclude any with a long duration, to avoid these filling up the list. By default, we allow DXpeditions to be displayed even if they are longer than this limit, because on a DXpedition the operators typically ARE on the air most of the time.'></i></h5> <h5 class="card-title">Duration Limit <i class='fa-solid fa-circle-question' title='Some users create long-duration alerts for the period they will be generally in and around xOTA references, when they are not indending to be on the air most of the time. Use this control to restrict the maximum duration of spots that the software will display, and exclude any with a long duration, to avoid these filling up the list. By default, we allow DXpeditions to be displayed even if they are longer than this limit, because on a DXpedition the operators typically ARE on the air most of the time.'></i></h5>
<p class="card-text spothole-card-text"> <p class="card-text spothole-card-text">
Hide any alerts lasting more than:<br/> <label for="max-duration" class="form-label">Hide any alerts lasting more than</label>
<select id="max-duration" class="storeable-select form-select" onclick="filtersUpdated();" style="width: 8em; display: inline-block;"> <select id="max-duration" class="storeable-select form-select" onclick="filtersUpdated();" style="width: 8em; display: inline-block;">
<option value="10800">3 hours</option> <option value="10800">3 hours</option>
<option value="43200">12 hours</option> <option value="43200">12 hours</option>

2
templates/cards/dx-continent.html
View File

@@ -1,6 +1,6 @@
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<h5 class="card-title">DX Continent</h5> <h5 class="card-title">DX Continent</h5>
<p id="dx-continent-options" class="card-text spothole-card-text"></p> <div id="dx-continent-options" class="card-text spothole-card-text"></div>
</div> </div>
</div> </div>

32
templates/cards/map-features.html
View File

@@ -1,11 +1,41 @@
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<h5 class="card-title">Map Features</h5> <h5 class="card-title mb-3">Map Features</h5>
<div class="form-group"> <div class="form-group">
<div class="form-check form-check-inline"> <div class="form-check form-check-inline">
<input class="form-check-input storeable-checkbox" type="checkbox" id="mapShowGeodesics" value="mapShowGeodesics" oninput="displayUpdated();"> <input class="form-check-input storeable-checkbox" type="checkbox" id="mapShowGeodesics" value="mapShowGeodesics" oninput="displayUpdated();">
<label class="form-check-label" for="mapShowGeodesics">Geodesic Lines</label> <label class="form-check-label" for="mapShowGeodesics">Geodesic Lines</label>
</div> </div>
</div> </div>
<div class="form-group">
<div class="form-check form-check-inline">
<input class="form-check-input storeable-checkbox" type="checkbox" id="showTerminator" oninput="displayUpdated();" checked>
<label class="form-check-label" for="showTerminator">Terminator / Greyline</label>
</div>
</div>
<div class="form-group">
<div class="form-check form-check-inline">
<input class="form-check-input storeable-checkbox" type="checkbox" id="showMaidenheadGrid" oninput="displayUpdated();">
<label class="form-check-label" for="showMaidenheadGrid">Maidenhead Grid</label>
</div>
</div>
<div class="form-group">
<div class="form-check form-check-inline">
<input class="form-check-input storeable-checkbox" type="checkbox" id="showCQZones" oninput="displayUpdated();">
<label class="form-check-label" for="showCQZones">CQ Zones</label>
</div>
</div>
<div class="form-group">
<div class="form-check form-check-inline">
<input class="form-check-input storeable-checkbox" type="checkbox" id="showITUZones" oninput="displayUpdated();">
<label class="form-check-label" for="showITUZones">ITU Zones</label>
</div>
</div>
<div class="form-group">
<div class="form-check form-check-inline">
<input class="form-check-input storeable-checkbox" type="checkbox" id="showWABWAIGrid" oninput="displayUpdated();">
<label class="form-check-label" for="showWABWAIGrid">WAB/WAI Grid</label>
</div>
</div>
</div> </div>
</div> </div>

2
templates/cards/modes.html
View File

@@ -1,6 +1,6 @@
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<h5 class="card-title">Modes</h5> <h5 class="card-title">Modes</h5>
<p id="mode-options" class="card-text spothole-card-text"></p> <div id="mode-options" class="card-text spothole-card-text"></div>
</div> </div>
</div> </div>

2
templates/cards/number-of-alerts.html
View File

@@ -2,7 +2,7 @@
<div class="card-body"> <div class="card-body">
<h5 class="card-title">Number of Alerts</h5> <h5 class="card-title">Number of Alerts</h5>
<p class="card-text spothole-card-text">Show up to <p class="card-text spothole-card-text">Show up to
<select id="alerts-to-fetch" class="storeable-select form-select ms-2" oninput="filtersUpdated();" style="width: 5em;display: inline-block;"> <select id="alerts-to-fetch" class="storeable-select form-select ms-2 me-2" oninput="filtersUpdated();" style="width: 5em;display: inline-block;">
{% for c in web_ui_options["alert-count"] %} {% for c in web_ui_options["alert-count"] %}
<option value="{{c}}" {% if web_ui_options["alert-count-default"] == c %}selected{% end %}>{{c}}</option> <option value="{{c}}" {% if web_ui_options["alert-count-default"] == c %}selected{% end %}>{{c}}</option>
{% end %} {% end %}

2
templates/cards/sigs.html
View File

@@ -1,6 +1,6 @@
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<h5 class="card-title">SIGs</h5> <h5 class="card-title">SIGs</h5>
<p id="sig-options" class="card-text spothole-card-text"></p> <div id="sig-options" class="card-text spothole-card-text"></div>
</div> </div>
</div> </div>

2
templates/cards/sources.html
View File

@@ -1,6 +1,6 @@
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<h5 class="card-title">Sources</h5> <h5 class="card-title">Sources</h5>
<p id="source-options" class="card-text spothole-card-text"></p> <div id="source-options" class="card-text spothole-card-text"></div>
</div> </div>
</div> </div>

58
templates/cards/table-columns-alerts.html
View File

@@ -1,35 +1,35 @@
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<h5 class="card-title">Table Columns</h5> <h5 class="card-title">Table Columns</h5>
<div class="form-group"> <div class="row row-cols-2 g-1">
<div class="form-check form-check-inline"> <div class="col"><div class="form-check">
<input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowStartTime" value="tableShowStartTime" oninput="columnsUpdated();" checked> <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowStartTime" value="tableShowStartTime" oninput="columnsUpdated();" checked>
<label class="form-check-label" for="tableShowStartTime">Start Time</label> <label class="form-check-label" for="tableShowStartTime">Start Time</label>
</div> </div></div>
<div class="form-check form-check-inline"> <div class="col"><div class="form-check">
<input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowEndTime" value="tableShowEndTime" oninput="columnsUpdated();" checked> <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowEndTime" value="tableShowEndTime" oninput="columnsUpdated();" checked>
<label class="form-check-label" for="tableShowEndTime">End Time</label> <label class="form-check-label" for="tableShowEndTime">End Time</label>
</div> </div></div>
<div class="form-check form-check-inline"> <div class="col"><div class="form-check">
<input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowDX" value="tableShowDX" oninput="columnsUpdated();" checked> <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowDX" value="tableShowDX" oninput="columnsUpdated();" checked>
<label class="form-check-label" for="tableShowDX">DX</label> <label class="form-check-label" for="tableShowDX">DX</label>
</div> </div></div>
<div class="form-check form-check-inline"> <div class="col"><div class="form-check">
<input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowFreqsModes" value="tableShowFreqsModes" oninput="columnsUpdated();" checked> <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowFreqsModes" value="tableShowFreqsModes" oninput="columnsUpdated();" checked>
<label class="form-check-label" for="tableShowFreqsModes">Frequencies & Modes</label> <label class="form-check-label" for="tableShowFreqsModes">Freq &amp; Mode</label>
</div> </div></div>
<div class="form-check form-check-inline"> <div class="col"><div class="form-check">
<input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowComment" value="tableShowComment" oninput="columnsUpdated();" checked> <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowComment" value="tableShowComment" oninput="columnsUpdated();" checked>
<label class="form-check-label" for="tableShowComment">Comment</label> <label class="form-check-label" for="tableShowComment">Comment</label>
</div> </div></div>
<div class="form-check form-check-inline"> <div class="col"><div class="form-check">
<input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowSource" value="tableShowSource" oninput="columnsUpdated();" checked> <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowSource" value="tableShowSource" oninput="columnsUpdated();" checked>
<label class="form-check-label" for="tableShowSource">Source</label> <label class="form-check-label" for="tableShowSource">Source</label>
</div> </div></div>
<div class="form-check form-check-inline"> <div class="col"><div class="form-check">
<input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowRef" value="tableShowRef" oninput="columnsUpdated();" checked> <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowRef" value="tableShowRef" oninput="columnsUpdated();" checked>
<label class="form-check-label" for="tableShowRef">Ref.</label> <label class="form-check-label" for="tableShowRef">Ref.</label>
</div> </div></div>
</div> </div>
</div> </div>
</div> </div>

82
templates/cards/table-columns-spots.html
View File

@@ -1,47 +1,47 @@
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<h5 class="card-title">Table Columns</h5> <h5 class="card-title">Table Columns</h5>
<div class="form-group"> <div class="row row-cols-2 g-1">
<div class="form-check form-check-inline"> <div class="col"><div class="form-check">
<input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowTime" value="tableShowTime" oninput="columnsUpdated();" checked> <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowTime" value="tableShowTime" oninput="columnsUpdated();" checked>
<label class="form-check-label" for="tableShowTime">Time</label> <label class="form-check-label" for="tableShowTime">Time</label>
</div> </div></div>
<div class="form-check form-check-inline"> <div class="col"><div class="form-check">
<input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowDX" value="tableShowDX" oninput="columnsUpdated();" checked> <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowDX" value="tableShowDX" oninput="columnsUpdated();" checked>
<label class="form-check-label" for="tableShowDX">DX</label> <label class="form-check-label" for="tableShowDX">DX</label>
</div> </div></div>
<div class="form-check form-check-inline"> <div class="col"><div class="form-check">
<input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowFreq" value="tableShowFreq" oninput="columnsUpdated();" checked> <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowFreq" value="tableShowFreq" oninput="columnsUpdated();" checked>
<label class="form-check-label" for="tableShowFreq">Frequency</label> <label class="form-check-label" for="tableShowFreq">Frequency</label>
</div> </div></div>
<div class="form-check form-check-inline"> <div class="col"><div class="form-check">
<input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowMode" value="tableShowMode" oninput="columnsUpdated();" checked> <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowMode" value="tableShowMode" oninput="columnsUpdated();" checked>
<label class="form-check-label" for="tableShowMode">Mode</label> <label class="form-check-label" for="tableShowMode">Mode</label>
</div> </div></div>
<div class="form-check form-check-inline"> <div class="col"><div class="form-check">
<input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowComment" value="tableShowComment" oninput="columnsUpdated();" checked> <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowComment" value="tableShowComment" oninput="columnsUpdated();" checked>
<label class="form-check-label" for="tableShowComment">Comment</label> <label class="form-check-label" for="tableShowComment">Comment</label>
</div> </div></div>
<div class="form-check form-check-inline"> <div class="col"><div class="form-check">
<input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowBearing" value="tableShowBearing" oninput="columnsUpdated();"> <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowBearing" value="tableShowBearing" oninput="columnsUpdated();">
<label class="form-check-label" for="tableShowBearing">Bearing</label> <label class="form-check-label" for="tableShowBearing">Bearing</label>
</div> </div></div>
<div class="form-check form-check-inline"> <div class="col"><div class="form-check">
<input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowType" value="tableShowType" oninput="columnsUpdated();" checked> <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowType" value="tableShowType" oninput="columnsUpdated();" checked>
<label class="form-check-label" for="tableShowType">Type</label> <label class="form-check-label" for="tableShowType">Type</label>
</div> </div></div>
<div class="form-check form-check-inline"> <div class="col"><div class="form-check">
<input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowRef" value="tableShowRef" oninput="columnsUpdated();" checked> <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowRef" value="tableShowRef" oninput="columnsUpdated();" checked>
<label class="form-check-label" for="tableShowRef">Ref.</label> <label class="form-check-label" for="tableShowRef">Ref.</label>
</div> </div></div>
<div class="form-check form-check-inline"> <div class="col"><div class="form-check">
<input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowDE" value="tableShowDE" oninput="columnsUpdated();" checked> <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowDE" value="tableShowDE" oninput="columnsUpdated();" checked>
<label class="form-check-label" for="tableShowDE">DE</label> <label class="form-check-label" for="tableShowDE">DE</label>
</div> </div></div>
<div class="form-check form-check-inline"> <div class="col"><div class="form-check">
<input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowWorkedCheckbox" value="tableShowWorkedCheckbox" oninput="columnsUpdated();" checked> <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowWorkedCheckbox" value="tableShowWorkedCheckbox" oninput="columnsUpdated();" checked>
<label class="form-check-label" for="tableShowWorkedCheckbox">Worked?</label> <label class="form-check-label" for="tableShowWorkedCheckbox">Worked?</label>
</div> </div></div>
</div> </div>
</div> </div>
</div> </div>

5
templates/conditions.html
View File

@@ -229,8 +229,9 @@
</div> </div>
</div> </div>
<script src="/js/common.js?v=1775295943"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.9/dist/chart.umd.min.js"></script>
<script src="/js/conditions.js?v=1775295943"></script> <script src="/js/common.js?v=1776849830"></script>
<script src="/js/conditions.js?v=1776849830"></script>
<script>$(document).ready(function () { <script>$(document).ready(function () {
$("#nav-link-conditions").addClass("active"); $("#nav-link-conditions").addClass("active");
}); <!-- highlight active page in nav --></script> }); <!-- highlight active page in nav --></script>

15
templates/map.html
View File

@@ -47,6 +47,9 @@
<div class="col"> <div class="col">
{% module Template("cards/spot-age.html", web_ui_options=web_ui_options) %} {% module Template("cards/spot-age.html", web_ui_options=web_ui_options) %}
</div> </div>
<div class="col">
{% module Template("cards/basemap.html", web_ui_options=web_ui_options) %}
</div>
<div class="col"> <div class="col">
{% module Template("cards/map-features.html", web_ui_options=web_ui_options) %} {% module Template("cards/map-features.html", web_ui_options=web_ui_options) %}
</div> </div>
@@ -65,14 +68,20 @@
<script src="https://cdn.jsdelivr.net/npm/leaflet-providers@2.0.0/leaflet-providers.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/leaflet-providers@2.0.0/leaflet-providers.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet-extra-markers@1.2.2/src/assets/js/leaflet.extra-markers.min.js" type="module"></script> <script src="https://cdn.jsdelivr.net/npm/leaflet-extra-markers@1.2.2/src/assets/js/leaflet.extra-markers.min.js" type="module"></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet.geodesic"></script> <script src="https://cdn.jsdelivr.net/npm/leaflet.geodesic"></script>
<script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.js"></script>
<script src="https://cdn.jsdelivr.net/npm/text-image/dist/text-image.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@joergdietrich/leaflet.terminator@1.1.0/L.Terminator.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@joergdietrich/leaflet.terminator@1.1.0/L.Terminator.min.js"></script>
<script src="https://ianrenton.github.io/Leaflet.Maidenhead/src/L.Maidenhead.js"></script>
<script src="https://ha8tks.github.io/Leaflet.ITUzones/src/L.ITUzones.js"></script>
<script src="https://ha8tks.github.io/Leaflet.CQzones/src/L.CQzones.js"></script>
<script src="https://misc.ianrenton.com/Leaflet.WorkedAllBritainIreland/L.WorkedAllBritainIreland.js"></script>
<script> <script>
let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %}; let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %};
</script> </script>
<script src="/js/common.js?v=1775295942"></script> <script src="/js/common.js?v=1776849830"></script>
<script src="/js/spotsbandsandmap.js?v=1775295942"></script> <script src="/js/spotsbandsandmap.js?v=1776849830"></script>
<script src="/js/map.js?v=1775295942"></script> <script src="/js/map.js?v=1776849830"></script>
<script>$(document).ready(function() { $("#nav-link-map").addClass("active"); }); <!-- highlight active page in nav --></script> <script>$(document).ready(function() { $("#nav-link-map").addClass("active"); }); <!-- highlight active page in nav --></script>
{% end %} {% end %}

9
templates/spots.html
View File

@@ -74,6 +74,9 @@
<div class="col"> <div class="col">
{% module Template("cards/table-columns-spots.html", web_ui_options=web_ui_options) %} {% module Template("cards/table-columns-spots.html", web_ui_options=web_ui_options) %}
</div> </div>
<div class="col">
{% module Template("cards/audio.html", web_ui_options=web_ui_options) %}
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -87,9 +90,9 @@
<script> <script>
let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %}; let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %};
</script> </script>
<script src="/js/common.js?v=1775295942"></script> <script src="/js/common.js?v=1776849830"></script>
<script src="/js/spotsbandsandmap.js?v=1775295942"></script> <script src="/js/spotsbandsandmap.js?v=1776849830"></script>
<script src="/js/spots.js?v=1775295942"></script> <script src="/js/spots.js?v=1776849830"></script>
<script>$(document).ready(function() { $("#nav-link-spots").addClass("active"); }); <!-- highlight active page in nav --></script> <script>$(document).ready(function() { $("#nav-link-spots").addClass("active"); }); <!-- highlight active page in nav --></script>
{% end %} {% end %}

4
templates/status.html
View File

@@ -59,8 +59,8 @@
</div> </div>
</div> </div>
<script src="/js/common.js?v=1775295943"></script> <script src="/js/common.js?v=1776849830"></script>
<script src="/js/status.js?v=1775295943"></script> <script src="/js/status.js?v=1776849830"></script>
<script> <script>
$(document).ready(function() { $("#nav-link-status").addClass("active"); }); <!-- highlight active page in nav --> $(document).ready(function() { $("#nav-link-status").addClass("active"); }); <!-- highlight active page in nav -->
</script> </script>

2
templates/widgets/band-color-scheme.html
View File

@@ -1,4 +1,4 @@
<label class="form-check-label" for="band-color-scheme">Band color scheme</label><br/> <label class="form-check-label form-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 id="band-color-scheme" class="storeable-select form-select d-inline-block" oninput="setBandColorSchemeFromUI();" style="display: inline-block;">
<option value="PSK Reporter" {% if web_ui_options["band-color-scheme-default"] == "PSK Reporter" %}selected{% end %}>PSK Reporter</option> <option value="PSK Reporter" {% if web_ui_options["band-color-scheme-default"] == "PSK Reporter" %}selected{% end %}>PSK Reporter</option>
<option value="PSK Reporter (Adjusted)" {% if web_ui_options["band-color-scheme-default"] == "PSK Reporter (Adjusted)" %}selected{% end %}>PSK Reporter (Adjusted)</option> <option value="PSK Reporter (Adjusted)" {% if web_ui_options["band-color-scheme-default"] == "PSK Reporter (Adjusted)" %}selected{% end %}>PSK Reporter (Adjusted)</option>

2
templates/widgets/color-scheme.html
View File

@@ -1,4 +1,4 @@
<label class="form-check-label" for="color-scheme">UI color scheme</label> <label class="form-check-label form-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;"> <select id="color-scheme" class="storeable-select form-select d-inline-block" oninput="setColorSchemeFromUI();" style="display: inline-block;">
<option value="auto" {% if web_ui_options["color-scheme-default"] == "auto" %}selected{% end %}>Automatic</option> <option value="auto" {% if web_ui_options["color-scheme-default"] == "auto" %}selected{% end %}>Automatic</option>
<option value="light" {% if web_ui_options["color-scheme-default"] == "light" %}selected{% end %}>Light</option> <option value="light" {% if web_ui_options["color-scheme-default"] == "light" %}selected{% end %}>Light</option>

BIN
webassets/audio/ping.mp3 Normal file
View File

Binary file not shown.

11
webassets/css/style.css
View File

@@ -100,11 +100,6 @@ div.appearing-panel {
display: none; display: none;
} }
.spothole-card-text {
line-height: 2.5em !important;
}
/* SPOTS/ALERTS PAGES, MAIN TABLE */ /* SPOTS/ALERTS PAGES, MAIN TABLE */
@@ -219,10 +214,8 @@ div#map {
.leaflet-container { .leaflet-container {
font-family: var(--bs-body-font-family) !important; font-family: var(--bs-body-font-family) !important;
} }
.leaflet-control-attribution {
[data-bs-theme=dark] .leaflet-layer, background: none;
[data-bs-theme=dark] .leaflet-control-attribution {
filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
} }
/* Make buttons overlaid on the map have a non-transparent fill so you can see the text better */ /* Make buttons overlaid on the map have a non-transparent fill so you can see the text better */

43
webassets/js/common.js
View File

@@ -2,6 +2,39 @@
var options = {}; var options = {};
// Last time we updated the spots/alerts list on display. // Last time we updated the spots/alerts list on display.
var lastUpdateTime; var lastUpdateTime;
// Normally load user settings from local storage, unless embedded mode is in use
let useLocalStorage = true;
// Save settings to local storage. Suppressed if "use local storage" is false.
function saveSettings() {
if (useLocalStorage) {
// Find all storeable UI elements, store a key of "element id:property name" mapped to the value of that
// property. For a checkbox, that's the "checked" property.
$(".storeable-checkbox").each(function() {
localStorage.setItem("#" + $(this)[0].id + ":checked", JSON.stringify($(this)[0].checked));
});
$(".storeable-select").each(function() {
localStorage.setItem("#" + $(this)[0].id + ":value", JSON.stringify($(this)[0].value));
});
$(".storeable-text").each(function() {
localStorage.setItem("#" + $(this)[0].id + ":value", JSON.stringify($(this)[0].value));
});
}
}
// Load settings from local storage and set up the filter selectors. Suppressed if "use local storage" is false.
function loadSettings() {
if (useLocalStorage) {
// Find all local storage entries and push their data to the corresponding UI element
Object.keys(localStorage).forEach(function(key) {
if (key.startsWith("#") && key.includes(":")) {
// Split the key back into an element ID and a property
var split = key.split(":");
$(split[0]).prop(split[1], JSON.parse(localStorage.getItem(key)));
}
});
}
}
// Load and apply any URL params. This is used for "embedded mode" where another site can embed a version of // Load and apply any URL params. This is used for "embedded mode" where another site can embed a version of
// Spothole and provide its own interface options rather than using the user's saved ones. These may select things // Spothole and provide its own interface options rather than using the user's saved ones. These may select things
@@ -92,14 +125,14 @@ function allFilterOptionsSelected(parameter) {
} }
// Generate a filter card with multiple toggle buttons plus All/None buttons. // Generate a filter card with inline checkboxes plus All/None links.
function generateMultiToggleFilterCard(elementID, filterQuery, options) { function generateMultiToggleFilterCard(elementID, filterQuery, options) {
// Create a button for each option var $row = $('<div>');
options.forEach(o => { options.forEach(o => {
$(elementID).append(`<input type="checkbox" class="btn-check filter-button-${filterQuery} storeable-checkbox" name="options" id="filter-button-${filterQuery}-${o}" value="${o}" autocomplete="off" onClick="filtersUpdated()" checked><label class="btn btn-outline-success" for="filter-button-${filterQuery}-${o}">${o}</label> `); $row.append(`<div class="form-check form-check-inline"><input type="checkbox" class="form-check-input filter-button-${filterQuery} storeable-checkbox" id="filter-button-${filterQuery}-${o}" value="${o}" autocomplete="off" onClick="filtersUpdated()" checked><label class="form-check-label" for="filter-button-${filterQuery}-${o}">${o}</label></div>`);
}); });
// Create All/None buttons $(elementID).append($row);
$(elementID).append(` <span style="display: inline-block"><button id="filter-button-${filterQuery}-all" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('${filterQuery}', true);">All</button>&nbsp;<button id="filter-button-${filterQuery}-none" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('${filterQuery}', false);">None</button></span>`); $(elementID).append(`<div class="mt-1"><a href="#" onclick="toggleFilterButtons('${filterQuery}', true); return false;">All</a> &nbsp; <a href="#" onclick="toggleFilterButtons('${filterQuery}', false); return false;">None</a></div>`);
} }
// Method called when "All" or "None" is clicked // Method called when "All" or "None" is clicked

247
webassets/js/map.js
View File

@@ -1,10 +1,29 @@
// How often to query the server? // How often to query the server?
const REFRESH_INTERVAL_SEC = 60; const REFRESH_INTERVAL_SEC = 60;
// Colours
const MAIDENHEAD_GRID_COLOR_LIGHT = 'rgba(200, 140, 140, 1.0)';
const CQ_ZONES_COLOR_LIGHT = 'rgba(140, 200, 140, 1.0)';
const ITU_ZONES_COLOR_LIGHT = 'rgba(200, 200, 140, 1.0)';
const WAB_WAI_GRID_COLOR_LIGHT = 'rgba(140, 140, 200, 1.0)';
const MAIDENHEAD_GRID_COLOR_DARK = 'rgba(120, 60, 60, 1.0)';
const CQ_ZONES_COLOR_DARK = 'rgba(60, 120, 60, 1.0)';
const ITU_ZONES_COLOR_DARK = 'rgba(120, 120, 60, 1.0)';
const WAB_WAI_GRID_COLOR_DARK = 'rgba(60, 60, 120, 1.0)';
// Map layers // Map layers
var backgroundTileLayer;
var markersLayer; var markersLayer;
var geodesicsLayer; var geodesicsLayer;
var terminator; var terminator;
var maidenheadGrid;
var cqZones;
var ituZones;
var wabwaiGrid;
// Tracks the currently-loaded basemap provider string to avoid unnecessary tile reloads
var loadedBasemap;
// Tracks whether this is the first display of markers after page load
var firstLoad = true;
// Load spots and populate the map. // Load spots and populate the map.
function loadSpots() { function loadSpots() {
@@ -13,7 +32,9 @@ function loadSpots() {
spots = jsonData; spots = jsonData;
// Update map // Update map
updateMap(); updateMap();
terminator.setTime(); if ($("#showTerminator")[0].checked) {
terminator.setTime();
}
}); });
} }
@@ -57,6 +78,15 @@ function updateMap() {
} }
} }
}); });
// On first load, zoom to the extent of the markers
if (firstLoad) {
if (markersLayer.getLayers().length >= 2) {
var group = new L.featureGroup(markersLayer.getLayers());
map.fitBounds(group.getBounds().pad(0.1));
}
firstLoad = false;
}
} }
// Get an icon for a spot, based on its band, using PSK Reporter colours, its program etc. // Get an icon for a spot, based on its band, using PSK Reporter colours, its program etc.
@@ -180,10 +210,27 @@ function loadOptions() {
// to be called after these are set up, but if the URL params ask for "embedded mode", this will suppress // to be called after these are set up, but if the URL params ask for "embedded mode", this will suppress
// loading settings, so this needs to be called before that. // loading settings, so this needs to be called before that.
loadURLParams(); loadURLParams();
loadMapURLParams();
// Load settings from settings storage now all the controls are available // Load settings from settings storage now all the controls are available
loadSettings(); loadSettings();
// If no basemap has been explicitly saved and the UI is in dark mode, default to dark Mapnik
if (localStorage.getItem("#basemap:value") === null) {
if (document.documentElement.getAttribute("data-bs-theme") === "dark") {
$("#basemap").val("OpenStreetMap.Mapnik.Dark");
}
}
// Apply basemap and overlay settings now that controls have their saved values
setBasemap($("#basemap").val());
setBasemapOpacity(parseFloat($("#basemapOpacity").val()));
enableTerminator($("#showTerminator")[0].checked);
enableMaidenheadGrid($("#showMaidenheadGrid")[0].checked);
enableCQZones($("#showCQZones")[0].checked);
enableITUZones($("#showITUZones")[0].checked);
enableWABWAIGrid($("#showWABWAIGrid")[0].checked);
// Load spots and set up the timer // Load spots and set up the timer
loadSpots(); loadSpots();
setInterval(loadSpots, REFRESH_INTERVAL_SEC * 1000); setInterval(loadSpots, REFRESH_INTERVAL_SEC * 1000);
@@ -193,9 +240,150 @@ function loadOptions() {
// Method called when any display property is changed to reload the map and persist the display settings. // Method called when any display property is changed to reload the map and persist the display settings.
function displayUpdated() { function displayUpdated() {
updateMap(); updateMap();
setBasemap($("#basemap").val());
setBasemapOpacity(parseFloat($("#basemapOpacity").val()));
enableTerminator($("#showTerminator")[0].checked);
enableMaidenheadGrid($("#showMaidenheadGrid")[0].checked);
enableCQZones($("#showCQZones")[0].checked);
enableITUZones($("#showITUZones")[0].checked);
enableWABWAIGrid($("#showWABWAIGrid")[0].checked);
saveSettings(); saveSettings();
} }
// Set the basemap
function setBasemap(basemapname) {
// Only change if we have to, to avoid a flash of reloading content
if (loadedBasemap !== basemapname) {
loadedBasemap = basemapname;
if (typeof backgroundTileLayer !== 'undefined') {
map.removeLayer(backgroundTileLayer);
}
// OpenStreetMap.Mapnik.Dark is a synthetic variant that uses Mapnik tiles with a CSS filter applied
const providerName = basemapname === "OpenStreetMap.Mapnik.Dark" ? "OpenStreetMap.Mapnik" : basemapname;
backgroundTileLayer = L.tileLayer.provider(providerName, {
opacity: parseFloat($("#basemapOpacity").val()),
edgeBufferTiles: 1
});
backgroundTileLayer.addTo(map);
backgroundTileLayer.bringToBack();
if (basemapname === "OpenStreetMap.Mapnik.Dark") {
var container = backgroundTileLayer.getContainer();
if (container) {
container.style.filter = 'invert(100%) hue-rotate(180deg) brightness(80%)';
}
}
// Identify dark basemaps to ensure we use white text for unselected icons
// and change the background colour appropriately
const basemapIsDark = basemapname === "CartoDB.DarkMatter" || basemapname === "Esri.WorldImagery" || basemapname === "OpenStreetMap.Mapnik.Dark";
$("#map").css('background-color', basemapIsDark ? "black" : "white");
// Change the colour of the grid and zone overlays to match
if (basemapIsDark) {
maidenheadGrid.options.color = MAIDENHEAD_GRID_COLOR_DARK;
cqZones.options.color = CQ_ZONES_COLOR_DARK;
ituZones.options.color = ITU_ZONES_COLOR_DARK;
wabwaiGrid.options.color = WAB_WAI_GRID_COLOR_DARK;
} else {
maidenheadGrid.options.color = MAIDENHEAD_GRID_COLOR_LIGHT;
cqZones.options.color = CQ_ZONES_COLOR_LIGHT;
ituZones.options.color = ITU_ZONES_COLOR_LIGHT;
wabwaiGrid.options.color = WAB_WAI_GRID_COLOR_LIGHT;
}
// Force regenerate overlays in the new colours
map.removeLayer(maidenheadGrid);
map.removeLayer(cqZones);
map.removeLayer(ituZones);
map.removeLayer(wabwaiGrid);
enableMaidenheadGrid($("#showMaidenheadGrid")[0].checked);
enableCQZones($("#showCQZones")[0].checked);
enableITUZones($("#showITUZones")[0].checked);
enableWABWAIGrid($("#showWABWAIGrid")[0].checked);
}
}
// Set the basemap opacity
function setBasemapOpacity(opacity) {
if (typeof backgroundTileLayer !== 'undefined') {
backgroundTileLayer.setOpacity(opacity);
}
}
// Shows/hides the terminator/greyline overlay
function enableTerminator(show) {
if (show) {
terminator.setTime();
terminator.addTo(map);
} else {
map.removeLayer(terminator);
}
}
// Shows/hides the Maidenhead grid overlay
function enableMaidenheadGrid(show) {
if (show) {
maidenheadGrid.addTo(map);
backgroundTileLayer.bringToBack();
} else {
map.removeLayer(maidenheadGrid);
}
}
// Shows/hides the CQ zone overlay
function enableCQZones(show) {
if (show) {
cqZones.addTo(map);
backgroundTileLayer.bringToBack();
} else {
map.removeLayer(cqZones);
}
}
// Shows/hides the ITU zone overlay
function enableITUZones(show) {
if (show) {
ituZones.addTo(map);
backgroundTileLayer.bringToBack();
} else {
map.removeLayer(ituZones);
}
}
// Shows/hides the WAB/WAI grid overlay
function enableWABWAIGrid(show) {
if (show) {
wabwaiGrid.addTo(map);
backgroundTileLayer.bringToBack();
} else {
map.removeLayer(wabwaiGrid);
}
}
// Load map-specific URL parameters for center position and zoom level.
// These set Leaflet state directly rather than form controls, so they live here rather than in loadURLParams().
// If any parameter is applied, firstLoad is set to false so updateMap() does not override the position.
function loadMapURLParams() {
let params = new URLSearchParams(document.location.search);
let lat = parseFloat(params.get("map-center-lat"));
let lon = parseFloat(params.get("map-center-lon"));
let zoom = parseFloat(params.get("map-zoom"));
let hasLatLon = !isNaN(lat) && !isNaN(lon);
let hasZoom = !isNaN(zoom);
if (hasLatLon || hasZoom) {
if (hasLatLon && hasZoom) {
map.setView([lat, lon], zoom);
} else if (hasLatLon) {
map.setView([lat, lon], map.getZoom());
} else {
map.setZoom(zoom);
}
firstLoad = false;
}
}
// Set up the map // Set up the map
function setUpMap() { function setUpMap() {
// Create map // Create map
@@ -206,12 +394,20 @@ function setUpMap() {
}); });
// Add basemap // Add basemap
backgroundTileLayer = L.tileLayer.provider("OpenStreetMap.Mapnik", { loadedBasemap = $("#basemap").val();
opacity: 1, const initialProviderName = loadedBasemap === "OpenStreetMap.Mapnik.Dark" ? "OpenStreetMap.Mapnik" : loadedBasemap;
backgroundTileLayer = L.tileLayer.provider(initialProviderName, {
opacity: parseFloat($("#basemapOpacity").val()),
edgeBufferTiles: 1 edgeBufferTiles: 1
}); });
backgroundTileLayer.addTo(map); backgroundTileLayer.addTo(map);
backgroundTileLayer.bringToBack(); backgroundTileLayer.bringToBack();
if (loadedBasemap === "OpenStreetMap.Mapnik.Dark") {
var container = backgroundTileLayer.getContainer();
if (container) {
container.style.filter = 'invert(100%) hue-rotate(180deg) brightness(80%)';
}
}
// Add marker layer // Add marker layer
markersLayer = new L.LayerGroup(); markersLayer = new L.LayerGroup();
@@ -221,14 +417,53 @@ function setUpMap() {
geodesicsLayer = new L.LayerGroup(); geodesicsLayer = new L.LayerGroup();
geodesicsLayer.addTo(map); geodesicsLayer.addTo(map);
// Add terminator/greyline // Add terminator/greyline (toggleable)
terminator = L.terminator({ terminator = L.terminator({
interactive: false interactive: false
}); });
terminator.setStyle({fillColor: '#00000050'}); terminator.setStyle({fillColor: '#00000050'});
terminator.addTo(map); if ($("#showTerminator")[0].checked) {
terminator.addTo(map);
}
// Display a default view. // Add Maidenhead grid (toggleable)
maidenheadGrid = L.maidenhead({
color : MAIDENHEAD_GRID_COLOR_LIGHT
});
if ($("#showMaidenheadGrid")[0].checked) {
maidenheadGrid.addTo(map);
backgroundTileLayer.bringToBack();
}
// Add CQ zone layer (toggleable)
cqZones = L.cqzones({
color : CQ_ZONES_COLOR_LIGHT
});
if ($("#showCQZones")[0].checked) {
cqZones.addTo(map);
backgroundTileLayer.bringToBack();
}
// Add ITU zone layer (toggleable)
ituZones = L.ituzones({
color : ITU_ZONES_COLOR_LIGHT
});
if ($("#showITUZones")[0].checked) {
ituZones.addTo(map);
backgroundTileLayer.bringToBack();
}
// Add WAB/WAI grid layer (toggleable)
wabwaiGrid = L.workedAllBritainIreland({
color : WAB_WAI_GRID_COLOR_LIGHT
});
if ($("#showWABWAIGrid")[0].checked) {
wabwaiGrid.addTo(map);
backgroundTileLayer.bringToBack();
}
// Display a default view. This will only last until the spots are first loaded, at which point the map will zoom
// to the extent of ths spots.
map.setView([30, 0], 3); map.setView([30, 0], 3);
} }

5
webassets/js/spots.js
View File

@@ -61,6 +61,11 @@ function startSSEConnection() {
// Add the new spot to table // Add the new spot to table
addSpotToTopOfTable(newSpot, true); addSpotToTopOfTable(newSpot, true);
// Ping if we need to
if ($("#pingOnNewSpots")[0].checked) {
new Audio("/audio/ping.mp3").play();
}
}; };
evtSource.onerror = function(err) { evtSource.onerror = function(err) {

85
webassets/js/spotsbandsandmap.js
View File

@@ -6,27 +6,26 @@ var spots = []
// to localStorage. // to localStorage.
let worked = [] let worked = []
// Dynamically add CSS code for the band toggle buttons to be in the appropriate colour. // Dynamically add CSS code for the band checkboxes to show in the appropriate colour.
// Some band names contain decimal points which are not allowed in CSS classes, so we text-replace them to "p". // Some band names contain decimal points which are not allowed in CSS classes, so we text-replace them to "p".
function addBandToggleColourCSS(band_options) { function addBandToggleColourCSS(band_options) {
var $style = $('<style>'); var $style = $('<style>');
band_options.forEach(o => { band_options.forEach(o => {
var domSafeName = o["name"].replace(/^[^A-Za-z0-9]+|[^\w]+/gi, ""); var domSafeName = o["name"].replace(/^[^A-Za-z0-9]+|[^\w]+/gi, "");
$style.append(`#filter-button-label-band-${domSafeName} { border-color: ${bandToColor(o['name'])}; color: var(--bs-secondary);}`); $style.append(`#filter-button-label-band-${domSafeName} { padding-left: 0.3em; border-left: 5px solid ${bandToColor(o['name'])};}`);
$style.append(`.btn-check:checked + #filter-button-label-band-${domSafeName} { background-color: ${bandToColor(o['name'])}; color: ${bandToContrastColor(o['name'])};}`);
}); });
$('html > head').append($style); $('html > head').append($style);
} }
// Generate bands filter card. This one is a special case. // Generate bands filter card. This one is a special case.
function generateBandsMultiToggleFilterCard(band_options) { function generateBandsMultiToggleFilterCard(band_options) {
// Create a button for each option var $grid = $('<div class="row row-cols-3 row-cols-md-2 row-cols-lg-3 row-cols-xxl-4 g-1 mb-1">');
band_options.forEach(o => { band_options.forEach(o => {
var domSafeName = o["name"].replace(/^[^A-Za-z0-9]+|[^\w]+/gi, ""); var domSafeName = o["name"].replace(/^[^A-Za-z0-9]+|[^\w]+/gi, "");
$("#band-options").append(`<input type="checkbox" class="btn-check filter-button-band storeable-checkbox" name="options" id="filter-button-band-${domSafeName}" value="${o['name']}" autocomplete="off" onClick="filtersUpdated()" checked><label class="btn btn-outline-secondary" id="filter-button-label-band-${domSafeName}" for="filter-button-band-${domSafeName}">${o['name']}</label> `); $grid.append(`<div class="col"><div class="form-check"><input type="checkbox" class="form-check-input filter-button-band storeable-checkbox" id="filter-button-band-${domSafeName}" value="${o['name']}" autocomplete="off" onClick="filtersUpdated()" checked> <label class="form-check-label" id="filter-button-label-band-${domSafeName}" for="filter-button-band-${domSafeName}">${o['name']}</label></div></div>`);
}); });
// Create All/None/Ham HF buttons $("#band-options").append($grid);
$("#band-options").append(` <span style="display: inline-block"><button id="filter-button-band-all" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('band', true);">All</button> <button id="filter-button-band-none" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('band', false);">None</button> <button id="filter-button-band-none" type="button" class="btn btn-outline-secondary" onclick="setHamHFBandToggles();">Ham HF</button></span>`); $("#band-options").append(`<div class="mt-1"><a href="#" onclick="toggleFilterButtons('band', true); return false;">All</a> &nbsp; <a href="#" onclick="toggleFilterButtons('band', false); return false;">None</a> &nbsp; <a href="#" onclick="setHamHFBandToggles(); return false;">Ham HF only</a></div>`);
} }
// Set the band toggles so that only the amateur radio HF bands are selected. This includes 160m and 6m because that's // Set the band toggles so that only the amateur radio HF bands are selected. This includes 160m and 6m because that's
@@ -41,72 +40,58 @@ function setHamHFBandToggles() {
// Generate SIGs filter card. This one is also a special case. // Generate SIGs filter card. This one is also a special case.
function generateSIGsMultiToggleFilterCard(sig_options) { function generateSIGsMultiToggleFilterCard(sig_options) {
// Create a button for each option var $grid = $('<div class="row row-cols-2 row-cols-xxl-3 g-1 mb-1">');
sig_options.forEach(o => { sig_options.forEach(o => {
var domSafeName = o["name"].replace(/^[^A-Za-z0-9]+|[^\w]+/gi, ""); var domSafeName = o["name"].replace(/^[^A-Za-z0-9]+|[^\w]+/gi, "");
$("#sig-options").append(`<input type="checkbox" class="btn-check filter-button-sig storeable-checkbox" name="options" id="filter-button-sig-${domSafeName}" value="${o['name']}" autocomplete="off" onClick="filtersUpdated()" checked><label class="btn btn-outline-success" id="filter-button-label-sig-${domSafeName}" for="filter-button-sig-${domSafeName}" title="${o['description']}"><i class="fa-solid ${sigToIcon(o['name'], 'fa-tower-cell')}"></i> ${o['name']}</label> `); $grid.append(`<div class="col"><div class="form-check"><input type="checkbox" class="form-check-input filter-button-sig storeable-checkbox" id="filter-button-sig-${domSafeName}" value="${o['name']}" autocomplete="off" onClick="filtersUpdated()" checked><label class="form-check-label" id="filter-button-label-sig-${domSafeName}" for="filter-button-sig-${domSafeName}" title="${o['description']}"><i class="fa-solid ${sigToIcon(o['name'], 'fa-tower-cell')}"></i> ${o['name']}</label></div></div>`);
}); });
// Create a bonus "NO_SIG" / "General DX" option // Bonus "NO_SIG" / "General DX" option
$("#sig-options").append(`<input type="checkbox" class="btn-check filter-button-sig storeable-checkbox" name="options" id="filter-button-sig-NO_SIG" value="NO_SIG" autocomplete="off" onClick="filtersUpdated()" checked><label class="btn btn-outline-success" id="filter-button-label-sig-NO_SIG" for="filter-button-sig-NO_SIG"><i class="fa-solid fa-tower-cell"></i> General DX</label> `); $grid.append(`<div class="w-100"><div class="form-check"><input type="checkbox" class="form-check-input filter-button-sig storeable-checkbox" id="filter-button-sig-NO_SIG" value="NO_SIG" autocomplete="off" onClick="filtersUpdated()" checked><label class="form-check-label" id="filter-button-label-sig-NO_SIG" for="filter-button-sig-NO_SIG"><i class="fa-solid fa-tower-cell"></i> General DX</label></div></div>`);
// Create All/None buttons $("#sig-options").append($grid);
$("#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>`); $("#sig-options").append(`<div class="mt-1"><a href="#" onclick="toggleFilterButtons('sig', true); return false;">All</a> &nbsp; <a href="#" onclick="toggleFilterButtons('sig', false); return false;">None</a></div>`);
} }
// Generate modes filter card. This one is also a special case. // Generate modes filter card. This one is also a special case.
function generateModesMultiToggleFilterCard(mode_options) { function generateModesMultiToggleFilterCard(mode_options) {
// Create a button for each option var $grid = $('<div class="row row-cols-3 row-cols-md-2 row-cols-lg-3 g-1 mb-1">');
mode_options.forEach(o => { mode_options.forEach(o => {
var domSafeName = o.replace(/^[^A-Za-z0-9]+|[^\w]+/gi, ""); 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-success" id="filter-button-label-mode-${domSafeName}" for="filter-button-mode-${domSafeName}">${o}</label> `); $grid.append(`<div class="col"><div class="form-check"><input type="checkbox" class="form-check-input filter-button-mode storeable-checkbox" id="filter-button-mode-${domSafeName}" value="${o}" autocomplete="off" onClick="filtersUpdated()" checked><label class="form-check-label" id="filter-button-label-mode-${domSafeName}" for="filter-button-mode-${domSafeName}">${o}</label></div></div>`);
}); });
// Create All/None buttons $("#mode-options").append($grid);
$("#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>`); $("#mode-options").append(`<div class="mt-1"><a href="#" onclick="toggleFilterButtons('mode', true); return false;">All</a> &nbsp; <a href="#" onclick="toggleFilterButtons('mode', false); return false;">None</a> &nbsp; <a href="#" onclick="setVoiceModeToggles(); return false;">Voice only</a> &nbsp; <a href="#" onclick="setDigiModeToggles(); return false;">Digimodes only</a></div>`);
// 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. // Set the mode toggles that relate to Analog Voice.
function toggleAnalogVoiceModeToggles() { function setVoiceModeToggles() {
toggleToggles("mode", ["PHONE", "SSB", "LSB", "USB", "AM", "FM"]); const modes = ["PHONE", "SSB", "LSB", "USB", "AM", "FM", "DV", "DMR", "DSTAR", "C4FM", "M17"];
} $(".filter-button-mode").each(function() {
$(this).prop('checked', modes.includes($(this).val().replace("filter-button-mode-", "")));
// 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(); filtersUpdated();
} }
// Generate Sources filter card. This one is a minor special case as we create the buttons in the normal way, but then // Set the mode toggles that relate to Digimodes.
function setDigiModeToggles() {
const modes = ["DATA", "FT8", "FT4", "RTTY", "SSTV", "JS8", "HELL", "PSK", "OLIVIA", "PKT", "MSK144"];
$(".filter-button-mode").each(function() {
$(this).prop('checked', modes.includes($(this).val().replace("filter-button-mode-", "")));
});
filtersUpdated();
}
// Generate Sources filter card. This one is a minor special case as we create the checkboxes in the normal way, but
// set which ones are enabled by default based on config rather than having them all enabled by default. We also sanitise // 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. // names here for HTML elements.
function generateSourcesMultiToggleFilterCard(source_options, sources_enabled_by_default) { function generateSourcesMultiToggleFilterCard(source_options, sources_enabled_by_default) {
// Create a button for each option var $grid = $('<div class="row row-cols-2 row-cols-xxl-3 g-1 mb-1">');
source_options.forEach(o => { source_options.forEach(o => {
var enable = sources_enabled_by_default.includes(o); var enable = sources_enabled_by_default.includes(o);
var domSafeName = o.replace(/^[^A-Za-z0-9]+|[^\w]+/gi, ""); var domSafeName = o.replace(/^[^A-Za-z0-9]+|[^\w]+/gi, "");
$("#source-options").append(`<input type="checkbox" class="btn-check filter-button-source storeable-checkbox" name="options" id="filter-button-source-${domSafeName}" value="${o}" autocomplete="off" onClick="filtersUpdated()" ${enable ? "checked" : ""}><label class="btn btn-outline-success" for="filter-button-source-${domSafeName}">${o}</label> `); $grid.append(`<div class="col"><div class="form-check"><input type="checkbox" class="form-check-input filter-button-source storeable-checkbox" id="filter-button-source-${domSafeName}" value="${o}" autocomplete="off" onClick="filtersUpdated()" ${enable ? "checked" : ""}><label class="form-check-label" for="filter-button-source-${domSafeName}">${o}</label></div></div>`);
}); });
// Create All/None buttons $("#source-options").append($grid);
$("#source-options").append(` <span style="display: inline-block"><button id="filter-button-source-all" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('source', true);">All</button>&nbsp;<button id="filter-button-source-none" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('source', false);">None</button></span>`); $("#source-options").append(`<div class="mt-1"><a href="#" onclick="toggleFilterButtons('source', true); return false;">All</a> &nbsp; <a href="#" onclick="toggleFilterButtons('source', false); return false;">None</a></div>`);
} }
// Method called when any filter is changed to reload the spots and persist the filter settings. // Method called when any filter is changed to reload the spots and persist the filter settings.

2
webassets/js/status.js
View File

@@ -13,7 +13,7 @@ function loadStatus() {
$("#web-server-last-page").text(moment.unix(jsonData["webserver"]["last_page_access"]).utc().fromNow()); $("#web-server-last-page").text(moment.unix(jsonData["webserver"]["last_page_access"]).utc().fromNow());
$("#cleanup-status").text(jsonData["cleanup"]["status"]); $("#cleanup-status").text(jsonData["cleanup"]["status"]);
$("#cleanu-last-ran").text(moment.unix(jsonData["cleanup"]["last_ran"]).utc().fromNow()); $("#cleanup-last-ran").text(moment.unix(jsonData["cleanup"]["last_ran"]).utc().fromNow());
jsonData["spot_providers"].forEach(p => { jsonData["spot_providers"].forEach(p => {
$("#spot-providers-status-container").append(` $("#spot-providers-status-container").append(`