Skip to content
Snippets Groups Projects
client.ts 23.2 KiB
Newer Older
„Sophia's avatar
„Sophia committed
// Funktion, die die aktive Seite anzeigt und alle anderen ausblendet
Victoria Badeke's avatar
Victoria Badeke committed
// (void = kein Rückgabetyp)
„Sophia's avatar
„Sophia committed
function showPage(pageId: string): void {
Victoria Badeke's avatar
Victoria Badeke committed
  // Alle Seiten ausblenden: wählt alle DOM-Elemente aus, die die CSS-Klasse .page haben
„Sophia's avatar
„Sophia committed
  const pages: NodeListOf<HTMLDivElement> = document.querySelectorAll('.page');
Victoria Badeke's avatar
Victoria Badeke committed
  // 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.
„Sophia's avatar
„Sophia committed
  pages.forEach((page: HTMLDivElement) => {
    page.classList.remove('active');
  });

Victoria Badeke's avatar
Victoria Badeke committed

„Sophia's avatar
„Sophia committed
  // Die ausgewählte Seite anzeigen
Victoria Badeke's avatar
Victoria Badeke committed
  //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).
„Sophia's avatar
„Sophia committed
  const activePage: HTMLElement | null = document.getElementById(pageId);
  if (activePage) {
    activePage.classList.add('active');
  } else {
    console.error(`Seite mit der ID "${pageId}" wurde nicht gefunden.`);
  }
}

Victoria Badeke's avatar
Victoria Badeke committed
// 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.


„Sophia's avatar
„Sophia committed
interface User {
„Sophia's avatar
„Sophia committed
  user_id: number;
  firstName: string;
  lastName: string;
  eMail: string;
  adress: string;
  role: string;
„Sophia's avatar
„Sophia committed
}

„Sophia's avatar
„Sophia committed
// Reiseberichte schreiben
interface Review {
  reviews_id: number;
  title: string;
  description: string;
  rating: number;
  country: string;
  user_id: number;
}

Victoria Badeke's avatar
Victoria Badeke committed
// Ein Modal-Objekt von Bootstrap wird hier deklariert, aber initialisiert erst später im DOMContentLoaded Event.
„Sophia's avatar
„Sophia committed
let modalEl: bootstrap.Modal
Sarah Gloger's avatar
Sarah Gloger committed
let modalTest: bootstrap.Modal
„Sophia's avatar
„Sophia committed
let modalAdmin: bootstrap.Modal
let modalAdminDelete: bootstrap.Modal
„Sophia's avatar
„Sophia committed

„Sophia's avatar
„Sophia committed

