src/App.vue

@@ -53,13 +53,6 @@
     {{ animation_speed }} ms
   </div>
 
-  <br />
-  <div>
-    <button class="btn btn-primary" @click="szenario_zuruecksetzen">
-      Szenario zurücksetzen
-    </button>
-  </div>
-
   <br />
 
   <div style="width: 800px; margin: auto">
@@ -70,15 +63,15 @@
       <div class="row">
         <div class="column">
           {{ this.bezeichnung_aktueller_datenpunkt }}:
-          <button class="btn btn-primary" @click="voriger_datenpunkt">-</button>
+          <button class="btn btn-primary" @click="voriges_datenpunkt">-</button>
           &nbsp;<b style="font-size: x-large">{{ aktueller_datenpunkt }}</b
           >&nbsp;
-          <button class="btn btn-primary" @click="naechster_datenpunkt">
+          <button class="btn btn-primary" @click="naechstes_datenpunkt">
             +
           </button>
         </div>
         <div class="column">
-          {{ this.bezeichnung_aktueller_prototyp }}:
+          {{ this.r }}:
           <!-- <button @click="voriger_prototyp">-</button> -->
           <b style="font-size: x-large">{{ aktueller_prototyp }}</b>
           <!-- <button @click="naechster_prototyp">+</button> -->
@@ -175,7 +168,7 @@
           </option>
           <option value="kein_bild">reine Datenansicht</option>
         </select>
-      </div>
+      </div>>
       <br />
     </div>
   </div>
@@ -244,12 +237,6 @@ export default {
         { x: 120, y: 150, color: "blue" },
       ],
 
-      prototypen_original: [
-        { x: 540, y: 50, color: "blue" },
-        { x: 380, y: 370, color: "blue" },
-        { x: 120, y: 150, color: "blue" },
-      ],
-
       canvas: null,
       vueCanvas: null,
       aktueller_datenpunkt: 0,
