recipe view timer

vue3/src/components/display/IngredientsTableRow.vue

@@ -1,16 +1,19 @@
 <template>
     <tr>
         <template v-if="ingredient.isHeader">
-            <td colspan="4">{{ ingredient.note }}</td>
+            <td colspan="4"><b>{{ ingredient.note }}</b></td>
         </template>
-        <td>{{ ingredient.amount }}</td>
-        <td><span v-if="ingredient.unit != null">{{ ingredient.unit.name }}</span></td>
-        <td ><span v-if="ingredient.food != null">{{ ingredient.food.name }}</span></td>
-        <td>
-            <v-icon class="far fa-comment" v-if="ingredient.note != ''" @click="show_tooltip = !show_tooltip">
-                <v-tooltip v-model="show_tooltip" activator="parent" location="start">{{ ingredient.note }}</v-tooltip>
-            </v-icon>
-        </td>
+        <template v-else>
+            <td>{{ ingredient.amount }}</td>
+            <td><span v-if="ingredient.unit != null">{{ ingredient.unit.name }}</span></td>
+            <td><span v-if="ingredient.food != null">{{ ingredient.food.name }}</span></td>
+            <td>
+                <v-icon class="far fa-comment" v-if="ingredient.note != ''" @click="show_tooltip = !show_tooltip">
+                    <v-tooltip v-model="show_tooltip" activator="parent" location="start">{{ ingredient.note }}</v-tooltip>
+                </v-icon>
+            </td>
+        </template>
+
     </tr>
 </template>
 
@@ -26,10 +29,10 @@ export default defineComponent({
             required: true
         }
     },
-    data(){
-      return {
-          show_tooltip: false,
-      }
+    data() {
+        return {
+            show_tooltip: false,
+        }
     },
 })
 </script>

vue3/src/components/display/RecipeView.vue

@@ -1,12 +1,21 @@
 <template>
 
-    <v-img cover lazy :src="recipe.image"></v-img>
-
-
     <v-card>
-
         <v-card-title>{{ recipe.name }}</v-card-title>
 
+        <v-img max-height="25vh" cover lazy :src="recipe.image">
+            <!-- TODO placement in image -->
+            <KeywordsBar :keywords="recipe?.keywords"></KeywordsBar>
+
+            <v-chip size="small" color="primary" label>
+                <v-icon icon="fas fa-calendar" class="mr-2"></v-icon>
+                {{ recipe.lastCooked }}
+            </v-chip>
+
+            <v-rating v-model="recipe.rating" color="tandoor"></v-rating>
+        </v-img>
+
+
         <v-container>
             <v-row class="text-center text-body-2">
                 <v-col class="pt-1 pb-1">
@@ -24,36 +33,11 @@
                             <div class="text-grey"><span v-if="recipe?.servingsText">{{ recipe.servingsText }}</span><span v-else>Servings</span></div>
                         </template>
                     </NumberScalerDialog>
-
-
                 </v-col>
-
             </v-row>
         </v-container>
 
-        <v-card-subtitle v-if="recipe?.description"> {{ recipe.description }}</v-card-subtitle>
-        <v-card-subtitle>
-            <KeywordsBar :keywords="recipe?.keywords"></KeywordsBar>
-        </v-card-subtitle>
 
-
-        <v-card-text>
-
-            <v-chip size="small" color="primary" label>
-                <v-icon icon="fa fa-clock" class="mr-2"></v-icon>
-                {{ recipe.workingTime }} min
-            </v-chip>
-            <v-chip size="small" color="primary" label>
-                <v-icon icon="fas fa-hourglass-half" class="mr-2"></v-icon>
-                {{ recipe.waitingTime }} min
-            </v-chip>
-            <v-chip size="small" color="primary" label>
-                <v-icon icon="fas fa-calendar" class="mr-2"></v-icon>
-                {{ recipe.lastCooked }}
-            </v-chip>
-            <v-rating v-model="recipe.rating" color="tandoor"></v-rating>
-
-        </v-card-text>
     </v-card>
 
     <v-card class="mt-1">
@@ -65,7 +49,7 @@
         <Step :step="s"></Step>
     </v-card>
 
-<!--    <RecipeActivity :recipe="recipe"></RecipeActivity>-->
+    <!--    <RecipeActivity :recipe="recipe"></RecipeActivity>-->
 
 </template>
 
@@ -85,9 +69,7 @@ export default defineComponent({
     components: {RecipeActivity, Step, StepsOverview, IngredientsTable, NumberScalerDialog, KeywordsBar},
     computed: {},
     data() {
-        return {
-
-        }
+        return {}
     },
     props: {
         recipe: {

vue3/src/components/display/Step.vue

@@ -5,13 +5,18 @@
                 <v-col>{{ step.name }}</v-col>
                 <v-col class="text-right">
                     <v-btn-group density="compact" variant="tonal">
-                        <v-btn size="small" color="info" v-if="step.time > 0"><i class="fas fa-stopwatch mr-1"></i> {{ step.time }}</v-btn>
-                        <v-btn size="small" color="success" ><i class="fas fa-check"></i></v-btn>
+                        <v-btn size="small" color="info" v-if="step.time > 0" @click="startTimer(step.time)"><i class="fas fa-stopwatch mr-1"></i> {{ step.time }}</v-btn>
+                        <v-btn size="small" color="success"><i class="fas fa-check"></i></v-btn>
                     </v-btn-group>
                 </v-col>
             </v-row>
         </v-card-title>
 
+        <v-alert v-if="timer_end != null" :color="timer_color" closable @click:close="timer_end = null">
+            <v-alert-title><i class="fas fa-stopwatch mr-1"></i> {{ remaining_time }}</v-alert-title>
+            Finished at {{ finished_at }}
+        </v-alert>
+
         <IngredientsTable :ingredients="step.ingredients"></IngredientsTable>
 
         <v-card-text v-if="step.instruction?.length > 0">
@@ -24,15 +29,58 @@
 import {defineComponent, PropType} from 'vue'
 import IngredientsTable from "@/components/display/IngredientsTable.vue";
 import {Step} from "@/openapi";
+import {DateTime, Duration, Interval} from "luxon";
 
 export default defineComponent({
     name: "Step",
+    computed: {
+        timer_color: function () {
+            if (this.timer_end != null) {
+                if (this.time_now > this.timer_end) {
+                    return 'warning'
+                }
+            }
+            return ''
+        },
+        remaining_time: function () {
+            if (this.timer_end != null) {
+                if (Interval.fromDateTimes(this.time_now, this.timer_end).length() > 0){
+                    return Duration.fromMillis(Interval.fromDateTimes(this.time_now, this.timer_end).length()).toFormat('hh:mm:ss')
+                } else {
+                    return '00:00:00'
+                }
+            }
+            return ''
+        },
+        finished_at: function () {
+            if (this.timer_end != null) {
+                return this.timer_end.toLocaleString(DateTime.TIME_SIMPLE)
+            }
+            return ''
+        }
+    },
     components: {IngredientsTable},
     props: {
         step: {
             type: {} as PropType<Step>,
             required: true,
         }
+    },
+    data() {
+        return {
+            timer_end: null as null | DateTime,
+            time_now: DateTime.now(),
+        }
+    },
+    mounted() {
+        setInterval(() => {
+            this.time_now = DateTime.now()
+        }, 500)
+    },
+    methods: {
+        startTimer(minutes: number) {
+            this.timer_end = DateTime.now().plus({minutes: minutes})
+        }
     }
 })
 </script>