Refactoring and functionality with percent and counter
This commit is contained in:
schrom01
parent
d0d00ef217
commit
1d12d8f244
190
index.html
190
index.html
|
|
@ -1,32 +1,14 @@
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<link rel="stylesheet" href="bootstrap.css">
|
<link rel="stylesheet" href="css/bootstrap.css">
|
||||||
|
|
||||||
<style>
|
|
||||||
button {
|
|
||||||
margin: 5px
|
|
||||||
}
|
|
||||||
td, th {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.active {
|
|
||||||
background-color: green;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<section>
|
<section>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h1 style="margin-left: 10px;">Aktuelles Thema</h1>
|
<h1 style="margin-left: 10px;">Aktuelles Thema</h1>
|
||||||
<table border="1">
|
<table class="table-bordered">
|
||||||
<tr>
|
<tr>
|
||||||
<td colspan="2">
|
<td colspan="2">
|
||||||
<input class="form-control" type="text" id="topicInput" placeholder="Thema hier eingeben">
|
<input class="form-control" type="text" id="topicInput" placeholder="Thema hier eingeben">
|
||||||
|
|
@ -120,9 +102,7 @@
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="js/functions.js"></script>
|
||||||
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
closedTopics = JSON.parse(localStorage.getItem("closedTopics"))
|
closedTopics = JSON.parse(localStorage.getItem("closedTopics"))
|
||||||
if(!closedTopics) {
|
if(!closedTopics) {
|
||||||
|
|
@ -133,170 +113,6 @@
|
||||||
reset()
|
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").value = localStorage.getItem("actualTopic")
|
||||||
document.getElementById("topicInput").addEventListener('keyup', saveActualTopicToLocalStorage);
|
document.getElementById("topicInput").addEventListener('keyup', saveActualTopicToLocalStorage);
|
||||||
refreshClosedTopics()
|
refreshClosedTopics()
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue