Reworked watcher events and describing texts

public/js/app.js

@@ -6,7 +6,7 @@
     route: null,
     position: null,
     triggered: new Set(),
-    tracking: false,
+    routeState: 'idle',
     activePage: null,
     routeProgressIndex: null,
     deviceHeading: null
@@ -151,27 +151,55 @@
     $('#app-shell').addClass('has-navigation');
   }
 
-  function updateTrackingButton() {
-    const button = $('#start-tracking');
-    button.button('option', {
-      label: state.tracking ? 'GPS-Begleitung stoppen' : 'GPS-Begleitung starten',
-      icon: state.tracking ? 'ui-icon-stop' : 'ui-icon-pin-s'
-    });
-  }
-
-  function stopTracking() {
-    state.tracking = false;
-    state.routeProgressIndex = null;
-    state.deviceHeading = null;
+  function stopRouteSensors() {
     ns.Geo.stop();
     ns.Orientation.stop();
-    $('#tracking-status').prop('hidden', true).text('');
+    state.deviceHeading = null;
+  }
+
+  function updateRouteControls() {
+    const running = state.routeState === 'running';
+    const paused = state.routeState === 'paused';
+    const startLabel = paused ? 'Route fortsetzen' : 'Route starten';
+
+    $('#start-route')
+      .prop('disabled', running)
+      .attr({ 'aria-label': startLabel, title: startLabel });
+    $('#pause-route').prop('disabled', !running);
+    $('#stop-route').prop('disabled', state.routeState === 'idle');
+  }
+
+  function endRoute({ announce = true } = {}) {
+    const wasActive = state.routeState !== 'idle';
+    state.routeState = 'idle';
+    state.routeProgressIndex = null;
+    state.triggered.clear();
+    stopRouteSensors();
     hideNavigation();
-    updateTrackingButton();
+
+    if (announce && wasActive) {
+      $('#tracking-status').prop('hidden', false).text('Route beendet.');
+    } else {
+      $('#tracking-status').prop('hidden', true).text('');
+    }
+
+    updateRouteControls();
+  }
+
+  function pauseRoute() {
+    if (state.routeState !== 'running') return;
+
+    state.routeState = 'paused';
+    stopRouteSensors();
+    $('#tracking-status')
+      .prop('hidden', false)
+      .text('Route pausiert. Die Standortverfolgung ist angehalten.');
+    showNavigation('Route pausiert', $('#navigation-distance').text() || '–');
+    updateRouteControls();
   }
 
   function renderRoute(route) {
-    if (state.tracking) stopTracking();
+    if (state.routeState !== 'idle') endRoute({ announce: false });
 
     state.route = route;
     state.triggered.clear();
@@ -181,6 +209,8 @@
     $('#route-distance').text(ns.Distance.format(route.distanceM));
     $('#route-elevation').text(`${Math.round(route.elevationGainM)} m`);
     $('#route-poi-count').text(route.pois.length);
+    $('#tracking-status').prop('hidden', true).text('');
+    updateRouteControls();
 
     const list = $('#poi-list').empty();
     if (!route.pois.length) {
@@ -235,7 +265,7 @@
 
   function updateNavigation(position) {
     const points = state.route?.points || [];
-    if (!state.tracking || !points.length) return;
+    if (state.routeState !== 'running' || !points.length) return;
 
     const nearestIndex = nearestRoutePointIndex(position);
     if (nearestIndex == null) return;
@@ -298,7 +328,7 @@
 
   function evaluatePosition(position) {
     state.position = position;
-    if (!state.route || !state.tracking) return;
+    if (!state.route || state.routeState !== 'running') return;
 
     updateNavigation(position);
 
@@ -321,13 +351,22 @@
     }
   }
 
-  async function startTracking() {
-    state.tracking = true;
-    state.routeProgressIndex = null;
+  async function startRoute() {
+    if (!state.route || state.routeState === 'running') return;
+
+    const resumed = state.routeState === 'paused';
+    if (!resumed) {
+      state.routeProgressIndex = null;
+      state.triggered.clear();
+    }
+
+    state.routeState = 'running';
     state.deviceHeading = null;
-    updateTrackingButton();
-    $('#tracking-status').prop('hidden', false).text('GPS wird gestartet.');
-    showNavigation();
+    updateRouteControls();
+    $('#tracking-status')
+      .prop('hidden', false)
+      .text(resumed ? 'Route wird fortgesetzt.' : 'Route wird gestartet. GPS wird aktiviert.');
+    showNavigation(resumed ? 'Route wird fortgesetzt' : 'Position wird ermittelt');
 
     ns.Geo.start(
       evaluatePosition,
@@ -335,7 +374,12 @@
     );
 
     const orientationAvailable = await ns.Orientation.start(updateHeading);
-    if (!orientationAvailable && state.tracking) {
+    if (state.routeState !== 'running') {
+      ns.Orientation.stop();
+      return;
+    }
+
+    if (!orientationAvailable) {
       $('#navigation-mode').text('Norden oben · nächster Routenpunkt');
     }
   }
@@ -372,9 +416,16 @@
       else navigate(target, { replace: true });
     });
 
-    activate('#start-tracking', async function () {
-      if (state.tracking) stopTracking();
-      else await startTracking();
+    activate('#start-route', async function () {
+      await startRoute();
+    });
+
+    activate('#pause-route', function () {
+      pauseRoute();
+    });
+
+    activate('#stop-route', function () {
+      endRoute();
     });
 
     window.addEventListener('popstate', event => {
@@ -415,7 +466,7 @@
       context.markStep('location', 'done');
       initializeRouteSearch();
       renderRoutes();
-      updateTrackingButton();
+      updateRouteControls();
       hideNavigation();
     }
   };

public/js/bootstrap-loader.js

@@ -44,7 +44,6 @@
     const $ = window.jQuery;
     $('#bootstrap-retry').button({ icon: 'ui-icon-refresh' });
     $('.back-button').button({ icon: 'ui-icon-caret-1-w' });
-    $('#start-tracking').button({ icon: 'ui-icon-pin-s' });
     $('#clear-route-search').button({ icon: 'ui-icon-close', showLabel: false });
     $('#slide-prev').button({ icon: 'ui-icon-caret-1-w', showLabel: false });
     $('#slide-next').button({ icon: 'ui-icon-caret-1-e', showLabel: false });