From d89bcbec06f51d3ded0ed5504e733da443dc8a96 Mon Sep 17 00:00:00 2001 From: derped Date: Mon, 19 Apr 2021 17:35:02 +0200 Subject: [PATCH 1/2] Fix fluctuating tbody heights by not using tables. --- berichtsheft/assets/css/notebook.css | 85 ++++-- berichtsheft/assets/js/notebook.js | 6 +- berichtsheft/assets/templates/report.html | 319 +++++++++++----------- 3 files changed, 225 insertions(+), 185 deletions(-) diff --git a/berichtsheft/assets/css/notebook.css b/berichtsheft/assets/css/notebook.css index 7f0957a..8bb89ba 100644 --- a/berichtsheft/assets/css/notebook.css +++ b/berichtsheft/assets/css/notebook.css @@ -42,53 +42,82 @@ hr { border-top: 1px solid black; } -td { - height: 1.5em; - word-break: break-word; -} - -table.week { - layout: fixed; +.week { width: 100%; height: 80%; + display: flex; + flex-direction: column; + border: 1px solid #000000; } -table.week th { - height: 2em; - font-weight: normal; +.week-head { text-align: center; - vertical-align: middle; + align-items: center; + justify-content: center; background-color: #f2f2f2; } -table.week tbody:nth-child(odd) tr:nth-child(odd) { +.day { + flex-basis: 18%; + margin-top: -1px; + margin-left: -1px; + margin-right: -1px; + border: 1px solid #000000; +} + +.week-foot { background-color: #f2f2f2; } -table.week tbody:nth-child(even) tr:nth-child(even) { - background-color: #f2f2f2; -} - -table.week thead th:nth-last-child(-n+2) { - width: 10%; - font-size: 80%; -} - -table.week td:nth-last-child(-n+2) { - text-align: center; -} - -table.week tbody:last-child tr:last-child td:first-child { +.week-foot div:first-child { text-align: right; } -.vtable { - width: 1em; +.day-line { + align-items: center; + flex-basis: 20%; +} + +.day:nth-child(even) .day-line:nth-child(even) { + background-color: #f2f2f2; +} + +.day:nth-child(odd) .day-line:nth-child(odd) { + background-color: #f2f2f2; +} + + +.flexh { + display: flex; +} + +.flexv { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; +} + +.flexgrow { + flex-grow: 1; +} + +.flexten { + flex-basis: 10%; + flex-grow: 0; + flex-shrink: 0; + text-align: center; +} + +.flexfive { + flex-basis: 5%; } .vertical { + text-align: center; writing-mode: vertical-lr; transform: rotate(180deg); + border-left: 1px solid #000000;; } .sign { diff --git a/berichtsheft/assets/js/notebook.js b/berichtsheft/assets/js/notebook.js index 44a87ee..db6d757 100644 --- a/berichtsheft/assets/js/notebook.js +++ b/berichtsheft/assets/js/notebook.js @@ -80,11 +80,11 @@ function populate(pnum) { const week = node.getElementsByClassName("week")[0].querySelectorAll(".day"); let weekh = null; for (let i=0; i < week.length && i < data.days.length; i++) { - let day = week[i].children; + let day = week[i].querySelectorAll(".day-line"); let dayh = null; for (let j=0; j < day.length && j < data.days[i].length; j++) { - day[j].querySelectorAll("td")[0].textContent = data.days[i][j][0]; - day[j].querySelectorAll("td")[1].textContent = data.days[i][j][1]; + day[j].querySelectorAll("div")[0].textContent = data.days[i][j][0]; + day[j].querySelectorAll("div")[1].textContent = data.days[i][j][1]; dayh += data.days[i][j][1]; } day[day.length-1].querySelector(".subtotal").textContent = dayh; diff --git a/berichtsheft/assets/templates/report.html b/berichtsheft/assets/templates/report.html index 9a3ad4d..49358f1 100644 --- a/berichtsheft/assets/templates/report.html +++ b/berichtsheft/assets/templates/report.html @@ -12,164 +12,175 @@
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+
+
Unterweisungen, ausgeführte Arbeiten usw.
+
Einzel-Stunden
+
Gesammt-Stunden
+
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - +
+
Montag
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+
Dienstag
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
Mittwoch
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
Donnerstag
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
Freitag
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
Wochenstunden
+
+
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Unterweisungen, ausgeführte Arbeiten usw.Einzel-
Stunden		Gesammt-
Stunden
Montag
Dienstag
Mittwoch
Donnerstag
Freitag
Wochenstunden
From 241c17977194dbbba93d0f1379dfcc7bb52579e1 Mon Sep 17 00:00:00 2001 From: derped Date: Tue, 20 Apr 2021 02:06:02 +0200 Subject: [PATCH 2/2] First implementation of report table input. --- berichtsheft/assets/css/notebook.css | 5 ++ berichtsheft/assets/js/notebook.js | 104 ++++++++++++++++++++++++--- 2 files changed, 98 insertions(+), 11 deletions(-) diff --git a/berichtsheft/assets/css/notebook.css b/berichtsheft/assets/css/notebook.css index 8bb89ba..18a853c 100644 --- a/berichtsheft/assets/css/notebook.css +++ b/berichtsheft/assets/css/notebook.css @@ -6,6 +6,11 @@ body { background: darkgray; } +input { + width: 90%; + height: 100%; +} + #overlay { position: fixed; left: 0; diff --git a/berichtsheft/assets/js/notebook.js b/berichtsheft/assets/js/notebook.js index db6d757..ff8b998 100644 --- a/berichtsheft/assets/js/notebook.js +++ b/berichtsheft/assets/js/notebook.js @@ -25,6 +25,7 @@ async function init() { "title": await fetchTemplate("title"), "blank": await fetchTemplate("blank"), "report": await fetchTemplate("report"), + "report_input": await fetchTemplate("report_input"), }; } userdata.pages = userdata.pages || []; @@ -40,6 +41,7 @@ function pageAdd(template) { pageNew(template); userdata.pages.push(emptyPages[template]); populate(app.children.length); + save(); } function pageNew(template) { @@ -50,7 +52,7 @@ function pageNew(template) { } function populate(pnum) { - if (pnum > 0 && pnum <= app.children.length <= userdata.pages.length) { + if (pnum > 0 && pnum <= app.children.length && pnum <= userdata.pages.length) { const node = app.children[pnum-1]; const data = userdata.pages[pnum-1]; node.querySelectorAll(".logo").forEach(i=>i.src = userdata.meta.logo); @@ -77,19 +79,26 @@ function populate(pnum) { date[0].textContent = getDate(startDate); date[1].textContent = getDate(endDate); - const week = node.getElementsByClassName("week")[0].querySelectorAll(".day"); + let week = node.querySelector(".week").querySelectorAll(".day"); let weekh = null; - for (let i=0; i < week.length && i < data.days.length; i++) { + for (const i in [...week]) { let day = week[i].querySelectorAll(".day-line"); - let dayh = null; - for (let j=0; j < day.length && j < data.days[i].length; j++) { - day[j].querySelectorAll("div")[0].textContent = data.days[i][j][0]; - day[j].querySelectorAll("div")[1].textContent = data.days[i][j][1]; - dayh += data.days[i][j][1]; + for (const j in [...day]) { + if (data.days.length > i && data.days[i].length > j && data.days[i][j].length === 2) { + day[j].querySelectorAll("div")[0].textContent = data.days[i][j][0]; + day[j].querySelectorAll("div")[1].textContent = data.days[i][j][1]; + } } - day[day.length-1].querySelector(".subtotal").textContent = dayh; - weekh += dayh; - } node.querySelector(".total").textContent = weekh; + const st = [...week[i].querySelectorAll(".sh")].reduce( + (total,e) => { + return total + Number(e.textContent) + }, + 0 + ) || null; + week[i].querySelector(".subtotal").textContent = st; + weekh += st; + } + node.querySelector(".total").textContent = weekh; case "blank": node.querySelector(".pnum").textContent = pnum; @@ -105,6 +114,18 @@ function populate(pnum) { } } +function getTotal(day) { + let st = [...day.querySelectorAll(".sh")].reduce( + (total,e) => { + return total + Number(e.textContent)}, + 0 + ); + st = st || null; + day.querySelector(".subtotal").textContent = st; + return st; + +} + function getDate(date) { let d = date && new Date(...date) || new Date(); return `${String(d.getDate()).padStart(2, "0")}.${String(d.getMonth()+1).padStart(2, "0")}.${d.getFullYear()}` @@ -187,3 +208,64 @@ function exportData() { e.setAttribute('download', "Berichtsheft.json"); e.click(); } + +function editDayOpen(e) { + // Find page and day index + const getIndex = (n, e) => { + for (const i in n) { + if (n[i].contains(e)) { + return i; + } + } + return null; + }; + let page = getIndex(app.children, e); + let day = (page !== null && getIndex(app.children[page].querySelectorAll(".day"), e)) + + if (day !== null && userdata["pages"][page] !== "undefined" && userdata["pages"][page][day] !== "undefined") { + const node = templates["report_input"].content.cloneNode(true).children[0]; + const data = userdata["pages"][page]["days"][day]; + for (const li in [...node.querySelectorAll(".day-line")]) { + if (data.length <= li || data[li].length !== 2) { + data[li] = ["", ""]; + } + const inputs = node.querySelectorAll(".day-line")[li].querySelectorAll("input"); + [...inputs].forEach((input,i) => { + input.value = data[li][i]; + input.onblur = () => {editDayClose(node, e, page, day)}; + if (i === 1) { + input.onchange = () => { + node.querySelector(".subtotal").textContent = [...node.querySelectorAll(".sh")].reduce( + (total,e) => { + return total + Number(e.value) + }, 0) || null; + }; + } + }); + } + e.style.display = "none"; + e.insertAdjacentElement("afterend", node); + node.querySelector("input").focus(); + } +} + +function editDayClose(node, onode, page, day) { + const inputs = node.querySelectorAll("input"); + setTimeout(() => { + if (![...inputs].some(i=>{return document.activeElement === i})) { + for (const li in node.querySelectorAll(".day-line")) { + const data = userdata["pages"][page]["days"][day]; + if (data.length > li && data[li].length === 2) { + const inputs = node.querySelectorAll(".day-line")[li].querySelectorAll("input"); + [...inputs].forEach((input,i) => { + data[li][i] = input.value; + }) + } + } + node.remove(); + onode.style.display = "flex"; + populate(Number(page)+1); + save(); + } + }, 10); +}