Refactoring and functionality with percent and counter

This commit is contained in:
schrom01 2023-02-09 21:23:22 +01:00
parent d0d00ef217
commit 1d12d8f244
3 changed files with 190 additions and 187 deletions

View File

View File

@ -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">
@ -120,9 +102,7 @@
</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()

187
js/functions.js Normal file
View File

@ -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
}