585 lines
28 KiB
HTML
585 lines
28 KiB
HTML
{% extends "base.html" %}
|
|
{% load i18n %}
|
|
{% load static %}
|
|
|
|
{% block title %}{% trans 'Meal-Plan' %}{% endblock %}
|
|
|
|
{% block extra_head %}
|
|
{{ form.media }}
|
|
<script src="{% static 'js/vue.min.js' %}"></script>
|
|
<script src="{% static 'js/vue-resource.js' %}"></script>
|
|
<script src="{% static 'js/moment-with-locales.min.js' %}"></script>
|
|
|
|
<!-- TODO remove external loading -->
|
|
<!-- CDNJS :: Sortable (https://cdnjs.com/) -->
|
|
<script src="//cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js"></script>
|
|
<!-- CDNJS :: Vue.Draggable (https://cdnjs.com/) -->
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.1/js.cookie.js"
|
|
integrity="sha256-P8jY+MCe6X2cjNSmF4rQvZIanL5VwUUT4MBnOMncjRU=" crossorigin="anonymous"></script>
|
|
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
|
|
<div id="app">
|
|
<div class="row">
|
|
<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" @click="changeWeek(-1)">
|
|
<i class="fas fa-arrow-left"></i>
|
|
</button>
|
|
</div>
|
|
<input name="week" id="id_week" class="form-control" type="week" v-model="week"
|
|
@change="updatePlan()">
|
|
<div class="input-group-append">
|
|
<button class="btn btn-outline-secondary" @click="changeWeek(1)">
|
|
<i class="fas fa-arrow-right"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<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)]].
|
|
<button class="btn btn-sm btn-outline-secondary" @click="addDayToShopping(d)"><i
|
|
class="fas fa-cart-plus fa-sm"></i></button>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody v-for="t in meal_types">
|
|
<tr v-if="meal_plan[t.id] !== undefined">
|
|
<td colspan="7" style="text-align: center">
|
|
[[ meal_plan[t.id].name]]
|
|
</td>
|
|
</tr>
|
|
<tr v-if="meal_plan[t.id] !== undefined">
|
|
<td v-for="d in meal_plan[t.id].days">
|
|
<draggable class="list-group" :list="d.items" group="plan" style="min-height: 40px"
|
|
@change="dragChanged(d.date, meal_plan[t.id].meal_type, $event)"
|
|
:empty-insert-threshold="10" handle=".handle">
|
|
<div class="" v-for="(element, index) in d.items" :key="element.id">
|
|
<div class="d-block d-md-none">
|
|
<div class="col-">
|
|
<i class="fas fa-arrows-alt handle input-group-text"
|
|
style="width: 100%"></i>
|
|
</div>
|
|
<div class="list-group-item">
|
|
<a href="#" @click="plan_detail = element" data-toggle="modal"
|
|
data-target="#id_plan_detail_modal">[[ planElementName(element)]]</a>
|
|
</div>
|
|
</div>
|
|
<div class="list-group-item handle d-md-block d-none">
|
|
<div class="col-md-12">
|
|
<a href="#" @click="plan_detail = element" data-toggle="modal"
|
|
data-target="#id_plan_detail_modal">[[ planElementName(element)]]</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</draggable>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<i class="fas fa-calendar-plus"></i> {% trans 'New Entry' %}
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<input type="text" class="form-control" v-model="recipe_query" @keyup="getRecipes"
|
|
placeholder="{% trans 'Search Recipe' %}" style="margin-bottom: 8px">
|
|
</div>
|
|
</div>
|
|
<draggable class="list-group" :list="recipes"
|
|
:group="{ name: 'plan', pull: 'clone', put: false }" :clone="cloneRecipe">
|
|
<div class="list-group-item" v-for="(element, index) in recipes" :key="element.id">
|
|
<i class="fas fa-arrows-alt"></i> [[element.name]]
|
|
</div>
|
|
</draggable>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div>
|
|
|
|
<div class="card-body">
|
|
<input type="text" class="form-control" v-model="new_note_title"
|
|
placeholder="{% trans 'Title' %}" style="margin-bottom: 8px">
|
|
<textarea class="form-control" v-model="new_note_text"
|
|
placeholder="{% trans 'Note (optional)' %}"></textarea>
|
|
|
|
<br/>
|
|
<draggable :list="pseudo_note_list"
|
|
:group="{ name: 'plan', pull: 'clone', put: false }" :clone="cloneNote">
|
|
<div class="list-group-item" v-for="(element, index) in pseudo_note_list"
|
|
:key="element.id">
|
|
<i class="fas fa-arrows-alt"></i> {% trans 'Create only note' %}
|
|
</div>
|
|
</draggable>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<br>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<i class="fas fa-shopping-cart"></i> {% trans 'Shopping List' %}
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<template v-if="shopping_list.length < 1">{% trans 'Shopping List currently empty' %}</template>
|
|
<template v-else>
|
|
<a v-bind:href="getShoppingUrl()" class="btn btn-success"
|
|
target="_blank">{% trans 'Open Shopping List' %}</a>
|
|
<br/>
|
|
<br/>
|
|
{% trans 'Recipes' %}
|
|
<ul class="list-group" style="margin-top: 8px">
|
|
<li class="list-group-item" v-for="item in shopping_list"> [[ item.recipe_name ]]</li>
|
|
</ul>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<i class="fas fa-shopping-cart"></i> {% trans 'Plan' %}
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<a href="#" data-toggle="modal"
|
|
data-target="#id_plan_types_modal">{% trans 'Edit plan types' %}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="modal fade" id="id_plan_detail_modal" tabindex="-1" role="dialog"
|
|
aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">
|
|
<template v-if="plan_detail.title !==''">[[ plan_detail.title ]]</template>
|
|
<template v-else>[[ plan_detail.recipe_name ]]</template>
|
|
<small
|
|
class="text-muted"><br/>[[ plan_detail.meal_type_name ]] [[
|
|
formatLocalDate(plan_detail.date) ]]</small>
|
|
</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<template v-if="plan_detail.recipe_name !== undefined ">
|
|
<small class="text-muted">{% trans 'Recipe' %}</small><br/>
|
|
<a v-bind:href="planDetailRecipeUrl()" target="_blank">[[ plan_detail.recipe_name ]]</a>
|
|
<br/>
|
|
</template>
|
|
|
|
<template v-if="plan_detail.note !== ''">
|
|
<small class="text-muted">{% trans 'Note' %}</small><br/>
|
|
[[ plan_detail.note ]]
|
|
<br/>
|
|
</template>
|
|
|
|
<br/>
|
|
<br/>
|
|
<template v-if="plan_detail.created_by !== undefined ">
|
|
<small class="text-muted">{% trans 'Created by' %}</small><br/>
|
|
[[ user_names[plan_detail.created_by] ]]
|
|
<br/>
|
|
</template>
|
|
|
|
<template v-if="plan_detail.shared.length > 0">
|
|
<small class="text-muted">{% trans 'Shared with' %}</small><br/>
|
|
<span>[[ planDetailUserList() ]]</span>
|
|
<br/>
|
|
</template>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-danger"
|
|
@click="deleteEntry(plan_detail)">{% trans 'Delete' %}</button>
|
|
<button type="button" class="btn btn-success"
|
|
v-if="!shopping_list.includes(plan_detail) && plan_detail.recipe_name !== undefined"
|
|
@click="shopping_list.push(plan_detail)">{% trans 'Add to Shopping' %}</button>
|
|
<a class="btn btn-primary" v-bind:href="planDetailEditUrl()">{% trans 'Edit' %}</a>
|
|
<button type="button" class="btn btn-secondary"
|
|
data-dismiss="modal">{% trans 'Close' %}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="id_plan_types_modal" tabindex="-1" role="dialog"
|
|
aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">{% trans 'Edit plan types' %}</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<draggable :list="meal_types_edit" handle=".handle"
|
|
:group="{ name: 'types'}">
|
|
<div v-for="(element, index) in meal_types_edit"
|
|
:key="element.id">
|
|
<template v-if="!element.delete">
|
|
<div class="input-group mb-3">
|
|
<div class="input-group-prepend handle">
|
|
<button tabindex="-1" class="btn btn-outline-secondary"><i
|
|
class="fas fa-arrows-alt-v"></i></button>
|
|
</div>
|
|
<input class="form-control" v-model="element.name">
|
|
<div class="input-group-append">
|
|
<button tabindex="-1" class="btn btn-outline-danger" type="button"
|
|
@click="markTypeDelete(element)"><i class="fas fa-trash-alt"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</draggable>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-primary"
|
|
@click="meal_types_edit.push({name:'{% trans 'New meal type' %}'})">{% trans 'New' %}</button>
|
|
<button type="button" class="btn btn-success"
|
|
@click="updatePlanTypes()">{% trans 'Save' %}</button>
|
|
<button type="button" class="btn btn-secondary"
|
|
data-dismiss="modal">{% trans 'Close' %}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<script type="application/javascript">
|
|
moment.locale('{{request.LANGUAGE_CODE}}');
|
|
|
|
let csrftoken = Cookies.get('csrftoken');
|
|
Vue.http.headers.common['X-CSRFToken'] = csrftoken;
|
|
|
|
let app = new Vue({
|
|
delimiters: ['[[', ']]'],
|
|
el: '#app',
|
|
data: {
|
|
week: moment().format('YYYY-[W]WW'),
|
|
days: moment.weekdays(true),
|
|
plan_entries: [],
|
|
meal_types: [],
|
|
meal_types_edit: [],
|
|
meal_plan: {},
|
|
plan_detail: {shared: []},
|
|
recipes: [],
|
|
recipe_query: '',
|
|
pseudo_note_list: [
|
|
{id: 0, title: '', text: ''}
|
|
],
|
|
new_note_title: '',
|
|
new_note_text: '',
|
|
default_shared_users: [],
|
|
user_id_update: [],
|
|
user_names: {},
|
|
shopping: false,
|
|
shopping_list: [],
|
|
},
|
|
mounted: function () {
|
|
console.log("MOUNTED")
|
|
|
|
this.default_shared_users = [{% for u in request.user.userpreference.plan_share.all %}
|
|
{{ u.pk }},
|
|
{% endfor %} {{ request.user.pk }}]
|
|
|
|
this.user_id_update = Array.from(this.default_shared_users)
|
|
|
|
this.updatePlan();
|
|
this.getRecipes();
|
|
},
|
|
methods: { // TODO stop chain loading and do async
|
|
updatePlan: function () {
|
|
let planEntryPromise = this.getPlanEntries();
|
|
let planTypePromise = this.getPlanTypes();
|
|
|
|
Promise.allSettled([planEntryPromise, planTypePromise]).then(() => {
|
|
this.buildGrid()
|
|
})
|
|
},
|
|
getPlanEntries: function () {
|
|
console.log("GET PLAN EXECUTED")
|
|
return this.$http.get("{% url 'api:mealplan-list' %}?html_week=" + this.week).then((response) => {
|
|
this.plan_entries = response.data;
|
|
}).catch((err) => {
|
|
this.loading = false;
|
|
console.log(err);
|
|
})
|
|
},
|
|
getPlanTypes: function () {
|
|
console.log("GET TYPE EXECUTED")
|
|
return this.$http.get("{% url 'api:mealtype-list' %}").then((response) => {
|
|
this.meal_types = response.data;
|
|
this.meal_types_edit = Array.from(this.meal_types)
|
|
for (let mte of this.meal_types_edit) {
|
|
this.$set(mte, 'delete', false)
|
|
}
|
|
}).catch((err) => {
|
|
console.log(err);
|
|
})
|
|
},
|
|
buildGrid: function () {
|
|
console.log("BUILD GRID EXECUTED")
|
|
this.meal_plan = {}
|
|
|
|
for (let t of this.meal_types) {
|
|
this.$set(this.meal_plan, t.id, {
|
|
name: t.name,
|
|
meal_type: t.id,
|
|
type: t,
|
|
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.id].days, date, {
|
|
name: d,
|
|
date: date,
|
|
items: []
|
|
})
|
|
}
|
|
}
|
|
for (let e of this.plan_entries) {
|
|
this.meal_plan[e.meal_type].days[e.date].items.push(e)
|
|
|
|
for (let u of e.shared) {
|
|
if (!this.user_id_update.includes(parseInt(u))) {
|
|
this.user_id_update.push(parseInt(u))
|
|
}
|
|
}
|
|
}
|
|
|
|
this.updateUserNames()
|
|
},
|
|
getRecipes: function () {
|
|
let url = "{% url 'api:recipe-list' %}?limit=5"
|
|
if (this.recipe_query !== '') {
|
|
url += '&query=' + this.recipe_query;
|
|
}
|
|
|
|
this.$http.get(url).then((response) => {
|
|
this.recipes = response.data;
|
|
}).catch((err) => {
|
|
console.log(err);
|
|
})
|
|
},
|
|
updateUserNames: function () {
|
|
console.log("UPDATE USER NAMES EXECUTED")
|
|
return this.$http.get("{% url 'api:username-list' %}?filter_list=[" + this.user_id_update + ']').then((response) => {
|
|
for (let u of response.data) {
|
|
let name = u.username
|
|
if (`${u.first_name} ${u.last_name}` !== ' ') {
|
|
name = `${u.first_name} ${u.last_name}`
|
|
}
|
|
this.$set(this.user_names, u.id, name);
|
|
}
|
|
|
|
}).catch((err) => {
|
|
console.log(err);
|
|
})
|
|
},
|
|
dragChanged: function (date, meal_type, evt) {
|
|
console.log("log")
|
|
if (evt.added !== undefined) {
|
|
console.log("added")
|
|
|
|
let plan_entry = evt.added.element
|
|
|
|
plan_entry.date = date
|
|
plan_entry.meal_type = meal_type
|
|
plan_entry.shared = this.default_shared_users
|
|
|
|
if (plan_entry.is_new) { // its not a meal plan object
|
|
console.log("undef")
|
|
plan_entry.created_by = {{ request.user.id }};
|
|
|
|
this.$http.post(`{% url 'api:mealplan-list' %}`, plan_entry).then((response) => {
|
|
console.log("create success", response)
|
|
let entry = response.data
|
|
this.meal_plan[entry.meal_type].days[entry.date].items = this.meal_plan[entry.meal_type].days[entry.date].items.filter(item => !item.is_new)
|
|
this.meal_plan[entry.meal_type].days[entry.date].items.push(entry)
|
|
}).catch((err) => {
|
|
console.log("create error", err);
|
|
})
|
|
} else {
|
|
this.$http.put(`{% url 'api:mealplan-list' %}${plan_entry.id}/`, plan_entry).then((response) => {
|
|
console.log("Update success", response)
|
|
}).catch((err) => {
|
|
console.log("update error", err);
|
|
})
|
|
}
|
|
}
|
|
},
|
|
deleteEntry: function (entry) {
|
|
console.log("delete click")
|
|
$('#id_plan_detail_modal').modal('hide')
|
|
this.$http.delete(`{% url 'api:mealplan-list' %}${entry.id}/`, entry).then((response) => {
|
|
console.log("delete success", response)
|
|
this.meal_plan[entry.meal_type].days[entry.date].items = this.meal_plan[entry.meal_type].days[entry.date].items.filter(item => item !== entry)
|
|
}).catch((err) => {
|
|
console.log("delete error", err);
|
|
})
|
|
},
|
|
updatePlanTypes: function () {
|
|
console.log("UPDATING TYPES")
|
|
let promise_list = []
|
|
let i = 0
|
|
for (let x of this.meal_types_edit) {
|
|
x.order = i
|
|
i++
|
|
if (x.id === undefined && !x.delete) {
|
|
console.log("creating new ", x)
|
|
x.created_by = {{ request.user.id }}
|
|
promise_list.push(this.$http.post("{% url 'api:mealtype-list' %}", x).then((response) => {
|
|
console.log("successfully created plan type");
|
|
}).catch((err) => {
|
|
console.log(err);
|
|
}))
|
|
} else if (x.delete) {
|
|
console.log("deleting ", x)
|
|
promise_list.push(this.$http.delete(`{% url 'api:mealtype-list' %}${x.id}/`, x).then((response) => {
|
|
console.log("successfully deleted plan type");
|
|
}).catch((err) => {
|
|
console.log(err);
|
|
}))
|
|
} else {
|
|
console.log("updating ", x)
|
|
promise_list.push(this.$http.put(`{% url 'api:mealtype-list' %}${x.id}/`, x).then((response) => {
|
|
console.log("successfully updated plan type");
|
|
}).catch((err) => {
|
|
console.log(err);
|
|
}))
|
|
}
|
|
}
|
|
Promise.allSettled(promise_list).then(() => {
|
|
this.updatePlan()
|
|
$('#id_plan_types_modal').modal('hide')
|
|
})
|
|
},
|
|
markTypeDelete: function (element) {
|
|
if (confirm('{% trans 'When deleting a meal type all entries using that type will be deleted as well. Deletion will apply when configuration is saved. Do you want to proceed?' %}')) {
|
|
element.delete = true
|
|
}
|
|
},
|
|
cloneRecipe: function (recipe) {
|
|
console.log("clone recipe")
|
|
return {
|
|
id: Math.round(Math.random() * 1000) + 10000,
|
|
recipe: recipe.id,
|
|
recipe_name: recipe.name,
|
|
title: this.new_note_title,
|
|
note: this.new_note_text,
|
|
is_new: true
|
|
}
|
|
},
|
|
cloneNote: function () {
|
|
console.log("clone note")
|
|
let new_entry = {
|
|
id: Math.round(Math.random() * 1000) + 10000,
|
|
title: this.new_note_title,
|
|
note: this.new_note_text,
|
|
is_new: true,
|
|
}
|
|
|
|
if (new_entry.title === '') {
|
|
new_entry.title = '{% trans 'Title' %}'
|
|
}
|
|
|
|
this.new_note_title = ''
|
|
this.new_note_text = ''
|
|
return new_entry
|
|
},
|
|
planElementName: function (element) {
|
|
if (element.title) {
|
|
return element.title
|
|
} else if (element.recipe_name) {
|
|
return element.recipe_name
|
|
} else {
|
|
return element.name
|
|
}
|
|
},
|
|
planDetailRecipeUrl: function () {
|
|
return "{% url 'view_recipe' 12345 %}".replace(/12345/, this.plan_detail.recipe);
|
|
},
|
|
planDetailEditUrl: function () {
|
|
return "{% url 'edit_meal_plan' 12345 %}".replace(/12345/, this.plan_detail.id);
|
|
},
|
|
planDetailUserList: function () {
|
|
let users = []
|
|
for (let u of this.plan_detail.shared) {
|
|
users.push(this.user_names[u])
|
|
}
|
|
return users.join(', ')
|
|
},
|
|
formatLocalDate: function (date) {
|
|
return moment(date).format('LL')
|
|
},
|
|
formatDateDay: function (day) {
|
|
return moment(this.week).weekday(this.days.indexOf(day)).format('D')
|
|
},
|
|
changeWeek: function (change) {
|
|
this.week = moment(this.week).add(change, 'w').format('YYYY-[W]WW')
|
|
this.updatePlan();
|
|
},
|
|
getShoppingUrl: function () {
|
|
let url = "{% url 'view_shopping' %}"
|
|
let first = true
|
|
for (let se of this.shopping_list) {
|
|
if (first) {
|
|
url += `?r=${se.recipe}`
|
|
first = false
|
|
} else {
|
|
url += `&r=${se.recipe}`
|
|
}
|
|
}
|
|
return url
|
|
},
|
|
addDayToShopping: function (day) {
|
|
let date = moment(this.week).weekday(this.days.indexOf(day)).format('YYYY-MM-DD')
|
|
|
|
for (let t of this.meal_types) {
|
|
console.log(t.id, date)
|
|
for (let i of this.meal_plan[t.id].days[date].items) {
|
|
if (!this.shopping_list.includes(i)) {
|
|
console.log("adding ", i)
|
|
this.shopping_list.push(i)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %} |