ScoDoc/app/templates/assiduites/widgets/toast.j2

<div class="toast-holder">
</div>

<style>
    .toast-holder {
        position: fixed;
        right: 1vw;
        top: 5vh;
        height: 80vh;
        width: 20vw;
        display: flex;
        flex-direction: column;
        align-items: end;
        transition: all 0.3s ease-in-out;
        pointer-events: none;
        z-index: 999;
        overflow: hidden;

    }

    .toast {
        margin: 0.5vh 0;
        display: flex;
        width: fit-content;
        height: fit-content;
        justify-content: flex-start;
        align-items: center;
        border-radius: 10px;
        padding: 7px;
        z-index: 250;
        transition: all 0.3s ease-in-out;
    }

    .fadeIn {
        animation: fadeIn 0.5s ease-in;
    }

    .fadeOut {
        animation: fadeOut 0.5s ease-in;
    }

    .toast-content {
        color: whitesmoke;
    }


    @keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }

    }

    @keyframes fadeOut {
        0% {
            opacity: 1;
        }

        100% {
            opacity: 0;
        }

    }
</style>

<script>
    /**
    * Génère une notification (toast) avec les paramètres spécifiés.
    * @param {HTMLElement} content - Le contenu de la notification.
    * @param {string} [color="var(--color-present)"] - La couleur de fond de la notification (optionnelle).
    * @param {number} [ttl=5] - Le temps de vie de la notification en secondes (optionnelle).
    * @returns {HTMLElement} - L'élément toast créé.
    */
    function generateToast(content, color = "var(--color-present)", ttl = 5) {
        // Crée l'élément de notification et ajoute les classes de style
        const toast = document.createElement('div');
        toast.classList.add('toast', 'fadeIn');

        // Crée le conteneur de contenu de la notification et y ajoute le contenu
        const toastContent = document.createElement('div');
        toastContent.classList.add('toast-content');
        toastContent.appendChild(content);

        // Définit la couleur de fond de la notification
        toast.style.backgroundColor = color;

        // Définit les temporisations pour les animations de disparition et la suppression de la notification
        setTimeout(() => { toast.classList.replace('fadeIn', 'fadeOut') }, Math.max(0, ttl * 1000 - 500));
        setTimeout(() => { toast.remove() }, Math.max(0, ttl * 1000));

        // Ajoute le contenu à la notification
        toast.appendChild(toastContent);
        
        return toast;
    }

    /**
    * Ajoute une notification (toast) à l'élément conteneur des toasts.
    * @param {HTMLElement} toast - L'élément toast à ajouter.
    */
    function pushToast(toast) {
        document.querySelector(".toast-holder").appendChild(toast);
    }

    /**
    * Obtient la couleur de fond de la notification en fonction de l'état spécifié.
    * @param {string} etat - L'état de la notification (PRESENT, ABSENT, RETARD).
    * @returns {string} - La couleur correspondant à l'état.
    */
    function getToastColorFromEtat(etat) {
        let color;
        switch (etat.toUpperCase()) {
            case "PRESENT":
                color = "var(--color-present)";
                break;
            case "ABSENT":
                color = "var(--color-absent)";
                break;
            case "RETARD":
                color = "var(--color-retard)";
                break;
            default:
                color = "#AAA"; // Couleur par défaut si l'état est inconnu
                break;
        }
        return color;
    }


</script>