@@ -422,8 +409,6 @@ export default {
       }
     },
     update_anzahl_prototypen(new_value) {
-      // Original Prototypen laden
-      this.prototypen = JSON.parse(JSON.stringify(this.prototypen_original))
       if (new_value >= 0) {
         console.log("angekommen." + new_value);
         this.anzahl_prototypen = new_value;
@@ -433,20 +418,15 @@ export default {
         }
 
         while (this.prototypen.length < this.anzahl_prototypen) {
-          let neuer_prototyp = this.generiere_prototyp_zufaellig();
-          this.prototypen.push(neuer_prototyp);
+          let neue_prototyp = this.generiere_prototyp_zufaellig();
+          this.prototypen.push(neue_prototyp);
         }
         //this.update_zeichnung_child_component();
         //        this.datensatz_2_textarea();
         this.refresh();
       } else {
         this.anzahl_prototypen = 0;
-        while (this.prototypen.length > this.anzahl_prototypen) {
-          this.prototypen.pop();
       }
-      }
-      // Original Prototypen merken
-      this.prototypen_original = JSON.parse(JSON.stringify(this.prototypen))
     },
     /*
     update_zeichnung_child_component() {
@@ -503,7 +483,7 @@ export default {
       }
     },
 
-    faerbe_datenpunkte(alle) {
+    farben_anpassen(alle) {
       for (let i = 0; i < this.datenpunkte.length; i++) {
         if (alle || i < this.aktueller_datenpunkt) {
           let next_prototyp = this.gib_naechstgelegener_prototyp(this.datenpunkte[i]);
@@ -580,7 +560,7 @@ export default {
       this.vueCanvas.stroke();
     },
 
-    zeichne_linie_datenpunkt_naechstgelegener_prototyp(datenpunkt) {
+    zeichne_linie_datenpunkt_naechstgelegene_prototyp(datenpunkt) {
       let farbe = "red";
       let staerke = 2;
       let prototyp = this.gib_naechstgelegener_prototyp(datenpunkt);
@@ -683,14 +663,14 @@ export default {
         i++;
       });
     },
-    naechster_datenpunkt() {
+    naechstes_datenpunkt() {
       if (this.aktueller_datenpunkt < this.datenpunkte.length - 1) {
         this.aktueller_datenpunkt++;
         this.refresh();
         this.zeichne_datenpunkte(true, true);
       }
     },
-    voriger_datenpunkt() {
+    voriges_datenpunkt() {
       if (this.aktueller_datenpunkt > 0) {
         this.aktueller_datenpunkt--;
         this.refresh();
@@ -781,7 +761,7 @@ export default {
       }
     },
 
-    kurz_zeichne_linie_datenpunkt_naechstgelegener_prototyp() {
+    kurz_zeichne_linie_datenpunkt_naechstgelegene_prototyp() {
       this.zeichne_linie_datenpunkt_prototyp(
         this.akt_datenpunkt,
         this.naechstgelegener_prototyp,
@@ -798,7 +778,7 @@ export default {
         await this.starte_animation();
       }
 
-      this.faerbe_datenpunkte(true);
+      this.farben_anpassen(true);
 
       this.loesche_zeichenflaeche();
       this.zeichne_hintergrund();
@@ -823,7 +803,7 @@ export default {
       let alle_prototypen_verarbeitet = false;
       while (!alle_prototypen_verarbeitet) {
         this.zeichne_hintergrund();
-        this.faerbe_datenpunkte(false);
+        this.farben_anpassen(false);
 
         if (this.aktueller_prototyp == 0) {
           this.zeichne_datenpunkte(false, true);
@@ -852,7 +832,7 @@ export default {
 
       // Schlussbild
       this.loesche_zeichenflaeche();
-      this.faerbe_datenpunkte(false);
+      this.farben_anpassen(false);
       this.zeichne_datenpunkte(false, true);
       this.zeichne_prototypen(false);
 
@@ -869,7 +849,7 @@ export default {
         // Simulate some delay (you can replace this with actual animation code)
         setTimeout(() => {
           resolve(); // Resolve the promise when the animation is done
-        }, zeitspanne); // delay for zeitspanne 
+        }, zeitspanne); // 1-second delay
       });
     },
 
@@ -894,7 +874,7 @@ export default {
       return new Promise((resolve) => {
         // Your animation code here
         if (this.naechstgelegener_prototyp != null && this.akt_datenpunkt != null) {
-          this.kurz_zeichne_linie_datenpunkt_naechstgelegener_prototyp();
+          this.kurz_zeichne_linie_datenpunkt_naechstgelegene_prototyp();
           this.zeichne_datenpunkte(true, true);
           this.zeichne_prototypen(true);
         }
@@ -908,7 +888,7 @@ export default {
 
     aktualisiere_pos_prototyp() {
       return new Promise((resolve) => {
-        this.faerbe_datenpunkte(false);
+        this.farben_anpassen(false);
         this.animieren();
 
         setTimeout(() => {
@@ -941,7 +921,7 @@ export default {
           this.loesche_zeichenflaeche();
           this.zeichne_hintergrund();
 
-          this.kurz_zeichne_linie_datenpunkt_naechstgelegener_prototyp();
+          this.kurz_zeichne_linie_datenpunkt_naechstgelegene_prototyp();
 
           this.zeichne_datenpunkte(true, true);
           this.zeichne_prototypen(true);
@@ -966,25 +946,6 @@ export default {
       // Zeichnen aufrufen
       draw();
     },
-
-    szenario_zuruecksetzen() {
-      this.update_anzahl_datenpunkte(this.anzahl_datenpunkte);
-      this.update_anzahl_prototypen(this.anzahl_prototypen);
-
-      this.aktueller_datenpunkt = 0;
-
-      for (let i = 0; i < this.datenpunkte.length; i++) {
-          let next_prototyp = this.gib_naechstgelegener_prototyp(this.datenpunkte[i]);
-          this.datenpunkte[i].color = "#000000";
-      }
-    
-      this.loesche_zeichenflaeche();
-      this.refresh();
-      this.zeichne_hintergrund();
-      this.zeichne_prototypen(false);
-      this.zeichne_datenpunkte(false, true);
-      console.log("Page completed with image and files!");
-    },
   },
 
   mounted() {