mdt5-2-webapp/scripts/notes_app.js

$(document).ready(function(){

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

    $('#allNotesDiv').on('click', 'button', function() {
        console.log("Add")
        console.log(this)
        let buttonId = (this.id).split("_")[1];
        let type = (this.id).split("_")[0];
        if (type == 'saveNoteButton'){
            saveNoteObject(buttonId);
        } else if (type == 'editNoteButton'){
            saveNoteObject(buttonId, true);
        }
        console.log(buttonId)
        
    })

    $('#noteStorage').on('click', 'button', function() {
        console.log("Delete")
        console.log(this)
        let buttonId = (this.id).split("_")[1];
        console.log(buttonId)
        removeBrowserItem(buttonId);
    })

    //$('.browserElement').on('click', 'div', function() {
    //    console.log("Load");
    //    console.log(this);
    //    let divId = (this.id).split("_")[1];
    //   console.log(divId);
    //    getSavedNote(divId);
    //})

    $("#refreshButton").on('click', function() {
        console.log("Refresh")
        updateNoteBrowser();
    })
})

let id=1;

function createForm(){
    
    id++;
    console.log("createForm() "+id)
    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('placeholder', "Enter title...");
    input.style.marginBottom='5px';

    let div1 = 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';
    div1.appendChild(textarea);

    let div2 = document.createElement("div")
    div2.setAttribute('id', 'buttonDiv'+id)
    let btn = document.createElement("button");
    btn.setAttribute('type',"button");
    btn.setAttribute('id',"saveNoteButton_"+id);
    btn.innerHTML = 'Save';

    inputsWrapper.appendChild(input);
    inputsWrapper.appendChild(div1);
    inputsWrapper.appendChild(btn);
    wrapper.appendChild(inputsWrapper);

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

function createFormWithSavedContent(id){

    console.log("createFormWithSavedContent() "+id)
    item = JSON.parse(localStorage.getItem('noteObj'+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);
    //document.getElementById("inputTitle"+id).value = item.title;
    input.style.marginBottom='5px';

    let div1 = 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';
    //document.getElementById('noteText'+id).value = item.text;
    div1.appendChild(textarea);

    let div2 = document.createElement("div")
    div2.setAttribute('id', 'buttonDiv'+id)
    let btn = document.createElement("button");
    btn.setAttribute('type',"button");
    btn.setAttribute('id',"editNoteButton_"+id);
    btn.innerHTML = 'Save';

    inputsWrapper.appendChild(input);
    inputsWrapper.appendChild(div1);
    inputsWrapper.appendChild(btn);
    wrapper.appendChild(inputsWrapper);

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

let ctr;

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

async function saveNoteObject(id, overwrite=false){

    console.log("saveNoteObject() "+id)
    console.log(id)
    enableLoadingSign(id);
    await sleep(10000) //sleep simulates the 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){
        localStorage.removeItem('noteObj'+id);
        removeBrowserItem(id);
    }

    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);
    createBrowserItem(noteObj);

    console.log(noteObj_serialized)

    document.getElementById("note"+id).remove();
}

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

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

function createLoadingSign(id){
    console.log("createLoadingSign() "+id)
    let loadingSign = document.createElement('div');
    let loadingSignWrapper = document.createElement('div');
    loadingSign.setAttribute('class', 'loader')
    loadingSign.setAttribute('id', 'loadSign'+id);
    loadingSignWrapper.appendChild(loadingSign);
    document.getElementById("note"+id).appendChild(loadingSignWrapper);
}

function updateNoteBrowser(){

    let noteStorage = [];
    let keys = Object.keys(localStorage);
    let i = keys.length;

    while ( i-- ) {
        noteStorage.push(localStorage.getItem(keys[i]));
    }

    localStorage.clear();

    noteStorage.forEach(element => {
        createBrowserItem(JSON.parse(element))
    });

}

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

function removeBrowserItem(id){
    console.log("removeBrowserItem() "+id)
    localStorage.removeItem('noteObj'+id);
    document.getElementById("browserItem_"+id).remove();
    document.getElementById("deleteItem_"+id).remove();
}

function getSavedNote(id){
    console.log("getSavedNote() "+ id);
    let idTmp = id.split("_")[1];
    createFormWithSavedContent(idTmp);
}