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

save

master
Gregor Wüst 3 years ago
parent
20287ddfbc
commit
789469e89a
1 changed files with 161 additions and 90 deletions
Split View Show Diff Stats
  1. 161
    90
      scripts/notes_app.js

+ 161
- 90
scripts/notes_app.js View File

@@ -1,76 +1,99 @@
$(document).ready(function(){

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

// Listener für den Plus Button zum hinzufügen von Note Forms.

console.log("Add")

createForm();
})

$('#allNotesDiv').on('click', 'button', async function() {
//
// Listener für den Save Button zum speichern von Note Forms.

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);
try {
if (type == 'saveNoteButton'){
// Speichern einer neuen Note.
await saveNoteObject(buttonId);
} else if (type == 'editNoteButton'){
// Editieren einer gespeicherten Note.
await saveNoteObject(buttonId, true);
}
} catch(err){
alert(err);
}

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

$('#noteStorage').on('click', 'button', async function() {
//
console.log("Delete")
console.log(this)
//
// Listener für den Delete Button zum Löschen einer Note aus dem Note Browser und Local Storage.

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

//
console.log(buttonId)
//
await removeBrowserItem(buttonId);
try {
await removeBrowserItem(buttonId);
} catch(err) {
alert(err);
}
})

$("#refreshButton").on('click', async function() {
//
// Listener für den Refresh Button zum aktualisieren der gespeicherten Notes.

console.log("Refresh")
//
createLoadingSign(id="", append="noteStorage");
enableLoadingSign(id="");
await sleep(2000);
disableLoadingSign(id="");
await refreshBrowser();
try {
await refreshBrowser();
} catch(err){
alert(err);
}
})
})

let id=1;

