derped/Berichtsheft
1
0
Fork 0
Code Issues Pull requests Projects Releases Activity

First implementation of report table input.

Browse source
This commit is contained in:
Kevin Baensch 2021-04-20 02:06:02 +02:00
parent d89bcbec06
commit f0c9dfe577
Signed by: derped
GPG key ID: C0F1D326C7626543
3 changed files with 127 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
berichtsheft/assets/css/notebook.css
View file

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

100
berichtsheft/assets/js/notebook.js
View file

@ -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++) {
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];
dayh += 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);
}

29
berichtsheft/assets/templates/report_input.html Normal file
View file

@ -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>