Berichtsheft/berichtsheft/assets/js/notebook.js

"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"),
        };
    }
    userdata.pages = userdata.pages || [];
    [...app.children].forEach(child => app.removeChild(child))

    userdata.pages.forEach((e,i) => {
        pageNew(e.type);
        populate(i+1);
    })
}

function pageAdd(template) {
    pageNew(template);
    userdata.pages.push(emptyPages[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();
}

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].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];
                    }
                    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))
}

function hideOverlay() {
    document.getElementById("overlay").style.display = "none";
    document.getElementById("import").style.display = "none";
}

function ignoreData(event) {
    event.preventDefault();
    event.stopPropagation();
}

function showImport(event) {
    document.getElementById("overlay").style.display = "block";
    document.getElementById("import").style.display = "block";
}

function importData(event) {
    event.preventDefault();

    if (event.dataTransfer.items) {
        [...event.dataTransfer.items].forEach(f => {
            if (f.kind == "file") {
                f.getAsFile().text().then(t => {
                    userdata = JSON.parse(t);
                    init();
                })
            }
        })
    } else {
        [...event.dataTransfer.files].forEach(f => {
            if (f.kind == "file") {
                f.text().then(t => {
                    userdata = JSON.parse(t);
                    init();
                })
            }
        })
    }
    document.getElementById("overlay").style.display = "none";
    document.getElementById("import").style.display = "none";
}

function exportData() {
    const e = document.createElement('a');
    e.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(JSON.stringify(userdata)));
    e.setAttribute('download', "Berichtsheft.json");
    e.click();
}