Merge pull request #214 from bretdavi89/service-messages-icon

Add Notification Icon to status page for service announcements

frontend/src/assets/scss/base.scss

@@ -307,6 +307,13 @@
     color: #a0a0a0;
   }
 
+  .icon-text {
+    color: white;
+    margin-top: .25em;
+    font-size: 7pt;
+    font-weight: bold;
+  }
+
   .json-field {
     font-size: 10pt;
   }

frontend/src/components/Index/Group.vue

@@ -4,7 +4,10 @@
         <div class="list-group online_list mb-4">
 
             <div v-for="(service, index) in services" v-bind:key="index" class="list-group-item list-group-item-action">
-                <router-link class="no-decoration font-3" :to="serviceLink(service)">{{service.name}}</router-link>
+                <router-link class="no-decoration font-3" :to="serviceLink(service)">
+                  {{service.name}}
+                  <MessagesIcon :messages="service.messages"/>
+                </router-link>
                 <span class="badge text-uppercase float-right" :class="{'bg-success': service.online, 'bg-danger': !service.online }">
                     {{service.online ? $t('online') : $t('offline')}}
                 </span>
@@ -22,12 +25,14 @@
 <script>
     const GroupServiceFailures = () => import(/* webpackChunkName: "index" */ './GroupServiceFailures');
     const IncidentsBlock = () => import(/* webpackChunkName: "index" */ './IncidentsBlock');
+    const MessagesIcon = () => import(/* webpackChunkName: "index" */ '@/components/Index/MessagesIcon')
 
 export default {
   name: 'Group',
   components: {
       IncidentsBlock,
-      GroupServiceFailures
+      GroupServiceFailures,
+      MessagesIcon
   },
   props: {
     group: {

frontend/src/components/Index/MessagesIcon.vue

@@ -0,0 +1,28 @@
+<template>
+    <font-awesome-layers v-if="activeMessages(messages) > 0">
+        <font-awesome-icon icon="calendar" style="color:dodgerblue"/>
+        <font-awesome-layers-text class="icon-text" :value="activeMessages(messages)" />
+    </font-awesome-layers>
+</template>
+
+<script>
+export default {
+  name: 'MessagesIcon',
+    props: {
+        messages: {
+            type: Object,
+            required: true,
+        }
+    },
+    methods: {
+        activeMessages(msgs) {
+            return msgs.filter(m => this.isAfter(this.now(), m.start_on) && this.isBefore(this.now(), m.end_on)).length
+        }
+    }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+
+</style>

frontend/src/icons.js

@@ -1,9 +1,11 @@
 import {library} from '@fortawesome/fontawesome-svg-core'
 import {fas} from '@fortawesome/fontawesome-free-solid';
 import {fab} from '@fortawesome/free-brands-svg-icons';
-import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
+import {FontAwesomeIcon, FontAwesomeLayers, FontAwesomeLayersText} from '@fortawesome/vue-fontawesome'
 import Vue from "vue";
 
 library.add(fas, fab)
 
 Vue.component('font-awesome-icon', FontAwesomeIcon)
+Vue.component('font-awesome-layers', FontAwesomeLayers)
+Vue.component('font-awesome-layers-text', FontAwesomeLayersText)

frontend/src/pages/Index.vue

@@ -19,7 +19,10 @@
       <div class="col-12 full-col-12">
           <div v-for="service in services_no_group" v-bind:key="service.id" class="list-group online_list mb-4">
               <div class="list-group-item list-group-item-action">
-                  <router-link class="no-decoration font-3" :to="serviceLink(service)">{{service.name}}</router-link>
+                  <router-link class="no-decoration font-3" :to="serviceLink(service)">
+                    {{service.name}}
+                    <MessagesIcon :messages="service.messages"/>
+                  </router-link>
                   <span class="badge float-right" :class="{'bg-success': service.online, 'bg-danger': !service.online }">{{service.online ? "ONLINE" : "OFFLINE"}}</span>
                   <GroupServiceFailures :service="service"/>
                   <IncidentsBlock :service="service"/>
@@ -47,6 +50,7 @@ const MessageBlock = () => import(/* webpackChunkName: "index" */ '@/components/
 const ServiceBlock = () => import(/* webpackChunkName: "index" */ '@/components/Service/ServiceBlock')
 const GroupServiceFailures = () => import(/* webpackChunkName: "index" */ '@/components/Index/GroupServiceFailures')
 const IncidentsBlock = () => import(/* webpackChunkName: "index" */ '@/components/Index/IncidentsBlock')
+const MessagesIcon = () => import(/* webpackChunkName: "index" */ '@/components/Index/MessagesIcon')
 
 export default {
     name: 'Index',
@@ -55,6 +59,7 @@ export default {
       GroupServiceFailures,
       ServiceBlock,
       MessageBlock,
+      MessagesIcon,
       Group,
       Header
     },