diff --git a/README.md b/README.md
index 0bfecb08f8aa58a98ab2ce059b1ce045948d79b6..7be1e2f284f63184c509297d6f7412fda7cda038 100644
--- a/README.md
+++ b/README.md
@@ -1,9 +1,12 @@
-# Vue 3 + TypeScript + Vite
+# RBB Reportage Bauchbinde
-This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+This web application lets the user view how their lower third animation would look like with their inputted information and then export the result to be used with Nexrender in order to generate the animation in Adobe After Effects. In order to get started, you will need to have Node JS installed on you computer as well as npm. You can download & install both packages hier: https://nodejs.org/en/download/package-manager.
-## Recommended Setup
+Once that is all set up, you just have to navigate to the project folder and run the command "npm ci". This will install all of the required packages to run the app and save the to a package-lock.json file in the project folder.
-- [VS Code](https://code.visualstudio.com/) + [Vue - Official](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (previously Volar) and disable Vetur
+Afterwards, you can run "npm run dev" in order to generate a local host from which you can view the web app in your browser.
+
+For deployment, the command is "npm run build", but please consult the official vue documentation here: https://cli.vuejs.org/guide/deployment.html
+
+When pushing changes to the repository, make sure to never add the node_modules folder!
-- Use [vue-tsc](https://github.com/vuejs/language-tools/tree/master/packages/tsc) for performing the same type checking from the command line, or for generating d.ts files for SFCs.
diff --git a/index.html b/index.html
index dde16aaf3671c5f9770aed03d3db0b35486b8357..56db7ea27aa60273117a652e9a6291d2505093bf 100644
--- a/index.html
+++ b/index.html
@@ -2,9 +2,9 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
- <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+ <link rel="shortcut icon" type="image/png" href="/static/rbb-logo.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>Vite + Vue + TS</title>
+ <title>RBB Reportage Bauchbinde</title>
</head>
<body>
<div id="app"></div>
diff --git a/src/components/Form.vue b/src/components/Form.vue
index af4b1a69351144a5cd001a16769b0480be0fc804..3fd1ab6a8474667e82437a5c076f3d24847f435a 100644
--- a/src/components/Form.vue
+++ b/src/components/Form.vue
@@ -5,8 +5,7 @@ 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 { watch } from "vue";
import jsonDraft from "../assets/job.json";
function startAnimation() {
@@ -29,7 +28,6 @@ watch(
() => props.falseLoopStatus,
() => {
if (props.falseLoopStatus == true) {
- console.log("we gotta false loop!")
startAnimation()
}
});
@@ -40,6 +38,10 @@ function writeJson() {
// DS: Das ist eine sehr gute Idee. So machen wir das. Tatsächlich hat in unserem System
// jeder Nutzer potentiell einen eigenen Export-Ordner.
// Kannst du gerne einbauen, die Detail ändere ich dann angepasst auf unser System.
+
+ // BL: Es scheint wesentlich komplizierter, einen allgemeinen Pfad für Windows zu kriegen im Vergleich zu Mac oder Linux (~/Documents).
+ // Dafür bräuchte ich NodeJS, was nicht ein Teil des Projekts ist. Ich glaube es funktionert schon, dass die Datei in dem Downloads-Ordner
+ // gespeichert wird, also velleicht reicht das?
if (window.navigator.userAgent.indexOf("Windows") != -1) {
console.log("The user is running Windows");
} else if (window.navigator.userAgent.indexOf("Mac OS") != -1) {
@@ -207,4 +209,18 @@ function download(content: string, fileName: string, contentType: string) {
align-items: center;
}
}
+
+@media screen and (max-width: 480px) {
+
+ .playLottie-btn,
+ .pauseLottie-btn,
+ .jsonGenerate-btn {
+ font-size: 12px;
+ height: 50px;
+ }
+
+ .row {
+ justify-content: left;
+ }
+}
</style>
diff --git a/src/components/Lottie.vue b/src/components/Lottie.vue
index 3ef6c1bffafbd7f09341aa3ba9558f27260c99b1..23430d410f4f356f9e586af60d4ff8f7e40da3a9 100644
--- a/src/components/Lottie.vue
+++ b/src/components/Lottie.vue
@@ -1,10 +1,9 @@
-<script setup>
+<script setup lang="ts">
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";
import AnimationLinksBB from "../assets/bblinks_v2.json";
-// import { emit } from "process";
const emit = defineEmits(["falseStatusLottieLoop"]);
@@ -45,6 +44,9 @@ const props = defineProps({
},
});
+// Wenn Lottie neu geladen ist und der/die Benutzer:in zuletzt Pause gedrückt hat,
+// sind beide Pause und Play wahr, da die Lottie auf Autoplaye eingstellt ist.
+// Um aus diesem "Loop" auszubrechen müssen wir den Fall erkennen und ihn an die Parent-Komponente weitergeben
function breakLottieFalseLoop() {
emit("falseStatusLottieLoop", true)
}
@@ -126,6 +128,9 @@ watch(
return layer.nm === "NACHNAME";
})[0].t.d.k[0].s.t = props.nachname.toUpperCase();
+ // Ich wollte weniger Code haben aber hier ist es wichtig, dass die andere Lottie-Datei
+ // dieselben Infos von dem Eingaben bekommt, so das eine Transition zwischen links und Rechts
+ // dieselben Daten sowohl in der Animation als auch in der Eingabenfelder enthalten sind
if (props.BBEcke == "links"){
AnimationRechtsBB.layers.filter((layer) => {
return layer.nm === "NACHNAME";
@@ -195,24 +200,14 @@ watch(
);
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;
+ AnimationRechtsBB.layers[1].t.d.k[0].s.t = "MAX";
+ AnimationRechtsBB.layers[3].t.d.k[0].s.t = "MUSTERMANN";
+ AnimationRechtsBB.layers[5].t.d.k[0].s.t = "Testperson";
+ AnimationRechtsBB.layers[7].t.d.k[0].s.t = "";
+ AnimationLinksBB.layers[1].t.d.k[0].s.t = "MAX";
+ AnimationLinksBB.layers[3].t.d.k[0].s.t = "MUSTERMANN";
+ AnimationLinksBB.layers[5].t.d.k[0].s.t = "Testperson";
+ AnimationLinksBB.layers[7].t.d.k[0].s.t = "";
}
onMounted(() => {
diff --git a/static/rbb-logo.png b/static/rbb-logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..271b46e7b78a834da719daf8158400945ccba967
Binary files /dev/null and b/static/rbb-logo.png differ