Begining to implement the Wpt update dialog

src/components/infos/Infos.tsx

@@ -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('getTitle')
-                    ? `${feature.get('name')} (${t(feature.get('type'))})`
+                    ? feature.get('getTitle')()
                     : t(feature.get('type'))}
                 </Grid>
                 <Grid item xs={1} sx={{ paddingLeft: '0px' }}>
-                  <IconButton onClick={handleClick}>
+                  <Show when={feature.get('edit')}>
-                    <CloseIcon />
+                    <IconButton onClick={feature.get('edit')}>
-                  </IconButton>
+                      <EditIcon />
+                    </IconButton>
+                  </Show>
                 </Grid>
               </Grid>
             </Item>

src/components/wpt/Wpt.tsx

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

src/i18n/en.ts

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

src/i18n/fr.ts

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