Add area and toggles for the Add Spot form #29

This commit is contained in:
Ian Renton
2025-10-13 20:46:47 +01:00
parent c051aad157
commit 318e5f7b4d
2 changed files with 44 additions and 2 deletions

View File

@@ -192,6 +192,23 @@
</div> </div>
</div> </div>
<div id="add-spot-area" class="appearing-panel card mb-3">
<div class="card-header text-white bg-success">
<div class="row">
<div class="col-auto me-auto">
Add a Spot
</div>
<div class="col-auto d-inline-flex">
<button id="close-add-spot-button" type="button" class="btn-close btn-close-white" aria-label="Close" onclick="closeAddSpotPanel();"></button>
</div>
</div>
</div>
<div class="card-body">
<p>Coming soon!</p>
</div>
</div>
<div id="table-container"></div> <div id="table-container"></div>
</div> </div>

View File

@@ -339,11 +339,15 @@ function userGridUpdated() {
// React to toggling/closing panels // React to toggling/closing panels
function toggleFiltersPanel() { function toggleFiltersPanel() {
// If we are going to display the filters panel, hide the display panel // If we are going to show the filters panel, hide the display and add spot panels
if (!$("#filters-area").is(":visible") && $("#display-area").is(":visible")) { if (!$("#filters-area").is(":visible") && $("#display-area").is(":visible")) {
$("#display-area").hide(); $("#display-area").hide();
$("#display-button").button("toggle"); $("#display-button").button("toggle");
} }
if (!$("#filters-area").is(":visible") && $("#add-spot-area").is(":visible")) {
$("#add-spot-area").hide();
$("#add-spot-button").button("toggle");
}
$("#filters-area").toggle(); $("#filters-area").toggle();
} }
function closeFiltersPanel() { function closeFiltersPanel() {
@@ -352,11 +356,15 @@ function closeFiltersPanel() {
} }
function toggleDisplayPanel() { function toggleDisplayPanel() {
// If we are going to display status, load the data for the status panel, and hide the filters panel // If we are going to show the display panel, hide the filters and add spot panels
if (!$("#display-area").is(":visible") && $("#filters-area").is(":visible")) { if (!$("#display-area").is(":visible") && $("#filters-area").is(":visible")) {
$("#filters-area").hide(); $("#filters-area").hide();
$("#filters-button").button("toggle"); $("#filters-button").button("toggle");
} }
if (!$("#display-area").is(":visible") && $("#add-spot-area").is(":visible")) {
$("#add-spot-area").hide();
$("#add-spot-button").button("toggle");
}
$("#display-area").toggle(); $("#display-area").toggle();
} }
function closeDisplayPanel() { function closeDisplayPanel() {
@@ -364,6 +372,23 @@ function closeDisplayPanel() {
$("#display-area").hide(); $("#display-area").hide();
} }
function toggleAddSpotPanel() {
// If we are going to show the add spot panel, hide the filters and display panels
if (!$("#add-spot-area").is(":visible") && $("#filters-area").is(":visible")) {
$("#filters-area").hide();
$("#filters-button").button("toggle");
}
if (!$("#add-spot-area").is(":visible") && $("#display-area").is(":visible")) {
$("#display-area").hide();
$("#display-button").button("toggle");
}
$("#add-spot-area").toggle();
}
function closeAddSpotPanel() {
$("#add-spot-button").button("toggle");
$("#add-spot-area").hide();
}
// Display the intro box, unless the user has already dismissed it once. // Display the intro box, unless the user has already dismissed it once.
function displayIntroBox() { function displayIntroBox() {
if (localStorage.getItem("intro-box-dismissed") == null) { if (localStorage.getItem("intro-box-dismissed") == null) {