change admin.html

This commit is contained in:
Christian Rute 2024-10-29 22:24:31 +01:00
parent 003c621efc
commit 8d1ec4245f
3 changed files with 45 additions and 8 deletions

View File

@ -7,11 +7,23 @@
<link rel="stylesheet" href="css/styles.css"> <link rel="stylesheet" href="css/styles.css">
</head> </head>
<body> <body>
<h1>Admin-Bereich</h1>
<button id="loadUserListBtn">Benutzerliste laden</button> <!-- Header für Admin-Bereich -->
<div id="user-list"></div> <header class="header">
<button id="logoutBtn">Abmelden</button> <h1 class="header-title">Admin-Bereich</h1>
<button onclick="toWelcome()">Zur Willkommensseite</button>
<div class="header-buttons">
<button id="loadUserListBtn" class="header-btn">Benutzerliste laden</button>
<button onclick="toWelcome()" class="header-btn">Zur Willkommensseite</button>
<button id="logoutBtn" class="header-btn">Abmelden</button>
</div>
</header>
<!-- Hauptbereich für Benutzerliste -->
<main>
<div id="user-list" class="user-list"></div>
</main>
<script src="js/main.js"></script> <script src="js/main.js"></script>
</body> </body>
</html> </html>

View File

@ -147,4 +147,25 @@ main {
flex-grow: 1; flex-grow: 1;
} }
/* Benutzerliste Styling */
.user-list {
padding: 20px;
background-color: #f8f9fa;
border-radius: 8px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}
/* Titel im Header */
.header-title {
font-size: 1.5rem;
color: #333;
margin: 0;
flex-grow: 1;
text-align: left;
padding: 0.5rem;
}
.button-delete {
color: red;
}

View File

@ -101,9 +101,13 @@ async function loadUserList() {
users.forEach(user => { users.forEach(user => {
const userDiv = document.createElement('div'); const userDiv = document.createElement('div');
userDiv.style.display = 'flex';
userDiv.style.alignItems = 'center';
userDiv.setAttribute('id', `user-list-element`);
userDiv.innerHTML = ` userDiv.innerHTML = `
<p>Benutzername: ${user.username} - Email: ${user.email}</p> <p style="flex: 0 0 25%;">Benutzername: ${user.username}</p>
<button onclick="deleteUser('${user._id}')">Benutzer löschen</button> <p style="flex: 0 0 25%;">Email: ${user.email}</p>
<button id="button-delete" onclick="deleteUser('${user._id}')" style="flex: 0 0 50%;">Benutzer löschen</button>
`; `;
userList.appendChild(userDiv); userList.appendChild(userDiv);
}); });