ClearBowl/front/components/Recipes/ShowRecipe.vue

<template>
    <div v-if="loaded">
        <Card>
            <p slot="title">{{ name }}</p>
            <Row type="flex" justify="right" style="margin-bottom: 10px;">
                <Col span="8"/>
                <Col span="8" offset="8">
                    <Button v-if="$auth.loggedIn" type="primary" @click="addToHistory">
                        Dodaj przepis do historii
                    </Button>
                </Col>
            </Row>
            <Row style="padding-left: 10px; padding-right: 10px">
                <Col span="8" style="text-align: left">
                    <span><b>Wartości odżywcze:</b></span>
                    <ul>
                        <span>Kcal: {{nutrition.kcal}}</span>
                    </ul>
                    <ul>
                        <span>Węglowodany: {{nutrition.carbohydrates}}</span>
                    </ul>
                    <ul>
                        <span>Białka: {{nutrition.protein}}</span>
                    </ul>
                    <ul>
                        <span>Tłuszcze: {{nutrition.fat}}</span>
                    </ul>
                    <br/>
                    <span><b>Składniki:</b></span>
                    <ul>
                        <li v-for="item in ingredients">
                            <span>{{ item.name }}: {{ item.weight }}g</span>
                        </li>
                    </ul>
                </Col>
                <Col span="16" style="text-align: left">
                    <span><b>Opis:</b></span>
                    <p>{{ description }}</p>
                    <br/>
                    <span><b>Przygotowanie:</b></span>
                    <ul v-for="item in steps">
                        <span>{{ item }}</span>
                    </ul>
                </Col>
            </Row>
        </Card>
    </div>
</template>

<script>
    export default {
        name: "ShowRecipe",
        data() {
            return {
                name: '',
                description: '',
                ingredients: [],
                steps: [],
                loaded: false,
                nutrition: {
                    kcal: 0,
                    carbohydrates: 0,
                    protein: 0,
                    fat: 0
                }
            }
        },
        mounted() {
            this.retrieveRecipe();
        },
        methods: {
            retrieveRecipe() {
                this.loading = true;
                this.$axios.get(`/recipe/${this.$route.params.id}`)
                    .then((response) => {
                        const data = response.data.data.recipe;
                        this.name = data.name;
                        this.description = data.description;
                        this.ingredients = data.ingredients;
                        this.steps = data.steps;
                        this.nutrition = data.nutrition;
                        this.loaded = true;
                    })
                    .catch((error) => {
                        console.log(error);
                        this.loading = false;
                        this.$Message.error('Błąd!');
                    });
            },
            success() {
                this.$Notice.success({
                    title: 'Przepis został dodany do historii.',
                    desc: ''
                });
            },
            addToHistory() {
                this.$axios.post('/user/save-recipe', {recipeID: this.$route.params.id})
                    .then(() => {
                        this.success();
                    })
                    .catch((error) => {
                        console.log(error);
                        this.$Message.error('Błąd!');
                        this.modal_loading = false;
                    });
            }
        }
    }
</script>

<style scoped>

</style>