Do more filter panel generation in HTML, less in JS

This commit is contained in:
Ian Renton
2025-10-13 20:41:13 +01:00
parent cfa3aaedb0
commit c051aad157
6 changed files with 106 additions and 67 deletions

View File

@@ -22,6 +22,7 @@
</div>
<div class="col-auto">
<p class="d-inline-flex gap-1">
<button id="add-spot-button" type="button" class="btn btn-outline-success" data-bs-toggle="button" onclick="toggleAddSpotPanel();"><i class="fa-solid fa-comment"></i> Add Spot</button>
<button id="filters-button" type="button" class="btn btn-outline-primary" data-bs-toggle="button" onclick="toggleFiltersPanel();"><i class="fa-solid fa-filter"></i> 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> Display</button>
</p>
@@ -41,8 +42,50 @@
</div>
<div class="card-body">
<div id="filters-container-1" class="row row-cols-1 g-4 mb-4"></div>
<div id="filters-container-2" class="row row-cols-1 row-cols-md-4 g-4"></div>
<div class="row row-cols-1 g-4 mb-4">
<div class="col">
<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>
</div>
</div>
<div class="row row-cols-1 row-cols-md-4 g-4">
<div class="col">
<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>
</div>
<div class="col">
<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>
</div>
<div class="col">
<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>
</div>
<div class="col">
<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>
</div>
</div>
</div>
</div>