WFDASHDRIVER-APP/components/LocationTracker.tsx
SJCoetz db10eb95c7 Add PWA support and UI redesign
Add full PWA support (icons, manifest, service worker, pwa lib and bridge) and introduce install/offline UI. Generate app icons via a new scripts/generate-icons.js and include multiple icon sizes in public/icons; update manifest and layout head meta/preconnect. Revamp global styles (globals.css) with new utilities, animations, spacing for bottom nav, card shadows, skeletons and accessibility tweaks. Polish major screens (login, collections, map, settings) with improved headers, loading states, touch/press feedback, and layout adjustments; add new components (InstallPrompt, OfflineIndicator, PWABridge) and update various components to match new visual/UX patterns. Update Dockerfile to generate icons and use Next.js static export output (/out) for nginx, and bump package setup to support icon generation.
2026-05-27 00:34:50 +02:00

92 lines
3 KiB
TypeScript

'use client';
import { useEffect, useRef } from 'react';
import { getSettings, saveDriverLocation, isAuthenticated } from '@/lib/pocketbase';
export default function LocationTracker() {
const watchRef = useRef<number | null>(null);
const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
const wakeLockRef = useRef<WakeLockSentinel | null>(null);
useEffect(() => {
if (!('geolocation' in navigator)) return;
const settings = getSettings();
const intervalMs = Math.max(30000, settings.locationInterval * 1000);
const sendLocation = (position: GeolocationPosition) => {
if (!isAuthenticated()) return;
if (position.coords.accuracy > settings.minimumAccuracy) return;
const auth = JSON.parse(localStorage.getItem('pocketbase_auth') || '{}');
const user = auth?.model;
if (!user) return;
saveDriverLocation({
driver: user.id,
latitude: position.coords.latitude,
longitude: position.coords.longitude,
accuracy: position.coords.accuracy || undefined,
altitude: position.coords.altitude || undefined,
speed: position.coords.speed || undefined,
heading: position.coords.heading || undefined,
timestamp: new Date().toISOString(),
});
};
// 1. watchPosition keeps GPS active (helps Android stay alive longer)
watchRef.current = navigator.geolocation.watchPosition(
sendLocation,
() => {},
{
enableHighAccuracy: settings.enableHighAccuracy,
maximumAge: 5000, // fresh GPS every 5s
timeout: 30000,
}
);
// 2. Interval fallback (for when watchPosition is throttled)
intervalRef.current = setInterval(() => {
navigator.geolocation.getCurrentPosition(
sendLocation,
() => {},
{ enableHighAccuracy: settings.enableHighAccuracy, maximumAge: intervalMs, timeout: 30000 }
);
}, intervalMs);
// 3. Screen Wake Lock — keeps phone awake while app is open
if ('wakeLock' in navigator) {
navigator.wakeLock.request('screen')
.then((lock) => { wakeLockRef.current = lock; })
.catch(() => {});
// Re-acquire if page regains focus
const onFocus = () => {
if (!wakeLockRef.current) {
navigator.wakeLock.request('screen')
.then((lock) => { wakeLockRef.current = lock; })
.catch(() => {});
}
};
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'visible') onFocus();
});
}
return () => {
if (watchRef.current !== null) {
navigator.geolocation.clearWatch(watchRef.current);
watchRef.current = null;
}
if (intervalRef.current !== null) {
clearInterval(intervalRef.current);
intervalRef.current = null;
}
if (wakeLockRef.current) {
wakeLockRef.current.release();
wakeLockRef.current = null;
}
};
}, []);
return null;
}