Added toasts to notifications
Former-commit-id: 7429bf8d9c4f4e8bb16549172a59c33d22185821
This commit is contained in:
fermin831
parent
d2649bb51c
commit
c355a581ff
|
|
@ -411,6 +411,38 @@ config_check();
|
|||
element.style.display = "none"
|
||||
}
|
||||
|
||||
function click_on_notification_toast(event) {
|
||||
// TODO action.
|
||||
document.getElementById(event.target.id).remove();
|
||||
}
|
||||
|
||||
function print_toast(title, subtitle, severity, id, onclick) {
|
||||
// TODO severity.
|
||||
severity = '';
|
||||
|
||||
// Start the toast.
|
||||
var toast = document.createElement('div');
|
||||
toast.className = 'snackbar ' + severity;
|
||||
toast.setAttribute('onclick', onclick);
|
||||
toast.id = id;
|
||||
|
||||
// Fill toast.
|
||||
var toast_title = document.createElement('h3');
|
||||
var toast_text = document.createElement('p');
|
||||
toast_title.innerHTML = title;
|
||||
toast_text.innerHTML = subtitle;
|
||||
toast.appendChild(toast_title);
|
||||
toast.appendChild(toast_text);
|
||||
|
||||
// Show and program the hide event.
|
||||
toast.className = toast.className + ' show';
|
||||
setTimeout(function(){
|
||||
toast.className = toast.className.replace("show", "");
|
||||
}, 8000);
|
||||
|
||||
return toast;
|
||||
}
|
||||
|
||||
function check_new_notifications() {
|
||||
var last_id = document.getElementById('notification-ball-header')
|
||||
.getAttribute('last_id');
|
||||
|
|
@ -420,12 +452,27 @@ config_check();
|
|||
}
|
||||
|
||||
jQuery.post ("ajax.php",
|
||||
{"page" : "godmode/setup/setup_notifications",
|
||||
{
|
||||
"page" : "godmode/setup/setup_notifications",
|
||||
"check_new_notifications" : 1,
|
||||
"last_id": last_id
|
||||
},
|
||||
function (data, status) {
|
||||
// Clean the toasts wrapper at first.
|
||||
var toast_wrapper = document.getElementById(
|
||||
'notifications-toasts-wrapper'
|
||||
);
|
||||
if (toast_wrapper === null) {
|
||||
console.error('Cannot place toast notifications.');
|
||||
return;
|
||||
}
|
||||
while (toast_wrapper.firstChild) {
|
||||
toast_wrapper.removeChild(toast_wrapper.firstChild);
|
||||
}
|
||||
|
||||
// Return if no new notification.
|
||||
if(!data.has_new_notifications) return;
|
||||
|
||||
// Substitute the ball
|
||||
var new_ball = atob(data.new_ball);
|
||||
var ball_wrapper = document
|
||||
|
|
@ -437,10 +484,18 @@ config_check();
|
|||
}
|
||||
ball_wrapper.innerHTML = new_ball;
|
||||
|
||||
// Show the toasts
|
||||
//TODO
|
||||
|
||||
|
||||
// Add the new toasts.
|
||||
data.new_notifications.forEach(function(ele) {
|
||||
toast_wrapper.appendChild(
|
||||
print_toast(
|
||||
ele.description,
|
||||
ele.mensaje,
|
||||
ele.criticity,
|
||||
'notification-toast-id-' + ele.id_mensaje,
|
||||
'click_on_notification_toast(event)'
|
||||
)
|
||||
);
|
||||
});
|
||||
},
|
||||
"json"
|
||||
)
|
||||
|
|
@ -465,6 +520,14 @@ config_check();
|
|||
// Check new notifications on a periodic way
|
||||
setInterval(check_new_notifications, 10000);
|
||||
|
||||
// Print the wrapper for notifications
|
||||
var notifications_toasts_wrapper = document.createElement('div');
|
||||
notifications_toasts_wrapper.id = 'notifications-toasts-wrapper';
|
||||
document.body.insertBefore(
|
||||
notifications_toasts_wrapper,
|
||||
document.body.firstChild
|
||||
);
|
||||
|
||||
<?php
|
||||
if (($autorefresh_list !== null) && (array_search($_GET['sec2'], $autorefresh_list) !== false) && (!isset($_GET['refr']))) {
|
||||
$do_refresh = true;
|
||||
|
|
|
|||
|
|
@ -5357,3 +5357,90 @@ input:disabled + .p-slider {
|
|||
}
|
||||
|
||||
/* --- END SWITCH --- */
|
||||
|
||||
/* --- TOAST --- */
|
||||
#notifications-toasts-wrapper {
|
||||
position: fixed;
|
||||
right: 20px;
|
||||
top: 70px;
|
||||
width: 270px;
|
||||
height: 100%;
|
||||
z-index: 6;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.snackbar {
|
||||
max-width: 270px;
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
/* border-radius: 2px; */
|
||||
padding: 16px;
|
||||
margin: 10px;
|
||||
border-radius: 4px;
|
||||
visibility: hidden;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.snackbar.show {
|
||||
visibility: visible;
|
||||
-webkit-animation: fadein 0.5s, fadeout 0.5s 7.5s;
|
||||
animation: fadein 0.5s, fadeout 0.5s 7.5s;
|
||||
}
|
||||
|
||||
.snackbar p,
|
||||
.snackbar h3 {
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.snackbar h3 {
|
||||
color: white;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadein {
|
||||
from {
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
bottom: 30px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadein {
|
||||
from {
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
bottom: 30px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeout {
|
||||
from {
|
||||
bottom: 30px;
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeout {
|
||||
from {
|
||||
bottom: 30px;
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- END TOAST --- */
|
||||
|
|
|
|||
Loading…
Reference in New Issue