Begin the work of adding a new type, with more modular form

src/lib/sketch/v3/FormV3.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+  import {
+    FormElement,
+    Radio,
+    SecondaryButton,
+    Select,
+    TextArea,
+  } from "govuk-svelte";
+  import { prettyPrintMeters } from "lib/maplibre";
+  import { routeTool } from "scheme-sketcher-lib/draw/stores";
+  import type { FeatureProps } from "scheme-sketcher-lib/draw/types";
+  import type { Writable } from "svelte/store";
+  import type { InterventionProps, Schemes } from "types";
+  import { v4 as uuidv4 } from "uuid";
+  import { schemeName } from "../config";
+    import FormCrossing from "./FormCrossing.svelte";
+
+  export let gjSchemes: Writable<Schemes>;
+  export let props: FeatureProps<InterventionProps>;
+
+  props.v2 ||= {
+    intervention_type: "",
+    intended_uses: "",
+    work_type: "",
+  };
+
+  // Sets the intervention name to "From {road1 and road2} to {road3 and
+  // road4}". Only meant to be useful for routes currently.
+  function autoFillName() {
+    try {
+      props.name = $routeTool!.inner.routeNameForWaypoints(props.waypoints);
+    } catch (e) {
+      window.alert(`Couldn't auto-name route: ${e}`);
+    }
+  }
+
+  let nameId = uuidv4();
+</script>
+
+<FormElement label="Name" id={nameId}>
+  <input type="text" class="govuk-input" id={nameId} bind:value={props.name} />
+  <!-- Only LineStrings can be auto-named, and length_meters being set is the simplest proxy for that -->
+  {#if props.length_meters}
+    <SecondaryButton on:click={() => autoFillName()} disabled={!$routeTool}>
+      Auto-fill
+    </SecondaryButton>
+  {/if}
+</FormElement>
+
+<Select
+  label="Scheme"
+  choices={Object.values($gjSchemes.schemes).map((scheme) => [
+    scheme.scheme_reference,
+    schemeName(scheme),
+  ])}
+  bind:value={props.scheme_reference}
+/>
+
+{#if props.v3}
+  <Radio
+    label="Type"
+    choices={[
+      ["area", "Area"],
+      ["route", "Route"],
+      ["crossing", "Crossing"],
+      ["modal filter", "Modal Filter"],
+      ["junction treatment", "Junction Treatment"],
+      ["other", "Other"],
+    ]}
+    bind:value={props.v3.intervention_type}
+  />
+
+  {#if props.v3.intervention_type === "crossing"}
+    <FormCrossing/>
+    {:else}
+    <Radio
+      label="Intended uses"
+      choices={[
+        ["cycling", "Only cycling"],
+        ["walking_wheeling", "Only walking and wheeling"],
+        ["all", "Cyclists, walking, and wheeling"],
+      ]}
+      bind:value={props.v3.intended_uses}
+    />
+
+    <Radio
+      label="What infrastructure are you mapping?"
+      choices={[
+        ["new", "Something completely new"],
+        ["improvement", "Improvements to something already existing"],
+        ["existing", "Something existing with no changes planned"],
+      ]}
+      inlineSmall
+      bind:value={props.v3.work_type}
+    />
+  {/if}
+{/if}
+
+<TextArea label="Description" bind:value={props.description} />
+
+{#if props.length_meters}
+  <p>Length: {prettyPrintMeters(props.length_meters)}</p>
+{/if}

src/types.ts

@@ -122,6 +122,7 @@ export interface InterventionProps {
   // The schema is v1, unless a field here is present
   pipeline?: PipelineIntervention;
   v2?: V2Intervention;
+  v3?: V3Intervention;
 }
 
 export interface PipelineIntervention extends PipelineBudget, PipelineTiming {
@@ -145,3 +146,16 @@ export interface V2Intervention {
   intended_uses: "cycling" | "walking_wheeling" | "all" | "";
   work_type: "new" | "improvement" | "existing" | "";
 }
+
+export interface V3Intervention {
+  intervention_type:
+    | "area"
+    | "route"
+    | "crossing"
+    | "modal filter"
+    | "junction treatment"
+    | "other"
+    | "";
+  intended_uses: "cycling" | "walking_wheeling" | "all" | "";
+  work_type: "new" | "improvement" | "existing" | "";
+}