fix hang on mobile

SoteriaSecurity · Jan 8, 2025 · 94402b1 · 94402b1
1 parent 0a19f48
commit 94402b1
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 33 deletions.
diff --git a/index.html b/index.html
@@ -8,6 +8,7 @@
     <link rel="stylesheet" href="./css/style.css">
     <script src="main.js" type="module" defer></script>
     <script src="./js/floorplan.js" defer></script>
+    <script src="./js/checker.js" defer></script>
     <script src="./js/modal.js" defer></script>
 </head>
 <body>
@@ -25,6 +26,7 @@ <h2 style="margin: 0;">
                     Floormap is recommended if you are nearby or familiar with the building. If not, it is highly encouraged to use a local map of the surrounding area.<br><br>
                     Permissions key:<br>
                     ✅ - Success<br>
+                    ⏳ - Timed out<br>
                     ❓ - Failed to retrieve<br>
                     ⛔ - Access to service denied<br>
                     ❌ - Not supported by your browser
@@ -36,11 +38,5 @@ <h2 style="margin: 0;">
 <div id="floorplan-container">
     <img id="floorplan" src="./assets/floorplan.jpg" alt="Floorplan">
 </div>
-<script type="module">
-    import { requestLocationPermission } from "./js/location.js";
-    import { checkNotificationPermission } from "./main.js";
-    requestLocationPermission();
-    checkNotificationPermission();
-</script>
 </body>
 </html>
diff --git a/js/checker.js b/js/checker.js
@@ -0,0 +1,46 @@
+export function checkAll() {
+    checkNotificationPermission();
+    checkLocationPermission();
+}
+
+function checkNotificationPermission() {
+    const notificationStatus = document.getElementById('notification');
+
+    if (Notification.permission === 'granted') {
+        notificationStatus.innerHTML = `<span class="success">Notifications ✅</span>`;
+    } else if (Notification.permission === 'denied') {
+        notificationStatus.innerHTML = `<span class="failure">Notifications ⛔</span>`;
+    } else {
+        notificationStatus.innerHTML = `<span class="failure">Notifications❓</span>`;
+    }
+}
+
+function checkLocationPermission() {
+    const locationText = document.getElementById('location');
+
+    if ('geolocation' in navigator) {
+        navigator.geolocation.getCurrentPosition(
+            () => {
+                locationText.innerHTML = `<span class="success">Location ✅</span>`;
+            }, e => {
+                if (e.code === e.PERMISSION_DENIED) {
+                    locationText.innerHTML = `<span class="failure">Location ⛔</span>`;
+                } else if (e.code === e.TIMEOUT) {
+                    locationText.innerHTML = `<span class="failure">Location ⏳</span>`;
+                } else {
+                    locationText.innerHTML = `<span class="failure">Location ❓</span>`;
+                }
+            }, {
+                timeout: 5 * 1000
+            }
+        );
+    } else {
+        locationText.innerHTML = `<span class="failure">Location ❌</span>`;
+    }
+}
+
+checkAll();
+
+document.getElementById('enabler').addEventListener('click', () => {
+    checkAll();
+});
diff --git a/js/location.js b/js/location.js
@@ -13,25 +13,23 @@ export function requestLocationPermission(callback) {
             position => {
                 latitude = position.coords.latitude;
                 longitude = position.coords.longitude;
-                updateLocationDisplay();
 
                 if (callback) callback(latitude, longitude);
             },
             error => {
                 if (error.code === error.PERMISSION_DENIED) {
                     console.warn('Location permission denied by the user.');
-                    updateLocationDisplay(true, 'Location ⛔');
                 } else {
                     console.error('Error requesting location permission:', error.message);
-                    updateLocationDisplay(true, 'Location ❓');
                 }
 
                 if (callback) callback(null, null);
+            }, {
+                timeout: 5 * 1000
             }
         );
     } else {
         console.log('Geolocation is not supported by this browser.');
-        updateLocationDisplay(true, 'Location ❌');
         if (callback) callback(null, null);
     }
 }
@@ -46,7 +44,9 @@ function updateLocationDisplay(failed = false, message = '') {
     }
 }
 
