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.

components/templates/generator.js

@@ -1,19 +1,9 @@
 import { useState, useEffect } from "react";
 import { useRouter } from "next/router";
-import {
-	Pane,
-	TextInputField,
-	TextareaField,
-	Button,
-	BuildIcon,
-	toaster,
-	Alert,
-	RadioGroup,
-} from "evergreen-ui";
+import { Card, CardHeader, CardContent, CardTitle, CardDescription, Button, Input, Textarea, Alert } from "../ui/components";
+import { ChartBarIcon, ArrowDownTrayIcon as DownloadIcon, EyeIcon } from '@heroicons/react/24/outline';
 import axios from "axios";
 
-import Footer from "./footer";
-
 export default function Generator() {
 	const [profil, setProfil] = useState();
 	const [args, setArgs] = useState({
@@ -21,18 +11,22 @@ export default function Generator() {
 		elementOne: 0,
 		elementTwo: 0,
 	});
-	const [ElementOneOptions] = useState([
-		{ label: "Nic", value: "0" },
-		{ label: "Słup", value: "1" },
-		{ label: "Dom", value: "2" },
-	]);
-	const [ElementTwoOptions] = useState([
-		{ label: "Nic", value: "0" },
-		{ label: "Słup", value: "1" },
-		{ label: "Dom", value: "2" },
-	]);
+	const [isLoading, setIsLoading] = useState(false);
+	const [previewVisible, setPreviewVisible] = useState(false);
 	const { query } = useRouter();
 
+	const ElementOneOptions = [
+		{ label: "Nic", value: "0" },
+		{ label: "Słup", value: "1" },
+		{ label: "Dom", value: "2" },
+	];
+	
+	const ElementTwoOptions = [
+		{ label: "Nic", value: "0" },
+		{ label: "Słup", value: "1" },
+		{ label: "Dom", value: "2" },
+	];
+
 	useEffect(() => {
 		if (query.external == "tru") {
 			axios
@@ -54,86 +48,68 @@ export default function Generator() {
 			if (line[0] == "P") continue;
 			if (line[0] == "S") continue;
 			if (line[0] == "X") continue;
-
 			newLines.push(line);
 		}
-		let xs = [];
-		let ys = [];
-		let zs = [];
-		let toti = 0;
-		let al = 0;
+		
+		let xs = [], ys = [], zs = [];
+		let toti = 0, al = 0;
+		
 		for (let line of newLines) {
 			al += 1;
 			let theLine = line.split(",");
-			//console.log(theLine)
-			if (
-				xs &&
-				parseFloat(theLine[0]) == xs[-1] &&
-				parseFloat(theLine[1]) == ys[-1]
-			)
+			
+			if (xs && parseFloat(theLine[0]) == xs[-1] && parseFloat(theLine[1]) == ys[-1])
 				continue;
 
 			if (al > 2) {
-				let dist =
-					((xs[xs.length - 1] - xs[xs.length - 2]) ** 2 +
-						(ys[ys.length - 1] - ys[ys.length - 2]) ** 2) **
-					0.5;
+				let dist = ((xs[xs.length - 1] - xs[xs.length - 2]) ** 2 +
+					(ys[ys.length - 1] - ys[ys.length - 2]) ** 2) ** 0.5;
 				toti += Math.round(dist);
 			}
 			xs.push(parseFloat(theLine[0]));
 			ys.push(parseFloat(theLine[1]));
 			zs.push(parseFloat(theLine[2]));
 		}
-		let prevLine = ["0", "0", "0"];
-		let scaleFactor = 100000 / 2000;
-		const canvas = document.getElementById("canvas");
 
+		const canvas = document.getElementById("canvas");
 		if (!canvas.getContext) {
 			console.log("canvas err");
-			toaster.warning("canvas err");
 			return;
 		}
 
 		const ctx = canvas.getContext("2d");
-		ctx.clearRect(0, 0, 700, 700);
-
-		// set line stroke and line width
-		ctx.strokeStyle = "red";
+		ctx.clearRect(0, 0, 700, 500);
+		ctx.strokeStyle = "#3B82F6";
 		ctx.lineWidth = 2;
+		
+		let scaleFactor = 100000 / 2000;
 		let totalH = Math.max(...zs);
 		let minH = Math.min(...zs);
+		
 		for (let line = 0; line < xs.length - 1; line++) {
-			let theLine = [xs[line], ys[line], zs[line]];
-			let x = parseFloat(theLine[0]) - parseFloat(prevLine[0]);
-			let y = parseFloat(theLine[1]) - parseFloat(prevLine[1]);
 			let x1 = line * scaleFactor;
 			let y1 = zs[line];
 			let x2 = (line + 1) * scaleFactor;
 			let y2 = zs[line + 1];
-			//console.log(x1, y1, x2, y2);
-			let b0 = 0;
-			let b1 = 500;
+			
+			let b0 = 50, b1 = 450;
 			let z1 = b0 + (b1 - b0) * ((y1 - totalH) / (minH - totalH));
 			let z2 = b0 + (b1 - b0) * ((y2 - totalH) / (minH - totalH));
-
-			//b0 + (b1 - b0) * ((x1-0)/(toti*scaleFactor-0));
+			
 			let x12 = b0 + (b1 - b0) * ((x1 - 0) / (toti * scaleFactor));
 			let x22 = b0 + (b1 - b0) * ((x2 - 0) / (toti * scaleFactor));
-			//console.log(x12);
 
 			ctx.beginPath();
 			ctx.moveTo(x12, z1);
 			ctx.lineTo(x22, z2);
 			ctx.stroke();
 		}
-	};
-
-	const parsePreview = (e) => {
-		// console.log(dxf);
+		setPreviewVisible(true);
 	};
 
 	const py = (e, profil, args) => {
 		e.preventDefault();
+		setIsLoading(true);
 
 		axios
 			.post("/api/spawn", {
@@ -141,91 +117,178 @@ export default function Generator() {
 				arguments: args,
 			})
 			.then(function (response) {
+				setIsLoading(false);
 				console.log(response);
 				if (response.data.toString().startsWith("Py Error")) {
-					toaster.danger(response.data);
+					alert("Błąd: " + response.data);
 					return;
 				}
-				toaster.warning(response.data.data);
-				document.getElementById("down").download =
-					response.data.filename.toString() + ".dxf";
+				document.getElementById("down").download = response.data.filename.toString() + ".dxf";
 				document.getElementById("down").click();
 			})
 			.catch(function (error) {
+				setIsLoading(false);
 				console.log(error);
 			});
 	};
+
 	return (
-		<div className="flex xl:flex-row flex-col">
-			<div className="flex flex-col">
-				<Pane width={480}>
-					<TextareaField
-						id="textarea-1"
-						label="Dane z Geoportalu:"
-						placeholder="Próbkowanie: 1 ..."
-						onChange={(e) => {
-							//console.log(e.target.value);
-							setProfil(e.target.value);
-							parsePreview(e);
-							getPath(e, e.target.value);
-						}}
-					/>
+		<div className="grid grid-cols-1 xl:grid-cols-2 gap-8">
+			{/* Input Section */}
+			<div className="space-y-6">
+				<Card>
+					<CardHeader>
+						<CardTitle className="flex items-center space-x-2">
+							<ChartBarIcon className="w-5 h-5 text-blue-600" />
+							<span>Dane wejściowe</span>
+						</CardTitle>
+						<CardDescription>
+							Wklej dane z Geoportalu lub wprowadź własne współrzędne
+						</CardDescription>
+					</CardHeader>
+					<CardContent className="space-y-4">
+						<Textarea
+							id="textarea-1"
+							label="Dane z Geoportalu"
+							placeholder="Próbkowanie: 1 ..."
+							rows={8}
+							onChange={(e) => {
+								setProfil(e.target.value);
+								getPath(e, e.target.value);
+							}}
+							className="font-mono text-sm"
+						/>
 
-					<TextInputField
-						label="Skala:"
-						placeholder="200"
-						width={100}
-						onChange={(e) => {
-							console.log(e.target.value);
-							setArgs({ ...args, scale: e.target.value });
-						}}
-					/>
-					<RadioGroup
-						label="Lewa"
-						value={args.elementOne}
-						options={ElementOneOptions}
-						onChange={(event) => {
-							setArgs({ ...args, elementOne: event.target.value });
-						}}
-					/>
-					<RadioGroup
-						label="Prawa"
-						value={args.elementTwo}
-						options={ElementTwoOptions}
-						onChange={(event) => {
-							setArgs({ ...args, elementTwo: event.target.value });
-						}}
-					/>
-					<Button
-						marginY={8}
-						marginRight={12}
-						appearance="default"
-						iconAfter={BuildIcon}
-						onClick={(e) => {
-							if (document.getElementById("textarea-1").value == "") {
-								toaster.danger("Pole danych nie może być puste");
-							} else if (
-								!document
-									.getElementById("textarea-1")
-									.value.startsWith("Próbkowanie")
-							) {
-								toaster.danger("Błędne dane");
-							} else {
-								py(e, profil, args);
-							}
-						}}
-					>
-						Generuj
-					</Button>
-				</Pane>
+						<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+							<Input
+								label="Skala"
+								placeholder="200"
+								type="number"
+								value={args.scale}
+								onChange={(e) => setArgs({ ...args, scale: e.target.value })}
+							/>
 
-				<a href="test.dxf" download="test.dxf" id="down">
-					{" "}
-				</a>
+							<div>
+								<label className="block text-sm font-medium text-gray-700 mb-1">
+									Element lewy
+								</label>
+								<select
+									className="block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+									value={args.elementOne}
+									onChange={(e) => setArgs({ ...args, elementOne: e.target.value })}
+								>
+									{ElementOneOptions.map(option => (
+										<option key={option.value} value={option.value}>
+											{option.label}
+										</option>
+									))}
+								</select>
+							</div>
+
+							<div>
+								<label className="block text-sm font-medium text-gray-700 mb-1">
+									Element prawy
+								</label>
+								<select
+									className="block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+									value={args.elementTwo}
+									onChange={(e) => setArgs({ ...args, elementTwo: e.target.value })}
+								>
+									{ElementTwoOptions.map(option => (
+										<option key={option.value} value={option.value}>
+											{option.label}
+										</option>
+									))}
+								</select>
+							</div>
+						</div>
+
+						<Button
+							onClick={(e) => {
+								const textareaValue = document.getElementById("textarea-1").value;
+								if (textareaValue === "") {
+									alert("Pole danych nie może być puste");
+								} else if (!textareaValue.startsWith("Próbkowanie")) {
+									alert("Błędne dane");
+								} else {
+									py(e, profil, args);
+								}
+							}}
+							disabled={isLoading}
+							loading={isLoading}
+							className="w-full"
+						>
+							<DownloadIcon className="w-5 h-5 mr-2" />
+							{isLoading ? 'Generowanie...' : 'Generuj profil'}
+						</Button>
+					</CardContent>
+				</Card>
 			</div>
-			<Pane className="ml-8 shadow-md rounded-md">
-				<canvas id="canvas" height="500" width="700"></canvas>
-			</Pane>
+
+			{/* Preview Section */}
+			<div>
+				<Card>
+					<CardHeader>
+						<CardTitle className="flex items-center space-x-2">
+							<EyeIcon className="w-5 h-5 text-green-600" />
+							<span>Podgląd profilu</span>
+						</CardTitle>
+						<CardDescription>
+							Wizualizacja profilu terenu na podstawie wprowadzonych danych
+						</CardDescription>
+					</CardHeader>
+					<CardContent>
+						{previewVisible ? (
+							<div className="bg-gray-50 rounded-lg p-4">
+								<canvas 
+									id="canvas" 
+									height="500" 
+									width="700"
+									className="border border-gray-200 rounded bg-white"
+								/>
+							</div>
+						) : (
+							<div className="bg-gray-50 rounded-lg p-8 text-center">
+								<div className="mx-auto w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center mb-4">
+									<ChartBarIcon className="w-8 h-8 text-gray-400" />
+								</div>
+								<p className="text-gray-500">Wprowadź dane aby zobaczyć podgląd profilu</p>
+							</div>
+						)}
+					</CardContent>
+				</Card>
+
+				{/* Instructions */}
+				<Card className="mt-6">
+					<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">Skopiuj dane z Geoportalu w formacie "Próbkowanie: 1"</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">Ustaw skalę i wybierz elementy dodatkowe</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">Kliknij "Generuj profil" aby pobrać plik DXF</p>
+							</div>
+						</div>
+					</CardContent>
+				</Card>
+			</div>
+
+			<a href="test.dxf" download="test.dxf" id="down" className="hidden" />
 		</div>
 	);
 }