Improve locations UI elements and behavior

leepeuker · Sep 4, 2024 · d25eee6 · d25eee6
1 parent 56b1820
commit d25eee6
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 19 deletions.
diff --git a/public/css/bootstrap-icons-1.10.2.css b/public/css/bootstrap-icons-1.10.2.css
@@ -30,6 +30,7 @@ url("../fonts/bootstrap-icons.woff?24e3eb84d0bcaf83d77f904c78ac1f47") format("wo
 .bi-chevron-up::before { content: "\f286"; }
 .bi-eye::before { content: "\f341"; }
 .bi-eye-slash::before { content: "\f340"; }
+.bi-gear::before { content: "\f3e5"; }
 .bi-moon-fill::before { content: "\f494"; }
 .bi-pencil-square::before { content: "\f4ca"; }
 .bi-search::before { content: "\f52a"; }

diff --git a/public/js/settings-account-location.js b/public/js/settings-account-location.js
@@ -3,7 +3,31 @@ const locationModal = new bootstrap.Modal('#locationModal', {keyboard: false})
 const table = document.getElementById('locationsTable');
 const rows = table.getElementsByTagName('tr');
 
-reloadTable()
+document.addEventListener('DOMContentLoaded', function () {
+    reloadTable()
+
+    const urlParams = new URLSearchParams(window.location.search);
+    if (urlParams.get('toggle')) {
+        let enableLocationsFeature = document.getElementById('toggleLocationsFeatureBtn').textContent === 'Disable locations'
+        setLocationsAlert('Locations ' + (enableLocationsFeature === true ? 'enabled' : 'disabled'))
+        window.history.replaceState(null, '', window.location.pathname);
+    }
+    let categoryCreatedName = urlParams.get('categoryCreated');
+    if (categoryCreatedName) {
+        setLocationsAlert('Location was created: ' + categoryCreatedName)
+        window.history.replaceState(null, '', window.location.pathname);
+    }
+    let categoryDeletedName = urlParams.get('categoryDeleted');
+    if (categoryDeletedName) {
+        setLocationsAlert('Location was deleted: ' + categoryDeletedName)
+        window.history.replaceState(null, '', window.location.pathname);
+    }
+    let categoryUpdatedName = urlParams.get('categoryUpdated');
+    if (categoryUpdatedName) {
+        setLocationsAlert('Location was updated: ' + categoryUpdatedName)
+        window.history.replaceState(null, '', window.location.pathname);
+    }
+});
 
 async function reloadTable(featureIsEnabled = true) {
     table.getElementsByTagName('tbody')[0].innerHTML = ''
@@ -104,13 +128,14 @@ document.getElementById('createLocationButton').addEventListener('click', async
         return;
     }
 
+    let categoryName = document.getElementById('locationModalNameInput').value;
     const response = await fetch('/settings/locations', {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json'
         },
         body: JSON.stringify({
-            'name': document.getElementById('locationModalNameInput').value,
+            'name': categoryName,
         })
     })
 
@@ -119,10 +144,13 @@ document.getElementById('createLocationButton').addEventListener('click', async
         return
     }
 
-    setLocationsAlert('Location was created: ' + document.getElementById('locationModalNameInput').value)
-
-    reloadTable()
-    locationModal.hide()
+    let url = window.location.href;
+    if (url.indexOf('?') > -1){
+        url += '&categoryCreated=' + categoryName
+    } else {
+        url += '?categoryCreated=' + categoryName
+    }
+    window.location.href = url;
 })
 
 function setLocationModalAlertServerError(message = "Server error, please try again.") {
@@ -163,24 +191,29 @@ document.getElementById('deleteLocationButton').addEventListener('click', async
         return
     }
 
-    setLocationsAlert('Location was deleted: ' + document.getElementById('locationModalNameInput').value)
-
-    reloadTable()
-    locationModal.hide()
+    let categoryName = document.getElementById('locationModalNameInput').value;
+    let url = window.location.href;
+    if (url.indexOf('?') > -1){
+        url += '&categoryDeleted=' + categoryName
+    } else {
+        url += '?categoryDeleted=' + categoryName
+    }
+    window.location.href = url;
 })
 
 document.getElementById('updateLocationButton').addEventListener('click', async () => {
     if (validateCreateLocationInput() === true) {
         return;
     }
 
+    let categoryName = document.getElementById('locationModalNameInput').value;
     const response = await fetch('/settings/locations/' + document.getElementById('locationModalIdInput').value, {
         method: 'PUT',
         headers: {
             'Content-Type': 'application/json'
         },
         body: JSON.stringify({
-            'name': document.getElementById('locationModalNameInput').value
+            'name': categoryName
         })
     })
 
@@ -190,20 +223,26 @@ document.getElementById('updateLocationButton').addEventListener('click', async
         return
     }
 
-    setLocationsAlert('Location was updated: ' + document.getElementById('locationModalNameInput').value)
-
-    reloadTable()
-    locationModal.hide()
+    let url = window.location.href;
+    if (url.indexOf('?') > -1){
+        url += '&categoryUpdated=' + categoryName
+    } else {
+        url += '?categoryUpdated=' + categoryName
+    }
+    window.location.href = url;
 })
 
 async function toggleLocationFeature() {
     let enableLocationsFeature = document.getElementById('toggleLocationsFeatureBtn').textContent === 'Enable locations'
     await sendRequestToggleLocationsFeature(enableLocationsFeature)
-    setLocationFeatureBtnState(!enableLocationsFeature)
-    setLocationTableState(enableLocationsFeature)
-    reloadTable(enableLocationsFeature)
 
-    setLocationsAlert('Locations ' + (enableLocationsFeature === true ? 'enabled' : 'disabled'))
+    let url = window.location.href;
+    if (url.indexOf('?') > -1){
+        url += '&toggle=1'
+    } else {
+        url += '?toggle=1'
+    }
+    window.location.href = url;
 }
 
 function setLocationFeatureBtnState(featureIsEnabled) {

diff --git a/templates/component/modal-edit-watch-date.html.twig b/templates/component/modal-edit-watch-date.html.twig
@@ -28,6 +28,7 @@
                 <div class="input-group {% if currentUserLocationsEnabled == false %}d-none{% endif %}" style="margin-top: 1rem;margin-bottom: 1rem">
                     <i class="input-group-text"><i class="bi bi-pin-map-fill"></i></i>
                     <select class="form-select"  id="editWatchDateModalLocationInput" aria-describedby="location"></select>
+                    <a class="btn btn-outline-secondary rounded-end" href="/settings/account/locations"><i class="bi bi-gear"></i></a>
                 </div>
                 <div id="advancedWatchDateDetails" class="d-none">
                     <div class="input-group" style="margin-top: 1rem">

diff --git a/templates/component/modal-log-play.html.twig b/templates/component/modal-log-play.html.twig
@@ -84,6 +84,7 @@
                             <i class="input-group-text"><i class="bi bi-pin-map-fill"></i></i>
                             <select class="form-select" style="" id="logPlayModalLocationInput" aria-describedby="location" required>
                             </select>
+                            <a class="btn btn-outline-secondary rounded-end" href="/settings/account/locations"><i class="bi bi-gear"></i></a>
                         </div>
                     </div>