feat: Add Uziomy calculator page with grounding calculations and document generation
- Implemented Uziomy component for calculating grounding parameters. - Added state management for input fields and results. - Integrated DatePicker for date selection. - Created functions for grounding calculations, document generation (DOCX), and DXF file generation. - Enhanced UI with Tailwind CSS for better styling and responsiveness. - Updated global styles to include Inter font and custom scrollbar styles. - Configured Tailwind CSS to extend colors, fonts, and animations.
This commit is contained in:
247
pages/cross_new.js
Normal file
247
pages/cross_new.js
Normal file
@@ -0,0 +1,247 @@
|
||||
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">Przekształć pliki DXF na siatki instalacyjne</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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user