From 6da10713a0dd881a9ece135599364bf38e10c05f Mon Sep 17 00:00:00 2001 From: evlist Date: Mon, 12 Dec 2022 18:55:14 +0100 Subject: [PATCH] GpxDialog (looking good). --- package-lock.json | 2 +- package.json | 2 +- src/components/gpx-dialog/GpxDialog.tsx | 98 +++++++++++++++++++++++-- src/db/gpx.ts | 24 +++++- src/i18n/en.ts | 5 ++ src/i18n/fr.ts | 4 + src/workers/dispatcher-worker.ts | 2 + 7 files changed, 127 insertions(+), 10 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3daccea..cb96885 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,7 +19,7 @@ "@solid-primitives/i18n": "^1.1.2", "@solidjs/router": "^0.5.1", "@suid/icons-material": "^0.5.1", - "@suid/material": "^0.8.0", + "@suid/material": "^0.8.1", "@suid/vite-plugin": "^0.1.0", "isomorphic-xml2js": "^0.1.3", "lodash": "^4.17.21", diff --git a/package.json b/package.json index d8ba50d..c8c694a 100644 --- a/package.json +++ b/package.json @@ -35,7 +35,7 @@ "@solid-primitives/i18n": "^1.1.2", "@solidjs/router": "^0.5.1", "@suid/icons-material": "^0.5.1", - "@suid/material": "^0.8.0", + "@suid/material": "^0.8.1", "@suid/vite-plugin": "^0.1.0", "isomorphic-xml2js": "^0.1.3", "lodash": "^4.17.21", diff --git a/src/components/gpx-dialog/GpxDialog.tsx b/src/components/gpx-dialog/GpxDialog.tsx index c245b99..c62ecaa 100644 --- a/src/components/gpx-dialog/GpxDialog.tsx +++ b/src/components/gpx-dialog/GpxDialog.tsx @@ -1,13 +1,17 @@ import { useI18n } from '@solid-primitives/i18n'; import { Box, + Button, FormControl, IconButton, + Input, InputLabel, NativeSelect, SvgIcon, + TextField, } from '@suid/material'; -import { Component, createSignal, For } from 'solid-js'; +import { cloneDeep } from 'lodash'; +import { Component, createSignal, For, Show } from 'solid-js'; import dispatch from '../../workers/dispatcher-main'; import Dialog from '../dialog'; //import GpxesIcon from '../../icons/adventure-journey-location-svgrepo-com.svg'; @@ -50,10 +54,6 @@ const GpxDialog: Component<{}> = (props) => { setOpen(false); }; const gpxChangeHandler = async (event: any) => { - console.log({ - caller: 'GpxDialog / gpxChangeHandler', - value: event.target.value, - }); setSelectedGpxId(event.target.value); const newGpx = await dispatch({ action: 'getGpx', @@ -62,6 +62,64 @@ const GpxDialog: Component<{}> = (props) => { }, }); setGpx(newGpx as Gpx); + console.log({ + caller: 'GpxDialog / gpxChangeHandler', + value: event.target.value, + gpx: gpx(), + }); + }; + + const gpxNameChangeHandler = (event: any) => { + const newGpx: Gpx = cloneDeep(gpx()) as Gpx; + if (newGpx.metadata === undefined) { + newGpx.metadata = {}; + } + newGpx.metadata.name = event.target.value; + setGpx(newGpx); + console.log({ + caller: 'GpxDialog / gpxNameChangeHandler', + value: event.target.value, + gpx: gpx(), + }); + }; + + const gpxDescChangeHandler = (event: any) => { + const newGpx: Gpx = cloneDeep(gpx()) as Gpx; + if (newGpx.metadata === undefined) { + newGpx.metadata = {}; + } + newGpx.metadata.desc = event.target.value; + setGpx(newGpx); + console.log({ + caller: 'GpxDialog / gpxDescChangeHandler', + value: event.target.value, + gpx: gpx(), + }); + }; + const gpxTimeChangeHandler = (event: any) => { + const newGpx: Gpx = cloneDeep(gpx()) as Gpx; + if (newGpx.metadata === undefined) { + newGpx.metadata = {}; + } + newGpx.metadata.time = new Date(event.target.value).toISOString(); + setGpx(newGpx); + console.log({ + caller: 'GpxDialog / gpxTimeChangeHandler', + value: event.target.value, + gpx: gpx(), + }); + }; + + const saveHandler = async (event: any) => { + setCurrentGpxId(selectedGpxId()); + await dispatch({ + action: 'putGpx', + params: { + id: selectedGpxId(), + gpx: gpx(), + }, + }); + setOpen(false); }; return ( @@ -98,11 +156,13 @@ const GpxDialog: Component<{}> = (props) => { component='form' sx={{ width: '100%', - '& .MuiTextField-root': { m: 1, width: '25ch' }, + '& .MuiTextField-root': { m: 1, width: '100%' }, paddingTop: '5px', }} + noValidate + autoComplete='off' > - + {t('gpxChooser')} @@ -123,6 +183,30 @@ const GpxDialog: Component<{}> = (props) => { + + + + + + diff --git a/src/db/gpx.ts b/src/db/gpx.ts index a4f86c2..66baf96 100644 --- a/src/db/gpx.ts +++ b/src/db/gpx.ts @@ -219,7 +219,7 @@ export const getAllGpxesWithSummary = async () => { const result = await Promise.all( allGpxes.map(async (id: string) => { const gpxDoc = await get(id); -// console.log({ caller: 'getAllGpxesWithSummary', gpx: gpxDoc }); + // console.log({ caller: 'getAllGpxesWithSummary', gpx: gpxDoc }); return { id, name: gpxDoc.doc.metadata?.name, @@ -304,3 +304,25 @@ export const getGpx = async (params: any) => { }); return gpx; }; + +export const putGpx = async (params: any) => { + const { id, gpx } = params; + + const extensions = gpx?.extensions; + + gpx.extensions = undefined; + gpx.wpt = undefined; + gpx.trk = undefined; + gpx.rte = undefined; + + await put(id, 'gpx', (doc) => gpx, gpx); + if (extensions !== undefined) { + await put( + `${id}/4extensions`, + 'extensions', + (doc) => extensions, + extensions + ); + } + return id; +}; diff --git a/src/i18n/en.ts b/src/i18n/en.ts index 5521850..f401528 100644 --- a/src/i18n/en.ts +++ b/src/i18n/en.ts @@ -36,6 +36,11 @@ const dict = { gpxDialog: 'Current journey', gpxChooser: 'Journey', + gpxName: 'Name', + gpxDesc: 'Description', + gpxTime: 'Start date', + gpxSave: 'Save', + }; export default dict; diff --git a/src/i18n/fr.ts b/src/i18n/fr.ts index 81a3cb9..2cf9774 100644 --- a/src/i18n/fr.ts +++ b/src/i18n/fr.ts @@ -40,6 +40,10 @@ const dict = { gpxDialog: 'Voyage en cours', gpxChooser: 'Voyage', + gpxName: 'Nom', + gpxDesc: 'Description', + gpxTime: 'Date de début', + gpxSave: 'Sauvegarder', }; export default dict; diff --git a/src/workers/dispatcher-worker.ts b/src/workers/dispatcher-worker.ts index c48fcac..5b2ec65 100644 --- a/src/workers/dispatcher-worker.ts +++ b/src/workers/dispatcher-worker.ts @@ -6,6 +6,7 @@ import { existsGpx, pruneAndSaveImportedGpx, getGpx, + putGpx, getAllGpxes, getAllGpxesWithSummary, } from '../db/gpx'; @@ -27,6 +28,7 @@ onmessage = async function (e) { getAllGpxes, getAllGpxesWithSummary, getGpx, + putGpx, getTrk, getTrkseg, getWpt,