cm862sz/zkt26
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Partie admin

Browse Source
This commit is contained in:
Arcade69 2025-04-08 10:08:52 +02:00
parent ffa19ba1ba
commit f9a22d418b
10 changed files with 579 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package-lock.json generated Normal file
View File

@ -0,0 +1,6 @@
{
"name": "Projet-Dev-Web-Ing1",
"lockfileVersion": 3,
"requires": true,
"packages": {}
}

256
projet_admin/css/styles.css Normal file
View File

@ -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;
}

0
projet_admin/database/logs.json Normal file
View File

0
projet_admin/database/points.json Normal file
View File

0
projet_admin/database/users.json Normal file
View File

132
projet_admin/http/User.php Normal file
View File

@ -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>

17
projet_admin/http/frontend.php Normal file
View File

@ -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>

10
projet_admin/http/index.js Normal file
View File

@ -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 />);

52
projet_admin/http/sidebar.php Normal file
View File

@ -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>

106
projet_admin/js/script.js Normal file
View File

@ -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);
});
}