118 lines
No EOL
2.9 KiB
Vue
118 lines
No EOL
2.9 KiB
Vue
<template>
|
|
<div>
|
|
<ul class="meals-list" v-if="meals.length">
|
|
<li v-for="meal in meals" :key="meal.id">
|
|
<meal-card :meal="meal"/>
|
|
<button class="toggle-actions" @click="selectedMeal = ((meal == selectedMeal) ? null : meal)">
|
|
<img :src="meal == selectedMeal ? require('@/assets/chevron-down.svg') : require('@/assets/chevron-up.svg')" />
|
|
</button>
|
|
|
|
<ul class="actions" v-if="selectedMeal == meal">
|
|
<li><router-link class="nav-link" :to="`/meals/${selectedMeal.id}`" active-class="active">Edit Meal</router-link></li>
|
|
<li><a @click="markConsumed">Mark Consumed</a></li>
|
|
<li><a @click="deleteSelectedMeal" class="button">Remove</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
<ul v-if="!meals.length">
|
|
<li>No meals planned</li>
|
|
</ul>
|
|
<action-item title="Plan Meal" :image="require('@/assets/plan-meal.svg')" @click="() => this.$router.push('/meals/add')" />
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
li {
|
|
list-style-type: none;
|
|
}
|
|
|
|
ul.meals-list {
|
|
padding: 0;
|
|
}
|
|
|
|
.toggle-actions {
|
|
cursor: pointer;
|
|
background-color: #fff;
|
|
border: none;
|
|
border-bottom: solid 1px #ccc;
|
|
padding: 0 2em;
|
|
margin: 0;
|
|
}
|
|
|
|
.toggle-actions img {
|
|
width: 2em;
|
|
height: 2em;
|
|
}
|
|
|
|
.meals-list > li {
|
|
margin-bottom: 1em;
|
|
padding: 0;
|
|
border: 1px solid #ccc;
|
|
border-radius: 5px;
|
|
padding: 10px;
|
|
}
|
|
|
|
ul.actions {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.actions li {
|
|
display: block;
|
|
border: 1px solid #ccc;
|
|
}
|
|
|
|
.actions li:hover {
|
|
background-color: #ccc;
|
|
}
|
|
|
|
.actions li a {
|
|
display: block;
|
|
text-decoration: none;
|
|
color: #000;
|
|
width: 100%;
|
|
cursor: pointer;
|
|
padding-top: 2ex;
|
|
padding-bottom: 2ex;
|
|
}
|
|
|
|
</style>
|
|
|
|
<script>
|
|
import ActionItem from '@/components/ActionItem.vue'
|
|
import MealCard from '@/components/meals/MealCard.vue'
|
|
import data from '@/data.js'
|
|
|
|
export default {
|
|
name: 'MealPlanPage',
|
|
components: { MealCard, ActionItem },
|
|
data() {
|
|
const from = new Date();
|
|
from.setTime(0);
|
|
|
|
const to = new Date();
|
|
to.setDate(to.getDate() + 7);
|
|
|
|
return {
|
|
from, to,
|
|
meals: [],
|
|
selectedMeal: null
|
|
}
|
|
},
|
|
async beforeMount() {
|
|
const meals = await data.getUpcomingMeals(this.from, this.to)
|
|
this.meals = meals;
|
|
},
|
|
methods: {
|
|
async deleteSelectedMeal() {
|
|
await data.deleteMeal(this.selectedMeal.id);
|
|
this.meals = this.meals.filter(m => m.id !== this.selectedMeal.id);
|
|
this.selectedMeal = null;
|
|
},
|
|
async markConsumed() {
|
|
await data.markMealConsumed(this.selectedMeal.id);
|
|
this.meals = this.meals.filter(m => m.id !== this.selectedMeal.id);
|
|
}
|
|
}
|
|
}
|
|
</script> |