update

2023-12-17 19:19:27 +08:00
parent 9809841af2
commit 0439a94ba0
8 changed files with 822 additions and 299 deletions
--- a/Sean/views/inusers.ejs
+++ b/Sean/views/inusers.ejs
@ -0,0 +1,208 @@
+<!-- views/inusers.ejs -->
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>In-House Users</title>
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
+  <style>
+    body {
+      margin: 0;
+      font-family: 'Arial', sans-serif;
+    }
+
+    #sidebar {
+      height: 100%;
+      width: 250px;
+      position: fixed;
+      background-color: #333;
+      padding-top: 60px;
+      transition: 0.5s;
+    }
+
+    #sidebar img {
+      width: 100%;
+      margin-bottom: 20px;
+    }
+
+    #sidebar a {
+      padding: 10px 15px;
+      text-decoration: none;
+      font-size: 18px;
+      color: white;
+      display: block;
+      transition: 0.3s;
+    }
+
+    #sidebar a:hover {
+      background-color: #555;
+    }
+
+    #content {
+      margin-left: 250px;
+      padding: 16px;
+    }
+
+    @media screen and (max-width: 600px) {
+      #sidebar {
+        width: 0;
+        overflow-x: hidden;
+      }
+
+      #content {
+        margin-left: 0;
+      }
+    }
+
+    #sidebarCollapse {
+      width: 40px;
+      height: 40px;
+      position: absolute;
+      top: 10px;
+      left: 10px;
+      cursor: pointer;
+      z-index: 1;
+    }
+
+    #sidebarCollapse span {
+      display: block;
+      background: white;
+      height: 5px;
+      width: 30px;
+      margin: 6px auto;
+      transition: 0.3s;
+    }
+
+    #sidebarCollapse:hover span:nth-child(1) {
+      transform: rotate(-45deg) translate(-5px, 6px);
+    }
+
+    #sidebarCollapse:hover span:nth-child(2) {
+      opacity: 0;
+    }
+
+    #sidebarCollapse:hover span:nth-child(3) {
+      transform: rotate(45deg) translate(-5px, -6px);
+    }
+
+    /* Add additional styles specific to inusers.ejs below */
+    #userDataContainer {
+      margin-top: 20px;
+    }
+
+    table {
+      border-collapse: collapse;
+      width: 100%;
+      margin-top: 20px;
+    }
+
+    th, td {
+      border: 1px solid #dddddd;
+      text-align: left;
+      padding: 12px;
+    }
+
+    th {
+      background-color: #f2f2f2;
+    }
+
+    tr:hover {
+      background-color: #f5f5f5;
+    }
+
+    td {
+      white-space: nowrap;
+    }
+
+  </style>
+</head>
+
+<body>
+
+  <div id="sidebar">
+    <img src="LOGO.PNG" alt="Custom Image">
+    <div id="sidebarCollapse">
+      <span></span>
+      <span></span>
+      <span></span>
+    </div>
+    <a href="#" id="userDataLink">User Data</a>
+    <a href="/inusers/edituserdata">Edit User Data</a>
+  </div>
+
+  <div id="content">
+    <h2>Welcome to the In-House Users Page</h2>
+
+    <div id="userDataContainer">
+      <h3>All Users</h3>
+      <table>
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Username</th>
+            <th>Email</th>
+            <th>Password</th>
+            <th>Last Login</th>
+            <th>Job Title</th>
+            <!-- Add more table headers as needed -->
+          </tr>
+        </thead>
+        <tbody>
+          <% if (allUsers && allUsers.length > 0) { %>
+            <% allUsers.forEach(user => { %>
+              <tr>
+                <td><%= user.name %></td>
+                <td><%= user.username %></td>
+                <td><%= user.email %></td>
+                <td><%= user.password %></td>
+                <td><%= new Date(user.lastLogin).toLocaleString('en-US', { timeZone: 'Asia/Singapore' }) %></td>
+                <td><%= user.jobTitle %></td>
+                <!-- Add more table data cells as needed -->
+              </tr>
+            <% }); %>
+          <% } else { %>
+            <tr>
+              <td colspan="6">No users available.</td>
+            </tr>
+          <% } %>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Additional content for In-House Users page goes here -->
+
+    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
+    <script>
+      document.getElementById('sidebarCollapse').addEventListener('click', function () {
+        document.getElementById('sidebar').style.width = (document.getElementById('sidebar').style.width === '250px') ? '0' : '250px';
+      });
+
+      $(document).ready(function () {
+        function displayUserData() {
+          $.ajax({
+            url: '/inusers/userdata',
+            method: 'GET',
+            dataType: 'html',
+            success: function (data) {
+              $('#userDataContainer').html(data);
+            },
+            error: function (error) {
+              console.error('Error fetching user data:', error);
+              // Handle error as needed
+            }
+          });
+        }
+
+        // Call the function when the page loads
+        displayUserData();
+      });
+    </script>
+
+  </div>
+
+</body>
+
+</html>