From 318e5f7b4d0771d00c47575e02cff28a54ca493a Mon Sep 17 00:00:00 2001
From: Ian Renton <ian@ianrenton.com>
Date: Mon, 13 Oct 2025 20:46:47 +0100
Subject: [PATCH] Add area and toggles for the Add Spot form #29

---
 views/webpage_spots.tpl | 17 +++++++++++++++++
 webassets/js/spots.js   | 29 +++++++++++++++++++++++++++--
 2 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/views/webpage_spots.tpl b/views/webpage_spots.tpl
index d9ca3a5..2fb2dc3 100644
--- a/views/webpage_spots.tpl
+++ b/views/webpage_spots.tpl
@@ -192,6 +192,23 @@
         </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>
diff --git a/webassets/js/spots.js b/webassets/js/spots.js
index c3a5d4b..2a79b7b 100644
--- a/webassets/js/spots.js
+++ b/webassets/js/spots.js
@@ -339,11 +339,15 @@ function userGridUpdated() {
 
 // React to toggling/closing panels
 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")) {
         $("#display-area").hide();
         $("#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();
 }
 function closeFiltersPanel() {
@@ -352,11 +356,15 @@ function closeFiltersPanel() {
 }
 
 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")) {
         $("#filters-area").hide();
         $("#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();
 }
 function closeDisplayPanel() {
@@ -364,6 +372,23 @@ function closeDisplayPanel() {
     $("#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.
 function displayIntroBox() {
     if (localStorage.getItem("intro-box-dismissed") == null) {