Reduce duplication in HTML pages with includes. Closes #103

templates/cards/bands.html

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

templates/cards/color-scheme-and-band-color-scheme.html

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

templates/cards/color-scheme.html

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

templates/cards/de-continent.html

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

templates/cards/duration-limit-alerts.html

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

templates/cards/dx-continent.html

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

templates/cards/location.html

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

templates/cards/map-features.html

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

templates/cards/modes.html

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

templates/cards/number-of-alerts.html

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

templates/cards/number-of-spots.html

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

templates/cards/sigs.html

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

templates/cards/sources.html

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

templates/cards/spot-age.html

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

templates/cards/table-columns-alerts.html

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

templates/cards/table-columns-spots.html

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

templates/cards/time-zone.html

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