function createForm(){

// Erstellt eine NoteForm und initialisiert die OnClick-Listener auf den Buttons der Form

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

deleteButton.style.marginLeft = '2px';
deleteButton.innerHTML = "X";
deleteButton.setAttribute('id', "deleteForm_" + id);
deleteButton.setAttribute('onClick', "deleteForm(this.id)");
deleteButton.setAttribute('class', "right");
inputDiv.appendChild(input);
inputDiv.appendChild(deleteButton);
let textAreaDiv = document.createElement("div");
let textarea = document.createElement("textarea");
textarea.setAttribute('name',"noteText");
@@ -86,7 +109,7 @@ function createForm(){
saveNoteButton.setAttribute('id',"saveNoteButton_"+id);
saveNoteButton.innerHTML = 'Save';

inputsWrapper.appendChild(input);
inputsWrapper.appendChild(inputDiv);
inputsWrapper.appendChild(textAreaDiv);
inputsWrapper.appendChild(saveNoteButton);
wrapper.appendChild(inputsWrapper);
@@ -94,25 +117,42 @@ function createForm(){
document.getElementById('allNotesDiv').appendChild(wrapper);
}

function deleteForm(idName){

// Aktiviert durch OnClickListener auf dem X-Button innerhalb der Form zum Schließen der Form

console.log("deleteForm() " + id);

id = idName.split("_")[1];
document.getElementById("note"+id).remove();
}

function createFormWithSavedContent(item, id){
//
console.log("createFormWithSavedContent() "+id)
console.log(item.title);
console.log(item.text);
//
// Holt eine gespeicherte Form aus dem Speicher und erstellt erneut eine NoteForm und initialisiert die OnClick-Listener auf den Buttons der Form

console.log("createFormWithSavedContent() "+ id)

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

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

deleteButton.style.marginLeft = '2px';
deleteButton.innerHTML = "X";
deleteButton.setAttribute('id', "deleteForm_" + id);
deleteButton.setAttribute('onClick', "deleteForm(this.id)");
inputDiv.appendChild(input);
inputDiv.appendChild(deleteButton);
let textAreaDiv = document.createElement("div");
let textarea = document.createElement("textarea");
textarea.setAttribute('name',"noteText");
@@ -129,7 +169,7 @@ function createFormWithSavedContent(item, id){
editNoteButton.setAttribute('id',"editNoteButton_"+id);
editNoteButton.innerHTML = 'Save';

inputsWrapper.appendChild(input);
inputsWrapper.appendChild(inputDiv);
inputsWrapper.appendChild(textAreaDiv);
inputsWrapper.appendChild(editNoteButton);
wrapper.appendChild(inputsWrapper);
@@ -140,6 +180,12 @@ function createFormWithSavedContent(item, id){
let ctr;

async function sleep(ms) {

// Best Practice Variante zum pausieren von Code
// Soll hier Prozesse simulieren die bei synchronem Code zu I/O-Blocking führen würden

console.log("sleep() " + ms);

try {
return new Promise(resolve => setTimeout(resolve, ms));
}
@@ -149,21 +195,28 @@ async function sleep(ms) {
}

async function removeNote(id){
try {
return new Promise(resolve => {

// Löscht eine Note aus dem Note Browser

console.log("removeNote() " + id);

return new Promise((resolve, reject) => {
try {
localStorage.removeItem('noteObj' + id);
removeBrowserItem(id);
resolve();
});
}
catch (alert) {
return alert(alert);
}
} catch(err) {
reject(err);
}
});
}

async function saveNote(id){
try {
return new Promise(resolve => {

console.log("saveNote() " + id);

return new Promise((resolve, reject) => {
try {
let noteTitle = document.getElementById('inputTitle' + id).value;
let noteText = document.getElementById('noteText' + id).value;
let noteObj = {
@@ -174,16 +227,18 @@ async function saveNote(id){
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);
}
} catch(err) {
reject(err);
}
});
}

async function refreshBrowser(){
try {
return new Promise(resolve => {

console.log("refreshBrowser()");

return new Promise((resolve, reject) => {
try {
let noteStorage = [];
let keys = Object.keys(localStorage);
let i = keys.length;
@@ -196,18 +251,16 @@ async function refreshBrowser(){
createBrowserItem(JSON.parse(element));
});
resolve();
});
}
catch (alert) {
return alert(alert);
}
} catch(err) {
reject(err);
}
});
}

async function saveNoteObject(id, overwrite=false){
//
console.log("saveNoteObject() "+id)
console.log(id)
//
console.log("saveNoteObject() " + id + " " + overwrite);
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,
@@ -215,24 +268,30 @@ async function saveNoteObject(id, overwrite=false){
//the leftover code of the async function is executed after the delay
disableLoadingSign(id);

if (overwrite == true){
await removeNote(id);
try {
if (overwrite == true){
await removeNote(id);
}
let obj = await saveNote(id);
createBrowserItem(obj);
} catch(err){
alert(err)
}

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

function enableLoadingSign(id){
console.log("id:"+id);

console.log("enableLoadingSign() " + id);

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

function disableLoadingSign(id){
console.log("id:"+id);

console.log("disableLoadingSign() " + id);

let target = 'loadSign'+id;
let sign = document.getElementById(target);
sign.style.display = "none";
@@ -240,11 +299,11 @@ function disableLoadingSign(id){
}

function createLoadingSign(id, append){
console.log("id:"+id);

console.log("createLoadingSign() " + 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')
@@ -254,7 +313,9 @@ function createLoadingSign(id, append){
}

function createBrowserItem(item){
console.log(item);

console.log("createBrowserItem() " + item);

let wrapperDiv = document.createElement('div');
let browserItem = document.createElement('div');
let deleteButton = document.createElement('button');
@@ -271,39 +332,49 @@ function createBrowserItem(item){
}

async function removeBrowserItem(id){
try {
return new Promise(resolve => {
console.log("removeBrowserItem() " + id);

console.log("removeBrowserItem() " + id);

return new Promise((resolve, reject) => {
try {
localStorage.removeItem('noteObj' + id);
document.getElementById("browserItem_" + id).remove();
document.getElementById("deleteItem_" + id).remove();
resolve();
});
}
catch (alert) {
return alert(alert);
}
} catch(err) {
reject(err);
}
});
}

async function getItemFromStorage(idTmp){
return new Promise(resolve => {
let item = JSON.parse(localStorage.getItem('noteObj'+idTmp));
console.log("in promise "+item);
resolve(item);

console.log("getItemFromStorage() " + idTmp);

return new Promise((resolve, reject) => {
try {
let item = JSON.parse(localStorage.getItem('noteObj'+idTmp));
resolve(item);
} catch (err) {
reject(err);
}
});
}


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 getItemFromStorage(idTmp);
console.log(item);
createFormWithSavedContent(item, idTmp);
try {
let item = await getItemFromStorage(idTmp);
createFormWithSavedContent(item, idTmp);
} catch(err) {
alert(err)
}
}

Write Preview
Loading…
Cancel
Save