131 lines
3.4 KiB
JavaScript
131 lines
3.4 KiB
JavaScript
// 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();
|
|
})();
|