(Re)Adding background geolocation.

src/components/gpx-record/GpxRecord.tsx

@@ -12,13 +12,54 @@ import Dialog from '../dialog';
 import { useI18n } from '@solid-primitives/i18n';
 import GpxChooser from '../gpx-chooser';
 import { currentGpxId } from '../gpx-dialog';
+import {
+  startBackgroundGeolocation,
+  stopBackgroundGeolocation,
+} from '../../lib/background-geolocation';
+import dispatch from '../../workers/dispatcher-main';
+import { emptyTrk } from '../../db/trk';
+import getUri from '../../lib/ids';
+
+declare global {
+  var $lastValidLocationTime: number;
+}
 
 const GpxRecord: Component<{}> = (props) => {
   const [t] = useI18n();
   const [state, setState] = createSignal('stopped');
   const [open, setOpen] = createSignal(false);
+  const [watcherId, setWatcherId] = createSignal();
   const [gpxId, setGpxId] = createSignal<string>('');
-  const [trkId, setTrkId] = createSignal<string>('');
+  const [trksegId, setTrksegId] = createSignal<IdTrkseg>();
+
+  const newLocationHandler = async (location: any) => {
+    console.log(
+      `Location filtering, elapsed time: ${
+        location.time - globalThis.$lastValidLocationTime
+      }`
+    );
+    if (location.time - globalThis.$lastValidLocationTime > 15000) {
+      globalThis.$lastValidLocationTime = location.time;
+      await dispatch({
+        action: 'appendTrkpt',
+        params: {
+          trksegIdObj: trksegId(),
+          trkpt: {
+            $: {
+              lat: location.latitude,
+              lon: location.longitude,
+            },
+            ele: location.altitude,
+            time: new Date(location.time).toISOString(),
+            extensions: {
+              speed: location.speed,
+              accuracy: location.accuracy,
+            },
+          },
+        },
+      });
+    }
+  };
 
   const handleClickOpen = () => {
     if (state() === 'stopped') {
@@ -29,22 +70,37 @@ const GpxRecord: Component<{}> = (props) => {
   const handleClose = () => {
     setOpen(false);
   };
-  const startRecordingHandler = () => {
+  const startRecordingHandler = async () => {
+    const trkId = await dispatch({
+      action: 'appendTrk',
+      params: { gpxId: gpxId(), trk: emptyTrk },
+    });
+    const trkIdObj = getUri('trk', trkId);
+    setTrksegId({ ...trkIdObj, trkseg: 0 });
+    globalThis.$lastValidLocationTime = 0;
+    const id = await startBackgroundGeolocation(newLocationHandler, 20);
+    setWatcherId(id);
     setState('recording');
     setOpen(false);
   };
   const pauseRecordingHandler = () => {
+    stopBackgroundGeolocation(watcherId());
     setState('paused');
     setOpen(false);
   };
-  const resumeRecordingHandler = () => {
+  const resumeRecordingHandler = async () => {
+    setTrksegId({ ...trksegId()!, trkseg: trksegId()!.trkseg + 1 });
+    const id = await startBackgroundGeolocation(newLocationHandler, 20);
+    setWatcherId(id);
     setState('recording');
     setOpen(false);
   };
   const stopRecordingHandler = () => {
+    stopBackgroundGeolocation(watcherId());
     setState('stopped');
     setOpen(false);
   };
+
   return (
     <>
       <div class={style.control}>
@@ -81,6 +137,7 @@ const GpxRecord: Component<{}> = (props) => {
               color='primary'
               variant='contained'
               onClick={startRecordingHandler}
+              disabled={gpxId() === 'new'}
               sx={{
                 width: '100%',
                 margin: '10px',