Adding alert mechanism which changes the button color when there are … (#839)

* Adding alert mechanism which changes the button color when there are notifications to check

* removing debug code

Author: paulr34

src-electron/db/query-notification.js

@@ -78,7 +78,13 @@ limitations under the License.
               </div></Transition
             >
           </q-btn>
-          <q-btn flat icon="warning" to="/notifications" id="Notifications">
+          <q-btn
+            flat
+            icon="warning"
+            to="/notifications"
+            id="Notifications"
+            :color="notification"
+          >
             <Transition name="bounce">
               <div v-if="displayButton" class="text-align q-ml-xs">
                 Notifications
@@ -135,6 +141,19 @@ export default {
         this.miniState = true
       }
     },
+    getNotifications() {
+      this.$serverGet(restApi.uri.notification)
+        .then((resp) => {
+          if (resp.data[0] === undefined) {
+            this.notification = 'white'
+          } else {
+            this.notification = 'red'
+          }
+        })
+        .catch((err) => {
+          console.log(err)
+        })
+    },
     setSelectedEndpoint(value) {
       this.$store.dispatch('zap/updateSelectedEndpointType', {
         endpointType: this.endpointType[value],
@@ -251,8 +270,16 @@ export default {
       isExpanded: false,
       globalOptionsDialog: false,
       zclExtensionDialog: false,
+      notification: '',
+    }
+  },
+  created() {
+    if (this.$serverGet != null) {
+      this.notification = ''
+      this.getNotifications()
     }
   },
+
   components: {
     ZclGeneralOptionsBar,
     ZclEndpointManager,

src/layouts/ZclConfiguratorLayout.vue

@@ -39,6 +39,19 @@
 <script>
 import restApi from '../../src-shared/rest-api.js'
 export default {
+  methods: {
+    getNotifications() {
+      this.$serverGet(restApi.uri.notification)
+        .then((resp) => {
+          for (let i = 0; i < resp.data.length; i++) {
+            this.notis.push(resp.data[i])
+          }
+        })
+        .catch((err) => {
+          console.log(err)
+        })
+    },
+  },
   data() {
     return {
       columns: [
@@ -66,15 +79,10 @@ export default {
     }
   },
   created() {
-    this.$serverGet(restApi.uri.notification)
-      .then((resp) => {
-        for (let i = 0; i < resp.data.length; i++) {
-          this.notis.push(resp.data[i])
-        }
-      })
-      .catch((err) => {
-        console.log(err)
-      })
+    if (this.$serverGet != null) {
+      this.notis = []
+      this.getNotifications()
+    }
   },
 }
 </script>

src/pages/Notifications.vue

@@ -80,6 +80,7 @@ import ZclClusterLayout from '../src/layouts/ZclClusterLayout.vue'
 import ZclConfiguratorLayout from '../src/layouts/ZclConfiguratorLayout.vue'
 import Error404 from '../src/pages/Error404.vue'
 import Preference from '../src/pages/Preference.vue'
+import Notifications from '../src/pages/Notifications.vue'
 import PreferenceGeneration from '../src/pages/PreferenceGeneration.vue'
 import PreferenceUser from '../src/pages/PreferenceUser.vue'
 import PreferencePackage from '../src/pages/PreferencePackage.vue'
@@ -256,6 +257,14 @@ describe('Component mounting test', () => {
     },
     timeout.short()
   )
+  test(
+    'Notifications',
+    () => {
+      const wrapper = shallowMount(Notifications, { store: ZapStore() })
+      expect(wrapper.html().length).toBeGreaterThan(100)
+    },
+    timeout.short()
+  )
   test(
     'Error404',
     () => {