GpxDialog (looking good).
This commit is contained in:
parent
7df0b41260
commit
6da10713a0
|
@ -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",
|
||||||
|
|
|
@ -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",
|
||||||
|
|
|
@ -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>
|
||||||
</>
|
</>
|
||||||
|
|
|
@ -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;
|
||||||
|
};
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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,
|
||||||
|
|
Loading…
Reference in New Issue