(node_modules): Aktualisiere die Hashes und Dateipfade für lottie-web-vue,...

 (node_modules): Aktualisiere die Hashes und Dateipfade für lottie-web-vue, vue und vue3-toastify in _metadata.json
 (package.json): Füge vue3-toastify als Abhängigkeit hinzu
 (App.vue, Form.vue): Füge die Funktion sendJson hinzu, um JSON-Daten zu senden und Toast-Nachrichten anzuzeigen.

node_modules/.package-lock.json

@@ -786,6 +786,23 @@
       "peerDependencies": {
         "typescript": "*"
       }
+    },
+    "node_modules/vue3-toastify": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/vue3-toastify/-/vue3-toastify-0.2.1.tgz",
+      "integrity": "sha512-u4i5LCu1q5qs4L4Kbjb4u8NipCS8ox1fCHQ6XFS62676xnA6Q/AJRpZEkAurTMp723LeH6eQX6k9+24bKf1T4Q==",
+      "engines": {
+        "node": ">=16",
+        "npm": ">=7"
+      },
+      "peerDependencies": {
+        "vue": ">=3.2.0"
+      },
+      "peerDependenciesMeta": {
+        "vue": {
+          "optional": true
+        }
+      }
     }
   }
 }

node_modules/.vite/deps/_metadata.json

 {
-  "hash": "73db24cd",
+  "hash": "64be97be",
   "configHash": "f2578dad",
-  "lockfileHash": "5238c63e",
-  "browserHash": "33d3d47c",
+  "lockfileHash": "6427e35a",
+  "browserHash": "d69337be",
   "optimized": {
     "lottie-web-vue": {
       "src": "../../lottie-web-vue/dist/lottie-web-vue.js",
       "file": "lottie-web-vue.js",
-      "fileHash": "d3bf8cec",
+      "fileHash": "02dd3265",
       "needsInterop": false
     },
     "vue": {
       "src": "../../vue/dist/vue.runtime.esm-bundler.js",
       "file": "vue.js",
-      "fileHash": "f281c34a",
+      "fileHash": "86fa3510",
+      "needsInterop": false
+    },
+    "vue3-toastify": {
+      "src": "../../vue3-toastify/dist/index.mjs",
+      "file": "vue3-toastify.js",
+      "fileHash": "5fe1bb53",
       "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.1"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^5.0.4",
@@ -1306,6 +1307,23 @@
       "peerDependencies": {
         "typescript": "*"
       }
+    },
+    "node_modules/vue3-toastify": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/vue3-toastify/-/vue3-toastify-0.2.1.tgz",
+      "integrity": "sha512-u4i5LCu1q5qs4L4Kbjb4u8NipCS8ox1fCHQ6XFS62676xnA6Q/AJRpZEkAurTMp723LeH6eQX6k9+24bKf1T4Q==",
+      "engines": {
+        "node": ">=16",
+        "npm": ">=7"
+      },
+      "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.1"
   },
   "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 jsonDraft from "./assets/boilerplate.json";
+
+import { toast } from "vue3-toastify";
+import "vue3-toastify/dist/index.css";
 
 import { ref } from "vue";
 
@@ -19,6 +23,46 @@ function playLottie(data: boolean) {
 function pauseLottie(data: boolean) {
   pauseLottieStatus.value = data;
 }
+
+function sendJson() {
+  jsonDraft.metadata[1].value = String(`BB${BBEcke.value}`);
+  jsonDraft.metadata[2].value = String(vorname.value);
+  jsonDraft.metadata[3].value = String(nachname.value);
+  jsonDraft.metadata[4].value = String(funktionZeileEins.value);
+  jsonDraft.metadata[5].value = String(funktionZeileZwei.value);
+  let outputPath = `G:/VPMS/00-Temp_Austausch/von_Helmut/Schwertgen, David/Bauchbinde_${nachname.value}.mp4`;
+  jsonDraft.metadata[6].value = String(outputPath);
+  //download(JSON.stringify(jsonDraft), `test.json`, "text/plain");
+  // write a post request to submit the json to the backend
+  const token =
+    "eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJkczAzMSIsImlwQWRkcmVzcyI6IjE3Mi4xNi43OC4xMzMiLCJpc3MiOiJodHRwczovL2hlbG11dC5yYmItb25saW5lLmRlIiwidXNlcnJvbGUiOiJBRE1JTiIsImlhdCI6MTY4NTE5NTczMCwidXNlcm5hbWUiOiJkczAzMSJ9.TYMYcg1NzCtQuRJCborwPjc1p__e32Ecmtx55I9MdFZ3Ct88TWbH7A48OzsUNeMDYCLLB0R3O21LxYqno1pMRw";
+
+  fetch("https://helmut.rbb-online.de/v1/io/jobs", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${token}`,
+    },
+    body: JSON.stringify(jsonDraft),
+  })
+    .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>
@@ -35,6 +79,7 @@ function pauseLottie(data: boolean) {
       v-model:BBEcke="BBEcke"
       v-on:playLottie="playLottie"
       v-on:pauseLottie="pauseLottie"
+      v-on:sendJson="sendJson"
     ></Form>
 
     <Lottie

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");
 const funktionZeileZwei = defineModel("funktionZeileZwei");
 const BBEcke = defineModel("BBEcke");
-import jsonDraft from "../assets/boilerplate.json";
 
 function startAnimation() {
   emit("playLottie", true);
@@ -18,34 +17,7 @@ function pauseAnimation() {
 }
 
 function sendJson() {
-  jsonDraft.metadata[1].value = String(`BB${BBEcke.value}`);
-  jsonDraft.metadata[2].value = String(vorname.value);
-  jsonDraft.metadata[3].value = String(nachname.value);
-  jsonDraft.metadata[4].value = String(funktionZeileEins.value);
-  jsonDraft.metadata[5].value = String(funktionZeileZwei.value);
-  let outputPath = `G:/VPMS/00-Temp_Austausch/von_Helmut/Schwertgen, David/Bauchbinde_${nachname.value}.mp4`;
-  jsonDraft.metadata[6].value = String(outputPath);
-  //download(JSON.stringify(jsonDraft), `test.json`, "text/plain");
-  // write a post request to submit the json to the backend
-  const token =
-    "eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJkczAzMSIsImlwQWRkcmVzcyI6IjE3Mi4xNi43OC4xMzMiLCJpc3MiOiJodHRwczovL2hlbG11dC5yYmItb25saW5lLmRlIiwidXNlcnJvbGUiOiJBRE1JTiIsImlhdCI6MTY4NTE5NTczMCwidXNlcm5hbWUiOiJkczAzMSJ9.TYMYcg1NzCtQuRJCborwPjc1p__e32Ecmtx55I9MdFZ3Ct88TWbH7A48OzsUNeMDYCLLB0R3O21LxYqno1pMRw";
-
-  fetch("https://helmut.rbb-online.de/v1/io/jobs", {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      Authorization: `Bearer ${token}`,
-    },
-    body: JSON.stringify(jsonDraft),
-  })
-    .then((response) => {
-      // Handle the response
-      console.log(response);
-    })
-    .catch((error) => {
-      // Handle any errors
-      console.error(error);
-    });
+  emit("sendJson");
 }
 </script>