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", "@solid-primitives/i18n": "^1.1.2",
"@solidjs/router": "^0.5.1", "@solidjs/router": "^0.5.1",
"@suid/icons-material": "^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", "@suid/vite-plugin": "^0.1.0",
"isomorphic-xml2js": "^0.1.3", "isomorphic-xml2js": "^0.1.3",
"lodash": "^4.17.21", "lodash": "^4.17.21",

View File

@ -35,7 +35,7 @@
"@solid-primitives/i18n": "^1.1.2", "@solid-primitives/i18n": "^1.1.2",
"@solidjs/router": "^0.5.1", "@solidjs/router": "^0.5.1",
"@suid/icons-material": "^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", "@suid/vite-plugin": "^0.1.0",
"isomorphic-xml2js": "^0.1.3", "isomorphic-xml2js": "^0.1.3",
"lodash": "^4.17.21", "lodash": "^4.17.21",

View File

@ -1,13 +1,17 @@
import { useI18n } from '@solid-primitives/i18n'; import { useI18n } from '@solid-primitives/i18n';
import { import {
Box, Box,
Button,
FormControl, FormControl,
IconButton, IconButton,
Input,
InputLabel, InputLabel,
NativeSelect, NativeSelect,
SvgIcon, SvgIcon,
TextField,
} from '@suid/material'; } 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 dispatch from '../../workers/dispatcher-main';
import Dialog from '../dialog'; import Dialog from '../dialog';
//import GpxesIcon from '../../icons/adventure-journey-location-svgrepo-com.svg'; //import GpxesIcon from '../../icons/adventure-journey-location-svgrepo-com.svg';
@ -50,10 +54,6 @@ const GpxDialog: Component<{}> = (props) => {
setOpen(false); setOpen(false);
}; };
const gpxChangeHandler = async (event: any) => { const gpxChangeHandler = async (event: any) => {
console.log({
caller: 'GpxDialog / gpxChangeHandler',
value: event.target.value,
});
setSelectedGpxId(event.target.value); setSelectedGpxId(event.target.value);
const newGpx = await dispatch({ const newGpx = await dispatch({
action: 'getGpx', action: 'getGpx',
@ -62,6 +62,64 @@ const GpxDialog: Component<{}> = (props) => {
}, },
}); });
setGpx(newGpx as Gpx); 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 ( return (
@ -98,11 +156,13 @@ const GpxDialog: Component<{}> = (props) => {
component='form' component='form'
sx={{ sx={{
width: '100%', width: '100%',
'& .MuiTextField-root': { m: 1, width: '25ch' }, '& .MuiTextField-root': { m: 1, width: '100%' },
paddingTop: '5px', paddingTop: '5px',
}} }}
noValidate
autoComplete='off'
> >
<FormControl fullWidth> <FormControl>
<InputLabel variant='normal' htmlFor='gpx-chooser'> <InputLabel variant='normal' htmlFor='gpx-chooser'>
{t('gpxChooser')} {t('gpxChooser')}
</InputLabel> </InputLabel>
@ -123,6 +183,30 @@ const GpxDialog: Component<{}> = (props) => {
</For> </For>
</NativeSelect> </NativeSelect>
</FormControl> </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> </Box>
</Dialog> </Dialog>
</> </>

View File

@ -219,7 +219,7 @@ export const getAllGpxesWithSummary = async () => {
const result = await Promise.all( const result = await Promise.all(
allGpxes.map(async (id: string) => { allGpxes.map(async (id: string) => {
const gpxDoc = await get(id); const gpxDoc = await get(id);
// console.log({ caller: 'getAllGpxesWithSummary', gpx: gpxDoc }); // console.log({ caller: 'getAllGpxesWithSummary', gpx: gpxDoc });
return { return {
id, id,
name: gpxDoc.doc.metadata?.name, name: gpxDoc.doc.metadata?.name,
@ -304,3 +304,25 @@ export const getGpx = async (params: any) => {
}); });
return gpx; 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', gpxDialog: 'Current journey',
gpxChooser: 'Journey', gpxChooser: 'Journey',
gpxName: 'Name',
gpxDesc: 'Description',
gpxTime: 'Start date',
gpxSave: 'Save',
}; };
export default dict; export default dict;

View File

@ -40,6 +40,10 @@ const dict = {
gpxDialog: 'Voyage en cours', gpxDialog: 'Voyage en cours',
gpxChooser: 'Voyage', gpxChooser: 'Voyage',
gpxName: 'Nom',
gpxDesc: 'Description',
gpxTime: 'Date de début',
gpxSave: 'Sauvegarder',
}; };
export default dict; export default dict;

View File

@ -6,6 +6,7 @@ import {
existsGpx, existsGpx,
pruneAndSaveImportedGpx, pruneAndSaveImportedGpx,
getGpx, getGpx,
putGpx,
getAllGpxes, getAllGpxes,
getAllGpxesWithSummary, getAllGpxesWithSummary,
} from '../db/gpx'; } from '../db/gpx';
@ -27,6 +28,7 @@ onmessage = async function (e) {
getAllGpxes, getAllGpxes,
getAllGpxesWithSummary, getAllGpxesWithSummary,
getGpx, getGpx,
putGpx,
getTrk, getTrk,
getTrkseg, getTrkseg,
getWpt, getWpt,