From f0c9dfe5777e411e6163fe2d619ab347db01e40f Mon Sep 17 00:00:00 2001 From: derped Date: Tue, 20 Apr 2021 02:06:02 +0200 Subject: [PATCH] First implementation of report table input. --- berichtsheft/assets/css/notebook.css | 5 + berichtsheft/assets/js/notebook.js | 104 ++++++++++++++++-- .../assets/templates/report_input.html | 29 +++++ 3 files changed, 127 insertions(+), 11 deletions(-) create mode 100644 berichtsheft/assets/templates/report_input.html 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); +} diff --git a/berichtsheft/assets/templates/report_input.html b/berichtsheft/assets/templates/report_input.html new file mode 100644 index 0000000..8175d4e --- /dev/null +++ b/berichtsheft/assets/templates/report_input.html @@ -0,0 +1,29 @@ +