backup

2026-04-26 00:08:27 +02:00
parent 92074e7f60
commit c3e5448597
40 changed files with 1783 additions and 54 deletions
--- a/frontend/app/components/managers/ToastManager.vue
+++ b/frontend/app/components/managers/ToastManager.vue
@@ -0,0 +1,120 @@
+<script setup>
+import { ref } from 'vue';
+
+import { emitter } from '@/services/Emitter';
+
+const text = ref("");
+const toast = ref(null);
+
+let toastQueue = [];
+let displayingToast = false;
+
+function DisplayToast(){
+    if(displayingToast) return;
+    if(toastQueue.length == 0) return;
+
+    displayingToast = true;
+    let data = toastQueue.pop();
+
+    text.value = data.text;
+
+    toast.value.classList.add(data.color);
+    toast.value.classList.add("show");
+    setTimeout(() => {
+        toast.value.classList.add("sliding");
+        setTimeout(() => {
+            toast.value.style = {};
+            toast.value.classList.remove("show");
+            toast.value.classList.remove("sliding");
+            toast.value.classList.remove(data.color);
+            displayingToast = false;
+            DisplayToast();
+        }, 400);
+    }, data.duration);
+}
+
+emitter.on('toast', data => {
+    toastQueue.push(data);
+    DisplayToast();
+});
+
+</script>
+
+
+<template>
+    <div class="toast" ref="toast">
+        <div class="toast-container">{{ text }}</div>
+    </div>
+</template>
+
+
+<style scoped lang="scss">
+.toast-container {
+    height: 100%;
+    background-color: var(--color-background-soft);
+    padding: 10px;
+    margin-left: 5px;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+    transform: translate(2px,0px)
+}
+
+.toast {
+    position: absolute;
+    display: none;
+
+    top: 10px;
+    left: 50%;
+    transform: translate(-50%, 0);
+
+    min-width: 400px;
+    min-height: 40px;
+    border-radius: 6px;
+    text-align: center;
+
+    z-index: 9999999;
+
+
+    animation: slide-in 0.4s ease-in-out;
+    @keyframes slide-in {
+        0% {
+            transform: translate(-50%,-50px);
+            opacity: 0;
+        }
+        100% {
+            opacity: 1;
+        }
+    }
+
+    &.sliding {
+        @keyframes slide-out {
+            0% {
+                opacity: 1;
+            }
+            100% {
+                transform: translate(-50%,-50px);
+                opacity: 0;
+            }
+        }
+        animation: slide-out .4s ease-in-out forwards;
+    }
+    
+    &.show {
+        display: block;
+    }
+
+    /* Colors!!!! */
+
+    &.red {
+        background-color: rgb(243, 68, 68);
+    }
+
+    &.green {
+        background-color: rgb(92, 199, 92);
+    }
+
+    &.aqua {
+        background-color: rgb(113, 250, 250);
+    }
+}
+</style>