ynerant/traintrape-moi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Stockage de la géolocalisation en arrière-plan et utilisation sur la carte

Browse Source
This commit is contained in:
Emmy D'Anello
2024-12-06 21:49:28 +01:00
parent 91963e378d
commit d08dcb9720
11 changed files with 257 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
client/app/(tabs)/index.tsx
View File

@ -1,21 +1,18 @@
import { StyleSheet } from 'react-native'
import { ThemedView } from '@/components/ThemedView'
import { useEffect, useState } from 'react'
import "maplibre-gl/dist/maplibre-gl.css"
import * as Location from 'expo-location'
import Map from '@/components/map'
import { useBackgroundPermissions } from 'expo-location'
import Map from '@/components/Map'
import { ThemedText } from '@/components/ThemedText'
export default function MapScreen() {
const [location, setLocation] = useState<Location.LocationObject | null>(null)
const [locationAccessGranted, setLocationAccessGranted] = useState(false)
const [backgroundStatus, requestBackgroundPermission] = useBackgroundPermissions()
if (!backgroundStatus?.granted && backgroundStatus?.canAskAgain)
requestBackgroundPermission()
return (
<ThemedView style={styles.page}>
{locationAccessGranted ? <Map location={location} /> : <ThemedText>La géolocalisation est requise pour utiliser la carte.</ThemedText>}
{backgroundStatus?.granted ? <Map /> : <ThemedText>La géolocalisation est requise pour utiliser la carte.</ThemedText>}
</ThemedView>
)
}

80
client/app/_layout.tsx
View File

@ -1,74 +1,24 @@
import { Dispatch, useEffect, useState } from 'react'
import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native'
import { Stack } from "expo-router"
import { useColorScheme } from '@/hooks/useColorScheme'
import { StatusBar } from 'expo-status-bar'
import * as Location from 'expo-location'
import * as TaskManager from 'expo-task-manager'
import { Platform } from 'react-native'
TaskManager.defineTask("fetch-geolocation", async ({ data, error }: any) => {
if (error) {
console.error(error)
return
}
const { locations } = data
for (let location of locations) {
console.log(location)
}
})
async function manageGelocation(setLocation: Dispatch<Location.LocationObject | null>) {
await Location.enableNetworkProviderAsync().catch(error => alert(error))
const { status: foregroundStatus } = await Location.requestForegroundPermissionsAsync()
if (foregroundStatus === 'granted') {
setLocation(await Location.getLastKnownPositionAsync())
const { status: backgroundStatus } = await Location.requestBackgroundPermissionsAsync()
if (backgroundStatus === 'granted') {
if (Platform.OS !== "web") {
if (!await Location.hasStartedLocationUpdatesAsync("fetch-geolocation")) {
await Location.startLocationUpdatesAsync("fetch-geolocation", {
accuracy: Location.Accuracy.BestForNavigation,
activityType: Location.ActivityType.OtherNavigation,
deferredUpdatesInterval: 100,
foregroundService: {
killServiceOnDestroy: false,
notificationBody: "Géolocalisation activée pour « Traintrape-moi »",
notificationTitle: "Traintrape-moi",
notificationColor: "#FFFF00",
}
})
}
}
else {
await Location.watchPositionAsync({accuracy: Location.Accuracy.BestForNavigation}, location_nouveau => setLocation(location_nouveau))
}
}
else {
alert("Vous devez activer votre géolocalisation en arrière-plan pour utiliser l'application.")
}
}
else {
alert("Vous devez activer votre géolocalisation pour utiliser l'application.")
}
}
import { Provider } from 'react-redux'
import store from '@/utils/store'
import { useStartGeolocationServiceEffect } from '@/utils/geolocation'
export default function RootLayout() {
const [location, setLocation] = useState<Location.LocationObject | null>(null)
useEffect(() => {
manageGelocation(setLocation)
return () => {
Location.stopLocationUpdatesAsync("fetch-geolocation")
}
}, [])
useStartGeolocationServiceEffect()
const colorScheme = useColorScheme()
return <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
<Stack>
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
<Stack.Screen name="+not-found" />
</Stack>
<StatusBar style="auto" />
</ThemeProvider>
return (
<Provider store={store}>
<ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
<Stack>
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
<Stack.Screen name="+not-found" />
</Stack>
<StatusBar style="auto" />
</ThemeProvider>
</Provider>
)
}