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

Replace toggle buttons with checkboxes for better clarity of function

Browse Source
This commit is contained in:
Ian Renton
2026-04-05 10:03:42 +01:00
parent e170f9c6c2
commit b3353b168c
25 changed files with 147 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

4
templates/add_spot.html
View File

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

6
templates/alerts.html
View File

@@ -33,7 +33,7 @@
<div id="display-area" class="appearing-panel card mb-3">
{% module Template("widgets/display-area-header.html", web_ui_options=web_ui_options) %}
<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">
{% module Template("cards/time-zone.html", web_ui_options=web_ui_options) %}
</div>
@@ -56,8 +56,8 @@
</div>
<script src="/js/common.js?v=1775377724"></script>
<script src="/js/alerts.js?v=1775377724"></script>
<script src="/js/common.js?v=1775379822"></script>
<script src="/js/alerts.js?v=1775379822"></script>
<script>$(document).ready(function() { $("#nav-link-alerts").addClass("active"); }); <!-- highlight active page in nav --></script>
{% end %}

6
templates/bands.html
View File

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

8
templates/base.html
View File

@@ -46,10 +46,10 @@
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=1775377724"></script>
<script src="https://misc.ianrenton.com/jsutils/storage.js?v=1775377724"></script>
<script src="https://misc.ianrenton.com/jsutils/ui-ham.js?v=1775377724"></script>
<script src="https://misc.ianrenton.com/jsutils/geo.js?v=1775377724"></script>
<script src="https://misc.ianrenton.com/jsutils/utils.js?v=1775379822"></script>
<script src="https://misc.ianrenton.com/jsutils/storage.js?v=1775379822"></script>
<script src="https://misc.ianrenton.com/jsutils/ui-ham.js?v=1775379822"></script>
<script src="https://misc.ianrenton.com/jsutils/geo.js?v=1775379822"></script>
</head>
<body>

2
templates/cards/bands.html
View File

@@ -1,6 +1,6 @@
<div class="card">
<div class="card-body">
<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>

4
templates/cards/basemap.html
View File

@@ -2,7 +2,7 @@
<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>
<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="Esri.NatGeoWorldMap">ESRI NatGeo World Map</option>
@@ -14,7 +14,7 @@
</select>
</p>
<p class="card-text spothole-card-text">
<label for="basemapOpacity" class="form-label">Opacity:</label>
<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>

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

@@ -1,6 +1,6 @@
<div class="card">
<div class="card-body">
<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>

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

@@ -2,7 +2,7 @@
<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>
<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;">
<option value="10800">3 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-body">
<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>

2
templates/cards/modes.html
View File

@@ -1,6 +1,6 @@
<div class="card">
<div class="card-body">
<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>

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

@@ -2,7 +2,7 @@
<div class="card-body">
<h5 class="card-title">Number of Alerts</h5>
<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"] %}
<option value="{{c}}" {% if web_ui_options["alert-count-default"] == c %}selected{% end %}>{{c}}</option>
{% end %}

2
templates/cards/sigs.html
View File

@@ -1,6 +1,6 @@
<div class="card">
<div class="card-body">
<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>

2
templates/cards/sources.html
View File

@@ -1,6 +1,6 @@
<div class="card">
<div class="card-body">
<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>

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

@@ -1,35 +1,35 @@
<div class="card">
<div class="card-body">
<h5 class="card-title">Table Columns</h5>
<div class="form-group">
<div class="form-check form-check-inline">
<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>
</div>
<div class="form-check form-check-inline">
<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>
</div>
<div class="form-check form-check-inline">
<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>
</div>
<div class="form-check form-check-inline">
<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>
</div>
<div class="form-check form-check-inline">
<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>
</div>
<div class="form-check form-check-inline">
<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>
</div>
<div class="form-check form-check-inline">
<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>
</div>
<div class="row row-cols-2 g-1">
<div class="col"><div class="form-check">
<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>
</div></div>
<div class="col"><div class="form-check">
<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>
</div></div>
<div class="col"><div class="form-check">
<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>
</div></div>
<div class="col"><div class="form-check">
<input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowFreqsModes" value="tableShowFreqsModes" oninput="columnsUpdated();" checked>
<label class="form-check-label" for="tableShowFreqsModes">Freq &amp; Mode</label>
</div></div>
<div class="col"><div class="form-check">
<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>
</div></div>
<div class="col"><div class="form-check">
<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>
</div></div>
<div class="col"><div class="form-check">
<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>
</div></div>
</div>
</div>
</div>
</div>

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

