]>
Commit | Line | Data |
---|---|---|
b9c5fcf0 BW |
1 | <template> |
2 | <article v-if="item" class="message" :class="item.style"> | |
3 | <div v-if="item.title" class="message-header"> | |
4 | <p>{{ item.title }}</p> | |
5 | </div> | |
6 | <div v-if="item.content" class="message-body" v-html="item.content"></div> | |
7 | </article> | |
8 | </template> | |
9 | ||
10 | <script> | |
11 | export default { | |
12 | name: "Message", | |
13 | props: { | |
14 | item: Object, | |
15 | }, | |
16 | created: function () { | |
17 | // Look for a new message if an endpoint is provided. | |
18 | let that = this; | |
19 | if (this.item && this.item.url) { | |
20 | this.getMessage(this.item.url).then(function (message) { | |
21 | // keep the original config value if no value is provided by the endpoint | |
22 | for (const prop of ["title", "style", "content"]) { | |
23 | if (prop in message && message[prop] !== null) { | |
24 | that.item[prop] = message[prop]; | |
25 | } | |
26 | } | |
27 | }); | |
28 | } | |
29 | }, | |
30 | methods: { | |
31 | getMessage: function (url) { | |
32 | return fetch(url).then(function (response) { | |
33 | if (response.status != 200) { | |
34 | return; | |
35 | } | |
36 | return response.json(); | |
37 | }); | |
38 | }, | |
39 | }, | |
40 | }; | |
41 | </script> |