feat: Simplify Google Maps import - accept ZIP files directly
- Users can now upload the ZIP file directly from Google Takeout - No need to extract the ZIP first - Simplified 3-step instructions with direct link to Takeout - Added JSZip dependency for ZIP processing - Auto-detects saved places JSON in various ZIP structures - Shows loading spinner while processing Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
fb38a07e37
commit
3f37d92aa0
|
|
@ -8,6 +8,7 @@
|
|||
"name": "rmaps-online",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"jszip": "^3.10.1",
|
||||
"maplibre-gl": "^5.0.0",
|
||||
"nanoid": "^5.0.9",
|
||||
"next": "^14.2.28",
|
||||
|
|
@ -1899,6 +1900,11 @@
|
|||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/core-util-is": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
|
||||
"integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
|
||||
},
|
||||
"node_modules/cross-spawn": {
|
||||
"version": "7.0.6",
|
||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
|
||||
|
|
@ -3338,6 +3344,11 @@
|
|||
"node": ">= 4"
|
||||
}
|
||||
},
|
||||
"node_modules/immediate": {
|
||||
"version": "3.0.6",
|
||||
"resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
|
||||
"integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ=="
|
||||
},
|
||||
"node_modules/import-fresh": {
|
||||
"version": "3.3.1",
|
||||
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
|
||||
|
|
@ -3381,7 +3392,6 @@
|
|||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
|
||||
"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
|
||||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/internal-slot": {
|
||||
|
|
@ -3970,6 +3980,17 @@
|
|||
"node": ">=4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/jszip": {
|
||||
"version": "3.10.1",
|
||||
"resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
|
||||
"integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
|
||||
"dependencies": {
|
||||
"lie": "~3.3.0",
|
||||
"pako": "~1.0.2",
|
||||
"readable-stream": "~2.3.6",
|
||||
"setimmediate": "^1.0.5"
|
||||
}
|
||||
},
|
||||
"node_modules/kdbush": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/kdbush/-/kdbush-4.0.2.tgz",
|
||||
|
|
@ -4020,6 +4041,14 @@
|
|||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/lie": {
|
||||
"version": "3.3.0",
|
||||
"resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
|
||||
"integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
|
||||
"dependencies": {
|
||||
"immediate": "~3.0.5"
|
||||
}
|
||||
},
|
||||
"node_modules/lilconfig": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
|
||||
|
|
@ -4576,6 +4605,11 @@
|
|||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/pako": {
|
||||
"version": "1.0.11",
|
||||
"resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
|
||||
"integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="
|
||||
},
|
||||
"node_modules/parent-module": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
|
||||
|
|
@ -4902,6 +4936,11 @@
|
|||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/process-nextick-args": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
|
||||
"integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
|
||||
},
|
||||
"node_modules/prop-types": {
|
||||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
|
|
@ -4999,6 +5038,25 @@
|
|||
"pify": "^2.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/readable-stream": {
|
||||
"version": "2.3.8",
|
||||
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
|
||||
"integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
|
||||
"dependencies": {
|
||||
"core-util-is": "~1.0.0",
|
||||
"inherits": "~2.0.3",
|
||||
"isarray": "~1.0.0",
|
||||
"process-nextick-args": "~2.0.0",
|
||||
"safe-buffer": "~5.1.1",
|
||||
"string_decoder": "~1.1.1",
|
||||
"util-deprecate": "~1.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/readable-stream/node_modules/isarray": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
|
||||
"integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
|
||||
},
|
||||
"node_modules/readdirp": {
|
||||
"version": "3.6.0",
|
||||
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
|
||||
|
|
@ -5206,6 +5264,11 @@
|
|||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/safe-buffer": {
|
||||
"version": "5.1.2",
|
||||
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
|
||||
"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
|
||||
},
|
||||
"node_modules/safe-push-apply": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz",
|
||||
|
|
@ -5312,6 +5375,11 @@
|
|||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/setimmediate": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
|
||||
"integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA=="
|
||||
},
|
||||
"node_modules/shebang-command": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
|
||||
|
|
@ -5462,6 +5530,14 @@
|
|||
"node": ">=10.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/string_decoder": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
|
||||
"integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
|
||||
"dependencies": {
|
||||
"safe-buffer": "~5.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/string-width": {
|
||||
"version": "5.1.2",
|
||||
"resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
|
||||
|
|
@ -6174,7 +6250,6 @@
|
|||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
|
||||
"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/which": {
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
"type-check": "tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"jszip": "^3.10.1",
|
||||
"maplibre-gl": "^5.0.0",
|
||||
"nanoid": "^5.0.9",
|
||||
"next": "^14.2.28",
|
||||
|
|
|
|||
|
|
@ -1,12 +1,11 @@
|
|||
'use client';
|
||||
|
||||
import { useState, useCallback, useRef } from 'react';
|
||||
import JSZip from 'jszip';
|
||||
import type { WaypointType } from '@/types';
|
||||
import {
|
||||
parseGoogleMapsGeoJSON,
|
||||
validateFileSize,
|
||||
formatFileSize,
|
||||
MAX_FILE_SIZE,
|
||||
type ParsedPlace,
|
||||
} from '@/lib/googleMapsParser';
|
||||
|
||||
|
|
@ -26,46 +25,117 @@ export interface ImportedPlace {
|
|||
|
||||
type ImportStep = 'upload' | 'preview' | 'success';
|
||||
|
||||
const MAX_FILE_SIZE = 50 * 1024 * 1024; // 50MB for ZIP files
|
||||
|
||||
export default function ImportModal({ onClose, onImport }: ImportModalProps) {
|
||||
const [step, setStep] = useState<ImportStep>('upload');
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const [isProcessing, setIsProcessing] = useState(false);
|
||||
const [parsedPlaces, setParsedPlaces] = useState<ParsedPlace[]>([]);
|
||||
const [selectedPlaces, setSelectedPlaces] = useState<Set<number>>(new Set());
|
||||
const [importedCount, setImportedCount] = useState(0);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
// Find JSON file with saved places in a ZIP
|
||||
const findSavedPlacesInZip = async (zip: JSZip): Promise<string | null> => {
|
||||
const possibleNames = [
|
||||
'Saved Places.json',
|
||||
'saved_places.json',
|
||||
'SavedPlaces.json',
|
||||
];
|
||||
|
||||
// First, try exact matches in common locations
|
||||
for (const name of possibleNames) {
|
||||
// Try root level
|
||||
if (zip.files[name]) {
|
||||
return await zip.files[name].async('string');
|
||||
}
|
||||
// Try in Takeout/Maps folder
|
||||
const takeoutPath = `Takeout/Maps (your places)/${name}`;
|
||||
if (zip.files[takeoutPath]) {
|
||||
return await zip.files[takeoutPath].async('string');
|
||||
}
|
||||
const takeoutPath2 = `Takeout/Maps/${name}`;
|
||||
if (zip.files[takeoutPath2]) {
|
||||
return await zip.files[takeoutPath2].async('string');
|
||||
}
|
||||
}
|
||||
|
||||
// Search for any .json file that looks like saved places
|
||||
for (const [path, file] of Object.entries(zip.files)) {
|
||||
if (file.dir) continue;
|
||||
if (path.toLowerCase().includes('saved') && path.endsWith('.json')) {
|
||||
return await file.async('string');
|
||||
}
|
||||
}
|
||||
|
||||
// Last resort: find any GeoJSON file
|
||||
for (const [path, file] of Object.entries(zip.files)) {
|
||||
if (file.dir) continue;
|
||||
if (path.endsWith('.json') || path.endsWith('.geojson')) {
|
||||
const content = await file.async('string');
|
||||
// Check if it's a FeatureCollection (GeoJSON)
|
||||
if (content.includes('"FeatureCollection"')) {
|
||||
return content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
// Process the uploaded file
|
||||
const processFile = useCallback(async (file: File) => {
|
||||
setError(null);
|
||||
setIsProcessing(true);
|
||||
|
||||
// Validate file size
|
||||
if (!validateFileSize(file)) {
|
||||
if (file.size > MAX_FILE_SIZE) {
|
||||
setError(`File too large (${formatFileSize(file.size)}). Maximum size is ${formatFileSize(MAX_FILE_SIZE)}.`);
|
||||
return;
|
||||
}
|
||||
|
||||
// Validate file type
|
||||
if (!file.name.endsWith('.json') && !file.name.endsWith('.geojson')) {
|
||||
setError('Please upload a .json or .geojson file.');
|
||||
setIsProcessing(false);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const text = await file.text();
|
||||
const result = parseGoogleMapsGeoJSON(text);
|
||||
let jsonContent: string;
|
||||
|
||||
if (file.name.endsWith('.zip')) {
|
||||
// Handle ZIP file
|
||||
const zip = await JSZip.loadAsync(file);
|
||||
const found = await findSavedPlacesInZip(zip);
|
||||
|
||||
if (!found) {
|
||||
setError('Could not find saved places in this ZIP. Make sure you exported "Saved" from Google Maps.');
|
||||
setIsProcessing(false);
|
||||
return;
|
||||
}
|
||||
jsonContent = found;
|
||||
} else if (file.name.endsWith('.json') || file.name.endsWith('.geojson')) {
|
||||
// Handle direct JSON file
|
||||
jsonContent = await file.text();
|
||||
} else {
|
||||
setError('Please upload a .zip, .json, or .geojson file.');
|
||||
setIsProcessing(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const result = parseGoogleMapsGeoJSON(jsonContent);
|
||||
|
||||
if (!result.success) {
|
||||
setError(result.error || 'Failed to parse file.');
|
||||
setIsProcessing(false);
|
||||
return;
|
||||
}
|
||||
|
||||
setParsedPlaces(result.places);
|
||||
// Select all places by default
|
||||
setSelectedPlaces(new Set(result.places.map((_, i) => i)));
|
||||
setStep('preview');
|
||||
} catch {
|
||||
} catch (err) {
|
||||
console.error('File processing error:', err);
|
||||
setError('Failed to read file. Please try again.');
|
||||
} finally {
|
||||
setIsProcessing(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
|
|
@ -83,7 +153,6 @@ export default function ImportModal({ onClose, onImport }: ImportModalProps) {
|
|||
[processFile]
|
||||
);
|
||||
|
||||
// Handle drag events
|
||||
const handleDragOver = (e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
setIsDragging(true);
|
||||
|
|
@ -94,7 +163,6 @@ export default function ImportModal({ onClose, onImport }: ImportModalProps) {
|
|||
setIsDragging(false);
|
||||
};
|
||||
|
||||
// Handle file input change
|
||||
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const files = e.target.files;
|
||||
if (files && files.length > 0) {
|
||||
|
|
@ -102,7 +170,6 @@ export default function ImportModal({ onClose, onImport }: ImportModalProps) {
|
|||
}
|
||||
};
|
||||
|
||||
// Toggle individual place selection
|
||||
const togglePlace = (index: number) => {
|
||||
const newSelected = new Set(selectedPlaces);
|
||||
if (newSelected.has(index)) {
|
||||
|
|
@ -113,7 +180,6 @@ export default function ImportModal({ onClose, onImport }: ImportModalProps) {
|
|||
setSelectedPlaces(newSelected);
|
||||
};
|
||||
|
||||
// Select/deselect all
|
||||
const toggleAll = () => {
|
||||
if (selectedPlaces.size === parsedPlaces.length) {
|
||||
setSelectedPlaces(new Set());
|
||||
|
|
@ -122,7 +188,6 @@ export default function ImportModal({ onClose, onImport }: ImportModalProps) {
|
|||
}
|
||||
};
|
||||
|
||||
// Import selected places
|
||||
const handleImport = () => {
|
||||
const placesToImport: ImportedPlace[] = [];
|
||||
|
||||
|
|
@ -146,7 +211,6 @@ export default function ImportModal({ onClose, onImport }: ImportModalProps) {
|
|||
}
|
||||
};
|
||||
|
||||
// Go back to upload step
|
||||
const handleBack = () => {
|
||||
setStep('upload');
|
||||
setParsedPlaces([]);
|
||||
|
|
@ -162,18 +226,13 @@ export default function ImportModal({ onClose, onImport }: ImportModalProps) {
|
|||
<div className="room-panel rounded-2xl p-6 w-full max-w-md max-h-[90vh] overflow-y-auto">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-xl font-bold">Import Places</h2>
|
||||
<h2 className="text-xl font-bold">Import from Google Maps</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-1 rounded hover:bg-white/10 transition-colors"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -181,26 +240,44 @@ export default function ImportModal({ onClose, onImport }: ImportModalProps) {
|
|||
{/* Upload Step */}
|
||||
{step === 'upload' && (
|
||||
<div className="space-y-4">
|
||||
{/* Instructions */}
|
||||
<div className="bg-white/5 rounded-lg p-4 text-sm">
|
||||
<p className="font-medium mb-2">How to export from Google Maps:</p>
|
||||
<ol className="list-decimal list-inside space-y-1 text-white/70">
|
||||
<li>
|
||||
Go to{' '}
|
||||
{/* Simple Instructions */}
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-6 h-6 rounded-full bg-rmaps-primary/20 flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<span className="text-xs font-bold text-rmaps-primary">1</span>
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
href="https://takeout.google.com"
|
||||
href="https://takeout.google.com/takeout/custom/maps"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-rmaps-primary hover:underline"
|
||||
className="text-rmaps-primary hover:underline font-medium"
|
||||
>
|
||||
Google Takeout
|
||||
Open Google Takeout →
|
||||
</a>
|
||||
</li>
|
||||
<li>Select only "Saved" under Maps</li>
|
||||
<li>Export and download the ZIP</li>
|
||||
<li>Extract and find "Saved Places.json"</li>
|
||||
<li>Upload that file here</li>
|
||||
</ol>
|
||||
<p className="text-white/50 text-sm">Select "Saved Places" and export</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-6 h-6 rounded-full bg-rmaps-primary/20 flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<span className="text-xs font-bold text-rmaps-primary">2</span>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium">Download the ZIP file</p>
|
||||
<p className="text-white/50 text-sm">Google will email you when ready</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-6 h-6 rounded-full bg-rmaps-primary/20 flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<span className="text-xs font-bold text-rmaps-primary">3</span>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium">Upload the ZIP here</p>
|
||||
<p className="text-white/50 text-sm">No need to extract it!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Drop zone */}
|
||||
|
|
@ -208,27 +285,39 @@ export default function ImportModal({ onClose, onImport }: ImportModalProps) {
|
|||
onDrop={handleDrop}
|
||||
onDragOver={handleDragOver}
|
||||
onDragLeave={handleDragLeave}
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className={`border-2 border-dashed rounded-xl p-8 text-center cursor-pointer transition-colors ${
|
||||
isDragging
|
||||
onClick={() => !isProcessing && fileInputRef.current?.click()}
|
||||
className={`border-2 border-dashed rounded-xl p-6 text-center cursor-pointer transition-all ${
|
||||
isProcessing
|
||||
? 'border-white/10 bg-white/5 cursor-wait'
|
||||
: isDragging
|
||||
? 'border-rmaps-primary bg-rmaps-primary/10'
|
||||
: 'border-white/20 hover:border-white/40'
|
||||
: 'border-white/20 hover:border-white/40 hover:bg-white/5'
|
||||
}`}
|
||||
>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept=".json,.geojson"
|
||||
accept=".zip,.json,.geojson"
|
||||
onChange={handleFileChange}
|
||||
className="hidden"
|
||||
disabled={isProcessing}
|
||||
/>
|
||||
<div className="text-4xl mb-2">📁</div>
|
||||
<p className="text-white/80">
|
||||
{isDragging ? 'Drop file here' : 'Drag & drop or click to upload'}
|
||||
</p>
|
||||
<p className="text-white/40 text-sm mt-1">
|
||||
.json or .geojson files (max {formatFileSize(MAX_FILE_SIZE)})
|
||||
</p>
|
||||
{isProcessing ? (
|
||||
<>
|
||||
<div className="w-8 h-8 border-2 border-rmaps-primary border-t-transparent rounded-full animate-spin mx-auto mb-2" />
|
||||
<p className="text-white/60">Processing...</p>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="text-4xl mb-2">📦</div>
|
||||
<p className="text-white/80 font-medium">
|
||||
{isDragging ? 'Drop file here' : 'Drop ZIP or click to upload'}
|
||||
</p>
|
||||
<p className="text-white/40 text-xs mt-1">
|
||||
Accepts .zip, .json, or .geojson
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Error message */}
|
||||
|
|
@ -248,20 +337,15 @@ export default function ImportModal({ onClose, onImport }: ImportModalProps) {
|
|||
{/* Preview Step */}
|
||||
{step === 'preview' && (
|
||||
<div className="space-y-4">
|
||||
{/* Summary */}
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-white/60">
|
||||
Found {parsedPlaces.length} place{parsedPlaces.length !== 1 ? 's' : ''}
|
||||
</span>
|
||||
<button
|
||||
onClick={toggleAll}
|
||||
className="text-rmaps-primary hover:underline"
|
||||
>
|
||||
<button onClick={toggleAll} className="text-rmaps-primary hover:underline">
|
||||
{selectedPlaces.size === parsedPlaces.length ? 'Deselect all' : 'Select all'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Places list */}
|
||||
<div className="bg-white/5 rounded-lg border border-white/10 max-h-64 overflow-y-auto">
|
||||
{parsedPlaces.map((place, index) => (
|
||||
<label
|
||||
|
|
@ -285,12 +369,10 @@ export default function ImportModal({ onClose, onImport }: ImportModalProps) {
|
|||
))}
|
||||
</div>
|
||||
|
||||
{/* Selected count */}
|
||||
<div className="text-sm text-white/60 text-center">
|
||||
{selectedPlaces.size} of {parsedPlaces.length} selected
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-3">
|
||||
<button onClick={handleBack} className="btn-ghost flex-1">
|
||||
Back
|
||||
|
|
@ -313,7 +395,7 @@ export default function ImportModal({ onClose, onImport }: ImportModalProps) {
|
|||
<div>
|
||||
<p className="text-lg font-medium">Import Complete!</p>
|
||||
<p className="text-white/60">
|
||||
Added {importedCount} waypoint{importedCount !== 1 ? 's' : ''} to the map
|
||||
Added {importedCount} place{importedCount !== 1 ? 's' : ''} to the map
|
||||
</p>
|
||||
</div>
|
||||
<button onClick={onClose} className="btn-primary w-full">
|
||||
|
|
|
|||
Loading…
Reference in New Issue