mirrors/recipes
1
0
Fork 0
mirror of https://github.com/TandoorRecipes/recipes.git synced 2026-01-02 04:39:54 -05:00
Code Issues Packages Projects Releases Wiki Activity

playing with the timer

Browse Source
This commit is contained in:
vabene1111
2024-03-26 07:52:43 +01:00
committed by smilerz
parent 748518f567
commit 2b3e2039b8
1 changed files with 32 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
vue3/src/components/display/Step.vue
View File

@@ -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})
}
}
})