Reduce duplication in HTML pages with includes. Closes #103

This commit is contained in:
Ian Renton
2026-01-31 08:52:28 +00:00
parent 94094974d0
commit 47b4ddb5c8
29 changed files with 326 additions and 517 deletions

View File

@@ -4,164 +4,47 @@
<div class="mt-3"> <div class="mt-3">
<div id="settingsButtonRow" class="row"> <div id="settingsButtonRow" class="row">
<div class="col-auto me-auto pt-3"> <div class="col-auto me-auto pt-3">
<p id="timing-container">Loading...</p> {% module Template("widgets/refresh-timer.html", web_ui_options=web_ui_options) %}
</div> </div>
<div class="col-auto"> <div class="col-auto">
<p class="d-inline-flex gap-1"> <p class="d-inline-flex gap-1">
<button id="filters-button" type="button" class="btn btn-outline-primary" data-bs-toggle="button" onclick="toggleFiltersPanel();"><i class="fa-solid fa-filter"></i>&nbsp;Filters</button> {% module Template("widgets/filters-display-buttons.html", web_ui_options=web_ui_options) %}
<button id="display-button" type="button" class="btn btn-outline-primary" data-bs-toggle="button" onclick="toggleDisplayPanel();"><i class="fa-solid fa-desktop"></i>&nbsp;Display</button>
</p> </p>
</div> </div>
</div> </div>
<div id="filters-area" class="appearing-panel card mb-3"> <div id="filters-area" class="appearing-panel card mb-3">
<div class="card-header text-white bg-primary"> {% module Template("widgets/filters-area-header.html", web_ui_options=web_ui_options) %}
<div class="row">
<div class="col-auto me-auto">
Filters
</div>
<div class="col-auto d-inline-flex">
<button id="close-filters-button" type="button" class="btn-close btn-close-white" aria-label="Close" onclick="closeFiltersPanel();"></button>
</div>
</div>
</div>
<div class="card-body"> <div class="card-body">
<div class="row row-cols-1 row-cols-md-3 g-4"> <div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col"> <div class="col">
<div class="card"> {% module Template("cards/dx-continent.html", web_ui_options=web_ui_options) %}
<div class="card-body">
<h5 class="card-title">DX Continent</h5>
<p id="dx-continent-options" class="card-text spothole-card-text"></p>
</div>
</div>
</div> </div>
<div class="col"> <div class="col">
<div class="card"> {% module Template("cards/sources.html", web_ui_options=web_ui_options) %}
<div class="card-body">
<h5 class="card-title">Sources</h5>
<p id="source-options" class="card-text spothole-card-text"></p>
</div>
</div>
</div> </div>
<div class="col"> <div class="col">
<div class="card"> {% module Template("cards/duration-limit-alerts.html", web_ui_options=web_ui_options) %}
<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/>
<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>
<option value="86400" selected>24 hours</option>
<option value="604800">1 week</option>
<option value="2419200">4 weeks</option>
<option value="9999999999">No limit</option>
</select>
</p>
<p class='card-text spothole-card-text' style='line-height: 1.5em !important;'>
<input class="form-check-input storeable-checkbox" type="checkbox" value="" onclick="filtersUpdated();" id="dxpeditions_skip_max_duration_check" checked><label class="form-check-label ms-2" for="dxpeditions_skip_max_duration_check">Allow DXpeditions that are longer</label>
</p>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div id="display-area" class="appearing-panel card mb-3"> <div id="display-area" class="appearing-panel card mb-3">
<div class="card-header text-white bg-primary"> {% module Template("widgets/display-area-header.html", web_ui_options=web_ui_options) %}
<div class="row">
<div class="col-auto me-auto">
Display
</div>
<div class="col-auto d-inline-flex">
<button id="close-display-button" type="button" class="btn-close btn-close-white" aria-label="Close" onclick="closeDisplayPanel();"></button>
</div>
</div>
</div>
<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-3 g-4">
<div class="col"> <div class="col">
<div class="card"> {% module Template("cards/time-zone.html", web_ui_options=web_ui_options) %}
<div class="card-body">
<h5 class="card-title">Time Zone</h5>
<p class="card-text spothole-card-text"> Use
<select id="timeZone" class="storeable-select form-select ms-2 me-2 d-inline-block" oninput="timeZoneUpdated();" style="width: 8em; display: inline-block;">
<option value="UTC" selected>UTC</option>
<option value="local">Local time</option>
</select>
</p>
</div>
</div>
</div> </div>
<div class="col"> <div class="col">
<div class="card"> {% module Template("cards/number-of-alerts.html", web_ui_options=web_ui_options) %}
<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;">
{% for c in web_ui_options["alert-count"] %}
<option value="{{c}}" {% if web_ui_options["alert-count-default"] == c %}selected{% end %}>{{c}}</option>
{% end %}
</select>
alerts
</p>
</div>
</div>
</div> </div>
<div class="col"> <div class="col">
<div class="card"> {% module Template("cards/color-scheme.html", web_ui_options=web_ui_options) %}
<div class="card-body">
<h5 class="card-title">Theme</h5>
<p class="card-text spothole-card-text">
<label class="form-check-label" for="color-scheme">UI color scheme</label>
<select id="color-scheme" class="storeable-select form-select d-inline-block" oninput="setColorSchemeFromUI();" style="display: inline-block;">
<option value="auto" {% 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="dark" {% if web_ui_options["color-scheme-default"] == "dark" %}selected{% end %}>Dark</option>
</select>
</p>
</div>
</div>
</div> </div>
<div class="col"> <div class="col">
<div class="card"> {% module Template("cards/table-columns-alerts.html", web_ui_options=web_ui_options) %}
<div class="card-body">
<h5 class="card-title">Table Data</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>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

View File

@@ -4,142 +4,52 @@
<div class="mt-3"> <div class="mt-3">
<div id="settingsButtonRow" class="row"> <div id="settingsButtonRow" class="row">
<div class="col-auto me-auto pt-3"> <div class="col-auto me-auto pt-3">
<p id="timing-container">Loading...</p> {% module Template("widgets/refresh-timer.html", web_ui_options=web_ui_options) %}
</div> </div>
<div class="col-auto"> <div class="col-auto">
<p class="d-inline-flex gap-1"> <p class="d-inline-flex gap-1">
<button id="filters-button" type="button" class="btn btn-outline-primary" data-bs-toggle="button" onclick="toggleFiltersPanel();"><i class="fa-solid fa-filter"></i>&nbsp;Filters</button> {% module Template("widgets/filters-display-buttons.html", web_ui_options=web_ui_options) %}
<button id="display-button" type="button" class="btn btn-outline-primary" data-bs-toggle="button" onclick="toggleDisplayPanel();"><i class="fa-solid fa-desktop"></i>&nbsp;Display</button>
</p> </p>
</div> </div>
</div> </div>
<div id="filters-area" class="appearing-panel card mb-3"> <div id="filters-area" class="appearing-panel card mb-3">
<div class="card-header text-white bg-primary"> {% module Template("widgets/filters-area-header.html", web_ui_options=web_ui_options) %}
<div class="row">
<div class="col-auto me-auto">
Filters
</div>
<div class="col-auto d-inline-flex">
<button id="close-filters-button" type="button" class="btn-close btn-close-white" aria-label="Close" onclick="closeFiltersPanel();"></button>
</div>
</div>
</div>
<div class="card-body"> <div class="card-body">
<div class="row row-cols-1 g-4 mb-4 row-cols-md-3"> <div class="row row-cols-1 g-4 mb-4 row-cols-md-3">
<div class="col"> <div class="col">
<div class="card"> {% module Template("cards/bands.html", web_ui_options=web_ui_options) %}
<div class="card-body">
<h5 class="card-title">Bands</h5>
<p id="band-options" class="card-text spothole-card-text"></p>
</div>
</div>
</div> </div>
<div class="col"> <div class="col">
<div class="card"> {% module Template("cards/sigs.html", web_ui_options=web_ui_options) %}
<div class="card-body">
<h5 class="card-title">SIGs</h5>
<p id="sig-options" class="card-text spothole-card-text"></p>
</div>
</div>
</div> </div>
<div class="col"> <div class="col">
<div class="card"> {% module Template("cards/sources.html", web_ui_options=web_ui_options) %}
<div class="card-body">
<h5 class="card-title">Sources</h5>
<p id="source-options" class="card-text spothole-card-text"></p>
</div>
</div>
</div> </div>
</div> </div>
<div class="row row-cols-1 row-cols-md-3 g-4"> <div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col"> <div class="col">
<div class="card"> {% module Template("cards/dx-continent.html", web_ui_options=web_ui_options) %}
<div class="card-body">
<h5 class="card-title">DX Continent</h5>
<p id="dx-continent-options" class="card-text spothole-card-text"></p>
</div>
</div>
</div> </div>
<div class="col"> <div class="col">
<div class="card"> {% module Template("cards/de-continent.html", web_ui_options=web_ui_options) %}
<div class="card-body">
<h5 class="card-title">DE Continent</h5>
<p id="de-continent-options" class="card-text spothole-card-text"></p>
</div>
</div>
</div> </div>
<div class="col"> <div class="col">
<div class="card"> {% module Template("cards/modes.html", web_ui_options=web_ui_options) %}
<div class="card-body">
<h5 class="card-title">Modes</h5>
<p id="mode-options" class="card-text spothole-card-text"></p>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div id="display-area" class="appearing-panel card mb-3"> <div id="display-area" class="appearing-panel card mb-3">
<div class="card-header text-white bg-primary"> {% module Template("widgets/display-area-header.html", web_ui_options=web_ui_options) %}
<div class="row">
<div class="col-auto me-auto">
Display
</div>
<div class="col-auto d-inline-flex">
<button id="close-display-button" type="button" class="btn-close btn-close-white" aria-label="Close" onclick="closeDisplayPanel();"></button>
</div>
</div>
</div>
<div class="card-body"> <div class="card-body">
<div id="display-container" class="row row-cols-1 row-cols-md-4 g-4"> <div id="display-container" class="row row-cols-1 row-cols-md-4 g-4">
<div class="col"> <div class="col">
<div class="card"> {% module Template("cards/spot-age.html", web_ui_options=web_ui_options) %}
<div class="card-body">
<h5 class="card-title">Spot Age</h5>
<p class="card-text spothole-card-text">Last
<select id="max-spot-age" class="storeable-select form-select ms-2 me-2 d-inline-block" oninput="filtersUpdated();" style="width: 5em; display: inline-block;">
{% for a in web_ui_options["max-spot-age"] %}
<option value="{{a*60}}" {% if web_ui_options["max-spot-age-default"] == a*60 %}selected{% end %}>{{a}}</option>
{% end %}
</select>
minutes
</p>
</div>
</div>
</div> </div>
<div class="col"> <div class="col">
<div class="card"> {% module Template("cards/color-scheme-and-band-color-scheme.html", web_ui_options=web_ui_options) %}
<div class="card-body">
<h5 class="card-title">Theme</h5>
<p class="card-text spothole-card-text">
<label class="form-check-label" for="color-scheme">UI color scheme</label>
<select id="color-scheme" class="storeable-select form-select d-inline-block" oninput="setColorSchemeFromUI();" style="display: inline-block;">
<option value="auto" {% 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="dark" {% if web_ui_options["color-scheme-default"] == "dark" %}selected{% end %}>Dark</option>
</select>
</p>
<p class="card-text spothole-card-text">
<label class="form-check-label" for="band-color-scheme">Band color scheme</label><br/>
<select id="band-color-scheme" class="storeable-select form-select d-inline-block" oninput="setBandColorSchemeFromUI();" style="display: inline-block;">
<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="RBN" {% if web_ui_options["band-color-scheme-default"] == "RBN" %}selected{% end %}>RBN</option>
<option value="Ham Rainbow" {% if web_ui_options["band-color-scheme-default"] == "Ham Rainbow" %}selected{% end %}>Ham Rainbow</option>
<option value="Ham Rainbow (Reverse)" {% if web_ui_options["band-color-scheme-default"] == "Ham Rainbow (Reverse)" %}selected{% end %}>Ham Rainbow (Reverse)</option>
<option value="Kate Morley" {% if web_ui_options["band-color-scheme-default"] == "Kate Morley" %}selected{% end %}>Kate Morley</option>
<option value="ColorBrewer" {% if web_ui_options["band-color-scheme-default"] == "ColorBrewer" %}selected{% end %}>ColorBrewer</option>
<option value="IWantHue" {% if web_ui_options["band-color-scheme-default"] == "IWantHue" %}selected{% end %}>IWantHue</option>
<option value="IWantHue (Color Blind)" {% if web_ui_options["band-color-scheme-default"] == "IWantHue (Color Blind)" %}selected{% end %}>IWantHue (Color Blind)</option>
<option value="Mokole" {% if web_ui_options["band-color-scheme-default"] == "Mokole" %}selected{% end %}>Mokole</option>
</select>
</p>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

View File

@@ -0,0 +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>
</div>

View File

@@ -0,0 +1,11 @@
<div class="card">
<div class="card-body">
<h5 class="card-title">Theme</h5>
<p class="card-text spothole-card-text">
{% module Template("widgets/color-scheme.html", web_ui_options=web_ui_options) %}
</p>
<p class="card-text spothole-card-text">
{% module Template("widgets/band-color-scheme.html", web_ui_options=web_ui_options) %}
</p>
</div>
</div>

View File

@@ -0,0 +1,8 @@
<div class="card">
<div class="card-body">
<h5 class="card-title">Theme</h5>
<p class="card-text spothole-card-text">
{% module Template("widgets/color-scheme.html", web_ui_options=web_ui_options) %}
</p>
</div>
</div>

View File

@@ -0,0 +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>
</div>

View File

@@ -0,0 +1,19 @@
<div class="card">
<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/>
<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>
<option value="86400" selected>24 hours</option>
<option value="604800">1 week</option>
<option value="2419200">4 weeks</option>
<option value="9999999999">No limit</option>
</select>
</p>
<p class='card-text spothole-card-text' style='line-height: 1.5em !important;'>
<input class="form-check-input storeable-checkbox" type="checkbox" value="" onclick="filtersUpdated();" id="dxpeditions_skip_max_duration_check" checked><label class="form-check-label ms-2" for="dxpeditions_skip_max_duration_check">Allow DXpeditions that are longer</label>
</p>
</div>
</div>

View File

@@ -0,0 +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>
</div>

View File

@@ -0,0 +1,9 @@
<div class="card">
<div class="card-body">
<h5 class="card-title">Location</h5>
<div class="form-group spothole-card-text">
<label for="userGrid">Your grid:</label>
<input type="text" class="storeable-text form-control" id="userGrid" placeholder="AA00aa" oninput="userGridUpdated();" style="width: 10em; display: inline-block;">
</div>
</div>
</div>

View File

@@ -0,0 +1,11 @@
<div class="card">
<div class="card-body">
<h5 class="card-title">Map Features</h5>
<div class="form-group">
<div class="form-check form-check-inline">
<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>
</div>
</div>
</div>
</div>

View File

@@ -0,0 +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>
</div>

View File

@@ -0,0 +1,13 @@
<div class="card">
<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;">
{% for c in web_ui_options["alert-count"] %}
<option value="{{c}}" {% if web_ui_options["alert-count-default"] == c %}selected{% end %}>{{c}}</option>
{% end %}
</select>
alerts
</p>
</div>
</div>

View File

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

View File

@@ -0,0 +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>
</div>

View File

@@ -0,0 +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>
</div>

View File

@@ -0,0 +1,13 @@
<div class="card">
<div class="card-body">
<h5 class="card-title">Spot Age</h5>
<p class="card-text spothole-card-text">Last
<select id="max-spot-age" class="storeable-select form-select ms-2 me-2 d-inline-block" oninput="filtersUpdated();" style="width: 5em; display: inline-block;">
{% for a in web_ui_options["max-spot-age"] %}
<option value="{{a*60}}" {% if web_ui_options["max-spot-age-default"] == a*60 %}selected{% end %}>{{a}}</option>
{% end %}
</select>
minutes
</p>
</div>
</div>

View File

@@ -0,0 +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>
</div>
</div>

View File

@@ -0,0 +1,43 @@
<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>
</div>
</div>

View File

@@ -0,0 +1,11 @@
<div class="card">
<div class="card-body">
<h5 class="card-title">Time Zone</h5>
<p class="card-text spothole-card-text"> Use
<select id="timeZone" class="storeable-select form-select ms-2 me-2 d-inline-block" oninput="timeZoneUpdated();" style="width: 8em; display: inline-block;">
<option value="UTC" selected>UTC</option>
<option value="local">Local time</option>
</select>
</p>
</div>
</div>

View File

@@ -7,151 +7,51 @@
<div class="col-auto me-auto pt-3"></div> <div class="col-auto me-auto pt-3"></div>
<div class="col-auto"> <div class="col-auto">
<p class="d-inline-flex gap-1"> <p class="d-inline-flex gap-1">
<button id="filters-button" type="button" class="btn btn-outline-primary" data-bs-toggle="button" onclick="toggleFiltersPanel();"><i class="fa-solid fa-filter"></i>&nbsp;Filters</button> {% module Template("widgets/filters-display-buttons.html", web_ui_options=web_ui_options) %}
<button id="display-button" type="button" class="btn btn-outline-primary" data-bs-toggle="button" onclick="toggleDisplayPanel();"><i class="fa-solid fa-desktop"></i>&nbsp;Display</button>
</p> </p>
</div> </div>
</div> </div>
<div id="filters-area" class="appearing-panel card mb-3"> <div id="filters-area" class="appearing-panel card mb-3">
<div class="card-header text-white bg-primary"> {% module Template("widgets/filters-area-header.html", web_ui_options=web_ui_options) %}
<div class="row">
<div class="col-auto me-auto">
Filters
</div>
<div class="col-auto d-inline-flex">
<button id="close-filters-button" type="button" class="btn-close btn-close-white" aria-label="Close" onclick="closeFiltersPanel();"></button>
</div>
</div>
</div>
<div class="card-body"> <div class="card-body">
<div class="row row-cols-1 g-4 mb-4 row-cols-md-3"> <div class="row row-cols-1 g-4 mb-4 row-cols-md-3">
<div class="col"> <div class="col">
<div class="card"> {% module Template("cards/bands.html", web_ui_options=web_ui_options) %}
<div class="card-body">
<h5 class="card-title">Bands</h5>
<p id="band-options" class="card-text spothole-card-text"></p>
</div>
</div>
</div> </div>
<div class="col"> <div class="col">
<div class="card"> {% module Template("cards/sigs.html", web_ui_options=web_ui_options) %}
<div class="card-body">
<h5 class="card-title">SIGs</h5>
<p id="sig-options" class="card-text spothole-card-text"></p>
</div>
</div>
</div> </div>
<div class="col"> <div class="col">
<div class="card"> {% module Template("cards/sources.html", web_ui_options=web_ui_options) %}
<div class="card-body">
<h5 class="card-title">Sources</h5>
<p id="source-options" class="card-text spothole-card-text"></p>
</div>
</div>
</div> </div>
</div> </div>
<div class="row row-cols-1 row-cols-md-3 g-4"> <div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col"> <div class="col">
<div class="card"> {% module Template("cards/dx-continent.html", web_ui_options=web_ui_options) %}
<div class="card-body">
<h5 class="card-title">DX Continent</h5>
<p id="dx-continent-options" class="card-text spothole-card-text"></p>
</div>
</div>
</div> </div>
<div class="col"> <div class="col">
<div class="card"> {% module Template("cards/de-continent.html", web_ui_options=web_ui_options) %}
<div class="card-body">
<h5 class="card-title">DE Continent</h5>
<p id="de-continent-options" class="card-text spothole-card-text"></p>
</div>
</div>
</div> </div>
<div class="col"> <div class="col">
<div class="card"> {% module Template("cards/modes.html", web_ui_options=web_ui_options) %}
<div class="card-body">
<h5 class="card-title">Modes</h5>
<p id="mode-options" class="card-text spothole-card-text"></p>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div id="display-area" class="appearing-panel card mb-3"> <div id="display-area" class="appearing-panel card mb-3">
<div class="card-header text-white bg-primary"> {% module Template("widgets/display-area-header.html", web_ui_options=web_ui_options) %}
<div class="row">
<div class="col-auto me-auto">
Display
</div>
<div class="col-auto d-inline-flex">
<button id="close-display-button" type="button" class="btn-close btn-close-white" aria-label="Close" onclick="closeDisplayPanel();"></button>
</div>
</div>
</div>
<div class="card-body"> <div class="card-body">
<div id="display-container" class="row row-cols-1 row-cols-md-4 g-4"> <div id="display-container" class="row row-cols-1 row-cols-md-4 g-4">
<div class="col"> <div class="col">
<div class="card"> {% module Template("cards/spot-age.html", web_ui_options=web_ui_options) %}
<div class="card-body">
<h5 class="card-title">Spot Age</h5>
<p class="card-text spothole-card-text">Last
<select id="max-spot-age" class="storeable-select form-select ms-2 me-2 d-inline-block" oninput="filtersUpdated();" style="width: 5em; display: inline-block;">
{% for a in web_ui_options["max-spot-age"] %}
<option value="{{a*60}}" {% if web_ui_options["max-spot-age-default"] == a*60 %}selected{% end %}>{{a}}</option>
{% end %}
</select>
minutes
</p>
</div>
</div>
</div> </div>
<div class="col"> <div class="col">
<div class="card"> {% module Template("cards/map-features.html", web_ui_options=web_ui_options) %}
<div class="card-body">
<h5 class="card-title">Map Features</h5>
<div class="form-group">
<div class="form-check form-check-inline">
<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>
</div>
</div>
</div>
</div>
</div> </div>
<div class="col"> <div class="col">
<div class="card"> {% module Template("cards/color-scheme-and-band-color-scheme.html", web_ui_options=web_ui_options) %}
<div class="card-body">
<h5 class="card-title">Theme</h5>
<p class="card-text spothole-card-text">
<label class="form-check-label" for="color-scheme">UI color scheme</label>
<select id="color-scheme" class="storeable-select form-select d-inline-block" oninput="setColorSchemeFromUI();" style="display: inline-block;">
<option value="auto" {% 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="dark" {% if web_ui_options["color-scheme-default"] == "dark" %}selected{% end %}>Dark</option>
</select>
</p>
<p class="card-text spothole-card-text">
<label class="form-check-label" for="band-color-scheme">Band color scheme</label><br/>
<select id="band-color-scheme" class="storeable-select form-select d-inline-block" oninput="setBandColorSchemeFromUI();" style="display: inline-block;">
<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="RBN" {% if web_ui_options["band-color-scheme-default"] == "RBN" %}selected{% end %}>RBN</option>
<option value="Ham Rainbow" {% if web_ui_options["band-color-scheme-default"] == "Ham Rainbow" %}selected{% end %}>Ham Rainbow</option>
<option value="Ham Rainbow (Reverse)" {% if web_ui_options["band-color-scheme-default"] == "Ham Rainbow (Reverse)" %}selected{% end %}>Ham Rainbow (Reverse)</option>
<option value="Kate Morley" {% if web_ui_options["band-color-scheme-default"] == "Kate Morley" %}selected{% end %}>Kate Morley</option>
<option value="ColorBrewer" {% if web_ui_options["band-color-scheme-default"] == "ColorBrewer" %}selected{% end %}>ColorBrewer</option>
<option value="IWantHue" {% if web_ui_options["band-color-scheme-default"] == "IWantHue" %}selected{% end %}>IWantHue</option>
<option value="IWantHue (Color Blind)" {% if web_ui_options["band-color-scheme-default"] == "IWantHue (Color Blind)" %}selected{% end %}>IWantHue (Color Blind)</option>
<option value="Mokole" {% if web_ui_options["band-color-scheme-default"] == "Mokole" %}selected{% end %}>Mokole</option>
</select>
</p>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

View File

@@ -12,223 +12,64 @@
<div id="settingsButtonRow" class="row"> <div id="settingsButtonRow" class="row">
<div class="col-4"> <div class="col-4">
<p class="d-inline-flex gap-1"> <p class="d-inline-flex gap-1">
<span class="btn-group" role="group"> {% module Template("widgets/run-pause.html", web_ui_options=web_ui_options) %}
<input type="radio" class="btn-check" name="runPause" id="runButton" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="runButton"><i class="fa-solid fa-play"></i><span class="hideonmobile">&nbsp;Run</span></label>
<input type="radio" class="btn-check" name="runPause" id="pauseButton" autocomplete="off">
<label class="btn btn-outline-primary" for="pauseButton"><i class="fa-solid fa-pause"></i><span class="hideonmobile">&nbsp;Pause</span></label>
</span>
{% raw web_ui_options["support-button-html"] %} {% raw web_ui_options["support-button-html"] %}
</p> </p>
</div> </div>
<div class="col-8 text-end"> <div class="col-8 text-end">
<p class="d-inline-flex gap-1"> <p class="d-inline-flex gap-1">
<span style="position: relative;"> {% module Template("widgets/search.html", web_ui_options=web_ui_options) %}
<i id="searchicon" class="fa-solid fa-magnifying-glass"></i> {% module Template("widgets/filters-display-buttons.html", web_ui_options=web_ui_options) %}
<input id="search" type="search" class="form-control" oninput="filtersUpdated();" placeholder="Search">
</span>
<button id="filters-button" type="button" class="btn btn-outline-primary" data-bs-toggle="button" onclick="toggleFiltersPanel();"><i class="fa-solid fa-filter"></i><span class="hideonmobile">&nbsp;Filters</span></button>
<button id="display-button" type="button" class="btn btn-outline-primary" data-bs-toggle="button" onclick="toggleDisplayPanel();"><i class="fa-solid fa-desktop"></i><span class="hideonmobile">&nbsp;Display</span></button>
</p> </p>
</div> </div>
</div> </div>
<div id="filters-area" class="appearing-panel card mb-3"> <div id="filters-area" class="appearing-panel card mb-3">
<div class="card-header text-white bg-primary"> {% module Template("widgets/filters-area-header.html", web_ui_options=web_ui_options) %}
<div class="row">
<div class="col-auto me-auto">
Filters
</div>
<div class="col-auto d-inline-flex">
<button id="close-filters-button" type="button" class="btn-close btn-close-white" aria-label="Close" onclick="closeFiltersPanel();"></button>
</div>
</div>
</div>
<div class="card-body"> <div class="card-body">
<div class="row row-cols-1 g-4 mb-4 row-cols-md-3"> <div class="row row-cols-1 g-4 mb-4 row-cols-md-3">
<div class="col"> <div class="col">
<div class="card"> {% module Template("cards/bands.html", web_ui_options=web_ui_options) %}
<div class="card-body">
<h5 class="card-title">Bands</h5>
<p id="band-options" class="card-text spothole-card-text"></p>
</div>
</div>
</div> </div>
<div class="col"> <div class="col">
<div class="card"> {% module Template("cards/sigs.html", web_ui_options=web_ui_options) %}
<div class="card-body">
<h5 class="card-title">SIGs</h5>
<p id="sig-options" class="card-text spothole-card-text"></p>
</div>
</div>
</div> </div>
<div class="col"> <div class="col">
<div class="card"> {% module Template("cards/sources.html", web_ui_options=web_ui_options) %}
<div class="card-body">
<h5 class="card-title">Sources</h5>
<p id="source-options" class="card-text spothole-card-text"></p>
</div>
</div>
</div> </div>
</div> </div>
<div class="row row-cols-1 row-cols-md-3 g-4"> <div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col"> <div class="col">
<div class="card"> {% module Template("cards/dx-continent.html", web_ui_options=web_ui_options) %}
<div class="card-body">
<h5 class="card-title">DX Continent</h5>
<p id="dx-continent-options" class="card-text spothole-card-text"></p>
</div>
</div>
</div> </div>
<div class="col"> <div class="col">
<div class="card"> {% module Template("cards/de-continent.html", web_ui_options=web_ui_options) %}
<div class="card-body">
<h5 class="card-title">DE Continent</h5>
<p id="de-continent-options" class="card-text spothole-card-text"></p>
</div>
</div>
</div> </div>
<div class="col"> <div class="col">
<div class="card"> {% module Template("cards/modes.html", web_ui_options=web_ui_options) %}
<div class="card-body">
<h5 class="card-title">Modes</h5>
<p id="mode-options" class="card-text spothole-card-text"></p>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div id="display-area" class="appearing-panel card mb-3"> <div id="display-area" class="appearing-panel card mb-3">
<div class="card-header text-white bg-primary"> {% module Template("widgets/display-area-header.html", web_ui_options=web_ui_options) %}
<div class="row">
<div class="col-auto me-auto">
Display
</div>
<div class="col-auto d-inline-flex">
<button id="close-display-button" type="button" class="btn-close btn-close-white" aria-label="Close" onclick="closeDisplayPanel();"></button>
</div>
</div>
</div>
<div class="card-body"> <div class="card-body">
<div id="display-container" class="row row-cols-1 row-cols-md-4 g-4"> <div id="display-container" class="row row-cols-1 row-cols-md-4 g-4">
<div class="col"> <div class="col">
<div class="card"> {% module Template("cards/time-zone.html", web_ui_options=web_ui_options) %}
<div class="card-body">
<h5 class="card-title">Time Zone</h5>
<p class="card-text spothole-card-text"> Use
<select id="timeZone" class="storeable-select form-select ms-2 me-2 d-inline-block" oninput="timeZoneUpdated();" style="width: 8em; display: inline-block;">
<option value="UTC" selected>UTC</option>
<option value="local">Local time</option>
</select>
</p>
</div>
</div>
</div> </div>
<div class="col"> <div class="col">
<div class="card"> {% module Template("cards/number-of-spots.html", web_ui_options=web_ui_options) %}
<div class="card-body">
<h5 class="card-title">Number of Spots</h5>
<p class="card-text spothole-card-text">Show up to
<select id="spots-to-fetch" class="storeable-select form-select ms-2 me-2 d-inline-block" oninput="filtersUpdated();" style="width: 5em; display: inline-block;">
{% for c in web_ui_options["spot-count"] %}
<option value="{{c}}" {% if web_ui_options["spot-count-default"] == c %}selected{% end %}>{{c}}</option>
{% end %}
</select>
spots
</p>
</div>
</div>
</div> </div>
<div class="col"> <div class="col">
<div class="card"> {% module Template("cards/location.html", web_ui_options=web_ui_options) %}
<div class="card-body">
<h5 class="card-title">Location</h5>
<div class="form-group spothole-card-text">
<label for="userGrid">Your grid:</label>
<input type="text" class="storeable-text form-control" id="userGrid" placeholder="AA00aa" oninput="userGridUpdated();" style="width: 10em; display: inline-block;">
</div>
</div>
</div>
</div> </div>
<div class="col"> <div class="col">
<div class="card"> {% module Template("cards/color-scheme-and-band-color-scheme.html", web_ui_options=web_ui_options) %}
<div class="card-body">
<h5 class="card-title">Theme</h5>
<p class="card-text spothole-card-text">
<label class="form-check-label" for="color-scheme">UI color scheme</label>
<select id="color-scheme" class="storeable-select form-select d-inline-block" oninput="setColorSchemeFromUI();" style="display: inline-block;">
<option value="auto" {% 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="dark" {% if web_ui_options["color-scheme-default"] == "dark" %}selected{% end %}>Dark</option>
</select>
</p>
<p class="card-text spothole-card-text">
<label class="form-check-label" for="band-color-scheme">Band color scheme</label><br/>
<select id="band-color-scheme" class="storeable-select form-select d-inline-block" oninput="setBandColorSchemeFromUI();" style="display: inline-block;">
<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="RBN" {% if web_ui_options["band-color-scheme-default"] == "RBN" %}selected{% end %}>RBN</option>
<option value="Ham Rainbow" {% if web_ui_options["band-color-scheme-default"] == "Ham Rainbow" %}selected{% end %}>Ham Rainbow</option>
<option value="Ham Rainbow (Reverse)" {% if web_ui_options["band-color-scheme-default"] == "Ham Rainbow (Reverse)" %}selected{% end %}>Ham Rainbow (Reverse)</option>
<option value="Kate Morley" {% if web_ui_options["band-color-scheme-default"] == "Kate Morley" %}selected{% end %}>Kate Morley</option>
<option value="ColorBrewer" {% if web_ui_options["band-color-scheme-default"] == "ColorBrewer" %}selected{% end %}>ColorBrewer</option>
<option value="IWantHue" {% if web_ui_options["band-color-scheme-default"] == "IWantHue" %}selected{% end %}>IWantHue</option>
<option value="IWantHue (Color Blind)" {% if web_ui_options["band-color-scheme-default"] == "IWantHue (Color Blind)" %}selected{% end %}>IWantHue (Color Blind)</option>
<option value="Mokole" {% if web_ui_options["band-color-scheme-default"] == "Mokole" %}selected{% end %}>Mokole</option>
</select>
</p>
</div>
</div>
</div> </div>
<div class="col"> <div class="col">
<div class="card"> {% module Template("cards/table-columns-spots.html", web_ui_options=web_ui_options) %}
<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>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

View File

@@ -0,0 +1,13 @@
<label class="form-check-label" for="band-color-scheme">Band color scheme</label><br/>
<select id="band-color-scheme" class="storeable-select form-select d-inline-block" oninput="setBandColorSchemeFromUI();" style="display: inline-block;">
<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="RBN" {% if web_ui_options["band-color-scheme-default"] == "RBN" %}selected{% end %}>RBN</option>
<option value="Ham Rainbow" {% if web_ui_options["band-color-scheme-default"] == "Ham Rainbow" %}selected{% end %}>Ham Rainbow</option>
<option value="Ham Rainbow (Reverse)" {% if web_ui_options["band-color-scheme-default"] == "Ham Rainbow (Reverse)" %}selected{% end %}>Ham Rainbow (Reverse)</option>
<option value="Kate Morley" {% if web_ui_options["band-color-scheme-default"] == "Kate Morley" %}selected{% end %}>Kate Morley</option>
<option value="ColorBrewer" {% if web_ui_options["band-color-scheme-default"] == "ColorBrewer" %}selected{% end %}>ColorBrewer</option>
<option value="IWantHue" {% if web_ui_options["band-color-scheme-default"] == "IWantHue" %}selected{% end %}>IWantHue</option>
<option value="IWantHue (Color Blind)" {% if web_ui_options["band-color-scheme-default"] == "IWantHue (Color Blind)" %}selected{% end %}>IWantHue (Color Blind)</option>
<option value="Mokole" {% if web_ui_options["band-color-scheme-default"] == "Mokole" %}selected{% end %}>Mokole</option>
</select>

View File

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

View File

@@ -0,0 +1,10 @@
<div class="card-header text-white bg-primary">
<div class="row">
<div class="col-auto me-auto">
Display
</div>
<div class="col-auto d-inline-flex">
<button id="close-display-button" type="button" class="btn-close btn-close-white" aria-label="Close" onclick="closeDisplayPanel();"></button>
</div>
</div>
</div>

View File

@@ -0,0 +1,10 @@
<div class="card-header text-white bg-primary">
<div class="row">
<div class="col-auto me-auto">
Filters
</div>
<div class="col-auto d-inline-flex">
<button id="close-filters-button" type="button" class="btn-close btn-close-white" aria-label="Close" onclick="closeFiltersPanel();"></button>
</div>
</div>
</div>

View File

@@ -0,0 +1,2 @@
<button id="filters-button" type="button" class="btn btn-outline-primary" data-bs-toggle="button" onclick="toggleFiltersPanel();"><i class="fa-solid fa-filter"></i>&nbsp;Filters</button>
<button id="display-button" type="button" class="btn btn-outline-primary" data-bs-toggle="button" onclick="toggleDisplayPanel();"><i class="fa-solid fa-desktop"></i>&nbsp;Display</button>

View File

@@ -0,0 +1 @@
<p id="timing-container">Loading...</p>

View File

@@ -0,0 +1,7 @@
<span class="btn-group" role="group">
<input type="radio" class="btn-check" name="runPause" id="runButton" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="runButton"><i class="fa-solid fa-play"></i><span class="hideonmobile">&nbsp;Run</span></label>
<input type="radio" class="btn-check" name="runPause" id="pauseButton" autocomplete="off">
<label class="btn btn-outline-primary" for="pauseButton"><i class="fa-solid fa-pause"></i><span class="hideonmobile">&nbsp;Pause</span></label>
</span>

View File

@@ -0,0 +1,4 @@
<span style="position: relative;">
<i id="searchicon" class="fa-solid fa-magnifying-glass"></i>
<input id="search" type="search" class="form-control" oninput="filtersUpdated();" placeholder="Search">
</span>