feat: notifications

src/App.vue

@@ -41,7 +41,7 @@
         <the-connecting-dialog v-else></the-connecting-dialog>
         <the-update-dialog></the-update-dialog>
         <the-editor></the-editor>
-        <the-timelapse-rendering-snackbar>-</the-timelapse-rendering-snackbar>
+        <the-timelapse-rendering-snackbar></the-timelapse-rendering-snackbar>
     </v-app>
 </template>
 

src/components/TheTopbar.vue

@@ -47,7 +47,6 @@
             <v-toolbar-title class="text-no-wrap ml-0 pl-2 mr-2">{{ printerName }}</v-toolbar-title>
             <printer-selector v-if="countPrinters"></printer-selector>
             <v-spacer></v-spacer>
-            <the-throttled-states></the-throttled-states>
             <input
                 ref="fileUploadAndStart"
                 type="file"
@@ -95,6 +94,7 @@
                 <v-icon class="mr-md-2">{{ mdiAlertCircleOutline }}</v-icon>
                 <span class="d-none d-md-inline">{{ $t('App.TopBar.EmergencyStop') }}</span>
             </v-btn>
+            <the-notification-menu></the-notification-menu>
             <the-settings-menu></the-settings-menu>
             <the-top-corner-menu></the-top-corner-menu>
         </v-app-bar>
@@ -142,10 +142,10 @@ import axios from 'axios'
 import { formatFilesize } from '@/plugins/helpers'
 import TheTopCornerMenu from '@/components/TheTopCornerMenu.vue'
 import TheSettingsMenu from '@/components/TheSettingsMenu.vue'
-import TheThrottledStates from '@/components/TheThrottledStates.vue'
 import Panel from '@/components/ui/Panel.vue'
 import PrinterSelector from '@/components/ui/PrinterSelector.vue'
 import MainsailLogo from '@/components/ui/MainsailLogo.vue'
+import TheNotificationMenu from '@/components/notifications/TheNotificationMenu.vue'
 import { topbarHeight } from '@/store/variables'
 import { mdiAlertCircleOutline, mdiContentSave, mdiFileUpload, mdiClose, mdiCloseThick } from '@mdi/js'
 
