GpxDialog (looking good).

This commit is contained in:
Eric van der Vlist 2022-12-12 18:55:14 +01:00
parent 7df0b41260
commit 6da10713a0
7 changed files with 127 additions and 10 deletions

2
package-lock.json generated
View File

@ -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",

View File

@ -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",

View File

@ -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'
>
<FormControl fullWidth>
<FormControl>
<InputLabel variant='normal' htmlFor='gpx-chooser'>
{t('gpxChooser')}
</InputLabel>
@ -123,6 +183,30 @@ const GpxDialog: Component<{}> = (props) => {
</For>
</NativeSelect>
</FormControl>
<Show when={gpx() != undefined}>
<TextField
label={t('gpxName')}
value={gpx()?.metadata?.name || ''}
onChange={gpxNameChangeHandler}
/>
<TextField
label={t('gpxTime')}
type='datetime-local'
value={(gpx()?.metadata?.time || '').replace('Z', '')}
onChange={gpxTimeChangeHandler}
/>
<TextField
label={t('gpxDesc')}
multiline={true}
rows={5}
value={gpx()?.metadata?.desc || ''}
onChange={gpxDescChangeHandler}
InputProps={{ inputComponent: 'textarea' }}
/>
<Button variant='contained' onClick={saveHandler}>
{t('gpxSave')}
</Button>
</Show>
</Box>
</Dialog>
</>

View File

@ -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;
};

View File

@ -36,6 +36,11 @@ const dict = {
gpxDialog: 'Current journey',
gpxChooser: 'Journey',
gpxName: 'Name',
gpxDesc: 'Description',
gpxTime: 'Start date',
gpxSave: 'Save',
};
export default dict;

View File

@ -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;

View File

@ -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,