Add basic Import&Export.

9 months ago · bec6cf04dd
3 changed files with 93 additions and 3 deletions
--- a/berichtsheft/assets/css/notebook.css
+++ b/berichtsheft/assets/css/notebook.css
@ -6,15 +6,49 @@ body {
    background: darkgray;
 }

+#overlay {
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background-color: rgba(20,20,20,0.7);
+    z-index: 2;
+    display: none;
+}
+
+.box {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: 15%;
+    width: auto;
+    height: auto;
+    min-width: 25%;
+    min-height: 25%;
+    background-color:  #ffffff;
+}
+
+#import {
+    position: absolute;
+    top:0;
+    width: 100%;
+    height: 100%;
+    display: none;
+}
+
 hr {
    border-top: 1px solid black;
 }

 td {
    height: 1.5em;
+    word-break: break-word;
 }

 table.week {
+    layout: fixed;
    width: 100%;
    height: 80%;
 }
@ -53,7 +87,6 @@ table.week tbody:last-child tr:last-child td:first-child {
 }

 .vertical {
-    vertical-align: middle;
    writing-mode: vertical-lr;
    transform: rotate(180deg);
 }
@ -94,7 +127,7 @@ table.week tbody:last-child tr:last-child td:first-child {
    height: 29.7cm;
    display: grid;
    grid-template-rows: 2cm auto 2cm;
-    background: white;
+    background: #ffffff;
 }

 .page:nth-child(odd) {
@ -111,7 +144,7 @@ table.week tbody:last-child tr:last-child td:first-child {
    height: 100%;
    grid-row: 1 / 2;
    grid-column: 2 / 3;
-    background: white;
+    background: #ffffff;
 }

 .pg-head .flex {
@ -155,6 +188,7 @@ div.sticky {
    position: -webkit-sticky;
    align-self: flex-start;
    top: 0;
+    z-index: 1;
 }

 .flex {
--- a/berichtsheft/assets/js/notebook.js
+++ b/berichtsheft/assets/js/notebook.js
@ -27,6 +27,7 @@ async function init() {
            "report": await fetchTemplate("report"),
        };
    }
+    userdata.pages = userdata.pages || [];
    [...app.children].forEach(child => app.removeChild(child))

    userdata.pages.forEach((e,i) => {
@ -138,3 +139,51 @@ userdata = JSON.parse(localStorage.getItem("userdata")) ||
 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();
+}
--- a/berichtsheft/index.html
+++ b/berichtsheft/index.html
@ -8,10 +8,17 @@
        <title>Mein Berichtsheft</title>
    </head>
    <body>
+        <div id="overlay" onclick="hideOverlay();">
+            <div class="box" onclick="ignoreData(event)">
+                <div id="import" ondrop="importData(event);" ondragover="ignoreData(event);"></div>
+            </div>
+        </div>
        <div class="sticky">
            <button onclick='pageAdd("title")'>Neue Titelseite</button>
            <button onclick='pageAdd("blank")'>Neue leere Seite</button>
            <button onclick='pageAdd("report")'>Neue Berichtsseite</button>
+            <button onclick='showImport()'>Import</button>
+            <button onclick='exportData()'>Export</button>
        </div>

        <main id="appContent"></main>