Updated UI, Improved Style to be more "Reactly", added Functionality #27
Generated
+15
-1
@@ -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",
|
||||
|
||||
+5
-4
@@ -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",
|
||||
"eslint-config-next": "14.2.11"
|
||||
"typescript": "^5"
|
||||
}
|
||||
}
|
||||
|
||||
+84
-15
@@ -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;
|
||||
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;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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}>
|
||||
×
|
||||
</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>
|
||||
);
|
||||
}
|
||||
+28
-145
@@ -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">
|
||||
<div className="body_box">
|
||||
<div className="body_title">
|
||||
Your optimization problem:
|
||||
</div>
|
||||
<button className="button">
|
||||
Maximize
|
||||
</button>
|
||||
<button className="button">
|
||||
Minimize
|
||||
</button>
|
||||
<Box
|
||||
title={"Functions"}
|
||||
placeholder={"Your Functions here"}
|
||||
id="funcs"/>
|
||||
<Box
|
||||
title={"Variables"}
|
||||
placeholder={"Your Variables here"}
|
||||
id="vars" />
|
||||
<Button
|
||||
title={"Calculate"}
|
||||
className={"button_green"}
|
||||
onClickFunc={calculate_click} />
|
||||
<Popup_Button
|
||||
title={"Import"}
|
||||
className={"button"} />
|
||||
<Popup_Button
|
||||
title={"Export"}
|
||||
className={"button"} />
|
||||
<br></br>
|
||||
<textarea
|
||||
className="textbox"
|
||||
placeholder="Function"
|
||||
<Output
|
||||
id="out"
|
||||
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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...");
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user