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={
+      <Tree
-        <>
+        title={
-          <div>
+          <>
-            <span>
+            <div>
-              <TrkIcon fill='white' width='24' height='24' /> {title()}
+              <span>
-            </span>
+                <TrkIcon fill='white' width='24' height='24' /> {title()}
-          </div>
+              </span>
-          <div>x</div>
+            </div>
-        </>
+            <div>
-      }
+              <IconButton onClick={confirmDeleteHandler}>
-      content={<div></div>}
+                <DeleteIcon />
-      subTree={
+              </IconButton>
-        <For
+            </div>
-          each={Object.keys(restrictToHierarchy).filter((key: string) =>
+          </>
-            key.startsWith('gpx/')
+        }
-          )}
+        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) => {
+          Delete this track ?
-            return <TrksegViewer trksegId={key} />;
+        </Alert>
-          }}
+      </Show>
-        </For>
+    </>
-      }
-    />
   );
 };
 

src/db/trk.ts

@@ -52,3 +52,17 @@ export const getTrk = async (params: any) => {
   });
   return trk;
 };
+
+export const deleteTrk = async (params: any) => {
+  const { id } = params;
+  const docs = await getFamily(id, { include_docs: false });
+  console.log({ caller: 'deleteTrk' }, id, docs);
+  const deletedDocs = docs.rows.map((doc: any) => ({
+    _deleted: true,
+    _id: doc.id,
+    _rev: doc.value.rev,
+  }));
+  console.log({ caller: 'deleteTrk' }, id, docs, deletedDocs);
+  await db.bulkDocs(deletedDocs);
+  return id;
+};

src/workers/dispatcher-worker.ts

@@ -16,7 +16,7 @@ import { putRte } from '../db/rte';
 import { putRtept } from '../db/rtept';
 import { getSettings, putSettings } from '../db/settings';
 import { getState, setState } from '../db/state';
-import { getTrk, putNewTrk } from '../db/trk';
+import { deleteTrk, getTrk, putNewTrk } from '../db/trk';
 import { putTrkpt } from '../db/trkpt';
 import { getTrkseg, appendTrkpt } from '../db/trkseg';
 import { getWpt, putWpt } from '../db/wpt';
@@ -54,6 +54,8 @@ onmessage = async function (e) {
     putRtept,
     putTrkpt,
 
+    deleteTrk,
+
     getState,
     setState,