97 lines
2.3 KiB
Vue
97 lines
2.3 KiB
Vue
<template>
|
|
<div>
|
|
<div v-if="recipe === null">
|
|
Loading...
|
|
</div>
|
|
<div v-else>
|
|
<h1 class="title">{{ recipe.name }}</h1>
|
|
<div class="subtitle tags">
|
|
<span v-for="tag in recipe.tags" :key="tag" class="tag is-medium">{{tag}}</span>
|
|
</div>
|
|
<hr>
|
|
<div class="level is-mobile">
|
|
<div class="level-item">
|
|
{{ recipe.total_time}} ({{recipe.active_time}})
|
|
</div>
|
|
|
|
<div class="level-item">
|
|
<p>Yields</p>
|
|
<p>{{recipe.yields}}</p>
|
|
</div>
|
|
|
|
<div class="level-item">
|
|
<p>Source</p>
|
|
<p>{{recipe.source}}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="columns">
|
|
<div class="column">
|
|
<div class="message">
|
|
<div class="message-header">Ingredients</div>
|
|
<div class="message-body content">
|
|
<ul v-if="recipe.ingredients.length > 0">
|
|
<li v-for="i in recipe.ingredients">
|
|
{{i.display_name}}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="message">
|
|
<div class="message-header">Directions</div>
|
|
<div class="message-body content" v-html="recipe.rendered_steps">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="message">
|
|
<div class="message-header" @click="showNutrition = !showNutrition">Nutrition Data</div>
|
|
<div class="message-body" v-show="showNutrition">
|
|
<table class="table">
|
|
<tr>
|
|
<th>Item</th>
|
|
<th>Value</th>
|
|
</tr>
|
|
<tr v-for="nutrient in recipe.nutrition_data.nutrients" :key="nutrient.name">
|
|
<td>{{nutrient.label}}</td>
|
|
<td>{{nutrient.value}}</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<h3 class="title is-5">Nutrition Calculation Warnings</h3>
|
|
<ul>
|
|
<li v-for="warn in recipe.nutrition_data.errors" :key="warn">
|
|
{{warn}}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
props: {
|
|
recipe: {
|
|
required: true,
|
|
type: Object
|
|
}
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
showNutrition: false
|
|
};
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
</style> |