before week 9

WebEngineering-FHNW · Apr 25, 2021 · bcf9631 · bcf9631
1 parent caa168a
commit bcf9631
Show file tree

Hide file tree

Showing 35 changed files with 1,896 additions and 0 deletions.
diff --git a/week9/Milestone_0/AllTests.html b/week9/Milestone_0/AllTests.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title> All Tests </title>
+    <script src="util/test.js"></script>
+</head>
+<body>
+
+<h1>All Tests in HtmlJs</h1>
+
+<pre>
+
+<script>
+
+    const testNames = [
+        'todo'
+    ];
+
+    testNames.forEach( testName => {
+
+
+        document.write(`<script src="${testName}/${testName}.js"></s`+'cript>'); // dirty trick of the day
+        document.write(`<script src="${testName}/${testName}Test.js"></s`+'cript>');
+
+
+    });
+
+    document.writeln("\nCheck possible 'compile' errors in the console .")
+
+</script>
+
+</pre>
+
+</body>
+</html>
diff --git a/week9/Milestone_0/todo/View.html b/week9/Milestone_0/todo/View.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Todos</title>
+    <style>
+        body {
+            margin-top:     2em;
+            font-family:    "Helvetica Neue", sans-serif;
+        }
+        main {
+            max-width:  30em;
+            margin:     auto;
+            padding:    2em;
+            box-shadow: 0 4px  8px 0 rgba(0, 0, 0, 0.2),
+                        0 6px 20px 0 rgba(0, 0, 0, 0.19);
+        }
+        h1 {
+            font-family: "Comic Sans MS", cursive, sans-serif;
+            text-align: center;
+        }
+        .holder {
+            margin: 0 3em 0 3em;
+        }
+        input[type=text] {
+            font-family:    "Comic Sans MS", cursive, sans-serif;
+            font-size:      1.1em;
+            color:          darkblue;
+            border-width:   0 0 1px 0;
+        }
+        input[type=text]:focus {
+            border-color:   orange;
+            outline:        transparent none 0;
+        }
+        #todoContainer {
+            display:        grid;
+            grid-template-columns: auto auto;
+            margin-bottom:  0.5em ;
+        }
+    </style>
+</head>
+<body>
+
+<main>
+    <h1>Todo List</h1>
+
+    <div class="holder">
+        <button autofocus onclick="addTodo()"> + </button>
+
+        <div class="table" id="todoContainer"></div>
+
+        <div>Tasks: <span id="numberOfTasks">0</span></div>
+        <div>Open:  <span id="openTasks"    >0</span></div>
+    </div>
+</main>
+
+
+<script src="todo.js"></script>
+<script>
+    startTodo(
+        document.getElementById('todoContainer'),
+        document.getElementById('numberOfTasks'),
+        document.getElementById('openTasks'));
+    addTodo();
+</script>
+
+</body>
+
+</html>
diff --git a/week9/Milestone_0/todo/todo.js b/week9/Milestone_0/todo/todo.js
@@ -0,0 +1,31 @@
+
+let todoContainer = null;
+let numberOfTasks = null;
+let openTasks = null;
+
+function startTodo(newTodoContainer, newNumberOfTasks, newOpenTasks) {
+    todoContainer = newTodoContainer;
+    numberOfTasks = newNumberOfTasks;
+    openTasks     = newOpenTasks;
+}
+
+function addTodo() {
+
+    const inputElement = document.createElement('INPUT');
+    inputElement.setAttribute("TYPE","TEXT");
+    inputElement.setAttribute("SIZE","42");
+
+    const checkboxElement = document.createElement('INPUT');
+    checkboxElement.setAttribute("TYPE", "CHECKBOX");
+
+    checkboxElement.onclick = _ => {
+        openTasks.innerText = Number(openTasks.innerText) + (checkboxElement.checked ? -1 : 1);
+    };
+
+    todoContainer.appendChild(inputElement);
+    todoContainer.appendChild(checkboxElement);
+
+    numberOfTasks.innerText = Number(numberOfTasks.innerText) + 1;
+    openTasks.innerText     = Number(openTasks.innerText) + 1;
+
+}
diff --git a/week9/Milestone_0/todo/todoTest.js b/week9/Milestone_0/todo/todoTest.js
@@ -0,0 +1,45 @@
+// requires todo.js
+// requires /util/test.js
+
+test("todo-crud", assert => {
+
+    // setup
+    todoContainer = document.createElement("div");
+    numberOfTasks = document.createElement("span");
+    numberOfTasks.innerText = '0';
+    openTasks = document.createElement("span");
+    openTasks.innerText = '0';
+
+    startTodo(todoContainer, numberOfTasks, openTasks);
+
+    const elementsPerRow = 2;
+
+    assert.equals(todoContainer.children.length, 0*elementsPerRow);
+    assert.equals(numberOfTasks.innerText, '0');
+    assert.equals(openTasks.innerText, '0');
+
+    addTodo();
+
+    assert.equals(todoContainer.children.length, 1*elementsPerRow);
+    assert.equals(numberOfTasks.innerText, '1');
+    assert.equals(openTasks.innerText, '1');
+
+    addTodo();
+
+    assert.equals(todoContainer.children.length, 2*elementsPerRow);
+    assert.equals(numberOfTasks.innerText, '2');
+    assert.equals(openTasks.innerText, '2');
+
+    const firstCheckbox = todoContainer.querySelectorAll("input[type=checkbox]")[0];
+    assert.equals(firstCheckbox.checked, false);
+
+    firstCheckbox.click();
+
+    assert.equals(firstCheckbox.checked, true);
+
+    assert.equals(numberOfTasks.innerText, '2');
+    assert.equals(openTasks.innerText, '1');
+
+    // add a test for the deletion of a todo-item
+
+});
diff --git a/week9/Milestone_0/util/test.js b/week9/Milestone_0/util/test.js
@@ -0,0 +1,93 @@
+"use strict";
+
+/**
+ * Generic Types
+ * @typedef {*} a
+ */
+
+/**
+ * Constructor of an assert that is passed into the {@link test} function.
+ * @returns {{equals: (function({a},{a}):undefined), getOk: (function(): Array<boolean>)}}
+ * @constructor
+ */
+
+const Assert = () => {
+    /** @type {Array<boolean>} */
+    const ok = [];
+    /**
+     * A function that takes two arguments of the same type, checks them for equality and pushes the
+     * result onto {@link ok}. Side effect only, no return value.
+     * @param {a} actual
+     * @param {a} expected
+     */
+    const equals = (actual, expected) => {
+        const result = (actual === expected);
+        if (! result) {
+           console.error(`not equal! actual was '${actual}' but expected '${expected}'`);
+        }
+        ok.push(result);
+    };
+    return {
+        getOk: () => ok,
+        equals: equals,
+    }
+};
+
+
+/**
+ * providing a scope and name for a test callback that takes a value of type {@link Assert}
+ * and side-effects the assert to capture the test results.
+ * Then it creates the report for this assert.
+ * @param {string} origin, the name to be reported as the origin of the reported tests
+ * @param {function(Assert): *} callback
+ */
+const test = (origin, callback) => {
+    const assert = Assert();          //    das ok anlegen
+    callback(assert);                 //    das ok befüllen
+    report(origin, assert.getOk());   //    report mit name und ok aufrufen
+};
+
+
+/**
+ * report :: String, [Bool] -> DOM ()
+ * Report reports the list of boolean checks
+ * @param {string}      origin: where the reported tests come from
+ * @param { [boolean] } ok:     list of applied checks
+ */
+function report(origin, ok) {
+    const extend = 20;
+    if ( ok.every( elem => elem) ) {
+        document.writeln(" "+ padLeft(ok.length, 3) +" tests in " + padRight(origin, extend) + " ok.");
+        return;
+    }
+    let reportLine = "    Failing tests in " + padRight(origin, extend);
+    bar(reportLine.length);
+    document.writeln("|" + reportLine+ "|");
+    for (let i = 0; i < ok.length; i++) {
+        if( ! ok[i]) {
+            document.writeln("|    Test #"+ padLeft(i, 3) +" failed                     |");
+        }
+    }
+    bar(reportLine.length);
+}
+
+function bar(extend) {
+    document.writeln("+" + "-".repeat(extend) + "+");
+}
+
+// padRight :: String, Int -> String
+function padRight(str, extend) {
+    return "" + str + fill(str, extend);
+}
+
+function padLeft(str, extend) {
+    return "" + fill(str, extend) + str;
+}
+
+function fill(str, extend) {
+    const len = str.toString().length; // in case str is not a string
+    if (len > extend) {
+        return str;
+    }
+    return " ".repeat(extend - len);
+}
diff --git a/week9/Milestone_1/AllTests.html b/week9/Milestone_1/AllTests.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title> All Tests </title>
+    <script src="util/test.js"></script>
+</head>
+<body>
+
+<h1>All Tests in HtmlJs</h1>
+
+<pre>
+
+<script>
+
+    const testNames = [
+        'todo'
+    ];
+
+    testNames.forEach( testName => {
+
+
+        document.write(`<script src="${testName}/${testName}.js"></s`+'cript>'); // dirty trick of the day
+        document.write(`<script src="${testName}/${testName}Test.js"></s`+'cript>');
+
+
+    });
+
+    document.writeln("\nCheck possible 'compile' errors in the console .")
+
+</script>
+
+</pre>
+
+</body>
+</html>
diff --git a/week9/Milestone_1/todo/View.html b/week9/Milestone_1/todo/View.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Todos</title>
+    <link rel="stylesheet" href="../../todo.css">
+</head>
+<body>
+
+<main>
+    <h1>Todo List</h1>
+
+    <div class="holder">
+        <button autofocus onclick="addTodo()"> + </button>
+
+        <div class="table" id="todoContainer"></div>
+
+        <div>Tasks: <span id="numberOfTasks">0</span></div>
+        <div>Open:  <span id="openTasks"    >0</span></div>
+    </div>
+</main>
+
+
+<script src="todo.js"></script>
+<script>
+    startTodo(
+        document.getElementById('todoContainer'),
+        document.getElementById('numberOfTasks'),
+        document.getElementById('openTasks'));
+    addTodo();
+</script>
+
+</body>
+
+</html>