JSON wird nun erzeugt und heruntergeladen auf dem Rechner. Ich habe ein paar...

JSON wird nun erzeugt und heruntergeladen auf dem Rechner. Ich habe ein paar Kommentaren zum Datenpfad hinzugefügt.

src/components/Form.vue

 <script setup lang="ts">
+
 const emit = defineEmits(["playLottie", "pauseLottie"]);
 const vorname = defineModel("vorname");
 const nachname = defineModel("nachname");
 const funktionZeileEins = defineModel("funktionZeileEins");
 const funktionZeileZwei = defineModel("funktionZeileZwei");
 const BBEcke = defineModel("BBEcke");
+import jsonDraft from "../assets/job.json";
 
 function startAnimation() {
   emit("playLottie", true);
@@ -15,6 +17,36 @@ function pauseAnimation() {
   emit("pauseLottie", true);
   emit("playLottie", false);
 }
+
+function writeJson() {
+  // nützlich, um den Datenpfad vom src im template oder output in Actions zu ändern, wenn wir das machen wollen
+  // wir können ein Benutzer fragen, ob sie ihr Neutzername eingeben können und das output einfach zu seiner Downloads Ordner schicken. 
+  if (window.navigator.userAgent.indexOf("Windows") != -1) {
+    console.log("The user is running Windows");
+  } else if (window.navigator.userAgent.indexOf("Mac OS") != -1) {
+    console.log("The user is running Mac OS");
+  } else if (window.navigator.userAgent.indexOf("Linux") != -1) {
+    console.log("The user is running Linux");
+  } else {
+    console.log("The user's operating system could not be determined");
+  }
+
+  jsonDraft.template.composition = "BB" + BBEcke.value;
+  jsonDraft.assets[0].value = String(vorname.value);
+  jsonDraft.assets[1].value = String(nachname.value);
+  jsonDraft.assets[2].value = String(funktionZeileEins.value);
+  jsonDraft.assets[3].value = String(funktionZeileZwei.value);
+
+  download(JSON.stringify(jsonDraft), "Bauchbinde_" + nachname.value + ".json", "text/plain");
+}
+
+function download(content: string, fileName: string, contentType: string) {
+  const a = document.createElement("a");
+  const file = new Blob([content], { type: contentType });
+  a.href = URL.createObjectURL(file);
+  a.download = fileName;
+  a.click();
+}
 </script>
 
 <template>
@@ -52,6 +84,11 @@ function pauseAnimation() {
           Animation Pausieren
         </button>
       </div>
+      <div class="row">
+        <button class="jsonGenerate-btn" @click="writeJson">
+          Animation erzeugen
+        </button>
+      </div>
     </div>
   </div>
 </template>
@@ -105,6 +142,19 @@ function pauseAnimation() {
   border: 1px solid #e31818;
 }
 
+.jsonGenerate-btn {
+  color: white;
+  font-size: 16px;
+  background-color: #266ca3;
+  font-weight: bold;
+  float: right;
+}
+
+.jsonGenerate-btn:hover {
+  background-color: white;
+  color: #266ca3;
+  border: 1px solid #266ca3;
+}
 .inputField {
   width: 98%;
 }