From f9a22d418be534e5c5e548701337b0d1abd26d26 Mon Sep 17 00:00:00 2001
From: Arcade69 <rubenarcade69@gmail.com>
Date: Tue, 8 Apr 2025 10:08:52 +0200
Subject: [PATCH] Partie admin

---
 package-lock.json                 |   6 +
 projet_admin/css/styles.css       | 256 ++++++++++++++++++++++++++++++
 projet_admin/database/logs.json   |   0
 projet_admin/database/points.json |   0
 projet_admin/database/users.json  |   0
 projet_admin/http/User.php        | 132 +++++++++++++++
 projet_admin/http/frontend.php    |  17 ++
 projet_admin/http/index.js        |  10 ++
 projet_admin/http/sidebar.php     |  52 ++++++
 projet_admin/js/script.js         | 106 +++++++++++++
 10 files changed, 579 insertions(+)
 create mode 100644 package-lock.json
 create mode 100644 projet_admin/css/styles.css
 create mode 100644 projet_admin/database/logs.json
 create mode 100644 projet_admin/database/points.json
 create mode 100644 projet_admin/database/users.json
 create mode 100644 projet_admin/http/User.php
 create mode 100644 projet_admin/http/frontend.php
 create mode 100644 projet_admin/http/index.js
 create mode 100644 projet_admin/http/sidebar.php
 create mode 100644 projet_admin/js/script.js

diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..cb77e89
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "Projet-Dev-Web-Ing1",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}
diff --git a/projet_admin/css/styles.css b/projet_admin/css/styles.css
new file mode 100644
index 0000000..823c0e6
--- /dev/null
+++ b/projet_admin/css/styles.css
@@ -0,0 +1,256 @@
+/* General Reset */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f4f4f4;
+}
+
+/* Container */
+.container {
+    display: flex;
+    height: 100vh;
+}
+
+/* Sidebar */
+.sidebar h2 {
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+.sidebar nav ul {
+    list-style: none;
+}
+
+.sidebar nav ul li {
+    margin: 15px 0;
+}
+
+.sidebar nav ul li a {
+    color: #fff;
+    text-decoration: none;
+    padding: 10px;
+    display: block;
+    border-radius: 5px;
+}
+
+.sidebar nav ul li a:hover {
+    background-color: #555;
+}
+
+/* Main Content */
+.main-content {
+    flex-grow: 1;
+    padding: 20px;
+    background-color: #fff;
+    overflow-y: auto;
+}
+
+header {
+    margin-bottom: 20px;
+}
+
+header h1 {
+    margin-bottom: 10px;
+}
+
+/* Cards Section */
+.cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 20px;
+}
+
+.card {
+    background: #e3e3e3;
+    padding: 20px;
+    border-radius: 8px;
+    text-align: center;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+.card h3 {
+    margin-bottom: 10px;
+}
+
+/* Media Query for Responsive Design */
+@media (max-width: 768px) {
+    .sidebar {
+        width: 70px;
+        text-align: center;
+    }
+    
+    .sidebar h2 {
+        font-size: 16px;
+    }
+    
+    .sidebar nav ul li {
+        margin: 10px 0;
+    }
+
+    .sidebar nav ul li a {
+        padding: 5px;
+    }
+    
+    .main-content {
+        padding: 10px;
+    }
+}
+
+/* User Management Section */
+.user-management {
+    margin-top: 20px;
+}
+
+.user-form {
+    display: grid;
+    grid-template-columns: 1fr 1fr auto;
+    gap: 10px;
+    margin-bottom: 20px;
+}
+
+.user-form input {
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+}
+
+.user-form button {
+    padding: 10px;
+    background-color: #28a745;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.user-form button:hover {
+    background-color: #218838;
+}
+
+.user-table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.user-table th, .user-table td {
+    padding: 10px;
+    border: 1px solid #ccc;
+    text-align: left;
+}
+
+.user-table th {
+    background-color: #f4f4f4;
+}
+
+.action-button {
+    background-color: #dc3545;
+    color: white;
+    border: none;
+    padding: 5px 10px;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.action-button:hover {
+    background-color: #c82333;
+}
+
+/* Add this to your existing CSS */
+
+/* User Management Section */
+.user-management {
+    margin-top: 20px;
+}
+
+.user-form {
+    display: grid;
+    grid-template-columns: 1fr 1fr auto;
+    gap: 10px;
+    margin-bottom: 20px;
+}
+
+.user-form input {
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+}
+
+.user-form button {
+    padding: 10px;
+    background-color: #28a745;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.user-form button:hover {
+    background-color: #218838;
+}
+
+.user-table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.user-table th, .user-table td {
+    padding: 10px;
+    border: 1px solid #ccc;
+    text-align: left;
+}
+
+.user-table th {
+    background-color: #f4f4f4;
+}
+
+.access-level {
+    margin-right: 10px;
+}
+
+.assign-button, .revoke-button, .adjust-points-button {
+    background-color: #007bff;
+    color: white;
+    border: none;
+    padding: 5px 10px;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.assign-button:hover {
+    background-color: #0069d9;
+}
+
+.revoke-button {
+    background-color: #dc3545;
+}
+
+.revoke-button:hover {
+    background-color: #c82333;
+}
+
+/* Add this to your existing CSS */
+
+/* User Logs Section */
+.user-logs {
+    margin-top: 40px;
+}
+
+.log-table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.log-table th, .log-table td {
+    padding: 10px;
+    border: 1px solid #ccc;
+    text-align: left;
+}
+
+.log-table th {
+    background-color: #f4f4f4;
+}
\ No newline at end of file
diff --git a/projet_admin/database/logs.json b/projet_admin/database/logs.json
new file mode 100644
index 0000000..e69de29
diff --git a/projet_admin/database/points.json b/projet_admin/database/points.json
new file mode 100644
index 0000000..e69de29
diff --git a/projet_admin/database/users.json b/projet_admin/database/users.json
new file mode 100644
index 0000000..e69de29
diff --git a/projet_admin/http/User.php b/projet_admin/http/User.php
new file mode 100644
index 0000000..7ffa2c6
--- /dev/null
+++ b/projet_admin/http/User.php
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="../css/styles.css">
+    <title>User</title>
+    <style>
+        /* Add this to your existing CSS */
+
+        /* User Management Section */
+        .user-management {
+            margin-top: 20px;
+        }
+
+        .user-form {
+            display: grid;
+            grid-template-columns: 1fr 1fr auto;
+            gap: 10px;
+            margin-bottom: 20px;
+        }
+
+        .user-form input {
+            padding: 10px;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+        }
+
+        .user-form button {
+            padding: 10px;
+            background-color: #28a745;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+
+        .user-form button:hover {
+            background-color: #218838;
+        }
+
+        .user-table {
+            width: 100%;
+            border-collapse: collapse;
+        }
+
+        .user-table th,
+        .user-table td {
+            padding: 10px;
+            border: 1px solid #ccc;
+            text-align: left;
+        }
+
+        .user-table th {
+            background-color: #f4f4f4;
+        }
+
+        .access-level {
+            margin-right: 10px;
+        }
+
+        .assign-button,
+        .revoke-button {
+            background-color: #007bff;
+            color: white;
+            border: none;
+            padding: 5px 10px;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+
+        .assign-button:hover {
+            background-color: #0069d9;
+        }
+
+        .revoke-button {
+            background-color: #dc3545;
+        }
+
+        .revoke-button:hover {
+            background-color: #c82333;
+        }
+    </style>
+</head>
+<?php include("sidebar.php"); ?>
+
+<body>
+    <main class="main-content">
+        <header>
+            <h1>User Management</h1>
+            <p>Manage users from this panel.</p>
+        </header>
+        <section class="user-management">
+            <form id="userForm" class="user-form">
+                <input type="text" id="username" placeholder="Username" required>
+                <input type="email" id="email" placeholder="Email" required>
+                <button type="submit">Add User</button>
+            </form>
+            <table class="user-table">
+                <thead>
+                    <tr>
+                        <th>Username</th>
+                        <th>Email</th>
+                        <th>Access Level</th>
+                        <th>Points</th>
+                        <th>Actions</th>
+                    </tr>
+                </thead>
+                <tbody id="userList">
+                </tbody>
+            </table>
+        </section>
+        <section class="user-logs">
+            <h2>Login History and Action Logs</h2>
+            <table class="log-table">
+                <thead>
+                    <tr>
+                        <th>Username</th>
+                        <th>Action</th>
+                        <th>Timestamp</th>
+                    </tr>
+                </thead>
+                <tbody id="logList">
+                </tbody>
+            </table>
+        </section>
+    </main>
+</body>
+<script src="../js/script.js"></script>
+
+</html>
\ No newline at end of file
diff --git a/projet_admin/http/frontend.php b/projet_admin/http/frontend.php
new file mode 100644
index 0000000..2fc4a58
--- /dev/null
+++ b/projet_admin/http/frontend.php
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Admin Dashboard - User Management</title>
+    <link rel="stylesheet" href="../css/styles.css">
+</head>
+<?php include("sidebar.php"); ?>
+
+<body>
+    <nav id="navigation"></nav>
+    <script src="../js/script.js"></script>
+</body>
+
+</html>
diff --git a/projet_admin/http/index.js b/projet_admin/http/index.js
new file mode 100644
index 0000000..b1f539a
--- /dev/null
+++ b/projet_admin/http/index.js
@@ -0,0 +1,10 @@
+import { createRoot } from 'react-dom/client';
+
+function NavigationBar() {
+  // TODO: Actually implement a navigation bar
+  return <h1>Hello from React!</h1>;
+}
+
+const domNode = document.getElementById('navigation');
+const root = createRoot(domNode);
+root.render(<NavigationBar />);
diff --git a/projet_admin/http/sidebar.php b/projet_admin/http/sidebar.php
new file mode 100644
index 0000000..fb802e1
--- /dev/null
+++ b/projet_admin/http/sidebar.php
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title><i class="fas fa-head-side-brain"></i></title>
+    <link rel="stylesheet" href="../css/styles.css">
+    <style>
+        body {
+            display: flex;
+        }
+
+        main {
+            flex-grow: 1; /* Permet au contenu principal de prendre tout l'espace restant */
+            padding: 20px;
+        }
+        html,
+        body {
+            height: 100%;
+            margin: 0;
+            padding: 0;
+        }
+
+        .sidebar {
+            width: 250px;
+            background-color: #333;
+            color: #fff;
+            padding: 20px;
+            height: 100vh;
+            /* Sidebar prend toute la hauteur visible de l'écran */
+            box-sizing: border-box;
+            /* inclut padding dans la largeur/hauteur */
+        }
+    </style>
+</head>
+
+<body>
+    <aside class="sidebar">
+        <h2>Admin Panel</h2>
+        <nav>
+            <ul>
+                <li><a href="frontend.php">Dashboard</a></li>
+                <li><a href="User.php">Users</a></li>
+                <li><a href="#">Settings</a></li>
+                <li><a href="#">Reports</a></li>
+            </ul>
+        </nav>
+    </aside>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/projet_admin/js/script.js b/projet_admin/js/script.js
new file mode 100644
index 0000000..3d61a5a
--- /dev/null
+++ b/projet_admin/js/script.js
@@ -0,0 +1,106 @@
+// script.js
+
+let users = [];
+let logs = [];
+
+document.getElementById('userForm').addEventListener('submit', function(event) {
+    event.preventDefault();
+    
+    const username = document.getElementById('username').value;
+    const email = document.getElementById('email').value;
+    
+    const user = {
+        id: Date.now(),
+        username: username,
+        email: email,
+        accessLevel: 'User',  // Default access level
+        points: 0,             // Default points
+        logins: []             // Array to track login timestamps     
+    };
+    
+    users.push(user);
+    logAction(username, 'User added');
+    renderUserList();
+    this.reset();  // Clear the form
+});
+
+function renderUserList() {
+    const userList = document.getElementById('userList');
+    userList.innerHTML = '';  // Clear the list before rendering
+    
+    users.forEach((user) => {
+        const row = document.createElement('tr');
+        row.innerHTML = `
+            <td>${user.username}</td>
+            <td>${user.email}</td>
+            <td>
+                <select class="access-level" onchange="changeAccessLevel(${user.id}, this.value)">
+                    <option value="Admin" ${user.accessLevel === 'Admin' ? 'selected' : ''}>Admin</option>
+                    <option value="User" ${user.accessLevel === 'User' ? 'selected' : ''}>User</option>
+                    <option value="Guest" ${user.accessLevel === 'Guest' ? 'selected' : ''}>Guest</option>
+                </select>
+            </td>
+            <td>
+                <span>${user.points}</span>
+                <input type="number" min="0" id="points-${user.id}" style="width:60px" placeholder="Adjust" />
+                <button class="adjust-points-button" onclick="adjustPoints(${user.id})">Adjust</button>
+            </td>
+            <td>
+                <button class="action-button" onclick="deleteUser(${user.id})">Delete</button>
+            </td>
+        `;
+        userList.appendChild(row);
+    });
+}
+
+function deleteUser(userId) {
+    const user = users.find(user => user.id === userId);
+    if (user) {
+        logAction(user.username, 'User deleted');
+    }
+    users = users.filter(user => user.id !== userId);
+    renderUserList();
+}
+
+function changeAccessLevel(userId, newLevel) {
+    const user = users.find(user => user.id === userId);
+    if (user) {
+        const oldLevel = user.accessLevel;
+        user.accessLevel = newLevel;
+        logAction(user.username, `Access level changed from ${oldLevel} to ${newLevel}`);
+    }
+}
+
+function adjustPoints(userId) {
+    const inputField = document.getElementById(`points-${userId}`);
+    const pointsToAdd = parseInt(inputField.value) || 0;
+
+    const user = users.find(user => user.id === userId);
+    if (user) {
+        user.points += pointsToAdd;  // Adjust points based on the input value
+        logAction(user.username, `Points adjusted by ${pointsToAdd}`);
+        inputField.value = '';  // Clear the input
+        renderUserList();  // Re-render the user list
+    }
+}
+
+function logAction(username, action) {
+    const timestamp = new Date().toLocaleString();
+    logs.push({username, action, timestamp});
+    renderLogList();
+}
+
+function renderLogList() {
+    const logList = document.getElementById('logList');
+    logList.innerHTML = '';  // Clear the list before rendering
+
+    logs.forEach(log => {
+        const row = document.createElement('tr');
+        row.innerHTML = `
+            <td>${log.username}</td>
+            <td>${log.action}</td>
+            <td>${log.timestamp}</td>
+        `;
+        logList.appendChild(row);
+    });
+}
\ No newline at end of file