Browse Source

final version

 + added comments as function descriptions
 + added delete buttons to close forms
 + refined errorhandling
master
Gregor Wüst 3 years ago
parent
commit
3fd128057d
2 changed files with 25 additions and 28 deletions
  1. 0
    1
      html/index.html
  2. 25
    27
      scripts/notes_app.js

+ 0
- 1
html/index.html View File

<div class=right> <div class=right>
<button class="btn btn-default btn-xs" id="refreshButton"><span class="glyphicon glyphicon-refresh"></span></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>

+ 25
- 27
scripts/notes_app.js View File



function createForm(){ function createForm(){


// Erstellt eine NoteForm und initialisiert die OnClick-Listener auf den Buttons der Form
// DOM-Schnittstelle zur Erstellung einer NoteForm mit ID-Kennung.
// Initialisiert die OnClick-Listener auf den Buttons der Form.


id++; id++;




function deleteForm(idName){ function deleteForm(idName){


// Aktiviert durch OnClickListener auf dem X-Button innerhalb der Form zum Schließen der Form
// Aktiviert durch OnClickListener auf dem X-Button innerhalb der Form zum Schließen/Löschen einer Form mit ID-Kennung.


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




function createFormWithSavedContent(item, id){ function createFormWithSavedContent(item, id){
// Holt eine gespeicherte Form aus dem Speicher und erstellt erneut eine NoteForm und initialisiert die OnClick-Listener auf den Buttons der Form
// DOM-Schnittstelle.
// Holt eine gespeicherte Form aus dem Speicher und erstellt erneut eine Note Form mit alter ID-Kennung und initialisiert die OnClick-Listener auf den Buttons.


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




async function sleep(ms) { 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
// 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); console.log("sleep() " + ms);


} }
} }


async function removeNote(id){

// 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(err) {
reject(err);
}
});
}

async function saveNote(id){ async function saveNote(id){


// Holt den Inhalt aus der gebindeten Note und speichert diesen als Objekt mit ID-Kennung im Local Storage.

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


return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
title: noteTitle, title: noteTitle,
text: noteText text: noteText
}; };
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 damit es im LocalStorage lesbar ist.
localStorage.setItem("noteObj" + id, noteObj_serialized); localStorage.setItem("noteObj" + id, noteObj_serialized);
resolve(noteObj); resolve(noteObj);
} catch(err) { } catch(err) {


async function refreshBrowser(){ async function refreshBrowser(){


// Aktualisiert den Browserinhalt nach drücken des Refreshbuttons.
// Holt sich zuerst ein Abbild des Local Storage und erstellt dann für jedes Element ein Item im Browser.

console.log("refreshBrowser()"); console.log("refreshBrowser()");


return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
} }


async function saveNoteObject(id, overwrite=false){ async function saveNoteObject(id, overwrite=false){

// Wird vom Save Button zum Speichern einer Note und Erstellung eines entsprechenden Browseritems aufgerufen.
console.log("saveNoteObject() " + id + " " + overwrite); console.log("saveNoteObject() " + id + " " + overwrite);
createLoadingSign(id, append="note") createLoadingSign(id, append="note")
enableLoadingSign(id); 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
await sleep(10000)
disableLoadingSign(id); disableLoadingSign(id);


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


function createBrowserItem(item){ function createBrowserItem(item){


// DOM-Schnittstelle zur Erstellung eines Browseritems.

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


let wrapperDiv = document.createElement('div'); let wrapperDiv = document.createElement('div');


async function removeBrowserItem(id){ async function removeBrowserItem(id){


// DOM-Schnittstelle zum Löschen eines Browseritems.

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


return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {


async function getItemFromStorage(idTmp){ async function getItemFromStorage(idTmp){


// Holt ein Note Objekt aus dem Local Storage.

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


return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {


async function getSavedNote(id){ async function getSavedNote(id){


// Wird durch den OnClick-Listener auf dem Browseritem aufgerufen.

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


createLoadingSign("", "allNotesDiv"); createLoadingSign("", "allNotesDiv");

Loading…
Cancel
Save