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>