Naprawa obsługi GPX, czyszczenie projektu, naprawa błędów związanych z obrazami
This commit is contained in:
Arek Bykowski
@@ -1,128 +1 @@
|
||||
import React, { useRef, useState } from 'react';
|
||||
import { WizardState } from '../types';
|
||||
import { UploadCloud, FileJson, AlertCircle } from 'lucide-react';
|
||||
import { parseGpxFile } from '../utils/gpxUtils';
|
||||
|
||||
interface StepDataProps {
|
||||
data: WizardState;
|
||||
updateData: (updates: Partial<WizardState>) => void;
|
||||
}
|
||||
|
||||
const StepData: React.FC<StepDataProps> = ({ data, updateData }) => {
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [isParsing, setIsParsing] = useState(false);
|
||||
|
||||
const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
if (!file.name.toLowerCase().endsWith('.gpx')) {
|
||||
setError('Proszę wybrać plik .gpx');
|
||||
return;
|
||||
}
|
||||
|
||||
setError(null);
|
||||
setIsParsing(true);
|
||||
|
||||
try {
|
||||
const stats = await parseGpxFile(file);
|
||||
updateData({ stats });
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
setError('Błąd parsowania pliku GPX. Spróbuj innego pliku lub wpisz dane ręcznie.');
|
||||
} finally {
|
||||
setIsParsing(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleStatsChange = (key: keyof typeof data.stats, value: string) => {
|
||||
updateData({
|
||||
stats: {
|
||||
...data.stats,
|
||||
[key]: value
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-10 animate-fade-in">
|
||||
<div>
|
||||
<h2 className="text-3xl font-bold tracking-tight text-gray-900 mb-3">Dane Aktywności</h2>
|
||||
<p className="text-gray-500 mb-8 text-lg">Wgraj plik GPX lub wpisz dane ręcznie.</p>
|
||||
</div>
|
||||
|
||||
{/* Upload Zone */}
|
||||
<div
|
||||
className={`border-2 border-dashed rounded-md p-10 flex flex-col items-center justify-center text-center transition-all cursor-pointer group ${
|
||||
error ? 'border-red-300 bg-red-50' : 'border-gray-200 hover:border-[#EA4420] hover:bg-[#EA4420]/5'
|
||||
}`}
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
>
|
||||
<input
|
||||
type="file"
|
||||
ref={fileInputRef}
|
||||
onChange={handleFileChange}
|
||||
accept=".gpx"
|
||||
className="hidden"
|
||||
/>
|
||||
|
||||
{isParsing ? (
|
||||
<div className="animate-pulse flex flex-col items-center">
|
||||
<FileJson size={48} className="text-[#EA4420] mb-4 stroke-1" />
|
||||
<p className="text-[#EA4420] font-semibold">Analizowanie pliku...</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<UploadCloud size={48} className="text-gray-300 group-hover:text-[#EA4420] mb-4 stroke-1 transition-colors" />
|
||||
<p className="text-gray-900 font-bold text-lg">Kliknij, aby wgrać plik GPX</p>
|
||||
<p className="text-gray-500 text-sm mt-2">lub przeciągnij i upuść tutaj</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="flex items-center space-x-2 text-red-600 bg-red-50 p-4 rounded-md text-sm border border-red-100">
|
||||
<AlertCircle size={18} />
|
||||
<span className="font-medium">{error}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Manual Override Inputs */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<label className="block text-sm font-bold text-gray-700 mb-2">Dystans</label>
|
||||
<input
|
||||
type="text"
|
||||
value={data.stats.distance}
|
||||
onChange={(e) => handleStatsChange('distance', e.target.value)}
|
||||
className="w-full p-4 border border-gray-200 rounded-md focus:ring-1 focus:ring-[#EA4420] focus:border-[#EA4420] outline-none transition-all font-medium text-gray-900 placeholder-gray-300"
|
||||
placeholder="np. 12.5 km"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-bold text-gray-700 mb-2">Czas trwania</label>
|
||||
<input
|
||||
type="text"
|
||||
value={data.stats.duration}
|
||||
onChange={(e) => handleStatsChange('duration', e.target.value)}
|
||||
className="w-full p-4 border border-gray-200 rounded-md focus:ring-1 focus:ring-[#EA4420] focus:border-[#EA4420] outline-none transition-all font-medium text-gray-900 placeholder-gray-300"
|
||||
placeholder="np. 1h 45m"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-bold text-gray-700 mb-2">Przewyższenia</label>
|
||||
<input
|
||||
type="text"
|
||||
value={data.stats.elevation}
|
||||
onChange={(e) => handleStatsChange('elevation', e.target.value)}
|
||||
className="w-full p-4 border border-gray-200 rounded-md focus:ring-1 focus:ring-[#EA4420] focus:border-[#EA4420] outline-none transition-all font-medium text-gray-900 placeholder-gray-300"
|
||||
placeholder="np. 350m"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default StepData;
|
||||
// Unused. Logic moved to StepDetails.tsx
|
||||
@@ -3,6 +3,7 @@ import React, { useRef, useState, useEffect } from 'react';
|
||||
import { WizardState } from '../types';
|
||||
import { UploadCloud, FileText, X, Image as ImageIcon, Sparkles, Loader2, MapPin, Navigation, Plus, Trash2, Flag, Target, AlertCircle, CheckCircle2, Car, Footprints, Eye } from 'lucide-react';
|
||||
import { processFile } from '../utils/fileUtils';
|
||||
import { parseGpxFile } from '../utils/gpxUtils';
|
||||
import { getEnvVar } from '../utils/envUtils';
|
||||
import { UI_TEXT } from '../_EDITABLE_CONFIG/ui_text';
|
||||
|
||||
@@ -82,6 +83,7 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [mapError, setMapError] = useState<{title: string, msg: string} | null>(null);
|
||||
const [scriptLoaded, setScriptLoaded] = useState(false);
|
||||
const [isParsingGpx, setIsParsingGpx] = useState(false);
|
||||
|
||||
// State for GPX Text Preview
|
||||
const [showGpxPreview, setShowGpxPreview] = useState(false);
|
||||
@@ -162,8 +164,29 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
|
||||
return;
|
||||
}
|
||||
setError(null);
|
||||
|
||||
// 1. Process files for display/Gemini upload
|
||||
const processedFiles = await Promise.all(newFiles.map(processFile));
|
||||
updateData(prev => ({ files: [...prev.files, ...processedFiles] }));
|
||||
|
||||
// 2. Scan for GPX to parse stats
|
||||
const gpxFile = newFiles.find(f => f.name.toLowerCase().endsWith('.gpx'));
|
||||
if (gpxFile) {
|
||||
setIsParsingGpx(true);
|
||||
try {
|
||||
const result = await parseGpxFile(gpxFile);
|
||||
updateData(prev => ({
|
||||
...prev,
|
||||
stats: result.stats,
|
||||
gpxSummary: result.richSummary
|
||||
}));
|
||||
} catch (gpxErr) {
|
||||
console.error(gpxErr);
|
||||
setError("Wgrano plik, ale nie udało się odczytać statystyk GPX. Sprawdź format pliku.");
|
||||
} finally {
|
||||
setIsParsingGpx(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const removeFile = (id: string) => {
|
||||
@@ -218,34 +241,39 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
|
||||
const isTripModeValid = data.eventType !== 'trip' || (data.tripData && data.tripData.travelMode !== null);
|
||||
const isReadyToGenerate = data.title && isTripModeValid;
|
||||
|
||||
// Decide what text to show in preview
|
||||
const previewText = data.gpxSummary
|
||||
? data.gpxSummary
|
||||
: `DYSTANS: ${data.stats.distance || "0"}\nCZAS TRWANIA: ${data.stats.duration || "0"}\nPRZEWYŻSZENIA: ${data.stats.elevation || "0"}`;
|
||||
|
||||
return (
|
||||
<div className="space-y-10 animate-fade-in relative">
|
||||
|
||||
{/* GPX PREVIEW MODAL */}
|
||||
{showGpxPreview && (
|
||||
<div className="fixed inset-0 z-50 bg-black/50 flex items-center justify-center p-4 backdrop-blur-sm animate-fade-in">
|
||||
<div className="bg-white rounded-lg shadow-xl max-w-lg w-full overflow-hidden flex flex-col max-h-[80vh]">
|
||||
<div className="bg-white rounded-lg shadow-xl max-w-2xl w-full overflow-hidden flex flex-col max-h-[85vh]">
|
||||
<div className="p-4 border-b border-gray-100 flex justify-between items-center bg-gray-50">
|
||||
<h3 className="font-bold text-gray-900 flex items-center gap-2">
|
||||
<FileText size={18} className="text-[#EA4420]" />
|
||||
Podgląd kontekstu GPX
|
||||
Podgląd danych dla AI (Context)
|
||||
</h3>
|
||||
<button onClick={() => setShowGpxPreview(false)} className="text-gray-400 hover:text-gray-600">
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="p-4 overflow-y-auto font-mono text-xs text-gray-700 bg-gray-50/50">
|
||||
<p className="mb-2 text-gray-400 font-sans uppercase font-bold tracking-wider">To widzi AI:</p>
|
||||
<div className="bg-white border border-gray-200 p-3 rounded">
|
||||
<p>DYSTANS: {data.stats.distance || "0"}</p>
|
||||
<p>CZAS TRWANIA: {data.stats.duration || "0"}</p>
|
||||
<p>PRZEWYŻSZENIA: {data.stats.elevation || "0"}</p>
|
||||
<div className="p-0 overflow-y-auto bg-gray-50/50 flex-1">
|
||||
<div className="p-4">
|
||||
<p className="mb-2 text-gray-400 font-sans uppercase font-bold tracking-wider text-xs">Poniższa treść zostanie dołączona do promptu:</p>
|
||||
<pre className="bg-white border border-gray-200 p-4 rounded text-xs font-mono text-gray-700 whitespace-pre-wrap overflow-x-auto shadow-sm">
|
||||
{previewText}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 border-t border-gray-100 flex justify-end">
|
||||
<div className="p-4 border-t border-gray-100 flex justify-end bg-white">
|
||||
<button
|
||||
onClick={() => setShowGpxPreview(false)}
|
||||
className="px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded text-sm font-bold transition-colors"
|
||||
className="px-6 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded text-sm font-bold transition-colors"
|
||||
>
|
||||
Zamknij
|
||||
</button>
|
||||
@@ -484,9 +512,18 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
|
||||
accept=".gpx,.pdf,image/*"
|
||||
className="hidden"
|
||||
/>
|
||||
<UploadCloud size={32} className="text-gray-300 group-hover:text-[#EA4420] mb-3 transition-colors" />
|
||||
<p className="text-gray-600 font-medium">{UI_TEXT.stepDetails.fields.filesDrop}</p>
|
||||
<p className="text-gray-400 text-xs mt-1">{UI_TEXT.stepDetails.fields.filesSub}</p>
|
||||
{isParsingGpx ? (
|
||||
<div className="flex flex-col items-center animate-pulse">
|
||||
<Loader2 size={32} className="text-[#EA4420] animate-spin mb-2" />
|
||||
<p className="text-gray-900 font-bold">Analizowanie GPX...</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<UploadCloud size={32} className="text-gray-300 group-hover:text-[#EA4420] mb-3 transition-colors" />
|
||||
<p className="text-gray-600 font-medium">{UI_TEXT.stepDetails.fields.filesDrop}</p>
|
||||
<p className="text-gray-400 text-xs mt-1">{UI_TEXT.stepDetails.fields.filesSub}</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{error && <p className="text-red-500 text-sm mt-2">{error}</p>}
|
||||
@@ -514,7 +551,7 @@ const StepDetails: React.FC<StepDetailsProps> = ({ data, updateData, onGenerate,
|
||||
</div>
|
||||
|
||||
{/* GPX Preview Button */}
|
||||
{(data.stats.distance || data.stats.duration || data.files.some(f => f.file.name.endsWith('.gpx'))) && (
|
||||
{(data.gpxSummary || data.stats.distance || data.stats.duration) && (
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
onClick={() => setShowGpxPreview(true)}
|
||||
|
||||
Reference in New Issue
Block a user