Show number of shortcuts in one of the view shortcut mode states

a-b-street · Dec 25, 2023 · 93cce7a · 93cce7a
1 parent 3f1b743
commit 93cce7a
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 18 deletions.
diff --git a/web/src/NeighbourhoodMode.svelte b/web/src/NeighbourhoodMode.svelte
@@ -3,6 +3,8 @@
   import type { Feature, Polygon } from "geojson";
   import type { Map, MapMouseEvent } from "maplibre-gl";
   import { onDestroy } from "svelte";
+  import { Popup } from "svelte-maplibre";
+  import { PropertiesTable } from "./common";
   import RenderNeighbourhood from "./RenderNeighbourhood.svelte";
   import SplitComponent from "./SplitComponent.svelte";
 
@@ -138,7 +140,17 @@
       {showBasemap}
       onClickLine={(f) => window.open(f.properties.way, "_blank")}
       onClickCircle={deleteFilter}
-      popups
-    />
+    >
+      <div slot="line-popup">
+        <Popup openOn="hover" let:data>
+          <PropertiesTable properties={data.properties} />
+        </Popup>
+      </div>
+      <div slot="circle-popup">
+        <Popup openOn="hover" let:data>
+          <PropertiesTable properties={data.properties} />
+        </Popup>
+      </div>
+    </RenderNeighbourhood>
   </div>
 </SplitComponent>
diff --git a/web/src/RenderNeighbourhood.svelte b/web/src/RenderNeighbourhood.svelte
@@ -5,22 +5,18 @@
     GeoJSON,
     hoverStateFilter,
     LineLayer,
-    Popup,
   } from "svelte-maplibre";
   import {
     constructMatchExpression,
     isLine,
     isPoint,
     isPolygon,
-    PropertiesTable,
   } from "./common";
 
   export let gjInput;
   export let showBasemap: boolean;
   export let onClickLine = (f) => {};
   export let onClickCircle = (f) => {};
-  // TODO Or take some named slots
-  export let popups = false;
 
   let gj;
   let maxShortcuts;
@@ -94,11 +90,7 @@
     on:click={(e) => onClickLine(e.detail.features[0])}
     hoverCursor="pointer"
   >
-    {#if popups}
-      <Popup openOn="hover" let:data>
-        <PropertiesTable properties={data.properties} />
-      </Popup>
-    {/if}
+    <slot name="line-popup" />
   </LineLayer>
 
   <CircleLayer
@@ -116,10 +108,6 @@
     }}
     on:click={(e) => onClickCircle(e.detail.features[0])}
   >
-    {#if popups}
-      <Popup openOn="hover" let:data>
-        <PropertiesTable properties={data.properties} />
-      </Popup>
-    {/if}
+    <slot name="circle-popup" />
   </CircleLayer>
 </GeoJSON>
diff --git a/web/src/ViewShortcutsMode.svelte b/web/src/ViewShortcutsMode.svelte
@@ -2,7 +2,7 @@
   import { LTN } from "backend";
   import type { Map } from "maplibre-gl";
   import { onDestroy, onMount } from "svelte";
-  import { GeoJSON, LineLayer } from "svelte-maplibre";
+  import { GeoJSON, LineLayer, Popup } from "svelte-maplibre";
   import RenderNeighbourhood from "./RenderNeighbourhood.svelte";
   import SplitComponent from "./SplitComponent.svelte";
 
@@ -105,7 +105,11 @@
         gjInput={JSON.parse(app.renderNeighbourhood())}
         {showBasemap}
         onClickLine={(f) => choseRoad(app, f.properties.id)}
-      />
+      >
+        <div slot="line-popup">
+          <Popup openOn="hover" let:data>{data.properties.shortcuts}</Popup>
+        </div>
+      </RenderNeighbourhood>
     {:else if state.state == "chose-road"}
       {#if state.shortcutIndex == null}
         <GeoJSON data={state.gj}>