From 1ddf394176ffe7e1c4118ead46b9fa76c6f3c614 Mon Sep 17 00:00:00 2001 From: luixal Date: Thu, 7 Jan 2021 21:23:13 +0100 Subject: Refactors created function (splits logic for getting message) and adds timeout according to refreshInterval field --- docs/configuration.md | 2 ++ src/components/Message.vue | 29 ++++++++++++++++++----------- 2 files changed, 20 insertions(+), 11 deletions(-) diff --git a/docs/configuration.md b/docs/configuration.md index 93fa898..8bff54f 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -69,12 +69,14 @@ message: # mapping: # allows to map fields from the remote format to the one expected by Homer # title: 'id' # use value from field 'id' as title # content: 'value' # value from field 'value' as content + # refreshInterval: 10000 # time interval to refresh message # # Real example using chucknorris.io for showing Chuck Norris facts as messages: # url: https://api.chucknorris.io/jokes/random # mapping: # title: 'id' # content: 'value' + # refreshInterval: 10000 style: "is-warning" title: "Optional message!" icon: "fa fa-exclamation-triangle" diff --git a/src/components/Message.vue b/src/components/Message.vue index df203ae..72106c2 100644 --- a/src/components/Message.vue +++ b/src/components/Message.vue @@ -29,20 +29,27 @@ export default { created: async function () { // Look for a new message if an endpoint is provided. this.message = Object.assign({}, this.item); - if (this.item && this.item.url) { - let fetchedMessage = await this.getMessage(this.item.url); - 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) { - this.message[prop] = fetchedMessage[prop]; - } - } - } + await this.getMessage(); this.show = this.message.title || this.message.content; }, + methods: { - getMessage: function (url) { + 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); + // 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) { + this.message[prop] = fetchedMessage[prop]; + } + } + } + console.log(this.item.refreshInterval); + if (this.item.refreshInterval) setTimeout(this.getMessage, this.item.refreshInterval); + }, + + downloadMessage: function (url) { return fetch(url).then(function (response) { if (response.status != 200) { return; -- cgit v1.2.3