breathe, =, breathe

components/templates/manual.js

@@ -0,0 +1,121 @@
+import { useState } from "react";
+import {
+	Pane,
+	TextInputField,
+	TextareaField,
+	Button,
+	toaster,
+	Alert,
+    TrashIcon,
+    Icon
+} from "evergreen-ui";
+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 });
+
+
+    const reIndex=()=>{
+        let newId = 0;
+        let newPoints = []
+        for(let point of points){
+            point.id = newId
+            newPoints.push(point)
+            newId += 1;
+        }
+        setPoints([...newPoints])
+    }
+
+	const generation=(e)=>{
+		let pointString ="Próbkowanie: 1\nSegment 0: w dół\nX:	Y,	Z"
+
+		for(let point of points){
+			pointString += '\n'
+			pointString += Number(point.len)
+			pointString += '.0,	1.0,	'
+			pointString += point.height
+		}
+
+		console.log(pointString)
+		py(e,pointString,args)
+	}
+
+	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}>
+					{points.map((point, index) => (
+						<Pane className="flex flex-row">
+							<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}
+							></TextInputField>
+							<Button appearance="minimal" onClick={() => {
+                                let newPoints = points;
+                                newPoints.splice(index, 1);
+                                setPoints([...newPoints]);
+                                reIndex();
+                        }}><Icon icon={TrashIcon} color='danger'></Icon></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>
+			</div>
+		</div>
+	);
+}

pages/index.js

@@ -2,15 +2,19 @@ import Head from "next/head";
 import styles from "../styles/Home.module.css";
 import Header from "../components/templates/header";
 import Generator from "../components/templates/generator";
+import Manual from "../components/templates/manual";
 import Nav from "../components/templates/nav";
 import UserTop from "../components/templates/userTop";
 import Footer from "../components/templates/footer";
 import { useState } from "react";
 import { useSession, signIn, signOut } from "next-auth/react";
-import { Button } from "evergreen-ui";
+import { Pane, Button, Tab, Tablist } from "evergreen-ui";
 
 export default function Home() {
 	const { data: session } = useSession();
+	const [selectedIndex, setSelectedIndex] = useState(0);
+	const [tabs] = useState(["auto", "manual"]);
+	const [realTabs] = useState([Generator, Manual]);
 
 	if (session) {
 		return (
@@ -27,7 +31,41 @@ export default function Home() {
 				<main className="flex flex-1 flex-col items-center">
 					<div className="flex flex-col items-center p-8 mt-12 rounded-md shadow-md transition-all duration-500 hover:shadow-xl">
 						<Header />
-						<Generator />
+						<Tablist>
+							{tabs.map((tab, index) => (
+								<Tab
+									key={tab}
+									id={tab}
+									onSelect={() => setSelectedIndex(index)}
+									isSelected={index === selectedIndex}
+								>
+									{tab}
+								</Tab>
+							))}
+						</Tablist>
+						<Pane>
+							{realTabs.map((tab, index) =>
+								index == 1 ? (
+									<Pane
+										key={tab}
+										id={`panel-${tab}`}
+										role="tabpanel"
+										display={index === selectedIndex ? "block" : "none"}
+									>
+										<Manual />
+									</Pane>
+								) : (
+									<Pane
+										key={tab}
+										id={`panel-${tab}`}
+										role="tabpanel"
+										display={index === selectedIndex ? "block" : "none"}
+									>
+										<Generator />
+									</Pane>
+								)
+							)}
+						</Pane>
 					</div>
 				</main>
 			</div>