417 lines
14 KiB
TypeScript
417 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { useSession } from "next-auth/react";
|
|
import { useRouter } from "next/navigation";
|
|
|
|
interface Device {
|
|
id: string;
|
|
name: string;
|
|
color: string;
|
|
}
|
|
|
|
interface PreviewRow {
|
|
datum: string;
|
|
uhrzeit: string;
|
|
latitude: string;
|
|
longitude: string;
|
|
adresse: string;
|
|
distanz: string;
|
|
geschwindigkeit: string;
|
|
geraet: string;
|
|
}
|
|
|
|
export default function ExportPage() {
|
|
const { data: session, status } = useSession();
|
|
const router = useRouter();
|
|
|
|
const [devices, setDevices] = useState<Device[]>([]);
|
|
const [selectedDevice, setSelectedDevice] = useState<string>("all");
|
|
const [startTime, setStartTime] = useState<string>("");
|
|
const [endTime, setEndTime] = useState<string>("");
|
|
const [previewData, setPreviewData] = useState<PreviewRow[]>([]);
|
|
const [totalPoints, setTotalPoints] = useState<number>(0);
|
|
const [loading, setLoading] = useState(false);
|
|
const [exporting, setExporting] = useState(false);
|
|
const [exportProgress, setExportProgress] = useState<string>("");
|
|
|
|
// Redirect if not authenticated
|
|
useEffect(() => {
|
|
if (status === "unauthenticated") {
|
|
router.push("/login");
|
|
}
|
|
}, [status, router]);
|
|
|
|
// Fetch devices
|
|
useEffect(() => {
|
|
const fetchDevices = async () => {
|
|
try {
|
|
const response = await fetch("/api/devices/public");
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
setDevices(data.devices || []);
|
|
}
|
|
} catch (err) {
|
|
console.error("Failed to fetch devices:", err);
|
|
}
|
|
};
|
|
|
|
if (status === "authenticated") {
|
|
fetchDevices();
|
|
}
|
|
}, [status]);
|
|
|
|
// Set default time range (last 7 days)
|
|
useEffect(() => {
|
|
const now = new Date();
|
|
const sevenDaysAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
|
|
|
|
// Format for datetime-local input (YYYY-MM-DDTHH:mm)
|
|
setEndTime(now.toISOString().slice(0, 16));
|
|
setStartTime(sevenDaysAgo.toISOString().slice(0, 16));
|
|
}, []);
|
|
|
|
// Generate preview
|
|
const handlePreview = async () => {
|
|
setLoading(true);
|
|
setPreviewData([]);
|
|
setTotalPoints(0);
|
|
|
|
try {
|
|
const params = new URLSearchParams();
|
|
if (selectedDevice !== "all") {
|
|
params.set("username", selectedDevice);
|
|
}
|
|
if (startTime) {
|
|
params.set("startTime", new Date(startTime).toISOString());
|
|
}
|
|
if (endTime) {
|
|
params.set("endTime", new Date(endTime).toISOString());
|
|
}
|
|
params.set("limit", "50"); // Preview only first 50
|
|
|
|
const response = await fetch(`/api/locations?${params.toString()}`);
|
|
if (!response.ok) throw new Error("Failed to fetch preview");
|
|
|
|
const data = await response.json();
|
|
const locations = data.history || [];
|
|
setTotalPoints(locations.length);
|
|
|
|
// Sort chronologically
|
|
locations.sort((a: any, b: any) =>
|
|
new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime()
|
|
);
|
|
|
|
// Build preview rows (without geocoding)
|
|
const rows: PreviewRow[] = [];
|
|
for (let i = 0; i < Math.min(locations.length, 50); i++) {
|
|
const loc = locations[i];
|
|
const lat = Number(loc.latitude);
|
|
const lon = Number(loc.longitude);
|
|
|
|
// Calculate distance
|
|
let distance = 0;
|
|
if (i > 0) {
|
|
const prevLoc = locations[i - 1];
|
|
distance = calculateDistance(
|
|
Number(prevLoc.latitude),
|
|
Number(prevLoc.longitude),
|
|
lat,
|
|
lon
|
|
);
|
|
}
|
|
|
|
const date = new Date(loc.timestamp);
|
|
rows.push({
|
|
datum: date.toLocaleDateString('de-DE'),
|
|
uhrzeit: date.toLocaleTimeString('de-DE'),
|
|
latitude: lat.toFixed(6),
|
|
longitude: lon.toFixed(6),
|
|
adresse: `${lat.toFixed(6)}, ${lon.toFixed(6)}`,
|
|
distanz: distance.toFixed(3),
|
|
geschwindigkeit: loc.speed != null ? Number(loc.speed).toFixed(1) : '-',
|
|
geraet: loc.username || 'Unbekannt',
|
|
});
|
|
}
|
|
|
|
setPreviewData(rows);
|
|
} catch (error) {
|
|
console.error("Preview error:", error);
|
|
alert("Fehler beim Laden der Vorschau");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
// Export CSV with geocoding
|
|
const handleExport = async () => {
|
|
if (previewData.length === 0) {
|
|
alert("Bitte zuerst Vorschau laden");
|
|
return;
|
|
}
|
|
|
|
const confirmed = confirm(
|
|
`${totalPoints} GPS-Punkte werden exportiert.\n\n` +
|
|
`ACHTUNG: Adressauflösung (Geocoding) kann bei vielen Punkten sehr lange dauern (ca. 1 Punkt pro Sekunde).\n\n` +
|
|
`Geschätzte Dauer: ca. ${Math.ceil(totalPoints / 60)} Minuten.\n\n` +
|
|
`Möchten Sie fortfahren?`
|
|
);
|
|
|
|
if (!confirmed) return;
|
|
|
|
setExporting(true);
|
|
setExportProgress(`Starte Export von ${totalPoints} Punkten...`);
|
|
|
|
try {
|
|
const params = new URLSearchParams();
|
|
if (selectedDevice !== "all") {
|
|
params.set("username", selectedDevice);
|
|
}
|
|
if (startTime) {
|
|
params.set("startTime", new Date(startTime).toISOString());
|
|
}
|
|
if (endTime) {
|
|
params.set("endTime", new Date(endTime).toISOString());
|
|
}
|
|
params.set("includeGeocoding", "true");
|
|
|
|
setExportProgress("Lade Daten und löse Adressen auf...");
|
|
|
|
const response = await fetch(`/api/export/csv?${params.toString()}`);
|
|
if (!response.ok) throw new Error("Export failed");
|
|
|
|
const blob = await response.blob();
|
|
const url = window.URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = `fahrtenbuch_${startTime ? new Date(startTime).toISOString().split('T')[0] : 'alle'}_${endTime ? new Date(endTime).toISOString().split('T')[0] : 'alle'}.csv`;
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
window.URL.revokeObjectURL(url);
|
|
document.body.removeChild(a);
|
|
|
|
setExportProgress("Export erfolgreich abgeschlossen!");
|
|
setTimeout(() => setExportProgress(""), 3000);
|
|
} catch (error) {
|
|
console.error("Export error:", error);
|
|
alert("Fehler beim Exportieren");
|
|
setExportProgress("");
|
|
} finally {
|
|
setExporting(false);
|
|
}
|
|
};
|
|
|
|
// Export CSV without geocoding (faster)
|
|
const handleQuickExport = async () => {
|
|
if (previewData.length === 0) {
|
|
alert("Bitte zuerst Vorschau laden");
|
|
return;
|
|
}
|
|
|
|
setExporting(true);
|
|
setExportProgress("Exportiere ohne Adressauflösung...");
|
|
|
|
try {
|
|
const params = new URLSearchParams();
|
|
if (selectedDevice !== "all") {
|
|
params.set("username", selectedDevice);
|
|
}
|
|
if (startTime) {
|
|
params.set("startTime", new Date(startTime).toISOString());
|
|
}
|
|
if (endTime) {
|
|
params.set("endTime", new Date(endTime).toISOString());
|
|
}
|
|
params.set("includeGeocoding", "false");
|
|
|
|
const response = await fetch(`/api/export/csv?${params.toString()}`);
|
|
if (!response.ok) throw new Error("Export failed");
|
|
|
|
const blob = await response.blob();
|
|
const url = window.URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = `fahrtenbuch_schnell_${startTime ? new Date(startTime).toISOString().split('T')[0] : 'alle'}_${endTime ? new Date(endTime).toISOString().split('T')[0] : 'alle'}.csv`;
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
window.URL.revokeObjectURL(url);
|
|
document.body.removeChild(a);
|
|
|
|
setExportProgress("Export erfolgreich abgeschlossen!");
|
|
setTimeout(() => setExportProgress(""), 3000);
|
|
} catch (error) {
|
|
console.error("Export error:", error);
|
|
alert("Fehler beim Exportieren");
|
|
setExportProgress("");
|
|
} finally {
|
|
setExporting(false);
|
|
}
|
|
};
|
|
|
|
if (status === "loading") {
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center">
|
|
<p>Laden...</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50 p-6">
|
|
<div className="max-w-7xl mx-auto">
|
|
<div className="bg-white rounded-lg shadow p-6 mb-6">
|
|
<h1 className="text-3xl font-bold mb-2">CSV-Export für Fahrtenbuch</h1>
|
|
<p className="text-gray-600 mb-6">
|
|
Exportieren Sie Ihre GPS-Tracking-Daten für Lexware oder andere Fahrtenbuch-Software
|
|
</p>
|
|
|
|
{/* Filters */}
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2">Gerät</label>
|
|
<select
|
|
value={selectedDevice}
|
|
onChange={(e) => setSelectedDevice(e.target.value)}
|
|
className="w-full border border-gray-300 rounded px-3 py-2"
|
|
>
|
|
<option value="all">Alle Geräte</option>
|
|
{devices.map((dev) => (
|
|
<option key={dev.id} value={dev.id}>
|
|
{dev.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2">Von</label>
|
|
<input
|
|
type="datetime-local"
|
|
value={startTime}
|
|
onChange={(e) => setStartTime(e.target.value)}
|
|
className="w-full border border-gray-300 rounded px-3 py-2"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2">Bis</label>
|
|
<input
|
|
type="datetime-local"
|
|
value={endTime}
|
|
onChange={(e) => setEndTime(e.target.value)}
|
|
className="w-full border border-gray-300 rounded px-3 py-2"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Action Buttons */}
|
|
<div className="flex gap-3 mb-6">
|
|
<button
|
|
onClick={handlePreview}
|
|
disabled={loading}
|
|
className="px-6 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:bg-gray-400"
|
|
>
|
|
{loading ? "Lädt..." : "Vorschau laden"}
|
|
</button>
|
|
|
|
<button
|
|
onClick={handleQuickExport}
|
|
disabled={exporting || previewData.length === 0}
|
|
className="px-6 py-2 bg-green-600 text-white rounded hover:bg-green-700 disabled:bg-gray-400"
|
|
>
|
|
Schnell-Export (ohne Adressen)
|
|
</button>
|
|
|
|
<button
|
|
onClick={handleExport}
|
|
disabled={exporting || previewData.length === 0}
|
|
className="px-6 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700 disabled:bg-gray-400"
|
|
>
|
|
Vollständiger Export (mit Adressen)
|
|
</button>
|
|
</div>
|
|
|
|
{/* Progress */}
|
|
{exportProgress && (
|
|
<div className="mb-4 p-4 bg-blue-50 border border-blue-200 rounded">
|
|
<p className="text-blue-800">{exportProgress}</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Info */}
|
|
{totalPoints > 0 && (
|
|
<div className="mb-4 p-4 bg-yellow-50 border border-yellow-200 rounded">
|
|
<p className="text-sm text-yellow-800">
|
|
<strong>Gefunden:</strong> {totalPoints} GPS-Punkte im gewählten Zeitraum
|
|
{totalPoints > 50 && " (Vorschau zeigt erste 50)"}
|
|
</p>
|
|
<p className="text-sm text-yellow-800 mt-1">
|
|
<strong>Hinweis:</strong> Der vollständige Export mit Adressauflösung dauert ca. {Math.ceil(totalPoints / 60)} Minuten.
|
|
Für schnelle Exporte nutzen Sie den Schnell-Export.
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Preview Table */}
|
|
{previewData.length > 0 && (
|
|
<div className="bg-white rounded-lg shadow p-6">
|
|
<h2 className="text-xl font-bold mb-4">Vorschau (erste 50 Zeilen)</h2>
|
|
<div className="overflow-x-auto">
|
|
<table className="min-w-full divide-y divide-gray-200">
|
|
<thead className="bg-gray-50">
|
|
<tr>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Datum</th>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Uhrzeit</th>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Latitude</th>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Longitude</th>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Adresse</th>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Distanz (km)</th>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Geschw. (km/h)</th>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Gerät</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="bg-white divide-y divide-gray-200">
|
|
{previewData.map((row, idx) => (
|
|
<tr key={idx} className="hover:bg-gray-50">
|
|
<td className="px-4 py-3 text-sm">{row.datum}</td>
|
|
<td className="px-4 py-3 text-sm">{row.uhrzeit}</td>
|
|
<td className="px-4 py-3 text-sm font-mono text-xs">{row.latitude}</td>
|
|
<td className="px-4 py-3 text-sm font-mono text-xs">{row.longitude}</td>
|
|
<td className="px-4 py-3 text-sm text-gray-600">{row.adresse}</td>
|
|
<td className="px-4 py-3 text-sm">{row.distanz}</td>
|
|
<td className="px-4 py-3 text-sm">{row.geschwindigkeit}</td>
|
|
<td className="px-4 py-3 text-sm">{row.geraet}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Haversine distance calculation (client-side for preview)
|
|
function calculateDistance(lat1: number, lon1: number, lat2: number, lon2: number): number {
|
|
const R = 6371;
|
|
const dLat = toRadians(lat2 - lat1);
|
|
const dLon = toRadians(lon2 - lon1);
|
|
|
|
const a =
|
|
Math.sin(dLat / 2) * Math.sin(dLat / 2) +
|
|
Math.cos(toRadians(lat1)) *
|
|
Math.cos(toRadians(lat2)) *
|
|
Math.sin(dLon / 2) *
|
|
Math.sin(dLon / 2);
|
|
|
|
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
|
|
return R * c;
|
|
}
|
|
|
|
function toRadians(degrees: number): number {
|
|
return degrees * (Math.PI / 180);
|
|
}
|