Visual improvements and new menu with cool buttons

js/menu.js

@@ -0,0 +1,93 @@
+const modalSave = new tingle.modal({
+    footer: true,
+
+});
+modalSave.setContent('<h3>Dokument speichern</h3><input type="text" id="saveName" placeholder="Bitte gib den Namen des Dokuments ein">');
+modalSave.addFooterBtn('Schließen', 'btn', () => {
+    document.getElementById('saveName').value = "";
+    modalSave.close();
+});
+modalSave.addFooterBtn('Speichern', 'btn', () => {
+    const input = document.getElementById('saveName');
+    const name = input.value;
+
+    if(name.trim().length > 0) {
+        documents[activeDocument].name = name;
+        saveToLocalStorage();
+        modalSave.close();
+    } else {
+
+    }
+});
+
+const modalOpen = new tingle.modal({
+    beforeOpen: () => {
+        const entries = getLocalStorageEntries().sort((a, b) => {
+            console.log(a, b);
+            return b.document.createdAt - a.document.createdAt
+        });
+        console.log(entries);
+        let html = '<h3>Gespeicherte Dokumente</h3><ul class="file-list">';
+        entries.forEach(entry => html += `<li class="file-list-item" data-id="${entry.document.id}">${entry.document.name} (${new Date(entry.document.createdAt).toLocaleString()})</li>`);
+        html += '</ul>';
+        modalOpen.setContent(html);
+
+        for(let element of document.getElementsByClassName('file-list-item')) {
+            element.addEventListener('click', () => {
+                const entry = entries.find(entry => entry.document.id === element.getAttribute('data-id'));
+                addDocument(entry.document);
+                switchDocument(entry.document);
+                modalOpen.close();
+            });
+        }
+    },
+});
+
+const modalExport = new tingle.modal({
+    footer: true,
+    beforeOpen: () => {
+        const el = document.getElementById('previewImage');
+        el.src = canvas.toDataURL('image/png');
+    }
+});
+modalExport.setContent('<h3>Dokument exportieren</h3><img src="" id="previewImage">');
+modalExport.addFooterBtn('Download .png', 'btn', () => {
+    exportToImageFile();
+    modalExport.close();
+});
+modalExport.addFooterBtn('Download .svg', 'btn', () => {
+
+});
+modalExport.addFooterBtn('Download .fsm', 'btn', () => {
+    exportToFile();
+    modalExport.close();
+});
+
+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>');
+
+document.getElementById('saveBtn').addEventListener('click', () => {
+    if(activeDocument === null) {
+        return;
+    }
+
+    if(documents[activeDocument].name !== null) {
+        saveToLocalStorage();
+    } else {
+        modalSave.open();
+    }
+});
+
+document.getElementById('openBtn').addEventListener('click', () => {
+    modalOpen.open();
+});
+
+document.getElementById('importBtn').addEventListener('click', () => {
+    modalImport.open();
+});
+
+document.getElementById('exportBtn').addEventListener('click', () => {
+    modalExport.open();
+});