2023-03-30 15:51:06 +00:00
|
|
|
function addNotification(notificationText, notificationLevel) {
|
2023-04-12 15:30:54 +00:00
|
|
|
const notificationContainer = document.querySelector('.notifications');
|
2023-03-30 15:51:06 +00:00
|
|
|
|
2023-03-05 18:16:28 +00:00
|
|
|
// Create notification element
|
2023-04-12 15:30:54 +00:00
|
|
|
const notification = document.createElement('div');
|
2023-03-30 15:51:06 +00:00
|
|
|
notification.classList.add('sniffle__notification');
|
2023-04-19 18:04:32 +00:00
|
|
|
notification.onclick = () => {
|
2023-03-30 15:51:06 +00:00
|
|
|
if (notification) {
|
|
|
|
notification.classList.add('hide');
|
2023-03-05 18:16:28 +00:00
|
|
|
|
2023-04-19 18:04:32 +00:00
|
|
|
setTimeout(() => {
|
2023-03-30 15:51:06 +00:00
|
|
|
notificationContainer.removeChild(notification);
|
2023-03-05 18:16:28 +00:00
|
|
|
}, 500);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
// Create icon element and append to notification
|
2023-04-12 15:30:54 +00:00
|
|
|
const iconElement = document.createElement('span');
|
2023-03-30 15:51:06 +00:00
|
|
|
iconElement.classList.add('sniffle__notification-icon');
|
|
|
|
notification.appendChild(iconElement);
|
2023-04-06 14:42:23 +00:00
|
|
|
|
2023-03-30 15:51:06 +00:00
|
|
|
// Set the icon based on the notification level, not pretty but it works :3
|
2023-04-02 23:24:36 +00:00
|
|
|
if (notificationLevel === 1) {
|
2023-03-30 15:51:06 +00:00
|
|
|
notification.classList.add('success');
|
2023-04-20 16:15:51 +00:00
|
|
|
iconElement.innerHTML = '<i class="ph ph-check-circle"></i>';
|
2023-04-02 23:24:36 +00:00
|
|
|
} else if (notificationLevel === 2) {
|
2023-03-30 15:51:06 +00:00
|
|
|
notification.classList.add('critical');
|
2023-04-20 16:15:51 +00:00
|
|
|
iconElement.innerHTML = '<i class="ph ph-warning"></i>';
|
2023-04-02 23:24:36 +00:00
|
|
|
} else if (notificationLevel === 3) {
|
2023-03-30 15:51:06 +00:00
|
|
|
notification.classList.add('warning');
|
2023-04-20 16:15:51 +00:00
|
|
|
iconElement.innerHTML = '<i class="ph ph-siren"></i>';
|
2023-03-30 15:51:06 +00:00
|
|
|
} else {
|
|
|
|
notification.classList.add('info');
|
2023-04-20 16:15:51 +00:00
|
|
|
iconElement.innerHTML = '<i class="ph ph-info"></i>';
|
2023-03-05 18:16:28 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
// Create text element and append to notification
|
2023-04-12 15:30:54 +00:00
|
|
|
const description = document.createElement('span');
|
2023-03-05 18:16:28 +00:00
|
|
|
description.classList.add('sniffle__notification-text');
|
2023-03-30 15:51:06 +00:00
|
|
|
description.innerHTML = notificationText;
|
|
|
|
notification.appendChild(description);
|
2023-03-05 18:16:28 +00:00
|
|
|
|
|
|
|
// Append notification to container
|
2023-03-30 15:51:06 +00:00
|
|
|
notificationContainer.appendChild(notification);
|
2023-04-19 18:04:32 +00:00
|
|
|
setTimeout(() => { notification.classList.add('show'); }, 5);
|
2023-03-05 18:16:28 +00:00
|
|
|
|
|
|
|
// Remove notification after 5 seconds
|
2023-04-19 18:04:32 +00:00
|
|
|
setTimeout(() => {
|
2023-03-30 15:51:06 +00:00
|
|
|
if (notification) {
|
|
|
|
notification.classList.add('hide');
|
2023-04-19 18:04:32 +00:00
|
|
|
setTimeout(() => {
|
|
|
|
notificationContainer.removeChild(notification);
|
2023-03-05 18:16:28 +00:00
|
|
|
}, 500);
|
|
|
|
}
|
|
|
|
}, 5000);
|
2023-03-30 15:51:06 +00:00
|
|
|
}
|