Begining to implement the Wpt update dialog

This commit is contained in:
Eric van der Vlist 2022-12-06 17:09:31 +01:00
parent cc121fea27
commit c8a8622c91
4 changed files with 71 additions and 10 deletions

View File

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

View File

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

View File

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

View File

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