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>
<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" />
</span>
<span class="parse-element quantity" :class="{ missing: !(ingredient?.quantity)}">{{ ingredient?.quantity || 'qty' }}</span>
<span class="parse-element unit" :class="{ missing: !(ingredient?.unit)}">{{ ingredient?.unit || 'unit' }}</span>
<span class="parse-element helper" >of</span>
<span class="parse-element name" :class="{ missing: !(ingredient?.name)}">{{ ingredient?.name || 'name' }}</span>
<span class="parse-element product-name" :class="{missing: !(ingredient?.product)}">
<a :href="ingredient?.product?.link" v-if="ingredient?.product?.link" target=”_blank”>
( {{ 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>
<a v-else-if="ingredient?.name" :href="searchlink" target="_blank">
(search?)
</a>
<a v-else>
(product)
</a>
</span>
</p>
<p class="ingredient-details">
<span class="parse-element quantity" :class="{ missing: !(ingredient?.quantity)}">{{ ingredient?.quantity || 'qty' }}</span>
<span class="parse-element unit" :class="{ missing: !(ingredient?.unit)}">{{ ingredient?.unit || 'unit' }}</span>
<span class="parse-element helper" >of</span>
<span class="parse-element name" :class="{ missing: !(ingredient?.name)}">{{ ingredient?.name || 'name' }}</span>:&nbsp;
<span class="parse-element product-name" :class="{missing: !(ingredient?.product)}">
<a :href="ingredient?.product?.link" v-if="ingredient?.product?.link" target=”_blank”>
( {{ 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>
<a v-else-if="ingredient?.name" :href="searchlink" target="_blank">
(search?)
</a>
<a v-else>
(product)
</a>
</span>
</p>
</div>
</template>
@ -38,6 +40,7 @@ export default {
<style scoped>
.compact-parse-results {
flex: left;
display: flex;
justify-content: left;
text-align: left;
@ -67,6 +70,10 @@ export default {
height: 2em;
}
.ingredient-details {
flex: 1;
}
.quantity {
color: blue;
}

14
src/components/EditRecipePage.vue
View file

@ -1,8 +1,9 @@
<template>
<div>
<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="createFromScratch">Create from Scratch</button>
</div>
<div v-if="parse_failed">
@ -136,7 +137,7 @@ export default {
},
async updateProduct(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) {
const newIngredients = await data.parseIngredients([line]);
@ -158,6 +159,15 @@ export default {
}
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;
}
ul.meals-list {
padding: 0;
}
.toggle-actions {
cursor: pointer;
background-color: #fff;