fixed bug and added message for image upload button

frontend/components/Domain/Recipe/RecipeImageUploadBtn.vue

@@ -1,47 +1,46 @@
-<template>
+<!-- <template>
-  <div class="text-center">
+  <v-menu v-model="menu" offset-y top nudge-top="6" :close-on-content-click="false">
-    <v-menu v-model="menu" offset-y top nudge-top="6" :close-on-content-click="false">
+    <template #activator="{ on, attrs }">
-      <template #activator="{ on, attrs }">
+      <v-btn color="accent" dark v-bind="attrs" v-on="on">
-        <v-btn color="accent" dark v-bind="attrs" v-on="on">
+        <v-icon left>
-          <v-icon left>
+          {{ $globals.icons.fileImage }}
-            {{ $globals.icons.fileImage }}
+        </v-icon>
-          </v-icon>
+        {{ $t("general.image") }}
-          {{ $t("general.image") }}
+      </v-btn>
-        </v-btn>
+    </template>
-      </template>
+    <v-card width="400">
-      <v-card width="400">
+      <v-card-title class="headline flex mb-0">
-        <v-card-title class="headline flex mb-0">
+        <div>
-          <div>
+          {{ $t("recipe.recipe-image") }}
-            {{ $t("recipe.recipe-image") }}
+        </div>
-          </div>
+        <AppButtonUpload
-          <AppButtonUpload
+          class="ml-auto"
-            class="ml-auto"
+          url="none"
-            url="none"
+          file-name="image"
-            file-name="image"
+          :text-btn="false"
-            :text-btn="false"
+          :post="false"
-            :post="false"
+          @uploaded="uploadImage"
-            @uploaded="uploadImage"
+        />
-          />
+      </v-card-title>
-        </v-card-title>
+      <v-card-text class="mt-n5">
-        <v-card-text class="mt-n5">
+        <div>
-          <div>
+          <v-text-field v-model="url" :label="$t('general.url')" class="pt-5" clearable :messages="messages">
-            <v-text-field v-model="url" :label="$t('general.url')" class="pt-5" clearable :messages="messages">
+            <template #append-outer>
-              <template #append-outer>
+              <v-btn class="ml-2" color="primary" :loading="loading" :disabled="!slug" @click="getImageFromURL">
-                <v-btn class="ml-2" color="primary" :loading="loading" :disabled="!slug" @click="getImageFromURL">
+                {{ $t("general.get") }}
-                  {{ $t("general.get") }}
+              </v-btn>
-                </v-btn>
+            </template>
-              </template>
+          </v-text-field>
-            </v-text-field>
+        </div>
-          </div>
+      </v-card-text>
-        </v-card-text>
+    </v-card>
-      </v-card>
+  </v-menu>
-    </v-menu>
-  </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, reactive, toRefs, useContext } from "@nuxtjs/composition-api";
 import { useUserApi } from "~/composables/api";
+import { alert } from "~/composables/use-toast"; // Import the alert functions
 
 const REFRESH_EVENT = "refresh";
 const UPLOAD_EVENT = "upload";
