From 1d12d8f244a71f13dbe0ee0d3bdd3617cf2449b0 Mon Sep 17 00:00:00 2001
From: schrom01 <schrom01@students.zhaw.ch>
Date: Thu, 9 Feb 2023 21:23:22 +0100
Subject: [PATCH] Refactoring and functionality with percent and counter

---
 bootstrap.css => css/bootstrap.css |   0
 index.html                         | 190 +----------------------------
 js/functions.js                    | 187 ++++++++++++++++++++++++++++
 3 files changed, 190 insertions(+), 187 deletions(-)
 rename bootstrap.css => css/bootstrap.css (100%)
 create mode 100644 js/functions.js
diff --git a/bootstrap.css b/css/bootstrap.css
similarity index 100%
rename from bootstrap.css
rename to css/bootstrap.css
diff --git a/index.html b/index.html
index de2b857..f3a521c 100644
--- a/index.html
+++ b/index.html
@@ -1,32 +1,14 @@
 <html>
     <head>
         <meta charset="UTF-8">
-        <link rel="stylesheet" href="bootstrap.css">
-
-        <style>
-            button {
-                margin: 5px
-            }
-            td, th {
-                text-align: center;
-            }
-            
-            .active {
-                background-color: green;
-                color: white;
-            }
-        </style>
-
-        <script>
-
-        </script>
+        <link rel="stylesheet" href="css/bootstrap.css">
 
     </head>
     <body>
         <section>
             <div class="container">
                 <h1 style="margin-left: 10px;">Aktuelles Thema</h1>
-                <table border="1">
+                <table class="table-bordered">
                     <tr>
                         <td colspan="2">
                             <input class="form-control" type="text" id="topicInput" placeholder="Thema hier eingeben">
@@ -118,11 +100,9 @@
 
             </div>
         </section>
-        
-
-       
 
 
+        <script src="js/functions.js"></script>
         <script>
             closedTopics = JSON.parse(localStorage.getItem("closedTopics"))
             if(!closedTopics) {
@@ -133,170 +113,6 @@
                 reset()
             }
 
