ExternalVendorCode/gns3-registry
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-registry.git synced 2025-01-18 18:56:38 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Display progress bar for downloads

Browse Source
This commit is contained in:
Julien Duponchelle 2015-08-05 23:58:53 +02:00
parent e657dc0960
commit bb9322aaa2
4 changed files with 64 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
templates/device.html
View File

@ -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 %}

40
templates/downloads.html
View File

@ -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);
});
});

2
templates/index.html
View File

@ -2,7 +2,7 @@
{% block script %}
function importDevice() {
gns3.button(function() { return gns3.importDevice(); });
gns3_button(function() { return gns3.importDevice(); });
return false;
}

18
templates/layout/default.html
View File

@ -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>