Add basic UI to toggle location feature

leepeuker · Sep 1, 2024 · 562560d · 562560d
1 parent 0d5c16a
commit 562560d
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 6 deletions.
diff --git a/public/js/settings-account-location.js b/public/js/settings-account-location.js
@@ -5,8 +5,13 @@ const rows = table.getElementsByTagName('tr');
 
 reloadTable()
 
-async function reloadTable() {
+async function reloadTable(featureIsEnabled = true) {
     table.getElementsByTagName('tbody')[0].innerHTML = ''
+
+    if (featureIsEnabled === false) {
+        return
+    }
+
     document.getElementById('locationsTableLoadingSpinner').classList.remove('d-none')
 
     const response = await fetch('/settings/locations');
@@ -189,4 +194,38 @@ document.getElementById('updateLocationButton').addEventListener('click', async
 
     reloadTable()
     locationModal.hide()
-})
+})
+
+function disableLocationFeature() {
+    let featureIsDisabled = document.getElementById('toggleLocationsFeatureBtn').textContent === 'Enable locations'
+    setLocationFeatureBtnState(!featureIsDisabled)
+    setLocationTableState(featureIsDisabled)
+    reloadTable(featureIsDisabled)
+
+    setLocationsAlert('Locations ' + (featureIsDisabled === true ? 'enabled' : 'disabled'))
+}
+
+function setLocationFeatureBtnState(featureIsEnabled) {
+    if (featureIsEnabled === true) {
+        document.getElementById('toggleLocationsFeatureBtn').classList.add('btn-primary')
+        document.getElementById('toggleLocationsFeatureBtn').classList.remove('btn-outline-danger')
+        document.getElementById('toggleLocationsFeatureBtn').textContent = 'Enable locations'
+
+        return
+    }
+
+    document.getElementById('toggleLocationsFeatureBtn').classList.add('btn-outline-danger')
+    document.getElementById('toggleLocationsFeatureBtn').classList.remove('btn-primary')
+    document.getElementById('toggleLocationsFeatureBtn').textContent = 'Disable locations'
+
+}
+
+function setLocationTableState(featureIsEnabled) {
+    if (featureIsEnabled === true) {
+        document.getElementById('createLocationBtn').disabled = false
+
+        return
+    }
+
+    document.getElementById('createLocationBtn').disabled = true
+}
diff --git a/templates/page/settings-account-locations.html.twig b/templates/page/settings-account-locations.html.twig
@@ -23,7 +23,7 @@
                 <h5 class="text-center">Locations</h5>
 
                 <div style="padding-bottom: .8rem">
-                    <p>Customize your available location options.</p>
+                    <button type="button" class="btn btn-outline-danger" onclick="disableLocationFeature()" id="toggleLocationsFeatureBtn">Disable locations</button>
                 </div>
 
                 <div id="locationAlerts"></div>
@@ -32,7 +32,7 @@
                     <table class="table table-hover" id="locationsTable">
                         <thead>
                         <tr>
-                            <th scope="col">Name</th>
+                            <th scope="col">Manage your locations</th>
                         </tr>
                         </thead>
                         <tbody></tbody>
@@ -41,11 +41,12 @@
                 <div class="spinner-border d-none" role="status" id="locationsTableLoadingSpinner">
                     <span class="visually-hidden">Loading...</span>
                 </div>
+
+                <button type="button" class="btn btn-primary" style="width: 100%" onclick="showCreateLocationModal()" id="createLocationBtn">Add Location</button>
+                <br>
             </div>
         </div>
 
-        <button type="button" class="btn btn-primary float-end" style="width: 100%" onclick="showCreateLocationModal()">Create Location</button>
-
         {{ include('component/modal-location.html.twig') }}
     </main>
 {% endblock %}