express-backend-uni/frontend/js/overview.js

import { fetchData, sseUrl } from "./api.js";

let backendEntries = [];
let entries = [];

// Verbindung zum SSE-Endpunkt herstellen
const eventSource = new EventSource(sseUrl);

// Auf Update reagieren
eventSource.addEventListener('update', () => {
    console.log("refreshing...")
    start();
});

function start() {
    fetchData(`transactions`).then((data) => {
        backendEntries = [...data];
        entries = [...backendEntries];
    
        if (entries.length > 0) {
            document.getElementById("table-container").style.display = "flex";
    
            createTableBody(entries);
        }
            
        if (entries.length < 10)
            document.getElementById("pagination-div").style.display = "none";
    });
}

/**
 * Generiert den Tabelleninhalt
 * Anhand der angaben aus Seitenzahl und Zeilenangaben werden entsprechend viele Zeilen erstellt
 * @param {array} data 
 */
function createTableBody(data) {
    const rootElement = document.querySelector(".table tbody");
    rootElement.innerHTML = null;

    const bookingDate = document.getElementById("bookingDate");
    bookingDate.onclick = () => sortTable("postingDate", bookingDate.innerHTML, bookingDate);
    const valuta = document.getElementById("valuta");
    valuta.onclick = () => sortTable("valueDate", valuta.innerHTML, valuta);

    const pageInfo = document.getElementById("page-info");
    const arrayEntriesStart = (pageInfo.innerHTML-1) * getBookingsPerPage();
    const arrayEntriesEnd = (pageInfo.innerHTML) * getBookingsPerPage();
    data = data.slice(arrayEntriesStart, arrayEntriesEnd);

    data.forEach(element => {
        rootElement.append(createEntryTableRow(element));
    });
}

/**
 * Erzeugt die einzelne Tabellenzeile
 * @param {object} entry 
 * @returns DOMElement 
 */
function createEntryTableRow(entry) {
    const tr = document.createElement("tr");
    tr.setAttribute("class", "entry-table-tr");

    const bookingDate = document.createElement("td");
    bookingDate.setAttribute("class", "entry-table-td");
    bookingDate.innerHTML = new Date(entry.postingDate).toLocaleDateString("de-DE");
    tr.append(bookingDate);

    const valuta = document.createElement("td");
    valuta.setAttribute("class", "entry-table-td");
    valuta.innerHTML = new Date(entry.valueDate).toLocaleDateString("de-DE");
    tr.append(valuta);

    const title = document.createElement("td");
    title.setAttribute("class", "entry-table-td");
    title.innerHTML = entry.title;
    tr.append(title);

    return tr;
}

/**
 * Eventhandler für das sortieren der Tabellen Datumsspalten
 * Managed die Pfeile zur Sortierrichtung und sortiert das entries array
 * @param {string} column 
 * @param {string} columnName 
 * @param {DOMElement} docElement 
 */
function sortTable(column, columnName, docElement) {
    document.querySelectorAll(".clickable").forEach(element => {
        if(element.innerHTML.slice(-1) === "↓" || element.innerHTML.slice(-1) === "↑")
            element.innerHTML = element.innerHTML.slice(0, -1);
    });

    if (columnName.slice(-1) === "↓") { // ASC
        docElement.innerHTML = `${columnName.slice(0, columnName.length - 1)}↑`;
        entries = entries.sort((a, b) => (a[column] > b[column]) ? 1 : ((b[column] > a[column]) ? -1 : 0));
    } else if (columnName.slice(-1) === "↑") { // default
        docElement.innerHTML = `${columnName.slice(0, columnName.length - 1)}`;
        entries = backendEntries;
    } else { // DESC
        docElement.innerHTML = `${columnName} ↓`;
        entries = entries.sort((a, b) => (a[column] < b[column]) ? 1 : ((b[column] < a[column]) ? -1 : 0));
    }

    createTableBody(entries);
}

// Fügt den Eventhandler für die Filter Eingabefelder hinzu
document.getElementsByName("dateFilter").forEach(element => element.addEventListener("change", filterAll));
document.getElementsByName("textFilter").forEach(element => element.addEventListener("keyup", filterAll));

// Eventhandler um die Datumsfelder zurückzusetzen
document.getElementById("resetDates").addEventListener("click", () => {
    document.getElementById("beginDate").value = "";
    document.getElementById("endDate").value = "";
    filterAll();
});

/**
 * Filtert die Daten aus dem Backend nach den Filterfeldern
 */
function filterAll() {
    let filteredEntries = backendEntries;
    filteredEntries = filterDates(filteredEntries);
    filteredEntries = filterText(filteredEntries);

    createTableBody(filteredEntries);
}

/**
 * Filtert die Daten anhand der Datumsfelder
 * @param {array} array 
 * @returns array
 */
function filterDates(array) {
    const begin = document.getElementById("beginDate").value;
    const end = document.getElementById("endDate").value;

    if (begin !== "" && end !== "") {
        return array.filter(element => (new Date(element.postingDate) >= new Date(begin) && new Date(element.valueDate) >= new Date(begin)) && (new Date(element.postingDate) <= new Date(end) && new Date(element.valueDate) <= new Date(end)));
    } else if (begin !== "") {
        return array.filter(element => new Date(element.postingDate) >= new Date(begin) && new Date(element.valueDate) >= new Date(begin));
    } else if (end !== "") {
        return array.filter(element => new Date(element.postingDate) <= new Date(end) && new Date(element.valueDate) <= new Date(end));
    }

    return array;
}

/**
 * Filtert die Daten anhand der des Freitextfeldes
 * @param {array} array 
 * @returns array
 */
function filterText(array) {
    const searchString = document.getElementById("searchText").value;
    if (searchString !== "") {
        return array.filter(element => element.title.toLowerCase().includes(searchString.toLowerCase()));
    }

    return array;
}

/**
 * Eventhandler für Pagination "Seite Vorwärts Button"
 */
document.getElementById("forward-page").addEventListener("click", () => {
    const pageInfo = document.getElementById("page-info");
    let pageNumber = ++pageInfo.innerHTML;
    const maxPage = Math.ceil(entries.length / getBookingsPerPage());

    if(pageNumber > maxPage)
        pageNumber = 1;

    pageInfo.innerHTML = pageNumber;
    createTableBody(entries);
});

/**
 * Eventhandler für Pagination "Seite Rückwärts Button"
 */
document.getElementById("backward-page").addEventListener("click", () => {
    const pageInfo = document.getElementById("page-info");
    let pageNumber = --pageInfo.innerHTML;
    const maxPage = Math.ceil(entries.length / getBookingsPerPage());

    if(pageNumber < 1)
        pageNumber = maxPage;

    pageInfo.innerHTML = pageNumber;
    createTableBody(entries);
});

/**
 * Eventhandler für Selectbox Änderung
 */
document.getElementById("table-range").addEventListener("change", () => {
    document.getElementById("page-info").innerHTML = 1; //reset page
    createTableBody(entries);
});

/**
 * Liefert die Anzahl der Einträge aus der Selectbox zurück bzw. die Array länge, bei Auswahl von "Alle"
 * @returns integer
 */
function getBookingsPerPage() {
    if(document.getElementById("table-range").value === "Alle")
        return entries.length;

    return Number.parseInt(document.getElementById("table-range").value);
}

start();