From 20c4211d5b3121fb628b8c736f1200a9271612a7 Mon Sep 17 00:00:00 2001
From: co <gitea@c-opitz.de>
Date: Sun, 12 Nov 2023 12:06:43 +0100
Subject: [PATCH] Entwurf Integration Lebensmittel

---
 src/App.vue | 180 +++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 177 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index e18af81..d6357f1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -14,6 +14,11 @@
     src="./assets/img/desert_landscape.png"
     style="width: 0px; height: 0px"
   />
+  <img
+    id="lebensmittel"
+    src="./assets/img/weiss_pixel.png"
+    style="width: 0px; height: 0px"
+  />
 
   <h2>
     Finde heraus, wie die Positionen der {{ this.bezeichnung_prototypen }} an
@@ -151,10 +156,9 @@
         In jeder Zeile werden die zugehörigen Werte dargestellt für einen...
         <br />
         <div class="row">
-          
           <div class="column" style="text-align: center">
             <b>Datenpunkt</b><br />
-            x; y<br>
+            x; y<br />
             <textarea
               v-model="txt_datensatz"
               placeholder="add multiple lines"
@@ -192,6 +196,9 @@
           <option value="stadtplan">
             Stadtplan (Haushalte und U-Bahn-Stationen)
           </option>
+          <option value="lebensmittel">
+            Lebensmittel (diverse Lebensmittel und Lebensmittelgruppen)
+          </option>
           <option value="kein_bild">reine Datenansicht</option>
         </select>
       </div>
@@ -245,6 +252,126 @@ export default {
         { x: 300, y: 300, color: "black" },
       ],
 
+      lebensmittel_datenpunkte: [
+        { x: 0, y: 10, color: "black" },
+        { x: 0, y: 40, color: "black" },
+        { x: 0, y: 40, color: "black" },
+        { x: 0, y: 50, color: "black" },
+        { x: 0, y: 60, color: "black" },
+        { x: 0, y: 30, color: "black" },
+        { x: 10, y: 60, color: "black" },
+        { x: 0, y: 140, color: "black" },
+        { x: 0, y: 150, color: "black" },
+        { x: 10, y: 90, color: "black" },
+        { x: 30, y: 140, color: "black" },
+        { x: 0, y: 210, color: "black" },
+        { x: 10, y: 200, color: "black" },
+        { x: 2, y: 0, color: "black" },
+        { x: 70, y: 40, color: "black" },
+        { x: 130, y: 20, color: "black" },
+        { x: 130, y: 0, color: "black" },
+        { x: 80, y: 180, color: "black" },
+        { x: 170, y: 10, color: "black" },
+        { x: 110, y: 240, color: "black" },
+        { x: 0, y: 520, color: "black" },
+        { x: 140, y: 10, color: "black" },
+        { x: 50, y: 350, color: "black" },
+        { x: 180, y: 10, color: "black" },
+        { x: 110, y: 210, color: "black" },
+        { x: 110, y: 220, color: "black" },
+        { x: 20, y: 550, color: "black" },
+        { x: 0, y: 730, color: "black" },
+        { x: 140, y: 360, color: "black" },
+        { x: 220, y: 110, color: "black" },
+        { x: 50, y: 510, color: "black" },
+        { x: 310, y: 30, color: "black" },
+        { x: 0, y: 770, color: "black" },
+        { x: 330, y: 60, color: "black" },
+        { x: 10, y: 770, color: "black" },
+        { x: 30, y: 610, color: "black" },
+        { x: 280, y: 0, color: "black" },
+        { x: 20, y: 710, color: "black" },
+        { x: 310, y: 20, color: "black" },
+        { x: 260, y: 290, color: "black" },
+        { x: 70, y: 590, color: "black" },
+        { x: 60, y: 710, color: "black" },
+        { x: 50, y: 740, color: "black" },
+        { x: 110, y: 610, color: "black" },
+        { x: 260, y: 540, color: "black" },
+        { x: 240, y: 530, color: "black" },
+        { x: 230, y: 570, color: "black" },
+        { x: 280, y: 530, color: "black" },
+        { x: 300, y: 590, color: "black" },
+        { x: 320, y: 540, color: "black" },
+        { x: 430, y: 370, color: "black" },
+        { x: 480, y: 80, color: "black" },
+        { x: 800, y: 0, color: "black" },
+        { x: 790, y: 0, color: "black" },
+        { x: 700, y: 60, color: "black" },
+        { x: 820, y: 10, color: "black" },
+      ],
+
+      /*
+       lebensmittel_datenpunkte: [
+        { x: 0, y: 1, color: "black" },
+        { x: 0, y: 4, color: "black" },
+        { x: 0, y: 4, color: "black" },
+        { x: 0, y: 5, color: "black" },
+        { x: 0, y: 6, color: "black" },
+        { x: 0, y: 3, color: "black" },
+        { x: 1, y: 6, color: "black" },
+        { x: 0, y: 14, color: "black" },
+        { x: 0, y: 15, color: "black" },
+        { x: 1, y: 9, color: "black" },
+        { x: 3, y: 14, color: "black" },
+        { x: 0, y: 21, color: "black" },
+        { x: 1, y: 20, color: "black" },
+        { x: 2, y: 0, color: "black" },
+        { x: 7, y: 4, color: "black" },
+        { x: 13, y: 2, color: "black" },
+        { x: 13, y: 0, color: "black" },
+        { x: 8, y: 18, color: "black" },
+        { x: 17, y: 1, color: "black" },
+        { x: 11, y: 24, color: "black" },
+        { x: 0, y: 52, color: "black" },
+        { x: 14, y: 1, color: "black" },
+        { x: 5, y: 35, color: "black" },
+        { x: 18, y: 1, color: "black" },
+        { x: 11, y: 21, color: "black" },
+        { x: 11, y: 22, color: "black" },
+        { x: 2, y: 55, color: "black" },
+        { x: 0, y: 73, color: "black" },
+        { x: 14, y: 36, color: "black" },
+        { x: 22, y: 11, color: "black" },
+        { x: 5, y: 51, color: "black" },
+        { x: 31, y: 3, color: "black" },
+        { x: 0, y: 77, color: "black" },
+        { x: 33, y: 6, color: "black" },
+        { x: 1, y: 77, color: "black" },
+        { x: 3, y: 61, color: "black" },
+        { x: 28, y: 0, color: "black" },
+        { x: 2, y: 71, color: "black" },
+        { x: 31, y: 2, color: "black" },
+        { x: 26, y: 29, color: "black" },
+        { x: 7, y: 59, color: "black" },
+        { x: 6, y: 71, color: "black" },
+        { x: 5, y: 74, color: "black" },
+        { x: 11, y: 61, color: "black" },
+        { x: 26, y: 54, color: "black" },
+        { x: 24, y: 53, color: "black" },
+        { x: 23, y: 57, color: "black" },
+        { x: 28, y: 53, color: "black" },
+        { x: 30, y: 59, color: "black" },
+        { x: 32, y: 54, color: "black" },
+        { x: 43, y: 37, color: "black" },
+        { x: 48, y: 8, color: "black" },
+        { x: 80, y: 0, color: "black" },
+        { x: 79, y: 0, color: "black" },
+        { x: 70, y: 6, color: "black" },
+        { x: 82, y: 1, color: "black" },
+      ],
+      */
+
       datenpunkte: [
         { x: 300, y: 300, color: "black" },
         { x: 202, y: 70, color: "black" },
@@ -291,6 +418,8 @@ export default {
           return "Goldstücke";
         case "stadtplan":
           return "Haushalte";
+        case "Lebensmittel":
+          return "Lebensmittel";
       }
       return "Datenpunkte";
     },
