implement display download and filter api logs

2024-01-28 20:19:45 +08:00
parent 03d2031644
commit 052e3c8664
6 changed files with 171 additions and 26 deletions
--- a/Sean/views/apilog.ejs
+++ b/Sean/views/apilog.ejs
@ -0,0 +1,68 @@
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>API Logs</title>
+  <link rel="stylesheet" href="style.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap">
+</head>
+
+<body>
+  <header>
+    <h1>ECOSAVER MANAGEMENT</h1>
+</header>
+  <nav>
+    <a href="/home" id="homeLink">Home</a>
+  </nav>
+
+    <main>
+    <h2>Welcome to the API Logs Users Page</h2>
+   </main>
+    <div id="downloadButtonContainer">
+      <button id="downloadButton" onclick="downloadAsExcel()">Download as Excel</button>
+    </div>
+
+    <table>
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>Time</th>
+            <th>Method</th>
+            <th>Host</th>
+            <th>Date</th>
+          </tr>
+        </thead>
+        <tbody>
+          <% logData.forEach(entry => { %>
+            <tr>
+              <td><%= entry.id %></td>
+              <td><%= entry.time %></td>
+              <td><%= entry.method %></td>
+              <td><%= entry.host %></td>
+              <td><%= entry.createdAt %></td>
+            </tr>
+          <% }); %>
+        </tbody>
+      </table>
+    <script >
+        const logData = <%- JSON.stringify(logData) %>;
+      </script>
+    
+
+ 
+  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.4/xlsx.full.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/4.2.1/exceljs.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.js"></script>
+  <script src="apil;og.js"></script>
+ 
+
+</body>
+
+</html>