111 lines
3.7 KiB
Vue
111 lines
3.7 KiB
Vue
<template>
|
|
<div>
|
|
<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: [],
|
|
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;
|
|
})
|
|
.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> |