Open toasts and messages into new window

Former-commit-id: ff3d565247225032219d4bbb5fa903bdae7730e8

pandora_console/general/header.php

@@ -417,13 +417,26 @@ config_check();
         notification_elem.style.left = image_attached - 300 + "px";
     }
 
+    function notifications_clean_ui(action, self_id) {
+        switch(action) {
+            case 'item':
+                // Recalculate the notification ball.
+                check_new_notifications();
+                break;
+            case 'toast':
+                // Only remove the toast element.
+                document.getElementById(self_id).remove();
+                break;
+        }
+    }
+
     function notifications_hide() {
         var element = document.getElementById("notification-content");
         element.style.display = "none"
     }
 
     function click_on_notification_toast(event) {
-        var match = /notification-.*-id-([0-9]+)/.exec(event.target.id);
+        var match = /notification-(.*)-id-([0-9]+)/.exec(event.target.id);
         if (!match) {
             console.error(
                 "Cannot handle toast click event. Id not valid: ",
@@ -435,15 +448,14 @@ config_check();
             {
                 "page" : "godmode/setup/setup_notifications",
                 "mark_notification_as_read" : 1,
-                "message": match[1]
+                "message": match[2]
             },
             function (data, status) {
                 if (!data.result) {
                     console.error("Cannot redirect to URL.");
                     return;
                 }
-                window.location.replace(data.url);
+                notifications_clean_ui(match[1], event.target.id);
-                document.getElementById(event.target.id).remove();
             },
             "json"
         )
@@ -455,28 +467,34 @@ config_check();
         });
     }
 
-    function print_toast(title, subtitle, severity, id, onclick) {
+    function print_toast(title, subtitle, severity, url, id, onclick) {
         // TODO severity.
         severity = '';
 
         // Start the toast.
-        var toast = document.createElement('div');
+        var toast = document.createElement('a');
-        toast.className = 'snackbar ' + severity;
         toast.setAttribute('onclick', onclick);
-        toast.id = id;
+        toast.setAttribute('href', url);
+        toast.setAttribute('target', '_blank');
 
         // Fill toast.
+        var toast_div = document.createElement('div');
+        toast_div.className = 'snackbar ' + severity;
+        toast_div.id = id;
         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_div.appendChild(toast_title);
-        toast.appendChild(toast_text);
+        toast_div.appendChild(toast_text);
+        toast.appendChild(toast_div);
+
+        console.log(toast);
 
         // Show and program the hide event.
-        toast.className = toast.className + ' show';
+        toast_div.className = toast_div.className + ' show';
         setTimeout(function(){
-            toast.className = toast.className.replace("show", "");
+            toast_div.className = toast_div.className.replace("show", "");
         }, 8000);
 
         return toast;
@@ -528,7 +546,6 @@ config_check();
                     not_drop.removeChild(not_drop.firstChild);
                 }
 
-
                 // Add the new toasts.
                 if (Array.isArray(data.new_notifications)) {
                     data.new_notifications.forEach(function(ele) {
@@ -537,6 +554,7 @@ config_check();
                                 ele.description,
                                 ele.mensaje,
                                 ele.criticity,
+                                ele.full_url,
                                 'notification-toast-id-' + ele.id_mensaje,
                                 'click_on_notification_toast(event)'
                             )

pandora_console/godmode/setup/setup_notifications.php

@@ -102,6 +102,18 @@ if (get_parameter('check_new_notifications', 0)) {
         return;
     }
 
+    $messages = messages_get_overview(
+        'timestamp',
+        'ASC',
+        false,
+        true,
+        0,
+        ['id_mensaje' => '>'.$last_id_ui]
+    );
+    if ($messages === false) {
+        $messages = [];
+    }
+
     // If there is new messages, get the info.
     echo json_encode(
         [
@@ -112,13 +124,12 @@ if (get_parameter('check_new_notifications', 0)) {
                     $counters['last_id']
                 )
             ),
-            'new_notifications'     => messages_get_overview(
+            'new_notifications'     => array_map(
-                'timestamp',
+                function ($elem) {
-                'ASC',
+                    $elem['full_url'] = messages_get_url($elem['id_mensaje']);
-                false,
+                    return $elem;
-                true,
+                },
-                0,
+                $messages
-                ['id_mensaje' => '>'.$last_id_ui]
             ),
         ]
     );

pandora_console/include/functions_notifications.php

@@ -967,10 +967,12 @@ function notifications_print_dropdown()
 function notifications_print_dropdown_element($message_info)
 {
     return sprintf(
-        "<div
+        "<a
             class='notification-item'
             onclick='click_on_notification_toast(event)'
             id='notification-item-id-%s'
+            href='%s'
+            target='_blank'
         >
             <img src='%s'>
             <div class='notification-info'>
@@ -981,8 +983,9 @@ function notifications_print_dropdown_element($message_info)
                     %s
                 </p>
             </div>
-        </div>",
+        </a>",
         $message_info['id_mensaje'],
+        messages_get_url($message_info['id_mensaje']),
         html_print_image('images/'.$message_info['icon'], true),
         $message_info['description'],
         $message_info['mensaje']

pandora_console/include/styles/pandora.css

@@ -4346,6 +4346,10 @@ div#dialog_messages table th:last-child {
   pointer-events: none;
 }
 
+.notification-item:hover {
+  text-decoration: none;
+}
+
 .notification-info {
   width: 87%;
   display: flex;