feat: Shopping list UI overhaul - add wakelock

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

@@ -63,13 +63,7 @@
       </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>
+    <Wakelock/>
 
     <RecipePageComments
       v-if="!recipe.settings.disableComments && !isEditForm && !isCookMode"
@@ -91,7 +85,7 @@
   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";
@@ -104,6 +98,7 @@
 import RecipePageComments from "./RecipePageParts/RecipePageComments.vue";
 import { useLoggedInState } from "~/composables/use-logged-in-state";
 import RecipePrintContainer from "~/components/Domain/Recipe/RecipePrintContainer.vue";
+import Wakelock from "~/components/global/Wakelock.vue";
 import { EditorMode, PageMode, usePageState, usePageUser } from "~/composables/recipe-page/shared-state";
 import { NoUndefinedField } from "~/lib/api/types/non-generated";
 import { Recipe } from "~/lib/api/types/recipe";
@@ -194,40 +189,6 @@
       }
     });
 
-    /** =============================================================
-     * 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 +269,6 @@
       isEditJSON,
       isCookMode,
       toggleCookMode,
-
-      wakeLock,
-      wakeIsSupported,
       saveRecipe,
       deleteRecipe,
       addStep,

frontend/components/global/Wakelock.vue

@@ -0,0 +1,48 @@
+<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 } from "@nuxtjs/composition-api";
+import { computed, onMounted, onUnmounted } from "@nuxtjs/composition-api";
+import { useWakeLock } from "@vueuse/core";
+
+export default defineComponent({
+    setup(props, context) {
+
+        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

@@ -282,6 +282,7 @@
         />
       </div>
     </v-lazy>
+    <Wakelock/>
   </v-container>
 </template>
 
@@ -297,6 +298,7 @@
 import { ShoppingListItemOut, ShoppingListMultiPurposeLabelOut, ShoppingListOut } from "~/lib/api/types/household";
 import { UserOut } from "~/lib/api/types/user";
 import RecipeList from "~/components/Domain/Recipe/RecipeList.vue";
+import Wakelock from "~/components/global/Wakelock.vue";
 import ShoppingListItemEditor from "~/components/Domain/ShoppingList/ShoppingListItemEditor.vue";
 import { useFoodStore, useLabelStore, useUnitStore } from "~/composables/store";
 import { useShoppingListItemActions } from "~/composables/use-shopping-list-item-actions";