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:
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
294
components/templates/generator_new.js
Normal file
294
components/templates/generator_new.js
Normal file
@@ -0,0 +1,294 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
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";
|
||||
|
||||
export default function Generator() {
|
||||
const [profil, setProfil] = useState();
|
||||
const [args, setArgs] = useState({
|
||||
scale: 200,
|
||||
elementOne: 0,
|
||||
elementTwo: 0,
|
||||
});
|
||||
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
|
||||
.post("/api/readtext", {
|
||||
id: query.id,
|
||||
})
|
||||
.then(function (response) {
|
||||
setProfil(response.data.data);
|
||||
document.getElementById("textarea-1").value = response.data.data;
|
||||
console.log(response.data.data);
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
|
||||
const getPath = (e, path) => {
|
||||
let newLines = [];
|
||||
|
||||
for (let line of path.split("\n")) {
|
||||
if (line[0] == "P") continue;
|
||||
if (line[0] == "S") continue;
|
||||
if (line[0] == "X") continue;
|
||||
newLines.push(line);
|
||||
}
|
||||
|
||||
let xs = [], ys = [], zs = [];
|
||||
let toti = 0, al = 0;
|
||||
|
||||
for (let line of newLines) {
|
||||
al += 1;
|
||||
let theLine = line.split(",");
|
||||
|
||||
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;
|
||||
toti += Math.round(dist);
|
||||
}
|
||||
xs.push(parseFloat(theLine[0]));
|
||||
ys.push(parseFloat(theLine[1]));
|
||||
zs.push(parseFloat(theLine[2]));
|
||||
}
|
||||
|
||||
const canvas = document.getElementById("canvas");
|
||||
if (!canvas.getContext) {
|
||||
console.log("canvas err");
|
||||
return;
|
||||
}
|
||||
|
||||
const ctx = canvas.getContext("2d");
|
||||
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 x1 = line * scaleFactor;
|
||||
let y1 = zs[line];
|
||||
let x2 = (line + 1) * scaleFactor;
|
||||
let y2 = zs[line + 1];
|
||||
|
||||
let b0 = 50, b1 = 450;
|
||||
let z1 = b0 + (b1 - b0) * ((y1 - totalH) / (minH - totalH));
|
||||
let z2 = b0 + (b1 - b0) * ((y2 - totalH) / (minH - totalH));
|
||||
|
||||
let x12 = b0 + (b1 - b0) * ((x1 - 0) / (toti * scaleFactor));
|
||||
let x22 = b0 + (b1 - b0) * ((x2 - 0) / (toti * scaleFactor));
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x12, z1);
|
||||
ctx.lineTo(x22, z2);
|
||||
ctx.stroke();
|
||||
}
|
||||
setPreviewVisible(true);
|
||||
};
|
||||
|
||||
const py = (e, profil, args) => {
|
||||
e.preventDefault();
|
||||
setIsLoading(true);
|
||||
|
||||
axios
|
||||
.post("/api/spawn", {
|
||||
profil: profil,
|
||||
arguments: args,
|
||||
})
|
||||
.then(function (response) {
|
||||
setIsLoading(false);
|
||||
console.log(response);
|
||||
if (response.data.toString().startsWith("Py Error")) {
|
||||
alert("Błąd: " + response.data);
|
||||
return;
|
||||
}
|
||||
document.getElementById("down").download = response.data.filename.toString() + ".dxf";
|
||||
document.getElementById("down").click();
|
||||
})
|
||||
.catch(function (error) {
|
||||
setIsLoading(false);
|
||||
console.log(error);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<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"
|
||||
/>
|
||||
|
||||
<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 })}
|
||||
/>
|
||||
|
||||
<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>
|
||||
|
||||
{/* 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>
|
||||
);
|
||||
}
|
||||
@@ -1,25 +1,12 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import {
|
||||
Pane,
|
||||
TextInputField,
|
||||
TextareaField,
|
||||
Button,
|
||||
toaster,
|
||||
Alert,
|
||||
TrashIcon,
|
||||
Icon,
|
||||
} from "evergreen-ui";
|
||||
import { useState } from "react";
|
||||
import { Card, CardHeader, CardContent, CardTitle, CardDescription, Button, Input } from "../ui/components";
|
||||
import { PencilIcon, PlusIcon, TrashIcon, ArrowDownTrayIcon as DownloadIcon } from '@heroicons/react/24/outline';
|
||||
import axios from "axios";
|
||||
import Footer from "./footer";
|
||||
import Generator from "./generator";
|
||||
|
||||
export default function Manual() {
|
||||
const [points, setPoints] = useState([{ id: 0, len: 0, height: 0 }]);
|
||||
const [args, setArgs] = useState({ scale: 200 });
|
||||
|
||||
//useEffect(() => {
|
||||
//do something here
|
||||
// }, [points]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const reIndex = () => {
|
||||
let newId = 0;
|
||||
@@ -32,7 +19,32 @@ export default function Manual() {
|
||||
setPoints([...newPoints]);
|
||||
};
|
||||
|
||||
const addPoint = () => {
|
||||
setPoints([
|
||||
...points,
|
||||
{
|
||||
id: points.length,
|
||||
len: Number(points[points.length - 1].len) + 1,
|
||||
height: 0,
|
||||
},
|
||||
]);
|
||||
};
|
||||
|
||||
const removePoint = (index) => {
|
||||
let newPoints = points;
|
||||
newPoints.splice(index, 1);
|
||||
setPoints([...newPoints]);
|
||||
reIndex();
|
||||
};
|
||||
|
||||
const updatePoint = (index, field, value) => {
|
||||
let newPoints = points;
|
||||
newPoints[index][field] = value;
|
||||
setPoints([...newPoints]);
|
||||
};
|
||||
|
||||
const generation = (e) => {
|
||||
setIsLoading(true);
|
||||
let pointString = "Próbkowanie: 1\nSegment 0: w dół\nX: Y, Z";
|
||||
|
||||
for (let point of points) {
|
||||
@@ -42,7 +54,6 @@ export default function Manual() {
|
||||
pointString += point.height;
|
||||
}
|
||||
|
||||
console.log(pointString);
|
||||
py(e, pointString, args);
|
||||
};
|
||||
|
||||
@@ -55,103 +66,176 @@ export default function Manual() {
|
||||
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}>
|
||||
{points.map((point, index) => (
|
||||
<Pane className="flex flex-row items-center">
|
||||
<TextInputField
|
||||
id={`len-${index}`}
|
||||
placeholder="0 m"
|
||||
onChange={(e) => {
|
||||
console.log(e.target.value);
|
||||
let newPoints = points;
|
||||
newPoints[index].len = e.target.value;
|
||||
setPoints([...newPoints]);
|
||||
}}
|
||||
value={point.len}
|
||||
></TextInputField>
|
||||
<TextInputField
|
||||
id={`h-${index}`}
|
||||
placeholder="0 m n.p.m."
|
||||
onChange={(e) => {
|
||||
console.log(e.target.value);
|
||||
let newPoints = points;
|
||||
newPoints[index].height = e.target.value;
|
||||
setPoints([...newPoints]);
|
||||
}}
|
||||
value={point.height}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key == "Enter") {
|
||||
setPoints([
|
||||
...points,
|
||||
{
|
||||
id: points.length,
|
||||
len: Number(points[points.length - 1].len) + 1,
|
||||
height: 0,
|
||||
},
|
||||
]);
|
||||
<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">
|
||||
<PencilIcon className="w-5 h-5 text-blue-600" />
|
||||
<span>Punkty profilu</span>
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Wprowadź punkty profilu ręcznie - długość i wysokość nad poziomem morza
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{/* Scale Input */}
|
||||
<Input
|
||||
label="Skala"
|
||||
type="number"
|
||||
placeholder="200"
|
||||
value={args.scale}
|
||||
onChange={(e) => setArgs({ ...args, scale: e.target.value })}
|
||||
/>
|
||||
|
||||
let nextDiv = e.target.parentNode.parentNode.nextSibling;
|
||||
nextDiv.childNodes[1].childNodes[1].focus()
|
||||
nextDiv.childNodes[1].childNodes[1].setSelectionRange(0, 1)
|
||||
}
|
||||
}}
|
||||
></TextInputField>
|
||||
{/* Points List */}
|
||||
<div className="space-y-3 max-h-96 overflow-y-auto">
|
||||
{points.map((point, index) => (
|
||||
<div key={point.id} className="grid grid-cols-2 gap-3 p-3 bg-gray-50 rounded-lg">
|
||||
<Input
|
||||
label={`Punkt ${index + 1} - Długość (m)`}
|
||||
type="number"
|
||||
placeholder="0"
|
||||
value={point.len}
|
||||
onChange={(e) => updatePoint(index, 'len', e.target.value)}
|
||||
/>
|
||||
<div className="flex space-x-2">
|
||||
<Input
|
||||
label="Wysokość (m n.p.m.)"
|
||||
type="number"
|
||||
placeholder="0"
|
||||
value={point.height}
|
||||
onChange={(e) => updatePoint(index, 'height', e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
addPoint();
|
||||
// Focus next input after render
|
||||
setTimeout(() => {
|
||||
const nextInput = e.target.parentNode.parentNode.parentNode.nextSibling?.querySelector('input');
|
||||
if (nextInput) nextInput.focus();
|
||||
}, 100);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{points.length > 1 && (
|
||||
<button
|
||||
onClick={() => removePoint(index)}
|
||||
className="self-end p-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
|
||||
title="Usuń punkt"
|
||||
>
|
||||
<TrashIcon className="w-5 h-5" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex space-x-3">
|
||||
<Button
|
||||
className="mb-5"
|
||||
appearance="minimal"
|
||||
onClick={() => {
|
||||
let newPoints = points;
|
||||
newPoints.splice(index, 1);
|
||||
setPoints([...newPoints]);
|
||||
reIndex();
|
||||
}}
|
||||
onClick={addPoint}
|
||||
variant="outline"
|
||||
className="flex-1"
|
||||
>
|
||||
<Icon icon={TrashIcon} color="danger"></Icon>
|
||||
<PlusIcon className="w-5 h-5 mr-2" />
|
||||
Dodaj punkt
|
||||
</Button>
|
||||
</Pane>
|
||||
))}
|
||||
</Pane>
|
||||
<Button
|
||||
onClick={() => {
|
||||
setPoints([
|
||||
...points,
|
||||
{
|
||||
id: points.length,
|
||||
len: Number(points[points.length - 1].len) + 1,
|
||||
height: 0,
|
||||
},
|
||||
]);
|
||||
}}
|
||||
>
|
||||
Dodaj
|
||||
</Button>
|
||||
<Button
|
||||
appearance="primary"
|
||||
onClick={(e) => {
|
||||
generation(e);
|
||||
}}
|
||||
>
|
||||
Generuj
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
onClick={generation}
|
||||
disabled={isLoading}
|
||||
loading={isLoading}
|
||||
className="flex-1"
|
||||
>
|
||||
<DownloadIcon className="w-5 h-5 mr-2" />
|
||||
{isLoading ? 'Generowanie...' : 'Generuj profil'}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Preview/Instructions Section */}
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Podgląd punktów</CardTitle>
|
||||
<CardDescription>
|
||||
Lista wprowadzonych punktów profilu
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{points.length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
{points.map((point, index) => (
|
||||
<div key={point.id} className="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
|
||||
<span className="font-medium text-gray-900">Punkt {index + 1}</span>
|
||||
<div className="text-sm text-gray-600">
|
||||
<span className="mr-4">Długość: {point.len}m</span>
|
||||
<span>Wysokość: {point.height}m</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</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">
|
||||
<PencilIcon className="w-8 h-8 text-gray-400" />
|
||||
</div>
|
||||
<p className="text-gray-500">Brak punktów do wyświetlenia</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<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ź kolejne punkty profilu z długością i wysokością</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">Użyj klawisza Enter aby szybko dodać następny punkt</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">Ustaw skalę i kliknij "Generuj profil"</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<a href="test.dxf" download="test.dxf" id="down" className="hidden" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
241
components/templates/manual_new.js
Normal file
241
components/templates/manual_new.js
Normal file
@@ -0,0 +1,241 @@
|
||||
import { useState } from "react";
|
||||
import { Card, CardHeader, CardContent, CardTitle, CardDescription, Button, Input } from "../ui/components";
|
||||
import { PencilIcon, PlusIcon, TrashIcon, ArrowDownTrayIcon as DownloadIcon } from '@heroicons/react/24/outline';
|
||||
import axios from "axios";
|
||||
|
||||
export default function Manual() {
|
||||
const [points, setPoints] = useState([{ id: 0, len: 0, height: 0 }]);
|
||||
const [args, setArgs] = useState({ scale: 200 });
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const reIndex = () => {
|
||||
let newId = 0;
|
||||
let newPoints = [];
|
||||
for (let point of points) {
|
||||
point.id = newId;
|
||||
newPoints.push(point);
|
||||
newId += 1;
|
||||
}
|
||||
setPoints([...newPoints]);
|
||||
};
|
||||
|
||||
const addPoint = () => {
|
||||
setPoints([
|
||||
...points,
|
||||
{
|
||||
id: points.length,
|
||||
len: Number(points[points.length - 1].len) + 1,
|
||||
height: 0,
|
||||
},
|
||||
]);
|
||||
};
|
||||
|
||||
const removePoint = (index) => {
|
||||
let newPoints = points;
|
||||
newPoints.splice(index, 1);
|
||||
setPoints([...newPoints]);
|
||||
reIndex();
|
||||
};
|
||||
|
||||
const updatePoint = (index, field, value) => {
|
||||
let newPoints = points;
|
||||
newPoints[index][field] = value;
|
||||
setPoints([...newPoints]);
|
||||
};
|
||||
|
||||
const generation = (e) => {
|
||||
setIsLoading(true);
|
||||
let pointString = "Próbkowanie: 1\nSegment 0: w dół\nX: Y, Z";
|
||||
|
||||
for (let point of points) {
|
||||
pointString += "\n";
|
||||
pointString += Number(point.len) * 1.0;
|
||||
pointString += ", 1.0, ";
|
||||
pointString += point.height;
|
||||
}
|
||||
|
||||
py(e, pointString, args);
|
||||
};
|
||||
|
||||
const py = (e, profil, args) => {
|
||||
e.preventDefault();
|
||||
|
||||
axios
|
||||
.post("/api/spawn", {
|
||||
profil: profil,
|
||||
arguments: args,
|
||||
})
|
||||
.then(function (response) {
|
||||
setIsLoading(false);
|
||||
console.log(response);
|
||||
if (response.data.toString().startsWith("Py Error")) {
|
||||
alert("Błąd: " + response.data);
|
||||
return;
|
||||
}
|
||||
document.getElementById("down").download = response.data.filename.toString() + ".dxf";
|
||||
document.getElementById("down").click();
|
||||
})
|
||||
.catch(function (error) {
|
||||
setIsLoading(false);
|
||||
console.log(error);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<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">
|
||||
<PencilIcon className="w-5 h-5 text-blue-600" />
|
||||
<span>Punkty profilu</span>
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Wprowadź punkty profilu ręcznie - długość i wysokość nad poziomem morza
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{/* Scale Input */}
|
||||
<Input
|
||||
label="Skala"
|
||||
type="number"
|
||||
placeholder="200"
|
||||
value={args.scale}
|
||||
onChange={(e) => setArgs({ ...args, scale: e.target.value })}
|
||||
/>
|
||||
|
||||
{/* Points List */}
|
||||
<div className="space-y-3 max-h-96 overflow-y-auto">
|
||||
{points.map((point, index) => (
|
||||
<div key={point.id} className="grid grid-cols-2 gap-3 p-3 bg-gray-50 rounded-lg">
|
||||
<Input
|
||||
label={`Punkt ${index + 1} - Długość (m)`}
|
||||
type="number"
|
||||
placeholder="0"
|
||||
value={point.len}
|
||||
onChange={(e) => updatePoint(index, 'len', e.target.value)}
|
||||
/>
|
||||
<div className="flex space-x-2">
|
||||
<Input
|
||||
label="Wysokość (m n.p.m.)"
|
||||
type="number"
|
||||
placeholder="0"
|
||||
value={point.height}
|
||||
onChange={(e) => updatePoint(index, 'height', e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
addPoint();
|
||||
// Focus next input after render
|
||||
setTimeout(() => {
|
||||
const nextInput = e.target.parentNode.parentNode.parentNode.nextSibling?.querySelector('input');
|
||||
if (nextInput) nextInput.focus();
|
||||
}, 100);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{points.length > 1 && (
|
||||
<button
|
||||
onClick={() => removePoint(index)}
|
||||
className="self-end p-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
|
||||
title="Usuń punkt"
|
||||
>
|
||||
<TrashIcon className="w-5 h-5" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex space-x-3">
|
||||
<Button
|
||||
onClick={addPoint}
|
||||
variant="outline"
|
||||
className="flex-1"
|
||||
>
|
||||
<PlusIcon className="w-5 h-5 mr-2" />
|
||||
Dodaj punkt
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
onClick={generation}
|
||||
disabled={isLoading}
|
||||
loading={isLoading}
|
||||
className="flex-1"
|
||||
>
|
||||
<DownloadIcon className="w-5 h-5 mr-2" />
|
||||
{isLoading ? 'Generowanie...' : 'Generuj profil'}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Preview/Instructions Section */}
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Podgląd punktów</CardTitle>
|
||||
<CardDescription>
|
||||
Lista wprowadzonych punktów profilu
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{points.length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
{points.map((point, index) => (
|
||||
<div key={point.id} className="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
|
||||
<span className="font-medium text-gray-900">Punkt {index + 1}</span>
|
||||
<div className="text-sm text-gray-600">
|
||||
<span className="mr-4">Długość: {point.len}m</span>
|
||||
<span>Wysokość: {point.height}m</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</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">
|
||||
<PencilIcon className="w-8 h-8 text-gray-400" />
|
||||
</div>
|
||||
<p className="text-gray-500">Brak punktów do wyświetlenia</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<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ź kolejne punkty profilu z długością i wysokością</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">Użyj klawisza Enter aby szybko dodać następny punkt</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">Ustaw skalę i kliknij "Generuj profil"</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<a href="test.dxf" download="test.dxf" id="down" className="hidden" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user