Lottie kann jetzt pausiert werden nach man die Bauchbinde-Richtung wechselt....

Lottie kann jetzt pausiert werden nach man die Bauchbinde-Richtung wechselt. Es gibt aber noch ein Fix für die Eingabefelder zu tun. Nach man was da reintypt, muss man zuerst Lottie starten drucken bevor man wieder pausieren kann.

src/App.vue

@@ -11,6 +11,7 @@ const funktionZeileZwei = ref("");
 const BBEcke = ref("");
 let playLottieStatus = ref(false);
 let pauseLottieStatus = ref(false);
+let falseLoopStatus = ref(false);
 
 function playLottie(data: boolean) {
   playLottieStatus.value = data;
@@ -19,6 +20,12 @@ function playLottie(data: boolean) {
 function pauseLottie(data: boolean) {
   pauseLottieStatus.value = data;
 }
+
+function falseStatusLottieLoop(data: boolean) {
+  falseLoopStatus.value = data;
+  console.log("stuck status = " + falseLoopStatus.value)
+}
+
 </script>
 
 <template>
@@ -35,6 +42,7 @@ function pauseLottie(data: boolean) {
       v-model:BBEcke="BBEcke"
       v-on:playLottie="playLottie"
       v-on:pauseLottie="pauseLottie"
+      :falseLoopStatus="falseLoopStatus"
     ></Form>
 
     <Lottie
@@ -45,6 +53,7 @@ function pauseLottie(data: boolean) {
       :BBEcke="BBEcke"
       :playLottieStatus="playLottieStatus"
       :pauseLottieStatus="pauseLottieStatus"
+      v-on:falseStatusLottieLoop="falseStatusLottieLoop"
     ></Lottie>
   </div>
 </template>

src/components/Form.vue

@@ -5,6 +5,8 @@ const nachname = defineModel("nachname");
 const funktionZeileEins = defineModel("funktionZeileEins");
 const funktionZeileZwei = defineModel("funktionZeileZwei");
 const BBEcke = defineModel("BBEcke");
+import { onMounted, ref, watch } from "vue";
+// import { watch } from "fs";
 import jsonDraft from "../assets/job.json";
 
 function startAnimation() {
@@ -17,6 +19,21 @@ function pauseAnimation() {
   emit("playLottie", false);
 }
 
+const props = defineProps({
+  falseLoopStatus: {
+    type: Boolean,
+    required: true,
+  },
+})
+watch(
+  () => props.falseLoopStatus,
+  () => {
+    if (props.falseLoopStatus == true) {
+  console.log("we gotta false loop!")
+  startAnimation();
+  }
+});
+
 function writeJson() {
   // BL: nützlich, um den Datenpfad vom src im template oder output in Actions zu ändern, wenn wir das machen wollen
   // wir können ein Benutzer fragen, ob sie ihr Neutzername eingeben können und das output einfach zu seiner Downloads Ordner schicken.
@@ -62,7 +79,7 @@ function download(content: string, fileName: string, contentType: string) {
       <label>Postion der Bauchbinde </label>
       <div class="row">
         <select id="bauchbindeEcke" v-model="BBEcke">
-          <option value="rechts" selected>rechts</option>
+          <option value="rechts">rechts</option>
           <option value="links">links</option>
         </select>
       </div>

src/components/Lottie.vue

@@ -4,11 +4,14 @@ import { LottieAnimation } from "lottie-web-vue";
 import AnimationDataJSON from "../assets/Lottiefile_Bauchbinde_Beispiel.json";
 import AnimationRechtsBB from "../assets/bbrechts_v2.json";
 import AnimationLinksBB from "../assets/bblinks_v2.json";
+// import { emit } from "process";
+
+const emit = defineEmits(["falseStatusLottieLoop"]);
 
 let anim = ref();
-let animationRechts = false;
-let animationLinks = false;
 let BBUnselected = true;
+let animationData = AnimationDataJSON;
+let showAnimation = false;
 
 const props = defineProps({
   vorname: {
@@ -41,19 +44,38 @@ const props = defineProps({
   },
 });
 
+function breakLottieFalseLoop() {
+  emit("falseStatusLottieLoop", true)
+}
+
+
 watch(
   () => props.BBEcke,
   () => {
     console.log(props.BBEcke);
     if (props.BBEcke === "links") {
-      animationLinks = true;
-      animationRechts = false;
+      animationData = AnimationLinksBB
       BBUnselected = false;
+      showAnimation = true;
+      setMaxMustermann();
+      console.log("play status = " + props.playLottieStatus)
+      console.log("pause status = " + props.pauseLottieStatus)
+      if (props.playLottieStatus == false && props.pauseLottieStatus == true) {
+        console.log("breaking out!")
+        breakLottieFalseLoop();
+      }
     }
     if (props.BBEcke === "rechts") {
-      animationRechts = true;
-      animationLinks = false;
+      animationData = AnimationRechtsBB
       BBUnselected = false;
+      showAnimation = true;
+      setMaxMustermann();
+      console.log("play status = " + props.playLottieStatus)
+      console.log("pause status = " + props.pauseLottieStatus)
+      if (props.playLottieStatus == false && props.pauseLottieStatus == true) {
+        console.log("breaking out!")
+        breakLottieFalseLoop();
+      }
     }
   }
 );
@@ -72,6 +94,7 @@ watch(
 watch(
   () => props.pauseLottieStatus,
   () => {
+    
     if (props.pauseLottieStatus) {
       anim.value.pause();
     } else {
@@ -87,65 +110,72 @@ const lottie = ref(0);
 watch(
   () => props.vorname,
   () => {
-    AnimationRechtsBB.layers.filter((layer) => {
-      return layer.nm === "VORNAME";
-    })[0].t.d.k[0].s.t = props.vorname.toUpperCase();
-    AnimationLinksBB.layers.filter((layer) => {
+    animationData.layers.filter((layer) => {
       return layer.nm === "VORNAME";
     })[0].t.d.k[0].s.t = props.vorname.toUpperCase();
     lottie.value++;
+    if (props.playLottieStatus == false && props.pauseLottieStatus == true) {
+        console.log("breaking out!")
+        breakLottieFalseLoop();
+      }
   }
 );
 
 watch(
   () => props.nachname,
   () => {
-    AnimationRechtsBB.layers.filter((layer) => {
-      return layer.nm === "NACHNAME";
-    })[0].t.d.k[0].s.t = props.nachname.toUpperCase();
-    AnimationLinksBB.layers.filter((layer) => {
+    animationData.layers.filter((layer) => {
       return layer.nm === "NACHNAME";
     })[0].t.d.k[0].s.t = props.nachname.toUpperCase();
     lottie.value++;
+    if (props.playLottieStatus == false && props.pauseLottieStatus == true) {
+        console.log("breaking out!")
+        breakLottieFalseLoop();
+      }
   }
 );
 
 watch(
   () => props.funktionZeileEins,
   () => {
-    AnimationRechtsBB.layers.filter((layer) => {
-      return layer.nm === "FUNKTION1";
-    })[0].t.d.k[0].s.t = props.funktionZeileEins;
-    AnimationLinksBB.layers.filter((layer) => {
+    animationData.layers.filter((layer) => {
       return layer.nm === "FUNKTION1";
     })[0].t.d.k[0].s.t = props.funktionZeileEins;
     lottie.value++;
+    if (props.playLottieStatus == false && props.pauseLottieStatus == true) {
+        console.log("breaking out!")
+        breakLottieFalseLoop();
+      }
   }
 );
 
 watch(
   () => props.funktionZeileZwei,
   () => {
-    AnimationRechtsBB.layers.filter((layer) => {
-      return layer.nm === "FUNKTION2";
-    })[0].t.d.k[0].s.t = props.funktionZeileZwei;
-    AnimationLinksBB.layers.filter((layer) => {
+    animationData.layers.filter((layer) => {
       return layer.nm === "FUNKTION2";
     })[0].t.d.k[0].s.t = props.funktionZeileZwei;
     lottie.value++;
+    if (props.playLottieStatus == false && props.pauseLottieStatus == true) {
+        console.log("breaking out!")
+        breakLottieFalseLoop();
+      }
   }
 );
 
+function setMaxMustermann() {
+  animationData.layers[1].t.d.k[0].s.t = "MAX";
+  animationData.layers[3].t.d.k[0].s.t = "MUSTERMANN";
+  animationData.layers[5].t.d.k[0].s.t = "Testperson";
+  animationData.layers[7].t.d.k[0].s.t = "";
+}
+
 onMounted(() => {
   // Added this temporarily to improve initial animation output
-  AnimationRechtsBB.layers[1].t.d.k[0].s.t = "MAX";
-  AnimationLinksBB.layers[1].t.d.k[0].s.t = "MAX";
-  AnimationRechtsBB.layers[3].t.d.k[0].s.t = "MUSTERMANN";
-  AnimationLinksBB.layers[3].t.d.k[0].s.t = "MUSTERMANN";
-  AnimationRechtsBB.layers[5].t.d.k[0].s.t = "Testperson";
-  AnimationLinksBB.layers[5].t.d.k[0].s.t = "Testperson";
-  AnimationRechtsBB.layers[7].t.d.k[0].s.t = "";
-  AnimationLinksBB.layers[7].t.d.k[0].s.t = "";
+  // animationData.layers[1].t.d.k[0].s.t = "MAX";
+  // animationData.layers[3].t.d.k[0].s.t = "MUSTERMANN";
+  // animationData.layers[5].t.d.k[0].s.t = "Testperson";
+  // animationData.layers[7].t.d.k[0].s.t = "";
 
   setTimeout(() => {
     // console.log(anim.value.goToAndPlay(150, true));
@@ -158,35 +188,10 @@ onMounted(() => {
     Bitte eine Position für<br />
     die Bauchbinde auswählen
   </h2>
-  <div class="animation">
-    <LottieAnimation
-      :key="lottie"
-      ref="anim"
-      :animation-data="AnimationRechtsBB"
-      :loop="true"
-      :auto-play="true"
-      :speed="1"
-      @loopComplete="loopComplete"
-      @complete="complete"
-      @enterFrame="enterFrame"
-      @segmentStart="segmentStart"
-      @stopped="stopped"
-      v-if="animationRechts"
-    />
-    <LottieAnimation
-      :key="lottie"
-      ref="anim"
-      :animation-data="AnimationLinksBB"
-      :loop="true"
-      :auto-play="true"
-      :speed="1"
-      @loopComplete="loopComplete"
-      @complete="complete"
-      @enterFrame="enterFrame"
-      @segmentStart="segmentStart"
-      @stopped="stopped"
-      v-if="animationLinks"
-    />
+  <div class="animation" v-if="showAnimation">
+    <LottieAnimation :key="lottie" ref="anim" :animation-data="animationData" :loop="true" :auto-play="true" :speed="1"
+      @loopComplete="loopComplete" @complete="complete" @enterFrame="enterFrame" @segmentStart="segmentStart"
+      @stopped="stopped" />
   </div>
 </template>
 
@@ -194,6 +199,7 @@ onMounted(() => {
 .animation {
   background-color: #000;
 }
+
 .hinweis {
   text-align: center;
   margin: auto;