fsm-designer/js/menu.js

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) => {
            return b.document.createdAt - a.document.createdAt
        });
        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: () => {
        setTimeout(() => {
            const el = document.getElementById('previewImage');
            el.src = canvas.toDataURL('image/png');
        }, 100);
    }
});
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" 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];

    if (file) {
        console.log(file.type);
        const reader = new FileReader();
        // TODO: Check for file type etc.
        reader.readAsText(file, 'UTF-8');
        reader.onload = (evt) => {
            const json = evt.target.result;
            // TODO: Add error handling
            importFromJson(json);
            modalImport.close();
        };
        reader.onerror = (evt) => {
            alert('Ein Fehler beim Einlesen der Datei ist aufgetreten. Womöglich muss hier ein Bug behoben werden... :(');
            modalImport.close();
        }
    }
});

const modalSimulate = new tingle.modal({
    footer: true,
});
modalSimulate.setContent('<h3>Maschine simulieren</h3> <label for="singleCharMode"><input type="checkbox" id="singleCharMode" checked> Eingabe einzelner Buchstaben</label> <br> <label for="simulationInput">Eingabe</label> <input type="text" id="simulationInput">');
modalSimulate.addFooterBtn('Simulation starten', 'btn', () => {
    modalSimulate.close();
    const input = document.getElementById('simulationInput').value;
    const singleCharMode = document.getElementById('singleCharMode').checked;
    simulate(input, singleCharMode);
});

document.getElementById('saveBtn').addEventListener('click', () => {
    if (activeDocument === null) {
        return;
    }

    if (documents[activeDocument].name !== null) {
        saveToLocalStorage();
    } else {
        modalSave.open();
    }
});

document.getElementById('addBtn').addEventListener('click', () => {
    selectedObject = null;
    currentConnection = null;
    const doc = new FSMDocument(null);
    addDocument(doc);
    switchDocument(doc);
});

document.getElementById('openBtn').addEventListener('click', () => {
    selectedObject = null;
    currentConnection = null;
    modalOpen.open();
});

document.getElementById('importBtn').addEventListener('click', () => {
    selectedObject = null;
    currentConnection = null;
    modalImport.open();
});

document.getElementById('exportBtn').addEventListener('click', () => {
    selectedObject = null;
    currentConnection = null;
    modalExport.open();
});

document.getElementById('simulateBtn').addEventListener('click', () => {
    selectedObject = null;
    currentConnection = null;
    modalSimulate.open();
});

document.addEventListener('dragover', (event) => {
    elements.dragOverlay.classList.add('visible');
    event.preventDefault();
});

document.addEventListener('dragexit', (event) => {
    elements.dragOverlay.classList.remove('visible');
});

document.addEventListener('drop', (event) => {
    const item = event.dataTransfer.items[0];
    if (item.kind === 'file') {
        const file = item.getAsFile();

        const lastDot = file.name.lastIndexOf('.');
        const ext = file.name.slice(lastDot + 1);

        if (ext === 'fsm') {
            const reader = new FileReader();
            reader.readAsText(file, 'UTF-8');
            reader.onload = (evt) => {
                const json = evt.target.result;
                // TODO: Add error handling
                try {
                    importFromJson(json);
                } catch (e) {
                    alert('Ein Fehler ist beim Einlesen der Datei aufgetreten. Die Datei scheint nicht im richtigen Format zu sein.')
                }
            };
            reader.onerror = (evt) => {
                alert('Ein Fehler beim Einlesen der Datei ist aufgetreten. Womöglich muss hier ein Bug behoben werden... :(');
            };
        } else {
            alert('Dieses Dateiformat wird nicht unterstützt.')
        }
    }

    elements.dragOverlay.classList.remove('visible');
    event.preventDefault();
    return false;
});