Init: basic templating.

berichtsheft/assets/js/notebook.js

@@ -0,0 +1,140 @@
+"use strict";
+
+const app = document.getElementById("appContent");
+let userdata;
+load();
+const emptyPages = {
+    "title": {"type": "title"},
+    "blank": {"type": "blank"},
+    "report": {
+        "type": "report",
+        "days": [ [], [], [], [], [], ],
+    },
+
+};
+let templates;
+
+// const templates = {
+//     "blank": (await fetchTemplate("blank"))
+// };
+// let blank = fetchTemplate("blank").then(b=>{blank=b});
+// let blank = fetchTemplate("blank")
+async function init() {
+    if (typeof templates === "undefined") {
+        templates = {
+            "title": await fetchTemplate("title"),
+            "blank": await fetchTemplate("blank"),
+            "report": await fetchTemplate("report"),
+        };
+    }
+    [...app.children].forEach(child => app.removeChild(child))
+
+    userdata.pages.forEach((e,i) => {
+        pageAdd(e.type);
+        populate(i+1);
+    })
+}
+
+function pageAdd(template) {
+    pageNew(template);
+    populate(app.children.length);
+}
+
+function pageNew(template) {
+    const node = templates[template].content.cloneNode(true);
+    node.children[0].id = `Page-${app.children.length+1}`;
+    app.appendChild(node);
+    fixPageCount();
+    userdata.pages.push(emptyPages[template])
+}
+
+function populate(pnum) {
+    if (pnum > 0 && pnum <= app.children.length <= 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);
+        if (node.classList.contains(data.type)) {
+            switch (data.type) {
+            case "report":
+                let startDate = data.start;
+                if (typeof startDate === "undefined") {
+                    const dates = (pnum > 1) && app.children[pnum-2].getElementsByClassName("date") || [];
+                    startDate = dates.length > 1 && dates[1].textContent.split(".").reverse().map(Number) || undefined
+                    if (typeof startDate === "undefined") {
+                        startDate = userdata.meta.start || [0,0,0];
+                    } else {
+                        startDate[1] -= 1;
+                        startDate[2] += 3;
+                    }
+                }
+                let endDate = data.end;
+                if (typeof endDate === "undefined") {
+                    endDate = [...startDate];
+                    endDate[2] += 4;
+                }
+                const date = node.querySelectorAll(".date");
+                date[0].textContent = getDate(startDate);
+                date[1].textContent = getDate(endDate);
+
+                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 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];
+                        dayh += data.days[i][j][1];
+                    }
+                    day[day.length-1].querySelector(".subtotal").textContent = dayh;
+                    weekh += dayh;
+                } node.querySelector(".total").textContent = weekh;
+
+            case "blank":
+                node.querySelector(".pnum").textContent = pnum;
+                break;
+            case "title":
+                let tdate = node.querySelectorAll(".tdate");
+                tdate[0].textContent = getDate(userdata.meta.start);
+                tdate[1].textContent = getDate(userdata.meta.end);
+                node.querySelector(".name").textContent = `${userdata.meta.lastName}, ${userdata.meta.firstName}`;
+                break;
+            }
+        }
+    }
+}
+
+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()}`
+}
+
+function fixPageCount() {
+    const pc = document.getElementsByClassName("pcount");
+    for (let i=0; i < pc.length; i++) {
+        pc[i].textContent = app.children.length;
+    }
+}
+
+async function fetchTemplate(tname) {
+    let template = document.createElement("template");
+    template.innerHTML = await ( await fetch(`assets/templates/${tname}.html`)).text();
+    return template.content.getElementById(tname);
+}
+
+function load() {
+userdata = JSON.parse(localStorage.getItem("userdata")) ||
+        { "meta": {
+            "firstName": "",
+            "lastName": "",
+            "start": null,
+            "end": null,
+            "logo": ""
+        },
+          "pages": [],
+        };
+}
+
+function save() {
+    localStorage.setItem("userdata", JSON.stringify(userdata))
+}