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>