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

note app basic finished

Browse Source
This commit is contained in:
Gregor Wüst 2020-06-05 13:38:05 +02:00
parent e4a008d41e
commit b9ebe41370
3 changed files with 171 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
css/notes_app.css
View File

@ -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%;

7
html/index.html
View File

@ -17,6 +17,13 @@
A sample note web app to demonstrate the usage of Promises/Async/Await.
</h6>
</div>
<div id=storageBrowser>
<div id=storageBrowserHeader>All Notes</div>
<div id=refreshButtonDiv>
<button type="button" id=refreshButton>R</button>
</div>
<div id=noteStorage></div>
</div>
<div id=addNoteDiv>
<button type="button" id=addNoteButton>+</button>
</div>

154
scripts/notes_app.js
View File

@ -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){