From bb9322aaa2a2d3ab9a3931ca621246e61bba8929 Mon Sep 17 00:00:00 2001
From: Julien Duponchelle <julien@duponchelle.info>
Date: Wed, 5 Aug 2015 23:58:53 +0200
Subject: [PATCH] Display progress bar for downloads

---
 templates/device.html         | 19 +++++++++++++++--
 templates/downloads.html      | 40 +++++++++++++++++++++++++++++------
 templates/index.html          |  2 +-
 templates/layout/default.html | 18 ++++++++++------
 4 files changed, 64 insertions(+), 15 deletions(-)

diff --git a/templates/device.html b/templates/device.html
index 2366eda..482e05c 100644
--- a/templates/device.html
+++ b/templates/device.html
@@ -1,4 +1,19 @@
 {% extends "layout/default.html" %}
+
+{% block script %}
+
+function download(device, md5sum) {
+    if (gns3_button(function() {
+        return gns3.download(device, md5sum)
+    })) {
+        gns3_notif("success", "You can see the download progress in the <a href=\"/downloads.html\">Downloads</a> section");
+        return true;
+    }
+    return false;
+}
+
+{% endblock %}
+
 {% block body %}
     <div class="jumbotron">
         <h1>{{ device["name"] }}</h1>
@@ -17,7 +32,7 @@
     {% endif %}
     {% for version in device["versions"] | reverse %}
         <h2>{{ device["name"] }} {{version["name"]}}</h2>
-        <button class="btn btn-primary btn-lg" type="button" onclick='gns3.button(function() { return gns3.install("{{device|jsonify|b64encode}}", "{{version["name"]}}") })'>Install</button>
+        <button class="btn btn-primary btn-lg" type="button" onclick='gns3_button(function() { return gns3.install("{{device|jsonify|b64encode}}", "{{version["name"]}}") })'>Install</button>
         <h3>Require files</h3>
         {% for image in version.images.values() %}
             <h4>{{image["filename"]}}</h4>
@@ -27,7 +42,7 @@
             Download url: <a href="{{image["download_url"]}}">{{image["download_url"]}}</a><br />
             {% if "direct_download_url" in image %}
             Direct download url: <a href="{{image["direct_download_url"]}}">{{image["direct_download_url"]}}</a><br />
-            <button class="btn btn-primary btn-lg" type="button" onclick='gns3.button(function() { return gns3.download("{{device|jsonify|b64encode}}", "{{image["md5sum"]}}") })'>Download</button>
+            <button class="btn btn-primary btn-lg" type="button" onclick='return download("{{device|jsonify|b64encode}}", "{{image["md5sum"]}}")'>Download</button>
             {% endif %}
             <hr />
         {% endfor %}
diff --git a/templates/downloads.html b/templates/downloads.html
index af21b4d..5158001 100644
--- a/templates/downloads.html
+++ b/templates/downloads.html
@@ -1,21 +1,49 @@
 {% extends "layout/default.html" %}
 {% block script %}
 
+function humanFileSize(bytes) {
+    var exp = Math.log(bytes) / Math.log(1024) | 0;
+    var result = (bytes / Math.pow(1024, exp)).toFixed(2);
+
+    return result + ' ' + (exp == 0 ? 'bytes': 'KMGTPEZY'[exp - 1] + 'B');
+}
+
+function update_progress_download_div(div, download_info) {
+    var percent = Math.round(100 / download_info.total * download_info.received)
+    div.text(percent + "% "+ humanFileSize(download_info.received) + " / " + humanFileSize(download_info.total));
+    div.attr("aria-valuenow", percent);
+    div.attr("style", "width: " + percent + "%");
+    if (percent == 100) {
+        div.removeClass("active");
+        div.removeClass("progress-bar-striped");
+    }
+}
+
 $(function() {
     var downloads_div = $("#downloads");
-    var downloads = gns3.downloads()
+    var downloads = gns3.downloads().reverse();
     for (var i in downloads) {
         download_info = downloads[i];
+        var parent_div = $("<div>");
+        parent_div.text(download_info.url);
+
+        var progress_div =  $("<div>");
+        progress_div.addClass("progress");
         var div = $("<div>");
+        div.addClass("progress-bar progress-bar-striped active");
         div.attr("id", "download" + download_info.id);
-        div.text(download_info.url + " " + download_info.received + "/" + download_info.total);
-        downloads_div.append(div);
+        div.attr("role", "progressbar");
+        div.attr("aria-valuemin", 0);
+        div.attr("aria-valuemax", 100);
+        update_progress_download_div(div, download_info);
+        progress_div.append(div);
+        parent_div.append(progress_div);
+        downloads_div.append(parent_div);
     }
 
     gns3.downloadProgress.connect(function(download_info) {
-        console.log("blu");
-        var div = $("#download" + download_info.id);   
-        div.text(download_info.url + " " + download_info.received + "/" + download_info.total);
+        var div = $("#download" + download_info.id);
+        update_progress_download_div(div, download_info);
     });
 });
 
diff --git a/templates/index.html b/templates/index.html
index 745f2bb..24c58b6 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -2,7 +2,7 @@
 {% block script %}
 
 function importDevice() {
-    gns3.button(function() { return gns3.importDevice(); });
+    gns3_button(function() { return gns3.importDevice(); });
     return false;
 }
 
diff --git a/templates/layout/default.html b/templates/layout/default.html
index 4c6c477..f42056f 100644
--- a/templates/layout/default.html
+++ b/templates/layout/default.html
@@ -17,28 +17,34 @@
         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
 
         <script>
-            gns3.error.connect(function(msg) {
+            function gns3_notif(type, msg) {
                 var notif = $("#notif")
-                notif.append("<div class=\"alert alert-danger alert-dismissible fade in\" role=\"alert\"><button type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-label=\"Close\"><span aria-hidden=\"true\">×</span></button><h4>You got an error!</h4><p>" + msg + "</p></div>")
+                notif.append("<div class=\"alert alert-" + type + " alert-dismissible fade in\" role=\"alert\"><button type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-label=\"Close\"><span aria-hidden=\"true\">×</span></button>" + msg + "</div>")
+
+            }
+
+            gns3.error.connect(function(msg) {
+                gns3_notif("danger", msg);
             });
 
             gns3.success.connect(function(msg) {
-                var notif = $("#notif")
-                notif.append("<div class=\"alert alert-success alert-dismissible fade in\" role=\"alert\"><button type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-label=\"Close\"><span aria-hidden=\"true\">×</span></button>" + msg + "</div>")
+                gns3_notif("success", msg);
             });
 
             /*
             Deactivate the button after success click
             */
-            gns3.button = function(callback) {
+            gns3_button = function(callback) {
                 var button = event.target;
                 $(button).removeClass("btn-primary");                
                 if (callback()) {
                     $(button).addClass("btn-success");
                     button.onclick = null;
+                    return true;
                 }
                 else {
-                    $(button).addClass("btn-danger");                    
+                    $(button).addClass("btn-danger");
+                    return false;
                 }
             }
         </script>