Added input fields on dates.

This commit is contained in:
Kevin Baensch 2021-04-20 14:19:50 +02:00
parent f0c9dfe577
commit cd8ac6a279
Signed by: derped
GPG Key ID: C0F1D326C7626543
3 changed files with 32 additions and 13 deletions

View File

@ -62,7 +62,7 @@ function populate(pnum) {
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
startDate = dates.length > 1 && dates[1].textContent.split(".").reverse().map(Number) || undefined;
if (typeof startDate === "undefined") {
startDate = userdata.meta.start || [0,0,0];
} else {
@ -209,9 +209,8 @@ function exportData() {
e.click();
}
function editDayOpen(e) {
// Find page and day index
const getIndex = (n, e) => {
function getIndex(n, e) {
// Find index of element (or object containing) e in nodelist n)
for (const i in n) {
if (n[i].contains(e)) {
return i;
@ -219,6 +218,26 @@ function editDayOpen(e) {
}
return null;
};
function editDate(e, target) {
const page = getIndex(app.children, e);
const input = document.createElement("input");
let data = target === "meta" && userdata["meta"] || userdata["pages"][page];
input.value = getDate(data[target[1]]);
input.classList = e.classList;
input.pattern = "[0-9]{2}.[0-9]{2}.[0-9]{4}";
input.onblur = () => {
data[target[1]] = input.value.split(".").reverse().map(Number);
e.style.display = "block";
input.remove();
populate(Number(page)+1);
save();
};
e.style.display = "none";
e.insertAdjacentElement("afterend", input);
input.focus();
}
function editDayOpen(e) {
let page = getIndex(app.children, e);
let day = (page !== null && getIndex(app.children[page].querySelectorAll(".day"), e))

View File

@ -5,9 +5,9 @@
<!-- <hr> -->
<div class="flex">
<p class="quarterw">Woche vom:</p>
<p class="quarterw date"></p>
<p class="quarterw date" onclick="editDate(this, ['report', 'start']);"></p>
<p class="quarterw">bis:</p>
<p class="quarterw date"></p>
<p class="quarterw date" onclick="editDate(this, ['report', 'end']);"></p>
</div>
</div>

View File

@ -7,11 +7,11 @@
<h1>Berichtsheft</h1>
<div class="flex">
<p>Ausbildungsbeginn: </p>
<p class="tdate"></p>
<p class="tdate" onclick="editDate(this, ['meta', 'start']);"></p>
</div>
<div class="flex">
<p>Ausbildungsende: </p>
<p class="tdate"></p>
<p class="tdate" onclick="editDate(this, ['meta', 'end']);"></p>
</div>
<div class="flex">
<p>Name: </p>