package-lock.json

@@ -10,7 +10,8 @@
       "dependencies": {
         "next": "14.2.11",
         "react": "^18",
-        "react-dom": "^18"
+        "react-dom": "^18",
+        "reactjs-popup": "^2.0.6"
       },
       "devDependencies": {
         "@types/node": "^20",
@@ -4203,6 +4204,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/reactjs-popup": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/reactjs-popup/-/reactjs-popup-2.0.6.tgz",
+      "integrity": "sha512-A+tt+x9wdgZiZjv0e2WzYLD3IfFwJALaRaqwrCSXGjo0iQdsry/EtBEbQXRSmQs7cHmOi5eytCiSlOm8k4C+dg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16",
+        "react-dom": ">=16"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",

package.json

@@ -9,18 +9,19 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "next": "14.2.11",
     "react": "^18",
     "react-dom": "^18",
-    "next": "14.2.11"
+    "reactjs-popup": "^2.0.6"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.11",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
-    "eslint": "^8",
+    "typescript": "^5"
-    "eslint-config-next": "14.2.11"
   }
 }

src/app/globals.css

@@ -32,17 +32,6 @@ body {
   width: 100%; /* Optional: gibt dem Container eine Breite */
 }
 
-.textbox {
-  width: 100%; /* Nimmt die volle Breite des Containers ein */
-  margin: 10px; /* Optional: Abstand oberhalb der Textbox */
-  padding: 10px; /* Optional: Innenabstand für die Textbox */
-  border-radius: 20px; /* Abgerundete Ecken */
-  border: 2px solid #580000; /* Optional: Border-Farbe */
-  background-color: #ffffff; /* Hintergrundfarbe */
-  color: #0a0a0a; /* Textfarbe */
-  font-size: 16px; /* Schriftgröße */
-}
-
 .header {
   font-size: 36px;
   text-align: center;
@@ -65,27 +54,107 @@ body {
 }
 
 .button {
-  border: 2px solid #101010;
+  border: 2px solid #5353535c;
-  background-color: #101010;
+  background-color: #1010105c;
   border-radius: 20px;
   margin: 10px;
   padding: 10px;
 }
 
+.button:hover {
+  border: 2px solid #5353535c;
+  background-color: #5353535c;
+  border-radius: 20px;
+  margin: 10px;
+  padding: 10px;
+}
+
+.button_green {
+  border: 2px solid #4795475c;
+  background-color: #247d245c;
+  /* border-radius: 20px; */
+  border-radius: 20px;
+  margin: 10px;
+  padding: 10px;
+}
+
+.button_red {
+  border: 2px solid #9547475c;
+  background-color: #7d24245c;
+  /* border-radius: 20px 10px; */
+  border-radius: 20px;
+  margin: 10px;
+  padding: 10px;
+}
+
+.button_green:hover {
+  border: 2px solid #4795475c;
+  background-color: #4795475c;
+  /* border-radius: 20px; */
+  border-radius: 20px;
+  margin: 10px;
+  padding: 10px;
+}
+
+.button_red:hover {
+  border: 2px solid #9547475c;
+  background-color: #9547475c;
+  /* border-radius: 20px 10px; */
+  border-radius: 20px;
+  margin: 10px;
+  padding: 10px;
+}
+
+.box {
+  width: 100%;
+  padding: 10px;
+  height: 20px;
+}
+
+.main_div {
+  flex: 1;
+  border-width: 0px;
+}
+
 .body_box {
   flex: 1; /* Teilt den verfügbaren Platz auf die Textboxen auf */
-  margin: 10px 10px; /* Optional: fügt einen horizontalen Abstand hinzu */
   padding: 10px; /* Optional: fügt einen inneren Abstand hinzu */
+  width: 100%;
   /* font-size: 16px; // Optional: definiert die Schriftgröße */
   border-radius: 20px;
-  /* border: 2px solid #580000; */
+  border: 2px solid #8d8d8d;
   background-color: #474747;
+  font-size: 10;
 }
 
 .body_title {
   font-size: 20px;
+  margin: 10px;
 }
 
 .text {
   margin: 10px;
 }
+
+.output_box {
+  flex: 1; /* Teilt den verfügbaren Platz auf die Textboxen auf */
+  padding: 10px; /* Optional: fügt einen inneren Abstand hinzu */
+  width: 100%;
+  /* font-size: 16px; // Optional: definiert die Schriftgröße */
+  border-radius: 20px;
+  border: 2px solid #8d8d8d;
+  background-color: #4dc3435c;
+  font-size: 10;
+  height: fit-content 100%;
+}
+
+.popup_bg {
+  width: 2000px;
+  padding: 20px;
+  box-shadow: 0 2px 10px #7c7c7c;
+  background: black;
+}
+
+.popup-overlay {
+  background: rgba(0, 0, 0, 0.5);
+}

src/app/layout.tsx

@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import  Image from "next/image";
 import localFont from "next/font/local";
 import "./globals.css";
 
@@ -29,6 +30,40 @@ export default function RootLayout({
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
         {children}
+        <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
+          <footer className=" flex gap-6 flex-wrap items-center justify-center">
+            <a
+              className="flex items-center gap-2 hover:underline hover:underline-offset-4"
+              href="https://github.com/Spaceholder-Programming/Operations-Research-Tool/wiki"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <Image
+                aria-hidden
+                src="https://nextjs.org/icons/file.svg"
+                alt="File icon"
+                width={16}
+                height={16}
+              />
+              Go to our docs
+            </a>
+            <a
+              className="flex items-center gap-2 hover:underline hover:underline-offset-4"
+              href="https://github.com/Spaceholder-Programming/Operations-Research-Tool/"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <Image
+                aria-hidden
+                src="https://nextjs.org/icons/globe.svg"
+                alt="Globe icon"
+                width={16}
+                height={16}
+              />
+              See the source code
+            </a>
+          </footer>
+        </div>
       </body>
     </html>
   );

src/app/modules.tsx

@@ -0,0 +1,89 @@
+import { MouseEventHandler } from "react";
+import Popup from "reactjs-popup";
+
+export function Box({title, placeholder, id}:
+  {title:string; placeholder:string; id:string}) {
+    return(
+      <div className="main_div">
+        <div className="body_title">
+          {title}
+        </div>
+        <div className="text">
+          <textarea
+            className="body_box"
+            id={id}
+            wrap="soft"
+            rows={6}
+            placeholder={placeholder}
+          ></textarea>
+        </div>
+      </div>
+    );
+}
+
+export function Button({title, className, onClickFunc}:
+  {title:string; className:string|undefined; onClickFunc: MouseEventHandler}) {
+
+  return(
+    <button
+      className={className}
+      onClick={onClickFunc}
+      >
+      {title}
+  </button>
+  
+  );
+}
+
+export function Popup_Button({title, className}:
+  {title:string; className:string|undefined;}) {
+
+  return(
+    <Popup
+      trigger={<button
+        className={className}>
+          {title}
+      </button>}
+      position="right center"
+      modal
+      nested>
+        {close => (
+          <div className="popup_bg">
+          <button  onClick={close}>
+            &times;
+          </button>
+          <div className="header"> {title} </div>
+          <div className="content">
+            This is a popup example.
+          </div>
+          <div className="actions">
+            <button className="button" onClick={close}>
+              Cancel</button>
+          </div>
+        </div>
+        )}
+      </Popup>
+    
+  
+  );
+}
+
+export function Output({id, text}:
+  {id:string; text:string}) {
+    
+  return(
+    <div className="main_div">
+      <div className="body_title"
+      >
+        Output
+      </div>
+      <div className="text">
+        <p
+          className="output_box"
+          id={id}
+          value={text}>
+        </p>
+      </div>
+    </div>
+  );
+}

src/app/page.tsx

@@ -1,4 +1,7 @@
-import Image from "next/image";
+'use client'
+
+import { Box, Button, Output, Popup_Button } from "./modules.tsx";
+import { calculate_click, import_click, export_click } from "./scripts.ts"
 
 export default function Home() {
   return (
@@ -14,153 +17,33 @@ export default function Home() {
           </main>
         </div>
       </header>
-      <div className="grid grid-cols-2 grid-rows-1 p-6">
+      <Box
-        <div className="body_box">
+        title={"Functions"}
-          <div className="body_title">
+        placeholder={"Your Functions here"}
-            Your optimization problem:
+        id="funcs"/>
-          </div>
+      <Box
-          <button className="button">
+        title={"Variables"}
-            Maximize
+        placeholder={"Your Variables here"}
-          </button>
+        id="vars" />
-          <button className="button">
+      <Button
-            Minimize
+        title={"Calculate"}
-          </button>
+        className={"button_green"}
+        onClickFunc={calculate_click} />
+      <Popup_Button
+        title={"Import"}
+        className={"button"} />
+      <Popup_Button
+        title={"Export"}
+        className={"button"} />
       <br></br>
-          <textarea
+      <Output
-            className="textbox"
+        id="out"
-            placeholder="Function"
+        text={"Ergebnis"}/>
+      <Popup_Button
+        title="Popup"
+        className="button"
         />
-          <div className="container">
-            <br></br>
-            <div className="text">s.t.</div>
-            <textarea
-              className="textbox"
-              placeholder="Restriction"
-            />
-            <button className="button">
-              remove
-            </button>
-          </div>
 
-          <div className="container">
-            <br></br>
-            <div className="text">s.t.</div>
-            <textarea
-              className="textbox"
-              placeholder="Restriction"
-            />
-            <button className="button">
-              remove
-            </button>
-          </div>
-          <div className="container">
-            <br></br>
-            <div className="text">s.t.</div>
-            <textarea
-              className="textbox"
-              placeholder="Restriction"
-            />
-            <button className="button">
-              remove
-            </button>
-          </div>
-
-          <button className="button">
-            add
-          </button>
-          <br></br>
-          <button className="button">
-            Calculate
-          </button>
-        </div>
-        <div className="grid grid-cols-1 grod-rows-3">
-          <div className="body_box">
-            <div className="body_title">
-              Result
-            </div>
-          </div>
-          <div className="body_box">
-            <div className="body_title">
-              Variables
-            </div>
-
-            <div className="container">
-            <br></br>
-            <textarea
-              className="textbox"
-              placeholder="Variable"
-            />
-            <button className="button">
-              remove
-            </button>
-          </div>
-          <div className="container">
-            <br></br>
-            <textarea
-              className="textbox"
-              placeholder="Variable"
-            />
-            <button className="button">
-              remove
-            </button>
-          </div>
-          <div className="container">
-            <br></br>
-            <textarea
-              className="textbox"
-              placeholder="Variable"
-            />
-            <button className="button">
-              remove
-            </button>
-          </div>
-
-          <button className="button">
-            add
-          </button>
-
-          </div>
-          <div className="body_box">
-            <div className="body_title">
-              Logs
-            </div>
-          </div>
-        </div>
-      </div>
-      <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-        <footer className=" flex gap-6 flex-wrap items-center justify-center">
-          <a
-            className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-            href="https://github.com/Spaceholder-Programming/Operations-Research-Tool/wiki"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              aria-hidden
-              src="https://nextjs.org/icons/file.svg"
-              alt="File icon"
-              width={16}
-              height={16}
-            />
-            Go to our docs
-          </a>
-          <a
-            className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-            href="https://github.com/Spaceholder-Programming/Operations-Research-Tool/"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              aria-hidden
-              src="https://nextjs.org/icons/globe.svg"
-              alt="Globe icon"
-              width={16}
-              height={16}
-            />
-            See the source code
-          </a>
-        </footer>
-      </div>
     </>
   );
 }

src/app/scripts.ts

@@ -0,0 +1,30 @@
+export function test() {
+  console.log("Dies ist die Testfunktion.");
+}
+
+export function calculate_click() {
+  console.log("Calculating...");
+
+  let functions:string = document.getElementById('funcs').value;
+  let variables:string = document.getElementById('vars').value;
+
+  let funcs:string[] = functions.split(/; */);
+  let vars:string[] = variables.split(/; */);
+
+
+  // Irgend ein Interface
+  // document.getElementById('out').innerHTML = funcs;
+
+  // output.innerHTML = functions.innerHTML;
+
+}
+
+export function import_click() {
+  console.log("Importing...");
+}
+
+
+export function export_click() {
+  console.log("Exporting...");
+
+}