Skip to content

Commit

Permalink
WIP
Browse files Browse the repository at this point in the history 
Signed-off-by: Stefan Dej <meteyou@gmail.com>
  • Loading branch information
@meteyou
meteyou committed Mar 17, 2024
1 parent dad79c0 commit 5e86793
Show file tree
Hide file tree
Showing 5 changed files with 163 additions and 134 deletions.
187 changes: 99 additions & 88 deletions src/components/notifications/NotificationMenuEntry.vue
View file
Original file line number Diff line number Diff line change
@@ -1,115 +1,95 @@
<template>
<v-alert :class="`notification-menu-entry--priority-${entry.priority}`" text :color="alertColor" border="left">
<v-row align="start" class="flex-nowrap">
<v-col class="grow">
<v-col class="grow pb-2">
<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>
<a
v-if="'url' in entry"
: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>
<span v-else :class="`${alertColor}--text`">{{ entry.title }}</span>
</div>
<p
class="notification-menu-entry__description text-body-2 mb-0 text--disabled font-weight-light"
v-html="formatedText"></p>
v-html="formatedText" />
<v-btn
v-if="entryType === 'maintenance'"
outlined
small
:color="alertColor"
class="mt-3 mb-0 w-100"
@click="showMaintenanceDetails = true">
details
</v-btn>
</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 />
class="shrink pl-0 pb-1 pt-1 pr-2 d-flex flex-column align-self-stretch justify-space-between">
<v-btn
v-if="showRepeatReminderButton"
v-if="entryType !== 'maintenance'"
icon
plain
:color="alertColor"
class="pb-1"
@click="repeatReminder">
<v-icon>{{ mdiCalendarRefreshOutline }}</v-icon>
class="mb-2"
@click="xButtonAction">
<v-icon>{{ mdiClose }}</v-icon>
</v-btn>
<v-btn icon plain retain-focus-on-click :color="alertColor" class="pb-1" @click="expand = !expand">
<v-spacer />
<v-btn icon plain retain-focus-on-click :color="alertColor" @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 v-show="expand" class="pt-1 w-100">
<v-divider class="pb-1 ml-2" />
<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>
<v-btn
v-for="reminder in reminderTimes"
:key="reminder.text"
:color="alertColor"
x-small
plain
text
outlined
class="mx-1"
@click="reminder.clickFunction">
{{ reminder.text }}
</v-btn>
</div>
</div>
</v-expand-transition>
</v-row>
<history-list-panel-detail-maintenance
v-if="entryType === 'maintenance'"
:show="showMaintenanceDetails"
:item="maintenanceEntry"
@close="showMaintenanceDetails = false" />
</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, mdiCalendarRefreshOutline } from '@mdi/js'
import { mdiClose, mdiLinkVariant, mdiBellOffOutline } from '@mdi/js'
import { GuiNotificationStateEntry } from '@/store/gui/notifications/types'
import { TranslateResult } from 'vue-i18n'
import { GuiMaintenanceStateEntry } from '@/store/gui/maintenance/types'
interface ReminderOption {
text: string | TranslateResult
clickFunction: Function
}
@Component({
components: {},
Expand All @@ -118,9 +98,9 @@ export default class NotificationMenuEntry extends Mixins(BaseMixin) {
mdiClose = mdiClose
mdiLinkVariant = mdiLinkVariant
mdiBellOffOutline = mdiBellOffOutline
mdiCalendarRefreshOutline = mdiCalendarRefreshOutline
private expand = false
expand = false
showMaintenanceDetails = false
@Prop({ required: true })
declare readonly entry: GuiNotificationStateEntry
Expand Down Expand Up @@ -149,11 +129,47 @@ export default class NotificationMenuEntry extends Mixins(BaseMixin) {
return this.entry.id.slice(0, posFirstSlash)
}
get showRepeatReminderButton() {
if (this.entryType !== 'reminder') return false
const reminderId = this.entry.id.replace('reminder/', '')
const reminder = this.$store.getters['gui/reminders/getReminder'](reminderId)
return reminder?.repeating || false
get maintenanceEntry() {
if (this.entryType !== 'maintenance') return null
const id = this.entry.id.replace('maintenance/', '')
const entries = this.$store.getters['gui/maintenance/getEntries']
return entries.find((entry: GuiMaintenanceStateEntry) => entry.id === id)
}
get reminderTimes() {
let output: ReminderOption[] = [
{
text: this.$t('App.Notifications.NextReboot'),
clickFunction: () => this.dismiss('reboot', null),
},
{ text: this.$t('App.Notifications.Never'), clickFunction: () => this.close() },
]
if (['announcement', 'maintenance'].includes(this.entryType)) {
output = []
output.push({
text: this.$t('App.Notifications.OneHourShort'),
clickFunction: () => this.dismiss('time', 60 * 60),
})
output.push({
text: this.$t('App.Notifications.OneDayShort'),
clickFunction: () => this.dismiss('time', 60 * 60 * 24),
})
output.push({
text: this.$t('App.Notifications.OneWeekShort'),
clickFunction: () => this.dismiss('time', 60 * 60 * 24 * 7),
})
}
return output
}
xButtonAction() {
if (this.entryType === 'announcement') return this.close()
this.dismiss('reboot', null)
}
close() {
Expand All @@ -164,11 +180,6 @@ export default class NotificationMenuEntry extends Mixins(BaseMixin) {
this.$store.dispatch('gui/notifications/dismiss', { id: this.entry.id, type, time })
}
repeatReminder() {
const reminderId = this.entry.id.replace('reminder/', '')
this.$store.dispatch('gui/reminders/repeat', { id: reminderId })
}
@Watch('parentState')
parentStateUpdate(newVal: boolean) {
if (!newVal) this.expand = false
Expand Down
18 changes: 8 additions & 10 deletions src/components/notifications/TheNotificationMenu.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,21 +34,19 @@
</v-card-text>
</overlay-scrollbars>
<template v-if="notifications.length > 1">
<v-divider></v-divider>
<v-divider />
<v-card-actions>
<v-spacer></v-spacer>
<v-spacer />
<v-btn text color="primary" class="mr-2" @click="dismissAll">
<v-icon left>{{ mdiCloseBoxMultipleOutline }}</v-icon>
{{ $t('App.Notifications.DismissAll') }}
</v-btn>
</v-card-actions>
</template>
</template>
<template v-else>
<v-card-text class="text-center">
<span class="text-disabled">{{ $t('App.Notifications.NoNotification') }}</span>
</v-card-text>
</template>
<v-card-text v-else class="text-center">
<span class="text-disabled">{{ $t('App.Notifications.NoNotification') }}</span>
</v-card-text>
</v-card>
</v-menu>
</template>
Expand All @@ -68,7 +66,7 @@ export default class TheNotificationMenu extends Mixins(BaseMixin) {
mdiBellOutline = mdiBellOutline
mdiCloseBoxMultipleOutline = mdiCloseBoxMultipleOutline
private boolMenu = false
boolMenu = false
get notifications() {
return this.$store.getters['gui/notifications/getNotifications'] ?? []
Expand Down Expand Up @@ -97,9 +95,9 @@ export default class TheNotificationMenu extends Mixins(BaseMixin) {
this.notifications.forEach(async (entry: GuiNotificationStateEntry) => {
if (entry.id.startsWith('announcement')) {
await this.$store.dispatch('gui/notifications/close', { id: entry.id })
} else {
await this.$store.dispatch('gui/notifications/dismiss', { id: entry.id, type: 'reboot', time: null })
}
await this.$store.dispatch('gui/notifications/dismiss', { id: entry.id, type: 'reboot', time: null })
})
}
}
Expand Down
5 changes: 5 additions & 0 deletions src/locales/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@
"DeprecatedValueHeadline": "Deprecated Klipper Value",
"KlipperWarning": "Klipper warning"
},
"MaintenanceReminder": "Maintenance Reminder",
"MaintenanceReminderText": "Maintenance \"{name}\" is due.",
"MoonrakerWarnings": {
"MoonrakerComponent": "Moonraker: {component}",
"MoonrakerFailedComponentDescription": "An error was detected while loading the moonraker component '{component}'. Please check the log file and fix the issue.",
Expand All @@ -28,6 +30,9 @@
"NextReboot": "next reboot",
"NoNotification": "No Notification available",
"Notifications": "Notifications",
"OneHourShort": "1H",
"OneDayShort": "1D",
"OneWeekShort": "1W",
"Remind": "Remind:"
},
"NumberInput": {
Expand Down
40 changes: 29 additions & 11 deletions src/store/gui/maintenance/getters.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,17 +13,35 @@ export const getters: GetterTree<GuiMaintenanceState, any> = {
return entries
},

/*getReminder: (state, getters) => (id: string) => {
const reminders = getters['getReminders'] ?? []
getOverdueEntries: (state, getters, rootState) => {
const currentTotalPrintTime = rootState.server.history.job_totals.total_print_time ?? 0
const currentTotalFilamentUsed = rootState.server.history.job_totals.total_filament_used ?? 0
const currentDate = new Date().getTime() / 1000

return reminders.find((reminder: GuiRemindersStateReminder) => reminder.id === id)
},
const entries: GuiMaintenanceStateEntry[] = getters['getEntries'] ?? []

return entries.filter((entry) => {
if (entry.reminder.type === null && entry.end_time !== null) return false

if (entry.reminder.filament.bool) {
const end = entry.start_filament + (entry.reminder.filament.value ?? 0)

if (end <= currentTotalFilamentUsed) return true
}

if (entry.reminder.printtime.bool) {
const end = entry.start_printtime + (entry.reminder.printtime.value ?? 0)

getOverdueReminders: (state, getters, rootState) => {
const currentTotalPrintTime = rootState.server.history.job_totals.total_print_time
const reminders: GuiRemindersStateReminder[] = getters['getReminders'] ?? []
return reminders.filter(
(reminder) => reminder.time_delta - (currentTotalPrintTime - reminder.start_total_print_time) < 0
)
},*/
if (end <= currentTotalPrintTime) return true
}

if (entry.reminder.date.bool) {
const end = entry.start_time + (entry.reminder.date.value ?? 0)

if (end <= currentDate) return true
}

return false
})
},
}
Loading

0 comments on commit 5e86793

Please sign in to comment.