From adbbb3e3569fe9cfe9b3a883d0318d2f8c3b1d1a Mon Sep 17 00:00:00 2001 From: Eric van der Vlist Date: Mon, 6 Mar 2023 16:45:20 +0100 Subject: [PATCH] First version of notes, also allowing to delete wpts --- src/components/note/Note.tsx | 35 ++++++- src/components/wpt/Wpt.tsx | 16 +++- src/components/wpt/WptEditDialog.tsx | 136 ++++++++++++++++++++++----- src/components/wpt/WptViewer.tsx | 98 ++++++++++++++++--- src/db/types.d.ts | 11 --- src/db/wpt.ts | 16 +++- src/workers/dispatcher-worker.ts | 3 +- 7 files changed, 262 insertions(+), 53 deletions(-) diff --git a/src/components/note/Note.tsx b/src/components/note/Note.tsx index 5d4fe93..d33c74d 100644 --- a/src/components/note/Note.tsx +++ b/src/components/note/Note.tsx @@ -5,7 +5,7 @@ import { Geolocation } from '@awesome-cordova-plugins/geolocation'; import NoteIcon from '@suid/icons-material/Note'; import style from './Note.module.css'; -import WptEditDialog from '../wpt/WptEditDialog'; +import WptEditDialog, { Category } from '../wpt/WptEditDialog'; import { Coordinate } from 'ol/coordinate'; interface Props {} @@ -20,6 +20,38 @@ const Note: Component = (props) => { setOpen(true); }; + const initialWpt = () => { + const time = new Date().toISOString(); + return { + $: { lat: 0, lon: 0 }, + ele: undefined, + time: undefined, + magvar: undefined, + geoidheight: undefined, + name: undefined, + cmt: undefined, + desc: undefined, + src: undefined, + link: undefined, + sym: undefined, + type: undefined, + fix: undefined, + sat: undefined, + hdop: undefined, + vdop: undefined, + pdop: undefined, + ageofdgpsdata: undefined, + dgpsid: undefined, + extensions: { + address: undefined, + startTime: time, + endTime: time, + category: Category.NOTE, + subCategory: undefined, + }, + }; + }; + return ( <>
= (props) => { open={open} closeHandler={() => setOpen(false)} coordinate={coordinate} + initialWpt={initialWpt} /> ); diff --git a/src/components/wpt/Wpt.tsx b/src/components/wpt/Wpt.tsx index 06582b8..47b4462 100644 --- a/src/components/wpt/Wpt.tsx +++ b/src/components/wpt/Wpt.tsx @@ -78,11 +78,19 @@ export const Wpt: Component = ({ const features = new GeoJSON().readFeatures(geo); console.log({ caller: 'Wpt', features }); - const feature = vectorSources[0].getFeatureById(wptId); - if (feature) { - vectorSources[0].removeFeature(feature); + const feature0 = vectorSources[0].getFeatureById(wptId); + if (feature0) { + vectorSources[0].removeFeature(feature0); + } + const feature1 = vectorSources[1].getFeatureById(wptId); + if (feature1) { + vectorSources[1].removeFeature(feature1); + } + if (wpt()?.extensions?.category === 'note') { + vectorSources[1].addFeatures(features); + } else { + vectorSources[0].addFeatures(features); } - vectorSources[0].addFeatures(features); } }); diff --git a/src/components/wpt/WptEditDialog.tsx b/src/components/wpt/WptEditDialog.tsx index 346c8f7..3bf01e3 100644 --- a/src/components/wpt/WptEditDialog.tsx +++ b/src/components/wpt/WptEditDialog.tsx @@ -1,4 +1,12 @@ -import { Box, Button, Stack, TextField } from '@suid/material'; +import { + Box, + Button, + FormControl, + InputLabel, + NativeSelect, + Stack, + TextField, +} from '@suid/material'; import { Component, createEffect, createSignal, Show } from 'solid-js'; import { useI18n } from '@solid-primitives/i18n'; @@ -15,21 +23,38 @@ import { emptyGpx } from '../../db/gpx'; import getUri from '../../lib/ids'; import { Coordinate } from 'ol/coordinate'; +export enum Category { + NOTE = 'note', + POI = 'poi', + UNKNOWN = '', +} + +export enum SubCategory { + ACCOMMODATION = 'accommodation', + UNKNOWN = '', +} + interface Props { wptId?: string; coordinate?: () => Coordinate | undefined; - type?: string; open: () => boolean; closeHandler?: () => void; + initialWpt: () => Wpt; } const WptEditDialog: Component = (props) => { - const { wptId, closeHandler, open, coordinate, type = 'poi' } = props; + const { + wptId, + closeHandler, + open, + coordinate, + initialWpt = () => emptyWpt, + } = props; const [t, { add, locale, dict }] = useI18n(); const wpt = !!wptId ? peekCachedSignal({ id: wptId, method: 'getWpt' }) - : () => emptyWpt; + : initialWpt; const [gpxId, setGpxId] = !wptId ? createSignal(currentGpxId()) @@ -108,7 +133,7 @@ const WptEditDialog: Component = (props) => { action: 'putWpt', params: { id: newWptId, wpt: editedWpt() }, }); - + setEditedWpt(undefined); _closeHandler(); }; @@ -119,6 +144,25 @@ const WptEditDialog: Component = (props) => { return t('wpt'); }; + // { + // setEditedWpt({ ...editedWpt(), sym: value }); + // }} + // /> + // { + // const extensions = { + // ...editedWpt()?.extensions, + // 'dyo:minZoom': parseFloat(value), + // }; + // setEditedWpt({ ...editedWpt(), extensions }); + // }} + // /> + return ( = (props) => { setEditedWpt({ ...editedWpt(), name: value }); }} /> - { - setEditedWpt({ ...editedWpt(), sym: value }); - }} - /> - { - const extensions = { - ...editedWpt()?.extensions, - 'dyo:minZoom': parseFloat(value), - }; - setEditedWpt({ ...editedWpt(), extensions }); - }} - /> + + + Type + + { + setEditedWpt({ + ...editedWpt(), + extensions: { ...editedWpt().extensions, category: value }, + }); + }} + > + + + + + = (props) => { }} InputProps={{ inputComponent: 'textarea' }} /> + { + setEditedWpt({ + ...editedWpt(), + extensions: { + ...editedWpt().extensions, + startTime: new Date(event.target.value).toISOString(), + }, + }); + }} + /> + { + setEditedWpt({ + ...editedWpt(), + extensions: { + ...editedWpt().extensions, + endTime: new Date(event.target.value).toISOString(), + }, + }); + }} + /> + + + } + > + {t('deleteTrack')} + + ); }; diff --git a/src/db/types.d.ts b/src/db/types.d.ts index 95b4536..73724c6 100644 --- a/src/db/types.d.ts +++ b/src/db/types.d.ts @@ -42,17 +42,6 @@ interface Bounds_ { maxlon: number; } -export enum Category { - NOTE = 'note', - POI = 'poi', - UNKNOWN = '', -} - -export enum SubCategory { - ACCOMMODATION = 'accommodation', - UNKNOWN = '', -} - interface Extensions { 'dyo:speed'?: number; 'dyo:course'?: number; diff --git a/src/db/wpt.ts b/src/db/wpt.ts index 11bdd24..5a5de90 100644 --- a/src/db/wpt.ts +++ b/src/db/wpt.ts @@ -1,6 +1,6 @@ import getUri from '../lib/ids'; import { putNewGpx } from './gpx'; -import { get, put } from './lib'; +import { get, getFamily, put } from './lib'; export const emptyWpt: Wpt = { $: { lat: 0, lon: 0 }, @@ -62,3 +62,17 @@ export const getWpt = async (params: any) => { const doc = await get(id); return doc.doc; }; + +export const deleteWpt = async (params: any) => { + const { id } = params; + const docs = await getFamily(id, { include_docs: false }); + console.log({ caller: 'deleteWpt' }, id, docs); + const deletedDocs = docs.rows.reverse().map((doc: any) => ({ + _deleted: true, + _id: doc.id, + _rev: doc.value.rev, + })); + console.log({ caller: 'deleteWpt' }, id, docs, deletedDocs); + await db.bulkDocs(deletedDocs); + return id; +}; diff --git a/src/workers/dispatcher-worker.ts b/src/workers/dispatcher-worker.ts index 9a78116..8e36257 100644 --- a/src/workers/dispatcher-worker.ts +++ b/src/workers/dispatcher-worker.ts @@ -26,7 +26,7 @@ import { getState, setState } from '../db/state'; import { deleteTrk, getTrk, putNewTrk } from '../db/trk'; import { putTrkpt } from '../db/trkpt'; import { getTrkseg, appendTrkpt } from '../db/trkseg'; -import { getWpt, putWpt } from '../db/wpt'; +import { getWpt, putWpt, deleteWpt } from '../db/wpt'; import { until } from '../lib/async-wait'; //const self = globalThis as unknown as WorkerGlobalScope; @@ -57,6 +57,7 @@ onmessage = async function (e) { deleteTrk, deleteRte, + deleteWpt, getState, setState,