mdt5-2-webapp/scripts/notes_app.js

$(document).ready(function(){

    $("#addNoteDiv").on('click', function() {
        createForm();
    })

    $('#allNotesDiv').on('click', 'button', async function() {
        //
        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);
        }

        //
        console.log(buttonId)
        //
        
    })

    $('#noteStorage').on('click', 'button', async function() {
        //
        console.log("Delete")
        console.log(this)
        //

        let buttonId = (this.id).split("_")[1];

        //
        console.log(buttonId)
        //
        await removeBrowserItem(buttonId);
    })

    $("#refreshButton").on('click', async function() {
        //
        console.log("Refresh")
        //
        createLoadingSign(id="", append="noteStorage");
        enableLoadingSign(id="");
        await sleep(2000);
        disableLoadingSign(id="");
        await refreshBrowser();
    })
})

let id=1;

function createForm(){
    
    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 input = document.createElement("input");
    input.setAttribute('type', "text");
    input.setAttribute('name',"noteTitle");
    input.setAttribute('id', "inputTitle"+id);
    input.setAttribute('placeholder', "Enter title...");
    input.style.marginBottom='5px';

    let textAreaDiv = document.createElement("div");
    let textarea = document.createElement("textarea");
    textarea.setAttribute('name',"noteText");
    textarea.setAttribute('id', "noteText"+id);
    textarea.setAttribute('placeholder', "Enter notes...");
    textarea.style.width='300px';
    textarea.style.height='150px';
    textarea.style.boxSizing='border-box';
    textAreaDiv.appendChild(textarea);

    let saveNoteButton = document.createElement("button");
    saveNoteButton.setAttribute('type',"button");
    saveNoteButton.setAttribute('id',"saveNoteButton_"+id);
    saveNoteButton.innerHTML = 'Save';

    inputsWrapper.appendChild(input);
    inputsWrapper.appendChild(textAreaDiv);
    inputsWrapper.appendChild(saveNoteButton);
    wrapper.appendChild(inputsWrapper);

    document.getElementById('allNotesDiv').appendChild(wrapper);
}

function createFormWithSavedContent(item, id){
    //
    console.log("createFormWithSavedContent() "+id)
    console.log(item.title);
    console.log(item.text);
    //

    let wrapper = document.createElement("div")
    wrapper.setAttribute('id', "note"+id)
    let inputsWrapper = document.createElement("div")
    inputsWrapper.setAttribute('class', "noteDiv");

    let input = document.createElement("input");
    input.setAttribute('type', "text");
    input.setAttribute('name',"noteTitle");
    input.setAttribute('id', "inputTitle"+id);
    input.setAttribute('value', item.title);
    input.style.marginBottom='5px';

    let textAreaDiv = document.createElement("div");
    let textarea = document.createElement("textarea");
    textarea.setAttribute('name',"noteText");
    textarea.setAttribute('id', "noteText"+id);
    textarea.setAttribute('value', item.text);
    textarea.innerHTML = item.text;
    textarea.style.width='300px';
    textarea.style.height='150px';
    textarea.style.boxSizing='border-box';
    textAreaDiv.appendChild(textarea);

    let editNoteButton = document.createElement("button");
    editNoteButton.setAttribute('type',"button");
    editNoteButton.setAttribute('id',"editNoteButton_"+id);
    editNoteButton.innerHTML = 'Save';

    inputsWrapper.appendChild(input);
    inputsWrapper.appendChild(textAreaDiv);
    inputsWrapper.appendChild(editNoteButton);
    wrapper.appendChild(inputsWrapper);

    document.getElementById('allNotesDiv').appendChild(wrapper);
}

let ctr;

async function sleep(ms) {
    try {
        return new Promise(resolve => setTimeout(resolve, ms));
    }
    catch (alert) {
        return alert(alert);
    }
}

async function removeNote(id){
    try {
        return new Promise(resolve => {
            localStorage.removeItem('noteObj' + id);
            removeBrowserItem(id);
            resolve();
        });
    }
    catch (alert) {
        return alert(alert);
    }
}

async function saveNote(id){
    try {
        return new Promise(resolve => {
            let noteTitle = document.getElementById('inputTitle' + id).value;
            let noteText = document.getElementById('noteText' + id).value;
            let noteObj = {
                idK: id,
                title: noteTitle,
                text: noteText
            };
            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);
    }
}

async function refreshBrowser(){
    try {
        return new Promise(resolve => {
            let noteStorage = [];
            let keys = Object.keys(localStorage);
            let i = keys.length;
            while (i--) {
                noteStorage.push(localStorage.getItem(keys[i]));
            }
            let parentNode = document.getElementById('noteStorage');
            parentNode.innerHTML = '';
            noteStorage.forEach(element => {
                createBrowserItem(JSON.parse(element));
            });
            resolve();
        });
    }
    catch (alert) {
        return alert(alert);
    }
}

async function saveNoteObject(id, overwrite=false){
    //
    console.log("saveNoteObject() "+id)
    console.log(id)
    //
    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, 
                       //so instead of sleep would be e.g. saveToRemoteServer()...
                       //the leftover code of the async function is executed after the delay
    disableLoadingSign(id);

    if (overwrite == true){
        await removeNote(id);
    }

    let obj = await saveNote(id);
    createBrowserItem(obj);
    document.getElementById("note"+id).remove();
}

function enableLoadingSign(id){
    console.log("id:"+id);
    let target = 'loadSign'+id;
    console.log("enableLoadingSign() "+id)
    document.getElementById(target).style.display = "block";
}

function disableLoadingSign(id){
    console.log("id:"+id);
    let target = 'loadSign'+id;
    let sign = document.getElementById(target);
    sign.style.display = "none";
    sign.parentNode.removeChild(sign);
}

function createLoadingSign(id, append){
    console.log("id:"+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')
    loadingSign.setAttribute('id', target);
    loadingSignWrapper.appendChild(loadingSign);
    document.getElementById(appendTo).appendChild(loadingSignWrapper);
}

function createBrowserItem(item){
    console.log(item);
    let wrapperDiv = document.createElement('div');
    let browserItem = document.createElement('div');
    let deleteButton = document.createElement('button');
    wrapperDiv.setAttribute('class', 'browserElement');
    browserItem.innerHTML = item.title;
    deleteButton.style.marginLeft = '2px';
    deleteButton.innerHTML = "X";
    browserItem.setAttribute('id', "browserItem_"+item.idK);
    browserItem.setAttribute('onClick', "getSavedNote(this.id)");
    deleteButton.setAttribute('id', "deleteItem_" + item.idK);
    wrapperDiv.appendChild(browserItem);
    wrapperDiv.appendChild(deleteButton);
    document.getElementById('noteStorage').appendChild(wrapperDiv);
}

async function removeBrowserItem(id){
    try {
        return new Promise(resolve => {
            console.log("removeBrowserItem() " + id);
            localStorage.removeItem('noteObj' + id);
            document.getElementById("browserItem_" + id).remove();
            document.getElementById("deleteItem_" + id).remove();
            resolve();
        });
    }
    catch (alert) {
        return alert(alert);
    }
}

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 new Promise(resolve => {
        let item = JSON.parse(localStorage.getItem('noteObj'+idTmp));
        console.log("in promise "+item);
        resolve(item);
        })
    console.log(item);
    createFormWithSavedContent(item, idTmp);
}