Implemented feature to display distance in selected location

natia-cohen · Apr 17, 2024 · ac36c41 · ac36c41
1 parent 22f3849
commit ac36c41
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -14,6 +14,7 @@ <h1>TravelTip</h1>
         <section class="selected-loc">
             <h2>Location: <span class="loc-name"></span> <span class="loc-rate"></span></h2>
             <h4 class="loc-address"></h4>
+            <span class="loc-distance"></span>
             <button onclick="app.onCopyLoc()">Copy location</button>
             <button onclick="app.onShareLoc()">Share location</button>
             <input name="loc-copier" />

diff --git a/js/app.controller.js b/js/app.controller.js
@@ -39,11 +39,12 @@ function renderLocs(locs) {
 
     var strHTML = locs.map(loc => {
         const className = (loc.id === selectedLocId) ? 'active' : ''
+        loc.distance = utilService.getDistance(loc.geo, window.gUserPos, 'K')
         return `
         <li class="loc ${className}" data-id="${loc.id}">
             <h4>  
                 <span>${loc.name}</span>
-                <span> Distance: ${utilService.getDistance(loc.geo, window.gUserPos, 'K')} KM.</span>
+                <span> Distance: ${loc.distance} KM.</span>
                 <span title="${loc.rate} stars">${'★'.repeat(loc.rate)}</span>
             </h4>
             <p class="muted">
@@ -173,17 +174,20 @@ 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
     el.querySelector('.loc-rate').innerHTML = '★'.repeat(loc.rate)
     el.querySelector('[name=loc-copier]').value = window.location
+    el.querySelector('.loc-distance').innerText = `Distance ${distance} KM.`
     el.classList.add('show')
 
     utilService.updateQueryParams({ locId: loc.id })

diff --git a/js/services/util.service.js b/js/services/util.service.js
@@ -95,9 +95,7 @@ function getColors() {
 }
 
 function getDistance(latLng1, latLng2, unit) {
-    console.log('latLng1', latLng1)
-    console.log('latLng2', latLng2)
-    console.log('unit', unit)
+
     if ((latLng1.lat == latLng2.lat) && (latLng1.lng == latLng2.lng)) {
         return 0
     }