meal plan date handling rewrite

This commit is contained in:
vabene1111
2020-12-14 17:11:40 +01:00
parent 89cd8bc2d2
commit 910b28fe2d
3 changed files with 51 additions and 32 deletions

View File

@@ -24,14 +24,14 @@
<div class="col-md-4 offset-md-4">
<div class="input-group" style="margin-top: 8px; margin-bottom: 8px">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary shadow-none" @click="changeWeek(-1)">
<button class="btn btn-outline-secondary shadow-none" @click="changeStartDate(-7)">
<i class="fas fa-arrow-left"></i>
</button>
</div>
<input name="week" id="id_week" class="form-control" type="week" v-model="week"
<input name="date" id="id_date" class="form-control" type="date" v-model="start_date"
@change="updatePlan()">
<div class="input-group-append">
<button class="btn btn-outline-secondary shadow-none" @click="changeWeek(1)">
<button class="btn btn-outline-secondary shadow-none" @click="changeStartDate(7)">
<i class="fas fa-arrow-right"></i>
</button>
</div>
@@ -44,7 +44,7 @@
<table class="table table-sm table-striped table-responsive-sm">
<thead class="thead-dark">
<tr>
<th v-for="d in days" style="width: 14.2%; text-align: center">[[d]]<br/>[[formatDateDay(d)]].
<th v-for="d in dates" style="width: 14.2%; text-align: center">[[formatDateDayname(d)]]<br/>[[formatDateDay(d)]].
<button class="btn btn-sm btn-outline-secondary shadow-none" @click="addDayToShopping(d)"><i
class="fas fa-cart-plus fa-sm"></i></button>
</th>
@@ -107,7 +107,8 @@
<input type="text" class="form-control" v-model="recipe_query" @keyup="getRecipes"
placeholder="{% trans 'Search Recipe' %}">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" @click="getRandomRecipes">
<button class="btn btn-outline-secondary" type="button"
@click="getRandomRecipes">
<i class="fas fa-dice"></i>
</button>
</div>
@@ -345,8 +346,8 @@
delimiters: ['[[', ']]'],
el: '#app',
data: {
week: moment().format('YYYY-[W]WW'),
days: moment.weekdays(true),
start_date: undefined,
dates: [],
plan_entries: [],
meal_types: [],
meal_types_edit: [],
@@ -374,6 +375,8 @@
this.$set(this.user_names, {{ request.user.pk }}, '{{ request.user.get_user_name }}')
this.user_id_update = Array.from(this.default_shared_users)
this.start_date = moment().weekday(0).format('YYYY-MM-DD')
this.updatePlan();
this.getRecipes();
},
@@ -388,6 +391,11 @@
})
},
updatePlan: function () {
this.dates = [];
for (var i = 0; i <= 6; i++) {
this.dates.push(moment(this.start_date).add(i, 'days'));
}
let planEntryPromise = this.getPlanEntries();
let planTypePromise = this.getPlanTypes();
@@ -396,7 +404,7 @@
})
},
getPlanEntries: function () {
return this.$http.get("{% url 'api:mealplan-list' %}?html_week=" + this.week).then((response) => {
return this.$http.get("{% url 'api:mealplan-list' %}?from_date=" + this.dates[0].format('YYYY-MM-DD') + "&to_date=" + this.dates[this.dates.length - 1].format('YYYY-MM-DD')).then((response) => {
this.plan_entries = response.data;
}).catch((err) => {
console.log("getPlanEntries error: ", err);
@@ -431,11 +439,10 @@
meal_type: t.id,
days: {}
})
for (let d of this.days) {
let date = moment(this.week).weekday(this.days.indexOf(d)).format('YYYY-MM-DD')
this.$set(this.meal_plan[t.name].days, date, {
name: d,
date: date,
for (let d of this.dates) {
this.$set(this.meal_plan[t.name].days, d.format('YYYY-MM-DD'), {
name: this.formatDateDayname(d),
date: d.format('YYYY-MM-DD'),
items: []
})
}
@@ -632,11 +639,14 @@
formatLocalDate: function (date) {
return moment(date).format('LL')
},
formatDateDay: function (day) {
return moment(this.week).weekday(this.days.indexOf(day)).format('D')
formatDateDay: function (date) {
return moment(date).format('D')
},
changeWeek: function (change) {
this.week = moment(this.week).add(change, 'w').format('YYYY-[W]WW')
formatDateDayname: function (date) {
return moment(date).format('dddd')
},
changeStartDate: function (change) {
this.start_date = moment(this.start_date).add(change, 'days').format('YYYY-MM-DD')
this.updatePlan();
},
getShoppingUrl: function () {
@@ -653,13 +663,14 @@
return url
},
getIcalUrl: function () {
return "{% url 'api_get_plan_ical' 12345 %}".replace(/12345/, this.week);
if (this.dates.length === 0) {
return ""
}
return "{% url 'api_get_plan_ical' 12345 6789 %}".replace(/12345/, this.dates[0].format('YYYY-MM-DD')).replace(/6789/, this.dates[this.dates.length - 1].format('YYYY-MM-DD'));
},
addDayToShopping: function (day) {
let date = moment(this.week).weekday(this.days.indexOf(day)).format('YYYY-MM-DD')
addDayToShopping: function (date) {
for (let t of this.meal_types) {
for (let i of this.meal_plan[t.name].days[date].items) {
for (let i of this.meal_plan[t.name].days[date.format('YYYY-MM-DD')].items) {
if (!this.shopping_list.includes(i)) {
this.shopping_list.push(i)
}