diff --git a/scripts/notes_app.js b/scripts/notes_app.js index 846ceb1..b0c76f0 100644 --- a/scripts/notes_app.js +++ b/scripts/notes_app.js @@ -1,76 +1,99 @@ $(document).ready(function(){ $("#addNoteDiv").on('click', function() { + + // Listener für den Plus Button zum hinzufügen von Note Forms. + + console.log("Add") + createForm(); }) $('#allNotesDiv').on('click', 'button', async function() { - // + + // Listener für den Save Button zum speichern von Note Forms. + console.log("Save") - console.log(this) - // let buttonId = (this.id).split("_")[1]; let type = (this.id).split("_")[0]; - if (type == 'saveNoteButton'){ - await saveNoteObject(buttonId); - } else if (type == 'editNoteButton'){ - await saveNoteObject(buttonId, true); + try { + if (type == 'saveNoteButton'){ + // Speichern einer neuen Note. + await saveNoteObject(buttonId); + } else if (type == 'editNoteButton'){ + // Editieren einer gespeicherten Note. + await saveNoteObject(buttonId, true); + } + } catch(err){ + alert(err); } - - // - console.log(buttonId) - // - }) $('#noteStorage').on('click', 'button', async function() { - // + + // Listener für den Delete Button zum Löschen einer Note aus dem Note Browser und Local Storage. + console.log("Delete") - console.log(this) - // - + let buttonId = (this.id).split("_")[1]; - - // - console.log(buttonId) - // - await removeBrowserItem(buttonId); + try { + await removeBrowserItem(buttonId); + } catch(err) { + alert(err); + } }) $("#refreshButton").on('click', async function() { - // + + // Listener für den Refresh Button zum aktualisieren der gespeicherten Notes. + console.log("Refresh") - // + createLoadingSign(id="", append="noteStorage"); enableLoadingSign(id=""); await sleep(2000); disableLoadingSign(id=""); - await refreshBrowser(); + try { + await refreshBrowser(); + } catch(err){ + alert(err); + } }) }) let id=1; function createForm(){ - + + // Erstellt eine NoteForm und initialisiert die OnClick-Listener auf den Buttons der Form + id++; - // + console.log("createForm() "+id) - // + let wrapper = document.createElement("div"); wrapper.setAttribute('id', "note"+id); wrapper.style.margin = '2.5px'; let inputsWrapper = document.createElement("div"); inputsWrapper.setAttribute('class', "noteDiv"); + let inputDiv = document.createElement("div"); let input = document.createElement("input"); + let deleteButton = document.createElement('button'); input.setAttribute('type', "text"); input.setAttribute('name',"noteTitle"); input.setAttribute('id', "inputTitle"+id); input.setAttribute('placeholder', "Enter title..."); input.style.marginBottom='5px'; - + deleteButton.style.marginLeft = '2px'; + deleteButton.innerHTML = "X"; + deleteButton.setAttribute('id', "deleteForm_" + id); + deleteButton.setAttribute('onClick', "deleteForm(this.id)"); + deleteButton.setAttribute('class', "right"); + inputDiv.appendChild(input); + inputDiv.appendChild(deleteButton); + let textAreaDiv = document.createElement("div"); let textarea = document.createElement("textarea"); textarea.setAttribute('name',"noteText"); @@ -86,7 +109,7 @@ function createForm(){ saveNoteButton.setAttribute('id',"saveNoteButton_"+id); saveNoteButton.innerHTML = 'Save'; - inputsWrapper.appendChild(input); + inputsWrapper.appendChild(inputDiv); inputsWrapper.appendChild(textAreaDiv); inputsWrapper.appendChild(saveNoteButton); wrapper.appendChild(inputsWrapper); @@ -94,25 +117,42 @@ function createForm(){ document.getElementById('allNotesDiv').appendChild(wrapper); } +function deleteForm(idName){ + + // Aktiviert durch OnClickListener auf dem X-Button innerhalb der Form zum Schließen der Form + + console.log("deleteForm() " + id); + + id = idName.split("_")[1]; + document.getElementById("note"+id).remove(); +} + function createFormWithSavedContent(item, id){ - // - console.log("createFormWithSavedContent() "+id) - console.log(item.title); - console.log(item.text); - // + + // Holt eine gespeicherte Form aus dem Speicher und erstellt erneut eine NoteForm und initialisiert die OnClick-Listener auf den Buttons der Form + + console.log("createFormWithSavedContent() "+ id) let wrapper = document.createElement("div") wrapper.setAttribute('id', "note"+id) let inputsWrapper = document.createElement("div") inputsWrapper.setAttribute('class', "noteDiv"); + let inputDiv = document.createElement("div"); let input = document.createElement("input"); + let deleteButton = document.createElement('button'); input.setAttribute('type', "text"); input.setAttribute('name',"noteTitle"); input.setAttribute('id', "inputTitle"+id); input.setAttribute('value', item.title); input.style.marginBottom='5px'; - + deleteButton.style.marginLeft = '2px'; + deleteButton.innerHTML = "X"; + deleteButton.setAttribute('id', "deleteForm_" + id); + deleteButton.setAttribute('onClick', "deleteForm(this.id)"); + inputDiv.appendChild(input); + inputDiv.appendChild(deleteButton); + let textAreaDiv = document.createElement("div"); let textarea = document.createElement("textarea"); textarea.setAttribute('name',"noteText"); @@ -129,7 +169,7 @@ function createFormWithSavedContent(item, id){ editNoteButton.setAttribute('id',"editNoteButton_"+id); editNoteButton.innerHTML = 'Save'; - inputsWrapper.appendChild(input); + inputsWrapper.appendChild(inputDiv); inputsWrapper.appendChild(textAreaDiv); inputsWrapper.appendChild(editNoteButton); wrapper.appendChild(inputsWrapper); @@ -140,6 +180,12 @@ function createFormWithSavedContent(item, id){ let ctr; async function sleep(ms) { + + // Best Practice Variante zum pausieren von Code + // Soll hier Prozesse simulieren die bei synchronem Code zu I/O-Blocking führen würden + + console.log("sleep() " + ms); + try { return new Promise(resolve => setTimeout(resolve, ms)); } @@ -149,21 +195,28 @@ async function sleep(ms) { } async function removeNote(id){ - try { - return new Promise(resolve => { + + // Löscht eine Note aus dem Note Browser + + console.log("removeNote() " + id); + + return new Promise((resolve, reject) => { + try { localStorage.removeItem('noteObj' + id); removeBrowserItem(id); resolve(); - }); - } - catch (alert) { - return alert(alert); - } + } catch(err) { + reject(err); + } + }); } async function saveNote(id){ - try { - return new Promise(resolve => { + + console.log("saveNote() " + id); + + return new Promise((resolve, reject) => { + try { let noteTitle = document.getElementById('inputTitle' + id).value; let noteText = document.getElementById('noteText' + id).value; let noteObj = { @@ -174,16 +227,18 @@ async function saveNote(id){ let noteObj_serialized = JSON.stringify(noteObj); //stringify noteObj so it is displayed properly when set to local Storage localStorage.setItem("noteObj" + id, noteObj_serialized); resolve(noteObj); - }); - } - catch (alert) { - return alert(alert); - } + } catch(err) { + reject(err); + } + }); } async function refreshBrowser(){ - try { - return new Promise(resolve => { + + console.log("refreshBrowser()"); + + return new Promise((resolve, reject) => { + try { let noteStorage = []; let keys = Object.keys(localStorage); let i = keys.length; @@ -196,18 +251,16 @@ async function refreshBrowser(){ createBrowserItem(JSON.parse(element)); }); resolve(); - }); - } - catch (alert) { - return alert(alert); - } + } catch(err) { + reject(err); + } + }); } async function saveNoteObject(id, overwrite=false){ - // - console.log("saveNoteObject() "+id) - console.log(id) - // + + console.log("saveNoteObject() " + id + " " + overwrite); + createLoadingSign(id, append="note") enableLoadingSign(id); await sleep(10000) //sleep() simulates the delay that would occur when there is a remote server access or similar, @@ -215,24 +268,30 @@ async function saveNoteObject(id, overwrite=false){ //the leftover code of the async function is executed after the delay disableLoadingSign(id); - if (overwrite == true){ - await removeNote(id); + try { + if (overwrite == true){ + await removeNote(id); + } + let obj = await saveNote(id); + createBrowserItem(obj); + } catch(err){ + alert(err) } - - let obj = await saveNote(id); - createBrowserItem(obj); document.getElementById("note"+id).remove(); } function enableLoadingSign(id){ - console.log("id:"+id); + + console.log("enableLoadingSign() " + id); + let target = 'loadSign'+id; - console.log("enableLoadingSign() "+id) document.getElementById(target).style.display = "block"; } function disableLoadingSign(id){ - console.log("id:"+id); + + console.log("disableLoadingSign() " + id); + let target = 'loadSign'+id; let sign = document.getElementById(target); sign.style.display = "none"; @@ -240,11 +299,11 @@ function disableLoadingSign(id){ } function createLoadingSign(id, append){ - console.log("id:"+id); + + console.log("createLoadingSign() " + id); + let target = 'loadSign'+id; let appendTo = append+id; - console.log(appendTo); - console.log("createLoadingSign() "+id) let loadingSign = document.createElement('div'); let loadingSignWrapper = document.createElement('div'); loadingSign.setAttribute('class', 'loader') @@ -254,7 +313,9 @@ function createLoadingSign(id, append){ } function createBrowserItem(item){ - console.log(item); + + console.log("createBrowserItem() " + item); + let wrapperDiv = document.createElement('div'); let browserItem = document.createElement('div'); let deleteButton = document.createElement('button'); @@ -271,39 +332,49 @@ function createBrowserItem(item){ } async function removeBrowserItem(id){ - try { - return new Promise(resolve => { - console.log("removeBrowserItem() " + id); + + console.log("removeBrowserItem() " + id); + + return new Promise((resolve, reject) => { + try { localStorage.removeItem('noteObj' + id); document.getElementById("browserItem_" + id).remove(); document.getElementById("deleteItem_" + id).remove(); resolve(); - }); - } - catch (alert) { - return alert(alert); - } + } catch(err) { + reject(err); + } + }); } async function getItemFromStorage(idTmp){ - return new Promise(resolve => { - let item = JSON.parse(localStorage.getItem('noteObj'+idTmp)); - console.log("in promise "+item); - resolve(item); + + console.log("getItemFromStorage() " + idTmp); + + return new Promise((resolve, reject) => { + try { + let item = JSON.parse(localStorage.getItem('noteObj'+idTmp)); + resolve(item); + } catch (err) { + reject(err); + } }); } async function getSavedNote(id){ + console.log("getSavedNote() "+ id); + createLoadingSign("", "allNotesDiv"); enableLoadingSign(""); await sleep(5000); disableLoadingSign(""); - console.log("id before split " + id); let idTmp = id.split("_")[1]; - console.log("idTmp " +idTmp); - let item = await getItemFromStorage(idTmp); - console.log(item); - createFormWithSavedContent(item, idTmp); + try { + let item = await getItemFromStorage(idTmp); + createFormWithSavedContent(item, idTmp); + } catch(err) { + alert(err) + } }