recipes/cookbook/templates/meal_plan.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">
        <h3>
            {% trans 'Meal-Plan' %}
        </h3>

        <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="getPlanEntries()">
                    <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">
                                <div class="list-group-item" v-for="(element, index) in d.items" :key="element.id">
                                    <div class="row">
                                        <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-if="element.recipe_name !== ''" @click="plan_detail = element"
                                               data-toggle="modal"
                                               data-target="#exampleModal">[[element.recipe_name]]</a>
                                            <a href="#" v-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="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        {% trans 'Recipes' %}
                    </div>
                    <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' %}">
                                <!-- 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">
                                <a href="#">[[element.name]]</a>
                            </div>
                        </draggable>
                    </div>
                </div>

            </div>
            <div class="col-md-6">
                <div :key="-1">
                    <div class="card">
                        <div class="card-header">
                            {% trans 'New Note' %}
                        </div>
                        <div class="card-body">
                            <input type="text" class="form-control" v-model="new_note_title"
                                   placeholder="{% trans 'Title' %}">
                            <textarea class="form-control" v-model="new_note_text"
                                      placeholder="{% trans 'Note (optional)' %}"></textarea>

                            <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">
                                    <button class="btn">{% trans 'Drag me' %}</button>
                                </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">[[ plan_detail.title ]] [[ plan_detail.recipe_name ]]<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">&times;</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>
                        </template>

                        <template v-if="plan_detail.note !== ''">
                            <small class="text-muted">{% trans 'Note' %}</small><br/>
                            [[ plan_detail.note ]]
                        </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: {},
                recipes: [],
                recipe_query: '',
                pseudo_note_list: [
                    {id: 0, title: '', text: ''}
                ],
                new_note_title: '',
                new_note_text: '',
            },
            mounted: function () {
                console.log("MOUNTED")
                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.plan_entries)
                    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)
                    }
                },
                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);
                    })
                },
                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

                        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,
                        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.recipe);
                },
                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 %}