@@ -443,10 +572,55 @@ export default {
     },
 
     szenario_aendern() {
+      if (this.szenario == "lebensmittel") {
+        this.datenpunkte = this.ermittle_skalierten_datensatz(
+          this.lebensmittel_datenpunkte
+        );
+        this.anzahl_datenpunkte = this.datenpunkte.length;
+        this.update_anzahl_prototypen(4);
+        this.datensatz_2_textarea();
+      }
+
       this.loesche_zeichenflaeche();
       this.refresh();
     },
 
+    ermittle_skalierten_datensatz(ds_eingabe) {
+      let breite = 800;
+      let hoehe = 450;
+      let max_x = 0;
+      let max_y = 0;
+      let ds_ausgabe = [];
+
+      ds_eingabe.forEach((element) => {
+        if (element.x > max_x) {
+          max_x = element.x;
+        }
+        if (element.y > max_y) {
+          max_y = element.y;
+        }
+      });
+
+      max_x += 50;
+      max_y += 50;
+
+      ds_eingabe.forEach((element) => {
+        let x_skaliert = Math.round((element.x / max_x) * breite);
+        //let y_skaliert = Math.round(hoehe - (element.y / max_y) * hoehe); // y invertieren
+        let y_skaliert = Math.round((element.y / max_y) * hoehe);
+        ds_ausgabe.push({ x: x_skaliert, y: y_skaliert, color: element.color });
+      });
+      
+      // Array mischen
+      ds_ausgabe = this.shuffleArray(ds_ausgabe);
+      return ds_ausgabe;
+    },
+
+    shuffleArray(arr) {
+      arr.sort(() => Math.random() - 0.5);
+      return arr;
+    },
+
     update_anzahl_datenpunkte(new_value) {
       if (new_value >= 0) {
         console.log("angekommen." + new_value);
@@ -1125,7 +1299,7 @@ export default {
 .column {
   flex: 50%;
   padding: 10px;
- /*border: solid black 1px;
+  /*border: solid black 1px;
   /*height: 300px; /* Should be removed. Only for demonstration */
 }