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

Rearrange ingredients

Browse source
This commit is contained in:
jableader 2024-05-04 11:52:31 +10:00
parent 8cc01b0ab5
commit 377e0ef700
3 changed files with 40 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
src/components/CompactParsedIngredient.vue
View file

@ -1,23 +1,25 @@
<template> <template>
<div class="compact-parse-results"> <div class="compact-parse-results">
<span class="parse-element teaser-image" v-if="ingredient.product && ingredient.product.img_small"> <p class="parse-element teaser-image" v-if="ingredient.product && ingredient.product.img_small">
<img :src="ingredient.product.img_small" /> <img :src="ingredient.product.img_small" />
</span> </p>
<span class="parse-element quantity" :class="{ missing: !(ingredient?.quantity)}">{{ ingredient?.quantity || 'qty' }}</span> <p class="ingredient-details">
<span class="parse-element unit" :class="{ missing: !(ingredient?.unit)}">{{ ingredient?.unit || 'unit' }}</span> <span class="parse-element quantity" :class="{ missing: !(ingredient?.quantity)}">{{ ingredient?.quantity || 'qty' }}</span>
<span class="parse-element helper" >of</span> <span class="parse-element unit" :class="{ missing: !(ingredient?.unit)}">{{ ingredient?.unit || 'unit' }}</span>
<span class="parse-element name" :class="{ missing: !(ingredient?.name)}">{{ ingredient?.name || 'name' }}</span> <span class="parse-element helper" >of</span>
<span class="parse-element product-name" :class="{missing: !(ingredient?.product)}"> <span class="parse-element name" :class="{ missing: !(ingredient?.name)}">{{ ingredient?.name || 'name' }}</span>:&nbsp;
<a :href="ingredient?.product?.link" v-if="ingredient?.product?.link" target=”_blank”> <span class="parse-element product-name" :class="{missing: !(ingredient?.product)}">
( {{ ingredient?.product?.name }} <img src="@/assets/external-link.svg" style="width: 1em; height: 1em; vertical-align: middle; margin-left: 0.5em; margin-bottom: 0.2em;" /> ) <a :href="ingredient?.product?.link" v-if="ingredient?.product?.link" target=”_blank”>
</a> ( {{ ingredient?.product?.name }} <img src="@/assets/external-link.svg" style="width: 1em; height: 1em; vertical-align: middle; margin-left: 0.5em; margin-bottom: 0.2em;" /> )
<a v-else-if="ingredient?.name" :href="searchlink" target="_blank"> </a>
(search?) <a v-else-if="ingredient?.name" :href="searchlink" target="_blank">
</a> (search?)
<a v-else> </a>
(product) <a v-else>
</a> (product)
</span> </a>
</span>
</p>
</div> </div>
</template> </template>
@ -38,6 +40,7 @@ export default {
<style scoped> <style scoped>
.compact-parse-results { .compact-parse-results {
flex: left;
display: flex; display: flex;
justify-content: left; justify-content: left;
text-align: left; text-align: left;
@ -67,6 +70,10 @@ export default {
height: 2em; height: 2em;
} }
.ingredient-details {
flex: 1;
}
.quantity { .quantity {
color: blue; color: blue;
} }

14
src/components/EditRecipePage.vue
View file

@ -1,8 +1,9 @@
<template> <template>
<div> <div>
<div v-if="!id && !recipe"> <div v-if="!id && !recipe">
<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" /> <br />
<button @click="parseLink">Parse</button> <button @click="parseLink">Parse</button>
<button @click="createFromScratch">Create from Scratch</button>
</div> </div>
<div v-if="parse_failed"> <div v-if="parse_failed">
@ -136,7 +137,7 @@ export default {
}, },
async updateProduct(ingredient, product_link) { async updateProduct(ingredient, product_link) {
const product = await data.parseProduct(ingredient, product_link); const product = await data.parseProduct(ingredient, product_link);
this.recipe.ingredients = this.recipe.ingredients.map(i => i.name == ingredient.name ? { ...i, product } : i); this.recipe.ingredients = this.recipe.ingredients.map(i => i.name == ingredient.name ? { ...i, product, product_id: product.id } : i);
}, },
async updateIngredient(ingredient, line) { async updateIngredient(ingredient, line) {
const newIngredients = await data.parseIngredients([line]); const newIngredients = await data.parseIngredients([line]);
@ -158,6 +159,15 @@ export default {
} }
alert('Failed to save recipe'); alert('Failed to save recipe');
},
async createFromScratch() {
this.recipe = {
id: 0,
name: 'My new recipe',
link: '',
ingredients: [],
image_urls: []
}
} }
}, },
} }

4
src/components/MealPlanPage.vue
View file

@ -24,6 +24,10 @@ li {
list-style-type: none; list-style-type: none;
} }
ul.meals-list {
padding: 0;
}
.toggle-actions { .toggle-actions {
cursor: pointer; cursor: pointer;
background-color: #fff; background-color: #fff;