wuestgr61132/mdt5-2-webapp
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

final

Browse Source 
missing:
 - commentary
 - its ugly but working
This commit is contained in:
Gregor Wüst 2020-06-06 17:37:12 +02:00
parent b9ebe41370
commit 487f4e0bfb
3 changed files with 198 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
css/notes_app.css
View File

@ -6,19 +6,39 @@ body{
} }
#storageBrowser{ #storageBrowser{
margin-bottom:2.5px; background-color: #ddfe7d ;
margin:2.5px;
border-radius: 5px;
border:1px black solid; border:1px black solid;
width: 300px; width: 300px;
} }
#storageBrowserHeader{ #storageBrowserHeader{
background-color:#f9f5f4;
display: inline-block; display: inline-block;
font-weight: bold;
border-radius: 5px;
border-bottom:1px black solid; border-bottom:1px black solid;
border-right: 1px black solid; border-right: 1px black solid;
overflow: hidden;
} }
#refreshButtonDiv{ .right{
float:right; float:right;
padding: 1px;
}
#addNoteDiv{
margin:2.5px;
}
#addNoteButton{
height: 26px;
width: 26px;
font-size: 40px;
display: flex;
align-items: center;
justify-content: center;
} }
#mainHeader h1{ #mainHeader h1{
@ -32,7 +52,9 @@ body{
} }
.noteDiv{ .noteDiv{
background-color: #ddfe7d ;
padding:5px; padding:5px;
border-radius: 5px;
margin-top:2px; margin-top:2px;
display: inline-block; display: inline-block;
border:1px black solid; border:1px black solid;

9
html/index.html
View File

@ -6,7 +6,9 @@
<title>Document</title> <title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="/scripts/notes_app.js"></script> <script src="/scripts/notes_app.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/css/notes_app.css" type="text/css"> <link rel="stylesheet" href="/css/notes_app.css" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head> </head>
<body> <body>
<div id=mainHeader> <div id=mainHeader>
@ -14,14 +16,15 @@
Quick Notes Quick Notes
</h1> </h1>
<h6> <h6>
A sample note web app to demonstrate the usage of Promises/Async/Await. A simple note web app to demonstrate the usage of Promises/Async/Await.
</h6> </h6>
</div> </div>
<div id=storageBrowser> <div id=storageBrowser>
<div id=storageBrowserHeader>All Notes</div> <div id=storageBrowserHeader>All Notes</div>
<div id=refreshButtonDiv> <div class=right>
<button type="button" id=refreshButton>R</button> <button class="btn btn-default btn-xs" id="refreshButton"><span class="glyphicon glyphicon-refresh"></span></button>
</div> </div>
<div id=noteStorage></div> <div id=noteStorage></div>
</div> </div>
<div id=addNoteDiv> <div id=addNoteDiv>

267
scripts/notes_app.js
View File

@ -4,39 +4,49 @@ $(document).ready(function(){
createForm(); createForm();
}) })
$('#allNotesDiv').on('click', 'button', function() { $('#allNotesDiv').on('click', 'button', async function() {
console.log("Add") //
console.log("Save")
console.log(this) console.log(this)
//
let buttonId = (this.id).split("_")[1]; let buttonId = (this.id).split("_")[1];
let type = (this.id).split("_")[0]; let type = (this.id).split("_")[0];
if (type == 'saveNoteButton'){ if (type == 'saveNoteButton'){
saveNoteObject(buttonId); await saveNoteObject(buttonId);
} else if (type == 'editNoteButton'){ } else if (type == 'editNoteButton'){
saveNoteObject(buttonId, true); await saveNoteObject(buttonId, true);
} }
//
console.log(buttonId) console.log(buttonId)
//
}) })
$('#noteStorage').on('click', 'button', function() { $('#noteStorage').on('click', 'button', async function() {
//
console.log("Delete") console.log("Delete")
console.log(this) console.log(this)
//
let buttonId = (this.id).split("_")[1]; let buttonId = (this.id).split("_")[1];
//
console.log(buttonId) console.log(buttonId)
removeBrowserItem(buttonId); //
await removeBrowserItem(buttonId);
}) })
//$('.browserElement').on('click', 'div', function() { $("#refreshButton").on('click', async 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") console.log("Refresh")
updateNoteBrowser(); //
createLoadingSign(id="", append="noteStorage");
enableLoadingSign(id="");
await sleep(2000);
disableLoadingSign(id="");
await refreshBrowser();
}) })
}) })
@ -45,10 +55,13 @@ let id=1;
function createForm(){ function createForm(){
id++; id++;
//
console.log("createForm() "+id) console.log("createForm() "+id)
let wrapper = document.createElement("div") //
wrapper.setAttribute('id', "note"+id) let wrapper = document.createElement("div");
let inputsWrapper = document.createElement("div") wrapper.setAttribute('id', "note"+id);
wrapper.style.margin = '2.5px';
let inputsWrapper = document.createElement("div");
inputsWrapper.setAttribute('class', "noteDiv"); inputsWrapper.setAttribute('class', "noteDiv");
let input = document.createElement("input"); let input = document.createElement("input");
@ -58,7 +71,7 @@ function createForm(){
input.setAttribute('placeholder', "Enter title..."); input.setAttribute('placeholder', "Enter title...");
input.style.marginBottom='5px'; input.style.marginBottom='5px';
let div1 = document.createElement("div"); let textAreaDiv = document.createElement("div");
let textarea = document.createElement("textarea"); let textarea = document.createElement("textarea");
textarea.setAttribute('name',"noteText"); textarea.setAttribute('name',"noteText");
textarea.setAttribute('id', "noteText"+id); textarea.setAttribute('id', "noteText"+id);
@ -66,30 +79,27 @@ function createForm(){
textarea.style.width='300px'; textarea.style.width='300px';
textarea.style.height='150px'; textarea.style.height='150px';
textarea.style.boxSizing='border-box'; textarea.style.boxSizing='border-box';
div1.appendChild(textarea); textAreaDiv.appendChild(textarea);
let div2 = document.createElement("div") let saveNoteButton = document.createElement("button");
div2.setAttribute('id', 'buttonDiv'+id) saveNoteButton.setAttribute('type',"button");
let btn = document.createElement("button"); saveNoteButton.setAttribute('id',"saveNoteButton_"+id);
btn.setAttribute('type',"button"); saveNoteButton.innerHTML = 'Save';
btn.setAttribute('id',"saveNoteButton_"+id);
btn.innerHTML = 'Save';
inputsWrapper.appendChild(input); inputsWrapper.appendChild(input);
inputsWrapper.appendChild(div1); inputsWrapper.appendChild(textAreaDiv);
inputsWrapper.appendChild(btn); inputsWrapper.appendChild(saveNoteButton);
wrapper.appendChild(inputsWrapper); wrapper.appendChild(inputsWrapper);
document.getElementById('allNotesDiv').appendChild(wrapper); document.getElementById('allNotesDiv').appendChild(wrapper);
} }
function createFormWithSavedContent(id){ function createFormWithSavedContent(item, id){
//
console.log("createFormWithSavedContent() "+id) console.log("createFormWithSavedContent() "+id)
item = JSON.parse(localStorage.getItem('noteObj'+id))
console.log(item.title); console.log(item.title);
console.log(item.text); console.log(item.text);
//
let wrapper = document.createElement("div") let wrapper = document.createElement("div")
wrapper.setAttribute('id', "note"+id) wrapper.setAttribute('id', "note"+id)
@ -101,10 +111,9 @@ function createFormWithSavedContent(id){
input.setAttribute('name',"noteTitle"); input.setAttribute('name',"noteTitle");
input.setAttribute('id', "inputTitle"+id); input.setAttribute('id', "inputTitle"+id);
input.setAttribute('value', item.title); input.setAttribute('value', item.title);
//document.getElementById("inputTitle"+id).value = item.title;
input.style.marginBottom='5px'; input.style.marginBottom='5px';
let div1 = document.createElement("div"); let textAreaDiv = document.createElement("div");
let textarea = document.createElement("textarea"); let textarea = document.createElement("textarea");
textarea.setAttribute('name',"noteText"); textarea.setAttribute('name',"noteText");
textarea.setAttribute('id', "noteText"+id); textarea.setAttribute('id', "noteText"+id);
@ -113,19 +122,16 @@ function createFormWithSavedContent(id){
textarea.style.width='300px'; textarea.style.width='300px';
textarea.style.height='150px'; textarea.style.height='150px';
textarea.style.boxSizing='border-box'; textarea.style.boxSizing='border-box';
//document.getElementById('noteText'+id).value = item.text; textAreaDiv.appendChild(textarea);
div1.appendChild(textarea);
let div2 = document.createElement("div") let editNoteButton = document.createElement("button");
div2.setAttribute('id', 'buttonDiv'+id) editNoteButton.setAttribute('type',"button");
let btn = document.createElement("button"); editNoteButton.setAttribute('id',"editNoteButton_"+id);
btn.setAttribute('type',"button"); editNoteButton.innerHTML = 'Save';
btn.setAttribute('id',"editNoteButton_"+id);
btn.innerHTML = 'Save';
inputsWrapper.appendChild(input); inputsWrapper.appendChild(input);
inputsWrapper.appendChild(div1); inputsWrapper.appendChild(textAreaDiv);
inputsWrapper.appendChild(btn); inputsWrapper.appendChild(editNoteButton);
wrapper.appendChild(inputsWrapper); wrapper.appendChild(inputsWrapper);
document.getElementById('allNotesDiv').appendChild(wrapper); document.getElementById('allNotesDiv').appendChild(wrapper);
@ -133,25 +139,31 @@ function createFormWithSavedContent(id){
let ctr; let ctr;
function sleep(ms) { async function sleep(ms) {
try {
return new Promise(resolve => setTimeout(resolve, ms)); return new Promise(resolve => setTimeout(resolve, ms));
} }
catch (alert) {
async function saveNoteObject(id, overwrite=false){ return alert(alert);
}
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);
} }
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 noteTitle = document.getElementById('inputTitle' + id).value;
let noteText = document.getElementById('noteText' + id).value; let noteText = document.getElementById('noteText' + id).value;
let noteObj = { let noteObj = {
@ -161,91 +173,132 @@ async function saveNoteObject(id, overwrite=false){
}; };
let noteObj_serialized = JSON.stringify(noteObj); //stringify noteObj so it is displayed properly when set to local Storage let noteObj_serialized = JSON.stringify(noteObj); //stringify noteObj so it is displayed properly when set to local Storage
localStorage.setItem("noteObj" + id, noteObj_serialized); localStorage.setItem("noteObj" + id, noteObj_serialized);
createBrowserItem(noteObj); resolve(noteObj);
});
}
catch (alert) {
return alert(alert);
}
}
console.log(noteObj_serialized) 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(); document.getElementById("note"+id).remove();
} }
function enableLoadingSign(id){ function enableLoadingSign(id){
console.log("id:"+id);
let target = 'loadSign'+id;
console.log("enableLoadingSign() "+id) console.log("enableLoadingSign() "+id)
createLoadingSign(id) document.getElementById(target).style.display = "block";
document.getElementById('loadSign'+id).style.display = "block";
} }
function disableLoadingSign(id){ function disableLoadingSign(id){
let sign = document.getElementById('loadSign'+id); console.log("id:"+id);
let target = 'loadSign'+id;
let sign = document.getElementById(target);
sign.style.display = "none"; sign.style.display = "none";
sign.parentNode.removeChild(sign); sign.parentNode.removeChild(sign);
} }
function createLoadingSign(id){ function createLoadingSign(id, append){
console.log("id:"+id);
let target = 'loadSign'+id;
let appendTo = append+id;
console.log(appendTo);
console.log("createLoadingSign() "+id) console.log("createLoadingSign() "+id)
let loadingSign = document.createElement('div'); let loadingSign = document.createElement('div');
let loadingSignWrapper = document.createElement('div'); let loadingSignWrapper = document.createElement('div');
loadingSign.setAttribute('class', 'loader') loadingSign.setAttribute('class', 'loader')
loadingSign.setAttribute('id', 'loadSign'+id); loadingSign.setAttribute('id', target);
loadingSignWrapper.appendChild(loadingSign); loadingSignWrapper.appendChild(loadingSign);
document.getElementById("note"+id).appendChild(loadingSignWrapper); document.getElementById(appendTo).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){ function createBrowserItem(item){
console.log(item); console.log(item);
let wrapperDiv = document.createElement('div'); let wrapperDiv = document.createElement('div');
let browserItem = document.createElement('div'); let browserItem = document.createElement('div');
let button = document.createElement('button'); let deleteButton = document.createElement('button');
wrapperDiv.setAttribute('class', 'browserElement'); wrapperDiv.setAttribute('class', 'browserElement');
browserItem.innerHTML = item.title; browserItem.innerHTML = item.title;
button.innerHTML = "X"; deleteButton.style.marginLeft = '2px';
deleteButton.innerHTML = "X";
browserItem.setAttribute('id', "browserItem_"+item.idK); browserItem.setAttribute('id', "browserItem_"+item.idK);
browserItem.setAttribute('onClick', "getSavedNote(this.id)"); browserItem.setAttribute('onClick', "getSavedNote(this.id)");
button.setAttribute('id', "deleteItem_" + item.idK); deleteButton.setAttribute('id', "deleteItem_" + item.idK);
wrapperDiv.appendChild(browserItem); wrapperDiv.appendChild(browserItem);
wrapperDiv.appendChild(button); wrapperDiv.appendChild(deleteButton);
document.getElementById('noteStorage').appendChild(wrapperDiv); document.getElementById('noteStorage').appendChild(wrapperDiv);
} }
function removeBrowserItem(id){ async function removeBrowserItem(id){
console.log("removeBrowserItem() "+id) try {
return new Promise(resolve => {
console.log("removeBrowserItem() " + id);
localStorage.removeItem('noteObj' + id); localStorage.removeItem('noteObj' + id);
document.getElementById("browserItem_" + id).remove(); document.getElementById("browserItem_" + id).remove();
document.getElementById("deleteItem_" + id).remove(); document.getElementById("deleteItem_" + id).remove();
resolve();
});
}
catch (alert) {
return alert(alert);
}
} }
function getSavedNote(id){ async function getSavedNote(id){
console.log("getSavedNote() "+ id); console.log("getSavedNote() "+ id);
createLoadingSign("", "allNotesDiv");
enableLoadingSign("");
await sleep(5000);
disableLoadingSign("");
console.log("id before split " + id);
let idTmp = id.split("_")[1]; let idTmp = id.split("_")[1];
createFormWithSavedContent(idTmp); 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);
} }