przekroj/components/templates/generator.js

import { useState, useEffect } from "react";
import { useRouter } from "next/router";
import {
	Pane,
	TextInputField,
	TextareaField,
	Button,
	BuildIcon,
	toaster,
	Alert,
	RadioGroup,
} from "evergreen-ui";
import axios from "axios";

import Footer from "./footer";

export default function Generator() {
	const [profil, setProfil] = useState();
	const [args, setArgs] = useState({
		scale: 200,
		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 { query } = useRouter();

	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 = [];
		let ys = [];
		let zs = [];
		let toti = 0;
		let 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]
			)
				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]));
		}
		let prevLine = ["0", "0", "0"];
		let scaleFactor = 100000 / 2000;
		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.lineWidth = 2;
		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 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);
	};

	const py = (e, profil, args) => {
		e.preventDefault();

		axios
			.post("/api/spawn", {
				profil: profil,
				arguments: args,
			})
			.then(function (response) {
				console.log(response);
				if (response.data.toString().startsWith("Py Error")) {
					toaster.danger(response.data);
					return;
				}
				toaster.warning(response.data.data);
				document.getElementById("down").download =
					response.data.filename.toString() + ".dxf";
				document.getElementById("down").click();
			})
			.catch(function (error) {
				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);
						}}
					/>

					<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>

				<a href="test.dxf" download="test.dxf" id="down">
					{" "}
				</a>
			</div>
			<Pane className="ml-8 shadow-md rounded-md">
				<canvas id="canvas" height="500" width="700"></canvas>
			</Pane>
		</div>
	);
}