Adding the possibility to delete tracks, moving the import button into the track browser, changing the background geolocation precision to 5m and adding a couple of calls to db.compact() and db.viewCleanup().

This commit is contained in:
Eric van der Vlist 2022-09-28 09:46:57 +02:00
parent 2a0dbef552
commit 2fe7452811
5 changed files with 51 additions and 23 deletions

View File

@ -2,16 +2,20 @@ import {
IonButton,
IonButtons,
IonContent,
IonIcon,
IonItem,
IonList,
IonModal,
IonTitle,
IonToolbar,
} from '@ionic/react';
import { trash } from 'ionicons/icons';
import React, { Fragment, useRef } from 'react';
import { useFind } from 'react-pouchdb';
import { useFind, useDB } from 'react-pouchdb';
import { deleteGps } from '../../db/gpx';
import { enterAnimation, leaveAnimation } from '../../lib/animation';
import phoneRoute from '../../theme/icons/font-gis/svg/routing/uEB08-phone-route-nons.svg';
import GpxImport from './gpx-import';
const TrackBrowser: React.FC<{}> = () => {
const gpxes = useFind({
@ -20,6 +24,8 @@ const TrackBrowser: React.FC<{}> = () => {
},
});
const db = useDB();
const modal = useRef<HTMLIonModalElement>(null);
const dismiss = () => {
@ -40,15 +46,28 @@ const TrackBrowser: React.FC<{}> = () => {
<IonToolbar>
<IonTitle>Tracks</IonTitle>
<IonButtons slot='end'>
<GpxImport />
<IonButton onClick={() => dismiss()}>Close</IonButton>
</IonButtons>
</IonToolbar>
<IonContent>
<IonList>
{gpxes.map((gpx: any) => {
return <IonItem key={gpx._id}>
return (
<IonItem key={gpx._id}>
<span>{gpx.gpx.metadata.time}</span>
</IonItem>;
<IonButtons slot='end'>
<IonButton
onClick={() => {
deleteGps(db, { _id: gpx._id, _rev: gpx._rev });
}}
color='danger'
>
<IonIcon slot='icon-only' icon={trash} />
</IonButton>
</IonButtons>
</IonItem>
);
})}
</IonList>
</IonContent>

View File

@ -19,7 +19,6 @@ import {
IonToolbar,
} from '@ionic/react';
import GpxImport from './gpx-import';
import Gpxes from './gpxes';
import GpxRecord from './gpx-record';
import { initDb } from '../../db';
@ -68,7 +67,6 @@ const Map: react.FC<{}> = (props: {}) => {
<IonButtons slot='end'>
<TrackBrowser/>
<GpxRecord />
<GpxImport />
<TileServerChooserButton />
</IonButtons>
</IonToolbar>

View File

@ -132,6 +132,29 @@ export const saveCurrent = async (db: any) => {
}
};
export const deleteGps = async (
db: any,
gps: { _id: string; _rev: string }
) => {
console.log(`Deleting document ${JSON.stringify(gps)}`);
await db.put({ _deleted: true, ...gps });
console.log(`done, id: ${gps}`);
const currentTrkpts = await db.find({
selector: {
type: 'trkpt',
gpx: gps._id,
},
fields: ['_id', '_rev'],
});
console.log(`deleteGps - db.find(trkpts) : ${JSON.stringify(currentTrkpts)}`);
const trkpts: { _id: string; _rev: string }[] = currentTrkpts.docs;
for (let j = 0; j < trkpts.length; j++) {
await db.put({ _deleted: true, ...trkpts[j] });
}
await await db.compact();
await db.viewCleanup();
};
export const deleteCurrent = async (db: any) => {
const currents = await db.find({
selector: {
@ -144,21 +167,6 @@ export const deleteCurrent = async (db: any) => {
const docs: { _id: string; _rev: string }[] = currents.docs;
for (let i = 0; i < docs.length; i++) {
console.log(`Deleting document ${JSON.stringify(docs[i])}`);
await db.put({ _deleted: true, ...docs[i] });
console.log(`done, id: ${docs[i]._id}`);
const currentTrkpts = await db.find({
selector: {
type: 'trkpt',
gpx: docs[i]._id,
},
fields: ['_id', '_rev', 'type'],
});
console.log(
`deleteCurrent - db.find(trkpts) : ${JSON.stringify(currentTrkpts)}`
);
const trkpts: { _id: string; _rev: string }[] = currentTrkpts.docs;
for (let j = 0; j < trkpts.length; j++) {
await db.put({ _deleted: true, ...trkpts[j] });
}
await deleteGps(db, docs[i]);
}
};

View File

@ -21,6 +21,9 @@ export const initDb = async (db: any, setDbReady: any) => {
}
}
await await db.compact();
await db.viewCleanup();
// WARNING: defs must use the canonical form and be identical to what will be returned by db.getIndexes
const requiredIndexes: any = [
{

View File

@ -32,7 +32,7 @@ const backgroundGeolocationConfig = {
// The minimum number of metres between subsequent locations. Defaults
// to 0.
distanceFilter: 1,
distanceFilter: 5,
};
export const startBackgroundGeolocation = async (db: any) => {