From ba07da6b1011e77c9ed42e8643e62b903c6c6d7b Mon Sep 17 00:00:00 2001 From: Bastien Wirtz Date: Sat, 6 Mar 2021 22:50:58 -0800 Subject: Avoid full reload when swithcing page. --- src/components/Message.vue | 25 ++++++++++++++++++------- 1 file changed, 18 insertions(+), 7 deletions(-) (limited to 'src/components') diff --git a/src/components/Message.vue b/src/components/Message.vue index 2f71f3f..7c6acdd 100644 --- a/src/components/Message.vue +++ b/src/components/Message.vue @@ -22,7 +22,6 @@ export default { }, data: function () { return { - show: false, message: {}, }; }, @@ -30,14 +29,23 @@ export default { // Look for a new message if an endpoint is provided. this.message = Object.assign({}, this.item); await this.getMessage(); - this.show = this.message.title || this.message.content; }, - + computed: { + show: function () { + return this.message.title || this.message.content; + }, + }, + watch: { + item: function (item) { + this.message = Object.assign({}, item); + }, + }, methods: { - getMessage: async function() { + getMessage: async function () { if (this.item && this.item.url) { let fetchedMessage = await this.downloadMessage(this.item.url); - if (this.item.mapping) fetchedMessage = this.mapRemoteMessage(fetchedMessage); + if (this.item.mapping) + fetchedMessage = this.mapRemoteMessage(fetchedMessage); // keep the original config value if no value is provided by the endpoint for (const prop of ["title", "style", "content"]) { if (prop in fetchedMessage && fetchedMessage[prop] !== null) { @@ -45,7 +53,8 @@ export default { } } } - if (this.item.refreshInterval) setTimeout(this.getMessage, this.item.refreshInterval); + if (this.item.refreshInterval) + setTimeout(this.getMessage, this.item.refreshInterval); }, downloadMessage: function (url) { @@ -60,7 +69,9 @@ export default { mapRemoteMessage: function (message) { let mapped = {}; // map property from message into mapped according to mapping config (only if field has a value): - for (const prop in this.item.mapping) if (message[this.item.mapping[prop]]) mapped[prop] = message[this.item.mapping[prop]]; + for (const prop in this.item.mapping) + if (message[this.item.mapping[prop]]) + mapped[prop] = message[this.item.mapping[prop]]; return mapped; }, }, -- cgit v1.2.3