@@ -165,11 +165,11 @@ type uploadSnackbar = {
 @Component({
     components: {
         Panel,
-        TheThrottledStates,
         TheSettingsMenu,
         TheTopCornerMenu,
         PrinterSelector,
         MainsailLogo,
+        TheNotificationMenu,
     },
 })
 export default class TheTopbar extends Mixins(BaseMixin) {

src/components/mixins/base.ts

@@ -40,7 +40,8 @@ export default class BaseMixin extends Vue {
     }
 
     get printer_state(): string {
-        const printer_state = this.$store.state.printer.print_stats?.state ?? ''
+        const printer_state =
+            this.$store.state.printer.print_stats?.state ?? this.$store.state.printer.idle_timeout?.state ?? ''
         const timelapse_pause = this.$store.state.printer['gcode_macro TIMELAPSE_TAKE_FRAME']?.is_paused ?? false
         return printer_state === 'paused' && timelapse_pause ? 'printing' : printer_state
     }

src/components/notifications/NotificationMenuEntry.vue

@@ -0,0 +1,156 @@
+<template>
+    <v-alert text :color="alertColor" border="left">
+        <v-row align="start">
+            <v-col class="grow">
+                <div class="notification-menu-entry__headline mb-1 text-subtitle-1">
+                    <template v-if="'url' in entry">
+                        <a :class="`text-decoration-none ${alertColor}--text`" :href="entry.url" target="_blank">
+                            <v-icon small :class="`${alertColor}--text pb-1`">
+                                {{ mdiLinkVariant }}
+                            </v-icon>
+                            {{ entry.title }}
+                        </a>
+                    </template>
+                    <template v-else>
+                        <span :class="`${alertColor}--text`">{{ entry.title }}</span>
+                    </template>
+                </div>
+                <p class="text-body-2 mb-0 text--disabled font-weight-light" v-html="formatedText"></p>
+            </v-col>
+            <v-col
+                v-if="entry.priority !== 'critical'"
+                class="shrink pl-0 pb-0 pt-1 pr-2 d-flex flex-column align-self-stretch justify-space-between">
+                <v-btn v-if="entryType === 'announcement'" icon plain :color="alertColor" class="mb-2" @click="close">
+                    <v-icon>{{ mdiClose }}</v-icon>
+                </v-btn>
+                <v-btn v-else icon plain :color="alertColor" class="mb-2" @click="dismiss('reboot', null)">
+                    <v-icon>{{ mdiClose }}</v-icon>
+                </v-btn>
+                <v-spacer></v-spacer>
+                <v-btn icon plain retain-focus-on-click :color="alertColor" class="pb-1" @click="expand = !expand">
+                    <v-icon>{{ mdiBellOffOutline }}</v-icon>
+                </v-btn>
+            </v-col>
+        </v-row>
+        <v-row v-if="entry.priority !== 'critical'">
+            <v-expand-transition>
+                <div v-show="expand" class="pt-1" style="width: 100%">
+                    <v-divider class="pb-1 ml-2"></v-divider>
+                    <div class="text-right py-1" style="font-size: 0.875rem">
+                        <span class="text--disabled text-caption font-weight-light">
+                            {{ $t('App.Notifications.Remind') }}
+                        </span>
+                        <template v-if="entryType === 'announcement'">
+                            <v-btn
+                                :color="alertColor"
+                                x-small
+                                plain
+                                text
+                                outlined
+                                class="mx-1"
+                                @click="dismiss('time', 60 * 60)">
+                                1H
+                            </v-btn>
+                            <v-btn
+                                :color="alertColor"
+                                x-small
+                                plain
+                                text
+                                outlined
+                                class="mx-1"
+                                @click="dismiss('time', 60 * 60 * 24)">
+                                1D
+                            </v-btn>
+                            <v-btn
+                                :color="alertColor"
+                                x-small
+                                plain
+                                text
+                                outlined
+                                class="mx-1"
+                                @click="dismiss('time', 60 * 60 * 24 * 7)">
+                                7D
+                            </v-btn>
+                        </template>
+                        <template v-else>
+                            <v-btn
+                                :color="alertColor"
+                                x-small
+                                plain
+                                text
+                                outlined
+                                class="mx-1"
+                                @click="dismiss('reboot', null)">
+                                {{ $t('App.Notifications.NextReboot') }}
+                            </v-btn>
+                            <v-btn :color="alertColor" x-small plain text outlined class="mx-1" @click="close">
+                                {{ $t('App.Notifications.Never') }}
+                            </v-btn>
+                        </template>
+                    </div>
+                </div>
+            </v-expand-transition>
+        </v-row>
+    </v-alert>
+</template>
+
+<script lang="ts">
+import BaseMixin from '@/components/mixins/base'
+import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
+import { mdiClose, mdiLinkVariant, mdiBellOffOutline } from '@mdi/js'
+import { GuiNotificationStateEntry } from '@/store/gui/notifications/types'
+
+@Component({
+    components: {},
+})
+export default class NotificationMenuEntry extends Mixins(BaseMixin) {
+    mdiClose = mdiClose
+    mdiLinkVariant = mdiLinkVariant
+    mdiBellOffOutline = mdiBellOffOutline
+
+    private expand = false
+
+    @Prop({ required: true })
+    declare readonly entry: GuiNotificationStateEntry
+
+    @Prop({ default: true })
+    declare readonly parentState: boolean
+
+    get formatedText() {
+        return this.entry.description.replace(/\[([^\]]+)\]\(([^)]+)\)/, '<a href="$2" target="_blank">$1</a>')
+    }
+
+    get alertColor() {
+        if (this.entry.priority === 'critical') return 'error'
+        if (this.entry.priority === 'high') return 'warning'
+
+        return 'info'
+    }
+
+    get entryType() {
+        const posFirstSlash = this.entry.id.indexOf('/')
+        if (posFirstSlash === -1) return ''
+
+        return this.entry.id.slice(0, posFirstSlash)
+    }
+
+    close() {
+        this.$store.dispatch('gui/notifications/close', { id: this.entry.id })
+    }
+
+    dismiss(type: 'time' | 'reboot', time: number | null) {
+        this.$store.dispatch('gui/notifications/dismiss', { id: this.entry.id, type, time })
+    }
+
+    @Watch('parentState')
+    parentStateUpdate(newVal: boolean) {
+        if (!newVal) this.expand = false
+    }
+}
+</script>
+
+<style scoped>
+.notification-menu-entry__headline {
+    line-height: 1.2;
+}
+</style>