From 2b3e2039b8e95a0a1b8233c2b365907ec68264e5 Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Tue, 26 Mar 2024 07:52:43 +0100
Subject: [PATCH] playing with the timer

---
 vue3/src/components/display/Step.vue | 40 ++++++++++++++++++++++------
 1 file changed, 32 insertions(+), 8 deletions(-)

diff --git a/vue3/src/components/display/Step.vue b/vue3/src/components/display/Step.vue
index 84581dfe6..ce0b26535 100644
--- a/vue3/src/components/display/Step.vue
+++ b/vue3/src/components/display/Step.vue
@@ -5,22 +5,34 @@
                 <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" @click="startTimer(step.time)"><i class="fas fa-stopwatch mr-1"></i> {{ step.time }}</v-btn>
+                        <v-btn size="small" color="info" v-if="step.time != undefined && 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-progress-linear v-if="timer_end != null" :model-value="timerProgress" color="success" height="5">
+
+        </v-progress-linear>
+        <v-alert :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 }}
+            <template #close>
+                <v-btn-group divided>
+                    <v-btn width="40" @click="subTimer"><i class="fas fa-minus"></i>1</v-btn>
+                    <v-btn width="40" @click="addTimer"><i class="fas fa-plus"></i>1</v-btn>
+                    <v-btn width="40"><i class="fas fa-pause"></i></v-btn>
+                    <v-btn width="40"><i class="fas fa-stop"></i></v-btn>
+                </v-btn-group>
+            </template>
         </v-alert>
 
         <IngredientsTable :ingredients="step.ingredients"></IngredientsTable>
 
         <v-card-text v-if="step.instructionsMarkdown.length > 0">
-           <instructions :instructions_html="step.instructionsMarkdown" :ingredient_factor="ingredient_factor"></instructions>
+            <instructions :instructions_html="step.instructionsMarkdown" :ingredient_factor="ingredient_factor"></instructions>
         </v-card-text>
     </v-card>
 </template>
@@ -44,13 +56,15 @@ export default defineComponent({
             }
             return ''
         },
+        timerProgress: function () {
+            if (this.timer_end != null && this.timer_start != null && this.step.time != undefined) {
+                return (Interval.fromDateTimes(this.timer_start, this.time_now).length('seconds') / (this.step.time * 60)) * 100
+            }
+            return 0
+        },
         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 Duration.fromMillis(Interval.fromDateTimes(this.time_now, this.timer_end).length()).toFormat('hh:mm:ss')
             }
             return ''
         },
@@ -75,6 +89,7 @@ export default defineComponent({
     data() {
         return {
             timer_end: null as null | DateTime,
+            timer_start: null as null | DateTime,
             time_now: DateTime.now(),
         }
     },
@@ -85,7 +100,16 @@ export default defineComponent({
     },
     methods: {
         startTimer(minutes: number) {
+            this.timer_start = DateTime.now()
             this.timer_end = DateTime.now().plus({minutes: minutes})
+        },
+        subTimer(){
+            if (this.timer_end != null){
+                this.timer_end = this.timer_end.minus({minutes: 1})
+            }
+        },
+        addTimer(){
+            this.timer_end?.plus({minutes: 1})
         }
     }
 })