140 lines
3.2 KiB
Vue
140 lines
3.2 KiB
Vue
<script setup lang="ts">
|
|
import type {Ref} from "vue";
|
|
import {useLabelEditorStore} from "~/store/labelEditorStore";
|
|
import type {NotificationMessage} from "~/types/notificationMessage";
|
|
|
|
let store = useLabelEditorStore();
|
|
|
|
let dialog: Ref<boolean> = ref<boolean>(false);
|
|
|
|
let pageCount: Ref<number> = ref<number>(1);
|
|
let page: Ref<number> = ref<number>(1);
|
|
|
|
let notifications: Ref<NotificationMessage[]> = ref<NotificationMessage[]>([]);
|
|
let notificationPages: Ref<NotificationMessage[][]> = ref<NotificationMessage[][]>([]);
|
|
|
|
const pageItemCount = 25;
|
|
|
|
watch(dialog, async (oldDialog) => {
|
|
loadNotifications();
|
|
})
|
|
|
|
function loadNotifications() {
|
|
notifications.value = store.getNotifications();
|
|
const length = notifications.value.length;
|
|
pageCount.value = Math.ceil(length / pageItemCount);
|
|
|
|
for (let i = 0; i < pageCount.value; i++) {
|
|
notificationPages.value[i] = notifications.value.slice((i * pageItemCount), ((i + 1) * pageItemCount));
|
|
}
|
|
}
|
|
|
|
function clear() {
|
|
store.clearNotifications();
|
|
loadNotifications();
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<v-dialog
|
|
v-model="dialog"
|
|
:scrollable="true"
|
|
width="800"
|
|
max-height="750"
|
|
>
|
|
<template v-slot:activator="{ props }">
|
|
<v-btn
|
|
:flat="true"
|
|
v-bind="props"
|
|
>
|
|
<v-icon>mdi-bell</v-icon>
|
|
<v-tooltip
|
|
activator="parent"
|
|
location="bottom"
|
|
>
|
|
Benachrichtigungen
|
|
</v-tooltip>
|
|
</v-btn>
|
|
</template>
|
|
|
|
<v-card>
|
|
<v-card-title>
|
|
<v-icon size="small">
|
|
mdi-bell
|
|
</v-icon>
|
|
|
|
Benachrichtigungen
|
|
</v-card-title>
|
|
|
|
<v-divider/>
|
|
|
|
<v-card-text>
|
|
<div
|
|
v-for="notification in notificationPages[page - 1]"
|
|
:key="notification.id"
|
|
>
|
|
<v-row no-gutters>
|
|
<v-col cols="2">
|
|
<v-sheet>
|
|
<v-icon v-if="notification.error" color="red">mdi-alert-circle-outline</v-icon>
|
|
<v-icon v-else color="green">mdi-check</v-icon>
|
|
|
|
{{ notification.error ? 'Fehler' : 'Okay' }}
|
|
</v-sheet>
|
|
</v-col>
|
|
<v-col cols="3">
|
|
<v-sheet>
|
|
{{ notification.dateTime }}
|
|
</v-sheet>
|
|
</v-col>
|
|
<v-col>
|
|
<v-sheet>
|
|
{{ notification.message }}
|
|
</v-sheet>
|
|
</v-col>
|
|
</v-row>
|
|
</div>
|
|
</v-card-text>
|
|
|
|
<v-divider/>
|
|
|
|
<v-pagination
|
|
v-model="page"
|
|
:length="pageCount"
|
|
></v-pagination>
|
|
|
|
<v-divider/>
|
|
|
|
<v-card-actions>
|
|
<v-btn
|
|
variant="text"
|
|
@click="clear();"
|
|
>
|
|
<v-icon>mdi-delete</v-icon>
|
|
<v-tooltip
|
|
activator="parent"
|
|
location="right"
|
|
>
|
|
Benachrichtigungen löschen
|
|
</v-tooltip>
|
|
</v-btn>
|
|
|
|
<v-spacer/>
|
|
|
|
<v-divider :vertical="true"/>
|
|
|
|
<v-btn
|
|
variant="text"
|
|
@click="dialog = false"
|
|
>
|
|
Schließen
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style> |