123 lines
No EOL
3.1 KiB
Vue
123 lines
No EOL
3.1 KiB
Vue
<template>
|
|
<div>
|
|
<div>
|
|
<input class="recipe-link" type="text" v-model="link" placeholder="Link to Recipe" />
|
|
<button @click="parseLink">Parse</button>
|
|
</div>
|
|
<div v-if="parse_failed">
|
|
<p>Recipe not found</p>
|
|
</div>
|
|
|
|
<div v-if="!parse_failed && recipe">
|
|
<h1><input class="recipe-name" type="text" :value="recipe.name"></h1>
|
|
<h3>Ingredients</h3>
|
|
<ul>
|
|
<li v-for="ingredient in recipe.ingredients" :key="ingredient.line">
|
|
<ingredient-line
|
|
:ingredient="ingredient"
|
|
@update-ingredient="updateIngredient"
|
|
@update-product-link="updateProduct" />
|
|
</li>
|
|
</ul>
|
|
<button class="submit-btn" @click="saveRecipe">Save</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
input {
|
|
border: 0;
|
|
border-bottom: 1px solid #ccc;
|
|
font-size: large;
|
|
margin: 1ex 1em;
|
|
}
|
|
|
|
input.recipe-link {
|
|
width: 80%;
|
|
}
|
|
|
|
input.recipe-name {
|
|
width: 100%;
|
|
}
|
|
|
|
ul {
|
|
padding-right: 1em;
|
|
}
|
|
|
|
li {
|
|
list-style: none;
|
|
}
|
|
|
|
</style>
|
|
|
|
<script>
|
|
|
|
import data from '@/data.js'
|
|
import IngredientLine from './IngredientLine.vue'
|
|
|
|
export default {
|
|
props: {
|
|
id: { type: Number, optional: true }
|
|
},
|
|
components: {
|
|
IngredientLine
|
|
},
|
|
data() {
|
|
return {
|
|
link: this.$route.query.url ?? "",
|
|
parse_failed: false,
|
|
recipe: null,
|
|
chefs: []
|
|
}
|
|
},
|
|
mounted() {
|
|
this.refreshRecipe();
|
|
},
|
|
methods: {
|
|
parseLink() {
|
|
this.$router.push({ path: '/recipes/add', query: { url: this.link }})
|
|
this.refreshRecipe();
|
|
},
|
|
refreshRecipe() {
|
|
if (!this.link) {
|
|
this.recipe = null;
|
|
return
|
|
}
|
|
|
|
data.parseRecipe(this.link).then((response) => {
|
|
if (!response)
|
|
{
|
|
this.parse_failed = true;
|
|
return;
|
|
}
|
|
|
|
this.parse_failed = false;
|
|
this.recipe = response;
|
|
});
|
|
},
|
|
updateProduct(ingredient, product_link) {
|
|
data.parseProduct(ingredient, product_link).then(product => {
|
|
ingredient.product = product
|
|
});
|
|
},
|
|
updateIngredient(ingredient, line) {
|
|
data.parseIngredients([line]).then(function(newIngredients) {
|
|
const newIngredient = newIngredients[0];
|
|
ingredient.line = line;
|
|
ingredient.name = newIngredient.name;
|
|
ingredient.quantity = newIngredient.quantity;
|
|
ingredient.unit = newIngredient.unit;
|
|
ingredient.preparation = newIngredient.preparation;
|
|
if (newIngredient.product) {
|
|
ingredient.product = newIngredient.product;
|
|
}
|
|
});
|
|
},
|
|
saveRecipe() {
|
|
data.saveRecipe(this.recipe).then((response) => {
|
|
this.$router.push(`/recipes/${response.id}`)
|
|
});
|
|
}
|
|
},
|
|
}
|
|
</script> |