diff --git a/css/notes_app.css b/css/notes_app.css
index f88a3fa..a718e84 100644
--- a/css/notes_app.css
+++ b/css/notes_app.css
@@ -5,6 +5,22 @@ body{
font-size:16px;
}
+#storageBrowser{
+ margin-bottom:2.5px;
+ border:1px black solid;
+ width: 300px;
+}
+
+#storageBrowserHeader{
+ display: inline-block;
+ border-bottom:1px black solid;
+ border-right: 1px black solid;
+}
+
+#refreshButtonDiv{
+ float: right;
+}
+
#mainHeader h1{
margin:0;
padding:2.5px;
@@ -22,6 +38,10 @@ body{
border:1px black solid;
}
+.browserElement{
+ display: flex;
+}
+
.loader {
border: 3.2px solid #f3f3f3;
border-radius: 50%;
diff --git a/html/index.html b/html/index.html
index 6e11624..bb01333 100644
--- a/html/index.html
+++ b/html/index.html
@@ -17,6 +17,13 @@
A sample note web app to demonstrate the usage of Promises/Async/Await.
+
diff --git a/scripts/notes_app.js b/scripts/notes_app.js
index 99330ea..e907c90 100644
--- a/scripts/notes_app.js
+++ b/scripts/notes_app.js
@@ -5,21 +5,49 @@ $(document).ready(function(){
})
$('#allNotesDiv').on('click', 'button', function() {
- console.log("1")
+ console.log("Add")
console.log(this)
- let buttonId = (this.id).split("saveNoteButton")[1];
+ 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)
- saveNoteObject(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=0;
+let id=1;
function createForm(){
-
+
id++;
+ console.log("createForm() "+id)
let wrapper = document.createElement("div")
- wrapper.setAttribute('id', id)
+ wrapper.setAttribute('id', "note"+id)
let inputsWrapper = document.createElement("div")
inputsWrapper.setAttribute('class', "noteDiv");
@@ -44,7 +72,55 @@ function createForm(){
div2.setAttribute('id', 'buttonDiv'+id)
let btn = document.createElement("button");
btn.setAttribute('type',"button");
- btn.setAttribute('id',"saveNoteButton"+id);
+ 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);
@@ -61,8 +137,9 @@ function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
-async function saveNoteObject(id){
+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,
@@ -70,6 +147,11 @@ async function saveNoteObject(id){
//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 = {
@@ -78,12 +160,16 @@ async function saveNoteObject(id){
text: noteText
};
let noteObj_serialized = JSON.stringify(noteObj); //stringify noteObj so it is displayed properly when set to local Storage
- localStorage.setItem("noteObj", noteObj_serialized);
+ 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";
}
@@ -95,13 +181,60 @@ function disableLoadingSign(id){
}
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(id).appendChild(loadingSignWrapper);
+ 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);
}
@@ -116,4 +249,3 @@ function createLoadingSign(id){
-