114 lines
2.8 KiB
Vue
114 lines
2.8 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="parsed && !recipe">
|
||
|
|
<p>Recipe not found</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-if="parsed && 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>
|
||
|
|
</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: "",
|
||
|
|
parsed: null,
|
||
|
|
recipe: null,
|
||
|
|
chefs: []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
if (this.$route.query.url) {
|
||
|
|
this.link = this.$route.query.url
|
||
|
|
data.parseRecipe(this.link).then((response) => {
|
||
|
|
if (!response)
|
||
|
|
{
|
||
|
|
this.parsed = true;
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
this.recipe = response.recipe;
|
||
|
|
this.parsed = response.raw;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
parseLink() {
|
||
|
|
this.$router.push({ path: '/recipes/add', query: { url: this.link }})
|
||
|
|
data.parseRecipe(this.link).then((response) => {
|
||
|
|
this.recipe = response.recipe;
|
||
|
|
this.parsed = response.raw;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
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.measure = newIngredient.measure;
|
||
|
|
ingredient.preparation = newIngredient.preparation;
|
||
|
|
if (newIngredient.product) {
|
||
|
|
ingredient.product = newIngredient.product;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|