Put the project name in the URL and auto-load from that when possible

a-b-street · Dec 27, 2024 · bfb608b · bfb608b
1 parent 748ab79
commit bfb608b
Show file tree

Hide file tree

Showing 13 changed files with 36 additions and 14 deletions.
diff --git a/web/src/App.svelte b/web/src/App.svelte
@@ -140,7 +140,7 @@
       <Geocoder {map} apiKey={maptilerApiKey} />
       <div bind:this={mapDiv} />
       {#if $mode.mode == "title"}
-        <TitleMode {wasmReady} />
+        <TitleMode {wasmReady} firstLoad={$mode.firstLoad} />
       {:else if $mode.mode == "new-project"}
         <NewProjectMode />
       {/if}

diff --git a/web/src/AutoBoundariesMode.svelte b/web/src/AutoBoundariesMode.svelte
@@ -78,7 +78,7 @@
     <nav aria-label="breadcrumb">
       <ul>
         <li>
-          <Link on:click={() => ($mode = { mode: "title" })}>
+          <Link on:click={() => ($mode = { mode: "title", firstLoad: false })}>
             Choose project
           </Link>
         </li>

diff --git a/web/src/DebugMode.svelte b/web/src/DebugMode.svelte
@@ -14,7 +14,7 @@
     <nav aria-label="breadcrumb">
       <ul>
         <li>
-          <Link on:click={() => ($mode = { mode: "title" })}>
+          <Link on:click={() => ($mode = { mode: "title", firstLoad: false })}>
             Choose project
           </Link>
         </li>

diff --git a/web/src/ImpactOneDestinationMode.svelte b/web/src/ImpactOneDestinationMode.svelte
@@ -67,7 +67,7 @@
     <nav aria-label="breadcrumb">
       <ul>
         <li>
-          <Link on:click={() => ($mode = { mode: "title" })}>
+          <Link on:click={() => ($mode = { mode: "title", firstLoad: false })}>
             Choose project
           </Link>
         </li>

diff --git a/web/src/NetworkMode.svelte b/web/src/NetworkMode.svelte
@@ -84,7 +84,7 @@
     <nav aria-label="breadcrumb">
       <ul>
         <li>
-          <Link on:click={() => ($mode = { mode: "title" })}>
+          <Link on:click={() => ($mode = { mode: "title", firstLoad: false })}>
             Choose project
           </Link>
         </li>

diff --git a/web/src/RouteMode.svelte b/web/src/RouteMode.svelte
@@ -31,7 +31,7 @@
     <nav aria-label="breadcrumb">
       <ul>
         <li>
-          <Link on:click={() => ($mode = { mode: "title" })}>
+          <Link on:click={() => ($mode = { mode: "title", firstLoad: false })}>
             Choose project
           </Link>
         </li>

diff --git a/web/src/SetBoundaryMode.svelte b/web/src/SetBoundaryMode.svelte
@@ -67,7 +67,7 @@
     <nav aria-label="breadcrumb">
       <ul>
         <li>
-          <Link on:click={() => ($mode = { mode: "title" })}>
+          <Link on:click={() => ($mode = { mode: "title", firstLoad: false })}>
             Choose project
           </Link>
         </li>

diff --git a/web/src/ViewShortcutsMode.svelte b/web/src/ViewShortcutsMode.svelte
@@ -86,7 +86,7 @@
     <nav aria-label="breadcrumb">
       <ul>
         <li>
-          <Link on:click={() => ($mode = { mode: "title" })}>
+          <Link on:click={() => ($mode = { mode: "title", firstLoad: false })}>
             Choose project
           </Link>
         </li>

diff --git a/web/src/edit/NeighbourhoodMode.svelte b/web/src/edit/NeighbourhoodMode.svelte
@@ -142,7 +142,7 @@
     <nav aria-label="breadcrumb">
       <ul>
         <li>
-          <Link on:click={() => ($mode = { mode: "title" })}>
+          <Link on:click={() => ($mode = { mode: "title", firstLoad: false })}>
             Choose project
           </Link>
         </li>

diff --git a/web/src/stores.ts b/web/src/stores.ts
@@ -9,6 +9,7 @@ export const maptilerApiKey = "MZEJTanw3WpxRvt7qDfo";
 export type Mode =
   | {
       mode: "title";
+      firstLoad: boolean;
     }
   | {
       mode: "new-project";
@@ -57,7 +58,7 @@ export let mainRoadPenalty: Writable<number> = writable(1.0);
 // A way for different components to know when internal app state has changed
 // and they might need to rerender
 export let mutationCounter: Writable<number> = writable(1);
-export let mode: Writable<Mode> = writable({ mode: "title" });
+export let mode: Writable<Mode> = writable({ mode: "title", firstLoad: true });
 export let filterType: Writable<string> = writable("walk_cycle_only");
 export let animateShortcuts = writable(false);
 export let editPerimeterRoads = writable(false);

diff --git a/web/src/title/NewProjectMode.svelte b/web/src/title/NewProjectMode.svelte
@@ -74,7 +74,7 @@
     <nav aria-label="breadcrumb">
       <ul>
         <li>
-          <Link on:click={() => ($mode = { mode: "title" })}>
+          <Link on:click={() => ($mode = { mode: "title", firstLoad: false })}>
             Choose project
           </Link>
         </li>

diff --git a/web/src/title/TitleMode.svelte b/web/src/title/TitleMode.svelte
@@ -9,13 +9,29 @@
   import { loadFromLocalStorage } from "./loader";
 
   export let wasmReady: boolean;
+  export let firstLoad: boolean;
 
   let loading = "";
 
   // When other modes reset here, they can't clear state without a race condition
-  $app = null;
-  $routeTool = null;
-  $projectName = "";
+  {
+    $app = null;
+    $routeTool = null;
+    $projectName = "";
+
+    if (firstLoad) {
+      let params = new URLSearchParams(window.location.search);
+      let loadProject = params.get("project");
+      if (loadProject) {
+        loadFromLocalStorage(loadProject);
+      }
+    } else {
+      // Update the URL
+      let url = new URL(window.location.href);
+      url.searchParams.delete("project");
+      window.history.replaceState(null, "", url.toString());
+    }
+  }
 
   let projectList = getProjectList();
 

diff --git a/web/src/title/loader.ts b/web/src/title/loader.ts
@@ -94,6 +94,11 @@ export function afterProjectLoaded() {
   route_pt_a.set(randomPoint());
   route_pt_b.set(randomPoint());
   one_destination.set(randomPoint());
+
+  // Update the URL
+  let url = new URL(window.location.href);
+  url.searchParams.set("project", get(projectName));
+  window.history.replaceState(null, "", url.toString());
 }
 
 function randomPoint(): LngLat {