Added input fields on dates.

berichtsheft/assets/js/notebook.js

@@ -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) {
+function getIndex(n, e) {
-    // Find page and day index
+    // Find index of element (or object containing) e in nodelist n)
-    const getIndex = (n, e) => {
     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))
 

berichtsheft/assets/templates/report.html

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

berichtsheft/assets/templates/title.html

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