mirrors/recipes
1
0
Fork 0
mirror of https://github.com/TandoorRecipes/recipes.git synced 2026-01-07 15:18:20 -05:00
Code Issues Packages Projects Releases Wiki Activity

moved many compoents to composition API

Browse Source
This commit is contained in:
vabene1111
2024-04-21 15:58:31 +02:00
parent ce6c43fb62
commit e040a10096
13 changed files with 342 additions and 347 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,71 +2,59 @@
<v-card>
<v-card-title>
<v-row>
<v-col><span v-if="step.name">{{ step.name }}</span><span v-else>Step {{ stepNumber}}</span></v-col>
<v-col><span v-if="props.step.name">{{ props.step.name }}</span><span v-else>Step {{ props.stepNumber }}</span></v-col>
<v-col class="text-right">
<v-btn-group density="compact" variant="tonal">
<v-btn size="small" color="info" v-if="step.time != undefined && step.time > 0" @click="timerRunning = true"><i class="fas fa-stopwatch mr-1 fa-fw"></i> {{ step.time }}</v-btn>
<v-btn size="small" color="info" v-if="props.step.time != undefined && props.step.time > 0" @click="timerRunning = true"><i class="fas fa-stopwatch mr-1 fa-fw"></i> {{ props.step.time }}</v-btn>
<v-btn size="small" color="success" v-if="hasDetails" @click="stepChecked = !stepChecked"><i class="fas fa-fw" :class="{'fa-check': !stepChecked, 'fa-times': stepChecked}"></i></v-btn>
</v-btn-group>
</v-col>
</v-row>
</v-card-title>
<template v-if="!stepChecked">
<timer :seconds="step.time != undefined ? step.time*60 : 0" @stop="timerRunning = false" v-if="timerRunning"></timer>
<timer :seconds="props.step.time != undefined ? props.step.time*60 : 0" @stop="timerRunning = false" v-if="timerRunning"></timer>
<IngredientsTable :ingredients="step.ingredients"></IngredientsTable>
<IngredientsTable :ingredients="props.step.ingredients"></IngredientsTable>
<v-card-text v-if="step.instructionsMarkdown.length > 0">
<instructions :instructions_html="step.instructionsMarkdown" :ingredient_factor="ingredient_factor"></instructions>
<v-card-text v-if="props.step.instructionsMarkdown.length > 0">
<instructions :instructions_html="props.step.instructionsMarkdown" :ingredient_factor="ingredient_factor"></instructions>
</v-card-text>
</template>
</v-card>
</template>
<script lang="ts">
import {defineComponent, PropType} from 'vue'
<script setup lang="ts">
import {computed, defineComponent, PropType, ref} from 'vue'
import IngredientsTable from "@/components/display/IngredientsTable.vue";
import {Step} from "@/openapi";
import {DateTime, Duration, Interval} from "luxon";
import Instructions from "@/components/display/Instructions.vue";
import Timer from "@/components/display/Timer.vue";
export default defineComponent({
name: "Step",
components: {Timer, Instructions, IngredientsTable},
props: {
step: {
type: {} as PropType<Step>,
required: true,
},
stepNumber: {
type: Number,
required: false,
default: 1
},
ingredient_factor: {
type: Number,
required: true,
},
const props = defineProps({
step: {
type: {} as PropType<Step>,
required: true,
},
computed: {
hasDetails: function () {
return this.step.ingredients.length > 0 || (this.step.instruction != undefined && this.step.instruction.length > 0) || this.step.stepRecipeData != undefined || this.step.file != undefined
}
stepNumber: {
type: Number,
required: false,
default: 1
},
data() {
return {
timerRunning: false,
stepChecked: false,
}
ingredient_factor: {
type: Number,
required: true,
},
mounted() {
},
methods: {}
})
const timerRunning = ref(false)
const stepChecked = ref(false)
const hasDetails = computed(() => {
return props.step.ingredients.length > 0 || (props.step.instruction != undefined && props.step.instruction.length > 0) || props.step.stepRecipeData != undefined || props.step.file != undefined
})
</script>
<style scoped>