Downgrade css to prevent older browsers displaying faulty views

public/js/app.js

@@ -66,12 +66,13 @@
 
   function renderRouteItems(listSelector, routes, emptyText) {
     const list = $(listSelector).empty();
-    if (!routes.length) {
+    const items = Array.isArray(routes) ? routes.filter(Boolean) : [];
+    if (!items.length) {
       list.append(`<li><p>${escapeHtml(emptyText)}</p></li>`);
       return;
     }
 
-    routes.forEach(route => {
+    items.forEach(route => {
       const proximity = route.proximityM == null
         ? ''
         : `<small>${escapeHtml(ns.Distance.format(route.proximityM))} entfernt</small>`;
@@ -89,18 +90,20 @@
   }
 
   function renderRoutes() {
+    const routes = Array.isArray(state.routes) ? state.routes.filter(Boolean) : [];
     const radiusM = ns.Config.routeRadiusKm * 1000;
     const nearbyRoutes = state.position
-      ? state.routes
+      ? routes
         .filter(route => route.proximityM != null && route.proximityM <= radiusM)
+        .slice()
         .sort((a, b) => a.proximityM - b.proximityM)
       : [];
 
     const searchTerm = normalizeSearch($('#route-search').val());
-    const allRoutes = state.routes
+    const allRoutes = routes
       .filter(route => routeMatchesSearch(route, searchTerm))
       .slice()
-      .sort((a, b) => a.name.localeCompare(b.name, 'de'));
+      .sort((a, b) => String(a.name ?? '').localeCompare(String(b.name ?? ''), 'de'));
 
     const nearbyEmptyText = state.position
       ? `Keine Route im Umkreis von ${ns.Config.routeRadiusKm} km gefunden. Wähle unten eine beliebige Route aus.`
@@ -115,13 +118,15 @@
 
     $('#all-routes-summary').text(
       searchTerm
-        ? `${allRoutes.length} von ${state.routes.length} Routen gefunden.`
-        : `${state.routes.length} Routen verfügbar.`
+        ? `${allRoutes.length} von ${routes.length} Routen gefunden.`
+        : `${routes.length} Routen verfügbar.`
     );
   }
 
   function initializeRouteSearch() {
     const input = $('#route-search');
+    if (!input.length || typeof input.autocomplete !== 'function') return;
+
     input.autocomplete({
       minLength: 0,
       source(request, response) {
@@ -498,6 +503,43 @@
     }
   }
 
+  function routesFromResponse(response) {
+    if (!Array.isArray(response?.routes)) {
+      throw new Error('Die Routen-API hat keine gültige Routenliste geliefert.');
+    }
+    return response.routes.filter(route => route && route.id != null && route.name != null);
+  }
+
+  function updateRouteProximity(position) {
+    state.routes = state.routes.map(route => ({
+      ...route,
+      proximityM: route.start ? ns.Distance.meters(position, route.start) : null
+    }));
+  }
+
+  async function initializeLocation(context) {
+    try {
+      const position = await ns.Geo.current();
+      state.position = position;
+      updateRouteProximity(position);
+      $('#location-hint').text(
+        `Standort ermittelt (Genauigkeit ${Math.round(position.accuracy)} m). `
+        + `Nahe Routen werden bis ${ns.Config.routeRadiusKm} km empfohlen.`
+      );
+    } catch (error) {
+      $('#location-hint').text(
+        `Standort nicht verfügbar: ${error.message}. Alle Routen können weiterhin ausgewählt werden.`
+      );
+    } finally {
+      context.markStep('location', 'done');
+      renderRoutes();
+    }
+  }
+
+  function restoreRouteLists() {
+    if (state.routes.length) renderRoutes();
+  }
+
   function bindEvents() {
     $(document).on('input', '#route-search', renderRoutes);
 
@@ -546,6 +588,11 @@
       const page = event.state?.page || '#routes-page';
       navigate(page, { updateHistory: false, instant: true });
     });
+
+    globalThis.addEventListener('pageshow', restoreRouteLists);
+    document.addEventListener('visibilitychange', () => {
+      if (document.visibilityState === 'visible') restoreRouteLists();
+    });
   }
 
   ns.App = {
@@ -557,31 +604,15 @@
       context.markStep('server', 'done');
 
       const response = await ns.Api.routes(null);
-      state.routes = response.routes;
+      state.routes = routesFromResponse(response);
       context.markStep('routes', 'done');
 
-      try {
-        const position = await ns.Geo.current();
-        state.position = position;
-        $('#location-hint').text(
-          `Standort ermittelt (Genauigkeit ${Math.round(position.accuracy)} m). `
-          + `Nahe Routen werden bis ${ns.Config.routeRadiusKm} km empfohlen.`
-        );
-        state.routes = state.routes.map(route => ({
-          ...route,
-          proximityM: route.start ? ns.Distance.meters(position, route.start) : null
-        }));
-      } catch (error) {
-        $('#location-hint').text(
-          `Standort nicht verfügbar: ${error.message}. Alle Routen können weiterhin ausgewählt werden.`
-        );
-      }
-
-      context.markStep('location', 'done');
-      initializeRouteSearch();
       renderRoutes();
+      initializeRouteSearch();
       updateRouteControls();
       hideNavigation();
+
+      void initializeLocation(context);
     }
   };
 }(globalThis.Wegwichtel, globalThis.jQuery));