diff options
author | Bastien Wirtz <bastien.wirtz@gmail.com> | 2020-05-30 23:22:02 -0700 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-05-30 23:22:02 -0700 |
commit | 5fa6b6cfa6b3010279ead23088add5c5664e8ac0 (patch) | |
tree | 5f3ffa4dc62b4355d38346ef0155878ca6aeedcd /src/components/Message.vue | |
parent | ab7ac44c191e3b7dea696e76b74097e23f73b18c (diff) | |
parent | 9052ec59b75a37b4518ad39c493ee6c2d4198b98 (diff) | |
download | homer-5fa6b6cfa6b3010279ead23088add5c5664e8ac0.tar.gz homer-5fa6b6cfa6b3010279ead23088add5c5664e8ac0.tar.zst homer-5fa6b6cfa6b3010279ead23088add5c5664e8ac0.zip |
Merge pull request #62 from bastienwirtz/dev/build-system120405250
Build system integration using vue-cli.
Diffstat (limited to 'src/components/Message.vue')
-rw-r--r-- | src/components/Message.vue | 41 |
1 files changed, 41 insertions, 0 deletions
diff --git a/src/components/Message.vue b/src/components/Message.vue new file mode 100644 index 0000000..fcb0fbb --- /dev/null +++ b/src/components/Message.vue | |||
@@ -0,0 +1,41 @@ | |||
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> | ||