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>
+    </>
   );
 };
 

src/db/gpx.ts

@@ -68,7 +68,14 @@ export const existsGpx = async (id: IdGpx) => {
 const prune = (
   id: any,
   object: any,
-  previousGpx: Gpx | null,
+  previousIds: {
+    rte: number;
+    wpt: number;
+    trk: number;
+    rtept: number;
+    trkseg: number;
+    trkpt: number;
+  },
   extensions: any,
   docs: any[]
 ) => {
@@ -83,11 +90,6 @@ const prune = (
         key === 'trkpt'
       ) {
         const subObjects = object[key];
-        let previousId = 0;
-        let nbPreviousObjects = 0;
-        if (previousGpx !== null && key in previousGpx) {
-          nbPreviousObjects = previousGpx[key].length;
-        }
         for (const index in subObjects) {
           const subId = { ...id };
           if (key === 'trkpt') {
@@ -95,11 +97,13 @@ const prune = (
             const normalId = intToTrkptId(
               new Date(object[key][index].time).valueOf()
             );
-            const id = normalId > previousId ? normalId : previousId + 1;
+            const id =
+              normalId > previousIds.trk ? normalId : previousIds.trk + 1;
             subId[key] = id;
-            previousId = id;
+            previousIds.trk = id;
           } else {
-            subId[key] = index + nbPreviousObjects;
+            previousIds[key] = previousIds[key] + 1;
+            subId[key] = previousIds[key];
           }
           // console.log({
           //   caller: 'prune',
@@ -121,10 +125,10 @@ const prune = (
             type: key,
             doc: subObjects[index],
           });
-          prune(subId, subObjects[index], previousGpx, {}, docs);
+          prune(subId, subObjects[index], previousIds, {}, docs);
         }
         object[key] = undefined;
-      } else prune(id, object[key], previousGpx, extensions, docs);
+      } else prune(id, object[key], previousIds, extensions, docs);
     }
   }
 };
@@ -284,7 +288,30 @@ export const pruneAndSaveImportedGpx = async (params: any) => {
       gpxId,
     });
   }
-  prune(gpxId, gpx, previousGpx, extensions, docs);
+  let previousIds = {
+    rte: -1,
+    wpt: -1,
+    trk: -1,
+    rtept: -1,
+    trkseg: -1,
+    trkpt: -1,
+  };
+  if (!!previousGpx?.wpt) {
+    const wptUri = previousGpx.wpt.at(-1);
+    const wptId = getUri('wpt', wptUri);
+    previousIds.wpt = wptId.wpt;
+  }
+  if (!!previousGpx?.rte) {
+    const rteUri = previousGpx.rte.at(-1);
+    const rteId = getUri('rte', rteUri);
+    previousIds.rte = rteId.rte;
+  }
+  if (!!previousGpx?.trk) {
+    const trkUri = previousGpx.trk.at(-1);
+    const trkId = getUri('trk', trkUri);
+    previousIds.trk = trkId.trk;
+  }
+  prune(gpxId, gpx, previousIds, extensions, docs);
   console.log({ caller: 'pruneAndSaveImportedGpx / pruned', docs });
   try {
     const result = await putAll(docs);

src/db/rte.ts

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

src/workers/dispatcher-worker.ts

@@ -13,7 +13,7 @@ import {
   getAllGpxesWithSummary,
 } from '../db/gpx';
 import { putOverlays } from '../db/overlays';
-import { putRte } from '../db/rte';
+import { deleteRte, putRte } from '../db/rte';
 import { putRtept } from '../db/rtept';
 import { getSettings, putSettings } from '../db/settings';
 import { getState, setState } from '../db/state';
@@ -56,6 +56,7 @@ onmessage = async function (e) {
     putTrkpt,
 
     deleteTrk,
+    deleteRte,
 
     getState,
     setState,