]> git.immae.eu Git - github/bastienwirtz/homer.git/blob - src/components/Message.vue
Fix null error releated to refreshInterval + cleanup. Fix #210
[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 message: {},
26 };
27 },
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();
32 },
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 },
43 methods: {
44 getMessage: async function () {
45 if (!this.item) {
46 return;
47 }
48 if (this.item.url) {
49 let fetchedMessage = await this.downloadMessage(this.item.url);
50 console.log("done");
51 if (this.item.mapping) {
52 fetchedMessage = this.mapRemoteMessage(fetchedMessage);
53 }
54
55 // keep the original config value if no value is provided by the endpoint
56 const message = this.message;
57 for (const prop of ["title", "style", "content"]) {
58 if (prop in fetchedMessage && fetchedMessage[prop] !== null) {
59 message[prop] = fetchedMessage[prop];
60 }
61 }
62 this.message = { ...message }; // Force computed property to re-evaluate
63 }
64
65 if (this.item.refreshInterval) {
66 setTimeout(this.getMessage, this.item.refreshInterval);
67 }
68 },
69
70 downloadMessage: function (url) {
71 return fetch(url).then(function (response) {
72 if (response.status != 200) {
73 return;
74 }
75 return response.json();
76 });
77 },
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):
82 for (const prop in this.item.mapping)
83 if (message[this.item.mapping[prop]])
84 mapped[prop] = message[this.item.mapping[prop]];
85 return mapped;
86 },
87 },
88 };
89 </script>