Mirrors/audiobookshelf
Mirrors/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2024-12-20 19:06:06 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update:Notification widget shows green dot indicating unseen completed tasks

Browse Source
This commit is contained in:
advplyr 2023-10-29 09:20:50 -05:00
parent 225dcdeafd
commit 94fd3841aa
1 changed files with 24 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
client/components/widgets/NotificationWidget.vue
View File

@ -9,6 +9,8 @@
<span class="material-icons text-1.5xl" aria-label="Activities" role="button">notifications</span> <span class="material-icons text-1.5xl" aria-label="Activities" role="button">notifications</span>
</ui-tooltip> </ui-tooltip>
</div> </div>
<div v-if="showUnseenSuccessIndicator" class="w-2 h-2 rounded-full bg-success pointer-events-none absolute -top-1 -right-0.5" />
<div v-if="showUnseenSuccessIndicator" class="w-2 h-2 rounded-full bg-success/50 pointer-events-none absolute animate-ping -top-1 -right-0.5" />
</button> </button>
<transition name="menu"> <transition name="menu">
<div class="sm:w-80 w-full relative"> <div class="sm:w-80 w-full relative">
@ -46,7 +48,8 @@ export default {
isActive: true isActive: true
}, },
showMenu: false, showMenu: false,
disabled: false disabled: false,
tasksSeen: []
} }
}, },
computed: { computed: {
@ -60,12 +63,20 @@ export default {
// return just the tasks that are running or failed (or show success) in the last 1 minute // return just the tasks that are running or failed (or show success) in the last 1 minute
const tasks = this.tasks.filter((t) => !t.isFinished || ((t.isFailed || t.showSuccess) && t.finishedAt > new Date().getTime() - 1000 * 60)) || [] const tasks = this.tasks.filter((t) => !t.isFinished || ((t.isFailed || t.showSuccess) && t.finishedAt > new Date().getTime() - 1000 * 60)) || []
return tasks.sort((a, b) => b.startedAt - a.startedAt) return tasks.sort((a, b) => b.startedAt - a.startedAt)
},
showUnseenSuccessIndicator() {
return this.tasksToShow.some((t) => t.isFinished && !t.isFailed && !this.tasksSeen.includes(t.id))
} }
}, },
methods: { methods: {
clickShowMenu() { clickShowMenu() {
if (this.disabled) return if (this.disabled) return
this.showMenu = !this.showMenu this.showMenu = !this.showMenu
if (this.showMenu) {
this.tasksToShow.forEach((t) => {
if (!this.tasksSeen.includes(t.id)) this.tasksSeen.push(t.id)
})
}
}, },
clickedOutside() { clickedOutside() {
this.showMenu = false this.showMenu = false
@ -83,9 +94,20 @@ export default {
default: default:
return '' return ''
} }
},
taskFinished(task) {
// add task as seen if menu is open when it finished
if (this.showMenu && !this.tasksSeen.includes(task.id)) {
this.tasksSeen.push(task.id)
}
} }
}, },
mounted() {} mounted() {
this.$root.socket?.on('task_finished', this.taskFinished)
},
beforeDestroy() {
this.$root.socket?.off('task_finished', this.taskFinished)
}
} }
</script> </script>