Move the current location on the map while recording (#12)

This commit is contained in:
Eric van der Vlist 2022-10-02 21:00:38 +02:00
parent e103e928b6
commit 924dd47395
2 changed files with 30 additions and 32 deletions

View File

@ -23,8 +23,10 @@ import {
startBackgroundGeolocation, startBackgroundGeolocation,
stopBackgroundGeolocation, stopBackgroundGeolocation,
} from '../../lib/background-geolocation'; } from '../../lib/background-geolocation';
import { deleteCurrent, saveCurrent } from '../../db/gpx'; import { appendTrkpt, deleteCurrent, saveCurrent } from '../../db/gpx';
import { enterAnimation, leaveAnimation } from '../../lib/animation'; import { enterAnimation, leaveAnimation } from '../../lib/animation';
import { useDispatch } from 'react-redux';
import { mapActions } from '../../store/map';
const GpxRecord: React.FC<{}> = () => { const GpxRecord: React.FC<{}> = () => {
const db = useDB(); const db = useDB();
@ -54,8 +56,31 @@ const GpxRecord: React.FC<{}> = () => {
modal.current?.dismiss(); modal.current?.dismiss();
}; };
const dispatch = useDispatch();
const newLocationHandler = (location: any) => {
appendTrkpt(db, {
$: {
lat: location.latitude,
lon: location.longitude,
},
ele: location.altitude,
time: new Date(location.time).toISOString(),
extensions: {
speed: location.speed,
accuracy: location.accuracy,
},
});
dispatch(
mapActions.setCurrent({
lat: location.latitude,
lon: location.longitude,
})
);
};
const startRecording = () => { const startRecording = () => {
startBackgroundGeolocation(db).then((result) => { startBackgroundGeolocation(newLocationHandler).then((result) => {
setWatcher_id(result); setWatcher_id(result);
}); });
setIsRecording(true); setIsRecording(true);
@ -80,7 +105,6 @@ const GpxRecord: React.FC<{}> = () => {
pauseRecording(); pauseRecording();
}; };
return ( return (
<Fragment> <Fragment>
<IonButton id='open-RecordDialog'> <IonButton id='open-RecordDialog'>

View File

@ -1,6 +1,5 @@
import { BackgroundGeolocationPlugin } from '@capacitor-community/background-geolocation'; import { BackgroundGeolocationPlugin } from '@capacitor-community/background-geolocation';
import { registerPlugin } from '@capacitor/core'; import { registerPlugin } from '@capacitor/core';
import { appendTrkpt } from '../db/gpx';
const BackgroundGeolocation = registerPlugin<BackgroundGeolocationPlugin>( const BackgroundGeolocation = registerPlugin<BackgroundGeolocationPlugin>(
'BackgroundGeolocation' 'BackgroundGeolocation'
@ -35,7 +34,7 @@ const backgroundGeolocationConfig = {
distanceFilter: 5, distanceFilter: 5,
}; };
export const startBackgroundGeolocation = async (db: any) => { export const startBackgroundGeolocation = async (newLocationHandler: any) => {
const locationHandler = (location: any, error: any) => { const locationHandler = (location: any, error: any) => {
console.log('com.dyomedea.dyomedea LOG', ' - Callback'); console.log('com.dyomedea.dyomedea LOG', ' - Callback');
if (error) { if (error) {
@ -58,33 +57,8 @@ export const startBackgroundGeolocation = async (db: any) => {
} }
console.log(location); console.log(location);
if (location !== undefined) { if (location !== undefined) {
appendTrkpt(db, { newLocationHandler(location);
$: { }
lat: location.latitude,
lon: location.longitude,
},
ele: location.altitude,
time: new Date(location.time).toISOString(),
extensions: {
speed: location.speed,
accuracy: location.accuracy,
},
});
//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); return console.log('com.dyomedea.dyomedea LOG', ' - location: ', location);
}; };