mirror of
https://github.com/TandoorRecipes/recipes.git
synced 2026-01-01 12:18:45 -05:00
439 lines
20 KiB
HTML
439 lines
20 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)]].
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody v-for="mp in meal_plan">
|
|
<tr>
|
|
<td colspan="7" style="text-align: center">
|
|
[[mp.name]]
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td v-for="d in mp.days">
|
|
<draggable class="list-group" :list="d.items" group="plan" style="min-height: 40px"
|
|
@change="dragChanged(d.date, mp.meal_type, $event)"
|
|
:empty-insert-threshold="10" :options="{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="#" v-if="element.title !== ''"
|
|
@click="plan_detail = element" data-toggle="modal"
|
|
data-target="#exampleModal">[[element.title]]</a>
|
|
<a href="#" v-else-if="element.recipe_name !== ''"
|
|
@click="plan_detail = element"
|
|
data-toggle="modal"
|
|
data-target="#exampleModal">[[element.recipe_name]]</a>
|
|
<a href="#" v-else-if="element.name !== ''"
|
|
@click="plan_detail = element" data-toggle="modal"
|
|
data-target="#exampleModal">[[element.name]]</a>
|
|
</div>
|
|
</div>
|
|
<div class="list-group-item handle d-md-block d-none">
|
|
<div class="col-md-12">
|
|
<a href="#" v-if="element.title !== ''"
|
|
@click="plan_detail = element" data-toggle="modal"
|
|
data-target="#exampleModal">[[element.title]]</a>
|
|
<a href="#" v-else-if="element.recipe_name !== ''"
|
|
@click="plan_detail = element"
|
|
data-toggle="modal"
|
|
data-target="#exampleModal">[[element.recipe_name]]</a>
|
|
<a href="#" v-else-if="element.name !== ''"
|
|
@click="plan_detail = element" data-toggle="modal"
|
|
data-target="#exampleModal">[[element.name]]</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</draggable>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<hr/>
|
|
<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">
|
|
<!-- TODO remove recipes by backdropping them -->
|
|
</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> <a href="#">[[element.name]]</a>
|
|
</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/>
|
|
<hr/>
|
|
<br/>
|
|
[[meal_plan]]
|
|
|
|
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
|
|
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>
|
|
<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>
|
|
|
|
|
|
<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_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: {},
|
|
},
|
|
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;
|
|
}).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,
|
|
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")
|
|
$('#exampleModal').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);
|
|
})
|
|
},
|
|
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
|
|
},
|
|
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();
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %} |