document.addEventListener("DOMContentLoaded", (): void => {
„Sophia's avatar
„Sophia committed
  showPage('startseite');
„Sophia's avatar
„Sophia committed
  modalEl = new bootstrap.Modal("#updateModal");
Sarah Gloger's avatar
Sarah Gloger committed
  modalTest = new bootstrap.Modal("#deleteModal");
„Sophia's avatar
„Sophia committed
  modalAdmin = new bootstrap.Modal("#updateAdminModal");
  modalAdminDelete = new bootstrap.Modal("#deleteModalAdmin");
„Sophia's avatar
„Sophia committed

„Sophia's avatar
„Sophia committed

Sarah Gloger's avatar
Sarah Gloger committed
  //--- check, if user is already logged in (e.g. after refresh) -------------------------------------------------------
  checkLogin();
Sarah Gloger's avatar
Sarah Gloger committed
  // --- Initialisierung der Benutzeranzeige ---
  readUsers();
„Sophia's avatar
„Sophia committed
  readReviews();
„Sophia's avatar
„Sophia committed

Sarah Gloger's avatar
Sarah Gloger committed
  // --- Registrierungsformular Eventhandler ---
Victoria Badeke's avatar
Victoria Badeke committed
  //Registrierung des Event-Listeners
„Sophia's avatar
„Sophia committed
  document.getElementById("add-user-form")!.addEventListener("submit", async (event: SubmitEvent): Promise<void> => {
    //Verhindern des Standartverhaltens
    event.preventDefault();
Victoria Badeke's avatar
Victoria Badeke committed

„Sophia's avatar
„Sophia committed
    //Eingabefelder durch ihre IDs (grün) auslesen
„Sophia's avatar
„Sophia committed
    const firstNameEl: HTMLInputElement = document.getElementById("add-user-first-name") as HTMLInputElement;
    const lastNameEl: HTMLInputElement = document.getElementById("add-user-last-name") as HTMLInputElement;
Sarah Gloger's avatar
Sarah Gloger committed
    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;
„Sophia's avatar
„Sophia committed

Victoria Badeke's avatar
Victoria Badeke committed
//Die Werte der Eingabefelder werden in Variablen gespeichert
„Sophia's avatar
„Sophia committed
    const firstName: string = firstNameEl.value;
    const lastName: string = lastNameEl.value;
Sarah Gloger's avatar
Sarah Gloger committed
    const eMail: string = eMailEl.value;
    const password: string = passwordEl.value;
    const repeatPassword: string = repeatPasswordEl.value;
„Sophia's avatar
„Sophia committed

Victoria Badeke's avatar
Victoria Badeke committed
    // Validieren der Eingaben
Sarah Gloger's avatar
Sarah Gloger committed
    if (!firstName || !lastName || !eMail || !password || !repeatPassword) {
      addMessage("Bitte alle Felder ausfüllen!");
„Sophia's avatar
„Sophia committed
      showPage('registrieren');
Sarah Gloger's avatar
Sarah Gloger committed
      return;
    }
„Sophia's avatar
„Sophia committed

Victoria Badeke's avatar
Victoria Badeke committed
    // Validierung der Passwörter
Sarah Gloger's avatar
Sarah Gloger committed
    if (password !== repeatPassword) {
      addMessage("Passwörter stimmen nicht überein!");
„Sophia's avatar
„Sophia committed
      showPage('registrieren')
„Sophia's avatar
„Sophia committed
      return;
    }

Victoria Badeke's avatar
Victoria Badeke committed
    // Sende User Daten an Server - asynchrone HTTP-POST-Anfrage - await sorgt dafür, dass die Ausführung wartet, bis die Anfrage abgeschlossen
„Sophia's avatar
„Sophia committed
    // ist und eine Antwort vom Server erhalten wurde
„Sophia's avatar
„Sophia committed
    const res: Response = await fetch('/user', {
Sarah Gloger's avatar
Sarah Gloger committed
      method: 'POST',
„Sophia's avatar
„Sophia committed
      headers: {
Sarah Gloger's avatar
Sarah Gloger committed
        "Content-type": "application/json",
„Sophia's avatar
„Sophia committed
      },
„Sophia's avatar
„Sophia committed
      body: JSON.stringify({firstName, lastName, eMail, password, repeatPassword}),
„Sophia's avatar
„Sophia committed
    });
Victoria Badeke's avatar
Victoria Badeke committed

    //Antwort vom Server verarbeiten
„Sophia's avatar
„Sophia committed
    const data: any = await res.json();

    addMessage(data.message);

Victoria Badeke's avatar
Victoria Badeke committed
//Verarbeiten des Antwortstatus
„Sophia's avatar
„Sophia committed
    if (res.status === 201) {
Sarah Gloger's avatar
Sarah Gloger committed
      addMessage(data.message);
„Sophia's avatar
„Sophia committed
      showLoggedInStatus(data.user);
„Sophia's avatar
„Sophia committed
      userDataInProfile(data.user);
„Sophia's avatar
„Sophia committed
      reviewDataInProfile(data.user);
„Sophia's avatar
„Sophia committed
    } else {
Sarah Gloger's avatar
Sarah Gloger committed
      addMessage(data.message);
„Sophia's avatar
„Sophia committed
      showPage('registrieren');
Sarah Gloger's avatar
Sarah Gloger committed
    }
Sarah Gloger's avatar
Sarah Gloger committed


Victoria Badeke's avatar
Victoria Badeke committed
    // Zurücksetzen der Eingabefelder, sodass Vorlage wieder leer ist
Sarah Gloger's avatar
Sarah Gloger committed
    firstNameEl.value = "";
    lastNameEl.value = "";
    eMailEl.value = "";
    passwordEl.value = "";
    repeatPasswordEl.value = "";

„Sophia's avatar
„Sophia committed
  });
„Sophia's avatar
„Sophia committed

Sarah Gloger's avatar
Sarah Gloger committed
  const modalDeleteButton = document.getElementById("saveButtonDelete") as HTMLButtonElement;
  modalDeleteButton.addEventListener("click", async () => {
    deleteUser()
  })
„Sophia's avatar
„Sophia committed
  const modalDeleteButtonAdmin = document.getElementById("deleteButtonAdmin") as HTMLButtonElement;
  modalDeleteButtonAdmin.addEventListener("click", async () => {
    deleteUser()
  })
„Sophia's avatar
„Sophia committed

Sarah Gloger's avatar
Sarah Gloger committed
//Bearbeiten des Users als User-------------------------------------------------------------------------------------------------------------------------
„Sophia's avatar
„Sophia committed
  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) {
„Sophia's avatar
„Sophia committed
        modalEl.hide();
        showPage('profil')// Modal schließen
„Sophia's avatar
„Sophia committed
        addMessage(data.message || "Profil wurde erfolgreich aktualisiert.");
        userDataInProfile(data.user);
„Sophia's avatar
„Sophia committed
        reviewDataInProfile(data.user);
„Sophia's avatar
„Sophia committed
      } else {
„Sophia's avatar
„Sophia committed
        console.error ("Fehler beim Aktualisieren des Profils.");
„Sophia's avatar
„Sophia committed
      }
    } catch (error) {
      console.error("Fehler beim Senden der Anfrage:", error);
    }
