Begining to implement the Wpt update dialog

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;