-            function reset() {
-                watches = [{"actions": []}, {"actions": []}, {"actions": []}]
-                saveWatchesToLocalStorage()
-            }
-
-            function resetButton() {
-                if(confirm("Soll die Zähler zurückgesetzt werden?")){
-                    reset()
-                }
-            }
-
-            function buttonDeleteAllClosedTopics() {
-                if(confirm("Sollen alle abgeschlossenen Themen gelöscht werden?")) {
-                    closedTopics = []
-                    saveClosedTopicsToLocalStorage()
-                    refreshClosedTopics()
-                }
-            }
-
-            function buttonDeleteClosedTopic(topicIndex) {
-                if(confirm('Soll das Thema "' + closedTopics[topicIndex]["name"] + '" gelöscht werden?')) {
-                    deleteTopic(topicIndex)
-                }
-            }
-
-            function closeTopic() {
-                let defaultname = "Thema"
-                let name = document.getElementById("topicInput").value
-                let nameLessCounter = 1
-                while(!name){
-                    let foundName = false
-                    closedTopics.forEach(topic => {
-                        if(topic.name === defaultname + nameLessCounter){
-                            foundName = true
-                        }
-                    });
-                    if(foundName) {
-                        nameLessCounter++
-                    } else {
-                        name = defaultname + nameLessCounter
-                    }
-                }
-
-                closedTopics.push({"name": name, "watches": watches})
-                stop()
-                reset()
-                document.getElementById("topicInput").value = ""
-                saveActualTopicToLocalStorage()
-                saveClosedTopicsToLocalStorage()
-                refreshClosedTopics()
-            }
-
-            function deleteTopic(topicIndex) {
-                closedTopics = closedTopics.slice(0, topicIndex).concat(closedTopics.slice(topicIndex+1))
-                saveClosedTopicsToLocalStorage()
-                refreshClosedTopics()
-            }
-
-            function reopenTopic(topicIndex) {
-                if(watches[0]["actions"]["length"] > 0 || watches[1]["actions"]["length"] > 0 ||watches[2]["actions"]["length"] > 0 || document.getElementById("topicInput").value != "") {
-                    closeTopic()
-                }
-                watches = closedTopics[topicIndex]["watches"]
-                document.getElementById("topicInput").value = closedTopics[topicIndex]["name"]
-                deleteTopic(topicIndex)
-                saveWatchesToLocalStorage()
-                saveActualTopicToLocalStorage()
-            }
-            
-            function start(watchIndex) {
-                stop()
-                watches[watchIndex].actions.push({"type": "start", "time": new Date().getTime()})
-                saveWatchesToLocalStorage()
-            }
-
-            function stop() {
-                watches.forEach(watch => {
-                    if(watch["actions"]["length"] > 0) {
-                        if(watch["actions"]["length"] % 2 == 1){
-                            watch["actions"].push({"type": "stop", "time": new Date().getTime()})
-                        }
-                    }
-                });
-                saveWatchesToLocalStorage()
-            }
-
-            function sumForWatch(watch) {
-                let summe = 0
-                let i = 0
-                while( i < watch["actions"]["length"]){
-                    let start = watch.actions[i].time
-                    let stop = new Date().getTime()
-                    if(i+1 < watch["actions"]["length"]) {
-                        stop = watch["actions"][i+1].time
-                    }
-                    summe += (stop - start)
-                    i += 2
-                }
-                return summe
-            }
-
-            function timeToISO(time){
-                return new Date(time).toISOString().slice(11, 19)
-            }
-
-            function refreshWatch(watchIndex) {
-                let cell = document.getElementById("time-" + watchIndex)
-                cell.textContent = timeToISO(sumForWatch(watches[watchIndex]))
-                if(watches[watchIndex]["actions"].slice(-1)[0]["type"] == "start"){
-                    cell.classList.add("active")
-                } else {
-                    cell.classList.remove("active")
-                }
-            }
-
-            function refreshClosedTopics() {
-                let table = document.getElementById("closedTopicsTable")
-                table.innerHTML = ""
-                for(let i = closedTopics.length - 1; i >= 0; i--) {
-                    let topic = closedTopics[i]
-                    let topicColumn = elt("td")
-                    topicColumn.textContent = topic.name
-                    let time0Column = elt("td")
-                    time0Column.textContent = timeToISO(sumForWatch(topic.watches[0]))
-                    let time1Column = elt("td")
-                    time1Column.textContent = timeToISO(sumForWatch(topic.watches[1]))
-                    let time2Column = elt("td")
-                    time2Column.textContent = timeToISO(sumForWatch(topic.watches[2]))
-                    let reopenButton = elt("button", {"onclick": "reopenTopic(" + i + ")"})
-                    reopenButton.textContent = "wieder öffnen"
-                    let reopenButtonColumn = elt("td", {}, reopenButton)
-                    let deleteButton = elt("button", {"onclick": "buttonDeleteClosedTopic(" + i + ")"})
-                    deleteButton.textContent = "löschen"
-                    let deleteButtonColumn = elt("td", {}, deleteButton)
-                    table.appendChild(elt("tr", {}, topicColumn, time0Column, time1Column, time2Column, reopenButtonColumn, deleteButtonColumn))
-                }
-            }
-
-            function saveWatchesToLocalStorage() {
-                localStorage.setItem("watches", JSON.stringify(watches))
-            }
-
-            function saveActualTopicToLocalStorage() {
-                localStorage.setItem("actualTopic", document.getElementById("topicInput").value)
-            }
-
-            function saveClosedTopicsToLocalStorage() {
-                localStorage.setItem("closedTopics", JSON.stringify(closedTopics))
-            }
-
-            //  Helper function for DOM manipulation
-            // 
-            function elt (type, attrs, ...children) {
-                let node = document.createElement(type)
-                for (a in attrs) {
-                    node.setAttribute(a, attrs[a])
-                }
-                for (let child of children) {
-                    if (typeof child != "string") node.appendChild(child)
-                    else node.appendChild(document.createTextNode(child))
-                }
-                return node
-            }
-
             document.getElementById("topicInput").value = localStorage.getItem("actualTopic")
             document.getElementById("topicInput").addEventListener('keyup', saveActualTopicToLocalStorage);
             refreshClosedTopics()
