feat: Shopping list UI overhaul - add wakelock (#4236)

Co-authored-by: Kuchenpirat <24235032+Kuchenpirat@users.noreply.github.com>

frontend/components/Domain/Recipe/RecipePage/RecipePage.vue

@@ -62,15 +62,7 @@
         <RecipePageFooter :recipe="recipe" />
       </v-card-text>
     </v-card>
-
-    <div
-      v-if="recipe && wakeIsSupported"
-      class="d-print-none d-flex px-2"
-      :class="$vuetify.breakpoint.smAndDown ? 'justify-center' : 'justify-end'"
-    >
-      <v-switch v-model="wakeLock" small :label="$t('recipe.screen-awake')" />
-    </div>
-
+    <WakelockSwitch/>
     <RecipePageComments
       v-if="!recipe.settings.disableComments && !isEditForm && !isCookMode"
       :recipe="recipe"
@@ -91,7 +83,7 @@ import {
   onUnmounted,
 useRoute,
 } from "@nuxtjs/composition-api";
-import { invoke, until, useWakeLock } from "@vueuse/core";
+import { invoke, until } from "@vueuse/core";
 import RecipePageEditorToolbar from "./RecipePageParts/RecipePageEditorToolbar.vue";
 import RecipePageFooter from "./RecipePageParts/RecipePageFooter.vue";
 import RecipePageHeader from "./RecipePageParts/RecipePageHeader.vue";
@@ -194,40 +186,6 @@ export default defineComponent({
       }
     });
 
-    /** =============================================================
-     * Wake Lock
-     */
-
-    const { isSupported: wakeIsSupported, isActive, request, release } = useWakeLock();
-
-    const wakeLock = computed({
-      get: () => isActive,
-      set: () => {
-        if (isActive.value) {
-          unlockScreen();
-        } else {
-          lockScreen();
-        }
-      },
-    });
-
-    async function lockScreen() {
-      if (wakeIsSupported) {
-        console.log("Wake Lock Requested");
-        await request("screen");
-      }
-    }
-
-    async function unlockScreen() {
-      if (wakeIsSupported || isActive) {
-        console.log("Wake Lock Released");
-        await release();
-      }
-    }
-
-    onMounted(() => lockScreen());
-    onUnmounted(() => unlockScreen());
-
     /** =============================================================
      * Recipe Save Delete
      */
@@ -308,9 +266,6 @@ export default defineComponent({
       isEditJSON,
       isCookMode,
       toggleCookMode,
-
-      wakeLock,
-      wakeIsSupported,
       saveRecipe,
       deleteRecipe,
       addStep,

frontend/components/global/WakelockSwitch.vue

@@ -0,0 +1,49 @@
+<template>
+    <div
+        v-if="wakeIsSupported"
+        class="d-print-none d-flex px-2"
+        :class="$vuetify.breakpoint.smAndDown ? 'justify-center' : 'justify-end'"
+    >
+        <v-switch v-model="wakeLock" small :label="$t('recipe.screen-awake')" />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed, onMounted, onUnmounted } from "@nuxtjs/composition-api";
+import { useWakeLock } from "@vueuse/core";
+
+export default defineComponent({
+    setup() {
+        const { isSupported: wakeIsSupported, isActive, request, release } = useWakeLock();
+        const wakeLock = computed({
+            get: () => isActive,
+            set: () => {
+                if (isActive.value) {
+                    unlockScreen();
+                } else {
+                    lockScreen();
+                }
+            },
+        });
+        async function lockScreen() {
+            if (wakeIsSupported) {
+                console.log("Wake Lock Requested");
+                await request("screen");
+            }
+        }
+        async function unlockScreen() {
+            if (wakeIsSupported || isActive) {
+                console.log("Wake Lock Released");
+                await release();
+            }
+        }
+        onMounted(() => lockScreen());
+        onUnmounted(() => unlockScreen());
+
+        return {
+            wakeLock,
+            wakeIsSupported,
+        };
+    },
+});
+</script>

frontend/pages/shopping-lists/_id.vue

@@ -278,6 +278,7 @@
         />
       </div>
     </v-lazy>
+    <WakelockSwitch/>
   </v-container>
 </template>