add button to clear all messages

resources/templates/footer.php

@@ -30,7 +30,7 @@
 
 </body>
 <?php
-foreach (["filter", "sort", "global", "tables"] as $x) {
+foreach (["filter", "sort", "global", "tables", "messages"] as $x) {
     $url = getURL("js/$x.js");
     echo "<script src='$url'></script>";
 }

resources/templates/header.php

@@ -137,25 +137,21 @@
   <main>
 
   <?php
-    foreach (UnityHTTPD::getMessages() as [$title, $body, $level]) {
+    echo "<div id='messages'>";
+    $messages = UnityHTTPD::getMessages();
+    if (count($messages) >= 3) {
+        echo "<button id='clear_all_messages_button'>Clear All Messages</button>";
+    }
+    foreach ($messages as [$title, $body, $level]) {
         echo sprintf(
             "
               <div class='message %s'>
                 <h3>%s</h3>
                 <p>%s</p>
                 <button
-                  onclick=\"
-                    this.parentElement.style.display='none';
-                    $.ajax({
-                        url: '/panel/ajax/delete_message.php',
-                        method: 'POST',
-                        data: {
-                          'level': '%s',
-                          'title': '%s',
-                          'body': '%s',
-                        }
-                    });
-                  \"
+                  data-level='%s'
+                  data-title='%s'
+                  data-body='%s'
                 >
                   ×
                 </button>
@@ -169,6 +165,7 @@
             base64_encode($body),
         );
     }
+    echo "</div>";
     if (
         isset($_SESSION["is_admin"])
         && $_SESSION["is_admin"]

webroot/css/messages.css

@@ -1,14 +1,19 @@
+#messages {
+    display: flex;
+    flex-direction: column;
+}
+
+#clear_all_messages_button {
+    align-self: end;
+    margin-bottom: 20px;
+}
+
 .message {
     border-radius: 10px;
     padding: 10px 40px 10px 40px;
     /* needed for button position: absolute */
     position: relative;
     text-align: center;
-    /* width: fit-content; */
-    /* subtract padding from indented width */
-    width: 90% - 80px;
-    margin-left: auto;
-    margin-right: auto;
     margin-bottom: 20px;
     word-wrap: break-word;
 }

webroot/js/messages.js

@@ -0,0 +1,28 @@
+function hideClearAllMessagesButtonIfAllMessagesAlreadyCleared() {
+    var visibleMessages = $('#messages .message:visible').length;
+    if (visibleMessages === 0) {
+        $('#clear_all_messages_button').hide();
+    }
+}
+
+$(document).ready(function () {
+    $('#messages').on('click', '.message button', function () {
+        var button = $(this);
+        var message = button.parent();
+        message.hide();
+        $.ajax({
+            url: '/panel/ajax/delete_message.php',
+            method: 'POST',
+            data: {
+                'level': button.data('level'),
+                'title': button.data('title'),
+                'body': button.data('body')
+            }
+        });
+        hideClearAllMessagesButtonIfAllMessagesAlreadyCleared();
+    });
+
+    $('#clear_all_messages_button').on('click', function () {
+        $('#messages .message button').click();
+    });
+});