From cd8ac6a27962b5538bafffd8a93438b0ad74403e Mon Sep 17 00:00:00 2001
From: derped <derped@ophanim.de>
Date: Tue, 20 Apr 2021 14:19:50 +0200
Subject: [PATCH] Added input fields on dates.

---
 berichtsheft/assets/js/notebook.js        | 37 +++++++++++++++++------
 berichtsheft/assets/templates/report.html |  4 +--
 berichtsheft/assets/templates/title.html  |  4 +--
 3 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/berichtsheft/assets/js/notebook.js b/berichtsheft/assets/js/notebook.js
index ff8b998..656e510 100644
--- a/berichtsheft/assets/js/notebook.js
+++ b/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,16 +209,35 @@ function exportData() {
     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;
-            }
+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;
         }
-        return null;
+    }
+    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))
 
diff --git a/berichtsheft/assets/templates/report.html b/berichtsheft/assets/templates/report.html
index 49358f1..3cce194 100644
--- a/berichtsheft/assets/templates/report.html
+++ b/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>
 
diff --git a/berichtsheft/assets/templates/title.html b/berichtsheft/assets/templates/title.html
index adf8650..616b3d3 100644
--- a/berichtsheft/assets/templates/title.html
+++ b/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>