„Sophia's avatar
„Sophia committed

    // Update the html
Victoria Badeke's avatar
Victoria Badeke committed
    readUsers(); //sorgt dafür das alle User ausgelesen werden
„Sophia's avatar
„Sophia committed
  });
Victoria Badeke's avatar
Victoria Badeke committed

Sarah Gloger's avatar
Sarah Gloger committed
  // edit admin ----------------------------------------------------------------------------------------------------------------------------------------
„Sophia's avatar
„Sophia committed
  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;
„Sophia's avatar
„Sophia committed
    let eMailEl: HTMLInputElement = document.getElementById("edit-user-admin-email") as HTMLInputElement;
„Sophia's avatar
„Sophia committed
    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;
„Sophia's avatar
„Sophia committed
    let eMail: string = eMailEl.value;
„Sophia's avatar
„Sophia committed
    let adress: string = adressEl.value;
    let role: string = roleEl.value;

    const res: Response = await fetch('/user/' + userId, {
      method: 'put',
      headers: {
        "Content-type": "application/json"
      },
„Sophia's avatar
„Sophia committed
      body: JSON.stringify({firstName, lastName, eMail, adress, role}),
„Sophia's avatar
„Sophia committed
    });
„Sophia's avatar
„Sophia committed
    const data: any = await res.json();
„Sophia's avatar
„Sophia committed
    addMessage(data.message);
„Sophia's avatar
„Sophia committed

    // Hide the modal window
„Sophia's avatar
„Sophia committed
    modalAdmin.hide();
„Sophia's avatar
„Sophia committed

    // Update the html
    readUsers();
  });
„Sophia's avatar
„Sophia committed

Sarah Gloger's avatar
Sarah Gloger committed
  //Login -----------------------------------------------------------------------------------------------------------------------------------------
Sarah Gloger's avatar
Sarah Gloger committed
  document.getElementById("dropdown-anmelden")!.addEventListener("submit", async (event: SubmitEvent): Promise<void> => {
„Sophia's avatar
„Sophia committed
    event.preventDefault();
Victoria Badeke's avatar
Victoria Badeke committed

    //Abrufen der Formulardaten (document.getElementById('exampleDropdownFormEmail2'): Holt das HTML-Element mit der ID exampleDropdownFormEmail2,
    // das das Eingabefeld für die E-Mail-Adresse ist.
Sarah Gloger's avatar
Sarah Gloger committed
    const eMailInput: HTMLInputElement = document.getElementById('exampleDropdownFormEmail2') as HTMLInputElement;
    const passwordInput: HTMLInputElement = document.getElementById('exampleDropdownFormPassword2') as HTMLInputElement;
„Sophia's avatar
„Sophia committed

Victoria Badeke's avatar
Victoria Badeke committed
    //Werte, die der Benutzer in die E-Mail- und Passwortfelder eingegeben hat, extrahiert und in den Variablen gespeichert
Sarah Gloger's avatar
Sarah Gloger committed
    const eMail: string = eMailInput.value;
„Sophia's avatar
„Sophia committed
    const password: string = passwordInput.value;

Victoria Badeke's avatar
Victoria Badeke committed
    // Senden der Login-Daten an den Server
„Sophia's avatar
„Sophia committed
    const response: Response = await fetch('http://localhost:8080/login', {
        method: "POST",
        headers: {
          "Content-type": "application/json"
        },
Sarah Gloger's avatar
Sarah Gloger committed
        body: JSON.stringify({eMail, password}),
„Sophia's avatar
„Sophia committed
      }
    );

Victoria Badeke's avatar
Victoria Badeke committed
    //Der Code überprüft die HTTP-Antwort vom Server und reagiert je nach Statuscode:
Sarah Gloger's avatar
Sarah Gloger committed
    if (response.status === 400) {
      const data: any = await response.json();
      addMessage(data.message);
    } else if (response.status === 401) {
„Sophia's avatar
„Sophia committed
      const data: any = await response.json();
      addMessage(data.message);
Sarah Gloger's avatar
Sarah Gloger committed
      showPage('startseite')
„Sophia's avatar
„Sophia committed
    } else if (response.status === 200) {
      const data: any = await response.json();
      addMessage(data.message);
„Sophia's avatar
„Sophia committed
      console.log(data.user.role);
      if (data.user.role == 'admin') {
        console.log("admin");
        showPage('nutzerliste');
„Sophia's avatar
„Sophia committed
        showLoggedInStatus(data.user);
„Sophia's avatar
„Sophia committed
      }
„Sophia's avatar
„Sophia committed
      showLoggedInStatus(data.user);
„Sophia's avatar
„Sophia committed
      userDataInProfile(data.user);
„Sophia's avatar
„Sophia committed
      reviewDataInProfile(data.user);
„Sophia's avatar
„Sophia committed
    } else {
      console.warn(`Unhandled response code (${response.status}).`)
    }
  });

