More robust id handling in imports and rte delete.

src/components/rte/RteViewer.tsx

@@ -1,12 +1,16 @@
-import { Component } from 'solid-js';
+import { Component, createSignal } from 'solid-js';
 import { peekCachedSignal } from '../../workers/cached-signals';
 import RteIcon from '../../icons/directions-svgrepo-com.svg?component-solid';
 import { useI18n } from '@solid-primitives/i18n';
-
+import { Button, IconButton } from '@suid/material';
+import DeleteIcon from '@suid/icons-material/Delete';
+import QuestionMarkIcon from '@suid/icons-material/QuestionMark';
 import Tree from '../tree';
 import { LineString } from 'ol/geom';
 import DisplayOrGetAddress from '../display-or-get-address';
 import { getFormatedLength } from '../../lib/ol';
+import Alert from '../alert';
+import dispatch from '../../workers/dispatcher-main';
 
 interface Props {
   rteId: string;
@@ -21,39 +25,100 @@ const RteViewer: Component<Props> = ({ rteId }) => {
     return rte().name;
   };
 
+  const [confirmDelete, setConfirmDelete] = createSignal(false);
+
   const lineString = new LineString(
     rte().rtept.map((rtept: any) => [rtept.$.lon, rtept.$.lat])
   );
 
+  const confirmDeleteHandler = () => {
+    console.log({
+      caller: 'RteViewer / confirmDeleteHandler',
+      rteId,
+    });
+    setConfirmDelete(true);
+  };
+
+  const deleteHandler = () => {
+    console.log({
+      caller: 'RteViewer / deleteHandler',
+      rteId,
+    });
+    dispatch({ action: 'deleteRte', params: { id: rteId } });
+    setConfirmDelete(false);
+  };
+
+  const cancelDeleteHandler = () => {
+    console.log({
+      caller: 'RteViewer / cancelDeleteHandler',
+      rteId,
+    });
+    setConfirmDelete(false);
+  };
   return (
-    <Tree
-      title={
-        <>
-          <span>
-            <RteIcon fill='black' width='24' height='24' /> {title()}
-          </span>
-        </>
-      }
-      content={
-        <>
-          <div>
-            {getFormatedLength(lineString)} {t('from')}{' '}
-            <DisplayOrGetAddress
-              target={() => rte().rtept.at(0)}
-              putAction='putRtept'
-              putParamName='rtept'
-            />{' '}
-            {t('to')}{' '}
-            <DisplayOrGetAddress
-              target={() => rte().rtept.at(-1)}
-              putAction='putRtept'
-              putParamName='rtept'
-            />
-          </div>
-        </>
-      }
-      subTree={undefined}
-    />
+    <>
+      <Tree
+        title={
+          <>
+            <span>
+              <RteIcon fill='black' width='24' height='24' /> {title()}
+            </span>
+            <div>
+              <IconButton onClick={confirmDeleteHandler}>
+                <DeleteIcon fill='white' />
+              </IconButton>
+            </div>
+          </>
+        }
+        content={
+          <>
+            <div>
+              {getFormatedLength(lineString)} {t('from')}{' '}
+              <DisplayOrGetAddress
+                target={() => rte().rtept.at(0)}
+                putAction='putRtept'
+                putParamName='rtept'
+              />{' '}
+              {t('to')}{' '}
+              <DisplayOrGetAddress
+                target={() => rte().rtept.at(-1)}
+                putAction='putRtept'
+                putParamName='rtept'
+              />
+            </div>
+          </>
+        }
+        subTree={undefined}
+      />
+      <Alert
+        open={confirmDelete}
+        closeHandler={cancelDeleteHandler}
+        severity='warning'
+        icon={<QuestionMarkIcon />}
+        action={
+          <>
+            <Button
+              color='error'
+              variant='contained'
+              size='small'
+              onClick={deleteHandler}
+            >
+              {t('yes')}
+            </Button>
+            <Button
+              color='primary'
+              variant='outlined'
+              size='small'
+              onclick={cancelDeleteHandler}
+            >
+              {t('no')}
+            </Button>
+          </>
+        }
+      >
+        {t('deleteTrack')}
+      </Alert>
+    </>
   );
 };