From a20d99ed732b29d0ed72b4bbfbab25104d9df8c0 Mon Sep 17 00:00:00 2001 From: Subliminal Guy <subliminal_kid@posteo.de> Date: Wed, 12 Jun 2024 14:09:51 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20=C3=84ndere=20Lottie.vue,=20um?= =?UTF-8?q?=20array.filter=20hinzuzuf=C3=BCgen=20und=20die=20Anpassung=20a?= =?UTF-8?q?n=20verschiedene=20Lottie-Dateien=20zu=20verbessern.=20?= =?UTF-8?q?=F0=9F=94=A7=20F=C3=BCge=20tempor=C3=A4r=20AnimationRechtsBB.la?= =?UTF-8?q?yers[1]=20und=20AnimationLinksBB.layers[1]=20hinzu,=20um=20die?= =?UTF-8?q?=20anf=C3=A4ngliche=20Animationsausgabe=20zu=20verbessern.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Lottie.vue | 38 ++++++++++++++++++++++++++++---------- 1 file changed, 28 insertions(+), 10 deletions(-) diff --git a/src/components/Lottie.vue b/src/components/Lottie.vue index dd25765..483d955 100644 --- a/src/components/Lottie.vue +++ b/src/components/Lottie.vue @@ -82,12 +82,17 @@ watch( const lottie = ref(0); +// Added array.filter to improve adaptability to different lottie files + watch( () => props.vorname, () => { - console.log(AnimationRechtsBB.layers[1].t.d.k[0].s.t); - AnimationRechtsBB.layers[1].t.d.k[0].s.t = props.vorname.toUpperCase(); - AnimationLinksBB.layers[1].t.d.k[0].s.t = props.vorname.toUpperCase(); + AnimationRechtsBB.layers.filter((layer) => { + return layer.nm === "VORNAME"; + })[0].t.d.k[0].s.t = props.vorname.toUpperCase(); + AnimationLinksBB.layers.filter((layer) => { + return layer.nm === "VORNAME"; + })[0].t.d.k[0].s.t = props.vorname.toUpperCase(); lottie.value++; } ); @@ -95,8 +100,12 @@ watch( watch( () => props.nachname, () => { - AnimationRechtsBB.layers[3].t.d.k[0].s.t = props.nachname.toUpperCase(); - AnimationLinksBB.layers[3].t.d.k[0].s.t = props.nachname.toUpperCase(); + AnimationRechtsBB.layers.filter((layer) => { + return layer.nm === "NACHNAME"; + })[0].t.d.k[0].s.t = props.nachname.toUpperCase(); + AnimationLinksBB.layers.filter((layer) => { + return layer.nm === "NACHNAME"; + })[0].t.d.k[0].s.t = props.nachname.toUpperCase(); lottie.value++; } ); @@ -104,8 +113,12 @@ watch( watch( () => props.funktionZeileEins, () => { - AnimationRechtsBB.layers[5].t.d.k[0].s.t = props.funktionZeileEins; - AnimationLinksBB.layers[5].t.d.k[0].s.t = props.funktionZeileEins; + AnimationRechtsBB.layers.filter((layer) => { + return layer.nm === "FUNKTION1"; + })[0].t.d.k[0].s.t = props.funktionZeileEins; + AnimationLinksBB.layers.filter((layer) => { + return layer.nm === "FUNKTION1"; + })[0].t.d.k[0].s.t = props.funktionZeileEins; lottie.value++; } ); @@ -113,13 +126,18 @@ watch( watch( () => props.funktionZeileZwei, () => { - AnimationRechtsBB.layers[7].t.d.k[0].s.t = props.funktionZeileZwei; - AnimationLinksBB.layers[7].t.d.k[0].s.t = props.funktionZeileZwei; + AnimationRechtsBB.layers.filter((layer) => { + return layer.nm === "FUNKTION2"; + })[0].t.d.k[0].s.t = props.funktionZeileZwei; + AnimationLinksBB.layers.filter((layer) => { + return layer.nm === "FUNKTION2"; + })[0].t.d.k[0].s.t = props.funktionZeileZwei; lottie.value++; } ); 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"; @@ -137,7 +155,7 @@ onMounted(() => { </script> <template> <h2 v-if="BBUnselected"> - Bitte eine Postion für<br /> + Bitte eine Position für<br /> die Bauchbinde auswählen </h2> <div class="animation"> -- GitLab