„Sophia's avatar
„Sophia committed

Victoria Badeke's avatar
Victoria Badeke committed
  //Logout durch POST-Anfrage an http://localhost:8080/logout, um den Benutzer abzumelden.
„Sophia's avatar
„Sophia committed
  document.getElementById("logout-form")!.addEventListener("submit", async (event: SubmitEvent): Promise<void> => {
    event.preventDefault();
    await fetch('http://localhost:8080/logout', {
        method: "POST",
      }
    );
„Sophia's avatar
„Sophia committed
    /*showLoggedOutStatus()*/
„Sophia's avatar
„Sophia committed
  });
„Sophia's avatar
„Sophia committed

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

  })



„Sophia's avatar
„Sophia committed
});
„Sophia's avatar
„Sophia committed



Sarah Gloger's avatar
Sarah Gloger committed
/**
 * Checks if user might be logged
 */
Victoria Badeke's avatar
Victoria Badeke committed
//schaut ob der User eingeloggt ist, wenn ja schickt er die Daten vom User zurück
Sarah Gloger's avatar
Sarah Gloger committed
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);
„Sophia's avatar
„Sophia committed
    userDataInProfile(data.user);
„Sophia's avatar
„Sophia committed
    reviewDataInProfile(data.user);
Sarah Gloger's avatar
Sarah Gloger committed
  }
}
„Sophia's avatar
„Sophia committed

/**
 * 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);
}

„Sophia's avatar
„Sophia committed
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;
}
„Sophia's avatar
„Sophia committed
/**
 * Displays the logged in username
 */
function showLoggedInStatus(user: User): void {
„Sophia's avatar
„Sophia committed
  const firstName: HTMLElement = document.getElementById('current-user-firstName')!;
Victoria Badeke's avatar
Victoria Badeke committed
  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.
„Sophia's avatar
„Sophia committed

„Sophia's avatar
„Sophia committed
  const contentArea: HTMLElement = document.getElementById('user-list-container')!;
  contentArea.classList.remove("d-none"); // show content area

„Sophia's avatar
„Sophia committed
  readUsers();
}

„Sophia's avatar
„Sophia committed
//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;
}
Sarah Gloger's avatar
Sarah Gloger committed

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

}
„Sophia's avatar
„Sophia committed
/**
„Sophia's avatar
„Sophia committed
function showLoggedOutStatus(): void {
Sarah Gloger's avatar
Sarah Gloger committed
  const eMail: HTMLElement = document.getElementById('current-user-email')!;
  eMail.innerHTML = ``;
„Sophia's avatar
„Sophia committed

  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();
„Sophia's avatar
„Sophia committed
}
*/
Sarah Gloger's avatar
Sarah Gloger committed
/// für ADMIN wieder relevant
„Sophia's avatar
„Sophia committed
/**
 * 1) Clears the user table.
 * 2) Adds all users to the table.
 */
