mirror of
https://github.com/Fabio286/antares.git
synced 2025-06-05 21:59:22 +02:00
refactor: ts and composition api for single instance components
This commit is contained in:
@ -16,71 +16,51 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup lang="ts">
|
||||
import { computed, Ref, ref, watch } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useNotificationsStore } from '@/stores/notifications';
|
||||
import { useSettingsStore } from '@/stores/settings';
|
||||
import BaseNotification from '@/components/BaseNotification';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import BaseNotification from '@/components/BaseNotification.vue';
|
||||
|
||||
export default {
|
||||
name: 'TheNotificationsBoard',
|
||||
components: {
|
||||
BaseNotification
|
||||
},
|
||||
setup () {
|
||||
const notificationsStore = useNotificationsStore();
|
||||
const settingsStore = useSettingsStore();
|
||||
const notificationsStore = useNotificationsStore();
|
||||
const settingsStore = useSettingsStore();
|
||||
|
||||
const { removeNotification } = notificationsStore;
|
||||
const { removeNotification } = notificationsStore;
|
||||
|
||||
const { notifications } = storeToRefs(notificationsStore);
|
||||
const { notificationsTimeout } = storeToRefs(settingsStore);
|
||||
const { notifications } = storeToRefs(notificationsStore);
|
||||
const { notificationsTimeout } = storeToRefs(settingsStore) as {notificationsTimeout: Ref<number>};// TODO: temp
|
||||
|
||||
return {
|
||||
removeNotification,
|
||||
notifications,
|
||||
notificationsTimeout
|
||||
};
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
timeouts: {}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
latestNotifications () {
|
||||
return this.notifications.slice(0, 10);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'notifications.length': function (val) {
|
||||
if (val > 0) {
|
||||
const nUid = this.notifications[0].uid;
|
||||
this.timeouts[nUid] = setTimeout(() => {
|
||||
this.removeNotification(nUid);
|
||||
delete this.timeouts[nUid];
|
||||
}, this.notificationsTimeout * 1000);
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clearTimeouts () {
|
||||
for (const uid in this.timeouts) {
|
||||
clearTimeout(this.timeouts[uid]);
|
||||
delete this.timeouts[uid];
|
||||
}
|
||||
},
|
||||
rearmTimeouts () {
|
||||
const delay = 50;
|
||||
let i = this.notifications.length * delay;
|
||||
for (const notification of this.notifications) {
|
||||
this.timeouts[notification.uid] = setTimeout(() => {
|
||||
this.removeNotification(notification.uid);
|
||||
delete this.timeouts[notification.uid];
|
||||
}, (this.notificationsTimeout * 1000) + i);
|
||||
i = i > delay ? i - delay : 0;
|
||||
}
|
||||
}
|
||||
const timeouts: Ref<{[key: string]: NodeJS.Timeout}> = ref({});
|
||||
|
||||
const latestNotifications = computed(() => notifications.value.slice(0, 10));
|
||||
|
||||
watch(() => notifications.value.length, (val) => {
|
||||
if (val > 0) {
|
||||
const nUid: string = notifications.value[0].uid;
|
||||
timeouts.value[nUid] = setTimeout(() => {
|
||||
removeNotification(nUid);
|
||||
delete timeouts.value[nUid];
|
||||
}, notificationsTimeout.value * 1000);
|
||||
}
|
||||
});
|
||||
|
||||
const clearTimeouts = () => {
|
||||
for (const uid in timeouts.value) {
|
||||
clearTimeout(timeouts.value[uid]);
|
||||
delete timeouts.value[uid];
|
||||
}
|
||||
};
|
||||
|
||||
const rearmTimeouts = () => {
|
||||
const delay = 50;
|
||||
let i = notifications.value.length * delay;
|
||||
for (const notification of notifications.value) {
|
||||
timeouts.value[notification.uid] = setTimeout(() => {
|
||||
removeNotification(notification.uid);
|
||||
delete timeouts.value[notification.uid];
|
||||
}, (notificationsTimeout.value * 1000) + i);
|
||||
i = i > delay ? i - delay : 0;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
Reference in New Issue
Block a user