Add desktop notification filters (#106)

* adds desktop notification filtering * changes some styling in notify component and changes default notification filter
FuturePortal · Jan 18, 2019 · e9ee2d9 · e9ee2d9
1 parent 1ef9000
commit e9ee2d9
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 1 deletion.
diff --git a/front-end/components/SettingsPanel/panels/Notify/notify.vue b/front-end/components/SettingsPanel/panels/Notify/notify.vue
@@ -14,12 +14,23 @@
         <button class="option" @click="enableNotifications" :class="{ current: pushNotifications }">
             Enable desktop notifications
         </button>
+        <ul id="statusSelector" v-if="pushNotifications">
+            <li v-for="(enabled, status) in notificationStatuses" :key="status">
+                <button class="sub-option" @click="toggleNotificationStatus(status);" :class="{ current: enabled }">
+                    Show {{ status }}
+                </button>
+            </li>
+        </ul>
     </div>
 </template>
 
 <script>
 import CIMonitorLogo from '../../../EmptyBoard/logo.png';
-import { SETTINGS_SET_NOTIFICATIONS_ON, SETTINGS_SET_NOTIFICATIONS_OFF } from '../../../../store/StaticMutations';
+import {
+    SETTINGS_SET_NOTIFICATIONS_ON,
+    SETTINGS_SET_NOTIFICATIONS_OFF,
+    SETTINGS_SET_NOTIFICATION_STATUSES,
+} from '../../../../store/StaticMutations';
 
 export default {
     methods: {
@@ -35,11 +46,19 @@ export default {
         disableNotifications() {
             this.$store.commit(SETTINGS_SET_NOTIFICATIONS_OFF);
         },
+        toggleNotificationStatus(status) {
+            let statuses = this.$store.state.settings.notificationStatuses;
+            statuses[status] = !statuses[status];
+            this.$store.commit(SETTINGS_SET_NOTIFICATION_STATUSES, statuses);
+        },
     },
     computed: {
         pushNotifications() {
             return this.$store.state.settings.pushNotifications;
         },
+        notificationStatuses() {
+            return this.$store.state.settings.notificationStatuses;
+        },
     },
 };
 </script>
@@ -48,6 +67,13 @@ export default {
 .option
     @extend %radio-option
 
+.sub-option
+    @extend %check-box
+
 hr
     @extend %line-break
+
+li
+    list-style-type: none
+    padding-left: 35px
 </style>
diff --git a/front-end/dashboard.js b/front-end/dashboard.js
@@ -35,6 +35,10 @@ new Vue({
                 return;
             }
 
+            if (!this.$store.state.settings.notificationStatuses[status.state]) {
+                return;
+            }
+
             try {
                 new Notification(`CIMonitor • ${status.state}`, {
                     body: `${status.title}${status.subTitle ? ` • ${status.subTitle}` : ''}: ${status.state}`,

diff --git a/front-end/sass/placeholders/_form.sass b/front-end/sass/placeholders/_form.sass
@@ -29,6 +29,34 @@
             border-radius: 50%
             background: $color-info
 
+%check-box
+    position: relative
+    display: block
+    border: 0
+    background: transparent
+    padding: 10px 10px 10px 36px
+    font-size: 16px
+
+    &::before
+        content: ' '
+        position: absolute
+        left: 0
+        top: 50%
+        margin-top: -12px
+        width: 20px
+        height: 20px
+        border: 2px solid $color-gray-lighter
+
+    &.current::after
+        content: ' '
+        position: absolute
+        left: 6px
+        top: 50%
+        margin-top: -6px
+        width: 12px
+        height: 12px
+        background: $color-info
+
 %line-break
     height: 2px
     background: $color-gray-lighter

diff --git a/front-end/store/StaticMutations.js b/front-end/store/StaticMutations.js
@@ -3,6 +3,7 @@ export const SETTINGS_SET_PANEL_CLOSED = 'settingsPanelSetClosed';
 export const SETTINGS_SET_THEME = 'settingsSetTheme';
 export const SETTINGS_SET_NOTIFICATIONS_ON = 'settingsSetNotificationsOn';
 export const SETTINGS_SET_NOTIFICATIONS_OFF = 'settingsSetNotificationsOff';
+export const SETTINGS_SET_NOTIFICATION_STATUSES = 'settingsSetNotificationStatuses';
 
 export const STATUS_SET_STATUSES = 'statusSetStatuses';
 

diff --git a/front-end/store/modules/SettingStore.js b/front-end/store/modules/SettingStore.js
@@ -5,12 +5,19 @@ import {
     SETTINGS_SET_THEME,
     SETTINGS_SET_NOTIFICATIONS_ON,
     SETTINGS_SET_NOTIFICATIONS_OFF,
+    SETTINGS_SET_NOTIFICATION_STATUSES,
 } from '../StaticMutations';
 
 const state = {
     settingsPanelOpen: false,
     theme: 'basic-dark',
     pushNotifications: false,
+    notificationStatuses: {
+        info: true,
+        warning: true,
+        error: true,
+        success: true,
+    },
 };
 
 const getters = {};
@@ -45,6 +52,10 @@ const mutations = {
     [SETTINGS_SET_THEME](state, theme) {
         state.theme = theme;
     },
+
+    [SETTINGS_SET_NOTIFICATION_STATUSES](state, statuses) {
+        state.notificationStatuses = statuses;
+    },
 };
 
 export default {