From 312e4ae1f5917e85340cdd0de0c86f043bdc3d9c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcel=20P=C3=B6ppe?= <marcel.poeppe@gmail.com>
Date: Mon, 23 Sep 2024 19:59:46 +0200
Subject: [PATCH] Import/Export Prototype

---
 src/app/globals.css | 23 +++++++++++++++++++++--
 src/app/modules.tsx | 39 ++++++++++++++++++++++++++++++++++++---
 src/app/page.tsx    | 17 ++++++++++++++---
 src/app/scripts.ts  | 15 ++++++++++++++-
 4 files changed, 85 insertions(+), 9 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 05910fe..dc0cd35 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -54,8 +54,16 @@ body {
 }
 
 .button {
-  border: 2px solid #101010;
-  background-color: #101010;
+  border: 2px solid #5353535c;
+  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;
@@ -138,4 +146,15 @@ body {
   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);
 }
\ No newline at end of file
diff --git a/src/app/modules.tsx b/src/app/modules.tsx
index c753701..6b5a122 100644
--- a/src/app/modules.tsx
+++ b/src/app/modules.tsx
@@ -1,4 +1,5 @@
 import { MouseEventHandler } from "react";
+import Popup from "reactjs-popup";
 
 export function Box({title, placeholder, id}:
   {title:string; placeholder:string; id:string}) {
@@ -12,7 +13,7 @@ export function Box({title, placeholder, id}:
             className="body_box"
             id={id}
             wrap="soft"
-            required
+            rows={6}
             placeholder={placeholder}
           ></textarea>
         </div>
@@ -21,13 +22,12 @@ export function Box({title, placeholder, id}:
 }
 
 export function Button({title, className, onClickFunc}:
-  {title:string; className:string; onClickFunc: MouseEventHandler}) {
+  {title:string; className:string|undefined; onClickFunc: MouseEventHandler}) {
 
   return(
     <button
       className={className}
       onClick={onClickFunc}
-      type="submit"
       >
       {title}
   </button>
@@ -35,6 +35,39 @@ export function Button({title, className, onClickFunc}:
   );
 }
 
+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}) {
     
diff --git a/src/app/page.tsx b/src/app/page.tsx
index fa34531..5abd1ad 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,7 +1,7 @@
 'use client'
 
-import { Box, Button, Output } from "./modules.tsx";
-import { test, calculate } from "./scripts.ts"
+import { Box, Button, Output, Popup_Button } from "./modules.tsx";
+import { calculate_click, import_click, export_click } from "./scripts.ts"
 
 export default function Home() {
   return (
@@ -28,10 +28,21 @@ export default function Home() {
       <Button
         title={"Calculate"}
         className={"button_green"}
-        onClickFunc={calculate} />
+        onClickFunc={calculate_click} />
+      <Popup_Button
+        title={"Import"}
+        className={"button"} />
+      <Popup_Button
+        title={"Export"}
+        className={"button"} />
+      <br></br>
       <Output
         id="out"
         text={"Ergebnis"}/>
+      <Popup_Button
+        title="Popup"
+        className="button"
+        />
 
     </>
   );
diff --git a/src/app/scripts.ts b/src/app/scripts.ts
index dbbcf82..fc9c280 100644
--- a/src/app/scripts.ts
+++ b/src/app/scripts.ts
@@ -2,16 +2,29 @@ export function test() {
   console.log("Dies ist die Testfunktion.");
 }
 
-export function calculate() {
+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...");
+
 }
\ No newline at end of file