Integrated the demand table into the Dialog.jsx

client/src/pages/Home/components/Dialog/Dialog.jsx

@@ -1,12 +1,39 @@
 import "./styles.sass";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faGear, faXmark} from "@fortawesome/free-solid-svg-icons";
+import {faGear, faPlus, faTrash, faXmark} from "@fortawesome/free-solid-svg-icons";
 import {useContext} from "react";
 import {SettingsContext} from "@/common/contexts/SettingsProvider.jsx";
+import Button from "@/common/components/Button/index.js";
 
 export const Dialog = ({onClose, open}) => {
 
-    const {rounds, updateRounds} = useContext(SettingsContext);
+    const {rounds, updateRounds, demandTable, updateDemandTable} = useContext(SettingsContext);
+
+    const deleteDemand = (key) => {
+        let newDemandTable = {...demandTable};
+        delete newDemandTable[key];
+        updateDemandTable(newDemandTable);
+    }
+
+    const updateDemand = (key, e) => {
+        let newDemandTable = {...demandTable};
+        newDemandTable[key] = parseInt(e.target.value);
+        updateDemandTable(newDemandTable);
+    }
+
+    const updateDemandKey = (key, e) => {
+        let newDemandTable = {...demandTable};
+        delete newDemandTable[key];
+        newDemandTable[e.target.value] = parseInt(Object.values(demandTable)[Object.keys(demandTable).indexOf(key)]);
+        updateDemandTable(newDemandTable);
+    }
+
+    const addDemand = () => {
+        if (Object.keys(demandTable).length >= 5) return;
+        let newDemandTable = {...demandTable};
+        newDemandTable[parseInt(Object.keys(demandTable).pop()) + 500] = parseInt(Object.values(demandTable).pop()) - 10;
+        updateDemandTable(newDemandTable);
+    }
 
     return (
         <>
@@ -20,11 +47,44 @@ export const Dialog = ({onClose, open}) => {
                 </div>
                 <div className="dialog-content">
 
+                    <div className="dialog-sub">
+                        <hr/>
+                        <h2>Grundlegendes</h2>
+                        <hr/>
+                    </div>
+
                     <div className="dialog-item">
                         <h2>Runden</h2>
                         <input type="number" className="glassy input" value={rounds}
                                onChange={(e) => updateRounds(parseInt(e.target.value))} />
                     </div>
+
+                    <div className="dialog-sub">
+                        <hr/>
+                        <h2>Nachfrage</h2>
+                        <hr/>
+                    </div>
+
+                    {Object.keys(demandTable).map((key) => {
+                        return (
+                            <div className="dialog-item" key={key}>
+                                <div className="dialog-left">
+                                    <h2>Ab {key === "0" && "0 €"}</h2>
+                                    {key !== "0" && <input type="number" className="glassy input" value={key}
+                                             onChange={(e) => updateDemandKey(key, e)} />}
+                                </div>
+                                <div className="dialog-right">
+                                    <input type="number" className="glassy input" value={demandTable[key]}
+                                           onChange={(e) => updateDemand(key, e)} />
+                                    {key !== "0" && <FontAwesomeIcon icon={faTrash} onClick={() => deleteDemand(key)} />}
+                                </div>
+                            </div>
+                        );
+                    })}
+
+                    <div className="demand-area">
+                        <Button onClick={() => addDemand()} icon={faPlus} text="Hinzufügen" />
+                    </div>
                     
                 </div>
             </div>