diff --git a/js/functions.js b/js/functions.js
new file mode 100644
index 0000000..7ebc72a
--- /dev/null
+++ b/js/functions.js
@@ -0,0 +1,187 @@
+function reset() {
+    watches = [{"actions": []}, {"actions": []}, {"actions": []}]
+    saveWatchesToLocalStorage()
+}
+
+function resetButton() {
+    if(confirm("Soll die Zähler zurückgesetzt werden?")){
+        reset()
+    }
+}
+
+function buttonDeleteAllClosedTopics() {
+    if(confirm("Sollen alle abgeschlossenen Themen gelöscht werden?")) {
+        closedTopics = []
+        saveClosedTopicsToLocalStorage()
+        refreshClosedTopics()
+    }
+}
+
+function buttonDeleteClosedTopic(topicIndex) {
+    if(confirm('Soll das Thema "' + closedTopics[topicIndex]["name"] + '" gelöscht werden?')) {
+        deleteTopic(topicIndex)
+    }
+}
+
+function closeTopic() {
+    let defaultname = "Thema"
+    let name = document.getElementById("topicInput").value
+    let nameLessCounter = 1
+    while(!name){
+        let foundName = false
+        closedTopics.forEach(topic => {
+            if(topic.name === defaultname + nameLessCounter){
+                foundName = true
+            }
+        });
+        if(foundName) {
+            nameLessCounter++
+        } else {
+            name = defaultname + nameLessCounter
+        }
+    }
+
+    closedTopics.push({"name": name, "watches": watches})
+    stop()
+    reset()
+    document.getElementById("topicInput").value = ""
+    saveActualTopicToLocalStorage()
+    saveClosedTopicsToLocalStorage()
+    refreshClosedTopics()
+}
+
+function deleteTopic(topicIndex) {
+    closedTopics = closedTopics.slice(0, topicIndex).concat(closedTopics.slice(topicIndex+1))
+    saveClosedTopicsToLocalStorage()
+    refreshClosedTopics()
+}
+
+function reopenTopic(topicIndex) {
+    if(watches[0]["actions"]["length"] > 0 || watches[1]["actions"]["length"] > 0 ||watches[2]["actions"]["length"] > 0 || document.getElementById("topicInput").value != "") {
+        closeTopic()
+    }
+    watches = closedTopics[topicIndex]["watches"]
+    document.getElementById("topicInput").value = closedTopics[topicIndex]["name"]
+    deleteTopic(topicIndex)
+    saveWatchesToLocalStorage()
+    saveActualTopicToLocalStorage()
+}
+
+function start(watchIndex) {
+    stop()
+    watches[watchIndex].actions.push({"type": "start", "time": new Date().getTime()})
+    saveWatchesToLocalStorage()
+}
+
+function stop() {
+    watches.forEach(watch => {
+        if(watch["actions"]["length"] > 0) {
+            if(watch["actions"]["length"] % 2 == 1){
+                watch["actions"].push({"type": "stop", "time": new Date().getTime()})
+            }
+        }
+    });
+    saveWatchesToLocalStorage()
+}
+
+function calcPercForWatch(watchIndex, topic) {
+    let sumAll = sumAllwatches(topic)
+    if(sumAll == 0) {
+        return 0
+    }
+    return Math.round(sumForWatch(topic.watches[watchIndex]) / sumAllwatches(topic) * 100)
+}
+function sumForWatch(watch) {
+    let summe = 0
+    let i = 0
+    while( i < watch["actions"]["length"]){
+        let start = watch.actions[i].time
+        let stop = new Date().getTime()
+        if(i+1 < watch["actions"]["length"]) {
+            stop = watch["actions"][i+1].time
+        }
+        summe += (stop - start)
+        i += 2
+    }
+    return summe
+}
+
+function sumAllwatches(topic) {
+    return sumForWatch(topic.watches[0]) + sumForWatch(topic.watches[1]) + sumForWatch(topic.watches[2])
+}
+
+function timeToISO(time){
+    return new Date(time).toISOString().slice(11, 19)
+}
+
+function refreshWatch(watchIndex) {
+    let cell = document.getElementById("time-" + watchIndex)
+    cell.textContent = timeToISO(sumForWatch(watches[watchIndex]))
+    if(watches[watchIndex]["actions"].length != 0 && watches[watchIndex]["actions"].slice(-1)[0]["type"] == "start"){
+        cell.classList.add("active")
+    } else {
+        cell.classList.remove("active")
+    }
+}
+
+function refreshClosedTopics() {
+    let table = document.getElementById("closedTopicsTable")
+    table.innerHTML = ""
+    for(let i = closedTopics.length - 1; i >= 0; i--) {
+        let topic = closedTopics[i]
+        let topicColumn = elt("td")
+        topicColumn.textContent = topic.name
+
+        let time0 = elt("div")
+        time0.textContent = timeToISO(sumForWatch(topic.watches[0])) + " (" + calcPercForWatch(0, topic) + "%)"
+        let count0 = elt("div")
+        count0.textContent = ((topic.watches[0]["actions"].length) / 2)  + " Wortmeldungen"
+        let time0Column = elt("td", {}, time0, count0)
+
+        let time1 = elt("div")
+        time1.textContent = timeToISO(sumForWatch(topic.watches[1])) + " (" + calcPercForWatch(1, topic) + "%)"
+        let count1 = elt("div")
+        count1.textContent = ((topic.watches[1]["actions"].length) / 2)  + " Wortmeldungen"
+        let time1Column = elt("td", {}, time1, count1)
+
+        let time2 = elt("div")
+        time2.textContent = timeToISO(sumForWatch(topic.watches[2])) + " (" + calcPercForWatch(2, topic) + "%)"
+        let count2 = elt("div")
+        count2.textContent = ((topic.watches[2]["actions"].length) / 2)  + " Wortmeldungen"
+        let time2Column = elt("td", {}, time2, count2)
+
+        let reopenButton = elt("button", {"onclick": "reopenTopic(" + i + ")"})
+        reopenButton.textContent = "wieder öffnen"
+        let reopenButtonColumn = elt("td", {}, reopenButton)
+        let deleteButton = elt("button", {"onclick": "buttonDeleteClosedTopic(" + i + ")"})
+        deleteButton.textContent = "löschen"
+        let deleteButtonColumn = elt("td", {}, deleteButton)
+        table.appendChild(elt("tr", {}, topicColumn, time0Column, time1Column, time2Column, reopenButtonColumn, deleteButtonColumn))
+    }
+}
+
+function saveWatchesToLocalStorage() {
+    localStorage.setItem("watches", JSON.stringify(watches))
+}
+
+function saveActualTopicToLocalStorage() {
+    localStorage.setItem("actualTopic", document.getElementById("topicInput").value)
+}
+
+function saveClosedTopicsToLocalStorage() {
+    localStorage.setItem("closedTopics", JSON.stringify(closedTopics))
+}
+
+//  Helper function for DOM manipulation
+//
+function elt (type, attrs, ...children) {
+    let node = document.createElement(type)
+    for (a in attrs) {
+        node.setAttribute(a, attrs[a])
+    }
+    for (let child of children) {
+        if (typeof child != "string") node.appendChild(child)
+        else node.appendChild(document.createTextNode(child))
+    }
+    return node
+}
\ No newline at end of file
