Added pagination feature to the crawler page

Signed-off-by: freedisch <freeproduc@gmail.com>

web/static/css/style.css

@@ -165,4 +165,69 @@ Relevant styles below
 
 .card-flag{
     margin-left: 10px;
-}
+}
+
+#pagination_controls {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+}
+
+#pagination_controls button {
+  border: 1px solid #ddd;
+  background-color: #f9f9f9;
+  color: #333;
+  padding: 6px 12px;
+  cursor: pointer;
+  transition: background-color 0.3s, color 0.3s;
+}
+
+#pagination_controls button:hover {
+  background-color: #e2e6ea;
+}
+
+#pagination_controls button.active {
+  background-color: #007bff;
+  color: white;
+  border-color: #007bff;
+}
+
+#pagination_controls button#previous_btn,
+#pagination_controls button#next_btn {
+  background-color: #ffffff;
+  border: 1px solid #ccc;
+}
+
+#pagination_controls button#previous_btn:disabled,
+#pagination_controls button#next_btn:disabled {
+  color: #ccc;
+  cursor: not-allowed;
+}
+
+#pagination_controls button#previous_btn[disabled],
+#pagination_controls button#next_btn[disabled] {
+  display: none;
+}
+
+#pagination_controls {
+  display: flex;
+  justify-content: center;
+}
+
+.page_number_btn {
+  margin: 0 5px;
+  padding: 5px 10px;
+  border: 1px solid #ccc;
+  background-color: #f9f9f9;
+  cursor: pointer;
+}
+
+.page_number_btn.active {
+  background-color: #007bff;
+  color: white;
+}
+
+.page_number_btn:hover:not(.active) {
+  background-color: #e9ecef;
+}

web/static/index.html

@@ -359,8 +359,15 @@
         <div id="crawl_results" class="list-group hidden">
         </div>
         <ul id="crw_nxt_prv_btn" class="pager hidden">
-            <li id="crw_previous_btn" class="previous"><a href="javascript:previous_page()">Previous</a></li>
-            <li id="crw_next_btn" class="next"><a href="javascript:next_page()">Next</a></li>
+          <li id="crw_previous_btn" class="previous" style="display: none">
+            <a href="javascript:previous_page()">Previous</a>
+          </li>
+          <div id="pagination_controls">
+          </div>
+
+          <li id="crw_next_btn" class="next">
+            <a href="javascript:next_page()">Next</a>
+          </li>
         </ul>
         <br><br><br>
     </div>

web/static/js/main.js

@@ -812,6 +812,50 @@ function filter_large_content(content, filter_rate){
     document.getElementById("crawl_results").innerHTML = HTMLData;
   }
 
+  function clearPaginationButtons() {
+    $(".page_number_btn").remove();
+  }
+
+  function updatePaginationControls(totalPages, currentPage) {
+    clearPaginationButtons();
+
+    let startPage = Math.max(currentPage - 2, 1);
+    let endPage = Math.min(startPage + 4, totalPages);
+
+    for (let i = startPage; i <= endPage; i++) {
+      const pageBtn = $("<button>").addClass("page_number_btn").text(i);
+      if (i === currentPage) {
+        pageBtn.addClass("active");
+      }
+      pageBtn.insertBefore("#crw_next_btn");
+      pageBtn.click(function () {
+        crawler_page = i;
+        get_crawler_list(i);
+      });
+    }
+    $("#crw_first_btn").toggle(currentPage > 1);
+    $("#crw_previous_btn").toggle(currentPage > 1);
+
+    $("#crw_next_btn").toggle(currentPage < totalPages);
+    $("#crw_last_btn").toggle(currentPage < totalPages);
+
+    $("#crw_previous_btn").toggle(currentPage > 1);
+    $("#crw_next_btn").toggle(currentPage < totalPages);
+  }
+  $("#crw_first_btn").click(function () {
+    if (crawler_page > 1) {
+      crawler_page = 1;
+      get_crawler_list(crawler_page);
+    }
+  });
+
+  $("#crw_last_btn").click(function () {
+    if (crawler_page < totalPages) {
+      crawler_page = totalPages;
+      get_crawler_list(crawler_page);
+    }
+  });
+
   function get_crawler_list(crawler_page) {
     $.ajax({
       type: "GET",
@@ -819,13 +863,29 @@ function filter_large_content(content, filter_rate){
         "/logs/search?q=" + $("#search_data").val() + "&page=" + crawler_page,
       dataType: "text",
     })
-      .done(function (res) {
-        $("#login_first").addClass("hidden");
-        $("#crawl_results").removeClass("hidden");
-        $("#crw_refresh_btn").removeClass("hidden");
-        $("#crw_nxt_prv_btn").removeClass("hidden");
-        show_crawler(res);
-      })
+    .done(function (res) {
+      const totalPages = Math.ceil(res.length / 10);
+      $("#login_first").addClass("hidden");
+      $("#crawl_results").removeClass("hidden");
+      $("#crw_refresh_btn").removeClass("hidden");
+      $("#crw_nxt_prv_btn").removeClass("hidden");
+      $("#current_page_number").text(crawler_page);
+      $("#total_pages").text(totalPages);
+      show_crawler(res);
+      updatePaginationControls(totalPages, crawler_page);
+  
+      if (crawler_page === 1) {
+        $("#crw_previous_btn").hide();
+      } else {
+        $("#crw_previous_btn").show();
+      }
+  
+      if (crawler_page === totalPages) {
+        $("#crw_next_btn").hide();
+      } else {
+        $("#crw_next_btn").show();
+      }
+    })
       .fail(function (jqXHR, textStatus, errorThrown) {
         if (errorThrown == "UNAUTHORIZED") {
           $("#login_first").removeClass("hidden");