mirrors
/
ympd
mirror of https://github.com/SuperBFG7/ympd
1
0
Fork 0
Code Issues Releases Wiki Activity

Feat: Show update database progress

This commit is contained in:
jcorporation 2018-08-27 17:56:40 +01:00
parent a9aa5a6741
commit e150369726
3 changed files with 37 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
htdocs/css/mympd.css
View File

@ -251,10 +251,13 @@ caption {
}
@keyframes changewidth {
from { width: 0%; }
to { width: 100%; }
from { margin-left: -20px; }
to { margin-left: 100%; }
}
#updateDBprogress {
width:20px;
}
.updateDBprogressAnimate {
animation-duration: 2s;
animation-name: changewidth;

2
htdocs/index.html
View File

@ -543,7 +543,7 @@
<div class="modal-body">
<p>Dependent on the size of your music collection this can take a while.</p>
<div class="progress">
<div id="updateDBprogress" class="progress-bar bg-success" role="progressbar" style="width:50%"></div>
<div id="updateDBprogress" class="progress-bar bg-success" role="progressbar"></div>
</div>
<br/>
<p id="updateDBfinished"></p>

46
htdocs/js/mympd.js
View File

@ -694,7 +694,7 @@ function webSocketConnect() {
sendAPI({"cmd": "MPD_API_GET_OUTPUTS"}, parseOutputs);
break;
case 'update_started':
updateDBstarted();
updateDBstarted(false);
break;
case 'update_database':
case 'update_finished':
@ -1759,25 +1759,41 @@ function openLocalPlayer() {
function updateDB() {
sendAPI({"cmd": "MPD_API_UPDATE_DB"});
updateDBstarted();
updateDBstarted(true);
}
function updateDBstarted() {
document.getElementById('updateDBfinished').innerText = '';
document.getElementById('updateDBfooter').classList.add('hide');
modalUpdateDB.show();
document.getElementById('updateDBprogress').classList.add('updateDBprogressAnimate');
function updateDBstarted(showModal) {
if (showModal == true) {
document.getElementById('updateDBfinished').innerText = '';
document.getElementById('updateDBfooter').classList.add('hide');
updateDBprogress.style.width = '20px';
updateDBprogress.style.marginLeft = '-20px';
modalUpdateDB.show();
document.getElementById('updateDBprogress').classList.add('updateDBprogressAnimate');
}
else {
showNotification('Database update started', '', '', 'success');
}
}
function updateDBfinished(idleEvent) {
if (idleEvent == 'update_database')
document.getElementById('updateDBfinished').innerText = 'Database successfully updated';
else if (idleEvent == 'update_finished')
document.getElementById('updateDBfinished').innerText = 'Database update finished.';
var updateDBprogress = document.getElementById('updateDBprogress');
updateDBprogress.classList.remove('updateDBprogressAnimate');
updateDBprogress.style.width = '100%';
document.getElementById('updateDBfooter').classList.remove('hide');
if (document.getElementById('modalUpdateDB').classList.contains('show')) {
if (idleEvent == 'update_database')
document.getElementById('updateDBfinished').innerText = 'Database successfully updated.';
else if (idleEvent == 'update_finished')
document.getElementById('updateDBfinished').innerText = 'Database update finished.';
var updateDBprogress = document.getElementById('updateDBprogress');
updateDBprogress.classList.remove('updateDBprogressAnimate');
updateDBprogress.style.width = '100%';
updateDBprogress.style.marginLeft = '0px';
document.getElementById('updateDBfooter').classList.remove('hide');
}
else {
if (idleEvent == 'update_database')
showNotification('Database successfully updated.', '', '', 'success');
else if (idleEvent == 'update_finished')
showNotification('Database update finished.', '', '', 'success');
}
}
function clickPlay() {