Begining to implement the Wpt update dialog
This commit is contained in:
parent
cc121fea27
commit
c8a8622c91
|
@ -1,10 +1,11 @@
|
|||
import { Grid, IconButton } from '@suid/material';
|
||||
import { Feature } from 'ol';
|
||||
import { Geometry } from 'ol/geom';
|
||||
import { Component, createSignal, For } from 'solid-js';
|
||||
import { Component, createSignal, For, Show } from 'solid-js';
|
||||
import { unwrap } from 'solid-js/store';
|
||||
import { useI18n } from '@solid-primitives/i18n';
|
||||
import CloseIcon from '@suid/icons-material/Close';
|
||||
import EditIcon from '@suid/icons-material/Edit';
|
||||
import { tree } from '../map';
|
||||
import { Paper, Stack } from '@suid/material';
|
||||
import styled from '@suid/material/styles/styled';
|
||||
|
@ -68,14 +69,16 @@ const Infos: Component<{}> = (props) => {
|
|||
<Item sx={{ width: 'calc(100% - 1px)' }}>
|
||||
<Grid container spacing={2} alignItems='center'>
|
||||
<Grid item xs={11}>
|
||||
{feature.get('name')
|
||||
? `${feature.get('name')} (${t(feature.get('type'))})`
|
||||
{feature.get('getTitle')
|
||||
? feature.get('getTitle')()
|
||||
: t(feature.get('type'))}
|
||||
</Grid>
|
||||
<Grid item xs={1} sx={{ paddingLeft: '0px' }}>
|
||||
<IconButton onClick={handleClick}>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
<Show when={feature.get('edit')}>
|
||||
<IconButton onClick={feature.get('edit')}>
|
||||
<EditIcon />
|
||||
</IconButton>
|
||||
</Show>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Item>
|
||||
|
|
|
@ -11,16 +11,33 @@ import VectorSource from 'ol/source/Vector';
|
|||
import GeoJSON from 'ol/format/GeoJSON';
|
||||
import { setBranch, tree } from '../map';
|
||||
import { Feature } from 'ol';
|
||||
import { useI18n } from '@solid-primitives/i18n';
|
||||
import Dialog from '../dialog';
|
||||
import { Box, Button, Grid, Stack, TextField } from '@suid/material';
|
||||
|
||||
interface Props {
|
||||
wptId: string;
|
||||
vectorSource: VectorSource;
|
||||
}
|
||||
|
||||
enum Mode {
|
||||
CLOSED,
|
||||
EDIT,
|
||||
}
|
||||
|
||||
export const Wpt: Component<Props> = ({ vectorSource, wptId: wptId }) => {
|
||||
const [t, { add, locale, dict }] = useI18n();
|
||||
|
||||
const [wpt, setWpt] = createSignal<Wpt>();
|
||||
const [dispatchId, setDispatchId] = createSignal<number>(-1);
|
||||
|
||||
const getTitle = () => {
|
||||
if (wpt()?.name) {
|
||||
return `${wpt()?.name} (${t('wpt')})`;
|
||||
}
|
||||
return t('wpt');
|
||||
};
|
||||
|
||||
const wptCallBack = (error: any, result: any, id?: number) => {
|
||||
if (error) {
|
||||
console.error({ caller: 'wptCallBack', error });
|
||||
|
@ -56,6 +73,12 @@ export const Wpt: Component<Props> = ({ vectorSource, wptId: wptId }) => {
|
|||
cancelDispatch(dispatchId());
|
||||
});
|
||||
|
||||
const [mode, setMode] = createSignal<Mode>(Mode.CLOSED);
|
||||
|
||||
const edit = () => {
|
||||
setMode(Mode.EDIT);
|
||||
};
|
||||
|
||||
createEffect(() => {
|
||||
console.log({ caller: 'Wpt', vectorSource, wptId, wpt: wpt() });
|
||||
|
||||
|
@ -67,9 +90,9 @@ export const Wpt: Component<Props> = ({ vectorSource, wptId: wptId }) => {
|
|||
type: 'Feature',
|
||||
geometry: {
|
||||
type: 'Point',
|
||||
coordinates: [wpt().$.lon, wpt().$.lat],
|
||||
coordinates: [wpt()?.$.lon, wpt()?.$.lat],
|
||||
},
|
||||
properties: { type: 'wpt', ...wpt(), id: wptId },
|
||||
properties: { type: 'wpt', ...wpt(), id: wptId, getTitle, edit },
|
||||
},
|
||||
],
|
||||
};
|
||||
|
@ -88,7 +111,36 @@ export const Wpt: Component<Props> = ({ vectorSource, wptId: wptId }) => {
|
|||
});
|
||||
};
|
||||
|
||||
return <></>;
|
||||
const closeHandler = () => {
|
||||
setMode(Mode.CLOSED);
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open={mode() === Mode.EDIT}
|
||||
title={getTitle()}
|
||||
closeHandler={closeHandler}
|
||||
>
|
||||
<Box sx={{ flexGrow: 1, padding: '10px' }}>
|
||||
<div>
|
||||
<TextField
|
||||
required
|
||||
id='name'
|
||||
label={t('name')}
|
||||
defaultValue={wpt()?.name}
|
||||
/>
|
||||
<Stack spacing={2} direction='row' sx={{ marginTop: '20px' }}>
|
||||
<Button variant='outlined' color='secondary' onClick={closeHandler}>
|
||||
{t('cancel')}
|
||||
</Button>
|
||||
<Button variant='contained' color='success'>
|
||||
{t('save')}
|
||||
</Button>
|
||||
</Stack>
|
||||
</div>
|
||||
</Box>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default Wpt;
|
||||
|
|
|
@ -10,6 +10,9 @@ const dict = {
|
|||
trkseg: 'track segment',
|
||||
'trkseg-start': 'start of track segment',
|
||||
'trkseg-finish': 'end of track segment',
|
||||
|
||||
|
||||
name: 'Name',
|
||||
};
|
||||
|
||||
export default dict;
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
// cSpell:includeRegExp string
|
||||
|
||||
const dict = {
|
||||
|
||||
close: 'quitter',
|
||||
|
||||
chooseYourMap: 'Choisissez votre carte',
|
||||
|
@ -13,6 +12,10 @@ const dict = {
|
|||
trkseg: 'segment de trace',
|
||||
'trkseg-start': 'début de segment de trace',
|
||||
'trkseg-finish': 'fin de segment de trace',
|
||||
|
||||
name: 'Nom',
|
||||
save: 'SAUVEGARDER',
|
||||
cancel: 'ANNULER',
|
||||
};
|
||||
|
||||
export default dict;
|
||||
|
|
Loading…
Reference in New Issue