assignments/Assignment_004/solution/js/filmdatenbank.js

// Class for storing the movie
class Film {
    constructor(titel, regisseur, jahr, spielzeit, fsk) {
        this.titel = titel;
        this.regisseur = regisseur;
        this.jahr = jahr;
        this.spielzeit = spielzeit;
        this.fsk = fsk;
    }
}

(function() {

    let num = 1;

    let filme = [
        new Film("Pulp Fiction", "Quentin Tarantino", 1994, 154, 16),
        new Film("Inglourious Basterds", "Quentin Tarantino", 2009, 153, 16),
        new Film("Reservoir Dogs", "Quentin Tarantino", 1992, 99, 18),
        new Film("Blade Runner", "Ridley Scott", 1982, 117, 16)
    ];

    function extractFilm() {
        return new Film(
            document.querySelector("#title").value,
            document.querySelector("#regisseur").value,
            parseInt(document.querySelector("#jahr").value),
            parseInt(document.querySelector("#spielzeit").value),
            parseInt(document.querySelector("#fsk").value));
    }

    function createTD(contents) {
        let td = document.createElement("td");
        td.appendChild(document.createTextNode(contents));
        return td;
    }

    function deleteMovie(rowId) {
        let row = document.getElementById(rowId);
        row.parentNode.removeChild(row);
    }

    function createRow(id, film) {
        let row = document.createElement("tr");
        let button = document.createElement("button");
        button.appendChild(document.createTextNode("X"));

        button.onclick = () => deleteMovie(id);

        row.setAttribute("id", id);
        row.appendChild(createTD(film.titel));
        row.appendChild(createTD(film.regisseur));
        row.appendChild(createTD(film.jahr));
        row.appendChild(createTD(film.spielzeit));
        row.appendChild(createTD(film.fsk));
        row.appendChild(button);

        return row;
    }

    function appendFilm(film) {
        let table = document.querySelector("#filmtable > tbody");
        table.appendChild(createRow(num, film));
        num++;
    }

    function checkSubmit(event) {
        if (event.charCode === 13) {
        // Do not submit the form by pressing enter
        event.preventDefault();

        // Let the form check for missing fields
        let valid = document.querySelector('form').reportValidity();

        if (!valid) {
            return;
        }

        let film = extractFilm();

        filme.push(film);
        appendFilm(film);

        for (let e of document.querySelectorAll('input')) {
            e.value = "";
        }

        document.getElementById("title").focus();
        }
    }

    function clear() {
        for (num--; num > 0; num--) {
            deleteMovie(num);
        }

        num = 1;
    }

    function sort(event) {
        let column = event.target.getAttribute("data-field");
        let type = event.target.getAttribute("data-type");

        if (type == "string") {
            filme.sort((a, b) => a[column].localeCompare(b[column]));
        }
        else {
            filme.sort((a, b) => a[column] - b[column]);
        }
        clear();
        init();
    }


    function init() {
        for (let film of filme) {
            appendFilm(film);
        }

        for (let e of document.querySelectorAll('input')) {
            e.addEventListener('keypress', checkSubmit);
        }

        for (let e of document.querySelectorAll('th')) {
            e.addEventListener('click', sort);
        }
    }

    init();
})();