fixed shopping list auto sync flickering
This commit is contained in:
parent
77cfcb4602
commit
cb78f75f19
@ -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) {
|
||||||
|
Loading…
Reference in New Issue
Block a user