Browse Source

- Display progress using progress bars in Web UI

adaptive-webui-19844
Christophe Dumez 16 years ago
parent
commit
c18103539c
  1. 1
      Changelog
  2. 1
      src/webui.qrc
  3. 3
      src/webui/index.html
  4. 6
      src/webui/scripts/client.js
  5. 18
      src/webui/scripts/dynamicTable.js
  6. 89
      src/webui/scripts/progressbar.js

1
Changelog

@ -15,6 +15,7 @@ @@ -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

1
src/webui.qrc

@ -17,5 +17,6 @@ @@ -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>

3
src/webui/index.html

@ -15,6 +15,7 @@ @@ -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 @@ @@ -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>

6
src/webui/scripts/client.js

@ -37,8 +37,8 @@ window.addEvent('domready', function(){ @@ -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(){ @@ -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

18
src/webui/scripts/dynamicTable.js

@ -36,11 +36,12 @@ var dynamicTable = new Class ({ @@ -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 ({ @@ -87,7 +88,11 @@ var dynamicTable = new Class ({
for(var i=0; i<row.length; i++)
{
var td = new Element('td');
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 ({ @@ -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

@ -0,0 +1,89 @@ @@ -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…
Cancel
Save