feat: user-management page for admin

71704d96 · AlphaThrone · 6133bbe2 · 71704d96 · 71704d96 · 71704d96
Commit 71704d96 authored 1 year ago by AlphaThrone
--- a/client/css/user-manage.css
+++ b/client/css/user-manage.css
+@import url('https://fonts.googleapis.com/css?family=Inter');
+
+*{
+    margin: 0;
+    padding: 0;
+    font-family: Inter;
+    box-sizing: border-box;
+    transition: 0.5;
+}
+
+.container{
+    max-width: 100%;
+    height: 100vh;
+    mix-blend-mode: multiply;
+    background-position: center;
+    background-size: cover;
+    display: flex;
+    flex-direction: column;
+}
+h1{
+    text-align: center;
+    padding: 10px;
+}
+
+.tablebox{
+    width: 100%;
+    position: relative;
+    overflow: scroll;
+    border :outset #5e5e5e thick;
+    height: 100vh;
+    padding: 10px;
+}
+
+#table-container{
+    width: 100%;
+    height: auto;
+    position: relative;
+
+}
+
+table, th, td {
+    border: 1px solid #ddd;
+    border-collapse: collapse;
+}
+  
+.fa-caret-down{
+    float: right;
+}
+
+table{
+    font-family: arial, sans-serif;
+    border-collapse: collapse;
+    width: 100%;
+    height: auto;
+}
+
+.contenttable{
+    cursor: pointer;
+}
+
+th {
+    padding: 20px;
+    text-align: left;
+    background-color: #5c12b1;
+    color: white;
+}
+
+
+td{
+    text-align: left;
+    padding: 10px;
+}
+
+
+tr:nth-child(even){
+    background-color: #f2f2f2;
+    text-align: left;
+    padding: 10px;
+}
+
+tr:nth-child(odd){
+    text-align: left;
+    padding: 10px;
+}
+
+tr:hover {
+    background-color: #ddd;
+}
+
+tr:active{
+    background: #8d8d8d;
+}
\ No newline at end of file
--- a/client/js/user-manage.js
+++ b/client/js/user-manage.js
+
+function sendItem(username){
+    localStorage.setItem("username", username);
+    location.href =  "#";
+}
+
+function usertable(){
+    var tablecontainer = document.getElementById("table-container");
+    const formdata = new FormData();
+    formdata.append("signal", "sending");
+    
+    const xhr = new XMLHttpRequest();
+    xhr.open('GET', '../../server/controllers/user-manage.php', true);
+    //sending
+    xhr.send(formdata);
+    //get response from server
+    xhr.onreadystatechange = function(){
+        if (xhr.readyState === 4 && xhr.status === 200){
+            try{
+                var responseData = JSON.parse(xhr.responseText);
+                if (responseData.success){
+                    var itemList = "";
+                    itemList = responseData.data;
+                    tablecontainer.innerHTML = `
+                        <tr class="table-header">
+                            <th class="colUser"><i class="fa-solid fa-user"></i> Username <i class="fa-solid fa-caret-down"></i></th>
+                            <th class="colEmail"><i class="fa-solid fa-envelope"></i> Email <i class="fa-solid fa-caret-down"></i></th>
+                            <th class="colPass"><i class="fa-solid fa-lock"></i> Password <i class="fa-solid fa-caret-down"></i></th>
+                        </tr>`;
+                    for (var i = 0; i < itemList.length; i++){
+                        tablecontainer.innerHTML += `
+                        <tr class="contenttable" href="#" onclick="sendItem('${itemList[i][1]}')">
+                            <td>${itemList[i][1]}</td>
+                            <td>${itemList[i][0]}</td>
+                            <td>${itemList[i][2]}</td>
+                        </tr>`;
+                    }
+                } else {    
+                    alert("error: " + responseData.message);
+                }
+            } catch (err){}
+        } else if (xhr.status === 404){
+            var response = JSON.parse(xhr.responseText);
+            console.log(response.message);
+        }
+    }
+}
\ No newline at end of file
--- a/client/pages/user-manage.php
+++ b/client/pages/user-manage.php
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, initial scale=1.0">
+    <title>Catalog</title>
+    <link rel="stylesheet" href="../css/user-manage.css">
+    <link rel="stylesheet" href="../css/navbar.css">
+    <link rel="stylesheet" href="../css/sidebar.css">
+    <script src="../js/navbar.js"></script>
+    <script src="../js/sidebar.js"></script>
+    <script src="../js/user-manage.js"></script>
+    <script src="https://kit.fontawesome.com/8505941c5b.js" crossorigin="anonymous"></script>
+</head>
+<body>
+    <div class="container">
+        <div class="tabgroup" id="tabgroup">
+            <script>
+                addnavbar();
+            </script>
+        </div>
+        <h1><i class="fa-solid fa-people-roof"></i> Manage User</h1>
+        <div class="tablebox">
+            <table id="table-container">
+                <script>
+                    usertable();
+                </script>
+            </table>
+        </div>
+        <div class="sidebar" id="sidebar">
+            <script>
+                addsidebar();
+            </script>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
--- a/server/controllers/user-manage.php
+++ b/server/controllers/user-manage.php
+<?php
+    require_once "connect_database.php";
+
+    if ($_SERVER["REQUEST_METHOD"] == "GET"){
+        $conn = connect_database();
+
+        $query = "SELECT * FROM user LIMIT 0, 200";
+        $stmt = $conn->prepare($query);
+
+        if (!$stmt){
+            die("Error in query preparation: ". $conn->error);
+        }
+        $result = $stmt->execute();
+
+        if (!$result){
+            die("Error in query execution: " . $stmt->error);
+        }
+
+        $resultSet = $stmt->get_result();
+        $rows = $resultSet->fetch_all();
+        if (!empty($rows)){
+            $response = array("success" => true, "message" => "data sent", "data" => $rows);
+        } else {
+            $response = array("success" => false, "message" => "Error: not found");
+        }
+        echo json_encode($response);
+        mysqli_close($conn);
+    }
\ No newline at end of file