248 lines
7.9 KiB
JavaScript
248 lines
7.9 KiB
JavaScript
import { useState, useCallback } from "react";
|
|
import { useSession, signIn } from "next-auth/react";
|
|
import Layout from "../components/ui/Layout";
|
|
import { Card, CardHeader, CardContent, CardTitle, CardDescription, Button, Alert } from "../components/ui/components";
|
|
import {
|
|
FileUploader,
|
|
FileCard,
|
|
} from "evergreen-ui";
|
|
import { CloudArrowUpIcon as CloudUploadIcon, ArrowDownTrayIcon as DownloadIcon, Squares2X2Icon as GridIcon } from '@heroicons/react/24/outline';
|
|
import axios from "axios";
|
|
|
|
export default function Cross() {
|
|
const { data: session } = useSession();
|
|
const [files, setFiles] = useState([]);
|
|
const [fileRejections, setFileRejections] = useState([]);
|
|
const [fileData, setFileData] = useState(null);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
|
const handleChange = useCallback((files) => setFiles([files[0]]), []);
|
|
const handleRejected = useCallback(
|
|
(fileRejections) => setFileRejections([fileRejections[0]]),
|
|
[]
|
|
);
|
|
const handleRemove = useCallback(() => {
|
|
setFiles([]);
|
|
setFileRejections([]);
|
|
}, []);
|
|
|
|
const handleSubmit = (e) => {
|
|
e.preventDefault();
|
|
setIsLoading(true);
|
|
|
|
console.log("Files:", files);
|
|
if (files.length === 0) {
|
|
console.log("No files selected");
|
|
setIsLoading(false);
|
|
return;
|
|
}
|
|
|
|
const formData = new FormData();
|
|
formData.append("files", files[0]);
|
|
|
|
axios
|
|
.post("/api/cross", formData, {
|
|
headers: {
|
|
"Content-Type": "multipart/form-data",
|
|
},
|
|
})
|
|
.then((response) => {
|
|
console.log(response.data);
|
|
setFileData(response.data);
|
|
setIsLoading(false);
|
|
})
|
|
.catch((error) => {
|
|
console.error(error);
|
|
setIsLoading(false);
|
|
});
|
|
};
|
|
|
|
const handleDownload = () => {
|
|
if (fileData) {
|
|
document.getElementById("down").download = fileData.filename;
|
|
document.getElementById("down").href = "cross.dxf";
|
|
document.getElementById("down").click();
|
|
}
|
|
};
|
|
|
|
if (session) {
|
|
return (
|
|
<Layout title="Wastpol - Generator siatki">
|
|
<div className="p-6 max-w-4xl mx-auto">
|
|
{/* Page Header */}
|
|
<div className="mb-8">
|
|
<div className="flex items-center space-x-3 mb-4">
|
|
<div className="p-3 bg-blue-100 rounded-lg">
|
|
<GridIcon className="w-8 h-8 text-blue-600" />
|
|
</div>
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-gray-900">Generator siatki</h1>
|
|
<p className="text-gray-600">Dodaj siatkę do mapy w pliku DXF</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
{/* Upload Section */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center space-x-2">
|
|
<CloudUploadIcon className="w-5 h-5 text-blue-600" />
|
|
<span>Prześlij plik</span>
|
|
</CardTitle>
|
|
<CardDescription>
|
|
Wybierz plik DXF do przetworzenia (maksymalnie 50 MB)
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
<FileUploader
|
|
label="Przeciągnij i upuść plik lub kliknij aby wybrać"
|
|
description="Obsługiwane formaty: DXF (max 50 MB)"
|
|
maxSizeInBytes={50 * 1024 ** 2}
|
|
maxFiles={1}
|
|
onChange={handleChange}
|
|
onRejected={handleRejected}
|
|
renderFile={(file) => {
|
|
const { name, size, type } = file;
|
|
const fileRejection = fileRejections.find(
|
|
(fileRejection) => fileRejection.file === file
|
|
);
|
|
const { message } = fileRejection || {};
|
|
return (
|
|
<FileCard
|
|
key={name}
|
|
isInvalid={fileRejection != null}
|
|
name={name}
|
|
onRemove={handleRemove}
|
|
sizeInBytes={size}
|
|
type={type}
|
|
validationMessage={message}
|
|
/>
|
|
);
|
|
}}
|
|
values={files}
|
|
/>
|
|
|
|
<Button
|
|
onClick={handleSubmit}
|
|
disabled={files.length === 0 || isLoading}
|
|
loading={isLoading}
|
|
className="w-full"
|
|
>
|
|
{isLoading ? 'Przetwarzanie...' : 'Dodaj siatkę'}
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Results Section */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center space-x-2">
|
|
<DownloadIcon className="w-5 h-5 text-green-600" />
|
|
<span>Wynik</span>
|
|
</CardTitle>
|
|
<CardDescription>
|
|
Pobierz wygenerowany plik siatki
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{fileData ? (
|
|
<div className="space-y-4">
|
|
<Alert variant="success">
|
|
<div className="flex items-center space-x-2">
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
<span>Plik został pomyślnie przetworzony!</span>
|
|
</div>
|
|
</Alert>
|
|
|
|
<Button
|
|
onClick={handleDownload}
|
|
variant="primary"
|
|
className="w-full"
|
|
>
|
|
<DownloadIcon className="w-5 h-5 mr-2" />
|
|
Pobierz siatką DXF
|
|
</Button>
|
|
</div>
|
|
) : (
|
|
<div className="text-center py-8">
|
|
<div className="mx-auto w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-4">
|
|
<GridIcon className="w-8 h-8 text-gray-400" />
|
|
</div>
|
|
<p className="text-gray-500">Prześlij plik aby rozpocząć przetwarzanie</p>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Instructions */}
|
|
<Card className="mt-8">
|
|
<CardHeader>
|
|
<CardTitle>Instrukcje</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div className="flex items-start space-x-3">
|
|
<div className="flex-shrink-0 w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
|
|
<span className="text-sm font-semibold text-blue-600">1</span>
|
|
</div>
|
|
<div>
|
|
<h4 className="font-medium text-gray-900">Prześlij plik</h4>
|
|
<p className="text-sm text-gray-600">Wybierz plik DXF z projektem</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-start space-x-3">
|
|
<div className="flex-shrink-0 w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
|
|
<span className="text-sm font-semibold text-blue-600">2</span>
|
|
</div>
|
|
<div>
|
|
<h4 className="font-medium text-gray-900">Przetwarzaj</h4>
|
|
<p className="text-sm text-gray-600">Kliknij "Dodaj siatkę"</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-start space-x-3">
|
|
<div className="flex-shrink-0 w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
|
|
<span className="text-sm font-semibold text-blue-600">3</span>
|
|
</div>
|
|
<div>
|
|
<h4 className="font-medium text-gray-900">Pobierz</h4>
|
|
<p className="text-sm text-gray-600">Zapisz gotową siatkę DXF</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<a href="the.dxf" download="the.dxf" id="down" className="hidden" />
|
|
</div>
|
|
</Layout>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center p-4">
|
|
<Card className="w-full max-w-md">
|
|
<CardHeader className="text-center">
|
|
<div className="mx-auto w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
|
|
<img src="/logo.png" alt="Wastpol" className="w-10 h-10" />
|
|
</div>
|
|
<CardTitle className="text-2xl">Zaloguj się</CardTitle>
|
|
<p className="text-gray-600 mt-2">Uzyskaj dostęp do generatora siatki</p>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Button onClick={() => signIn()} className="w-full" size="lg">
|
|
Zaloguj się
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|