Add Helmut Boilerplate

Add Vue Toast Dependency
Add Sent to Function
Add Event Emitter in Form.vue
Add Button in Form.vue

.gitignore

 node_modules/
+.env
\ No newline at end of file

node_modules/.package-lock.json

@@ -786,6 +786,23 @@
       "peerDependencies": {
         "typescript": "*"
       }
+    },
+    "node_modules/vue3-toastify": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/vue3-toastify/-/vue3-toastify-0.2.2.tgz",
+      "integrity": "sha512-D8pmIp2UeU8MU1OY7GktA70HviZ38b1RagN82P7tFu3abUD86w+PjfmbdRch4QVtjVxK+eqKLvi5cXJRndwJfw==",
+      "engines": {
+        "node": ">=18.18.0",
+        "npm": ">=9.0.0"
+      },
+      "peerDependencies": {
+        "vue": ">=3.2.0"
+      },
+      "peerDependenciesMeta": {
+        "vue": {
+          "optional": true
+        }
+      }
     }
   }
 }

node_modules/.vite/deps/_metadata.json

 {
-  "hash": "73db24cd",
+  "hash": "1470842e",
   "configHash": "f2578dad",
-  "lockfileHash": "5238c63e",
-  "browserHash": "33d3d47c",
+  "lockfileHash": "575567d3",
+  "browserHash": "c1417137",
   "optimized": {
     "lottie-web-vue": {
       "src": "../../lottie-web-vue/dist/lottie-web-vue.js",
       "file": "lottie-web-vue.js",
-      "fileHash": "d3bf8cec",
+      "fileHash": "2e5cbcda",
       "needsInterop": false
     },
     "vue": {
       "src": "../../vue/dist/vue.runtime.esm-bundler.js",
       "file": "vue.js",
-      "fileHash": "f281c34a",
+      "fileHash": "de4f6de6",
+      "needsInterop": false
+    },
+    "vue3-toastify": {
+      "src": "../../vue3-toastify/dist/index.mjs",
+      "file": "vue3-toastify.js",
+      "fileHash": "5fcfc74f",
       "needsInterop": false
     }
   },

package-lock.json

@@ -10,7 +10,8 @@
       "dependencies": {
         "@lottiefiles/vue-lottie-player": "^1.1.0",
         "lottie-web-vue": "^2.0.7",
-        "vue": "^3.4.21"
+        "vue": "^3.4.21",
+        "vue3-toastify": "^0.2.2"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^5.0.4",
@@ -1306,6 +1307,23 @@
       "peerDependencies": {
         "typescript": "*"
       }
+    },
+    "node_modules/vue3-toastify": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/vue3-toastify/-/vue3-toastify-0.2.2.tgz",
+      "integrity": "sha512-D8pmIp2UeU8MU1OY7GktA70HviZ38b1RagN82P7tFu3abUD86w+PjfmbdRch4QVtjVxK+eqKLvi5cXJRndwJfw==",
+      "engines": {
+        "node": ">=18.18.0",
+        "npm": ">=9.0.0"
+      },
+      "peerDependencies": {
+        "vue": ">=3.2.0"
+      },
+      "peerDependenciesMeta": {
+        "vue": {
+          "optional": true
+        }
+      }
     }
   }
 }

package.json

