Add location using <dialog> modal

natia-cohen · Apr 17, 2024 · 5e9608d · 5e9608d
1 parent 319149e
commit 5e9608d
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 20 deletions.
diff --git a/index.html b/index.html
@@ -73,6 +73,19 @@ <h4>By last update:</h4>
                 </section>
             </section>
         </div>
+
+        <dialog class="add-loc">
+            <form method="dialog" class="add-loc-form">
+                <label for="locName">Location Name:</label>
+                <input type="text" id="locName" name="locName" required>
+
+                <label for="locRate">Rate (1-5):</label>
+                <input type="number" id="locRate" name="locRate" min="1" max="5" value="3" required>
+
+                <button type="submit">Save</button>
+            </form>
+        </dialog>
+
     </main>
     <pre class="debug" hidden></pre>
     <div class="user-msg"></div>

diff --git a/js/app.controller.js b/js/app.controller.js
@@ -98,27 +98,41 @@ function onSearchAddress(ev) {
         })
 }
 
+
 function onAddLoc(geo) {
-    const locName = prompt('Loc name', geo.address || 'Just a place')
-    if (!locName) return
+    console.log('geo', geo)
+    openAddLocDialog()
 
-    const loc = {
-        name: locName,
-        rate: +prompt(`Rate (1-5)`, '3'),
-        geo
-    }
-    locService.save(loc)
-        .then((savedLoc) => {
-            flashMsg(`Added Location (id: ${savedLoc.id})`)
-            utilService.updateQueryParams({ locId: savedLoc.id })
-            loadAndRenderLocs()
-        })
-        .catch(err => {
-            console.error('OOPs:', err)
-            flashMsg('Cannot add location')
-        })
+    const elForm = document.querySelector('.add-loc-form')
+
+    elForm.addEventListener('submit', (ev) => {
+        ev.preventDefault()
+
+        const elLocName = document.querySelector('input[name="locName"]').value
+        const elLocRate = parseInt(document.querySelector('input[name="locRate"]').value)
+
+        const loc = {
+            name: elLocName,
+            rate: elLocRate,
+            geo
+        }
+
+        locService.save(loc)
+            .then((savedLoc) => {
+                flashMsg(`Added Location (id: ${savedLoc.id})`);
+                utilService.updateQueryParams({ locId: savedLoc.id });
+                loadAndRenderLocs()
+                closeAddLocDialog()
+            })
+            .catch(err => {
+                console.error('OOPs:', err)
+                flashMsg('Cannot add location')
+                closeAddLocDialog()
+            })
+    })
 }
 
+
 function loadAndRenderLocs() {
     locService.query()
         .then(renderLocs)
@@ -175,13 +189,13 @@ function onSelectLoc(locId) {
 
 function displayLoc(loc) {
     const distance = utilService.getDistance(loc.geo, window.gUserPos, 'K')
-    
+
     document.querySelector('.loc.active')?.classList?.remove('active')
     document.querySelector(`.loc[data-id="${loc.id}"]`).classList.add('active')
 
     mapService.panTo(loc.geo)
     mapService.setMarker(loc)
-   
+
     const el = document.querySelector('.selected-loc')
     el.querySelector('.loc-name').innerText = loc.name
     el.querySelector('.loc-address').innerText = loc.geo.address
@@ -315,3 +329,15 @@ function cleanStats(stats) {
     }, [])
     return cleanedStats
 }
+
+function openAddLocDialog() {
+    const elLoc = document.querySelector('.add-loc')
+    elLoc.showModal()
+}
+
+function closeAddLocDialog() {
+    const elLoc = document.querySelector('.add-loc')
+    elLoc.close()
+}
+
+
diff --git a/js/services/map.service.js b/js/services/map.service.js
@@ -9,7 +9,7 @@ export const mapService = {
 }
 
 // TODO: Enter your API Key
-const API_KEY = ''
+const API_KEY = 'AIzaSyDEHAoxkOSFWaBa5RmpJJIl1iZBRP90jZg'
 var gMap
 var gMarker