Add columns to users table

hacklabkyiv · Nov 30, 2023 · 68ec9de · 68ec9de
1 parent 3fb1fdc
commit 68ec9de
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 62 deletions.
diff --git a/app/static/css/styles.css b/app/static/css/styles.css
@@ -0,0 +1,10 @@
+.full-height {
+    height: auto;
+}
+
+@media (min-width: 576px) {
+    .full-height {
+        min-height: 100vh;
+        height: 100%;
+    }
+}
diff --git a/app/templates/layout.html b/app/templates/layout.html
@@ -15,25 +15,26 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js"></script>
     <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.13.7/datatables.min.css"/>
     <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.13.7/datatables.min.js"></script>
+    <link rel="stylesheet" href="static/css/styles.css">
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 
 <body>
 
 <div class="container-fluid overflow-hidden">
-    <div class="row vh-100 overflow-auto">
-        <div class="col-12 col-sm-3 col-xl-2 px-sm-2 px-0 bg-dark d-flex sticky-top">
-            <div class="d-flex flex-sm-column flex-row flex-grow-1 align-items-center align-items-sm-start px-3 pt-2 text-white">
+    <div class="row full-height overflow-auto">
+        <div class="col-md-3 col-sm-4 col-xs-12 bg-dark full-height">
+            <div class="d-flex flex-sm-column flex-xs-row flex-row align-items-center align-items-sm-start px-3 pt-2 text-white flex-grow-0 sm-vh-100 full-height">
                 <p class="fs-5 d-flex align-items-center pb-sm-3 mb-md-0 me-md-auto text-white text-decoration-none">PRISMO Access System</p>
-                <ul class="nav nav-pills flex-sm-column flex-row flex-nowrap flex-shrink-1 flex-sm-grow-0 flex-grow-1 mb-sm-auto mb-0 justify-content-center align-items-center align-items-sm-start" id="menu">
+                <ul class="nav nav-pills flex-sm-column flex-row flex-nowrap flex-shrink-1 flex-sm-grow-0 flex-grow-0 mb-sm-auto mb-0 justify-content-center align-items-center align-items-sm-start" id="menu">
                     <li class="nav-item">
-                        <a href="/users" class="nav-link px-sm-0 px-2">
+                        <a href="/login" class="nav-link px-sm-0 px-2">
                             <i class="fs-5 bi-people"></i><span class="ms-1 d-none d-sm-inline">Users</span>
                         </a>
                     </li>
                     <li>
-                        <a href="/devices" class="nav-link px-sm-0 px-2">
+                        <a href="/devices" data-bs-toggle="collapse" class="nav-link px-sm-0 px-2">
                             <i class="fs-5 bi-phone-vibrate-fill"></i><span class="ms-1 d-none d-sm-inline">Devices</span> </a>
                     </li>
                     <li>
@@ -45,7 +46,7 @@
                             <i class="fs-5 bi-gear-wide-connected"></i><span class="ms-1 d-none d-sm-inline">Settings</span> </a>
                     </li>
                 </ul>
-                <div class="dropdown py-sm-4 mt-sm-auto ms-auto ms-sm-0 flex-shrink-1">
+                <div class="dropdown py-sm-4 mt-sm-auto ms-auto ms-sm-0">
                     <a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
                         <i class="bi bi-person-circle" class="rounded-circle"></i>
                         <span class="d-none d-sm-inline mx-1">{{ current_user }}</span>
@@ -56,12 +57,12 @@
                 </div>
             </div>
         </div>
-        <div class="col d-flex flex-column h-sm-100">
-            <main class="row overflow-auto">
-                <div class="col pt-4">
+        <div class="col-md-9 col-sm-8 col-xs-12 vh-100">
+            <div class="col d-flex flex-column h-sm-100">
+                <div class="col">
                     {% block content %}{% endblock %}
                 </div>
-            </main>
+            </div>
         </div>
     </div>
 </div>

diff --git a/app/templates/prismo/users.html b/app/templates/prismo/users.html
@@ -15,64 +15,64 @@ <h5 class="card-title">Add last used RFID card as new user</h5>
     </div>
     <div class="py-3">
         <table id="userTable" class="table table-striped table-bordered" style="width:100%">
-            <thead>
-                <tr>
-                    <th>User</th>
-                    <th>User Key</th>
-                    <th>Permissions</th>
-                    <th>Operation</th>
-                </tr>
-            </thead>
-            <tbody>
-            </tbody>
         </table>
     </div>
 </div>
 
 <script>
-$(document).ready(function() {
-  // Initialize DataTables
-  $('#userTable').DataTable({
-    ajax: {
-      url: '/api/users',
-      dataSrc: function (data) {
-        // Convert data to array of objects with desired format
-        var userData = [];
-        for (var i = 0; i < data.length; i++) {
-          var user = {
-            name: data[i].user_name,
-            key: data[i].user_key, // Include 'key' property
-            permissions: data[i].permissions.map(function(permission) {
-              return {
-                device_id: permission.device_id,
-                device_name: permission.device_name,
-                allowed: permission.allowed
-              };
-            }),
-            operation: '<button class="btn btn-sm btn-danger" onclick="deleteUser(\'' + data[i].user_key + '\')">Delete</button>'
-          };
-          userData.push(user);
-        }
-        return userData;
+  async function deleteUser(deviceId) {
+    try {
+      const response = await fetch(`/api/devices/${deviceId}`, { method: 'DELETE' });
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
       }
-    },
-    columns: [
-      { data: 'name' },
-      { data: 'key' }, // Add 'key' column
-      {
-        data: 'permissions',
-        render: function(data) {
-          var permissionList = '';
-          for (var i = 0; i < data.length; i++) {
-            permissionList += '<span class="badge bg-' + (data[i].allowed ? 'success' : 'danger') + '">' + data[i].device_name + '</span>&nbsp;';
-          }
-          return permissionList;
+      console.log('Device successfully deleted');
+    } catch (error) {
+      console.error('Error:', error);
+    }
+  }
+
+  async function fetchData() {
+    try {
+      const response = await fetch('/api/users')
+      const data = await response.json()
+      const tableData = data.map(user => {
+        return {
+          name: user.user_name,
+          key: user.user_key,
+          ...user.permissions.reduce((acc, obj) => {
+            acc[obj.device_name] = {
+              allowed: obj.allowed,
+              device_id: obj.device_id
+            }
+            return acc
+          }, {}),
+          operation: '<button class="btn btn-sm btn-danger" onclick="deleteUser(\'' + user.user_key + '\')">Delete</button>'
         }
-      },
-      { data: 'operation' }
-    ]
-  });
-});
+      })
+
+      $('#userTable').DataTable({
+        data: tableData,
+        columns: Object.keys(tableData[0]).map(key => {
+          return {
+            data: (row) => {
+              const value = row[key]
+              return typeof value === 'string' ? value : `<input type="checkbox" ${value?.allowed && "checked"}>`
+            },
+            // Capitalize first letter of key
+            title: key.charAt(0).toUpperCase() + key.slice(1)
+          }
+        })
+      })
+
+    } catch (error) {
+      console.error('Error:', error)
+    }
+  }
+
+$(document).ready(function() {
+  fetchData()
+ })
 </script>
 
 {% endblock %}