2 <article v-if="show" class="message" :class="message.style">
3 <div v-if="message.title || message.icon" class="message-header">
5 <i v-if="message.icon" :class="`fa-fw ${message.icon}`"></i>
10 v-if="message.content"
12 v-html="message.content"
28 created: async function () {
29 // Look for a new message if an endpoint is provided.
30 this.message = Object.assign({}, this.item);
31 await this.getMessage();
35 return this.message.title || this.message.content;
39 item: function (item) {
40 this.message = Object.assign({}, item);
44 getMessage: async function () {
49 let fetchedMessage = await this.downloadMessage(this.item.url);
50 if (this.item.mapping) {
51 fetchedMessage = this.mapRemoteMessage(fetchedMessage);
54 // keep the original config value if no value is provided by the endpoint
55 const message = this.message;
56 for (const prop of ["title", "style", "content", "icon"]) {
57 if (prop in fetchedMessage && fetchedMessage[prop] !== null) {
58 message[prop] = fetchedMessage[prop];
61 this.message = { ...message }; // Force computed property to re-evaluate
64 if (this.item.refreshInterval) {
65 setTimeout(this.getMessage, this.item.refreshInterval);
69 downloadMessage: function (url) {
70 return fetch(url).then(function (response) {
71 if (response.status != 200) {
74 return response.json();
78 mapRemoteMessage: function (message) {
80 // map property from message into mapped according to mapping config (only if field has a value):
81 for (const prop in this.item.mapping)
82 if (message[this.item.mapping[prop]])
83 mapped[prop] = message[this.item.mapping[prop]];