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.
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.
showPage('startseite'); // Standardmäßig die Seite "Reisen" anzeigen
//--- 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();
//Eingabefelder durch ihre IDs (grün) auslesen
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
// ist und eine Antwort vom Server erhalten wurde
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 = "";
const modalDeleteButton = document.getElementById("saveButtonDelete") as HTMLButtonElement;
modalDeleteButton.addEventListener("click", async () => {
deleteUser()
})
//Bearbeiten eines Nutzers
//Registrierung des Event-listeners Event-Listener wird auf das submit-Event des Formulars gesetzt. Das bedeutet, dass der folgende Code
// ausgeführt wird, wenn der Benutzer das Formular absendet.
document.getElementById("edit-profile-form")!.addEventListener("submit", async (event: SubmitEvent): Promise<void> => {
//Eingabefelder abrufen.
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;
// Werte aus den Eingabefeldern lesen
const firstName = firstNameEl.value;
const lastName = lastNameEl.value;
const eMail = eMailEl.value;
const adress = adressEl.value;
const password = passwordEl.value;
// Validierung
if (!password) {
addMessage("Bitte geben Sie Ihr Passwort ein, um Änderungen zu speichern.");
return;
}
//Daten an den Server senden - Put anfrage um daten zu aktualisieren
method: 'put',
headers: {
"Content-type": "application/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);
showLoggedInStatus(data.user);
} 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.
//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;
}
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
//Delete
async function deleteUser(): Promise<void> {
console.log("Enter delete function")
//Daten an den Server senden - delete anfrage, um daten zu aktualisieren
const res: Response = await fetch(`/user`, {
method: 'delete',
headers: {
"Content-type": "application/json"
},
});
//Antwort vom Server verarbeiten
try {
//modalEl.hide(); // Modal schließen
const data: any = await res.json();
if (res.ok) {
modalTest.hide();// Modal schließen
showPage('startseite')
addMessage(data.message || "Profil wurde erfolgreich gelöscht.");
} else {
addMessage(data.message || "Fehler beim Löschen des Profils.");
}
} catch (error) {
console.error("Fehler beim Senden der Löschen-Anfrage:", error);
addMessage("Ein unerwarteter Fehler ist aufgetreten. Bitte versuchen Sie es später erneut.");
}
}
/**
* Resets the site to the logged-out state.
* Clears user list, shows login form, hides logout form-
*/
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 tdUser_id: HTMLTableCellElement = document.createElement("td");
tdUser_id.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;
// adress 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");
deleteButtonIcon.className = "fa-solid fa-trash";
deleteButton.append(deleteButtonIcon);
// Add the cells to the table row
tr.append(tdUser_id, tdFirstName, tdLastName, tdEmail,tdAdress, tdRole, tdButtons);
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
// 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);
}