recipes/cookbook/templates/shopping_list.html

{% extends "base.html" %}
{% load django_tables2 %}
{% load crispy_forms_tags %}
{% load static %}
{% load i18n %}

{% block title %}{% trans "Shopping List" %}{% endblock %}

{% block extra_head %}
    {% include 'include/vue_base.html' %}

    <link rel="stylesheet" href="{% static 'css/vue-multiselect-bs4.min.css' %}">
    <script src="{% static 'js/vue-multiselect.min.js' %}"></script>

    <script src="{% static 'js/Sortable.min.js' %}"></script>
    <script src="{% static 'js/vuedraggable.umd.min.js' %}"></script>
{% endblock %}

{% block content %}

    <div class="row">
        <div class="col col-9">
            <h2>{% trans 'Shopping List' %}</h2>
        </div>
        <div class="col col-3">
            <b-form-checkbox switch size="lg" v-model="edit_mode">{% trans 'Edit' %}</b-form-checkbox>
        </div>
    </div>

    <template v-if="shopping_list !== undefined">


        <div v-if="edit_mode">
            <div class="row">
                <div class="col col-md-6">
                    <input type="text" class="form-control" v-model="recipe_query" @keyup="getRecipes"
                           placeholder="{% trans 'Search Recipe' %}">
                    <ul class="list-group" style="margin-top: 8px">
                        <li class="list-group-item" v-for="x in recipes">[[x.name]]
                            <button @click="addRecipeToList(x)"><i class="fa fa-plus"></i></button>
                        </li>
                    </ul>
                </div>

                <div class="col col-md-6">
                    <ul class="list-group" style="margin-top: 8px">
                        <li class="list-group-item" v-for="x in shopping_list.recipes">[[x.recipe.name]] <input
                                type="number" v-model="x.multiplier" @change="updateDisplay()">
                        </li>
                    </ul>
                </div>
            </div>

            <div class="row" style="margin-top: 8px">
                <div class="col col-12">
                    <table class="table table-sm table-striped">
                        <tr v-for="x in shopping_list.entries_display">
                            <td>[[x.amount]]</td>
                            <td>[[x.unit.name]]</td>
                            <td>[[x.food.name]]</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div v-else>
            Non Edit
        </div>
    </template>


{% endblock %}
{% block script %}
    <script type="application/javascript">
        let csrftoken = Cookies.get('csrftoken');
        Vue.http.headers.common['X-CSRFToken'] = csrftoken;

        Vue.component('vue-multiselect', window.VueMultiselect.default)

        let app = new Vue({
            components: {
                Multiselect: window.VueMultiselect.default
            },
            delimiters: ['[[', ']]'],
            el: '#id_base_container',
            data: {
                edit_mode: true,
                recipe_query: '',
                recipes: [],
                shopping_list: undefined,
                multiplier_cache: {},
            },
            directives: {
                tabindex: {
                    inserted(el) {
                        el.setAttribute('tabindex', 0);
                    }
                }
            },
            /*
           watch: {
               recipe: {
                   deep: true,
                   handler() {
                       this.recipe_changed = this.recipe_changed !== undefined;
                   }
               }
           },

           created() {
               window.addEventListener('beforeunload', this.warnPageLeave)
           },
           */
            mounted: function () {

                //TODO default share users
                this.shopping_list = {
                    "recipes": [],
                    "entries": [],
                    "entries_display": [],
                    "shared": [],
                    "created_by": 1
                }


                this.updateDisplay()
            },
            methods: {
                /*
                warnPageLeave: function (event) {
                    if (this.recipe_changed) {
                        event.returnValue = ''
                        return ''
                    }
                },
                 */
                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("getRecipes error: ", err);
                        this.makeToast('{% trans 'Error' %}', '{% trans 'There was an error loading a resource!' %}' + err.bodyText, 'danger')
                    })
                },
                addRecipeToList: function (recipe) {
                    console.log(this.shopping_list)

                    let slr = {
                        "id": Math.random() * 1000,
                        "recipe": recipe,
                        "multiplier": 1
                    }
                    this.shopping_list.recipes.push(slr)

                    for (let s of recipe.steps) {
                        for (let i of s.ingredients) {

                            if (!i.is_header) {
                                this.shopping_list.entries.push({
                                    'list_recipe': slr.id,
                                    'food': i.food,
                                    'unit': ((i.unit !== undefined) ? i.unit : {'name': ''}),
                                    'amount': i.amount,
                                    'order': 0
                                })
                            }
                        }
                    }
                    this.updateDisplay()
                },
                updateMultiplierCache: function () {
                    this.multiplier_cache = {}
                    for (let r of this.shopping_list.recipes) {
                        this.multiplier_cache[r.id] = r.multiplier
                    }
                },
                updateDisplay: function () {
                    this.updateMultiplierCache()

                    //TODO merge multiple ingredients of same unit
                    this.shopping_list.entries_display = []

                    this.shopping_list.entries.forEach(function (element) {
                        let item = {}
                        Object.assign(item, element);
                        item.amount = item.amount * app.multiplier_cache[item.list_recipe]
                        app.shopping_list.entries_display.push(item)
                    });
                },
                searchKeywords: function (query) {
                    this.keywords_loading = true
                    this.$http.get("{% url 'api:keyword-list' %}" + '?query=' + query + '&limit=10').then((response) => {
                        this.keywords = response.data;
                        this.keywords_loading = false
                    }).catch((err) => {
                        console.log(err)
                        this.makeToast('{% trans 'Error' %}', '{% trans 'There was an error loading a resource!' %}' + err.bodyText, 'danger')
                    })
                },

            }
        });
    </script>

{% endblock %}