]> git.immae.eu Git - github/bastienwirtz/homer.git/blame - src/components/Message.vue
Minor css adjustement.
[github/bastienwirtz/homer.git] / src / components / Message.vue
CommitLineData
b9c5fcf0 1<template>
7ef65940
BW
2 <article v-if="show" class="message" :class="message.style">
3 <div v-if="message.title" class="message-header">
4 <p>{{ message.title }}</p>
b9c5fcf0 5 </div>
8ae1fe8a
BW
6 <div
7 v-if="message.content"
8 class="message-body"
9 v-html="message.content"
10 ></div>
b9c5fcf0
BW
11 </article>
12</template>
13
14<script>
15export default {
16 name: "Message",
17 props: {
18 item: Object,
19 },
7ef65940
BW
20 data: function () {
21 return {
22 show: false,
23 message: {},
24 };
25 },
26 created: async function () {
b9c5fcf0 27 // Look for a new message if an endpoint is provided.
7ef65940 28 this.message = Object.assign({}, this.item);
b9c5fcf0 29 if (this.item && this.item.url) {
7ef65940
BW
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];
b9c5fcf0 35 }
7ef65940 36 }
b9c5fcf0 37 }
7ef65940 38 this.show = this.message.title || this.message.content;
b9c5fcf0
BW
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>