mirror of
https://github.com/d47081/qBittorrent.git
synced 2025-01-22 04:24:23 +00:00
- Display progress using progress bars in Web UI
This commit is contained in:
parent
727f59f73f
commit
c18103539c
@ -15,6 +15,7 @@
|
||||
- FEATURE: Rewrote folder scanning code (Now uses a filesystem watcher)
|
||||
- FEATURE: Added torrent deletion from hard drive function in Web UI
|
||||
- FEATURE: Added queueing priority actions in Web UI
|
||||
- FEATURE: Display progress using progress bars in Web UI
|
||||
- BUGFIX: Made usage of fastresume data more reliable
|
||||
- BUGFIX: qBittorrent shutdown is now faster
|
||||
- BUGFIX: Fixed several memory leaks
|
||||
|
@ -17,5 +17,6 @@
|
||||
<file>webui/scripts/client.js</file>
|
||||
<file>webui/scripts/download.js</file>
|
||||
<file>webui/scripts/mootabs1.2.js</file>
|
||||
<file>webui/scripts/progressbar.js</file>
|
||||
</qresource>
|
||||
</RCC>
|
||||
|
@ -15,6 +15,7 @@
|
||||
<script type="text/javascript" src="scripts/mootabs1.2.js" charset="utf-8"></script>
|
||||
<script type="text/javascript" src="scripts/mocha.js"></script>
|
||||
<script type="text/javascript" src="scripts/mocha-init.js"></script>
|
||||
<script type="text/javascript" src="scripts/progressbar.js"></script>
|
||||
<script type="text/javascript" src="scripts/dynamicTable.js" charset="utf-8"></script>
|
||||
<script type="text/javascript" src="scripts/client.js" charset="utf-8"></script>
|
||||
</head>
|
||||
@ -83,7 +84,7 @@
|
||||
<th></th>
|
||||
<th>Name</th>
|
||||
<th>Size</th>
|
||||
<th>Progress</th>
|
||||
<th style="width: 90px;">Progress</th>
|
||||
<th>DL Speed</th>
|
||||
<th>UP Speed</th>
|
||||
<th id='prioHeader'>Priority</th>
|
||||
|
@ -37,8 +37,8 @@ window.addEvent('domready', function(){
|
||||
width: '100%',
|
||||
height: '100%'
|
||||
});
|
||||
myTable.setup('myTable');
|
||||
myTableUP.setup('myTableUP');
|
||||
myTable.setup('myTable', 3);
|
||||
myTableUP.setup('myTableUP', -1);
|
||||
var r=0;
|
||||
var waiting=false;
|
||||
var stateToImg = function(state){
|
||||
@ -120,7 +120,7 @@ window.addEvent('domready', function(){
|
||||
row[0] = stateToImg(event.state);
|
||||
row[1] = event.name;
|
||||
row[2] = fsize(event.size);
|
||||
row[3] = round1(event.progress*100) + ' %';
|
||||
row[3] = round1(event.progress*100);
|
||||
row[4] = fspeed(event.dlspeed);
|
||||
row[5] = fspeed(event.upspeed);
|
||||
row[6] = event.priority
|
||||
|
@ -36,11 +36,12 @@ var dynamicTable = new Class ({
|
||||
initialize: function(){
|
||||
},
|
||||
|
||||
setup: function(table){
|
||||
setup: function(table, progressIndex){
|
||||
this.table = $(table);
|
||||
this.rows = new Object();
|
||||
this.cur = new Array();
|
||||
this.priority_hidden = false;
|
||||
this.progressIndex = progressIndex;
|
||||
},
|
||||
|
||||
altRow: function()
|
||||
@ -87,7 +88,11 @@ var dynamicTable = new Class ({
|
||||
for(var i=0; i<row.length; i++)
|
||||
{
|
||||
var td = new Element('td');
|
||||
td.set('html', row[i]);
|
||||
if(i==this.progressIndex) {
|
||||
td.adopt(new ProgressBar(row[i].toFloat(), {width:80}));
|
||||
} else {
|
||||
td.set('html', row[i]);
|
||||
}
|
||||
td.injectInside(tr);
|
||||
};
|
||||
|
||||
@ -181,11 +186,14 @@ var dynamicTable = new Class ({
|
||||
if($defined(tr))
|
||||
{
|
||||
var tds = tr.getElements('td');
|
||||
row.each(function(el, i){
|
||||
if(tds[i].get('html') != el) {
|
||||
tds[i].set('html', el);
|
||||
}
|
||||
});
|
||||
for(var i=0; i<row.length; i++) {
|
||||
if(i==this.progressIndex) {
|
||||
tds[i].set('html', '');
|
||||
tds[i].adopt(new ProgressBar(row[i].toFloat(), {width:80}));
|
||||
} else {
|
||||
tds[i].set('html', row[i]);
|
||||
}
|
||||
};
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
|
89
src/webui/scripts/progressbar.js
Normal file
89
src/webui/scripts/progressbar.js
Normal file
@ -0,0 +1,89 @@
|
||||
var ProgressBar=new Class({
|
||||
initialize:function(value,parameters){
|
||||
var vals={
|
||||
'id':'progressbar_'+(ProgressBars++),
|
||||
'value':$pick(value,0),
|
||||
'width':0,
|
||||
'height':0,
|
||||
'darkbg':'#006',
|
||||
'darkfg':'#fff',
|
||||
'lightbg':'#fff',
|
||||
'lightfg':'#000'
|
||||
};
|
||||
if(parameters && $type(parameters)=='object')$extend(vals,parameters);
|
||||
if(vals.height<12)vals.height=12;
|
||||
var obj=new Element('div',{
|
||||
'id':vals.id,
|
||||
'class':'progressbar_wrapper',
|
||||
'styles':{
|
||||
'border':'1px solid #000',
|
||||
'width':vals.width,
|
||||
'height':vals.height,
|
||||
'position':'relative'
|
||||
}
|
||||
});
|
||||
obj.vals=vals;
|
||||
obj.vals.dark=new Element('div',{
|
||||
'id':vals.id+'_dark',
|
||||
'class':'progressbar_dark',
|
||||
'styles':{
|
||||
'width':vals.width,
|
||||
'height':vals.height,
|
||||
'background':vals.darkbg,
|
||||
'color':vals.darkfg,
|
||||
'position':'absolute',
|
||||
'text-align':'center',
|
||||
'left':0,
|
||||
'top':0,
|
||||
'line-height':vals.height-2
|
||||
}
|
||||
});
|
||||
obj.vals.light=new Element('div',{
|
||||
'id':vals.id+'_light',
|
||||
'class':'progressbar_light',
|
||||
'styles':{
|
||||
'width':vals.width,
|
||||
'height':vals.height,
|
||||
'background':vals.lightbg,
|
||||
'color':vals.lightfg,
|
||||
'position':'absolute',
|
||||
'text-align':'center',
|
||||
'left':0,
|
||||
'top':0,
|
||||
'line-height':vals.height-2
|
||||
}
|
||||
});
|
||||
obj.appendChild(obj.vals.dark);
|
||||
obj.appendChild(obj.vals.light);
|
||||
obj.setValue=ProgressBar_setValue;
|
||||
if(vals.width)obj.setValue(vals.value);
|
||||
else setTimeout('ProgressBar_checkForParent("'+obj.id+'")',1);
|
||||
return obj;
|
||||
}
|
||||
});
|
||||
function ProgressBar_setValue(value){
|
||||
value=parseFloat(value);
|
||||
if(isNaN(value))value=0;
|
||||
if(value>100)value=100;
|
||||
if(value<0)value=0;
|
||||
this.vals.value=value;
|
||||
this.vals.dark.empty();
|
||||
this.vals.light.empty();
|
||||
this.vals.dark.appendText(value+'%');
|
||||
this.vals.light.appendText(value+'%');
|
||||
var r=parseInt(this.vals.width*(value/100));
|
||||
this.vals.dark.setStyle('clip','rect(0,'+r+'px,'+this.vals.height+'px,0)');
|
||||
this.vals.light.setStyle('clip','rect(0,'+this.vals.width+'px,'+this.vals.height+'px,'+r+'px)');
|
||||
}
|
||||
function ProgressBar_checkForParent(id){
|
||||
var obj=$(id);
|
||||
if(!obj)return;
|
||||
if(!obj.parentNode)return setTimeout('ProgressBar_checkForParent("'+id+'")',1);
|
||||
obj.setStyle('width','100%');
|
||||
var w=obj.offsetWidth;
|
||||
obj.vals.dark.setStyle('width',w);
|
||||
obj.vals.light.setStyle('width',w);
|
||||
obj.vals.width=w;
|
||||
obj.setValue(obj.vals.value);
|
||||
}
|
||||
var ProgressBars=0;
|
Loading…
x
Reference in New Issue
Block a user