feat: cook timer (#2508)

* updated base button group

* added kitchen timer

* added missing icon

* usability tweaks

* for for menu rendering over app bar

* clean up types

* fix for mp3 loading, maybe?

* spooky linter fixes

* for real this time

---------

Co-authored-by: Hayden <64056131+hay-kot@users.noreply.github.com>

frontend/components/Domain/Recipe/RecipeActionMenu.vue

@@ -42,6 +42,12 @@
         </v-tooltip>
       </div>
 
+      <RecipeTimerMenu
+        fab
+        color="info"
+        class="mr-1"
+      />
+
       <RecipeContextMenu
         show-print
         :menu-top="false"
@@ -90,6 +96,7 @@
 import { defineComponent, ref, useContext } from "@nuxtjs/composition-api";
 import RecipeContextMenu from "./RecipeContextMenu.vue";
 import RecipeFavoriteBadge from "./RecipeFavoriteBadge.vue";
+import RecipeTimerMenu from "./RecipeTimerMenu.vue";
 import RecipeTimelineBadge from "./RecipeTimelineBadge.vue";
 import { Recipe } from "~/lib/api/types/recipe";
 
@@ -100,7 +107,7 @@ const JSON_EVENT = "json";
 const OCR_EVENT = "ocr";
 
 export default defineComponent({
-  components: { RecipeContextMenu, RecipeFavoriteBadge, RecipeTimelineBadge },
+  components: { RecipeContextMenu, RecipeFavoriteBadge, RecipeTimerMenu, RecipeTimelineBadge },
   props: {
     recipe: {
       required: true,

frontend/components/Domain/Recipe/RecipeTimerMenu.vue

@@ -0,0 +1,317 @@
+<template>
+  <div class="text-center">
+    <v-menu
+      v-model="showMenu"
+      offset-x
+      offset-overflow
+      left
+      allow-overflow
+      close-delay="125"
+      :close-on-content-click="false"
+      content-class="d-print-none"
+      :z-index="2"
+    >
+      <template #activator="{ on, attrs }">
+        <v-badge :value="timerEnded" overlap color="red" content="!">
+          <v-btn :fab="fab" :small="fab" :color="timerEnded ? 'secondary' : color" :icon="!fab" dark v-bind="attrs" v-on="on" @click.prevent>
+            <v-progress-circular
+              v-if="timerInitialized && !timerEnded"
+              :value="timerProgress"
+              :rotate="270"
+              :color="timerRunning ? undefined : 'primary'"
+            >
+              <v-icon small>{{ timerRunning ? $globals.icons.timer : $globals.icons.timerPause }}</v-icon>
+            </v-progress-circular>
+            <v-icon v-else>{{ $globals.icons.timer }}</v-icon>
+          </v-btn>
+        </v-badge>
+      </template>
+      <v-card>
+        <v-card-title>
+          <v-icon class="pr-2">{{ $globals.icons.timer }}</v-icon>
+          {{ $i18n.tc("recipe.timer.kitchen-timer") }}
+        </v-card-title>
+        <div class="mx-auto" style="width: fit-content;">
+          <v-progress-circular
+            :value="timerProgress"
+            :rotate="270"
+            color="primary"
+            class="mb-2"
+            :size="128"
+            :width="24"
+          >
+          <v-icon
+            v-if="timerInitialized && !timerRunning"
+            x-large
+            :color="timerEnded ? 'red' : 'primary'"
+            @click="() => timerEnded ? resetTimer() : resumeTimer()"
+          >
+            {{ timerEnded ? $globals.icons.stop : $globals.icons.pause }}
+          </v-icon>
+          </v-progress-circular>
+        </div>
+        <v-container width="100%" fluid class="ma-0 px-auto py-2">
+          <v-row no-gutters justify="center">
+            <v-col cols="3" align-self="center">
+              <v-text-field
+                :value="timerHours"
+                :min="0"
+                outlined
+                single-line
+                solo
+                hide-details
+                type="number"
+                :disabled="timerInitialized"
+                class="centered-input my-0 py-0"
+                style="font-size: large; width: 100px;"
+                @input="(v) => timerHours = v.toString().padStart(2, '0')"
+              />
+            </v-col>
+            <v-col cols="1" align-self="center" style="text-align: center;">
+              <h1>:</h1>
+            </v-col>
+            <v-col cols="3" align-self="center">
+              <v-text-field
+                :value="timerMinutes"
+                :min="0"
+                outlined
+                single-line
+                solo
+                hide-details
+                type="number"
+                :disabled="timerInitialized"
+                class="centered-input my-0 py-0"
+                style="font-size: large; width: 100px;"
+                @input="(v) => timerMinutes = v.toString().padStart(2, '0')"
+              />
+            </v-col>
+            <v-col cols="1" align-self="center" style="text-align: center;" >
+              <h1>:</h1>
+            </v-col>
+            <v-col cols="3" align-self="center">
+              <v-text-field
+                :value="timerSeconds"
+                :min="0"
+                outlined
+                single-line
+                solo
+                hide-details
+                type="number"
+                :disabled="timerInitialized"
+                class="centered-input my-0 py-0"
+                style="font-size: large; width: 100px;"
+                @input="(v) => timerSeconds = v.toString().padStart(2, '0')"
+              />
+            </v-col>
+          </v-row>
+        </v-container>
+        <div class="mx-auto" style="width: 100%;">
+          <BaseButtonGroup
+            stretch
+            :buttons="timerButtons"
+            @initialize-timer="initializeTimer"
+            @pause-timer="pauseTimer"
+            @resume-timer="resumeTimer"
+            @stop-timer="resetTimer"
+          />
+        </div>
+      </v-card>
+    </v-menu>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, reactive, ref, toRefs, useContext, watch } from "@nuxtjs/composition-api";
+import { ButtonOption } from "~/components/global/BaseButtonGroup.vue";
+
+// @ts-ignore typescript can't find our audio file, but it's there!
+import timerAlarmAudio from "~/assets/audio/kitchen_alarm.mp3";
+
+export default defineComponent({
+  props: {
+    fab: {
+      type: Boolean,
+      default: false,
+    },
+    color: {
+      type: String,
+      default: "primary",
+    },
+  },
+  setup() {
+    const { $globals, i18n } = useContext();
+    const state = reactive({
+      showMenu: false,
+      timerInitialized: false,
+      timerRunning: false,
+      timerEnded: false,
+      timerInitialValue: 0,
+      timerValue: 0,
+    });
+
+    watch(
+      () => state.showMenu,
+      () => {
+        if (state.showMenu && state.timerEnded) {
+          resetTimer();
+        }
+      }
+    );
+
+    // ts doesn't recognize timerAlarmAudio because it's a weird import
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+    const timerAlarm = new Audio(timerAlarmAudio);
+    timerAlarm.loop = true;
+
+    const timerHours = ref<string | number>("00");
+    const timerMinutes = ref<string | number>("00");
+    const timerSeconds = ref<string | number>("00");
+
+    const initializeButton: ButtonOption = {
+      icon: $globals.icons.timerPlus,
+      text: i18n.tc("recipe.timer.start-timer"),
+      event: "initialize-timer",
+    }
+
+    const pauseButton: ButtonOption = {
+      icon: $globals.icons.pause,
+      text: i18n.tc("recipe.timer.pause-timer"),
+      event: "pause-timer",
+    };
+
+    const resumeButton: ButtonOption = {
+      icon: $globals.icons.play,
+      text: i18n.tc("recipe.timer.resume-timer"),
+      event: "resume-timer",
+    };
+
+    const stopButton: ButtonOption = {
+      icon: $globals.icons.stop,
+      text: i18n.tc("recipe.timer.stop-timer"),
+      event: "stop-timer",
+      color: "red",
+    };
+
+    const timerButtons = computed<ButtonOption[]>(() => {
+      const buttons: ButtonOption[] = [];
+      if (state.timerInitialized) {
+        if (state.timerEnded) {
+          buttons.push(stopButton);
+        } else if (state.timerRunning) {
+          buttons.push(pauseButton, stopButton);
+        } else {
+          buttons.push(resumeButton, stopButton);
+        }
+      } else {
+        buttons.push(initializeButton);
+      }
+
+      // I don't know why this is failing the frontend lint test ¯\_(ツ)_/¯
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+      return buttons;
+    });
+
+    const timerProgress = computed(() => {
+      if(state.timerInitialValue) {
+        return (state.timerValue / state.timerInitialValue) * 100;
+      } else {
+        return 0;
+      }
+    });
+
+    let timerInterval: number | null = null;
+    function decrementTimer() {
+      if (state.timerValue > 0) {
+        state.timerValue -= 1;
+
+        timerHours.value = Math.floor(state.timerValue / 3600).toString().padStart(2, "0");
+        timerMinutes.value = Math.floor(state.timerValue % 3600 / 60).toString().padStart(2, "0");
+        timerSeconds.value = Math.floor(state.timerValue % 3600 % 60).toString().padStart(2, "0");
+      }
+      else {
+        state.timerRunning = false;
+        state.timerEnded = true;
+        timerAlarm.currentTime = 0;
+        timerAlarm.play();
+
+        if (timerInterval) {
+          clearInterval(timerInterval);
+          timerInterval = null;
+        }
+      }
+    }
+
+    function initializeTimer() {
+      state.timerInitialized = true;
+      state.timerRunning = true;
+      state.timerEnded = false;
+
+      console.log(timerSeconds.value);
+
+      const hours = parseFloat(timerHours.value.toString()) > 0 ? parseFloat(timerHours.value.toString()) : 0;
+      const minutes = parseFloat(timerMinutes.value.toString()) > 0 ? parseFloat(timerMinutes.value.toString()) : 0;
+      const seconds = parseFloat(timerSeconds.value.toString()) > 0 ? parseFloat(timerSeconds.value.toString()) : 0;
+
+      state.timerInitialValue = (hours * 3600) + (minutes * 60) + seconds;
+      state.timerValue = state.timerInitialValue;
+
+      timerInterval = setInterval(decrementTimer, 1000) as unknown as number;
+
+      timerHours.value = Math.floor(state.timerValue / 3600).toString().padStart(2, "0");
+      timerMinutes.value = Math.floor(state.timerValue % 3600 / 60).toString().padStart(2, "0");
+      timerSeconds.value = Math.floor(state.timerValue % 3600 % 60).toString().padStart(2, "0");
+    };
+
+    function pauseTimer() {
+      state.timerRunning = false;
+      if (timerInterval) {
+        clearInterval(timerInterval);
+        timerInterval = null;
+      }
+    };
+
+    function resumeTimer() {
+      state.timerRunning = true;
+      timerInterval = setInterval(decrementTimer, 1000) as unknown as number;
+    };
+
+    function resetTimer() {
+      state.timerInitialized = false;
+      state.timerRunning = false;
+      state.timerEnded = false;
+
+      timerAlarm.pause();
+      timerAlarm.currentTime = 0;
+
+      timerHours.value = "00";
+      timerMinutes.value = "00";
+      timerSeconds.value = "00";
+
+      state.timerValue = 0;
+      if (timerInterval) {
+        clearInterval(timerInterval);
+        timerInterval = null;
+      }
+    };
+
+    return {
+      ...toRefs(state),
+      timerHours,
+      timerMinutes,
+      timerSeconds,
+      timerButtons,
+      timerProgress,
+      initializeTimer,
+      pauseTimer,
+      resumeTimer,
+      resetTimer,
+    };
+  },
+});
+</script>
+
+<style scoped>
+    .centered-input >>> input {
+      text-align: center;
+    }
+</style>

frontend/components/global/BaseButtonGroup.vue

@@ -1,7 +1,7 @@
 <template>
   <v-item-group>
     <template v-for="btn in buttons">
-      <v-menu v-if="btn.children" :key="'menu-' + btn.event" active-class="pa-0" offset-y top left>
+      <v-menu v-if="btn.children" :key="'menu-' + btn.event" active-class="pa-0" offset-y top left :style="stretch ? 'width: 100%;' : ''">
         <template #activator="{ on, attrs }">
           <v-btn tile :large="large" icon v-bind="attrs" v-on="on">
             <v-icon>
@@ -25,7 +25,17 @@
         content-class="text-caption"
       >
         <template #activator="{ on, attrs }">
-          <v-btn tile :large="large" icon v-bind="attrs" @click="$emit(btn.event)" v-on="on" :disabled="btn.disabled">
+          <v-btn
+            tile
+            icon
+            :color="btn.color"
+            :large="large"
+            :disabled="btn.disabled"
+            :style="stretch ? `width: ${maxButtonWidth};` : ''"
+            v-bind="attrs"
+            v-on="on"
+            @click="$emit(btn.event)"
+          >
             <v-icon> {{ btn.icon }} </v-icon>
           </v-btn>
         </template>
@@ -36,10 +46,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api";
+import { computed, defineComponent } from "@nuxtjs/composition-api";
 
 export interface ButtonOption {
   icon?: string;
+  color?: string;
   text: string;
   event: string;
   children?: ButtonOption[];
@@ -56,6 +67,16 @@ export default defineComponent({
       type: Boolean,
       default: true,
     },
+    stretch: {
+      type: Boolean,
+      default: false,
+    }
   },
+  setup(props) {
+    const maxButtonWidth = computed(() => `${100 / props.buttons.length}%`);
+    return {
+      maxButtonWidth,
+    };
+  }
 });
 </script>

frontend/lang/messages/en-US.json

@@ -480,6 +480,13 @@
     "increase-scale-label": "Increase Scale by 1",
     "locked": "Locked",
     "public-link": "Public Link",
+    "timer": {
+      "kitchen-timer": "Kitchen Timer",
+      "start-timer": "Start Timer",
+      "pause-timer": "Pause Timer",
+      "resume-timer": "Resume Timer",
+      "stop-timer": "Stop Timer"
+    },
     "edit-timeline-event": "Edit Timeline Event",
     "timeline": "Timeline",
     "timeline-is-empty": "Nothing on the timeline yet. Try making this recipe!",

frontend/lib/icons/icons.ts

@@ -135,6 +135,12 @@ import {
   mdiDockTop,
   mdiDockBottom,
   mdiCheckboxOutline,
+  mdiTimer,
+  mdiTimerPlus,
+  mdiPause,
+  mdiStop,
+  mdiPlay,
+  mdiTimerPause,
   mdiFlipHorizontal,
   mdiFlipVertical,
   mdiRotateLeft,
@@ -228,6 +234,8 @@ export const icons = {
   openInNew: mdiOpenInNew,
   orderAlphabeticalAscending: mdiOrderAlphabeticalAscending,
   pageLayoutBody: mdiPageLayoutBody,
+  pause: mdiPause,
+  play: mdiPlay,
   printer: mdiPrinter,
   printerSettings: mdiPrinterPosCog,
   refreshCircle: mdiRefreshCircle,
@@ -247,8 +255,12 @@ export const icons = {
   sortClockAscending: mdiSortClockAscending,
   sortClockDescending: mdiSortClockDescending,
   star: mdiStar,
+  stop: mdiStop,
   testTube: mdiTestTube,
   timelineText: mdiTimelineText,
+  timer: mdiTimer,
+  timerPause: mdiTimerPause,
+  timerPlus: mdiTimerPlus,
   tools: mdiTools,
   potSteam: mdiPotSteam,
   translate: mdiTranslate,

frontend/nuxt.config.js

@@ -385,6 +385,17 @@ export default {
         // ["@nuxtjs/composition-api/dist/babel-plugin"],
       ],
     },
+    // audio file support
+    // https://v2.nuxt.com/docs/features/configuration/#extend-webpack-to-load-audio-files
+    extend(config, ctx) {
+      config.module.rules.push({
+        test: /\.(ogg|mp3|wav|mpe?g)$/i,
+        loader: 'file-loader',
+        options: {
+          name: '[path][name].[ext]'
+        }
+      })
+    },
     transpile: process.env.NODE_ENV !== "production" ? [/@vue[\\/]composition-api/] : null,
   },
 };