93 lines
2.9 KiB
JavaScript
93 lines
2.9 KiB
JavaScript
|
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();
|
||
|
|
});
|