tcsenpai/swingmusic
1
0
Fork 0
mirror of https://github.com/tcsenpai/swingmusic.git synced 2025-06-10 13:07:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

introduce notification type

Browse Source
This commit is contained in:
geoffrey45 2022-03-26 12:36:21 +03:00
parent 480695974e
commit 6c997c8795
2 changed files with 26 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/Notification.vue
View File

@ -1,15 +1,20 @@
<template> <template>
<div class="new-notification rounded" v-if="store.visible"> <div
<div>{{ store.text }}</div> class="new-notif rounded"
:class="{ 'notif-error': notif.type == NotificationType.Error }"
v-if="notif.visible"
>
<div>{{ notif.text }}</div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { useNotificationStore } from "../stores/notification"; import { useNotificationStore, NotificationType } from "../stores/notification";
const store = useNotificationStore();
const notif = useNotificationStore();
</script> </script>
<style lang="scss"> <style lang="scss">
.new-notification { .new-notif {
position: fixed; position: fixed;
z-index: 2000; z-index: 2000;
width: 25rem; width: 25rem;
@ -26,4 +31,8 @@ const store = useNotificationStore();
text-decoration: underline; text-decoration: underline;
} }
} }
.notif-error {
background-color: $red;
}
</style> </style>

16
src/stores/notification.ts
View File

@ -1,13 +1,21 @@
import { defineStore } from "pinia"; import { defineStore } from "pinia";
enum NotificationType {
Success,
Error,
}
const useNotificationStore = defineStore("notification", { const useNotificationStore = defineStore("notification", {
state: () => ({ state: () => ({
text: "", text: "",
type: NotificationType.Success,
visible: false, visible: false,
}), }),
actions: { actions: {
showNotification(new_text: string) { showNotification(new_text: string, new_type?: NotificationType) {
console.log(arguments);
this.text = new_text; this.text = new_text;
this.type = new_type;
this.visible = true; this.visible = true;
setTimeout(() => { setTimeout(() => {
@ -18,9 +26,9 @@ const useNotificationStore = defineStore("notification", {
}); });
class Notification { class Notification {
constructor(text: string) { constructor(text: string, type?: NotificationType) {
useNotificationStore().showNotification(text); useNotificationStore().showNotification(text, type);
} }
} }
export { useNotificationStore, Notification }; export { useNotificationStore, Notification, NotificationType };