fixed shopping list auto sync flickering

This commit is contained in:
vabene1111 2021-03-18 10:56:12 +01:00
parent 77cfcb4602
commit cb78f75f19

View File

@ -123,7 +123,8 @@
</thead> </thead>
<tbody is="draggable" :list="c.entries" tag="tbody" group="people" @sort="sortEntries" <tbody is="draggable" :list="c.entries" tag="tbody" group="people" @sort="sortEntries"
@change="dragChanged(c, $event)" handle=".handle"> @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 class="handle"><i class="fas fa-sort"></i></td>
<td>[[element.amount]]</td> <td>[[element.amount]]</td>
<td>[[element.unit.name]]</td> <td>[[element.unit.name]]</td>
@ -154,7 +155,8 @@
<div class="input-group"> <div class="input-group">
<input id="id_simple_entry" class="form-control" v-model="simple_entry"> <input id="id_simple_entry" class="form-control" v-model="simple_entry">
<div class="input-group-append"> <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> </button>
</div> </div>
</div> </div>
@ -420,6 +422,8 @@
users_loading: false, users_loading: false,
onLine: navigator.onLine, onLine: navigator.onLine,
simple_entry: '', 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, entry_mode_simple: $cookies.isKey('shopping_entry_mode_simple') ? ($cookies.get('shopping_entry_mode_simple') === 'true') : true,
}, },
directives: { directives: {
@ -559,7 +563,8 @@
{% if request.user.userpreference.shopping_auto_sync > 0 %} {% if request.user.userpreference.shopping_auto_sync > 0 %}
setInterval(() => { 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) this.loadShoppingList(true)
} }
}, {% widthratio request.user.userpreference.shopping_auto_sync 1 1000 %}) }, {% widthratio request.user.userpreference.shopping_auto_sync 1 1000 %})
@ -624,16 +629,19 @@
this.shopping_list = response.body this.shopping_list = response.body
this.loading = false this.loading = false
} else { } else {
let check_map = {} if (!this.auto_sync_blocked) {
for (let e of response.body.entries) { let check_map = {}
check_map[e.id] = {checked: e.checked} for (let e of response.body.entries) {
} check_map[e.id] = {checked: e.checked}
}
for (let se of this.shopping_list.entries) { for (let se of this.shopping_list.entries) {
if (check_map[se.id] !== undefined) { if (check_map[se.id] !== undefined) {
se.checked = check_map[se.id].checked se.checked = check_map[se.id].checked
}
} }
} }
this.auto_sync_running = false
} }
if (this.shopping_list.entries.length === 0) { if (this.shopping_list.entries.length === 0) {
this.edit_mode = true this.edit_mode = true
@ -747,18 +755,24 @@
} }
}, },
entryChecked: function (entry) { entryChecked: function (entry) {
this.auto_sync_blocked = true
let updates = []
this.shopping_list.entries.forEach((item) => { this.shopping_list.entries.forEach((item) => {
if (entry.entries.includes(item.id)) { if (entry.entries.includes(item.id)) {
item.checked = entry.checked 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) => { }).catch((err) => {
console.log(err) console.log(err)
this.makeToast(gettext('Error'), gettext('There was an error updating a resource!') + err.bodyText, 'danger') this.makeToast(gettext('Error'), gettext('There was an error updating a resource!') + err.bodyText, 'danger')
this.loading = false this.loading = false
}) }))
} }
}) })
Promise.allSettled(updates).then(() => {
this.auto_sync_blocked = false
})
}, },
addEntry: function () { addEntry: function () {
if (this.new_entry.food !== undefined) { if (this.new_entry.food !== undefined) {