Newer
Older
// Alle Seiten ausblenden: wählt alle DOM-Elemente aus, die die CSS-Klasse .page haben
const pages: NodeListOf<HTMLDivElement> = document.querySelectorAll('.page');
// Schleife, die über jedes Element in der page-Liste iteriert für jedes der gefundenen Seiten-Elemente wird die CSS-Klasse 'active' entfernt.
// Dies sorgt dafür, dass alle Seiten zunächst "unsichtbar" oder inaktiv sind, da nur die Seite mit der Klasse 'active' sichtbar ist.
pages.forEach((page: HTMLDivElement) => {
page.classList.remove('active');
});
//Diese Methode sucht nach einem DOM-Element mit der ID, die in pageId übergeben wurde. pageId ist eine Zeichenkette, die die ID des Elements
// darstellt, das angezeigt werden soll.HTMLElement | null: Der Rückgabewert von getElementById ist entweder ein HTMLElement
// (wenn das Element gefunden wurde) oder null (wenn kein Element mit dieser ID existiert).
const activePage: HTMLElement | null = document.getElementById(pageId);
if (activePage) {
activePage.classList.add('active');
} else {
console.error(`Seite mit der ID "${pageId}" wurde nicht gefunden.`);
}
}
// Event-Listener für die Initialisierung beim Laden der Seite eim Laden der Seite wird die Funktion showPage('startseite') aufgerufen,
// um die Standardseite (startseite) anzuzeigen.
showPage('startseite'); // Standardmäßig die Seite "Reisen" anzeigen
user_id: number;
firstName: string;
lastName: string;
eMail: string;
adress: string;
role: string;
// Ein Modal-Objekt von Bootstrap wird hier deklariert, aber initialisiert erst später im DOMContentLoaded Event.
let modalEl: bootstrap.Modal
document.addEventListener("DOMContentLoaded", (): void => {
modalEl = new bootstrap.Modal("#edit-user-modal");
//--- check, if user is already logged in (e.g. after refresh) -------------------------------------------------------
checkLogin();
// --- Initialisierung der Benutzeranzeige ---
readUsers();
document.getElementById("add-user-form")!.addEventListener("submit", async (event: SubmitEvent): Promise<void> => {
//Verhindern des Standartverhaltens
event.preventDefault();
const firstNameEl: HTMLInputElement = document.getElementById("add-user-first-name") as HTMLInputElement;
const lastNameEl: HTMLInputElement = document.getElementById("add-user-last-name") as HTMLInputElement;
const eMailEl: HTMLInputElement = document.getElementById("add-user-email") as HTMLInputElement;
const passwordEl: HTMLInputElement = document.getElementById("add-user-password") as HTMLInputElement;
const repeatPasswordEl: HTMLInputElement = document.getElementById("add-user-repeatPassword") as HTMLInputElement;
//Die Werte der Eingabefelder werden in Variablen gespeichert
const firstName: string = firstNameEl.value;
const lastName: string = lastNameEl.value;
const eMail: string = eMailEl.value;
const password: string = passwordEl.value;
const repeatPassword: string = repeatPasswordEl.value;
if (!firstName || !lastName || !eMail || !password || !repeatPassword) {
addMessage("Bitte alle Felder ausfüllen!");
if (password !== repeatPassword) {
addMessage("Passwörter stimmen nicht überein!");
// Sende User Daten an Server - asynchrone HTTP-POST-Anfrage - await sorgt dafür, dass die Ausführung wartet, bis die Anfrage abgeschlossen
body: JSON.stringify({firstName, lastName, eMail, password, repeatPassword}),
// Zurücksetzen der Eingabefelder, sodass Vorlage wieder leer ist
firstNameEl.value = "";
lastNameEl.value = "";
eMailEl.value = "";
passwordEl.value = "";
repeatPasswordEl.value = "";
//Bearbeiten des Users
document.getElementById("edit-profile-form")!.addEventListener("submit", async (event: SubmitEvent): Promise<void> => {
event.preventDefault();
const firstNameEl = document.getElementById("edit-user-first-name") as HTMLInputElement;
const lastNameEl = document.getElementById("edit-user-last-name") as HTMLInputElement;
const eMailEl = document.getElementById("edit-user-email") as HTMLInputElement;
const adressEl = document.getElementById("edit-user-adress") as HTMLInputElement;
const passwordEl = document.getElementById("modal-password") as HTMLInputElement;
const firstName = firstNameEl.value;
const lastName = lastNameEl.value;
const eMail = eMailEl.value;
const adress = adressEl.value;
const password = passwordEl.value;
//Daten an den Server senden - Put anfrage um daten zu aktualisieren
const res: Response = await fetch(`/user`, {
method: 'put',
headers: {
"Content-type": "application/json"
},
body: JSON.stringify({firstName, lastName, eMail, adress, password}),
});
//ANtwort vom Server verarbeiten
try {
const data: any = await res.json();
if (res.ok) {
addMessage(data.message || "Profil wurde erfolgreich aktualisiert.");
userDataInProfile(data.user);
modalEl.hide(); // Modal schließen
} else {
addMessage(data.message || "Fehler beim Aktualisieren des Profils.");
}
} catch (error) {
console.error("Fehler beim Senden der Anfrage:", error);
addMessage("Ein unerwarteter Fehler ist aufgetreten. Bitte versuchen Sie es später erneut.");
}
document.getElementById("dropdown-anmelden")!.addEventListener("submit", async (event: SubmitEvent): Promise<void> => {
//Abrufen der Formulardaten (document.getElementById('exampleDropdownFormEmail2'): Holt das HTML-Element mit der ID exampleDropdownFormEmail2,
// das das Eingabefeld für die E-Mail-Adresse ist.
const eMailInput: HTMLInputElement = document.getElementById('exampleDropdownFormEmail2') as HTMLInputElement;
const passwordInput: HTMLInputElement = document.getElementById('exampleDropdownFormPassword2') as HTMLInputElement;
//Werte, die der Benutzer in die E-Mail- und Passwortfelder eingegeben hat, extrahiert und in den Variablen gespeichert
const response: Response = await fetch('http://localhost:8080/login', {
method: "POST",
headers: {
"Content-type": "application/json"
},
//Der Code überprüft die HTTP-Antwort vom Server und reagiert je nach Statuscode:
if (response.status === 400) {
const data: any = await response.json();
addMessage(data.message);
} else if (response.status === 401) {
} else if (response.status === 200) {
const data: any = await response.json();
addMessage(data.message);
console.log(data.user.role);
if (data.user.role == 'admin') {
console.log("admin");
showPage('nutzerliste');
} else {
console.warn(`Unhandled response code (${response.status}).`)
}
});
//Logout durch POST-Anfrage an http://localhost:8080/logout, um den Benutzer abzumelden.
document.getElementById("logout-form")!.addEventListener("submit", async (event: SubmitEvent): Promise<void> => {
event.preventDefault();
await fetch('http://localhost:8080/logout', {
method: "POST",
}
);
//schaut ob der User eingeloggt ist, wenn ja schickt er die Daten vom User zurück
async function checkLogin(): Promise<void> {
const response: Response = await fetch('/login', {
method: "GET"
}
);
if (response.status === 200) {
const data: any = await response.json();
showLoggedInStatus(data.user);
/**
* Gets and displays all users
*/
async function readUsers(): Promise<void> {
const res: Response = await fetch('/users', {
method: "GET"
}
);
const data: any = await res.json();
renderList(data.userList);
}
/**
* Displays the logged in username
*/
function showLoggedInStatus(user: User): void {
const firstName: HTMLElement = document.getElementById('current-user-firstName')!;
firstName.innerHTML = `Hallo, ${user.firstName}!`; //firstName.innerHTML: Die innerHTML-Eigenschaft eines HTML-Elements enthält den HTML-Inhalt
// des Elements. Hier wird der Inhalt des firstName-Elements (wahrscheinlich ein Textfeld oder ein div) auf den Text "Hallo, {user.firstName}!" gesetzt.
const contentArea: HTMLElement = document.getElementById('user-list-container')!;
contentArea.classList.remove("d-none"); // show content area
//Funktion für get
function userDataInProfile (user: User): void {
const firstNameEl: HTMLInputElement = document.getElementById('edit-user-first-name') as HTMLInputElement;
const lastNameEl: HTMLInputElement = document.getElementById('edit-user-last-name') as HTMLInputElement;
const eMailEl: HTMLInputElement = document.getElementById('edit-user-email') as HTMLInputElement;
firstNameEl.value = user.firstName;
lastNameEl.value = user.lastName;
eMailEl.value = user.eMail;
}
const eMail: HTMLElement = document.getElementById('current-user-email')!;
eMail.innerHTML = ``;
const addUserForm: HTMLElement = document.getElementById('add-user-container')!;
addUserForm.classList.add("d-none"); // hide content area
const contentArea: HTMLElement = document.getElementById('user-list-container')!;
contentArea.classList.add("d-none"); // hide content area
const login: HTMLElement = document.getElementById('login-container')!;
login.classList.remove("d-none"); // show login
(document.getElementById('add-user-form') as HTMLFormElement).reset();
/**
* 1) Clears the user table.
* 2) Adds all users to the table.
*/
function renderList(userList: User[]): void {
let userListEl: HTMLElement = document.getElementById("user-list")!;
// Remove all entries from the table
userListEl.replaceChildren();
for (let user of userList) {
// The new table row
let tr: HTMLTableRowElement = document.createElement("tr");
// ID cell
let tdId: HTMLTableCellElement = document.createElement("td");
tdId.textContent = user.user_id.toString();
let tdFirstName: HTMLTableCellElement = document.createElement("td");
tdFirstName.textContent = user.firstName;
let tdLastName: HTMLTableCellElement = document.createElement("td");
tdLastName.textContent = user.lastName;
// email cell
let tdEMail: HTMLTableCellElement = document.createElement("td");
tdEMail.textContent = user.eMail;
// address cell
let tdAdress: HTMLTableCellElement = document.createElement("td");
tdAdress.textContent = user.adress;
// role cell
let tdRole: HTMLTableCellElement = document.createElement("td");
tdRole.textContent = user.role;
// Buttons cell
let tdButtons: HTMLTableCellElement = document.createElement("td");
// Delete button
let deleteButton: HTMLButtonElement = document.createElement("button");
deleteButton.className = "btn btn-danger";
deleteButton.addEventListener("click", async () => {
method: 'DELETE'
});
const data: any = await res.json();
addMessage(data.message);
readUsers();
});
// Delete button icon
let deleteButtonIcon: HTMLElement = document.createElement("i");
// Edit button
let editButton: HTMLButtonElement = document.createElement("button");
});
// Edit button icon
let editButtonIcon: HTMLElement = document.createElement("i");
editButtonIcon.className = "fa-solid fa-pen updateButton";
editButton.append(editButtonIcon);
// Adds the buttons to the button cell
tdButtons.append(deleteButton, editButton);
tr.append(tdId, tdFirstName, tdLastName, tdEMail,tdAdress, tdRole, tdButtons);
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
// Add the table row to the table
userListEl.append(tr);
}
}
/**
* 1) Fills the modal window with the given user's data.
* 2) Opens the modal window.
*/
/**
* Creates a new alert message.
*/
function addMessage(message: string): void {
const messagesEl: HTMLElement = document.getElementById('messages')!;
// The alert element
let alertEl: HTMLElement = document.createElement('div');
alertEl.classList.add('alert', 'alert-warning', 'alert-dismissible', 'fade', 'show');
alertEl.setAttribute('role', 'alert');
alertEl.textContent = message;
// Close button
let buttonEl: HTMLElement = document.createElement("button");
// btn-close changes the button into an 'X' icon.
buttonEl.className = "btn-close";
// data-bs-dismiss enables the button to automatically close the alert on click.
buttonEl.setAttribute("data-bs-dismiss", "alert");
// Add the close button to the alert.
alertEl.appendChild(buttonEl);
// Convert to Bootstrap Alert type
const alert: bootstrap.Alert = new bootstrap.Alert(alertEl);
// Add message to DOM
messagesEl.appendChild(alertEl);
// Auto-remove message after 5 seconds (5000ms)
setTimeout(() => {
alert.close();
}, 5000);
}