Re-implementing the background geolocation (not yet stored in a track)

public/assets/images/test.svg

@@ -0,0 +1,44 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="1000"
+  height="2000"
+  viewBox="0 0 250 500"
+>
+<g>
+    <circle
+      cx="100"
+      cy="100"
+      r="10"
+      fill='green'
+      stroke='black'
+      stroke-width="1"
+      vector-effect="non-scaling-stroke"
+    />
+   <circle
+      cx="200"
+      cy="200"
+      r="10"
+      fill='green'
+      stroke='black'
+      stroke-width="1"
+      vector-effect="non-scaling-size"
+    />
+
+    <path
+      d="M 50, 50 l 0.0001 0"
+      stroke-width="10"
+      stroke-linecap="round"
+      stroke="green"
+      vector-effect="non-scaling-stroke"
+    />
+    
+
+</g>
+</svg>
+<!--
+
+<svg width="921" height="1301"><g transform="scale(256) translate(6.916599514166666,8.07269355334303))"><circle cx="0.7154276391666667" cy="0.6137091783430285" r="10px" fill="green" vector-effect="non-scaling-size"></circle></g></svg>
+
+<svg width="921" height="1301"><g transform="scale(256) translate(6.916599514166666,8.07269355334303))"><path d="M 0.7154276391666667 0.6137091783430285 l 0.0001 0" vector-effect="non-scaling-stroke" stroke-width="50" stroke-linecap="round" stroke="green"></path></g></svg>
+
+-->

src/components/map/gpx-record.tsx

@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+
+import { useDB } from 'react-pouchdb';
+
+import GPX from '../../lib/gpx-parser-builder';
+
+import '../../theme/get-location.css';
+import { IonButton, IonIcon, IonItem } from '@ionic/react';
+import { recordingOutline, recording } from 'ionicons/icons';
+import { pushTrack } from '../../db/tracks';
+import {
+  startBackgroundGeolocation,
+  stopBackgroundGeolocation,
+} from '../../lib/background-geolocation';
+
+const GpxRecord: React.FC<{}> = () => {
+  const db = useDB();
+
+  const [isRecording, setIsRecording] = useState(false);
+
+  const [watcher_id, setWatcher_id] = useState();
+
+  const toggleIsRecording = () => {
+    if (isRecording) {
+      stopBackgroundGeolocation(watcher_id);
+    } else {
+      startBackgroundGeolocation().then((result) => {
+        setWatcher_id(result);
+      });
+    }
+    setIsRecording(!isRecording);
+  };
+
+  return (
+    <IonButton onClick={toggleIsRecording}>
+      {isRecording && (
+        <IonIcon slot='icon-only' icon={recording} style={{ color: 'red' }} />
+      )}
+      {!isRecording && <IonIcon slot='icon-only' icon={recordingOutline} />}
+    </IonButton>
+  );
+};
+
+export default GpxRecord;

src/components/map/map.tsx

@@ -20,6 +20,7 @@ import {
 
 import GpxImport from './gpx-import';
 import Tracks from './tracks';
+import GpxRecord from './gpx-record';
 
 const Map: react.FC<{}> = (props: {}) => {
   const dispatch = useDispatch();
@@ -55,6 +56,7 @@ const Map: react.FC<{}> = (props: {}) => {
       <IonHeader className='ion-no-border' translucent={true}>
         <IonToolbar>
           <IonButtons slot='end'>
+            <GpxRecord />
             <GpxImport />
           </IonButtons>
         </IonToolbar>

src/db/tracks.ts

@@ -18,5 +18,8 @@ export const pushTrack = (db: any, payload: any) => {
     _id = bytes_to_base64(result);
     console.log(`Digest: ${_id}`);
   }
-  db.put({ _id, type: 'Track', ...payload });
+  const doc = { _id, type: 'Track', ...payload };
+//  console.log(JSON.stringify(doc));
+  db.put(doc);
 };
+

src/lib/background-geolocation.ts

@@ -0,0 +1,104 @@
+import { BackgroundGeolocationPlugin } from '@capacitor-community/background-geolocation';
+import { registerPlugin } from '@capacitor/core';
+
+const BackgroundGeolocation = registerPlugin<BackgroundGeolocationPlugin>(
+  'BackgroundGeolocation'
+);
+
+const backgroundGeolocationConfig = {
+  // If the "backgroundMessage" option is defined, the watcher will
+  // provide location updates whether the app is in the background or the
+  // foreground. If it is not defined, location updates are only
+  // guaranteed in the foreground. This is true on both platforms.
+  // On Android, a notification must be shown to continue receiving
+  // location updates in the background. This option specifies the text of
+  // that notification.
+  backgroundMessage: 'Cancel to prevent battery drain.',
+
+  // The title of the notification mentioned above. Defaults to "Using
+  // your location".
+  backgroundTitle: 'Tracking You.',
+
+  // Whether permissions should be requested from the user automatically,
+  // if they are not already granted. Defaults to "true".
+  requestPermissions: true,
+
+  // If "true", stale locations may be delivered while the device
+  // obtains a GPS fix. You are responsible for checking the "time"
+  // property. If "false", locations are guaranteed to be up to date.
+  // Defaults to "false".
+  stale: false,
+
+  // The minimum number of metres between subsequent locations. Defaults
+  // to 0.
+  distanceFilter: 1,
+};
+
+export const startBackgroundGeolocation = async () => {
+  const locationHandler = (location: any, error: any) => {
+    console.log('com.dyomedea.dyomedea  LOG', ' - Callback');
+    if (error) {
+      if (error.code === 'NOT_AUTHORIZED') {
+        if (
+          window.confirm(
+            'This app needs your location, ' +
+              'but does not have permission.\n\n' +
+              'Open settings now?'
+          )
+        ) {
+          // It can be useful to direct the user to their device's
+          // settings when location permissions have been denied. The
+          // plugin provides the 'openSettings' method to do exactly
+          // this.
+          BackgroundGeolocation.openSettings();
+        }
+      }
+      return console.error('com.dyomedea.dyomedea  LOG', ' - error: ', error);
+    }
+    console.log(location);
+    if (location !== undefined) {
+      //setCenter([location.latitude, location.longitude]);
+      //setPosition([location.latitude, location.longitude]);
+      //   dispatch(
+      //     gpxActions.appendTrkpt({
+      //       trkKey: 'current',
+      //       trkpt: {
+      //         $: {
+      //           lat: location.latitude,
+      //           lon: location.longitude,
+      //         },
+      //       },
+      //     })
+      //   );
+    }
+
+    return console.log('com.dyomedea.dyomedea  LOG', ' - location: ', location);
+  };
+
+  var watcher_id;
+
+  console.log('com.dyomedea.dyomedea  LOG', ' - Adding the watcher');
+  await BackgroundGeolocation.addWatcher(
+    backgroundGeolocationConfig,
+    locationHandler
+  )
+    .then(function after_the_watcher_has_been_added(id) {
+      // When a watcher is no longer needed, it should be removed by calling
+      // 'removeWatcher' with an object containing its ID.
+      console.log('com.dyomedea.dyomedea  LOG', ' - Watcher added');
+      watcher_id = id;
+      /*BackgroundGeolocation.removeWatcher({
+        id: watcher_id,
+      }); */
+    })
+    .catch((reason) => {
+      console.error('com.dyomedea.dyomedea  LOG', ' - reason: ', reason);
+    });
+  return watcher_id;
+};
+
+export const stopBackgroundGeolocation = (watcher_id: any) => {
+  BackgroundGeolocation.removeWatcher({
+    id: watcher_id,
+  });
+};