Refactor about modal

Author: dabreegster

web/src/common/OverpassSelector.svelte

@@ -105,6 +105,9 @@
       >Import current view</button
     >
   </div>
+
+  <i>or...</i>
+
   <div>
     <button type="button" on:click={startPolygonTool}
       >Draw an area to import on the map</button

web/src/title/About.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { Modal, notNull } from "../common";
+
+  export let showModal: boolean;
+</script>
+
+{#if showModal}
+  <Modal on:close={() => (showModal = false)} let:dialog>
+    <h1>The Low-traffic neighbourhood (LTN) tool, v2</h1>
+    <p>
+      This is an <b>experimental</b> version of the
+      <a
+        href="https://a-b-street.github.io/docs/software/ltn/index.html"
+        target="_blank">A/B Street LTN tool</a
+      >. Most parts of it do not work yet, and you should probably use the other
+      version of the tool instead.
+    </p>
+    <p>To use this tool, you need to:</p>
+    <ol>
+      <li>Choose your study area to analyze</li>
+      <li>Define one or more neighbourhood boundaries</li>
+      <li>
+        Optionally, to fix the basemap data on existing modal filters, turn
+        restrictions, one-ways, etc
+      </li>
+      <li>
+        To create one or more proposals with new modal filters, and explore
+        their effects
+      </li>
+    </ol>
+    <p>
+      This tool is created by <a
+        href="https://github.com/dabreegster/"
+        target="_blank">Dustin Carlino</a
+      >
+      and relies heavily on
+      <a href="https://www.openstreetmap.org/about" target="_blank"
+        >OpenStreetMap</a
+      > data.
+    </p>
+    <center
+      ><button on:click={() => notNull(dialog).close()}>Start!</button></center
+    >
+  </Modal>
+{/if}

web/src/title/MapLoader.svelte

@@ -34,7 +34,10 @@
   function loadMap(buffer: ArrayBuffer) {
     msg = "Building map model from OSM input";
     console.time("load");
-    $app = new LTN(new Uint8Array(buffer), $example == "" ? undefined : $example);
+    $app = new LTN(
+      new Uint8Array(buffer),
+      $example == "" ? undefined : $example
+    );
     console.timeEnd("load");
 
     // Autoload from local storage
@@ -115,13 +118,17 @@
   </label>
 </div>
 
+<i>or...</i>
+
 <div>
   <label>
     Load an osm.xml or a .pbf file:
     <input bind:this={fileInput} on:change={loadFile} type="file" />
   </label>
 </div>
 
+<i>or...</i>
+
 <OverpassSelector
   map={$map}
   on:gotXml={gotXml}

web/src/title/TitleMode.svelte

@@ -1,61 +1,40 @@
 <script lang="ts">
-  import { Modal, notNull } from "../common";
   import PolygonToolLayer from "../common/draw_polygon/PolygonToolLayer.svelte";
   import SplitComponent from "../SplitComponent.svelte";
   import { map } from "../stores";
+  import About from "./About.svelte";
   import MapLoader from "./MapLoader.svelte";
 
   export let wasmReady: boolean;
 
   // TODO Once per session
   let showModal = true;
+
+  let fileInput: HTMLInputElement;
+  async function loadFile(e: Event) {
+    try {
+      let gj = JSON.parse(await fileInput.files![0].text());
+      // TODO set area, then load savefile
+    } catch (err) {
+      window.alert(`Couldn't open this file: ${err}`);
+    }
+  }
 </script>
 
 <SplitComponent>
   <div slot="sidebar">
-    {#if showModal}
-      <Modal on:close={() => (showModal = false)} let:dialog>
-        <h1>The Low-traffic neighbourhood (LTN) tool, v2</h1>
-        <p>
-          This is an <b>experimental</b> version of the
-          <a
-            href="https://a-b-street.github.io/docs/software/ltn/index.html"
-            target="_blank">A/B Street LTN tool</a
-          >. Most parts of it do not work yet, and you should probably use the
-          other version of the tool instead.
-        </p>
-        <p>To use this tool, you need to:</p>
-        <ol>
-          <li>Choose your study area to analyze</li>
-          <li>Define one or more neighbourhood boundaries</li>
-          <li>
-            Optionally, to fix the basemap data on existing modal filters, turn
-            restrictions, one-ways, etc
-          </li>
-          <li>
-            To create one or more proposals with new modal filters, and explore
-            their effects
-          </li>
-        </ol>
-        <p>
-          This tool is created by <a
-            href="https://github.com/dabreegster/"
-            target="_blank">Dustin Carlino</a
-          >
-          and relies heavily on
-          <a href="https://www.openstreetmap.org/about" target="_blank"
-            >OpenStreetMap</a
-          > data.
-        </p>
-        <center
-          ><button on:click={() => notNull(dialog).close()}>Start!</button
-          ></center
-        >
-      </Modal>
-    {/if}
+    <About bind:showModal />
 
     <h1>Choose your study area</h1>
     <button on:click={() => (showModal = true)}>About the LTN tool</button>
+
+    <div>
+      <label>
+        Load a project from a file
+        <input bind:this={fileInput} on:change={loadFile} type="file" />
+      </label>
+    </div>
+
     <hr />
 
     {#if $map && wasmReady}