derped/Berichtsheft
1
0
Fork 0
Code Issues Pull requests Projects Releases Activity

Add basic Import&Export.

Browse source
This commit is contained in:
Kevin Baensch 2021-04-17 22:38:42 +02:00
parent ec1b43754a
commit bec6cf04dd
Signed by: derped
GPG key ID: C0F1D326C7626543
3 changed files with 93 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
berichtsheft/assets/css/notebook.css
View file

@ -6,15 +6,49 @@ body {
background: darkgray; 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 { hr {
border-top: 1px solid black; border-top: 1px solid black;
} }
td { td {
height: 1.5em; height: 1.5em;
word-break: break-word;
} }
table.week { table.week {
layout: fixed;
width: 100%; width: 100%;
height: 80%; height: 80%;
} }
@ -53,7 +87,6 @@ table.week tbody:last-child tr:last-child td:first-child {
} }
.vertical { .vertical {
vertical-align: middle;
writing-mode: vertical-lr; writing-mode: vertical-lr;
transform: rotate(180deg); transform: rotate(180deg);
} }
@ -94,7 +127,7 @@ table.week tbody:last-child tr:last-child td:first-child {
height: 29.7cm; height: 29.7cm;
display: grid; display: grid;
grid-template-rows: 2cm auto 2cm; grid-template-rows: 2cm auto 2cm;
background: white; background: #ffffff;
} }
.page:nth-child(odd) { .page:nth-child(odd) {
@ -111,7 +144,7 @@ table.week tbody:last-child tr:last-child td:first-child {
height: 100%; height: 100%;
grid-row: 1 / 2; grid-row: 1 / 2;
grid-column: 2 / 3; grid-column: 2 / 3;
background: white; background: #ffffff;
} }
.pg-head .flex { .pg-head .flex {
@ -155,6 +188,7 @@ div.sticky {
position: -webkit-sticky; position: -webkit-sticky;
align-self: flex-start; align-self: flex-start;
top: 0; top: 0;
z-index: 1;
} }
.flex { .flex {

49
berichtsheft/assets/js/notebook.js
View file

@ -27,6 +27,7 @@ async function init() {
"report": await fetchTemplate("report"), "report": await fetchTemplate("report"),
}; };
} }
userdata.pages = userdata.pages || [];
[...app.children].forEach(child => app.removeChild(child)) [...app.children].forEach(child => app.removeChild(child))
userdata.pages.forEach((e,i) => { userdata.pages.forEach((e,i) => {
@ -138,3 +139,51 @@ userdata = JSON.parse(localStorage.getItem("userdata")) ||
function save() { function save() {
localStorage.setItem("userdata", JSON.stringify(userdata)) 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();
}

7
berichtsheft/index.html
View file

@ -8,10 +8,17 @@
<title>Mein Berichtsheft</title> <title>Mein Berichtsheft</title>
</head> </head>
<body> <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"> <div class="sticky">
<button onclick='pageAdd("title")'>Neue Titelseite</button> <button onclick='pageAdd("title")'>Neue Titelseite</button>
<button onclick='pageAdd("blank")'>Neue leere Seite</button> <button onclick='pageAdd("blank")'>Neue leere Seite</button>
<button onclick='pageAdd("report")'>Neue Berichtsseite</button> <button onclick='pageAdd("report")'>Neue Berichtsseite</button>
<button onclick='showImport()'>Import</button>
<button onclick='exportData()'>Export</button>
</div> </div>
<main id="appContent"></main> <main id="appContent"></main>