First implementation of report table input.

berichtsheft/assets/css/notebook.css

@@ -6,6 +6,11 @@ body {
     background: darkgray;
 }
 
+input {
+    width: 90%;
+    height: 100%;
+}
+
 #overlay {
     position: fixed;
     left: 0;

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 (const j in [...day]) {
-                    for (let j=0; j < day.length && j < data.days[i].length; j++) {
+                        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")[0].textContent = data.days[i][j][0];
-                        day[j].querySelectorAll("div")[1].textContent = data.days[i][j][1];
+                            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;
+                    const st = [...week[i].querySelectorAll(".sh")].reduce(
-                    weekh += dayh;
+                        (total,e) => {
-                } node.querySelector(".total").textContent = weekh;
+                            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);
+}

berichtsheft/assets/templates/report_input.html

@@ -0,0 +1,29 @@
+<template id="report_input">
+    <div class="day-content flexv">
+        <div class="day-line flexh">
+            <div class="flexgrow"><input type="text"/></div>
+            <div class="flexten"><input class="sh" type="text" maxlength="2" pattern="[0-9]{1}"></div>
+            <div class="flexten"></div>
+        </div>
+        <div class="day-line flexh">
+            <div class="flexgrow"><input type="text"/></div>
+            <div class="flexten"><input class="sh" type="text" maxlength="2" pattern="[0-9]{1}"></div>
+            <div class="flexten"></div>
+        </div>
+        <div class="day-line flexh">
+            <div class="flexgrow"><input type="text"/></div>
+            <div class="flexten"><input class="sh" type="text" maxlength="2" pattern="[0-9]{1}"></div>
+            <div class="flexten"></div>
+        </div>
+        <div class="day-line flexh">
+            <div class="flexgrow"><input type="text"/></div>
+            <div class="flexten"><input class="sh" type="text" maxlength="2" pattern="[0-9]{1}"></div>
+            <div class="flexten"></div>
+        </div>
+        <div class="day-line flexh">
+            <div class="flexgrow"><input type="text"/></div>
+            <div class="flexten"><input class="sh" type="text" maxlength="2" pattern="[0-9]{1}"></div>
+            <div class="subtotal green flexten"></div>
+        </div>
+    </div>
+</template>