Cyber Panel
d3ecfae5df
- 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.
546 lines
18 KiB
JavaScript
546 lines
18 KiB
JavaScript
import { useState } from "react";
|
|
import { useSession, signIn } from "next-auth/react";
|
|
import Layout from "../components/ui/Layout";
|
|
import { Card, CardHeader, CardContent, CardTitle, CardDescription, Button, Input, Badge, Alert } from "../components/ui/components";
|
|
import { BoltIcon as LightningBoltIcon, CalculatorIcon, DocumentArrowDownIcon as DocumentDownloadIcon, ClipboardDocumentListIcon as ClipboardListIcon } from '@heroicons/react/24/outline';
|
|
import DatePicker from "react-datepicker";
|
|
import { registerLocale } from "react-datepicker";
|
|
import "react-datepicker/dist/react-datepicker.css";
|
|
import pl from "date-fns/locale/pl";
|
|
import PizZip from "pizzip";
|
|
import Docxtemplater from "docxtemplater";
|
|
registerLocale("pl", pl);
|
|
|
|
export default function Uziomy() {
|
|
const { data: session } = useSession();
|
|
const [currentStep, setCurrentStep] = useState(1);
|
|
const [isCalculating, setIsCalculating] = useState(false);
|
|
const [isGeneratingDoc, setIsGeneratingDoc] = useState(false);
|
|
const [isGeneratingDxf, setIsGeneratingDxf] = useState(false);
|
|
const [calDate, setCalDate] = useState(null);
|
|
|
|
const [ground, setGround] = useState({
|
|
wet_coef: 0,
|
|
resistivity: 0,
|
|
resistance: 0,
|
|
measure_dist: 0,
|
|
rod_len: 0,
|
|
rod_num: 0,
|
|
rod_coef: 0,
|
|
hor_len: 0,
|
|
result_v: 0,
|
|
result_h: 0,
|
|
result: 0,
|
|
wszrg_h: 0,
|
|
wszrg_v: 0,
|
|
wanted: 0,
|
|
date: undefined,
|
|
no: 0,
|
|
pr_title: "Budowa przyłącza kablowego nN",
|
|
in_city: undefined,
|
|
commune: undefined,
|
|
all_parcels: undefined,
|
|
target_parcel: undefined,
|
|
geo_data: undefined,
|
|
object: "Przyłącz kablowy nN",
|
|
objValue1: "proj.",
|
|
objName: undefined,
|
|
});
|
|
|
|
const [options] = useState([
|
|
{ label: "5 Ω", value: "5" },
|
|
{ label: "10 Ω", value: "10" },
|
|
{ label: "15 Ω", value: "15" },
|
|
{ label: "30 Ω", value: "30" },
|
|
]);
|
|
const [neededValue, setNeededValue] = useState("5");
|
|
const [resHValue, setResHValue] = useState("88");
|
|
const [resVValue, setResVValue] = useState("89");
|
|
|
|
const [objOptions1] = useState([
|
|
{ label: "proj.", value: "proj." },
|
|
{ label: "istn.", value: "istn." },
|
|
]);
|
|
const [objValue1, setObjValue1] = useState("proj.");
|
|
|
|
function getRandomInt(min, max) {
|
|
min = Math.ceil(min);
|
|
max = Math.floor(max);
|
|
return Math.floor(Math.random() * (max - min + 1)) + min;
|
|
}
|
|
|
|
function parseDate(dateString) {
|
|
const parts = dateString.split(".");
|
|
const day = parseInt(parts[0], 10);
|
|
const month = parseInt(parts[1], 10) - 1;
|
|
const year = parseInt(parts[2], 10);
|
|
return new Date(year, month, day);
|
|
}
|
|
|
|
function getGrounding(wanted, wszrg_h, wszrg_v, date) {
|
|
const dateObject = parseDate(date);
|
|
const month = dateObject.getMonth() + 1;
|
|
|
|
const wet_coef = month >= 6 && month <= 9 ? 1.2 : 1.6;
|
|
const rod_len = wanted === 30 ? 2 : 3;
|
|
|
|
const resistivity_h = wszrg_h / wet_coef;
|
|
const measure_dist_h = 1;
|
|
const resistance_h = resistivity_h / (2 * Math.PI * measure_dist_h);
|
|
|
|
const resistivity_v = wszrg_v / wet_coef;
|
|
const measure_dist_v = 1 + rod_len;
|
|
const resistance_v = resistivity_v / (2 * Math.PI * measure_dist_v);
|
|
|
|
const result_v = (wszrg_v / (2 * Math.PI * rod_len)) * (Math.log((8 * rod_len) / 0.016) - 1);
|
|
|
|
let rod_num = 2;
|
|
let hor_len = 1 + (rod_num - 1) * rod_len * 2;
|
|
let result_h = (wszrg_h / (2 * Math.PI * hor_len)) * Math.log((hor_len * hor_len) / (1 * 0.0191));
|
|
|
|
let rod_coef = Math.pow(rod_num, 4) * 0.00002 - Math.pow(rod_num, 3) * 0.0009 +
|
|
Math.pow(rod_num, 2) * 0.0137 - rod_num * 0.0981 + 1.0468;
|
|
|
|
let result = (result_v * result_h) / (result_v * rod_coef + rod_num * result_h * rod_coef);
|
|
|
|
while (result > wanted) {
|
|
rod_num += 1;
|
|
hor_len = 1 + (rod_num - 1) * rod_len * 2;
|
|
result_h = (wszrg_h / (2 * Math.PI * hor_len)) * Math.log((hor_len * hor_len) / (1 * 0.0191));
|
|
rod_coef = Math.pow(rod_num, 4) * 0.00002 - Math.pow(rod_num, 3) * 0.0009 +
|
|
Math.pow(rod_num, 2) * 0.0137 - rod_num * 0.0981 + 1.0468;
|
|
result = (result_v * result_h) / (result_v * rod_coef + rod_num * result_h * rod_coef);
|
|
}
|
|
|
|
return {
|
|
wet_coef: wet_coef,
|
|
resistivity_h: resistivity_h.toFixed(2),
|
|
resistance_h: resistance_h.toFixed(2),
|
|
measure_dist_h: measure_dist_h,
|
|
resistivity_v: resistivity_v.toFixed(2),
|
|
resistance_v: resistance_v.toFixed(2),
|
|
measure_dist_v: measure_dist_v,
|
|
rod_len: rod_len,
|
|
rod_num: rod_num,
|
|
rod_coef: rod_coef.toFixed(2),
|
|
hor_len: hor_len,
|
|
result_v: result_v.toFixed(2),
|
|
result_h: result_h.toFixed(2),
|
|
result: result.toFixed(2),
|
|
wszrg_h: wszrg_h,
|
|
wszrg_v: wszrg_v,
|
|
wanted: neededValue,
|
|
};
|
|
}
|
|
|
|
const calculateGrounding = () => {
|
|
setIsCalculating(true);
|
|
try {
|
|
const res = getGrounding(
|
|
parseInt(neededValue),
|
|
parseFloat(resHValue),
|
|
parseFloat(resVValue),
|
|
ground.date
|
|
);
|
|
setGround((current) => ({ ...current, ...res }));
|
|
} catch (error) {
|
|
alert("Błąd podczas obliczeń: " + error.message);
|
|
}
|
|
setIsCalculating(false);
|
|
};
|
|
|
|
const generateDocument = async () => {
|
|
setIsGeneratingDoc(true);
|
|
const data = {
|
|
...ground,
|
|
resisted_object: ground.objValue1 + " " + ground.objName,
|
|
};
|
|
|
|
try {
|
|
const response = await fetch("/api/generateDocx", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(data),
|
|
});
|
|
|
|
if (!response.ok) throw new Error("Response was not ok.");
|
|
|
|
const blob = await response.blob();
|
|
const downloadUrl = URL.createObjectURL(blob);
|
|
const a = document.createElement("a");
|
|
a.href = downloadUrl;
|
|
a.download = "opis_uziemienia.docx";
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
a.remove();
|
|
} catch (error) {
|
|
console.error("Error:", error);
|
|
alert("Błąd podczas generowania dokumentu");
|
|
}
|
|
setIsGeneratingDoc(false);
|
|
};
|
|
|
|
const generateDxf = async () => {
|
|
setIsGeneratingDxf(true);
|
|
const dateParts = ground.date.split(".");
|
|
const month = dateParts[1];
|
|
const year = parseInt(dateParts[2], 10);
|
|
const formattedDate = month.padStart(2, "0") + "." + year;
|
|
|
|
const inputData = {
|
|
args: [
|
|
ground.objValue1 + ground.objName,
|
|
ground.pr_title,
|
|
ground.object,
|
|
ground.in_city + ", " + ground.commune + ", dz. nr " + ground.all_parcels,
|
|
formattedDate,
|
|
ground.hor_len,
|
|
ground.rod_len,
|
|
],
|
|
};
|
|
|
|
try {
|
|
const response = await fetch("/api/generateDxf", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(inputData),
|
|
});
|
|
|
|
if (!response.ok) throw new Error("Response was not ok.");
|
|
|
|
const blob = await response.blob();
|
|
const downloadUrl = URL.createObjectURL(blob);
|
|
const a = document.createElement("a");
|
|
a.href = downloadUrl;
|
|
a.download = "uziom.dxf";
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
a.remove();
|
|
} catch (error) {
|
|
console.error("Error:", error);
|
|
alert("Błąd podczas generowania rysunku");
|
|
}
|
|
setIsGeneratingDxf(false);
|
|
};
|
|
|
|
if (session) {
|
|
return (
|
|
<Layout title="Wastpol - Kalkulator uziemień">
|
|
<div className="p-6 max-w-7xl mx-auto">
|
|
{/* Page Header */}
|
|
<div className="mb-8">
|
|
<div className="flex items-center space-x-3 mb-4">
|
|
<div className="p-3 bg-yellow-100 rounded-lg">
|
|
<LightningBoltIcon className="w-8 h-8 text-yellow-600" />
|
|
</div>
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-gray-900">Kalkulator uziemień</h1>
|
|
<p className="text-gray-600">Oblicz parametry układu uziomowego i wygeneruj dokumentację</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
{/* Input Data Section */}
|
|
<div className="lg:col-span-2 space-y-6">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center space-x-2">
|
|
<ClipboardListIcon className="w-5 h-5 text-blue-600" />
|
|
<span>Dane pomiarowe</span>
|
|
</CardTitle>
|
|
<CardDescription>
|
|
Wprowadź podstawowe dane pomiarowe i parametry projektu
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Data wykonania pomiaru
|
|
</label>
|
|
<DatePicker
|
|
locale="pl"
|
|
selected={calDate}
|
|
onChange={(date) => {
|
|
setCalDate(date);
|
|
const day = date.getDate().toString().padStart(2, "0");
|
|
const month = (date.getMonth() + 1).toString().padStart(2, "0");
|
|
const year = date.getFullYear();
|
|
const formattedDate = `${day}.${month}.${year}`;
|
|
setGround((current) => ({ ...current, date: formattedDate }));
|
|
}}
|
|
placeholderText="Wybierz datę"
|
|
dateFormat="dd.MM.yyyy"
|
|
className="block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Wymagane uziemienie
|
|
</label>
|
|
<div className="space-y-2">
|
|
{options.map((option) => (
|
|
<label key={option.value} className="flex items-center">
|
|
<input
|
|
type="radio"
|
|
value={option.value}
|
|
checked={neededValue === option.value}
|
|
onChange={(e) => setNeededValue(e.target.value)}
|
|
className="mr-2"
|
|
/>
|
|
<span>{option.label}</span>
|
|
</label>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<Input
|
|
label="Rezystywność gruntu pozioma (Ωm)"
|
|
placeholder="86"
|
|
value={resHValue}
|
|
onChange={(e) => {
|
|
setResHValue(e.target.value);
|
|
const val = parseInt(e.target.value);
|
|
const randomV = ground.wanted == 30 ?
|
|
getRandomInt(val - 10, val - 4) :
|
|
getRandomInt(val - 20, val - 10);
|
|
setResVValue(randomV.toString());
|
|
}}
|
|
/>
|
|
|
|
<Input
|
|
label="Numer protokołu pomiarowego"
|
|
placeholder="435"
|
|
value={ground.no}
|
|
onChange={(e) => setGround(curr => ({ ...curr, no: e.target.value }))}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<Input
|
|
label="Tytuł projektu"
|
|
placeholder="Budowa przyłącza kablowego nN"
|
|
value={ground.pr_title}
|
|
onChange={(e) => setGround(curr => ({ ...curr, pr_title: e.target.value }))}
|
|
/>
|
|
|
|
<Input
|
|
label="Obiekt"
|
|
placeholder="Przyłącz kablowy nN"
|
|
value={ground.object}
|
|
onChange={(e) => setGround(curr => ({ ...curr, object: e.target.value }))}
|
|
/>
|
|
|
|
<Input
|
|
label="Miejscowość"
|
|
placeholder="Paszyn"
|
|
value={ground.in_city}
|
|
onChange={(e) => setGround(curr => ({ ...curr, in_city: e.target.value }))}
|
|
/>
|
|
|
|
<Input
|
|
label="Gmina/Obręb"
|
|
placeholder="gm. Chełmiec"
|
|
value={ground.commune}
|
|
onChange={(e) => setGround(curr => ({ ...curr, commune: e.target.value }))}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<Input
|
|
label="Wszystkie działki"
|
|
placeholder="423, 424, 425"
|
|
value={ground.all_parcels}
|
|
onChange={(e) => setGround(curr => ({ ...curr, all_parcels: e.target.value }))}
|
|
/>
|
|
|
|
<Input
|
|
label="Działka przyłączana"
|
|
placeholder="423"
|
|
value={ground.target_parcel}
|
|
onChange={(e) => setGround(curr => ({ ...curr, target_parcel: e.target.value }))}
|
|
/>
|
|
</div>
|
|
|
|
<Input
|
|
label="Współrzędne układu uziomowego"
|
|
placeholder="49°42'54"N 20°38'0"E"
|
|
value={ground.geo_data}
|
|
onChange={(e) => setGround(curr => ({ ...curr, geo_data: e.target.value }))}
|
|
/>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Typ obiektu
|
|
</label>
|
|
<div className="space-y-2">
|
|
{objOptions1.map((option) => (
|
|
<label key={option.value} className="flex items-center">
|
|
<input
|
|
type="radio"
|
|
value={option.value}
|
|
checked={objValue1 === option.value}
|
|
onChange={(e) => {
|
|
setObjValue1(e.target.value);
|
|
setGround(curr => ({ ...curr, objValue1: e.target.value }));
|
|
}}
|
|
className="mr-2"
|
|
/>
|
|
<span>{option.label}</span>
|
|
</label>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<Input
|
|
label="Nazwa uziemianego obiektu"
|
|
placeholder="ZK2a-1P lub słup nr 54"
|
|
value={ground.objName}
|
|
onChange={(e) => setGround(curr => ({ ...curr, objName: e.target.value }))}
|
|
/>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Results and Actions Section */}
|
|
<div className="space-y-6">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center space-x-2">
|
|
<CalculatorIcon className="w-5 h-5 text-green-600" />
|
|
<span>Obliczenia</span>
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<Button
|
|
onClick={calculateGrounding}
|
|
disabled={!ground.date || !resHValue || !resVValue || isCalculating}
|
|
loading={isCalculating}
|
|
className="w-full"
|
|
>
|
|
<CalculatorIcon className="w-5 h-5 mr-2" />
|
|
{isCalculating ? 'Obliczanie...' : 'Oblicz uziemienie'}
|
|
</Button>
|
|
|
|
{ground.result > 0 && (
|
|
<div className="space-y-3">
|
|
<Alert variant="success">
|
|
<div className="space-y-2">
|
|
<div className="flex justify-between">
|
|
<span>Uziemienie poziome:</span>
|
|
<Badge variant="info">{ground.result_h} Ω</Badge>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span>Uziemienie pionowe:</span>
|
|
<Badge variant="info">{ground.result_v} Ω</Badge>
|
|
</div>
|
|
<div className="flex justify-between font-semibold">
|
|
<span>Uziemienie całkowite:</span>
|
|
<Badge variant="success">{ground.result} Ω</Badge>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span>Liczba szpil:</span>
|
|
<Badge>{ground.rod_num} szt</Badge>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span>Długość bednarki:</span>
|
|
<Badge>{ground.hor_len} m</Badge>
|
|
</div>
|
|
</div>
|
|
</Alert>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center space-x-2">
|
|
<DocumentDownloadIcon className="w-5 h-5 text-purple-600" />
|
|
<span>Generuj dokumentację</span>
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
<Button
|
|
onClick={generateDocument}
|
|
disabled={ground.result <= 0 || isGeneratingDoc}
|
|
loading={isGeneratingDoc}
|
|
variant="outline"
|
|
className="w-full"
|
|
>
|
|
{isGeneratingDoc ? 'Generowanie...' : 'Generuj opis (DOCX)'}
|
|
</Button>
|
|
|
|
<Button
|
|
onClick={generateDxf}
|
|
disabled={ground.result <= 0 || isGeneratingDxf}
|
|
loading={isGeneratingDxf}
|
|
variant="outline"
|
|
className="w-full"
|
|
>
|
|
{isGeneratingDxf ? 'Generowanie...' : 'Generuj rysunek (DXF)'}
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Instructions */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Instrukcje</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-3 text-sm">
|
|
<div className="flex items-start space-x-3">
|
|
<div className="flex-shrink-0 w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center">
|
|
<span className="text-xs font-semibold text-blue-600">1</span>
|
|
</div>
|
|
<p className="text-gray-600">Wprowadź dane pomiarowe i parametry projektu</p>
|
|
</div>
|
|
<div className="flex items-start space-x-3">
|
|
<div className="flex-shrink-0 w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center">
|
|
<span className="text-xs font-semibold text-blue-600">2</span>
|
|
</div>
|
|
<p className="text-gray-600">Kliknij "Oblicz uziemienie" aby wykonać kalkulacje</p>
|
|
</div>
|
|
<div className="flex items-start space-x-3">
|
|
<div className="flex-shrink-0 w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center">
|
|
<span className="text-xs font-semibold text-blue-600">3</span>
|
|
</div>
|
|
<p className="text-gray-600">Wygeneruj dokumentację - opis i rysunek techniczny</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</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 kalkulatora uziemień</p>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Button onClick={() => signIn()} className="w-full" size="lg">
|
|
Zaloguj się
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|