diff --git a/src/components/infos/Infos.tsx b/src/components/infos/Infos.tsx index b31a3c2..9b84b81 100644 --- a/src/components/infos/Infos.tsx +++ b/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) => { - {feature.get('name') - ? `${feature.get('name')} (${t(feature.get('type'))})` + {feature.get('getTitle') + ? feature.get('getTitle')() : t(feature.get('type'))} - - - + + + + + diff --git a/src/components/wpt/Wpt.tsx b/src/components/wpt/Wpt.tsx index ec4a227..a2058da 100644 --- a/src/components/wpt/Wpt.tsx +++ b/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 = ({ vectorSource, wptId: wptId }) => { + const [t, { add, locale, dict }] = useI18n(); + const [wpt, setWpt] = createSignal(); const [dispatchId, setDispatchId] = createSignal(-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 = ({ vectorSource, wptId: wptId }) => { cancelDispatch(dispatchId()); }); + const [mode, setMode] = createSignal(Mode.CLOSED); + + const edit = () => { + setMode(Mode.EDIT); + }; + createEffect(() => { console.log({ caller: 'Wpt', vectorSource, wptId, wpt: wpt() }); @@ -67,9 +90,9 @@ export const Wpt: Component = ({ 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 = ({ vectorSource, wptId: wptId }) => { }); }; - return <>; + const closeHandler = () => { + setMode(Mode.CLOSED); + }; + + return ( + + +
+ + + + + +
+
+
+ ); }; export default Wpt; diff --git a/src/i18n/en.ts b/src/i18n/en.ts index ba3b6b1..aa04ab6 100644 --- a/src/i18n/en.ts +++ b/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; diff --git a/src/i18n/fr.ts b/src/i18n/fr.ts index 7126341..39c0826 100644 --- a/src/i18n/fr.ts +++ b/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;