GpxDialog (looking good).
This commit is contained in:
parent
7df0b41260
commit
6da10713a0
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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>
|
||||
</>
|
||||
|
|
|
@ -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;
|
||||
};
|
||||
|
|
|
@ -36,6 +36,11 @@ const dict = {
|
|||
|
||||
gpxDialog: 'Current journey',
|
||||
gpxChooser: 'Journey',
|
||||
gpxName: 'Name',
|
||||
gpxDesc: 'Description',
|
||||
gpxTime: 'Start date',
|
||||
gpxSave: 'Save',
|
||||
|
||||
};
|
||||
|
||||
export default dict;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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,
|
||||
|
|
Loading…
Reference in New Issue