<title>Zeitkonto</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <style>
+ #anfangssaldo {
+ font-weight: bold;
+ padding: 1rem 0;
+ }
+ table {
+ border-collapse: collapse;
+ }
+ td, th {
+ border: 1px solid gray;
+ border-radius: 1rem;
+ padding: 1rem;
+ text-align: left;
+ }
+ </style>
</head>
<body>
<main>
filereader.onload = data => {
const parser = new DOMParser();
const xmldoc = parser.parseFromString(data.target.result, "text/xml");
- console.debug(xmldoc.children[0].getAttribute("anfangssaldo"));
- const divElement = document.createElement("div");
- divElement.innerText = xmldoc.children[0].getAttribute("anfangssaldo");
+
+ const rootNode = xmldoc.children[0]
+ let divElement = document.createElement("div");
+ divElement.id = "anfangssaldo"
+ divElement.innerText = `Anfangssaldo: ${rootNode.getAttribute("anfangssaldo")}`
element.append(divElement);
+
+ const count = rootNode.childElementCount;
+ const tableElement = document.createElement("table");
+ let trElement;
+ let tdElement;
+
+ 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)
+
+
+
+ for (let i = 0; i < count; i++) {
+ trElement = document.createElement("tr");
+
+ tdElement = document.createElement("td");
+ tdElement.innerText = rootNode.children[i].getAttribute("wochentag");
+ trElement.append(tdElement);
+
+ tdElement = document.createElement("td");
+ tdElement.innerText = rootNode.children[i].getAttribute("datum");
+ trElement.append(tdElement);
+
+ tdElement = document.createElement("td");
+ tdElement.innerText = rootNode.children[i].getAttribute("begin");
+ trElement.append(tdElement);
+
+ tdElement = document.createElement("td");
+ tdElement.innerText = rootNode.children[i].getAttribute("ende");
+ trElement.append(tdElement);
+
+ tdElement = document.createElement("td");
+ tdElement.innerText = rootNode.children[i].getAttribute("pause");
+ trElement.append(tdElement);
+
+ tdElement = document.createElement("td");
+ tdElement.innerText = rootNode.children[i].getAttribute("sollarbeitszeit");
+ trElement.append(tdElement);
+
+ tdElement = document.createElement("td");
+ tdElement.innerText = rootNode.children[i].getAttribute("arbeitszeit");
+ trElement.append(tdElement);
+
+ tdElement = document.createElement("td");
+ tdElement.innerText = rootNode.children[i].getAttribute("stunden");
+ trElement.append(tdElement);
+
+ tdElement = document.createElement("td");
+ tdElement.innerText = rootNode.children[i].getAttribute("saldo");
+ trElement.append(tdElement);
+
+ tableElement.append(trElement)
+ }
+
+ element.append(tableElement);
};
filereader.readAsText(fileinput.files[0]);
}