1
1
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:
2022-05-14 11:15:42 +02:00
parent 45b2eb2934
commit 8a55b36527
12 changed files with 364 additions and 343 deletions

View File

@ -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>