🚸 Improve gps locate ui (#1110)

Co-authored-by: Levin Herr <github@17d.me>

package.json

@@ -28,6 +28,7 @@
         "chart.js": "^2.9.4",
         "croppie": "^2.6.5",
         "leaflet": "^1.9.2",
-        "mdb-ui-kit": "^5.0.0"
+        "mdb-ui-kit": "^5.0.0",
+        "notyf": "^3.10.0"
     }
 }

public/mix-manifest.json

@@ -2,7 +2,7 @@
     "/js/app.js": "/js/app.js",
     "/js/stats.js": "/js/stats.js",
     "/js/admin.js": "/js/admin.js",
-    "/css/app.css": "/css/app.css",
     "/css/welcome.css": "/css/welcome.css",
-    "/css/admin.css": "/css/admin.css"
+    "/css/admin.css": "/css/admin.css",
+    "/css/app.css": "/css/app.css"
 }

resources/js/app.js

@@ -1,11 +1,19 @@
 /**
  * Here, we include all of our external dependencies
  */
+import {Notyf} from 'notyf';
 
 require("./bootstrap");
 require("awesomplete/awesomplete");
 require("leaflet/dist/leaflet.js");
 
+document.addEventListener("DOMContentLoaded", function () {
+    window.notyf = new Notyf({
+        duration: 5000,
+        position: {x: "right", y: "top"}
+    });
+});
+
 /**
  * Once the page is loaded, we can load our frontend components.
  */
@@ -16,6 +24,7 @@ window.addEventListener("load", () => {
     require("./components/settings");
     require("./components/station-autocomplete");
     require("./components/stationboard");
+    require("./components/stationboard-gps");
     require("./components/statusMap");
     require("./components/timepicker");
     require("./components/business-check-in");

resources/js/components/stationboard-gps.js

@@ -0,0 +1,23 @@
+if (document.getElementById("gps-button")) {
+    document.getElementById("gps-button").addEventListener("click", () => {
+        document.querySelector('#gps-button .fa').classList.add('d-none');
+        document.querySelector('#gps-button .spinner-border').classList.remove('d-none');
+
+        if (navigator.geolocation) {
+            navigator.geolocation.getCurrentPosition(searchStationByPosition, handlePositioningError);
+        } else {
+            handlePositioningError();
+        }
+    });
+
+    function searchStationByPosition(position) {
+        window.location.href = `${window.location.protocol}//${window.location.host}/trains/nearby?latitude=${position.coords.latitude}&longitude=${position.coords.longitude}`;
+    }
+
+    function handlePositioningError(error) {
+        document.querySelector('#gps-button .fa').classList.remove('d-none');
+        document.querySelector('#gps-button .spinner-border').classList.add('d-none');
+        notyf.error(translations.stationboard.position_unavailable);
+    }
+}
+

resources/js/components/stationboard.js

@@ -98,26 +98,3 @@ if (document.getElementById("history-button")) {
         );
     });
 }
-
-if (document.getElementById("gps-button")) {
-    document.getElementById("gps-button").addEventListener("click", () => {
-        if (navigator.geolocation) {
-            navigator.geolocation.getCurrentPosition(searchStationByPosition, handlePositioningError);
-        } else {
-            ["d-none", "animated", "fadeIn"].forEach(classname =>
-                document.getElementById("gps-disabled-error").classList.toggle(classname)
-            );
-        }
-    });
-}
-
-function searchStationByPosition(position) {
-    let newLocation      = `${window.location.protocol}//${window.location.host}/trains/nearby?latitude=${position.coords.latitude}&longitude=${position.coords.longitude}`;
-    window.location.href = newLocation;
-}
-
-function handlePositioningError(error) {
-    ["d-none", "animated", "fadeIn"].forEach(classname =>
-        document.getElementById("gps-disabled-error").classList.toggle(classname)
-    );
-}

resources/lang/de.json

@@ -419,7 +419,7 @@
     "stationboard.last-stations": "Letzte Stationen",
     "stationboard.next-stop": "Nächster Halt:",
     "stationboard.search-by-location": "Standortbasierte Suche",
-    "stationboard.position-unavailable": "Positionsbestimmung nicht möglich!",
+    "stationboard.position-unavailable": "Wir können deine Position nicht ermitteln. Bitte prüfe, ob du den Standortzugriff erlaubt hast.",
     "stationboard.business.private": "Privat",
     "stationboard.business.business": "Geschäftlich",
     "stationboard.business.business.detail": "Dienstfahrten",

resources/lang/en.json

@@ -395,7 +395,7 @@
     "stationboard.last-stations": "Last stations",
     "stationboard.next-stop": "Next stop:",
     "stationboard.search-by-location": "Search by location",
-    "stationboard.position-unavailable": "Locating not possible!",
+    "stationboard.position-unavailable": "We cannot determine your location. Please check if you have allowed location access.",
     "stationboard.business.private": "Personal",
     "stationboard.business.business": "Business",
     "stationboard.business.business.detail": "Business trip",

resources/sass/app.scss

@@ -19,6 +19,8 @@ body {
   box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1);
 }
 
+@import '~notyf/notyf.min.css';
+
 // Overall site layout
 @import "site";
 @import "small-phones";

resources/views/includes/station-autocomplete.blade.php

@@ -1,12 +1,6 @@
 <div class="card mb-4">
     <div class="card-header">{{__('stationboard.where-are-you')}}</div>
     <div class="card-body">
-        <div id="gps-disabled-error" class="alert my-3 alert-danger d-none" role="alert">
-            {{__('stationboard.position-unavailable')}}
-            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
-                <span aria-hidden="true">&times;</span>
-            </button>
-        </div>
         <form action="{{ route('trains.stationboard') }}" method="get" id="autocomplete-form">
             @isset(request()->when)
                 <input type="hidden" name="when" value="{{request()->when}}"/>
@@ -35,6 +29,9 @@
                     <div class="btn btn-outline-grey stationSearchButton" id="gps-button"
                          title="{{__('stationboard.search-by-location')}}">
                         <i class="fa fa-map-marker-alt"></i>
+                        <div class="spinner-border d-none" role="status" style="height: 1rem; width: 1rem;">
+                            <span class="visually-hidden">Loading...</span>
+                        </div>
                     </div>
                 </div>
             </div>

resources/views/layouts/app.blade.php

@@ -231,6 +231,12 @@ class="text-muted">
             var urlTrainTrip     = '{{ route('trains.trip') }}';
             var urlUnfollow      = '{{ route('follow.destroy') }}';
             var urlAutocomplete  = '{{ url('transport/train/autocomplete') }}';
+
+            let translations = {
+                stationboard: {
+                    position_unavailable: '{{__('stationboard.position-unavailable')}}',
+                }
+            };
         </script>
     </body>