Reworked pause and stop buttons and documentation

public/js/app.js

@@ -9,6 +9,7 @@
     routeState: 'idle',
     activePage: null,
     routeProgressIndex: null,
+    activePoiId: null,
     deviceHeading: null
   };
 
@@ -169,21 +170,36 @@
     $('#stop-route').prop('disabled', state.routeState === 'idle');
   }
 
-  function endRoute({ announce = true } = {}) {
+  function setActivePoi(poiId) {
+    state.activePoiId = poiId == null ? null : Number(poiId);
+    $('#poi-list [data-poi-id]').removeAttr('aria-current');
+    if (state.activePoiId != null) {
+      $(`#poi-list [data-poi-id="${state.activePoiId}"]`).attr('aria-current', 'step');
+    }
+  }
+
+  function endRoute({ announce = true, returnToRoutes = false } = {}) {
     const wasActive = state.routeState !== 'idle';
     state.routeState = 'idle';
     state.routeProgressIndex = null;
     state.triggered.clear();
     stopRouteSensors();
+    ns.AudioPlayer.unload();
+    setActivePoi(null);
     hideNavigation();
 
-    if (announce && wasActive) {
+    if (announce && wasActive && !returnToRoutes) {
       $('#tracking-status').prop('hidden', false).text('Route beendet.');
     } else {
       $('#tracking-status').prop('hidden', true).text('');
     }
 
     updateRouteControls();
+
+    if (returnToRoutes) {
+      state.route = null;
+      navigate('#routes-page', { replace: true });
+    }
   }
 
   function pauseRoute() {
@@ -191,6 +207,7 @@
 
     state.routeState = 'paused';
     stopRouteSensors();
+    ns.AudioPlayer.pause();
     $('#tracking-status')
       .prop('hidden', false)
       .text('Route pausiert. Die Standortverfolgung ist angehalten.');
@@ -204,6 +221,7 @@
     state.route = route;
     state.triggered.clear();
     state.routeProgressIndex = null;
+    setActivePoi(null);
     $('#route-title').text(route.name);
     $('#route-description').text(route.description || '');
     $('#route-distance').text(ns.Distance.format(route.distanceM));
@@ -231,6 +249,7 @@
   }
 
   function showPoi(poi, automatic) {
+    setActivePoi(poi.id);
     $('#poi-title').text(poi.title);
     $('#poi-description').text(poi.description || '');
     ns.Slideshow.show(poi.images);
@@ -425,7 +444,7 @@
     });
 
     activate('#stop-route', function () {
-      endRoute();
+      endRoute({ returnToRoutes: true });
     });
 
     window.addEventListener('popstate', event => {