Update of exercises

2023-11-21 09:57:52 +01:00 · 2023-11-21 09:57:52 +01:00 · f61f40071c
parent 8c02bb4bc8
commit f61f40071c
4 changed files with 192 additions and 8 deletions
--- a/Assignment_004/readme.md
+++ b/Assignment_004/readme.md
@ -1,6 +1,6 @@
 # Interaktive Filmdatenbank

-📆 **Fällig: 19.11.2023** 📆
+📆 **Fällig: 19.11.2023** 📆 [Musterlösung](solution/)

 Erstellen Sie eine einfache Filmdatenbank, in die man Filme per Formular hinzufügen kann.

@ -32,7 +32,9 @@ Stylen Sie die Tabelle und die Seite mit CSS so, dass die Tabelle entsprechende

 ## Teil 2: JSON-Format

-Überlegen Sie sich ein JSON-Format für die Speicherung von Filmen für die oben genannte Tabelle. Erzeugen Sie ein Array Ihrer Lieblingsfilme mit dem entsprechenden Format. Wenn Sie Ihre Lieblingsfilme nicht preisgeben wollen, verwenden Sie folgende Filme als Beispiel:
+Überlegen Sie sich ein JSON-Format (JavaScript-Objekt) für die Speicherung eines einzelnen Films. Die notwendigen Attribute finden Sie in den Beispielen der oben genannte Tabelle. Erzeugen Sie dann ein Array von diesen Objekten mit den Daten Ihrer Lieblingsfilme.
+
+Wenn Sie Ihre Lieblingsfilme nicht preisgeben wollen, verwenden Sie folgende Filme als Beispiel:

 | Titel                | Regisseur         | Jahr | Spielzeit | FSK |
 |----------------------|-------------------|------|-----------|-----|
--- a/Assignment_004/solution/index.html
+++ b/Assignment_004/solution/index.html
@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+  <title>Filmdatenbank</title>
+
+  <style>
+    table, td, tr, th {
+      border: 1px solid;
+      border-color: #d3d3d3;
+      border-collapse: collapse;
+    }
+  </style>
+  <script src="js/filmdatenbank.js" defer="defer"></script>
+
+</head>
+<body>
+  <h1>Filmdatenbank</h1>
+  <form>
+  <table id="filmtable">
+    <tr>
+      <th data-type="string" data-field="titel">Titel</a></th>
+      <th data-type="string" data-field="regisseur">Regisseur</th>
+      <th data-type="int" data-field="jahr">Jahr</th>
+      <th data-type="int" data-field="spielzeit">Spielzeit</th>
+      <th data-type="int" data-field="fsk">FSK</th>
+      <th>&nbsp;</th>
+    </tr>
+    <tr id="eingabe">
+      <td>
+        <input type="text" id="title" required="required">
+      </td>
+      <td>
+        <input type="text" id="regisseur" required="required">
+      </td>
+      <td>
+        <input type="text" size="4" id="jahr" required="required" pattern="19[0-9][0-9]|20[012][0-9]" title="1900-2022">
+      </td>
+      <td>
+        <input type="text" size="4" id="spielzeit" required="required" pattern="[1-9][0-9]+">
+      </td>
+      <td>
+        <input type="text" size="2" id="fsk" required="required" pattern="0|6|12|16|18">
+      </td>
+      <td>
+        &nbsp;
+      </td>
+    </tr>
+  </table>
+  </form>
+</body>
+</html>
--- a/Assignment_004/solution/js/filmdatenbank.js
+++ b/Assignment_004/solution/js/filmdatenbank.js
@ -0,0 +1,130 @@
+// 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();
+})();
--- a/readme.md
+++ b/readme.md
@ -10,9 +10,9 @@ Die Kursmaterialien finden Sie, wie immer, im [Moodle](https://moodle.hs-mannhei

 Hier finden Sie die wöchentlichen Assignments für die Vorlesung Webbasierte Systeme (WEB). Die Assignments sind unten, zusammen mit dem Fälligkeitsdatum, aufgelistet.

-| #  | Ausgabe    | Thema                                                     | Fällig am 📆   |
-|----|------------|-----------------------------------------------------------|----------------|
-| 1. | 09.10.2023 | [Fanseite ohne Styling](Assignment_001/readme.md)         | **15.10.2023** |
-| 2. | 16.10.2023 | [Styling der Fanseite mit CSS](Assignment_002/readme.md)  | **22.10.2023** |
-| 3. | 23.10.2023 | [Fanseite responsive machen](Assignment_003/readme.md)    | **05.11.2023** |
-| 4. | 06.11.2023 | [Interaktive Filmdatenbank](Assignment_004/readme.md)     | **19.11.2023** |
+| #  | Ausgabe    | Thema                                                     | Fällig am 📆   | Musterlösung  |
+|----|------------|-----------------------------------------------------------|----------------|----------------|
+| 1. | 09.10.2023 | [Fanseite ohne Styling](Assignment_001/readme.md)         | **15.10.2023** |   |
+| 2. | 16.10.2023 | [Styling der Fanseite mit CSS](Assignment_002/readme.md)  | **22.10.2023** |   |
+| 3. | 23.10.2023 | [Fanseite responsive machen](Assignment_003/readme.md)    | **05.11.2023** |   |
+| 4. | 06.11.2023 | [Interaktive Filmdatenbank](Assignment_004/readme.md)     | **19.11.2023** |  [✅](Assignment_004/solution/readme.md) |