„Sophia's avatar
„Sophia committed
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);

  }
}
Victoria Badeke's avatar
Victoria Badeke committed

„Sophia's avatar
„Sophia committed
//**
„Sophia's avatar
„Sophia committed
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
„Sophia's avatar
„Sophia committed
    let tdId: HTMLTableCellElement = document.createElement("td");
    tdId.textContent = user.user_id.toString();
„Sophia's avatar
„Sophia committed

    // Given name cell
„Sophia's avatar
„Sophia committed
    let tdFirstName: HTMLTableCellElement = document.createElement("td");
    tdFirstName.textContent = user.firstName;
„Sophia's avatar
„Sophia committed

    // Family name cell
„Sophia's avatar
„Sophia committed
    let tdLastName: HTMLTableCellElement = document.createElement("td");
    tdLastName.textContent = user.lastName;

    // email cell
„Sophia's avatar
„Sophia committed
    let tdEMail: HTMLTableCellElement = document.createElement("td");
    tdEMail.textContent = user.eMail;
„Sophia's avatar
„Sophia committed

„Sophia's avatar
„Sophia committed
    // address cell
„Sophia's avatar
„Sophia committed
    let tdAdress: HTMLTableCellElement = document.createElement("td");
    tdAdress.textContent = user.adress;
„Sophia's avatar
„Sophia committed

„Sophia's avatar
„Sophia committed
    // role cell
    let tdRole: HTMLTableCellElement = document.createElement("td");
    tdRole.textContent = user.role;
„Sophia's avatar
„Sophia committed

    // Buttons cell
    let tdButtons: HTMLTableCellElement = document.createElement("td");

    // Delete button
    let deleteButton: HTMLButtonElement = document.createElement("button");
„Sophia's avatar
„Sophia committed
    deleteButton.className = "btn delete-admin";
„Sophia's avatar
„Sophia committed
    deleteButton.addEventListener("click", async () => {
„Sophia's avatar
„Sophia committed
      const res: Response = await fetch('/user/' + user.user_id, {
„Sophia's avatar
„Sophia committed
        method: 'DELETE'
      });
      const data: any = await res.json();
      addMessage(data.message);
      readUsers();
    });

    // Delete button icon
    let deleteButtonIcon: HTMLElement = document.createElement("i");
„Sophia's avatar
„Sophia committed
    deleteButtonIcon.className = "fa-solid fa-trash-can deleteButton";
„Sophia's avatar
„Sophia committed
    deleteButton.append(deleteButtonIcon);

„Sophia's avatar
„Sophia committed
    // Edit button
„Sophia's avatar
„Sophia committed
    let editAdminButton: HTMLButtonElement = document.createElement("button");
„Sophia's avatar
„Sophia committed
    editAdminButton.className = "editButton";
„Sophia's avatar
„Sophia committed
    editAdminButton.addEventListener("click", () => {
      showEditModal(user);
„Sophia's avatar
„Sophia committed
    });

    // Edit button icon
    let editButtonIcon: HTMLElement = document.createElement("i");
    editButtonIcon.className = "fa-solid fa-pen updateButton";
„Sophia's avatar
„Sophia committed
    editAdminButton.append(editButtonIcon);
„Sophia's avatar
„Sophia committed

    // Adds the buttons to the button cell
„Sophia's avatar
„Sophia committed
    tdButtons.append(deleteButton, editAdminButton);
„Sophia's avatar
„Sophia committed

„Sophia's avatar
„Sophia committed
    // Add the cells to the table row
„Sophia's avatar
„Sophia committed
    tr.append(tdId, tdFirstName, tdLastName, tdEMail,tdAdress, tdRole, tdButtons);
„Sophia's avatar
„Sophia committed

    // 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.
 */
„Sophia's avatar
„Sophia committed
function showEditModal(user: User): void {
„Sophia's avatar
„Sophia committed
  let idEl: HTMLInputElement = document.getElementById("edit-user-admin-id") as HTMLInputElement;
„Sophia's avatar
„Sophia committed
  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;
„Sophia's avatar
„Sophia committed
  let roleEl: HTMLInputElement = document.getElementById("edit-user-admin-role") as HTMLInputElement;
„Sophia's avatar
„Sophia committed

  // 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.
„Sophia's avatar
„Sophia committed
  modalAdmin.show();
„Sophia's avatar
„Sophia committed
}
„Sophia's avatar
„Sophia committed


/**
 * 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);
}