jacob/munch-ease-frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

API Changes

Browse source
This commit is contained in:
jableader 2024-01-13 14:22:10 +11:00
parent 3582b2281e
commit 494715f2a2
3 changed files with 44 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
src/components/EditRecipePage.vue
View file

@ -4,21 +4,22 @@
<input class="recipe-link" type="text" v-model="link" placeholder="Link to Recipe" /> <input class="recipe-link" type="text" v-model="link" placeholder="Link to Recipe" />
<button @click="parseLink">Parse</button> <button @click="parseLink">Parse</button>
</div> </div>
<div v-if="parsed && !recipe"> <div v-if="parse_failed">
<p>Recipe not found</p> <p>Recipe not found</p>
</div> </div>
<div v-if="parsed && recipe"> <div v-if="!parse_failed && recipe">
<h1><input class="recipe-name" type="text" :value="recipe.name"></h1> <h1><input class="recipe-name" type="text" :value="recipe.name"></h1>
<h3>Ingredients</h3> <h3>Ingredients</h3>
<ul> <ul>
<li v-for="ingredient in recipe.ingredients" :key="ingredient.line"> <li v-for="ingredient in recipe.ingredients" :key="ingredient.line">
<ingredient-line <ingredient-line
:ingredient="ingredient" :ingredient="ingredient"
@update-ingredient="updateIngredient" @update-ingredient="updateIngredient"
@update-product-link="updateProduct" /> @update-product-link="updateProduct" />
</li> </li>
</ul> </ul>
<button class="submit-btn" @click="saveRecipe">Save</button>
</div> </div>
</div> </div>
</template> </template>
@ -63,33 +64,35 @@ export default {
}, },
data() { data() {
return { return {
link: "", link: this.$route.query.url ?? "",
parsed: null, parse_failed: false,
recipe: null, recipe: null,
chefs: [] chefs: []
} }
}, },
mounted() { mounted() {
if (this.$route.query.url) { this.refreshRecipe();
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: { methods: {
parseLink() { parseLink() {
this.$router.push({ path: '/recipes/add', query: { url: this.link }}) 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) => { data.parseRecipe(this.link).then((response) => {
this.recipe = response.recipe; if (!response)
this.parsed = response.raw; {
this.parse_failed = true;
return;
}
this.parse_failed = false;
this.recipe = response;
}); });
}, },
updateProduct(ingredient, product_link) { updateProduct(ingredient, product_link) {
@ -102,13 +105,19 @@ export default {
const newIngredient = newIngredients[0]; const newIngredient = newIngredients[0];
ingredient.line = line; ingredient.line = line;
ingredient.name = newIngredient.name; ingredient.name = newIngredient.name;
ingredient.measure = newIngredient.measure; ingredient.quantity = newIngredient.quantity;
ingredient.unit = newIngredient.unit;
ingredient.preparation = newIngredient.preparation; ingredient.preparation = newIngredient.preparation;
if (newIngredient.product) { if (newIngredient.product) {
ingredient.product = newIngredient.product; ingredient.product = newIngredient.product;
} }
}); });
}, },
saveRecipe() {
data.saveRecipe(this.recipe).then((response) => {
this.$router.push(`/recipes/${response.id}`)
});
}
}, },
} }
</script> </script>

4
src/components/IngredientLine.vue
View file

@ -17,8 +17,8 @@
<div class="ingredient-details" v-if="ingredient"> <div class="ingredient-details" v-if="ingredient">
<div class="parse-result"> <div class="parse-result">
<p><small>Ingredient: </small><strong>{{ ingredient.name }}</strong></p> <p><small>Ingredient: </small><strong>{{ ingredient.name }}</strong></p>
<p><small>Quantity: </small> <strong>{{ ingredient.measure.qty }}</strong></p> <p><small>Quantity: </small> <strong>{{ ingredient.quantity }}</strong></p>
<p><small>Unit: </small> <strong>{{ ingredient.measure.unit }}</strong></p> <p><small>Unit: </small> <strong>{{ ingredient.unit }}</strong></p>
<p><small>Preparation: </small> <strong>{{ ingredient.preparation }}</strong></p> <p><small>Preparation: </small> <strong>{{ ingredient.preparation }}</strong></p>
</div> </div>
<div v-if="ingredient.product" class="product-result"> <div v-if="ingredient.product" class="product-result">

11
src/data.js
View file

@ -19,7 +19,7 @@ export default {
const body = { const body = {
url, tags: [ingredient.name, ingredient.line], url, tags: [ingredient.name, ingredient.line],
} }
return fetch(BASE_URL + "/products", { return fetch(BASE_URL + "/products", {
method: "POST", method: "POST",
headers: { headers: {
@ -32,5 +32,14 @@ export default {
const params = lines.map(line => "ingredients=" + encodeURIComponent(line)).join("&"); const params = lines.map(line => "ingredients=" + encodeURIComponent(line)).join("&");
return fetch(BASE_URL + "/recipes/ingredients/parse?" + params) return fetch(BASE_URL + "/recipes/ingredients/parse?" + params)
.then(response => response.json()) .then(response => response.json())
},
saveRecipe(recipe) {
return fetch(BASE_URL + "/recipes", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(recipe),
}).then(response => response.json())
} }
} }