From fc344ef63606ef76362010119ad15ce09ad3cf0d Mon Sep 17 00:00:00 2001
From: johnnyq <johnny@pittpc.com>
Date: Wed, 7 May 2025 19:23:11 -0400
Subject: [PATCH] add notification paging

---
 ajax/ajax_notifications.php | 102 ++++++++++++++++++++++++++----------
 1 file changed, 74 insertions(+), 28 deletions(-)

diff --git a/ajax/ajax_notifications.php b/ajax/ajax_notifications.php
index dbb7e701..7aec8740 100644
--- a/ajax/ajax_notifications.php
+++ b/ajax/ajax_notifications.php
@@ -24,40 +24,49 @@ ob_start();
 </div>
 
 <div class="modal-body bg-white">
+    <table class="table table-sm table-hover table-borderless">
     <?php if ($num_notifications) { ?>
 
-    <?php while ($row = mysqli_fetch_array($sql)) {
+        <?php while ($row = mysqli_fetch_array($sql)) {
 
-        $notification_id = intval($row["notification_id"]);
-        $notification_type = nullable_htmlentities($row["notification_type"]);
-        $notification_details = nullable_htmlentities($row["notification"]);
-        $notification_action = nullable_htmlentities(
-            $row["notification_action"]
-        );
-        $notification_timestamp_formated = date(
-            "M d g:ia",
-            strtotime($row["notification_timestamp"])
-        );
-        $notification_client_id = intval($row["notification_client_id"]);
-        if (empty($notification_action)) {
-            $notification_action = "#";
+            $notification_id = intval($row["notification_id"]);
+            $notification_type = nullable_htmlentities($row["notification_type"]);
+            $notification_details = nullable_htmlentities($row["notification"]);
+            $notification_action = nullable_htmlentities(
+                $row["notification_action"]
+            );
+            $notification_timestamp_formated = date(
+                "M d g:ia",
+                strtotime($row["notification_timestamp"])
+            );
+            $notification_client_id = intval($row["notification_client_id"]);
+            if (empty($notification_action)) {
+                $notification_action = "#";
+            }
+            ?>
+        
+        <tr class="notification-item">
+            <th>
+                <a class="text-dark" href="<?php echo $notification_action; ?>">
+                    <i class="fas fa-bullhorn mr-2"></i><?php echo $notification_type; ?>
+                    <small class="text-muted float-right">
+                        <?php echo $notification_timestamp_formated; ?>
+                    </small>
+                    <br>
+                    <small class="text-secondary text-wrap"><?php echo $notification_details; ?></small>
+                 </a>
+            </th>
+        </tr>
+
+        <?php
         }
         ?>
-
-    <a class="text-dark dropdown-item px-1" href="<?php echo $notification_action; ?>">
-        <div>
-            <span class="text-bold">
-                <i class="fas fa-bullhorn mr-2"></i><?php echo $notification_type; ?>
-            </span>
-            <small class="text-muted float-right">
-                <?php echo $notification_timestamp_formated; ?>
-            </small>
+        </table>
+        <div class="text-center mt-2">
+            <button id="prev-btn" class="btn btn-sm btn-outline-secondary mr-2"><i class="fas fa-caret-left"></i></button>
+            <button id="next-btn" class="btn btn-sm btn-outline-secondary"><i class="fas fa-caret-right"></i></button>
         </div>
-        <small class="text-secondary text-wrap"><?php echo $notification_details; ?></small>
-    </a>
-
-    <?php
-    }} else { ?>
+    <?php } else { ?>
     <div class="text-center text-secondary py-5">
         <i class='far fa-6x fa-bell-slash'></i>
         <h3 class="mt-3">No Notifications</h3>
@@ -85,4 +94,41 @@ ob_start();
     </button>
 </div>
 
+<script>
+$(document).ready(function () {
+    var perPage = 5;
+    var $items = $(".notification-item");
+    var totalItems = $items.length;
+    var totalPages = Math.ceil(totalItems / perPage);
+    var currentPage = 0;
+
+    function showPage(page) {
+        $items.hide().slice(page * perPage, (page + 1) * perPage).show();
+        $("#prev-btn").prop("disabled", page === 0);
+        $("#next-btn").prop("disabled", page >= totalPages - 1);
+        $("#page-indicator").text(`Page ${page + 1} of ${totalPages} (${totalItems} total)`);
+    }
+
+    $("#prev-btn").on("click", function () {
+        if (currentPage > 0) {
+            currentPage--;
+            showPage(currentPage);
+        }
+    });
+
+    $("#next-btn").on("click", function () {
+        if (currentPage < totalPages - 1) {
+            currentPage++;
+            showPage(currentPage);
+        }
+    });
+
+    if (totalItems <= perPage) {
+        $("#prev-btn, #next-btn, #page-indicator").hide();
+    }
+
+    showPage(currentPage);
+});
+</script>
+
 <?php require_once "../includes/ajax_footer.php";