From 68d1f8140a1bb1ad7019a2dadf79b535cb3e513b Mon Sep 17 00:00:00 2001 From: Eric van der Vlist Date: Thu, 3 Aug 2023 18:46:08 +0200 Subject: [PATCH] Starting to implement a selection mechanism to define what should be drawn --- .../drawing-selector/DrawingSelector.tsx | 97 +++++++++++++++++++ .../drawing-selector/index.module.css | 0 src/components/drawing-selector/index.ts | 1 + .../map-tile-provider/MapTileProvider.tsx | 2 + src/db/change-handler.ts | 2 + src/db/drawing-selections.ts | 18 ++++ src/lib/ids.ts | 1 + src/workers/dispatcher-worker.ts | 3 + 8 files changed, 124 insertions(+) create mode 100644 src/components/drawing-selector/DrawingSelector.tsx create mode 100644 src/components/drawing-selector/index.module.css create mode 100644 src/components/drawing-selector/index.ts create mode 100644 src/db/drawing-selections.ts diff --git a/src/components/drawing-selector/DrawingSelector.tsx b/src/components/drawing-selector/DrawingSelector.tsx new file mode 100644 index 0000000..2e8c209 --- /dev/null +++ b/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 ( + <> + } + label='All' + > + } + label='None' + > + } + label='Current' + > + + ); +}; + +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 ( + +
Trips
+ + + + + } + subTree={undefined} + /> + ); +}; + +export default DrawingSelector; diff --git a/src/components/drawing-selector/index.module.css b/src/components/drawing-selector/index.module.css new file mode 100644 index 0000000..e69de29 diff --git a/src/components/drawing-selector/index.ts b/src/components/drawing-selector/index.ts new file mode 100644 index 0000000..f29e571 --- /dev/null +++ b/src/components/drawing-selector/index.ts @@ -0,0 +1 @@ +export { default } from './DrawingSelector'; diff --git a/src/components/map-tile-provider/MapTileProvider.tsx b/src/components/map-tile-provider/MapTileProvider.tsx index e2f88a5..e2d6ccb 100644 --- a/src/components/map-tile-provider/MapTileProvider.tsx +++ b/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')} > + ; @@ -21,6 +22,7 @@ const methods = { getWpt, getRte, getOverlays, + getDrawingSelections, }; const sendUpdate = async (params: any) => { diff --git a/src/db/drawing-selections.ts b/src/db/drawing-selections.ts new file mode 100644 index 0000000..5bb6030 --- /dev/null +++ b/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; +}; diff --git a/src/lib/ids.ts b/src/lib/ids.ts index 311ef8f..032ef82 100644 --- a/src/lib/ids.ts +++ b/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), diff --git a/src/workers/dispatcher-worker.ts b/src/workers/dispatcher-worker.ts index 5c89486..1fa19e1 100644 --- a/src/workers/dispatcher-worker.ts +++ b/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`, };