Reduce duplication in HTML pages with includes. Closes #103

templates/widgets/band-color-scheme.html

@@ -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>

templates/widgets/color-scheme.html

@@ -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>

templates/widgets/display-area-header.html

@@ -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>

templates/widgets/filters-area-header.html

@@ -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>

templates/widgets/filters-display-buttons.html

@@ -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>

templates/widgets/refresh-timer.html

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

templates/widgets/run-pause.html

@@ -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>

templates/widgets/search.html

@@ -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>