munch-ease-frontend/src/components/shopping/ShoppingPage.vue

113 lines
No EOL
3.9 KiB
Vue

<template>
<div>
<h1>Meals</h1>
<meal-selection-list />
<h1>Shopping List</h1>
<ul>
<li v-for="item in shoppingList" :key="item.id">
<shopping-list-item :product="item.product" :sources="item.sources" />
</li>
</ul>
</div>
<!--
# Functions
* Add a random item to next shop
* Add meals to next shop
* Show cards for the next 7 meals
* Slider / drawer for more meals
* Check meal to add
* Update shopping list automatically as meals change
* Visual indicator for meals that are already in the list
* Visual indicator for purchased meals
* Aggregate items from meals and random items into a single list of products
* For each product, need to have visibility of
* Name
* Link
* Image
* Quantity
* Source meal / person
* Date added / for
* Need to be able to mark list as done
* Keeps history - track purchased meals
* Clears list
* History view of purchased lists (seperate page ofc)
-->
</template>
<style scoped>
li {
list-style-type: none;
border: 1px solid #ccc;
border-radius: 0.5em;
margin-bottom: 1em;
}
ul {
padding: 0;
}
</style>
<script>
import ShoppingListItem from './ShoppingListItem.vue'
import MealSelectionList from './MealSelectionList.vue'
export default {
name: 'ShoppingPage',
components: {
ShoppingListItem, MealSelectionList
},
data() {
return {
shoppingList: [
{
product: { name: 'Apples', link: "#", img_small: "https://freshsensations.com.au/cdn/shop/products/Apple_Red_Delicious_db92e9ab-4239-4138-97af-065285ccfc83.png?v=1579222082", unit: "kg", size: 1},
sources: [
{
type: "person",
person: { id: 1, name: "Jacob" },
quantity: { value: 3, unit: "kg" }
},
{
type: "meal_extra_ingredient",
meal: { id: 1, meal_date: new Date() },
ingredient: { id: 1, name: "Apples", line: "sum extra applez" },
}
],
},
{
product: { name: 'Bananas', link: "#", img_small: "https://freshsensations.com.au/cdn/shop/products/Banana_Cavendish_1b7b3b7b-4b3b-4b3b-4b3b-4b3b4b3b4b3b.png?v=1579222082", unit: "kg", size: 1},
sources: [
{
type: "meal_recipe",
meal: { id: 1, meal_date: new Date()},
recipe: { id: 1, name: "Banana Bread" },
quantity: { value: 2, unit: "kg" }
}
],
},
{
product: { name: 'Milk', link: "#", img_small: "https://freshsensations.com.au/cdn/shop/products/Milk_1L_1b7b3b7b-4b3b-4b3b-4b3b-4b3b4b3b4b3b.png?v=1579222082", unit: "l", size: 1},
sources: [
{
type: "meal_recipe",
meal: { id: 1, meal_date: new Date() },
recipe: { id: 1, name: "Banana Bread" },
quantity: { value: 1, unit: "l" }
},
{
type: "person",
person: { id: 1, name: "Jacob" },
quantity: { value: 4, unit: "litres" }
},
],
}
]
}
}
}
</script>