third time's a charm

package.json

@@ -10,12 +10,15 @@
   },
   "dependencies": {
     "@supercharge/request-ip": "^1.1.2",
+    "axios": "^0.26.0",
     "child_process": "^1.0.2",
+    "evergreen-ui": "^6.8.2",
     "next": "^12.0.10",
     "next-auth": "^4.2.1",
     "nodemailer": "^6.7.2",
     "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react-dom": "17.0.2",
+    "three": "^0.137.5"
   },
   "devDependencies": {
     "autoprefixer": "^10.4.0",

pages/api/spawn.js

@@ -4,7 +4,7 @@ export default function (req, res) {
 	//console.log(req.body);
 	//file
 	let textData = req.body.profil;
-  let replacedData = textData.replace("<22>", "o").replace("<22>", "e");
+	let replacedData = textData.replace("<22>", "o").replace("<22>", "e");
 	console.log(replacedData);
 
 	var fs = require("fs");
@@ -15,17 +15,19 @@ export default function (req, res) {
 	});
 
 	//py
+	let fileName = Math.floor(Math.random() * 9999) + 1000;
 
-  const python = spawn("python3", ["a.py"]);
+	const python = spawn("python3", ["a.py", req.body.arguments.scale, fileName]);
 
 	let dataToSend;
 	python.stdout.on("data", function (data) {
 		console.log("Pipe data from python script ...");
 		dataToSend = data.toString();
-    //console.log(dataToSend)
+		console.log(dataToSend);
 	});
-python.stderr.on('data', (data) => {
+	python.stderr.on("data", (data) => {
 		console.error(`stderr: ${data}`);
+		res.send("Py Error: " + data);
 	});
 	// in close event we are sure that stream from child process is closed
 	python.on("close", (code) => {
@@ -33,6 +35,10 @@ python.stderr.on('data', (data) => {
 		// send data to browser
 		console.log(dataToSend);
 		console.log("done");
-    res.send("dataToSend");
+		try {
+			res.status(200).send({ filename: fileName, data: dataToSend });
+		} catch (e) {
+			console.log("child process end");
+		}
 	});
 }

pages/index.js

@@ -1,30 +1,16 @@
 import Head from "next/head";
 import styles from "../styles/Home.module.css";
 import Header from "./templates/header";
+import Generator from "./templates/generator";
 import Nav from "./templates/nav";
 import Content from "./templates/content";
 import Footer from "./templates/footer";
 import { useState } from "react";
 import { useSession, signIn, signOut } from "next-auth/react";
+import { Button } from "evergreen-ui";
 
 export default function Home() {
 	const { data: session } = useSession();
-  const [profil, setProfil] = useState();
-
-  const py = (e, profil) => {
-    e.preventDefault();
-    fetch("/api/spawn", {
-      method: "POST",
-      headers: {
-        Accept: "application/json, text/plain, */*",
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({ profil: profil }),
-    }).then((res) => {
-      console.log("data from api: ", res);
-      document.getElementById("down").click();
-    });
-  };
 
 	if (session) {
 		return (
@@ -40,35 +26,15 @@ export default function Home() {
 						<h3 className="px-3 py-2 place-self-end">
 							Zalogowano jako {session.user.email}
 						</h3>
-            <button
+						<Button onClick={() => signOut()} className="place-self-end">
-              onClick={() => signOut()}
-              className="p-2 bg-slate-200 rounded-md place-self-end"
-            >
 							Wyloguj
-            </button>
+						</Button>
 					</div>
 				</div>
 
 				<main className={styles.main}>
 					<Header />
-          <textarea
+					<Generator />
-            id="profil"
-            className="bg-gray-100 h-96 w-96"
-            onChange={(e) => {
-              console.log(e.target.value);
-              setProfil(e.target.value);
-            }}
-          ></textarea>
-          <button
-            onClick={(e) => {
-              py(e, profil);
-            }}
-          >
-            Generuj
-          </button>
-          <a href="test.dxf" download="test.dxf" id="down">
-            {" "}
-          </a>
 				</main>
 				<Footer />
 			</div>
@@ -82,15 +48,16 @@ export default function Home() {
 				<meta name="description" content="Wastpol" />
 				<link rel="icon" href="/icon.png" />
 			</Head>
-      <div className="flex justify-center">
+			<div className="flex flex-col justify-center">
 				<h2 className="p-2">Nie zalogowano</h2>
 				<br></br>
-        <button
+				<Button
 					onClick={() => signIn()}
-          className="p-2 bg-slate-200 rounded-md"
+					appearance="primary"
+					// className="p-2 bg-slate-200 rounded-md"
 				>
 					Zaloguj
-        </button>
+				</Button>
 			</div>
 		</div>
 	);

pages/templates/generator.js

@@ -0,0 +1,95 @@
+import { useState } from "react";
+import {
+	Pane,
+	TextInputField,
+	TextareaField,
+	Button,
+	BuildIcon,
+	toaster,
+	Alert,
+} from "evergreen-ui";
+import axios from "axios";
+
+export default function Generator() {
+	const [profil, setProfil] = useState();
+	const [args, setArgs] = useState({ scale: 200 });
+
+	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 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);
+					}}
+				/>
+
+				<TextInputField
+					label="Skala:"
+					placeholder="200"
+					width={100}
+					onChange={(e) => {
+						console.log(e.target.value);
+						setArgs({ ...args, scale: e.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>
+	);
+}

pages/templates/header.js

@@ -1,9 +1,12 @@
 import styles from "../../styles/Home.module.css";
+import { Pane, Heading } from "evergreen-ui";
 
 export default function Header() {
 	return (
-    <div>
+		<Pane>
-      <h1 className="text-3xl p-6">Generuj profil przekroju terenu</h1>
+			<Heading is="h1" size={800} marginBottom={42}>
-    </div>
+				Generuj profil przekroju terenu
+			</Heading>
+		</Pane>
 	);
 }

pages/templates/nav.js

@@ -1,8 +1,9 @@
 import Link from "next/link";
+import { Pane, Heading } from "evergreen-ui";
 
 export default function Nav() {
 	return (
-    <div className="flex">
+		<Pane display="flex">
 			<Link href="/">
 				<h2 className="px-2 place-self-center">
 					<img src="logo.png" className="h-12" />
@@ -14,6 +15,6 @@ export default function Nav() {
 			<Link href="/kontakt">
 				<h3 className="px-3 py-2 place-self-end">Kontakt</h3>
 			</Link>
-    </div>
+		</Pane>
 	);
 }