|
|
|
|
|
import React, { useRef } from 'react'; |
|
|
import { Upload, FileJson, Zap } from 'lucide-react'; |
|
|
|
|
|
interface FileUploadPanelProps { |
|
|
onUpload: (file: File) => void; |
|
|
onSampleData: () => void; |
|
|
loading: boolean; |
|
|
hasData: boolean; |
|
|
} |
|
|
|
|
|
export const FileUploadPanel: React.FC<FileUploadPanelProps> = ({ |
|
|
onUpload, |
|
|
onSampleData, |
|
|
loading, |
|
|
hasData, |
|
|
}) => { |
|
|
const fileInputRef = useRef<HTMLInputElement>(null); |
|
|
|
|
|
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => { |
|
|
const file = e.target.files?.[0]; |
|
|
if (file) { |
|
|
onUpload(file); |
|
|
} |
|
|
}; |
|
|
|
|
|
const handleClick = () => { |
|
|
fileInputRef.current?.click(); |
|
|
}; |
|
|
|
|
|
return ( |
|
|
<div className="upload-panel"> |
|
|
<div className="upload-header"> |
|
|
<FileJson size={24} /> |
|
|
<h3>Site Boundary</h3> |
|
|
</div> |
|
|
|
|
|
<div className="upload-buttons"> |
|
|
<button |
|
|
className="btn btn-primary" |
|
|
onClick={handleClick} |
|
|
disabled={loading} |
|
|
> |
|
|
<Upload size={18} /> |
|
|
{hasData ? 'Replace Boundary' : 'Upload DXF / DWG / GeoJSON'} |
|
|
</button> |
|
|
|
|
|
<button |
|
|
className="btn btn-secondary" |
|
|
onClick={onSampleData} |
|
|
disabled={loading} |
|
|
> |
|
|
<Zap size={18} /> |
|
|
Use Sample Data |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<input |
|
|
ref={fileInputRef} |
|
|
type="file" |
|
|
accept=".dxf,.dwg,.geojson,.json" |
|
|
onChange={handleFileChange} |
|
|
style={{ display: 'none' }} |
|
|
/> |
|
|
|
|
|
{hasData && ( |
|
|
<div className="upload-status"> |
|
|
✅ Boundary loaded |
|
|
</div> |
|
|
)} |
|
|
</div> |
|
|
); |
|
|
}; |
|
|
|
|
|
export default FileUploadPanel; |
|
|
|