From 3ff3c90cf648908ba9b8e333b2c7dda0eae00c5f Mon Sep 17 00:00:00 2001
From: KingOfDog <kingofdog@web.de>
Date: Tue, 5 Mar 2019 19:18:21 +0100
Subject: [PATCH] Beginning of menu implementation for importing files

---
 index.html          | 21 +++++++++++++++++++++
 js/export/export.js | 11 +++++++++--
 js/menu.js          | 18 +++++++++++++++++-
 3 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 8603cae..0fcb000 100644
--- a/index.html
+++ b/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
           */
diff --git a/js/export/export.js b/js/export/export.js
index b1c82e6..baafd62 100644
--- a/js/export/export.js
+++ b/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);
 
diff --git a/js/menu.js b/js/menu.js
index 2d31d69..c8bdcd7 100644
--- a/js/menu.js
+++ b/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) {