Beginning of menu implementation for importing files

index.html

@@ -163,6 +163,27 @@
             background: rgba(0, 0, 0, .2);
         }
 
+        /**
+          * Import Modal with Upload Button
+          */
+
+        .upload-btn {
+            border: 1px solid rgba(0, 0, 0, .33);
+            background: #fff;
+        }
+
+        .upload-btn:hover {
+            background: rgba(0, 0, 0, .1);
+        }
+
+        .upload-btn:active {
+            background: rgba(0, 0, 0, .2);
+        }
+
+        .upload-btn .upload-input {
+            display: none;
+        }
+        
         /**
           * Canvas
           */

js/export/export.js

@@ -96,14 +96,21 @@ function importFromJson(json) {
 }
 
 function exportToFile() {
-    const name = 'placeholder.fsm';
-    const json = exportToJson();
+    if(activeDocument === null) {
+        return;
+    }
+
+    const document = documents[activeDocument];
+    const name = `${new Date(document.createdAt).toLocaleDateString()} - ${document.name || 'Unbenannt'}.fsm`;
+    const json = exportToJson(document);
     downloadFile(name, json, 'application/json');
 }
 
 function downloadFile(name, content, type) {
     const element = document.createElement('a');
 
+    console.log(content);
+
     element.setAttribute('href', `data:${type},charset=utf-8,${content}`);
     element.setAttribute('download', name);
 

js/menu.js

@@ -66,7 +66,23 @@ modalExport.addFooterBtn('Download .fsm', 'btn', () => {
 const modalImport = new tingle.modal({
     footer: true,
 });
-modalImport.setContent('<h3>Dokument importieren</h3><label for="importUpload" class="btn upload-btn"><input type="file" class="upload-input"> <i class="fa fa-upload"></i> Datei auswählen</label>');
+modalImport.setContent('<h3>Dokument importieren</h3><label for="importUpload" class="btn upload-btn"><input type="file" accept=".fsm" class="upload-input" id="importUpload"> <i class="fa fa-upload"></i> Datei auswählen</label>');
+modalImport.addFooterBtn('Laden', 'btn', () => {
+    const el = document.getElementById('importUpload');
+    const file = el.files[0];
+    console.log(file);
+
+    if(file) {
+        const reader = new FileReader();
+        reader.readAsText(file, 'UTF-8');
+        reader.onload = (evt) => {
+            console.log(evt.target.result);
+        };
+        reader.onerror = (evt) => {
+            console.log(evt);
+        }
+    }
+});
 
 document.getElementById('saveBtn').addEventListener('click', () => {
     if(activeDocument === null) {