Preserve travel mode and start time through modes

a-b-street · May 31, 2024 · dba0517 · dba0517
1 parent 1c24be0
commit dba0517
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 31 deletions.
diff --git a/web/src/DebugMode.svelte b/web/src/DebugMode.svelte
@@ -10,12 +10,10 @@
   import { SplitComponent } from "svelte-utils/top_bar_layout";
   import { PropertiesTable, notNull } from "svelte-utils";
   import { Popup } from "svelte-utils/map";
-  import { backend, type TravelMode, filterForMode } from "./stores";
+  import { backend, travelMode, filterForMode } from "./stores";
   import { onMount } from "svelte";
   import type { FeatureCollection } from "geojson";
 
-  let travelMode: TravelMode = "foot";
-
   let gj: FeatureCollection | null = null;
   onMount(async () => {
     gj = await $backend!.renderDebug();
@@ -28,7 +26,7 @@
     <h2>Debug mode</h2>
     <p>Hover to see a segment's properties, and click to open OSM</p>
 
-    <PickTravelMode bind:travelMode />
+    <PickTravelMode bind:travelMode={$travelMode} />
 
     {#if gj}
       <AmenityList {gj} />
@@ -43,7 +41,7 @@
             "line-width": hoverStateFilter(5, 7),
             "line-color": "black",
           }}
-          filter={filterForMode(travelMode)}
+          filter={filterForMode($travelMode)}
           manageHoverState
           on:click={(e) =>
             window.open(notNull(e.detail.features[0].properties).way, "_blank")}

diff --git a/web/src/IsochroneMode.svelte b/web/src/IsochroneMode.svelte
@@ -5,14 +5,11 @@
   import type { FeatureCollection } from "geojson";
   import { GeoJSON, FillLayer, LineLayer, Marker } from "svelte-maplibre";
   import { SplitComponent } from "svelte-utils/top_bar_layout";
-  import { backend, type TravelMode } from "./stores";
+  import { backend, travelMode, type TravelMode, startTime } from "./stores";
   import { SequentialLegend } from "svelte-utils";
   import { Popup, makeColorRamp, isLine, isPolygon } from "svelte-utils/map";
   import { onMount } from "svelte";
 
-  let travelMode: TravelMode = "foot";
-  let startTime = "07:00";
-
   let start: { lng: number; lat: number } | null = null;
   onMount(async () => {
     // TODO Maybe need to do this when the file changes
@@ -40,9 +37,9 @@
       try {
         isochroneGj = await $backend!.isochrone({
           start,
-          mode: travelMode,
+          mode: $travelMode,
           contours,
-          startTime,
+          startTime: $startTime,
         });
         err = "";
       } catch (err: any) {
@@ -51,7 +48,7 @@
       }
     }
   }
-  $: updateIsochrone(start, travelMode, contours, startTime);
+  $: updateIsochrone(start, $travelMode, contours, $startTime);
 
   async function updateRoute(
     x: { lng: number; lat: number } | null,
@@ -63,10 +60,10 @@
         routeGj = await $backend!.route({
           start,
           end: hoveredAmenity.geometry.coordinates,
-          mode: travelMode,
+          mode: $travelMode,
           debugSearch: false,
           useHeuristic: false,
-          startTime,
+          startTime: $startTime,
         });
         err = "";
       } catch (err: any) {
@@ -77,7 +74,7 @@
       routeGj = null;
     }
   }
-  $: updateRoute(start, hoveredAmenity, startTime);
+  $: updateRoute(start, hoveredAmenity, $startTime);
 
   function lerp(pct: number, a: number, b: number): number {
     return a + pct * (b - a);
@@ -97,11 +94,15 @@
       in seconds.
     </p>
 
-    <PickTravelMode bind:travelMode />
+    <PickTravelMode bind:travelMode={$travelMode} />
 
     <label>
       Start time (PT only)
-      <input type="time" bind:value={startTime} />
+      <input
+        type="time"
+        bind:value={$startTime}
+        disabled={$travelMode != "transit"}
+      />
     </label>
 
     <label><input type="checkbox" bind:checked={contours} />Contours</label>

diff --git a/web/src/RouteMode.svelte b/web/src/RouteMode.svelte
@@ -9,16 +9,19 @@
     hoverStateFilter,
   } from "svelte-maplibre";
   import { SplitComponent } from "svelte-utils/top_bar_layout";
-  import { mode, backend, type TravelMode } from "./stores";
+  import {
+    mode,
+    backend,
+    travelMode,
+    type TravelMode,
+    startTime,
+    useHeuristic,
+  } from "./stores";
   import { Popup, constructMatchExpression } from "svelte-utils/map";
   import { notNull, PropertiesTable } from "svelte-utils";
   import { onMount } from "svelte";
   import type { FeatureCollection } from "geojson";
 
-  let travelMode: TravelMode = "foot";
-  let useHeuristic = true;
-  let startTime = "07:00";
-
   let start: { lng: number; lat: number } | null = null;
   let end: { lng: number; lat: number } | null = null;
   onMount(async () => {
@@ -51,8 +54,8 @@
           end: [end.lng, end.lat],
           mode,
           debugSearch: false,
-          useHeuristic,
-          startTime,
+          useHeuristic: $useHeuristic,
+          startTime: $startTime,
         });
         err = "";
       } catch (error: any) {
@@ -61,7 +64,7 @@
       }
     }
   }
-  $: updateRoute(start, end, travelMode, useHeuristic, startTime);
+  $: updateRoute(start, end, $travelMode, $useHeuristic, $startTime);
 
   function onRightClick(e: CustomEvent<MapMouseEvent>) {
     // Move the first marker, for convenience
@@ -77,10 +80,10 @@
       let debugGj = await $backend!.route({
         start: start!,
         end: [end!.lng, end!.lat],
-        mode: travelMode,
+        mode: $travelMode,
         debugSearch: true,
-        useHeuristic,
-        startTime,
+        useHeuristic: $useHeuristic,
+        startTime: $startTime,
       });
       $mode = {
         kind: "debug-route",
@@ -100,16 +103,24 @@
   <div slot="sidebar">
     <h2>Route mode</h2>
 
-    <PickTravelMode bind:travelMode />
+    <PickTravelMode bind:travelMode={$travelMode} />
 
     <label>
-      <input type="checkbox" bind:checked={useHeuristic} />
+      <input
+        type="checkbox"
+        bind:checked={$useHeuristic}
+        disabled={$travelMode != "transit"}
+      />
       Use heuristic (PT only)
     </label>
 
     <label>
       Start time (PT only)
-      <input type="time" bind:value={startTime} />
+      <input
+        type="time"
+        bind:value={$startTime}
+        disabled={$travelMode != "transit"}
+      />
     </label>
 
     <p>

diff --git a/web/src/stores.ts b/web/src/stores.ts
@@ -31,6 +31,11 @@ export function filterForMode(travelMode: TravelMode): ExpressionSpecification {
   return ["!=", ["get", `access_${travelMode}`], "None"];
 }
 
+export let travelMode: Writable<TravelMode> = writable("foot");
+export let startTime: Writable<string> = writable("07:00");
+// Only used in RouteMode
+export let useHeuristic = writable(true);
+
 // TODO Does this need to be a store?
 export let backend: Writable<Comlink.Remote<Backend> | null> = writable(null);
 // Indicates the backend is ready and a file is loaded