mirrors/ympd
1
0
Fork 0
mirror of https://github.com/SuperBFG7/ympd synced 2024-06-17 10:39:54 +00:00
Code Issues Releases Wiki Activity

Feat: Show update database progress

Browse Source
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 { @keyframes changewidth {
from { width: 0%; } from { margin-left: -20px; }
to { width: 100%; } to { margin-left: 100%; }
} }
#updateDBprogress {
width:20px;
}
.updateDBprogressAnimate { .updateDBprogressAnimate {
animation-duration: 2s; animation-duration: 2s;
animation-name: changewidth; animation-name: changewidth;

2
htdocs/index.html
View File

@ -543,7 +543,7 @@
<div class="modal-body"> <div class="modal-body">
<p>Dependent on the size of your music collection this can take a while.</p> <p>Dependent on the size of your music collection this can take a while.</p>
<div class="progress"> <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> </div>
<br/> <br/>
<p id="updateDBfinished"></p> <p id="updateDBfinished"></p>

46
htdocs/js/mympd.js
View File

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