]> git.immae.eu Git - github/bastienwirtz/homer.git/blob - src/components/Message.vue
Adds mapping remote field to Homer expected ones when loading message from url
[github/bastienwirtz/homer.git] / src / components / Message.vue
1 <template>
2 <article v-if="show" class="message" :class="message.style">
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>
8 </div>
9 <div
10 v-if="message.content"
11 class="message-body"
12 v-html="message.content"
13 ></div>
14 </article>
15 </template>
16
17 <script>
18 export default {
19 name: "Message",
20 props: {
21 item: Object,
22 },
23 data: function () {
24 return {
25 show: false,
26 message: {},
27 };
28 },
29 created: async function () {
30 // Look for a new message if an endpoint is provided.
31 this.message = Object.assign({}, this.item);
32 if (this.item && this.item.url) {
33 let fetchedMessage = await this.getMessage(this.item.url);
34 if (this.item.mapping) fetchedMessage = this.mapRemoteMessage(fetchedMessage);
35 // keep the original config value if no value is provided by the endpoint
36 for (const prop of ["title", "style", "content"]) {
37 if (prop in fetchedMessage && fetchedMessage[prop] !== null) {
38 this.message[prop] = fetchedMessage[prop];
39 }
40 }
41 }
42 this.show = this.message.title || this.message.content;
43 },
44 methods: {
45 getMessage: function (url) {
46 return fetch(url).then(function (response) {
47 if (response.status != 200) {
48 return;
49 }
50 return response.json();
51 });
52 },
53
54 mapRemoteMessage: function (message) {
55 let mapped = {};
56 // map property from message into mapped according to mapping config (only if field has a value):
57 for (const prop in this.item.mapping) if (message[this.item.mapping[prop]]) mapped[prop] = message[this.item.mapping[prop]];
58 return mapped;
59 },
60 },
61 };
62 </script>