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

Loading Sign

Browse Source
This commit is contained in:
Gregor Wüst 2020-06-01 13:31:15 +02:00
parent 190076b3b6
commit e4a008d41e
2 changed files with 42 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
css/notes_app.css
View File

@ -22,6 +22,27 @@ body{
border:1px black solid; border:1px black solid;
} }
progress { .loader {
width: 312px; border: 3.2px solid #f3f3f3;
} border-radius: 50%;
border-top: 3.2px solid #3498db;
width: 24px;
height: 24px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
display: none;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

36
scripts/notes_app.js
View File

@ -9,7 +9,6 @@ $(document).ready(function(){
console.log(this) console.log(this)
let buttonId = (this.id).split("saveNoteButton")[1]; let buttonId = (this.id).split("saveNoteButton")[1];
console.log(buttonId) console.log(buttonId)
createProgressBar(buttonId);
saveNoteObject(buttonId); saveNoteObject(buttonId);
}) })
}) })
@ -65,10 +64,11 @@ function sleep(ms) {
async function saveNoteObject(id){ async function saveNoteObject(id){
console.log(id) console.log(id)
enableLoadingSign(id);
await sleep(10000) //sleep simulates the remote server access or similar, await sleep(10000) //sleep simulates the remote server access or similar,
//so instead of sleep would be e.g. saveToRemoteServer()... //so instead of sleep would be e.g. saveToRemoteServer()...
//the leftover code of the async function is executed after the delay //the leftover code of the async function is executed after the delay
disableLoadingSign(id);
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;
@ -83,25 +83,25 @@ async function saveNoteObject(id){
console.log(noteObj_serialized) console.log(noteObj_serialized)
} }
function enableProgressBar(id){ function enableLoadingSign(id){
console.log('pBar'+id) createLoadingSign(id)
document.getElementById('pBar'+id).value = document.getElementById('loadSign'+id).style.display = "block";
document.getElementById('pBar'+id).value + 5;
if (document.getElementById('pBar'+id).value == 100){
clearInterval(ctr);
}
} }
function createProgressBar(id){ function disableLoadingSign(id){
let sign = document.getElementById('loadSign'+id);
sign.style.display = "none";
sign.parentNode.removeChild(sign);
}
let progressBar = document.createElement('progress'); function createLoadingSign(id){
let progressBarWrapper = document.createElement('div');
progressBarWrapper.setAttribute('class', 'pBars') let loadingSign = document.createElement('div');
progressBar.setAttribute('value', '0'); let loadingSignWrapper = document.createElement('div');
progressBar.setAttribute('max', '100'); loadingSign.setAttribute('class', 'loader')
progressBar.setAttribute('id', 'pBar'+id); loadingSign.setAttribute('id', 'loadSign'+id);
progressBarWrapper.appendChild(progressBar); loadingSignWrapper.appendChild(loadingSign);
document.getElementById(id).appendChild(progressBarWrapper); document.getElementById(id).appendChild(loadingSignWrapper);
} }