Show the notifications with AJAX

Former-commit-id: 73f407d13d3805dce879c1431311a4aaec00c152

pandora_console/general/header.php

@@ -363,6 +363,9 @@ config_check();
     </tr>
 </table>
 
+<!-- Notifications content wrapper-->
+<div id='notification-content' style='display:none;' /></div>
+
 <script type="text/javascript">
     /* <![CDATA[ */
     
@@ -376,13 +379,36 @@ config_check();
 
     function addNotifications(event) {
         var element = document.getElementById("notification-content");
-        if (!element) return;
-        element.style.display = "block";
-        attatch_to_image();
+        if (!element) {
+            console.error('Cannot locate the notification content element.');
+            return;
+        }
+        // If notification-content is empty, retrieve the notifications.
+        if (!element.firstChild) {
+            jQuery.post ("ajax.php",
+                {
+                    "page" : "godmode/setup/setup_notifications",
+                    "get_notifications_dropdown" : 1,
+                },
+                function (data, status) {
+                    // Apppend data
+                    element.innerHTML = data;
+                    // Show the content
+                    element.style.display = "block";
+                    attatch_to_image();
+                },
+                "html"
+            );
+        } else {
+            // If there is some notifications retrieved, only show it.
+            element.style.display = "block";
+            attatch_to_image();
+        }
     }
 
     function attatch_to_image() {
         var notification_elem = document.getElementById("notification-wrapper");
+        if (!notification_elem) return;
         var image_attached =
             document.getElementById("notification-ball-header")
                 .getBoundingClientRect()
@@ -495,7 +521,13 @@ config_check();
                     console.error('Cannot update notification ball');
                     return;
                 }
+                // Print the new ball and clean old notifications
                 ball_wrapper.innerHTML = new_ball;
+                var not_drop = document.getElementById('notification-content');
+                while (not_drop.firstChild && not_drop) {
+                    not_drop.removeChild(not_drop.firstChild);
+                }
+
 
                 // Add the new toasts.
                 if (Array.isArray(data.new_notifications)) {
@@ -655,7 +687,4 @@ config_check();
         });
     });
 /* ]]> */
-</script>
-
-<?php
-echo notifications_print_dropdown();
+</script>

pandora_console/godmode/setup/setup_notifications.php

@@ -146,6 +146,11 @@ if (get_parameter('mark_notification_as_read', 0)) {
     return;
 }
 
+if (get_parameter('get_notifications_dropdown', 0)) {
+    echo notifications_print_dropdown();
+    return;
+}
+
 // Notification table. It is just a wrapper.
 $table_content = new StdClass();
 $table_content->data = [];

pandora_console/include/functions_notifications.php

@@ -160,7 +160,7 @@ function check_notification_readable(int $id_message)
  * Returns the target users and groups assigned to be notified on
  * desired source.
  *
- * @param integer $id_source
+ * @param integer $id_source Source identificator.
  *
  * @return array [users] and [groups] with the targets.
  */
@@ -635,16 +635,18 @@ function notifications_get_counters()
  */
 function notifications_print_ball($num_notifications, $last_id)
 {
-    $class_status = ($num_notifications == 0) ? 'notification-ball-no-messages' : 'notification-ball-new-messages';
+    $no_notifications = (int) $num_notifications === 0;
+    $class_status = ($no_notifications) ? 'notification-ball-no-messages' : 'notification-ball-new-messages';
     return sprintf(
         '<div
-            onclick="addNotifications(event)"
+            %s
             class="notification-ball %s"
             id="notification-ball-header"
             last_id="%s"
         >
             %s
         </div>',
+        ($no_notifications) ? '' : 'onclick="addNotifications(event)"',
         $class_status,
         $last_id,
         $num_notifications
@@ -935,16 +937,15 @@ function notifications_print_dropdown()
     }
 
     return sprintf(
-        "<div id='notification-content' style='display:none;'>
-            <div id='notification-wrapper'>
-                %s
+        "<div id='notification-wrapper'>
+            %s
             </div>
             <div
                 id='notification-wrapper-shadow'
                 onclick='notifications_hide()'
             >
-            </div>
-        </div>",
+        </div>
+        ",
         array_reduce(
             $mess,
             function ($carry, $message) {

pandora_console/include/styles/pandora.css

@@ -4287,10 +4287,12 @@ div#dialog_messages table th:last-child {
   display: flex;
   justify-content: center;
   align-items: center;
+  cursor: pointer;
 }
 
 .notification-ball-no-messages {
   background-color: #82b92e;
+  cursor: inherit;
 }
 .notification-ball-new-messages {
   background-color: #fc4444;