diff --git a/berichtsheft/assets/css/notebook.css b/berichtsheft/assets/css/notebook.css
index 4618e25..7f0957a 100644
--- 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 {
diff --git a/berichtsheft/assets/js/notebook.js b/berichtsheft/assets/js/notebook.js
index 88df914..d165731 100644
--- 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();
+}
diff --git a/berichtsheft/index.html b/berichtsheft/index.html
index d5f02b0..5137c47 100644
--- a/berichtsheft/index.html
+++ b/berichtsheft/index.html
@@ -8,10 +8,17 @@
Mein Berichtsheft
+
+
+