From 83ea279b7aa72d5bca6d1b81eb337eb2cabf5aab Mon Sep 17 00:00:00 2001
From: Alexandre Aubin <alex.aubin@mailoo.org>
Date: Wed, 15 May 2019 21:39:19 +0200
Subject: [PATCH] Convert ascii progress bars to bootstrap progress bar

---
 src/css/style.less         |  7 +++++++
 src/js/yunohost/helpers.js | 25 +++++++++++++++++++++++--
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/css/style.less b/src/css/style.less
index e1496f71..c9e10ecd 100644
--- a/src/css/style.less
+++ b/src/css/style.less
@@ -550,6 +550,13 @@ input[type='radio'].nice-radio {
     }
 }
 
+.messages .progress {
+   display:inline-block;
+   height:0.8em;
+   margin-bottom: 0;
+   width: 200px;
+   border-radius: 5px;
+}
 
 /** custom badges **/
 .badge {
diff --git a/src/js/yunohost/helpers.js b/src/js/yunohost/helpers.js
index 260bde6a..a1890a07 100644
--- a/src/js/yunohost/helpers.js
+++ b/src/js/yunohost/helpers.js
@@ -35,10 +35,31 @@
 
             message = message.split("\n").join("<br />");
 
+            // If the message starts with a progress bar
+            progressbar = message.match(/^\[#*\+*\.*\] > /);
+            if (progressbar)
+            {
+                progressbar = progressbar[0];
+                // Remove the progress bar from the mesage
+                message = message.replace(progressbar,"");
+                // Compute percent
+                done = (progressbar.match(/#/g)||[]).length;
+                ongoing = (progressbar.match(/\+/g)||[]).length;
+                remaining = (progressbar.match(/\./g)||[]).length;
+                total = done + ongoing + remaining;
+                done = done * 100 / total;
+                ongoing = ongoing * 100 / total;
+                // Actually build the message with the progress bar
+                message = '<div class="progress"><div class="progress-bar progress-bar-success" role="progressbar" style="width:'+done+'%"></div><div class="progress-bar" role="progressbar" style="width:'+ongoing+'%;"></div></div><p style="display: inline-block;">' + message + '</p>';
+            }
+            else
+            {
+                message = '<p>'+message+'</p>';
+            }
+
             // Add message
             $('#flashMessage .messages')
-                .prepend('<div class="alert alert-'+ level +'">'+
-                              '<p>'+ message +'</p></div>');
+                .prepend('<div class="alert alert-'+ level +'">'+message+'</div>');
 
             // Scroll to top to view new messages
             $('#flashMessage').scrollTop(0);