Starting to implement a selection mechanism to define what should be drawn

src/components/drawing-selector/DrawingSelector.tsx

@@ -0,0 +1,97 @@
+import { Component, createEffect } from 'solid-js';
+
+import style from './index.module.css';
+import Tree from '../tree/Tree';
+import getUri from '../../lib/ids';
+import { createCachedSignal } from '../../workers/cached-signals';
+import { FormControlLabel, Radio, RadioGroup } from '@suid/material';
+import { getDrawingSelections } from '../../db/drawing-selections';
+import dispatch from '../../workers/dispatcher-main';
+
+const id = getUri('drawingSelections', undefined);
+
+type SelectionType = 'ALL' | 'NONE' | 'CURRENT';
+
+type DrawingSelections = {
+  gpxSelection: SelectionType;
+  trkSelection: SelectionType;
+  wptSelection: SelectionType;
+};
+
+const defaultDrawingSelections: DrawingSelections = {
+  gpxSelection: 'ALL',
+  trkSelection: 'ALL',
+  wptSelection: 'ALL',
+};
+
+const drawingSelections = createCachedSignal({
+  id,
+  method: 'getDrawingSelections',
+  defaultDrawingSelections,
+}) as () => DrawingSelections;
+
+createEffect(() => {
+  console.log({
+    caller: 'DrawingSelections',
+    drawingSelections: drawingSelections(),
+  });
+});
+
+const AllNoneCurrent: Component<{}> = (props) => {
+  return (
+    <>
+      <FormControlLabel
+        value='ALL'
+        control={<Radio />}
+        label='All'
+      ></FormControlLabel>
+      <FormControlLabel
+        value='NONE'
+        control={<Radio />}
+        label='None'
+      ></FormControlLabel>
+      <FormControlLabel
+        value='CURRENT'
+        control={<Radio />}
+        label='Current'
+      ></FormControlLabel>
+    </>
+  );
+};
+
+const handleGpxSelectionChange = (ev: any) => {
+  const value = ev.target.value;
+  console.log({
+    caller: 'DrawingSelector / handleGpxSelectionChange',
+    ev,
+    value,
+  });
+  const newDrawingSelections = drawingSelections();
+  newDrawingSelections.gpxSelection = value;
+  dispatch({
+    action: 'putDrawingSelections',
+    params: { id, drawingSelections: newDrawingSelections },
+  });
+};
+
+const DrawingSelector: Component<{}> = (props) => {
+  return (
+    <Tree
+      title='Show'
+      content={
+        <>
+          <div>Trips</div>
+          <RadioGroup
+            defaultValue={drawingSelections()?.gpxSelection}
+            onChange={handleGpxSelectionChange}
+          >
+            <AllNoneCurrent />
+          </RadioGroup>
+        </>
+      }
+      subTree={undefined}
+    />
+  );
+};
+
+export default DrawingSelector;

src/components/drawing-selector/index.ts

@@ -0,0 +1 @@
+export { default } from './DrawingSelector';

src/components/map-tile-provider/MapTileProvider.tsx

@@ -26,6 +26,7 @@ import {
   getTagType,
 } from '../overlays/overlay-definitions';
 import { cloneDeep } from 'lodash';
+import DrawingSelector from '../drawing-selector/DrawingSelector';
 
 const id = getUri('overlays', undefined);
 
@@ -243,6 +244,7 @@ const MapTilesProvider: Component<{}> = (props) => {
         open={open()}
         title={t('chooseYourMap')}
       >
+        <DrawingSelector/>
         <Tree
           title={t('overlay')}
           content={

src/db/change-handler.ts

@@ -8,6 +8,7 @@ import { getOverlays } from './overlays';
 import { getRte } from './rte';
 import { getTrk } from './trk';
 import { getTrkseg } from './trkseg';
+import { getDrawingSelections } from './drawing-selections';
 
 declare global {
   var watches: Map<string, any>;
@@ -21,6 +22,7 @@ const methods = {
   getWpt,
   getRte,
   getOverlays,
+  getDrawingSelections,
 };
 
 const sendUpdate = async (params: any) => {

src/db/drawing-selections.ts

@@ -0,0 +1,18 @@
+import { get, put } from './lib';
+
+export const getDrawingSelections = async (params: any) => {
+  const { id, defaultDrawingSelections } = params;
+  try {
+    const drawingSelections = await get(id, true);
+    return drawingSelections.doc;
+  } catch (error: any) {
+    console.error({ caller: 'defaultDrawingSelections', error });
+    return defaultDrawingSelections;
+  }
+};
+
+export const putDrawingSelections = async (params: any) => {
+  const { id, drawingSelections } = params;
+  await put(id, 'drawingSelections', (doc) => drawingSelections, {}, true);
+  return drawingSelections;
+};

src/lib/ids.ts

@@ -28,6 +28,7 @@ const routes = {
   dbdef: route('dbdef', coding),
   state: route('state', coding),
   overlays: route('overlays', coding),
+  drawingSelections: route('drawing-selections', coding),
   account: route('account/:account', coding),
   settings: route('settings', coding),
   gpx: route('gpx/:gpx', coding),

src/workers/dispatcher-worker.ts

@@ -8,6 +8,7 @@ import {
   putCurrentAccount,
 } from '../db/account';
 import { cancelWatch, getAndWatch } from '../db/change-handler';
+import { putDrawingSelections } from '../db/drawing-selections';
 import {
   putNewGpx,
   existsGpx,
@@ -75,6 +76,8 @@ onmessage = async function (e) {
     getCurrentAccount,
     putCurrentAccount,
 
+    putDrawingSelections,
+
     ping: (params: any) => `${params.what} pong`,
   };