<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="viewer.css">
+ <script src="viewer.js"></script>
</head>
<body>
<main>
- <script>
- function addColorClass(element, quota) {
- if (quota >= 1)
- element.classList.add("red");
- else if (quota >= 0.666666667)
- element.classList.add("yellow");
- else if (quota >= -0.666666667)
- element.classList.add("green");
- else if (quota <= -0.666666667)
- element.classList.add("yellow");
- else if (quota <= -1)
- element.classList.add("red");
- }
-
- function loadFile() {
- const fileinput = document.getElementById("filepath");
- const element = document.getElementById("content");
- element.innerHTML = '';
- const filereader = new FileReader();
- filereader.onload = data => {
- const parser = new DOMParser();
- const xmldoc = parser.parseFromString(data.target.result, "text/xml");
-
- const rootNode = xmldoc.children[0]
-
- const tableElement = document.createElement("table");
- const MAX_OVERDAYS = 7.5;
- let trElement;
- let tdElement;
- let saldo;
- let timeArray;
- let maxWorktime;
- let quota;
-
- const captionElement = document.createElement("caption");
- captionElement.innerText = `Zeitkonto - Anfangssaldo: ${rootNode.getAttribute("anfangssaldo")}`
- tableElement.append(captionElement);
-
- trElement = document.createElement("tr");
-
- tdElement = document.createElement("th");
- tdElement.setAttribute("colspan", 2);
- tdElement.innerText = "Datum";
- trElement.append(tdElement);
-
- tdElement = document.createElement("th");
- tdElement.innerText = "Anfang"
- trElement.append(tdElement);
-
- tdElement = document.createElement("th");
- tdElement.innerText = "Ende";
- trElement.append(tdElement);
-
- tdElement = document.createElement("th");
- tdElement.innerText = "Pause";
- trElement.append(tdElement);
-
- tdElement = document.createElement("th");
- tdElement.innerText = "Soll";
- trElement.append(tdElement);
-
- tdElement = document.createElement("th");
- tdElement.innerText = "Ist";
- trElement.append(tdElement);
-
- tdElement = document.createElement("th");
- tdElement.innerText = "Stunden";
- trElement.append(tdElement);
-
- tdElement = document.createElement("th");
- tdElement.innerText = "Saldo";
- trElement.append(tdElement);
-
- tableElement.append(trElement)
- const count = rootNode.childElementCount;
- for (let i = 0; i < count; i++) {
- timeArray = rootNode.children[i].getAttribute("sollarbeitszeit").split(":");
- maxWorktime = timeArray[0] * 3600;
- maxWorktime += timeArray[1] * 60;
- maxWorktime *= MAX_OVERDAYS;
- timeArray = rootNode.children[i].getAttribute("saldo").split(":");
- saldo = timeArray[0] * 3600;
- saldo += timeArray[1] * 60;
- quota = saldo / maxWorktime;
-
- trElement = document.createElement("tr");
-
- tdElement = document.createElement("td");
- tdElement.setAttribute("data-cell", "Wochentag");
- tdElement.innerText = rootNode.children[i].getAttribute("wochentag");
- addColorClass(tdElement, quota);
- trElement.append(tdElement);
-
- tdElement = document.createElement("td");
- tdElement.setAttribute("data-cell", "Datum");
- tdElement.innerText = rootNode.children[i].getAttribute("datum");
- addColorClass(tdElement, quota);
- trElement.append(tdElement);
-
- tdElement = document.createElement("td");
- tdElement.setAttribute("data-cell", "Anfang");
- tdElement.innerText = rootNode.children[i].getAttribute("begin");
- addColorClass(tdElement, quota);
- trElement.append(tdElement);
-
- tdElement = document.createElement("td");
- tdElement.setAttribute("data-cell", "Ende");
- tdElement.innerText = rootNode.children[i].getAttribute("ende");
- addColorClass(tdElement, quota);
- trElement.append(tdElement);
-
- tdElement = document.createElement("td");
- tdElement.setAttribute("data-cell", "Pause");
- tdElement.innerText = rootNode.children[i].getAttribute("pause");
- addColorClass(tdElement, quota);
- trElement.append(tdElement);
-
- tdElement = document.createElement("td");
- tdElement.setAttribute("data-cell", "Soll");
- tdElement.innerText = rootNode.children[i].getAttribute("sollarbeitszeit");
- addColorClass(tdElement, quota);
- trElement.append(tdElement);
-
- tdElement = document.createElement("td");
- tdElement.setAttribute("data-cell", "Ist");
- tdElement.innerText = rootNode.children[i].getAttribute("arbeitszeit");
- addColorClass(tdElement, quota);
- trElement.append(tdElement);
-
- tdElement = document.createElement("td");
- tdElement.setAttribute("data-cell", "Stunden");
- tdElement.innerText = rootNode.children[i].getAttribute("stunden");
- addColorClass(tdElement, quota);
- trElement.append(tdElement);
-
- tdElement = document.createElement("td");
- tdElement.setAttribute("data-cell", "Saldo");
- tdElement.innerText = rootNode.children[i].getAttribute("saldo");
- addColorClass(tdElement, quota);
- trElement.append(tdElement);
-
- tableElement.append(trElement)
- }
-
- element.append(tableElement);
- };
- filereader.readAsText(fileinput.files[0]);
- }
- </script>
<div class="fileinput">
<label>Zeitkonto-Datei: </label>
<input onchange="loadFile()" type="file" id="filepath" name="file">
--- /dev/null
+function addColorClass(element, quota) {
+ if (quota >= 1)
+ element.classList.add("red");
+ else if (quota >= 0.666666667)
+ element.classList.add("yellow");
+ else if (quota >= -0.666666667)
+ element.classList.add("green");
+ else if (quota <= -0.666666667)
+ element.classList.add("yellow");
+ else if (quota <= -1)
+ element.classList.add("red");
+}
+
+function loadFile() {
+ const fileinput = document.getElementById("filepath");
+ const element = document.getElementById("content");
+ element.innerHTML = '';
+ const filereader = new FileReader();
+ filereader.onload = data => {
+ const parser = new DOMParser();
+ const xmldoc = parser.parseFromString(data.target.result, "text/xml");
+
+ const rootNode = xmldoc.children[0]
+
+ const tableElement = document.createElement("table");
+ const MAX_OVERDAYS = 7.5;
+ let trElement;
+ let tdElement;
+ let saldo;
+ let timeArray;
+ let maxWorktime;
+ let quota;
+
+ const captionElement = document.createElement("caption");
+ captionElement.innerText = `Zeitkonto - Anfangssaldo: ${rootNode.getAttribute("anfangssaldo")}`
+ tableElement.append(captionElement);
+
+ trElement = document.createElement("tr");
+
+ tdElement = document.createElement("th");
+ tdElement.setAttribute("colspan", 2);
+ tdElement.innerText = "Datum";
+ trElement.append(tdElement);
+
+ tdElement = document.createElement("th");
+ tdElement.innerText = "Anfang"
+ trElement.append(tdElement);
+
+ tdElement = document.createElement("th");
+ tdElement.innerText = "Ende";
+ trElement.append(tdElement);
+
+ tdElement = document.createElement("th");
+ tdElement.innerText = "Pause";
+ trElement.append(tdElement);
+
+ tdElement = document.createElement("th");
+ tdElement.innerText = "Soll";
+ trElement.append(tdElement);
+
+ tdElement = document.createElement("th");
+ tdElement.innerText = "Ist";
+ trElement.append(tdElement);
+
+ tdElement = document.createElement("th");
+ tdElement.innerText = "Stunden";
+ trElement.append(tdElement);
+
+ tdElement = document.createElement("th");
+ tdElement.innerText = "Saldo";
+ trElement.append(tdElement);
+
+ tableElement.append(trElement)
+ const count = rootNode.childElementCount;
+ for (let i = 0; i < count; i++) {
+ timeArray = rootNode.children[i].getAttribute("sollarbeitszeit").split(":");
+ maxWorktime = timeArray[0] * 3600;
+ maxWorktime += timeArray[1] * 60;
+ maxWorktime *= MAX_OVERDAYS;
+ timeArray = rootNode.children[i].getAttribute("saldo").split(":");
+ saldo = timeArray[0] * 3600;
+ saldo += timeArray[1] * 60;
+ quota = saldo / maxWorktime;
+
+ trElement = document.createElement("tr");
+
+ tdElement = document.createElement("td");
+ tdElement.setAttribute("data-cell", "Wochentag");
+ tdElement.innerText = rootNode.children[i].getAttribute("wochentag");
+ addColorClass(tdElement, quota);
+ trElement.append(tdElement);
+
+ tdElement = document.createElement("td");
+ tdElement.setAttribute("data-cell", "Datum");
+ tdElement.innerText = rootNode.children[i].getAttribute("datum");
+ addColorClass(tdElement, quota);
+ trElement.append(tdElement);
+
+ tdElement = document.createElement("td");
+ tdElement.setAttribute("data-cell", "Anfang");
+ tdElement.innerText = rootNode.children[i].getAttribute("begin");
+ addColorClass(tdElement, quota);
+ trElement.append(tdElement);
+
+ tdElement = document.createElement("td");
+ tdElement.setAttribute("data-cell", "Ende");
+ tdElement.innerText = rootNode.children[i].getAttribute("ende");
+ addColorClass(tdElement, quota);
+ trElement.append(tdElement);
+
+ tdElement = document.createElement("td");
+ tdElement.setAttribute("data-cell", "Pause");
+ tdElement.innerText = rootNode.children[i].getAttribute("pause");
+ addColorClass(tdElement, quota);
+ trElement.append(tdElement);
+
+ tdElement = document.createElement("td");
+ tdElement.setAttribute("data-cell", "Soll");
+ tdElement.innerText = rootNode.children[i].getAttribute("sollarbeitszeit");
+ addColorClass(tdElement, quota);
+ trElement.append(tdElement);
+
+ tdElement = document.createElement("td");
+ tdElement.setAttribute("data-cell", "Ist");
+ tdElement.innerText = rootNode.children[i].getAttribute("arbeitszeit");
+ addColorClass(tdElement, quota);
+ trElement.append(tdElement);
+
+ tdElement = document.createElement("td");
+ tdElement.setAttribute("data-cell", "Stunden");
+ tdElement.innerText = rootNode.children[i].getAttribute("stunden");
+ addColorClass(tdElement, quota);
+ trElement.append(tdElement);
+
+ tdElement = document.createElement("td");
+ tdElement.setAttribute("data-cell", "Saldo");
+ tdElement.innerText = rootNode.children[i].getAttribute("saldo");
+ addColorClass(tdElement, quota);
+ trElement.append(tdElement);
+
+ tableElement.append(trElement)
+ }
+
+ element.append(tableElement);
+ };
+ filereader.readAsText(fileinput.files[0]);
+}
\ No newline at end of file
projects / feierabend.git / commitdiff