-document.getElementById('enabler').addEventListener('click', (event) => {
-    event.preventDefault();
-    requestLocationPermission();
+document.addEventListener("DOMContentLoaded", () => {
+    document.getElementById('enabler').addEventListener('click', (event) => {
+        event.preventDefault();
+        requestLocationPermission();
+    });
 });
diff --git a/main.js b/main.js
@@ -1,16 +1,6 @@
-const publickey = "BLA0fdKCDGwXsUXeNNery52icIYEaPlDXVD-qkqRCSmxzObJH_Wt1ge2ZXuCE5GZAzIGMwNo1eOhLYcTdveNHng";
-
-export function checkNotificationPermission() {
-    const notificationStatus = document.getElementById('notification');
+import { checkAll } from "./js/checker.js";
 
-    if (Notification.permission === 'granted') {
-        notificationStatus.innerHTML = `<span class="success">Notifications ✅</span>`;
-    } else if (Notification.permission === 'denied') {
-        notificationStatus.innerHTML = `<span class="failure">Notifications ⛔</span>`;
-    } else {
-        notificationStatus.innerHTML = `<span class="failure">Notifications❓</span>`;
-    }
-}
+const publickey = "BLA0fdKCDGwXsUXeNNery52icIYEaPlDXVD-qkqRCSmxzObJH_Wt1ge2ZXuCE5GZAzIGMwNo1eOhLYcTdveNHng";
 
 document.getElementById('enabler').addEventListener('click', async () => {
     if (!('serviceWorker' in navigator)) {
@@ -46,7 +36,7 @@ document.getElementById('enabler').addEventListener('click', async () => {
         console.error('Error during subscription:', error);
     }
 
-    checkNotificationPermission();
+    checkAll();
 });
 
 document.getElementById('enabler').addEventListener('click', async () => {

diff --git a/map.html b/map.html
@@ -7,6 +7,7 @@
     <link rel="manifest" href="manifest.json">
     <link rel="stylesheet" href="./css/style.css">
     <script src="main.js" type="module" defer></script>
+    <script src="./js/checker.js" defer></script>
     <script src="./js/modal.js" defer></script>
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
     <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
@@ -15,7 +16,7 @@
 <script>0</script>
 <header>
     <h1>Soteria</h1>
-    <a href="#" id="enabler"><span id="refresher">↻ </span><span id="location">Location... </span><span id="notification">Notification... </span></a>
+    <a href="#" id="enabler"><span id="refresher">↻</span> | <span id="location">Location...</span> | <span id="notification">Notification...</span></a>
     <h2 style="margin: 0;">
         <div class="map-link">
             <a href="./index.html">Return to floormap...</a>
@@ -26,6 +27,7 @@ <h2 style="margin: 0;">
                     Local map is recommended if you are unfamiliar with the building or are just in the surrounding area. If you are able to, it is highly encouraged to use the floormap.<br><br>
                     Permissions key:<br>
                     ✅ - Success<br>
+                    ⏳ - Timed out<br>
                     ❓ - Failed to retrieve<br>
                     ⛔ - Access to service denied<br>
                     ❌ - Not supported by your browser
@@ -37,9 +39,6 @@ <h2 style="margin: 0;">
 <div id="map"></div>
 <a style="height: 4.5vh"></a>
 <script type="module">
-    import {checkNotificationPermission} from "./main.js";
-    checkNotificationPermission();
-
     import { requestLocationPermission } from "./js/location.js";
     // TODO: change to real
     const threat_x = 39.15294936019142;
@@ -66,15 +65,14 @@ <h2 style="margin: 0;">
             map = L.map('map').setView([threat_x, threat_y], 14);
         } else {
             // TODO: change when done with demo code
-            user_x = 39.149978876760755;
-            user_y = -77.2059241960242;
+            // user_x = 39.149978876760755;
+            // user_y = -77.2059241960242;
             const midpoint_x = (user_x + threat_x) / 2;
             const midpoint_y = (user_y + threat_y) / 2;
             const d = Math.sqrt(Math.pow(user_x - threat_x, 2) + Math.pow(user_y - threat_y, 2));
             const zoom = 73769.37975 / d * Math.exp(-4667.97275 * d)
                 + 11.83199 * Math.exp(-0.08104 * d); // https://julius.ai/s/84c7b6a6-35e9-4d5b-9661-41660ff7f2a1
             map = L.map('map').setView([midpoint_x, midpoint_y], zoom);
-            console.log(d, zoom);
 
             const userMarker = L.marker([user_x, user_y], {icon: bluePin}).addTo(map);
             userMarker.bindPopup('<b>Current Location</b>');