@@ -1,47 +1,47 @@
<div class="card">
<div class="card-body">
<h5 class="card-title">Table Columns</h5>
<div class="form-group">
<div class="form-check form-check-inline">
<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>
</div>
<div class="form-check form-check-inline">
<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>
</div>
<div class="form-check form-check-inline">
<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>
</div>
<div class="form-check form-check-inline">
<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>
</div>
<div class="form-check form-check-inline">
<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>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowBearing" value="tableShowBearing" oninput="columnsUpdated();">
<label class="form-check-label" for="tableShowBearing">Bearing</label>
</div>
<div class="form-check form-check-inline">
<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>
</div>
<div class="form-check form-check-inline">
<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>
</div>
<div class="form-check form-check-inline">
<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>
</div>
<div class="form-check form-check-inline">
<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>
</div>
<div class="row row-cols-2 g-1">
<div class="col"><div class="form-check">
<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>
</div></div>
<div class="col"><div class="form-check">
<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>
</div></div>
<div class="col"><div class="form-check">
<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>
</div></div>
<div class="col"><div class="form-check">
<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>
</div></div>
<div class="col"><div class="form-check">
<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>
</div></div>
<div class="col"><div class="form-check">
<input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowBearing" value="tableShowBearing" oninput="columnsUpdated();">
<label class="form-check-label" for="tableShowBearing">Bearing</label>
</div></div>
<div class="col"><div class="form-check">
<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>
</div></div>
<div class="col"><div class="form-check">
<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>
</div></div>
<div class="col"><div class="form-check">
<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>
</div></div>
<div class="col"><div class="form-check">
<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>
</div></div>
</div>
</div>
</div>
</div>

4
templates/conditions.html
View File

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

6
templates/map.html
View File

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

6
templates/spots.html
View File

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

4
templates/status.html
View File

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

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;">
<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>

5
webassets/css/style.css
View File

@@ -100,11 +100,6 @@ div.appearing-panel {
display: none;
}
.spothole-card-text {
line-height: 2.5em !important;
}
/* SPOTS/ALERTS PAGES, MAIN TABLE */

10
webassets/js/common.js
View File

@@ -92,14 +92,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) {
// Create a button for each option
var $row = $('<div>');
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(` <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($row);
$(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

85
webassets/js/spotsbandsandmap.js
View File

@@ -6,27 +6,26 @@ var spots = []
// to localStorage.
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".
function addBandToggleColourCSS(band_options) {
var $style = $('<style>');
band_options.forEach(o => {
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(`.btn-check:checked + #filter-button-label-band-${domSafeName} { background-color: ${bandToColor(o['name'])}; color: ${bandToContrastColor(o['name'])};}`);
$style.append(`#filter-button-label-band-${domSafeName} { padding-left: 0.3em; border-left: 5px solid ${bandToColor(o['name'])};}`);
});
$('html > head').append($style);
}
// Generate bands filter card. This one is a special case.
function generateBandsMultiToggleFilterCard(band_options) {
// Create a button for each option
var $grid = $('<div class="row row-cols-4 g-1 mb-1">');
band_options.forEach(o => {
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(` <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($grid);
$("#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
@@ -41,72 +40,58 @@ function setHamHFBandToggles() {
// Generate SIGs filter card. This one is also a special case.
function generateSIGsMultiToggleFilterCard(sig_options) {
// Create a button for each option
var $grid = $('<div class="row row-cols-3 g-1 mb-1">');
sig_options.forEach(o => {
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
$("#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> `);
// Create All/None buttons
$("#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>`);
// Bonus "NO_SIG" / "General DX" option
$grid.append(`<div class="col-8"><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>`);
$("#sig-options").append($grid);
$("#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.
function generateModesMultiToggleFilterCard(mode_options) {
// Create a button for each option
var $grid = $('<div class="row row-cols-3 g-1 mb-1">');
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-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(` <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>`);
$("#mode-options").append($grid);
$("#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>`);
}
// 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);
}
// Set the mode toggles that relate to Analog Voice.
function setVoiceModeToggles() {
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-", "")));
});
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
// names here for HTML elements.
function generateSourcesMultiToggleFilterCard(source_options, sources_enabled_by_default) {
// Create a button for each option
var $grid = $('<div class="row row-cols-3 g-1 mb-1">');
source_options.forEach(o => {
var enable = sources_enabled_by_default.includes(o);
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(` <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($grid);
$("#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.