@@ -11,7 +11,8 @@
   "dependencies": {
     "@lottiefiles/vue-lottie-player": "^1.1.0",
     "lottie-web-vue": "^2.0.7",
-    "vue": "^3.4.21"
+    "vue": "^3.4.21",
+    "vue3-toastify": "^0.2.2"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",

src/App.vue

 <script setup lang="ts">
 import Form from "./components/Form.vue";
 import Lottie from "./components/Lottie.vue";
+import helmutJsonDraft from "./assets/boilerplate.json";
+
+import { toast } from "vue3-toastify";
+import "vue3-toastify/dist/index.css";
 
 import { ref } from "vue";
 
@@ -26,6 +30,41 @@ function falseStatusLottieLoop(data: boolean) {
   falseLoopStatus.value = data;
 }
 
+function sendJson() {
+  const token = import.meta.env.VITE_HELMUT_TOKEN;
+  helmutJsonDraft.metadata[1].value = String(`BB${BBEcke.value}`);
+  helmutJsonDraft.metadata[2].value = String(vorname.value);
+  helmutJsonDraft.metadata[3].value = String(nachname.value);
+  helmutJsonDraft.metadata[4].value = String(funktionZeileEins.value);
+  helmutJsonDraft.metadata[5].value = String(funktionZeileZwei.value);
+  let outputPath = `G:/VPMS/00-Temp_Austausch/von_Helmut/Schwertgen, David/Bauchbinde_${nachname.value}.mp4`;
+  helmutJsonDraft.metadata[6].value = String(outputPath);
+  fetch("https://helmut.rbb-online.de/v1/io/jobs", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${token}`,
+    },
+    body: JSON.stringify(helmutJsonDraft),
+  })
+    .then((response) => {
+      toast.success(
+        "Die Bauchbinde ist auf den Weg in deinen Helmut-Ordner! In circa 1 Minute ist sie da ...",
+        {
+          position: toast.POSITION.TOP_CENTER,
+          autoClose: 5000,
+        }
+      ); // ToastOptions
+      console.log(response);
+    })
+    .catch((error) => {
+      // Handle any errors
+      toast.error("Something went wrong!", {
+        position: toast.POSITION.TOP_CENTER,
+      });
+      console.log(error);
+    });
+}
 </script>
 
 <template>
@@ -34,13 +73,28 @@ function falseStatusLottieLoop(data: boolean) {
   </div>
 
   <div class="appGrid">
-    <Form v-model:vorname="vorname" v-model:nachname="nachname" v-model:funktionZeileEins="funktionZeileEins"
-      v-model:funktionZeileZwei="funktionZeileZwei" v-model:BBEcke="BBEcke" v-on:playLottie="playLottie"
-      v-on:pauseLottie="pauseLottie" :falseLoopStatus="falseLoopStatus"></Form>
+    <Form
+      v-model:vorname="vorname"
+      v-model:nachname="nachname"
+      v-model:funktionZeileEins="funktionZeileEins"
+      v-model:funktionZeileZwei="funktionZeileZwei"
+      v-model:BBEcke="BBEcke"
+      v-on:playLottie="playLottie"
+      v-on:pauseLottie="pauseLottie"
+      v-on:sendJson="sendJson"
+      :falseLoopStatus="falseLoopStatus"
+    ></Form>
 
-    <Lottie :vorname="vorname" :nachname="nachname" :funktionZeileEins="funktionZeileEins"
-      :funktionZeileZwei="funktionZeileZwei" :BBEcke="BBEcke" :playLottieStatus="playLottieStatus"
-      :pauseLottieStatus="pauseLottieStatus" v-on:falseStatusLottieLoop="falseStatusLottieLoop"></Lottie>
+    <Lottie
+      :vorname="vorname"
+      :nachname="nachname"
+      :funktionZeileEins="funktionZeileEins"
+      :funktionZeileZwei="funktionZeileZwei"
+      :BBEcke="BBEcke"
+      :playLottieStatus="playLottieStatus"
+      :pauseLottieStatus="pauseLottieStatus"
+      v-on:falseStatusLottieLoop="falseStatusLottieLoop"
+    ></Lottie>
   </div>
 </template>
 

src/assets/boilerplate.json

+{
+  "profile": "666d6bb317e43b0001b8da17",
+  "source": "HK",
+  "name": "Trigger Nexrender Workflow",
+  "metadata": [
+    {
+      "splitsUUID": null,
+      "numSplits": null,
+      "splitDone": null,
+      "id": "666d6b42566c2c00017cd1fc",
+      "parent": [
+        {
+          "id": "666d6b2c566c2c00017cd1fb",
+          "name": "Trigger Nexrender Workflow",
+          "tags": ["IO"],
+          "order": 1
+        }
+      ],
+      "name": "AE-Projektpfad",
+      "value": "file://sb-fbp-ist01/Transfer/CNC/Helmut/Helmut4/Admin/1 Vorlagen/nexrender/rbb24reportage_TUVersion.aep",
+      "valueObject": null,
+      "type": "STRING",
+      "values": [],
+      "customId": null,
+      "filterable": true,
+      "readonly": false,
+      "mandatory": true,
+      "preresolve": false,
+      "disabled": false,
+      "hide": false,
+      "regex": "",
+      "tags": null,
+      "inPointMarke": null,
+      "outPointMarke": null
+    },
+    {
+      "splitsUUID": null,
+      "numSplits": null,
+      "splitDone": null,
+      "id": "666d7074326e82000143ae3a",
+      "parent": [
+        {
+          "id": "666d6b2c566c2c00017cd1fb",
+          "name": "Trigger Nexrender Workflow",
+          "tags": ["IO"],
+          "order": 2
+        }
+      ],
+      "name": "AE-Composition",
+      "value": "BBrechts",
+      "valueObject": null,
+      "type": "STRING",
+      "values": [],
+      "customId": null,
+      "filterable": true,
+      "readonly": false,
+      "mandatory": true,
+      "preresolve": false,
+      "disabled": false,
+      "hide": false,
+      "regex": "",
+      "tags": null,
+      "inPointMarke": null,
+      "outPointMarke": null
+    },
+    {
+      "splitsUUID": null,
+      "numSplits": null,
+      "splitDone": null,
+      "id": "666d70c9566c2c00017cd1fd",
+      "parent": [
+        {
+          "id": "666d6b2c566c2c00017cd1fb",
+          "name": "Trigger Nexrender Workflow",
+          "tags": ["IO"],
+          "order": 3
+        }
+      ],
+      "name": "AE-Assets-VORNAME",
+      "value": "HORST",
+      "valueObject": null,
+      "type": "STRING",
+      "values": [],
+      "customId": null,
+      "filterable": true,
+      "readonly": false,
+      "mandatory": true,
+      "preresolve": false,
+      "disabled": false,
+      "hide": false,
+      "regex": "",
+      "tags": null,
+      "inPointMarke": null,
+      "outPointMarke": null
+    },
+    {
+      "splitsUUID": null,
+      "numSplits": null,
+      "splitDone": null,
+      "id": "666d70e7566c2c00017cd1fe",
+      "parent": [
+        {
+          "id": "666d6b2c566c2c00017cd1fb",
+          "name": "Trigger Nexrender Workflow",
+          "tags": ["IO"],
+          "order": 4
+        }
+      ],
+      "name": "AE-Assets-NACHNAME",
+      "value": "KARACHO",
+      "valueObject": null,
+      "type": "STRING",
+      "values": [],
+      "customId": null,
+      "filterable": true,
+      "readonly": false,
+      "mandatory": true,
+      "preresolve": false,
+      "disabled": false,
+      "hide": false,
+      "regex": "",
+      "tags": null,
+      "inPointMarke": null,
+      "outPointMarke": null
+    },
+    {
+      "splitsUUID": null,
+      "numSplits": null,
+      "splitDone": null,
+      "id": "666d7111566c2c00017cd1ff",
+      "parent": [
+        {
+          "id": "666d6b2c566c2c00017cd1fb",
+          "name": "Trigger Nexrender Workflow",
+          "tags": ["IO"],
+          "order": 5
+        }
+      ],
+      "name": "AE-Assets-FUNKTION1",
+      "value": "SHITPOSTER",
+      "valueObject": null,
+      "type": "STRING",
+      "values": [],
+      "customId": null,
+      "filterable": true,
+      "readonly": false,
+      "mandatory": true,
+      "preresolve": false,
+      "disabled": false,
+      "hide": false,
+      "regex": "",
+      "tags": null,
+      "inPointMarke": null,
+      "outPointMarke": null
+    },
+    {
+      "splitsUUID": null,
+      "numSplits": null,
+      "splitDone": null,
+      "id": "666d7125566c2c00017cd200",
+      "parent": [
+        {
+          "id": "666d6b2c566c2c00017cd1fb",
+          "name": "Trigger Nexrender Workflow",
+          "tags": ["IO"],
+          "order": 6
+        }
+      ],
+      "name": "AE-Assets-FUNKTION2",
+      "value": "",
+      "valueObject": null,
+      "type": "STRING",
+      "values": [],
+      "customId": null,
+      "filterable": true,
+      "readonly": false,
+      "mandatory": true,
+      "preresolve": false,
+      "disabled": false,
+      "hide": false,
+      "regex": "",
+      "tags": null,
+      "inPointMarke": null,
+      "outPointMarke": null
+    },
+    {
+      "splitsUUID": null,
+      "numSplits": null,
+      "splitDone": null,
+      "id": "666d963f326e82000143ae3b",
+      "parent": [
+        {
+          "id": "666d6b2c566c2c00017cd1fb",
+          "name": "Trigger Nexrender Workflow",
+          "tags": ["IO"],
+          "order": 7
+        }
+      ],
+      "name": "AE-Outputpath",
+      "value": "G:/VPMS/00-Temp_Austausch/von_Helmut/Schwertgen, David/rendered.mp4",
+      "valueObject": null,
+      "type": "STRING",
+      "values": [],
+      "customId": null,
+      "filterable": true,
+      "readonly": false,
+      "mandatory": true,
+      "preresolve": false,
+      "disabled": false,
+      "hide": false,
+      "regex": "",
+      "tags": null,
+      "inPointMarke": null,
+      "outPointMarke": null
+    }
+  ]
+}

src/components/Form.vue

 <script setup lang="ts">
-const emit = defineEmits(["playLottie", "pauseLottie"]);
+const emit = defineEmits(["playLottie", "pauseLottie", "sendJson"]);
 const vorname = defineModel("vorname");
 const nachname = defineModel("nachname");
 const funktionZeileEins = defineModel("funktionZeileEins");
@@ -23,14 +23,19 @@ const props = defineProps({
     type: Boolean,
     required: true,
   },
-})
+});
 watch(
   () => props.falseLoopStatus,
   () => {
     if (props.falseLoopStatus == true) {
-      startAnimation()
+      startAnimation();
+    }
+  }
+);
+
+function sendJson() {
+  emit("sendJson");
 }
-  });
 
 function writeJson() {
   jsonDraft.template.composition = "BB" + BBEcke.value;
@@ -92,6 +97,9 @@ function download(content: string, fileName: string, contentType: string) {
       </div>
       <div class="row">
         <button class="jsonGenerate-btn" @click="writeJson">
+          Animation herunterladen
+        </button>
+        <button class="jsonGenerate-btn" @click="sendJson">
           Animation erzeugen
         </button>
       </div>
@@ -192,7 +200,6 @@ function download(content: string, fileName: string, contentType: string) {
 }
 
 @media screen and (max-width: 480px) {
-
   .playLottie-btn,
   .pauseLottie-btn,
   .jsonGenerate-btn {