446 lines
13 KiB
JavaScript
446 lines
13 KiB
JavaScript
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 = [];
|
|
const lines = path.split("\n");
|
|
|
|
// Parse the data more accurately
|
|
for (let line of lines) {
|
|
line = line.trim();
|
|
// Skip header lines, segment lines, and empty lines
|
|
if (line.startsWith("Próbkowanie") ||
|
|
line.startsWith("Segment") ||
|
|
line.startsWith("X:") ||
|
|
line === "") {
|
|
continue;
|
|
}
|
|
newLines.push(line);
|
|
}
|
|
|
|
if (newLines.length === 0) {
|
|
console.log("No valid coordinate data found");
|
|
return;
|
|
}
|
|
|
|
let points = [];
|
|
|
|
// Parse coordinates more reliably
|
|
for (let line of newLines) {
|
|
const coords = line.split(/[,\t]+/).map(s => s.trim());
|
|
if (coords.length >= 3) {
|
|
const x = parseFloat(coords[0]);
|
|
const y = parseFloat(coords[1]);
|
|
const z = parseFloat(coords[2]);
|
|
|
|
if (!isNaN(x) && !isNaN(y) && !isNaN(z)) {
|
|
points.push({ x, y, z });
|
|
}
|
|
}
|
|
}
|
|
|
|
if (points.length === 0) {
|
|
console.log("No valid points parsed");
|
|
return;
|
|
}
|
|
|
|
console.log(`Parsed ${points.length} points`);
|
|
|
|
const canvas = document.getElementById("canvas");
|
|
console.log("Canvas element:", canvas);
|
|
if (!canvas || !canvas.getContext) {
|
|
console.log("canvas not found or no context available");
|
|
console.log("canvas exists:", !!canvas);
|
|
console.log("getContext available:", canvas ? !!canvas.getContext : false);
|
|
return;
|
|
}
|
|
|
|
const ctx = canvas.getContext("2d");
|
|
const canvasWidth = 800; // Match the canvas width
|
|
const canvasHeight = 400; // Match the canvas height
|
|
const padding = 50;
|
|
|
|
// Clear canvas
|
|
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
|
|
|
|
// Calculate bounds
|
|
const xCoords = points.map(p => p.x);
|
|
const yCoords = points.map(p => p.y);
|
|
const zCoords = points.map(p => p.z);
|
|
|
|
const minX = Math.min(...xCoords);
|
|
const maxX = Math.max(...xCoords);
|
|
const minY = Math.min(...yCoords);
|
|
const maxY = Math.max(...yCoords);
|
|
const minZ = Math.min(...zCoords);
|
|
const maxZ = Math.max(...zCoords);
|
|
|
|
// Calculate distances along the path
|
|
let distances = [0];
|
|
let totalDistance = 0;
|
|
|
|
for (let i = 1; i < points.length; i++) {
|
|
const dx = points[i].x - points[i-1].x;
|
|
const dy = points[i].y - points[i-1].y;
|
|
const distance = Math.sqrt(dx * dx + dy * dy);
|
|
totalDistance += distance;
|
|
distances.push(totalDistance);
|
|
}
|
|
|
|
console.log(`Total distance: ${totalDistance.toFixed(2)}m, Height range: ${minZ.toFixed(2)}m - ${maxZ.toFixed(2)}m`);
|
|
|
|
// Set up drawing area
|
|
const drawWidth = canvasWidth - 2 * padding;
|
|
const drawHeight = canvasHeight - 2 * padding;
|
|
|
|
// Draw coordinate system
|
|
ctx.strokeStyle = "#E5E7EB";
|
|
ctx.lineWidth = 1;
|
|
|
|
// Draw grid
|
|
const gridLines = 10;
|
|
for (let i = 0; i <= gridLines; i++) {
|
|
const x = padding + (i / gridLines) * drawWidth;
|
|
const y = padding + (i / gridLines) * drawHeight;
|
|
|
|
// Vertical grid lines
|
|
ctx.beginPath();
|
|
ctx.moveTo(x, padding);
|
|
ctx.lineTo(x, canvasHeight - padding);
|
|
ctx.stroke();
|
|
|
|
// Horizontal grid lines
|
|
ctx.beginPath();
|
|
ctx.moveTo(padding, y);
|
|
ctx.lineTo(canvasWidth - padding, y);
|
|
ctx.stroke();
|
|
}
|
|
|
|
// Draw axes
|
|
ctx.strokeStyle = "#6B7280";
|
|
ctx.lineWidth = 2;
|
|
|
|
// X-axis (bottom)
|
|
ctx.beginPath();
|
|
ctx.moveTo(padding, canvasHeight - padding);
|
|
ctx.lineTo(canvasWidth - padding, canvasHeight - padding);
|
|
ctx.stroke();
|
|
|
|
// Y-axis (left)
|
|
ctx.beginPath();
|
|
ctx.moveTo(padding, padding);
|
|
ctx.lineTo(padding, canvasHeight - padding);
|
|
ctx.stroke();
|
|
|
|
// Draw labels
|
|
ctx.fillStyle = "#374151";
|
|
ctx.font = "12px sans-serif";
|
|
ctx.textAlign = "center";
|
|
|
|
// Distance labels (bottom)
|
|
for (let i = 0; i <= 5; i++) {
|
|
const distance = (totalDistance * i) / 5;
|
|
const x = padding + (i / 5) * drawWidth;
|
|
ctx.fillText(`${distance.toFixed(0)}m`, x, canvasHeight - padding + 20);
|
|
}
|
|
|
|
// Height labels (left)
|
|
ctx.textAlign = "right";
|
|
for (let i = 0; i <= 5; i++) {
|
|
const height = minZ + ((maxZ - minZ) * i) / 5;
|
|
const y = canvasHeight - padding - (i / 5) * drawHeight;
|
|
ctx.fillText(`${height.toFixed(1)}m`, padding - 10, y + 4);
|
|
}
|
|
|
|
// Draw profile line
|
|
ctx.strokeStyle = "#3B82F6";
|
|
ctx.lineWidth = 3;
|
|
ctx.lineCap = "round";
|
|
ctx.lineJoin = "round";
|
|
|
|
ctx.beginPath();
|
|
for (let i = 0; i < points.length; i++) {
|
|
const x = padding + (distances[i] / totalDistance) * drawWidth;
|
|
const y = canvasHeight - padding - ((points[i].z - minZ) / (maxZ - minZ)) * drawHeight;
|
|
|
|
if (i === 0) {
|
|
ctx.moveTo(x, y);
|
|
} else {
|
|
ctx.lineTo(x, y);
|
|
}
|
|
}
|
|
ctx.stroke();
|
|
|
|
// Draw elevation points
|
|
ctx.fillStyle = "#3B82F6";
|
|
for (let i = 0; i < points.length; i++) {
|
|
const x = padding + (distances[i] / totalDistance) * drawWidth;
|
|
const y = canvasHeight - padding - ((points[i].z - minZ) / (maxZ - minZ)) * drawHeight;
|
|
|
|
ctx.beginPath();
|
|
ctx.arc(x, y, 4, 0, 2 * Math.PI);
|
|
ctx.fill();
|
|
}
|
|
|
|
// Add title
|
|
ctx.fillStyle = "#1F2937";
|
|
ctx.font = "16px sans-serif";
|
|
ctx.textAlign = "center";
|
|
ctx.fillText("Profil terenu", canvasWidth / 2, 30);
|
|
|
|
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);
|
|
}}
|
|
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>
|
|
|
|
<div className="flex space-x-3">
|
|
<Button
|
|
onClick={() => {
|
|
const textareaValue = document.getElementById("textarea-1").value;
|
|
if (textareaValue && textareaValue.startsWith("Próbkowanie")) {
|
|
// First set preview visible, then draw after a small delay
|
|
setPreviewVisible(true);
|
|
setTimeout(() => {
|
|
getPath(null, textareaValue);
|
|
}, 50);
|
|
} else {
|
|
alert("Wprowadź poprawne dane z Geoportalu");
|
|
}
|
|
}}
|
|
variant="outline"
|
|
className="flex-1"
|
|
>
|
|
<EyeIcon className="w-5 h-5 mr-2" />
|
|
Podgląd
|
|
</Button>
|
|
|
|
<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="flex-1"
|
|
>
|
|
<DownloadIcon className="w-5 h-5 mr-2" />
|
|
{isLoading ? 'Generowanie...' : 'Generuj profil'}
|
|
</Button>
|
|
</div>
|
|
</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>
|
|
<div className="bg-gray-50 rounded-lg p-4">
|
|
<canvas
|
|
id="canvas"
|
|
height="400"
|
|
width="800"
|
|
className="border border-gray-200 rounded bg-white w-full max-w-full"
|
|
style={{ display: previewVisible ? 'block' : 'none' }}
|
|
/>
|
|
{!previewVisible && (
|
|
<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 i kliknij "Podgląd" aby zobaczyć profil</p>
|
|
</div>
|
|
)}
|
|
</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 "Podgląd" aby zobaczyć wizualizację profilu</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">4</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>
|
|
);
|
|
}
|