From e1503697269f7297d26c79a374c38737f047f4a5 Mon Sep 17 00:00:00 2001
From: jcorporation <mail@jcgames.de>
Date: Mon, 27 Aug 2018 17:56:40 +0100
Subject: [PATCH] Feat: Show update database progress

---
 htdocs/css/mympd.css |  7 +++++--
 htdocs/index.html    |  2 +-
 htdocs/js/mympd.js   | 46 +++++++++++++++++++++++++++++---------------
 3 files changed, 37 insertions(+), 18 deletions(-)

diff --git a/htdocs/css/mympd.css b/htdocs/css/mympd.css
index d9c33d8..3311a0a 100644
--- a/htdocs/css/mympd.css
+++ b/htdocs/css/mympd.css
@@ -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;
diff --git a/htdocs/index.html b/htdocs/index.html
index 2dd2a50..279ff3c 100644
--- a/htdocs/index.html
+++ b/htdocs/index.html
@@ -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>
diff --git a/htdocs/js/mympd.js b/htdocs/js/mympd.js
index a497250..f0835a6 100644
--- a/htdocs/js/mympd.js
+++ b/htdocs/js/mympd.js
@@ -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() {