Add feature Show distance to locations when user-position is known

natia-cohen · Apr 17, 2024 · cd40a97 · cd40a97
1 parent 10919f6
commit cd40a97
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 42 deletions.
diff --git a/js/app.controller.js b/js/app.controller.js
@@ -3,6 +3,7 @@ import { locService } from './services/loc.service.js'
 import { mapService } from './services/map.service.js'
 
 window.onload = onInit
+window.gUserPos = { lat: 32.8027, lng: 34.9848 }
 
 // To make things easier in this project structure 
 // functions that are called from DOM are defined on a global app object
@@ -35,13 +36,14 @@ function onInit() {
 function renderLocs(locs) {
     console.log('locs', locs)
     const selectedLocId = getLocIdFromQueryParams()
-    // console.log('locs:', locs)
+
     var strHTML = locs.map(loc => {
         const className = (loc.id === selectedLocId) ? 'active' : ''
         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 title="${loc.rate} stars">${'★'.repeat(loc.rate)}</span>
             </h4>
             <p class="muted">
@@ -132,7 +134,9 @@ function onPanToUserPos() {
             unDisplayLoc()
             loadAndRenderLocs()
             flashMsg(`You are at Latitude: ${latLng.lat} Longitude: ${latLng.lng}`)
+            window.gUserPos = latLng
         })
+        .then(renderLocs)
         .catch(err => {
             console.error('OOPs:', err)
             flashMsg('Cannot get your position')

diff --git a/js/services/loc.service.js b/js/services/loc.service.js
@@ -30,7 +30,7 @@ export const locService = {
     save,
     setFilterBy,
     setSortBy,
-    getLocCountByRateMap
+    getLocCountByRateMap,
 }
 
 function query() {
@@ -117,52 +117,51 @@ function _createLocs() {
 }
 
 function _createDemoLocs() {
-    var locs =
-        [
-            {
-                name: "Ben Gurion Airport",
-                rate: 2,
-                geo: {
-                    address: "Ben Gurion Airport, 7015001, Israel",
-                    lat: 32.0004465,
-                    lng: 34.8706095,
-                    zoom: 12
-                },
-            },
-            {
-                name: "Dekel Beach",
-                rate: 4,
-                geo: {
-                    address: "Derekh Mitsrayim 1, Eilat, 88000, Israel",
-                    lat: 29.5393848,
-                    lng: 34.9457792,
-                    zoom: 15
-                },
-            },
-            {
-                name: "Dahab, Egypt",
-                rate: 5,
-                geo: {
-                    address: "Dahab, South Sinai, Egypt",
-                    lat: 28.5096676,
-                    lng: 34.5165187,
-                    zoom: 11
-                }
-            }
-        ]
+    var locs = [
+        _createLoc('Ben Gurion Airport', 2, { 
+            lat: 32.0004465,
+            lng: 34.8706095,
+            zoom: 12,
+            address: "Ben Gurion Airport, 7015001, Israel"
+        }),
+        _createLoc('Dekel Beach', 4, {
+            lat: 29.5393848,
+            lng: 34.9457792,
+            zoom: 15,
+            address: "Derekh Mitsrayim 1, Eilat, 88000, Israel"
+        }),
+        _createLoc('Dahab, Egypt', 5, {
+            lat: 28.5096676,
+            lng: 34.5165187,
+            zoom: 11,
+            address: "Dahab, South Sinai, Egypt"
+        })
+    ];
 
-    locs = locs.map(_createLoc)
-    utilService.saveToStorage(DB_KEY, locs)
+    console.log('locs1', locs);
+    utilService.saveToStorage(DB_KEY, locs);
 }
 
-function _createLoc(loc) {
-    loc.id = utilService.makeId()
-    loc.createdAt = loc.updatedAt = utilService.randomPastTime()
-    return loc
+
+function _createLoc(name = '', rate = 3, geoData, updatedAt = Date.now()) {
+
+    return {
+        id: utilService.makeId(),
+        name,
+        rate,
+        updatedAt,
+        distance: 0,
+        createdAt: updatedAt = utilService.randomPastTime(),
+        geo: {
+            lat: geoData.lat || 0,
+            lng: geoData.lng || 0,
+            zoom: geoData.zoom || 0,
+            address: geoData.address || ''
+        }
+    }
 }
 
 
-// unused functions
 // function getEmptyLoc(name = '') {
 //     return {
 //         id: '',
@@ -179,3 +178,50 @@ function _createLoc(loc) {
 //     }
 // }
 
+// function _createDemoLocs() {
+//     var locs =
+//         [
+//             {
+//                 name: "Ben Gurion Airport",
+//                 rate: 2,
+//                 geo: {
+//                     address: "Ben Gurion Airport, 7015001, Israel",
+//                     lat: 32.0004465,
+//                     lng: 34.8706095,
+//                     zoom: 12
+//                 },
+//             },
+//             {
+//                 name: "Dekel Beach",
+//                 rate: 4,
+//                 geo: {
+//                     address: "Derekh Mitsrayim 1, Eilat, 88000, Israel",
+//                     lat: 29.5393848,
+//                     lng: 34.9457792,
+//                     zoom: 15
+//                 },
+//             },
+//             {
+//                 name: "Dahab, Egypt",
+//                 rate: 5,
+//                 geo: {
+//                     address: "Dahab, South Sinai, Egypt",
+//                     lat: 28.5096676,
+//                     lng: 34.5165187,
+//                     zoom: 11
+//                 }
+//             }
+//         ]
+
+//     locs = locs.map(_createLoc)
+//         console.log('locs1', locs)
+//     utilService.saveToStorage(DB_KEY, locs)
+// }
+
+// function _createLoc(loc) {
+
+//     loc.id = utilService.makeId()
+//     loc.createdAt = loc.updatedAt = utilService.randomPastTime()
+//     loc.distance = utilService.getDistance(loc. window.app.gUserPos )
+//     return loc
+// }
diff --git a/js/services/util.service.js b/js/services/util.service.js
@@ -95,6 +95,9 @@ 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
     }