@@ -58,7 +57,8 @@ export default defineComponent({
       url: "",
       loading: false,
       menu: false,
-    })
+      messages: [],
+    });
 
     function uploadImage(fileObject: File) {
       context.emit(UPLOAD_EVENT, fileObject);
@@ -66,23 +66,192 @@ export default defineComponent({
     }
 
     const api = useUserApi();
+    const { i18n } = useContext();
+
+    // Function to check if the URL is reachable
+    async function isURLReachable(url: string) {
+      try {
+        const response = await fetch(url, { method: "HEAD" });
+        return response.ok; // If status is 200, response.ok will be true
+      } catch (error) {
+        return false; // Network error or invalid URL
+      }
+    }
+
+    // Function to get image from URL
     async function getImageFromURL() {
       state.loading = true;
-      if (await api.recipes.updateImagebyURL(props.slug, state.url)) {
+
-        context.emit(REFRESH_EVENT);
+      // Check if the URL is reachable it uses HTTP codes
+      const isReachable = await isURLReachable(state.url);
+
+      if (!isReachable) {
+        alert.error(i18n.tc("general.invalid-url"));
+        state.loading = false;
+        return;
       }
+
+      // If the URL is reachable, make the API request to update the image using the URL
+      const response = await api.recipes.updateImagebyURL(props.slug, state.url);
+
+      // Check the response from the API and show appropriate alert
+      if (response) {
+        alert.success(i18n.tc("general.image-uploaded"));
+        context.emit(REFRESH_EVENT);
+      } else {
+        alert.error(i18n.tc("general.invalid-url"));
+      }
+
+      // Finalize loading state and menu visibility
+      state.loading = false;
+      state.menu = false;
+    }
+
+    return {
+      ...toRefs(state),
+      uploadImage,
+      getImageFromURL,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped></style>
+ -->
+ <template>
+  <v-menu v-model="menu" offset-y top nudge-top="6" :close-on-content-click="false">
+    <template #activator="{ on, attrs }">
+      <v-btn color="accent" dark v-bind="attrs" v-on="on">
+        <v-icon left>
+          {{ $globals.icons.fileImage }}
+        </v-icon>
+        {{ $t("general.image") }}
+      </v-btn>
+    </template>
+    <v-card width="400">
+      <v-card-title class="headline flex mb-0">
+        <div>
+          {{ $t("recipe.recipe-image") }}
+        </div>
+        <AppButtonUpload
+          class="ml-auto"
+          url="none"
+          file-name="image"
+          :text-btn="false"
+          :post="false"
+          @uploaded="uploadImage"
+        />
+      </v-card-title>
+      <v-card-text class="mt-n5">
+        <div>
+          <v-text-field v-model="url" :label="$t('general.url')" class="pt-5" clearable :messages="messages">
+            <template #append-outer>
+              <v-btn class="ml-2" color="primary" :loading="loading" :disabled="!slug" @click="getImageFromURL">
+                {{ $t("general.get") }}
+              </v-btn>
+            </template>
+          </v-text-field>
+        </div>
+      </v-card-text>
+    </v-card>
+  </v-menu>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, toRefs, useContext } from "@nuxtjs/composition-api";
+import { useUserApi } from "~/composables/api";
+import { alert } from "~/composables/use-toast"; // Import the alert functions
+
+const REFRESH_EVENT = "refresh";
+const UPLOAD_EVENT = "upload";
+
+export default defineComponent({
+  props: {
+    slug: {
+      type: String,
+      required: true,
+    },
+  },
+  setup(props, context) {
+    const state = reactive({
+      url: "",
+      loading: false,
+      menu: false,
+      messages: [],
+    });
+
+
+   // Function to upload the image file
+   function uploadImage(fileObject: File) {
+    try{
+       // Check if the file has an acceptable extension
+       const allowedExtensions = [".jpg", ".jpeg", ".png", ".gif", ".webp"];
+      const fileExtension = fileObject.name.split(".").pop()?.toLowerCase();
+
+      // If the file extension is not in the allowed extensions list, show an error message
+      if (!fileExtension || !allowedExtensions.includes(`.${fileExtension}`)) {
+        alert.error(i18n.tc("general.invalid-image-extension"));
+        return;
+      }
+
+      context.emit(UPLOAD_EVENT, fileObject);
+      state.menu = false;
+
+      // Show success message for image upload
+      alert.success(i18n.tc("general.image-uploaded"));
+    }
+      catch(error){
+        alert.error(i18n.tc("general.image-upload-failed"));
+      }
+    }
+
+
+    const api = useUserApi();
+    const { i18n } = useContext();
+
+    // Function to check if the URL is reachable
+    async function isURLReachable(url: string) {
+      try {
+        const response = await fetch(url, { method: "HEAD" });
+        return response.ok; // If status is 200, response.ok will be true
+      } catch (error) {
+        return false; // Network error or invalid URL
+      }
+    }
+
+    // Function to get image from URL
+    async function getImageFromURL() {
+      state.loading = true;
+
+      // Check if the URL is reachable it uses HTTP codes
+      const isReachable = await isURLReachable(state.url);
+
+      if (!isReachable) {
+        alert.error(i18n.tc("general.invalid-url"));
+        state.loading = false;
+        return;
+      }
+
+      // If the URL is reachable, make the API request to update the image using the URL
+      const response = await api.recipes.updateImagebyURL(props.slug, state.url);
+
+      // Check the response from the API and show appropriate alert
+      if (response) {
+        alert.success(i18n.tc("general.image-uploaded"));
+        context.emit(REFRESH_EVENT);
+      } else {
+        alert.error(i18n.tc("general.invalid-url"));
+      }
+
+      // Finalize loading state and menu visibility
       state.loading = false;
       state.menu = false;
     }
 
-    const { i18n } = useContext();
-    const messages = props.slug ? [""] : [i18n.t("recipe.save-recipe-before-use")];
-
     return {
       ...toRefs(state),
       uploadImage,
       getImageFromURL,
-      messages,
     };
   },
 });

frontend/components/global/WakelockSwitch.vue

@@ -16,7 +16,7 @@ export default defineComponent({
     setup() {
         const { isSupported: wakeIsSupported, isActive, request, release } = useWakeLock();
         const wakeLock = computed({
-            get: () => isActive,
+            get: () => isActive.value,
             set: () => {
                 if (isActive.value) {
                     unlockScreen();
@@ -27,13 +27,13 @@ export default defineComponent({
         });
         async function lockScreen() {
             if (wakeIsSupported) {
-                console.log("Wake Lock Requested");
+                console.debug("Wake Lock Requested");
                 await request("screen");
             }
         }
         async function unlockScreen() {
             if (wakeIsSupported || isActive) {
-                console.log("Wake Lock Released");
+                console.debug("Wake Lock Released");
                 await release();
             }
         }

frontend/lang/messages/en-US.json

@@ -114,6 +114,9 @@
     "home": "Home",
     "image": "Image",
     "image-upload-failed": "Image upload failed",
+    "image-uploaded": "Image Uploaded",
+    "invalid-url": "The provided URL is invalid. Please check and try again.",
+    "invalid-image-extension": "Invalid file extension",
     "import": "Import",
     "json": "JSON",
     "keyword": "Keyword",