Implementing a delete method for tracks.

src/components/trk/TrkViewer.tsx

@@ -1,8 +1,12 @@
-import { Component, For } from 'solid-js';
+import { Component, createSignal, For, Show } from 'solid-js';
 import { peekCachedSignal } from '../../workers/cached-signals';
 import Tree from '../tree';
 import TrkIcon from '../../icons/human-footprints-svgrepo-com.svg?component-solid';
 import { TrksegViewer } from '../trkseg';
+import { Alert, Button, IconButton } from '@suid/material';
+import DeleteIcon from '@suid/icons-material/Delete';
+import QuestionMarkIcon from '@suid/icons-material/QuestionMark';
+import dispatch from '../../workers/dispatcher-main';
 
 interface Props {
   trkId: string;
@@ -12,35 +16,97 @@ interface Props {
 const TrkViewer: Component<Props> = ({ trkId, restrictToHierarchy }) => {
   const trk = peekCachedSignal({ id: trkId, method: 'getTrk' });
   console.log({ caller: 'TrkViewer', trkId, restrictToHierarchy, trk: trk() });
+
+  const [confirmDelete, setConfirmDelete] = createSignal(false);
+
   const title = () => {
     return trk().name;
   };
 
+  const confirmDeleteHandler = () => {
+    console.log({
+      caller: 'TrkViewer / confirmDeleteHandler',
+      trkId,
+    });
+    setConfirmDelete(true);
+  };
+
+  const deleteHandler = () => {
+    console.log({
+      caller: 'TrkViewer / deleteHandler',
+      trkId,
+    });
+    dispatch({ action: 'deleteTrk', params: { id: trkId } });
+    setConfirmDelete(false);
+  };
+
+  const cancelDeleteHandler = () => {
+    console.log({
+      caller: 'TrkViewer / cancelDeleteHandler',
+      trkId,
+    });
+    setConfirmDelete(false);
+  };
+
   return (
-    <Tree
-      title={
-        <>
-          <div>
-            <span>
-              <TrkIcon fill='white' width='24' height='24' /> {title()}
-            </span>
-          </div>
-          <div>x</div>
-        </>
-      }
-      content={<div></div>}
-      subTree={
-        <For
-          each={Object.keys(restrictToHierarchy).filter((key: string) =>
-            key.startsWith('gpx/')
-          )}
+    <>
+      <Tree
+        title={
+          <>
+            <div>
+              <span>
+                <TrkIcon fill='white' width='24' height='24' /> {title()}
+              </span>
+            </div>
+            <div>
+              <IconButton onClick={confirmDeleteHandler}>
+                <DeleteIcon />
+              </IconButton>
+            </div>
+          </>
+        }
+        content={<div></div>}
+        subTree={
+          <For
+            each={Object.keys(restrictToHierarchy).filter((key: string) =>
+              key.startsWith('gpx/')
+            )}
+          >
+            {(key: string) => {
+              return <TrksegViewer trksegId={key} />;
+            }}
+          </For>
+        }
+      />
+      <Show when={confirmDelete()}>
+        <Alert
+          severity='warning'
+          icon={<QuestionMarkIcon />}
+          action={
+            <>
+              <Button
+                color='error'
+                variant='contained'
+                size='small'
+                onClick={deleteHandler}
+              >
+                YES
+              </Button>
+              <Button
+                color='primary'
+                variant='outlined'
+                size='small'
+                onclick={cancelDeleteHandler}
+              >
+                NO
+              </Button>
+            </>
+          }
         >
-          {(key: string) => {
-            return <TrksegViewer trksegId={key} />;
-          }}
-        </For>
-      }
-    />
+          Delete this track ?
+        </Alert>
+      </Show>
+    </>
   );
 };