fix: change frontend handling of data

gridonic · Dec 5, 2023 · 0a23d11 · 0a23d11
1 parent 12eb4f1
commit 0a23d11
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 61 deletions.
diff --git a/dist/alt-text-generator.js b/dist/alt-text-generator.js
diff --git a/resources/js/components/GenerateButton.vue b/resources/js/components/GenerateButton.vue
@@ -1,24 +1,14 @@
 <template>
-  <div disabled="this.isLoading">
-    <button
-      id="requestButton"
-      class="btn"
-      type="button"
-      @click="handleButtonClick"
-    >
-      Generate
-    </button>
-    <div v-if="isLoading" class="loading-indicator">
-      Generating alt text...
-    </div>
+  <div>
+    <button @click="sendData">Generate</button>
+    <input type="text" :id="altText" v-model="responseData" />
   </div>
 </template>
 
 <script>
 
 export default {
   mixins: [Fieldtype],
-
   props: {
     meta: Array,
     value: String,
@@ -27,54 +17,32 @@ export default {
   data() {
     return {
       isLoading: false,
-      responseData: this.responseData,
-      data: this.value,
+      responseData: '',
     };
   },
 
-  watch: {
-    data(data) {
-      this.update(data);
-    },
-  },
-
   methods: {
-
-    handleButtonClick() {
-      this.isLoading = true;
-      this.sendDataToBackend();
-    },
-
-    async sendDataToBackend() {
-      const bodyData = {
-        imageUrl: window.location.href,
-        textLanguage: this.meta.language,
-      };
-
-      const jsonBody = JSON.stringify(bodyData);
-      const response = await fetch('/api/altTextGeneratorEndpoint', {
+    sendData() {
+      let jsonBody = JSON.stringify(
+          {
+            imageUrl: window.location.href,
+            textLanguage: this.meta.language
+          }
+      )
+      const response = fetch('/api/altTextGeneratorEndpoint', {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
         },
         body: jsonBody,
-      });
-
-      const responseData = await response.text();
-
-      try {
-        const data = JSON.parse(responseData);
-        console.log(data);
-        const altText = data.altText;
-        localStorage.setItem('altTextToStore', altText);
-        const textField = document.querySelector('input[name="alt_de"]');
-        this.update(textField, { value: altText });
-        this.isLoading = false;
-      } catch (error) {
-        console.log(error);
+      })
+          .then(response => {
+            this.responseData = response.data;
+          })
+          .catch(error => {
+            console.log(error)
+          })
       }
     },
-
-  },
 };
 </script>
diff --git a/src/Controllers/AltTextGeneratorController.php b/src/Controllers/AltTextGeneratorController.php
@@ -32,18 +32,13 @@ public function submitData(Request $request)
         $altText = $this->generateAltText($url, $textLanguage);
 
 
-        $this->saveAltText($altText, $url, $textLanguage);
+        // $this->saveAltText($altText, $url, $textLanguage);
 
         $responseData = [
             'altText' => $altText,
-            'textLanguage' => $textLanguage
         ];
 
-        $jsonResponse = json_encode($responseData);
-
-        header('Content-Type: application/json; charset=utf-8');
-
-        echo $jsonResponse;
+        echo json_encode($responseData);
 
 
     }
@@ -66,12 +61,12 @@ public function generateAltText(string $url, string $textLanguage)
         return $altText;
 
     }
-
+/*
     public function saveAltText(string $altText, string $imageUrl, string $textLanguage): void
     {
         $imageDataService = new ImageDataService();
         $filePath = $imageDataService->getFilePathFromUrl($imageUrl);
         $yamlWriter = new YamlWriterService();
         $yamlWriter->addDataToYaml($altText, $textLanguage, $filePath);
-    }
+    }*/
 }