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>

    <!-- 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 %}
    <style>
        .mealplan-cell .mealplan-add-button {
            text-align: center;
            display: block;
        }

        @media (hover: hover) {
            .mealplan-cell .mealplan-add-button {
                visibility: hidden;
                float: right;
                display: inline;
            }

            .mealplan-cell:hover .mealplan-add-button {
                visibility: initial;
            }
        }

    </style>

    <h3>
        {% trans 'Meal-Plan' %} <a href="{% url 'new_meal_plan' %}"><i class="fas fa-plus-circle"></i></a>
    </h3>

    <div id="app">
        <table class="table table-sm table-striped">
            <thead class="thead-dark">
            <tr>
                <th v-for="d in days" style="width: 14.2%; text-align: center">[[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="log(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">
                            <a href="#" v-if="element.title !== ''" @click="plan_detail = element">[[element.title]]</a>
                            <a href="#" v-if="element.title === ''" @click="plan_detail = element">[[element.recipe_name]]</a>
                        </div>
                    </draggable>
                </td>
            </tr>
            </tbody>
        </table>

        <div class="row" v-if="plan_detail !== undefined">
            <h2>[[plan_detail.meal_type_name]] - [[plan_detail.date]]</h2>
            <br/>
            [[plan_detail.note]]
        </div>


        <br/>
        <hr/>
        <br/>
        [[plan_entries]]

    </div>


    <script type="application/javascript">
        var week = moment().format('W')
        moment.locale('{{request.LANGUAGE_CODE}}');

        var csrftoken = Cookies.get('csrftoken');
        Vue.http.headers.common['X-CSRFToken'] = csrftoken;

        var app = new Vue({
            delimiters: ['[[', ']]'],
            el: '#app',
            data: {
                days: moment.weekdays(),
                plan_entries: [],
                meal_types: [],
                meal_plan: {},
                plan_detail: undefined,

            },
            mounted: function () {
                console.log("MOUNTED")
                this.getPlanEntries();
            },
            methods: {
                getPlanEntries: function () {
                    this.loading = true;
                    this.$http.get("{% url 'api:mealplan-list' %}?week=" + week).then((response) => {
                        this.plan_entries = response.data;
                        this.getPlanTypes();
                    })
                        .catch((err) => {
                            this.loading = false;
                            console.log(err);
                        })
                },
                getPlanTypes: function () {
                    this.loading = true;
                    this.$http.get("{% url 'api:mealtype-list' %}").then((response) => {
                        this.meal_types = response.data;
                        this.loading = false;
                        this.buildGrid();
                    })
                        .catch((err) => {
                            this.loading = false;
                            console.log(err);
                        })
                },
                buildGrid: function () {
                    console.log("BUILD GRID EXECUTED")
                    for (t of this.meal_types) {
                        this.$set(this.meal_plan, t.id, {
                            name: t.name,
                            meal_type: t.id,
                            days: {}
                        })
                        for (d of this.days) {
                            date = moment().day(d).week(week).format('YYYY-MM-DD')
                            this.$set(this.meal_plan[t.id].days, date, {
                                name: d,
                                date: date,
                                items: []
                            })
                        }
                    }
                    for (e of this.plan_entries) {
                        this.meal_plan[e.meal_type].days[e.date].items.push(e)
                    }
                },
                log: function (date, meal_type, evt) {
                    if (evt.added !== undefined) {
                        var plan_entry = evt.added.element

                        plan_entry.date = date
                        plan_entry.meal_type = meal_type

                        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);
                            })
                    }
                }
            }
        });

    </script>
{% endblock %}