Filter PMP by stage. #94

src/routes/route_check/problems_map/+page.svelte

@@ -9,6 +9,7 @@
     WarningButton,
     CollapsibleCard,
     Checkbox,
+    CheckboxGroup,
     IconButton,
   } from "govuk-svelte";
   import { tick } from "svelte";
@@ -66,6 +67,8 @@
   let hoveringSidebar: ID | null = null;
   let streetviewOn = false;
   let showRoute = true;
+  let showExisting = true;
+  let showDesign = true;
 
   $: if (map) {
     map.getCanvas().style.cursor =
@@ -291,6 +294,20 @@
       }
     }
   }
+
+  function show(
+    showExisting: boolean,
+    showDesign: boolean,
+    stage: "Existing" | "Design" | "",
+  ) {
+    if (!showExisting && stage == "Existing") {
+      return false;
+    }
+    if (!showDesign && stage == "Design") {
+      return false;
+    }
+    return true;
+  }
 </script>
 
 <svelte:window on:keydown={onKeyDown} />
@@ -311,6 +328,11 @@
         <Checkbox bind:checked={showRoute}>Show route</Checkbox>
       </CollapsibleCard>
 
+      <CheckboxGroup small>
+        <Checkbox bind:checked={showExisting}>Show existing problems</Checkbox>
+        <Checkbox bind:checked={showDesign}>Show design problems</Checkbox>
+      </CheckboxGroup>
+
       <div style="background-color: grey; padding: 4px">
         <h3>Critical Issue Log</h3>
         {#each $state.criticalIssues as critical, idx}
@@ -425,39 +447,43 @@
       {/if}
 
       {#each $state.criticalIssues as critical, idx}
-        <Marker
-          draggable
-          bind:lngLat={critical.point}
-          on:click={() => select({ kind: "critical", idx })}
-          on:dragend={() => select({ kind: "critical", idx })}
-        >
-          <svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
-            <rect width="40" height="40" fill={colors.critical.background} />
-            <text
-              x="50%"
-              y="50%"
-              style:fill="white"
-              style:font="bold 15px sans-serif"
-              dominant-baseline="middle"
-              text-anchor="middle"
-            >
-              {critical.criticalIssue}
-            </text>
-          </svg>
-        </Marker>
+        {#if show(showExisting, showDesign, critical.stage)}
+          <Marker
+            draggable
+            bind:lngLat={critical.point}
+            on:click={() => select({ kind: "critical", idx })}
+            on:dragend={() => select({ kind: "critical", idx })}
+          >
+            <svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
+              <rect width="40" height="40" fill={colors.critical.background} />
+              <text
+                x="50%"
+                y="50%"
+                style:fill="white"
+                style:font="bold 15px sans-serif"
+                dominant-baseline="middle"
+                text-anchor="middle"
+              >
+                {critical.criticalIssue}
+              </text>
+            </svg>
+          </Marker>
+        {/if}
       {/each}
 
       {#each $state.policyConflictLog as conflict, idx}
-        <Marker
-          draggable
-          bind:lngLat={conflict.point}
-          on:click={() => select({ kind: "conflict", idx })}
-          on:dragend={() => select({ kind: "conflict", idx })}
-        >
-          <span class="dot" style:background={policyConflictColor}>
-            {conflict.conflict}
-          </span>
-        </Marker>
+        {#if show(showExisting, showDesign, conflict.stage)}
+          <Marker
+            draggable
+            bind:lngLat={conflict.point}
+            on:click={() => select({ kind: "conflict", idx })}
+            on:dragend={() => select({ kind: "conflict", idx })}
+          >
+            <span class="dot" style:background={policyConflictColor}>
+              {conflict.conflict}
+            </span>
+          </Marker>
+        {/if}
       {/each}
 
       <GeoJSON data={hoverGj}>