From 90eb76a6d7e169fb494a6e0cf6db713c150db04b Mon Sep 17 00:00:00 2001
From: Brendan Lawton <brendan.lawton@rbb-online.de>
Date: Mon, 24 Jun 2024 19:09:59 +0200
Subject: [PATCH] Play und Pause sollten jetzt immer funktionieren. Ich habe
auch die AnimationData als Variable gespeichert, um DRY-Methoden zu folgen.
Ich habe auch die andere Lottie-Datei (links oder rechts) aktualisiert, wenn
die andere aktualisiert wird, so dass die Eingabefelder mit den beiden
Lotties immer konsistent sind.
---
src/App.vue | 7 +-
src/components/Form.vue | 9 +--
src/components/Lottie.vue | 138 ++++++++++++++++++++++++--------------
tsconfig.json | 24 +++++--
4 files changed, 115 insertions(+), 63 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index 8ec06a4..3ec14a2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,21 +9,24 @@ const nachname = ref("");
const funktionZeileEins = ref("");
const funktionZeileZwei = ref("");
const BBEcke = ref("");
-let playLottieStatus = ref(false);
+let playLottieStatus = ref(true);
let pauseLottieStatus = ref(false);
let falseLoopStatus = ref(false);
function playLottie(data: boolean) {
playLottieStatus.value = data;
+ console.log( "play status shows:" + playLottieStatus.value);
+ falseLoopStatus.value = false;
}
function pauseLottie(data: boolean) {
pauseLottieStatus.value = data;
+ console.log( "pause shows:" + pauseLottieStatus.value);
}
function falseStatusLottieLoop(data: boolean) {
falseLoopStatus.value = data;
- console.log("stuck status = " + falseLoopStatus.value)
+ console.log("stuck status = " + falseLoopStatus.value);
}
</script>
diff --git a/src/components/Form.vue b/src/components/Form.vue
index 87d1494..af4b1a6 100644
--- a/src/components/Form.vue
+++ b/src/components/Form.vue
@@ -29,10 +29,10 @@ watch(
() => props.falseLoopStatus,
() => {
if (props.falseLoopStatus == true) {
- console.log("we gotta false loop!")
- startAnimation();
- }
-});
+ 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
@@ -179,6 +179,7 @@ function download(content: string, fileName: string, contentType: string) {
color: #266ca3;
border: 1px solid #266ca3;
}
+
.inputField {
width: 98%;
}
diff --git a/src/components/Lottie.vue b/src/components/Lottie.vue
index 34c5f8f..3ef6c1b 100644
--- a/src/components/Lottie.vue
+++ b/src/components/Lottie.vue
@@ -1,5 +1,5 @@
<script setup>
-import { onMounted, ref, watch } from "vue";
+import { onMounted, ref, watch, nextTick } from "vue";
import { LottieAnimation } from "lottie-web-vue";
import AnimationDataJSON from "../assets/Lottiefile_Bauchbinde_Beispiel.json";
import AnimationRechtsBB from "../assets/bbrechts_v2.json";
@@ -8,10 +8,11 @@ import AnimationLinksBB from "../assets/bblinks_v2.json";
const emit = defineEmits(["falseStatusLottieLoop"]);
-let anim = ref();
+let anim = ref(null);
let BBUnselected = true;
let animationData = AnimationDataJSON;
let showAnimation = false;
+const lottie = ref(0);
const props = defineProps({
vorname: {
@@ -48,139 +49,174 @@ function breakLottieFalseLoop() {
emit("falseStatusLottieLoop", true)
}
-
watch(
() => props.BBEcke,
- () => {
- console.log(props.BBEcke);
+ async () => {
if (props.BBEcke === "links") {
- animationData = AnimationLinksBB
+ animationData = AnimationLinksBB;
BBUnselected = false;
showAnimation = true;
- setMaxMustermann();
- console.log("play status = " + props.playLottieStatus)
- console.log("pause status = " + props.pauseLottieStatus)
+ lottie.value++;
+ await nextTick();
if (props.playLottieStatus == false && props.pauseLottieStatus == true) {
- console.log("breaking out!")
breakLottieFalseLoop();
}
}
if (props.BBEcke === "rechts") {
- animationData = AnimationRechtsBB
+ animationData = AnimationRechtsBB;
BBUnselected = false;
showAnimation = true;
- setMaxMustermann();
- console.log("play status = " + props.playLottieStatus)
- console.log("pause status = " + props.pauseLottieStatus)
+ lottie.value++;
+ await nextTick();
if (props.playLottieStatus == false && props.pauseLottieStatus == true) {
- console.log("breaking out!")
breakLottieFalseLoop();
}
}
}
);
-
watch(
() => props.playLottieStatus,
() => {
if (props.playLottieStatus) {
anim.value.play();
- } else {
- anim.value.pause();
}
}
);
-
watch(
() => props.pauseLottieStatus,
() => {
-
if (props.pauseLottieStatus) {
anim.value.pause();
- } else {
- anim.value.play();
}
}
);
-const lottie = ref(0);
// Added array.filter to improve adaptability to different lottie files
watch(
() => props.vorname,
- () => {
+ async () => {
animationData.layers.filter((layer) => {
return layer.nm === "VORNAME";
})[0].t.d.k[0].s.t = props.vorname.toUpperCase();
+
+ if (props.BBEcke == "links"){
+ AnimationRechtsBB.layers.filter((layer) => {
+ return layer.nm === "VORNAME";
+ })[0].t.d.k[0].s.t = props.vorname.toUpperCase();
+ } else if (props.BBEcke == "rechts") {
+ AnimationLinksBB.layers.filter((layer) => {
+ return layer.nm === "VORNAME";
+ })[0].t.d.k[0].s.t = props.vorname.toUpperCase();
+ }
+
lottie.value++;
+ await nextTick();
if (props.playLottieStatus == false && props.pauseLottieStatus == true) {
- console.log("breaking out!")
- breakLottieFalseLoop();
- }
+ breakLottieFalseLoop();
+ }
}
);
watch(
() => props.nachname,
- () => {
+ async () => {
animationData.layers.filter((layer) => {
return layer.nm === "NACHNAME";
})[0].t.d.k[0].s.t = props.nachname.toUpperCase();
+
+ if (props.BBEcke == "links"){
+ AnimationRechtsBB.layers.filter((layer) => {
+ return layer.nm === "NACHNAME";
+ })[0].t.d.k[0].s.t = props.nachname.toUpperCase();
+ } else if (props.BBEcke == "rechts") {
+ AnimationLinksBB.layers.filter((layer) => {
+ return layer.nm === "NACHNAME";
+ })[0].t.d.k[0].s.t = props.nachname.toUpperCase();
+ }
+
lottie.value++;
+ await nextTick();
if (props.playLottieStatus == false && props.pauseLottieStatus == true) {
- console.log("breaking out!")
- breakLottieFalseLoop();
- }
+ breakLottieFalseLoop();
+ }
}
);
watch(
() => props.funktionZeileEins,
- () => {
+ async () => {
animationData.layers.filter((layer) => {
return layer.nm === "FUNKTION1";
})[0].t.d.k[0].s.t = props.funktionZeileEins;
+ if (props.BBEcke == "links")
+ {
+ AnimationRechtsBB.layers.filter((layer) => {
+ return layer.nm === "FUNKTION1";
+ })[0].t.d.k[0].s.t = props.funktionZeileEins;
+ } else if (props.BBEcke == "rechts") {
+ AnimationLinksBB.layers.filter((layer) => {
+ return layer.nm === "FUNKTION1";
+ })[0].t.d.k[0].s.t = props.funktionZeileEins;
+ }
lottie.value++;
+ await nextTick();
if (props.playLottieStatus == false && props.pauseLottieStatus == true) {
- console.log("breaking out!")
- breakLottieFalseLoop();
- }
+ breakLottieFalseLoop();
+ }
}
);
watch(
() => props.funktionZeileZwei,
- () => {
+ async () => {
animationData.layers.filter((layer) => {
return layer.nm === "FUNKTION2";
})[0].t.d.k[0].s.t = props.funktionZeileZwei;
+
+ if (props.BBEcke == "links")
+ {
+ AnimationRechtsBB.layers.filter((layer) => {
+ return layer.nm === "FUNKTION2";
+ })[0].t.d.k[0].s.t = props.funktionZeileZwei;
+ } else if (props.BBEcke == "rechts") {
+ AnimationLinksBB.layers.filter((layer) => {
+ return layer.nm === "FUNKTION2";
+ })[0].t.d.k[0].s.t = props.funktionZeileZwei;
+ }
+
lottie.value++;
+ await nextTick();
if (props.playLottieStatus == false && props.pauseLottieStatus == true) {
- console.log("breaking out!")
- breakLottieFalseLoop();
- }
+ breakLottieFalseLoop();
+ }
}
);
function setMaxMustermann() {
+ animationData = AnimationRechtsBB;
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 = "";
+ animationData = AnimationLinksBB;
+ 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 = "";
+
+}
+
+function updateValues () {
+ // animationData.layers[1].t.d.k[0].s.t = props.vorname;
+ // animationData.layers[3].t.d.k[0].s.t = props.nachname;
+ // animationData.layers[5].t.d.k[0].s.t = props.funktionZeileEins;
+ // animationData.layers[7].t.d.k[0].s.t = props.funktionZeileZwei;
}
onMounted(() => {
- // Added this temporarily to improve initial animation output
- // 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));
- anim.value;
- }, 500);
+ setMaxMustermann();
});
</script>
<template>
@@ -188,8 +224,8 @@ onMounted(() => {
Bitte eine Position für<br />
die Bauchbinde auswählen
</h2>
- <div class="animation" v-if="showAnimation">
- <LottieAnimation :key="lottie" ref="anim" :animation-data="animationData" :loop="true" :auto-play="true" :speed="1"
+ <div class="animation" v-if="showAnimation" :key="lottie">
+ <LottieAnimation ref="anim" :animation-data="animationData" :loop="true" :auto-play="true" :speed="1"
@loopComplete="loopComplete" @complete="complete" @enterFrame="enterFrame" @segmentStart="segmentStart"
@stopped="stopped" />
</div>
diff --git a/tsconfig.json b/tsconfig.json
index 9e03e60..0749382 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,9 +3,14 @@
"target": "ES2020",
"useDefineForClassFields": true,
"module": "ESNext",
- "lib": ["ES2020", "DOM", "DOM.Iterable"],
+ "lib": [
+ "ES2020",
+ "DOM",
+ "DOM.Iterable"
+ ],
"skipLibCheck": true,
-
+ "noImplicitAny": false,
+ "allowJs": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
@@ -13,13 +18,20 @@
"isolatedModules": true,
"noEmit": true,
"jsx": "preserve",
-
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
- "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
- "references": [{ "path": "./tsconfig.node.json" }]
-}
+ "include": [
+ "src/**/*.ts",
+ "src/**/*.tsx",
+ "src/**/*.vue"
+ ],
+ "references": [
+ {
+ "path": "./tsconfig.node.json"
+ }
+ ]
+}
\ No newline at end of file
--
GitLab