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