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;
// Reiseberichte schreiben
interface Review {
reviews_id: number;
title: string;
description: string;
rating: number;
country: string;
user_id: number;
}
// Ein Modal-Objekt von Bootstrap wird hier deklariert, aber initialisiert erst später im DOMContentLoaded Event.
modalAdmin = new bootstrap.Modal("#updateAdminModal");
modalAdminDelete = new bootstrap.Modal("#deleteModalAdmin");
//--- 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}),
const data: any = await res.json();
addMessage(data.message);
// 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()
})
const modalDeleteButtonAdmin = document.getElementById("deleteButtonAdmin") as HTMLButtonElement;
modalDeleteButtonAdmin.addEventListener("click", async () => {
deleteUser()
})
//Bearbeiten des Users als User-------------------------------------------------------------------------------------------------------------------------
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
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);
}
} catch (error) {
console.error("Fehler beim Senden der Anfrage:", error);
}
// edit admin ----------------------------------------------------------------------------------------------------------------------------------------
document.getElementById("edit-user-admin-form")!.addEventListener("submit", async (event: SubmitEvent): Promise<void> => {
event.preventDefault();
let idEl: HTMLInputElement = document.getElementById("edit-user-admin-id") as HTMLInputElement;
let firstNameEl: HTMLInputElement = document.getElementById("edit-user-admin-first-name") as HTMLInputElement;
let lastNameEl: HTMLInputElement = document.getElementById("edit-user-admin-last-name") as HTMLInputElement;
let eMailEl: HTMLInputElement = document.getElementById("edit-user-admin-email") as HTMLInputElement;
let adressEl: HTMLInputElement = document.getElementById("edit-user-admin-adress") as HTMLInputElement;
let roleEl: HTMLInputElement = document.getElementById("edit-user-admin-role") as HTMLInputElement;
// Read the user's id from the hidden field.
let userId: number = parseInt(idEl.value);
let firstName: string = firstNameEl.value;
let lastName: string = lastNameEl.value;
let adress: string = adressEl.value;
let role: string = roleEl.value;
const res: Response = await fetch('/user/' + userId, {
method: 'put',
headers: {
"Content-type": "application/json"
},
//Login -----------------------------------------------------------------------------------------------------------------------------------------
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",
}
);
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
// create Reisebericht
document.getElementById("reiseberichtForm")!.addEventListener("submit", async (event: SubmitEvent): Promise<void> => {
//Verhindern des Standartverhaltens
event.preventDefault();
console.log('test');
//Eingabefelder durch ihre IDs (grün) auslesen
const countryEl: HTMLInputElement = document.getElementById("country") as HTMLInputElement;
const titleEl: HTMLInputElement = document.getElementById("titleReisebericht") as HTMLInputElement;
const descriptionEl: HTMLInputElement = document.getElementById("feedback") as HTMLInputElement;
const ratingEl: HTMLInputElement = document.getElementById("ratingReisebericht") as HTMLInputElement;
//Die Werte der Eingabefelder werden in Variablen gespeichert
const country: string = countryEl.value;
const title: string = titleEl.value;
const description: string = descriptionEl.value;
const rating: string = ratingEl.value;
// Validieren der Eingaben
if (!country|| !title || !description) {
addMessage("Bitte alle Felder ausfüllen!");
showPage('reiseberichtSchreiben');
return;
}
// 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
const res: Response = await fetch('/reviews', {
method: 'POST',
headers: {
"Content-type": "application/json",
},
body: JSON.stringify({country, title, description, rating: Number(rating) }),
});
//Antwort vom Server verarbeiten
const data: any = await res.json();
addMessage(data.message);
//Verarbeiten des Antwortstatus
if (res.status === 201) {
addMessage(data.message);
showPage('meineReiseberichte' || "Deine Bewertung wurde erfolgreich erstellt. Danke für dein Feedback! :).");
} else {
addMessage(data.message || "Fehler beim Erstellen deines Berichts, versuche es später erneut.");
showPage('reiseberichtSchreiben');
}
// Zurücksetzen der Eingabefelder, sodass Vorlage wieder leer ist
countryEl.value = "";
titleEl.value = "";
descriptionEl.value = "";
ratingEl.value = "";
});
///Read Reisebericht
document.getElementById("meineReiseberichteSeite")!.addEventListener("click", async (): Promise<void> => {
showPage('meineReiseberichte');
readReviews();
})
//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);
}
async function readReviews(): Promise<void> {
const res: Response = await fetch('/reviews', {
method: "GET"
}
);
const data: any = await res.json();
renderReviews(data.reviewsList);
}
//Funktion für get REVIEW
function reviewDataInProfile (reviews: Review): void {
const countryEl: HTMLInputElement = document.getElementById("reiseland") as HTMLInputElement;
const titleEl: HTMLInputElement = document.getElementById('titelReise') as HTMLInputElement;
const descriptionEl: HTMLInputElement = document.getElementById('reisebeschreibung') as HTMLInputElement;
//const ratingEl: HTMLInputElement = document.getElementById('edit-user-email') as HTMLInputElement;
countryEl.value = reviews.country;
titleEl.value = reviews.title;
descriptionEl.value = reviews.description;
//ratingEl.value = reviews.rating;
}
/**
* 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;
}
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
//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);
}
}
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.
*/
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
function renderReviews(reviewsList: Review[]): void {
let reviewsListEl: HTMLElement = document.getElementById("sectionNewReisebericht")!;
// Remove all entries from the table
reviewsListEl.replaceChildren();
for (let reviews of reviewsList) {
// The new h3 überschrift
let container: HTMLElement = document.createElement("div");
container.className = "reisebericht-card"
let h3: HTMLElement = document.createElement("h3");
h3.textContent = reviews.title.toString();
// New country element h5
let h5: HTMLElement = document.createElement("h5");
h5.textContent = reviews.country.toString();
// new description
let p: HTMLElement = document.createElement("p");
p.textContent = reviews.description.toString();
container.append(h3, h5, p);
reviewsListEl.appendChild(container);
}
}
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;
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");
method: 'DELETE'
});
const data: any = await res.json();
addMessage(data.message);
readUsers();
});
// Delete button icon
let deleteButtonIcon: HTMLElement = document.createElement("i");
let editAdminButton: HTMLButtonElement = document.createElement("button");
editAdminButton.addEventListener("click", () => {
showEditModal(user);
});
// Edit button icon
let editButtonIcon: HTMLElement = document.createElement("i");
editButtonIcon.className = "fa-solid fa-pen updateButton";
tr.append(tdId, tdFirstName, tdLastName, tdEMail,tdAdress, tdRole, tdButtons);
// 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.
*/
let idEl: HTMLInputElement = document.getElementById("edit-user-admin-id") as HTMLInputElement;
let firstNameEl: HTMLInputElement = document.getElementById("edit-user-admin-first-name") as HTMLInputElement;
let lastNameEl: HTMLInputElement = document.getElementById("edit-user-admin-last-name") as HTMLInputElement;
let eMailEl: HTMLInputElement = document.getElementById("edit-user-admin-email") as HTMLInputElement;
let adressEl: HTMLInputElement = document.getElementById("edit-user-admin-adress") as HTMLInputElement;
let roleEl: HTMLInputElement = document.getElementById("edit-user-admin-role") as HTMLInputElement;
// Write the user's id into the hidden field.
idEl.value = user.user_id.toString();
// Write the user's data into the text fields.
firstNameEl.value = user.firstName;
lastNameEl.value = user.lastName;
eMailEl.value = user.eMail;
adressEl.value = user.adress;
roleEl.value = user.role;
// Show the modal window.
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
/**
* 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);
}