HTW-ALADIN · plc-dev · Jun 3, 2024 · Jun 3, 2024 · Jun 24, 2024 · Aug 12, 2024
diff --git a/dist.zip b/dist.zip
diff --git a/index.html b/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>ALADIN</title>
     <script

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
   },
   "dependencies": {
     "@hpcc-js/wasm": "^1.0.1",
+    "@kyvg/vue3-notification": "^3.4.1",
     "@panzoom/panzoom": "^4.5.1",
     "@types/d3": "5.16.0",
     "@types/d3-drag": "1.2.5",
@@ -26,6 +27,8 @@
     "@vueuse/core": "^10.3.0",
     "ace-builds": "^1.22.0",
     "axios": "^1.4.0",
+    "chart.js": "^3.9.1",
+    "chartjs": "^0.3.24",
     "clickout-event": "^1.1.2",
     "d3": "^7.8.5",
     "d3-contour": "^2.0.0",
@@ -36,11 +39,16 @@
     "grid-layout-plus": "^1.0.2",
     "install": "^0.13.0",
     "interactjs": "^1.10.18",
+    "jquery": "^3.7.1",
     "lodash": "^4.17.21",
+    "mathjs": "^14.5.2",
+    "mathlive": "^0.107.0",
+    "nerdamer": "^1.1.13",
+    "notifyjs-browser": "^0.4.2",
     "pinia": "^2.0.36",
     "react-dnd-html5-backend": "^16.0.1",
     "v-tooltip": "^2.1.3",
-    "vue": "^3.3.2",
+    "vue": "^3.5.20",
     "vue-grid-layout": "github:plc-dev/vue-grid-layout#aladin",
     "vue-router": "^4.2.0",
     "vuedraggable": "^2.24.3",
@@ -56,9 +64,13 @@
     "@storybook/testing-library": "^0.2.0",
     "@storybook/vue3-vite": "^7.2.1",
     "@tsconfig/node18": "^2.0.1",
+    "@types/chart.js": "^2.9.41",
+    "@types/jquery": "^3.5.32",
     "@types/jsdom": "^21.1.1",
     "@types/lodash": "^4.14.195",
+    "@types/mathjs": "^9.4.1",
     "@types/node": "^18.16.16",
+    "@types/vue": "^1.0.31",
     "@vitejs/plugin-vue": "^4.2.3",
     "@vue/eslint-config-prettier": "^7.1.0",
     "@vue/eslint-config-typescript": "^11.0.3",

diff --git a/public/img/icons/delete-icon.png b/public/img/icons/delete-icon.png
diff --git a/public/img/tasks/Ferment/Ferment.png b/public/img/tasks/Ferment/Ferment.png
diff --git a/public/img/tasks/FermentExercise/Ferment.png b/public/img/tasks/FermentExercise/Ferment.png
diff --git a/public/img/tasks/Reakt/Reakt_bild.webp b/public/img/tasks/Reakt/Reakt_bild.webp
diff --git a/public/json/tasks/FermentExercise/Exercise.json b/public/json/tasks/FermentExercise/Exercise.json
@@ -0,0 +1,19 @@
+{
+    "Aufgabe"       : "Sie betrachten die  Herstellung von S. cerevisiae Biomasse (c<sub>x</sub>) aus Glucose (c<sub>s</sub>) und einer N-Quelle. Angezeigte Parameter sind vorgegeben (werden nicht verändert). Gesamtmenge an zugegebener Glucose darf 50 g/L (c<sub>s<sub>total</sub></sub>) nicht übersteigen, dieser Wert kann auch im Bereich 20 bis 100 gewürfelt werden, dann werden die Ergebnisse c<sub>x<sub>max</sub></sub> und c<sub>p<sub>min</sub></sub> entsprechend angepasst. Bei der Fermentation bildet sich Ethanol als Nebenprodukt (c<sub>P</sub>), welches unerwünscht ist. Schauen Sie sich das Verhalten der Fermentation in der Batchverfahrensweise an und optimieren Sie die Zugabe der C-Quelle so, dass mehr als 20 g/L Biomasse und weniger als 10 g/L Ethanol nach maximal 24h erreicht werden.",
+    "Startparameter": {
+        "Modell"        : "S.cerevisiae",  
+        "PhasenAnzahl"  : 0,
+        "Zuluft"        : [0,0,0,0],
+        "BolusC"        : [0,0,0,0],
+        "Feed"          : [0,0,0,0],
+        "BolusN"        : [0,0,0,0],
+        "Drehzahl"      : [0,0,0,0],
+        "Druck"         : [0,0,0,0],
+        "Dauer"         : [0,0,0,0],
+        "Temperatur"    : 0,
+        "Startbiomasse" : 0,
+        "Do"            :0        
+    },
+    "Info"          :   "Das theoretische Maximum an c<sub>x</sub> und das globale Minimum für c<sub>p</sub> kann nur erreicht werden wenn c<sub>s</sub> in infinitesimal kleinen Schritten zugegeben wird und die Zugabemenge einer Exponentialfunktion folgt.",
+    "Frage"         :   "„Welcher mathematische Zusammenhang besteht zwischen der Biomassekonzentration und der Fermentationszeit wenn die Biomasse unlimitiert wachsen kann? Wie müsste demnach die Zugabemenge an C-Quelle über die Zeit gestaltet werden?“"
+}
diff --git a/src/components/Canvas.vue b/src/components/Canvas.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="canvas">
+    <notifications/>
     <Navigation :storeObject="storeObject" />
     <Hint :storeObject="storeObject" />
 
@@ -39,16 +40,21 @@
           :drag-allow-from="`.${CONSTANTS.DRAGELEMENTCLASS}`"
           @move="setCoordinates"
           @resize="updateDimensions"
-          :preserveAspectRatio="item.preserveAspectRatio ?? true"
+          :preserveAspectRatio="item.preserveAspectRatio ?? false"
           :data-id="nodeComponentIds[item.i]"
         >
           <img class="dragHandler" :class="CONSTANTS.DRAGELEMENTCLASS" src="/img/drag_arrow.webp" />
-          <component
-            :is="nodeComponents[nodeComponentIds[item.i]].type"
-            :componentID="parseInt(nodeComponentIds[item.i])"
-            :storeObject="storeObject"
-            :componentPath="`nodes__${currentNode}__components__${parseInt(nodeComponentIds[item.i])}`"
-          ></component>
+          <div class="componentLayout">
+            <div class="componentLayout__Header">{{ nodeComponents[nodeComponentIds[item.i]].name }}</div>
+            <div class="componentLayout__Body">
+              <component
+                :is="nodeComponents[nodeComponentIds[item.i]].type"
+                :componentID="parseInt(nodeComponentIds[item.i])"
+                :storeObject="storeObject"
+                :componentPath="`nodes__${currentNode}__components__${parseInt(nodeComponentIds[item.i])}`"
+              ></component>
+            </div>
+          </div>
         </grid-item>
       </grid-layout>
     </div>
@@ -67,6 +73,7 @@ import Navigation from "@/components/Navigation.vue";
 import Hint from "@/components/Hint.vue";
 import TextArea from "@/components/TextArea.vue";
 import Modal from "@/components/Modal.vue";
+import LoadingSpinner from "@/components/LoadingSpinner.vue";
 
 import Matrix from "@/components/taskComponents/math/LinearAlgebra/Matrix.vue";
 import DOTGraph from "@/components/taskComponents/DOTGraph/DOTGraph.vue";
@@ -88,6 +95,15 @@ import GanttDiagram from "@/components/taskComponents/scheduling/GanttDiagram.vu
 import ManipulatableGraph from "@/components/taskComponents/ManipulatableGraph/ManipulatableGraph.vue";
 import ItemPallet from "@/components/taskComponents/DragDrop/ItemPallet/ItemPallet.vue";
 import MoleculeEditor from "@/components/taskComponents/Chemistry/MoleculeEditor/MoleculeEditor.vue";
+import Chart from "@/components/taskComponents/Charts/Chart.vue";
+import EchtButton from "@/components/taskComponents/EchtButton.vue";
+import Bild from "@/components/taskComponents/Bild.vue";
+import absolutInputsOnImage from "@/components/taskComponents/absolutInputsOnImage.vue";
+import BackendFormular from "@/components/taskComponents/BackendFormular.vue";
+import TaskViewer from "@/components/taskComponents/TaskViewer.vue";
+import CheckboxGroup from "@/components/taskComponents/CheckboxGroup.vue";
+import LatexFormula from "@/components/taskComponents/LatexFormula.vue";
+
 
 export default {
   name: "Canvas",
@@ -118,7 +134,15 @@ export default {
     Modal,
     PlanGraph,
     EditableGraph,
-    GanttDiagram
+    GanttDiagram,
+    Chart,
+    EchtButton,
+    Bild,
+    absolutInputsOnImage,
+    BackendFormular,
+    TaskViewer,
+    CheckboxGroup,
+    LatexFormula
   },
   props: {
     storeObject: Object
@@ -337,6 +361,34 @@ export default {
   background-repeat: repeat;
   background-size: calc(calc(100% - 5px) / 12) 40px;
 }
+
+.componentLayout {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+.componentLayout__Header {
+  background-color: #f3f3f3;
+  border-bottom: 1px solid black;
+  padding: 5px;
+  font-weight: bold;
+  text-align: center;
+}
+
+.componentLayout__Body {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+
+.vue-notification-group {
+  width: 25% !important;
+  top: 10% !important;
+}
+
+
 </style>
 
 <style>