]>
Commit | Line | Data |
---|---|---|
b9c5fcf0 | 1 | <template> |
7ef65940 | 2 | <article v-if="show" class="message" :class="message.style"> |
0e045b4c GC |
3 | <div v-if="message.title || message.icon" class="message-header"> |
4 | <p> | |
5 | <i v-if="message.icon" :class="`fa-fw ${message.icon}`"></i> | |
6 | {{ message.title }} | |
7 | </p> | |
b9c5fcf0 | 8 | </div> |
8ae1fe8a BW |
9 | <div |
10 | v-if="message.content" | |
11 | class="message-body" | |
12 | v-html="message.content" | |
13 | ></div> | |
b9c5fcf0 BW |
14 | </article> |
15 | </template> | |
16 | ||
17 | <script> | |
18 | export default { | |
19 | name: "Message", | |
20 | props: { | |
21 | item: Object, | |
22 | }, | |
7ef65940 BW |
23 | data: function () { |
24 | return { | |
7ef65940 BW |
25 | message: {}, |
26 | }; | |
27 | }, | |
28 | created: async function () { | |
b9c5fcf0 | 29 | // Look for a new message if an endpoint is provided. |
7ef65940 | 30 | this.message = Object.assign({}, this.item); |
1ddf3941 | 31 | await this.getMessage(); |
b9c5fcf0 | 32 | }, |
ba07da6b BW |
33 | computed: { |
34 | show: function () { | |
35 | return this.message.title || this.message.content; | |
36 | }, | |
37 | }, | |
38 | watch: { | |
39 | item: function (item) { | |
40 | this.message = Object.assign({}, item); | |
41 | }, | |
42 | }, | |
b9c5fcf0 | 43 | methods: { |
ba07da6b | 44 | getMessage: async function () { |
7596bc52 BW |
45 | if (!this.item) { |
46 | return; | |
47 | } | |
48 | if (this.item.url) { | |
1ddf3941 | 49 | let fetchedMessage = await this.downloadMessage(this.item.url); |
7596bc52 BW |
50 | console.log("done"); |
51 | if (this.item.mapping) { | |
ba07da6b | 52 | fetchedMessage = this.mapRemoteMessage(fetchedMessage); |
7596bc52 BW |
53 | } |
54 | ||
1ddf3941 | 55 | // keep the original config value if no value is provided by the endpoint |
7596bc52 | 56 | const message = this.message; |
742ae4eb | 57 | for (const prop of ["title", "style", "content", "icon"]) { |
1ddf3941 | 58 | if (prop in fetchedMessage && fetchedMessage[prop] !== null) { |
7596bc52 | 59 | message[prop] = fetchedMessage[prop]; |
1ddf3941 | 60 | } |
61 | } | |
7596bc52 | 62 | this.message = { ...message }; // Force computed property to re-evaluate |
1ddf3941 | 63 | } |
7596bc52 BW |
64 | |
65 | if (this.item.refreshInterval) { | |
ba07da6b | 66 | setTimeout(this.getMessage, this.item.refreshInterval); |
7596bc52 | 67 | } |
1ddf3941 | 68 | }, |
69 | ||
70 | downloadMessage: function (url) { | |
b9c5fcf0 BW |
71 | return fetch(url).then(function (response) { |
72 | if (response.status != 200) { | |
73 | return; | |
74 | } | |
75 | return response.json(); | |
76 | }); | |
77 | }, | |
6d29bc27 | 78 | |
79 | mapRemoteMessage: function (message) { | |
80 | let mapped = {}; | |
81 | // map property from message into mapped according to mapping config (only if field has a value): | |
ba07da6b BW |
82 | for (const prop in this.item.mapping) |
83 | if (message[this.item.mapping[prop]]) | |
84 | mapped[prop] = message[this.item.mapping[prop]]; | |
6d29bc27 | 85 | return mapped; |
86 | }, | |
b9c5fcf0 BW |
87 | }, |
88 | }; | |
89 | </script> |