From cb78f75f193a12cbaedeeaaac40baa06599a6953 Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Thu, 18 Mar 2021 10:56:12 +0100
Subject: [PATCH] fixed shopping list auto sync flickering

---
 cookbook/templates/shopping_list.html | 38 ++++++++++++++++++---------
 1 file changed, 26 insertions(+), 12 deletions(-)

diff --git a/cookbook/templates/shopping_list.html b/cookbook/templates/shopping_list.html
index c366a2db..bc816ca8 100644
--- a/cookbook/templates/shopping_list.html
+++ b/cookbook/templates/shopping_list.html
@@ -123,7 +123,8 @@
                     </thead>
                     <tbody is="draggable" :list="c.entries" tag="tbody" group="people" @sort="sortEntries"
                            @change="dragChanged(c, $event)" handle=".handle">
-                    <tr v-for="(element, index) in c.entries" :key="element.id" v-bind:class="{ 'text-muted': element.checked }">
+                    <tr v-for="(element, index) in c.entries" :key="element.id"
+                        v-bind:class="{ 'text-muted': element.checked }">
                         <td class="handle"><i class="fas fa-sort"></i></td>
                         <td>[[element.amount]]</td>
                         <td>[[element.unit.name]]</td>
@@ -154,7 +155,8 @@
                         <div class="input-group">
                             <input id="id_simple_entry" class="form-control" v-model="simple_entry">
                             <div class="input-group-append">
-                                <button class="btn btn-outline-secondary" type="button" @click="addSimpleEntry()"><i class="fa fa-plus"></i>
+                                <button class="btn btn-outline-secondary" type="button" @click="addSimpleEntry()"><i
+                                        class="fa fa-plus"></i>
                                 </button>
                             </div>
                         </div>
@@ -420,6 +422,8 @@
                 users_loading: false,
                 onLine: navigator.onLine,
                 simple_entry: '',
+                auto_sync_blocked: false,
+                auto_sync_running: false,
                 entry_mode_simple: $cookies.isKey('shopping_entry_mode_simple') ? ($cookies.get('shopping_entry_mode_simple') === 'true') : true,
             },
             directives: {
@@ -559,7 +563,8 @@
 
                 {% if request.user.userpreference.shopping_auto_sync > 0 %}
                     setInterval(() => {
-                        if ((this.shopping_list_id !== null) && !this.edit_mode && window.navigator.onLine) {
+                        if ((this.shopping_list_id !== null) && !this.edit_mode && window.navigator.onLine && !this.auto_sync_blocked && !this.auto_sync_running) {
+                            this.auto_sync_running = true
                             this.loadShoppingList(true)
                         }
                     }, {% widthratio request.user.userpreference.shopping_auto_sync 1 1000 %})
@@ -624,16 +629,19 @@
                                 this.shopping_list = response.body
                                 this.loading = false
                             } else {
-                                let check_map = {}
-                                for (let e of response.body.entries) {
-                                    check_map[e.id] = {checked: e.checked}
-                                }
+                                if (!this.auto_sync_blocked) {
+                                    let check_map = {}
+                                    for (let e of response.body.entries) {
+                                        check_map[e.id] = {checked: e.checked}
+                                    }
 
-                                for (let se of this.shopping_list.entries) {
-                                    if (check_map[se.id] !== undefined) {
-                                        se.checked = check_map[se.id].checked
+                                    for (let se of this.shopping_list.entries) {
+                                        if (check_map[se.id] !== undefined) {
+                                            se.checked = check_map[se.id].checked
+                                        }
                                     }
                                 }
+                                this.auto_sync_running = false
                             }
                             if (this.shopping_list.entries.length === 0) {
                                 this.edit_mode = true
@@ -747,18 +755,24 @@
                     }
                 },
                 entryChecked: function (entry) {
+                    this.auto_sync_blocked = true
+                    let updates = []
                     this.shopping_list.entries.forEach((item) => {
                         if (entry.entries.includes(item.id)) {
                             item.checked = entry.checked
-                            this.$http.put("{% url 'api:shoppinglistentry-detail' 123456 %}".replace('123456', item.id), item, {}).then((response) => {
+                            updates.push(this.$http.put("{% url 'api:shoppinglistentry-detail' 123456 %}".replace('123456', item.id), item, {}).then((response) => {
 
                             }).catch((err) => {
                                 console.log(err)
                                 this.makeToast(gettext('Error'), gettext('There was an error updating a resource!') + err.bodyText, 'danger')
                                 this.loading = false
-                            })
+                            }))
                         }
                     })
+
+                    Promise.allSettled(updates).then(() => {
+                        this.auto_sync_blocked = false
+                    })
                 },
                 addEntry: function () {
                     if (this.new_entry.food !== undefined) {