mirror of
https://github.com/qbittorrent/qBittorrent.git
synced 2025-12-31 20:58:07 -06:00
- Display torrent files in Web UI
This commit is contained in:
Christophe Dumez
@@ -7,41 +7,49 @@
|
||||
|
||||
**************************************************************/
|
||||
|
||||
#properties #torrentFiles table,
|
||||
#properties #trackers table,
|
||||
#transferList table {
|
||||
border: 1px solid #ccc;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#properties #torrentFiles th,
|
||||
#properties #trackers th,
|
||||
#transferList th {
|
||||
background-color: #eee;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
#properties #torrentFiles tr,
|
||||
#properties #trackers tr,
|
||||
#transferList tr {
|
||||
background-color: #fff;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
|
||||
#properties #torrentFiles tr.alt,
|
||||
#properties #trackers tr.alt,
|
||||
#transferList tr.alt {
|
||||
background-color: #eee;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
#properties #torrentFiles td,
|
||||
#properties #trackers td,
|
||||
#transferList td {
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
#properties #torrentFiles tr.selected,
|
||||
#properties #trackers tr.selected,
|
||||
#transferList tr.selected {
|
||||
background-color: #354158;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#properties #torrentFiles tr.over,
|
||||
#properties #trackers tr.over,
|
||||
#transferList tr.over {
|
||||
background-color: #ee6600;
|
||||
|
||||
@@ -16,7 +16,6 @@
|
||||
<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>
|
||||
<script type="text/javascript" src="scripts/tree.js" charset="utf-8"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="desktop">
|
||||
|
||||
@@ -1,12 +1,137 @@
|
||||
<ul id="fileTree" class="tree">
|
||||
<li class="folder f-open root"><span>Examples</span>
|
||||
<ul>
|
||||
<li class="doc"><span><a>Lorem Ipsum</a></span></li>
|
||||
<li class="doc"><span><a>Zero7 - Crosses</a></span></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<span id="torrentFiles">
|
||||
<table class="torrentTable" cellpadding="0" cellspacing="0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>_(Name)</th>
|
||||
<th>_(Size)</th>
|
||||
<th style="width: 90px;">_(Progress)</th>
|
||||
<th>_(Priority)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="filesTable"></tbody>
|
||||
</table>
|
||||
</span>
|
||||
|
||||
<script type="text/javascript">
|
||||
buildTree('fileTree');
|
||||
var filesDynTable = new Class ({
|
||||
|
||||
initialize: function(){
|
||||
},
|
||||
|
||||
setup: function(table){
|
||||
this.table = $(table);
|
||||
this.rows = new Hash();
|
||||
},
|
||||
|
||||
removeRow: function(id){
|
||||
if(this.rows.has(id)) {
|
||||
var tr = this.rows.get(id);
|
||||
tr.dispose();
|
||||
this.rows.erase(id);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
removeAllRows: function() {
|
||||
this.rows.each(function(tr, id) {
|
||||
this.removeRow(id);
|
||||
}.bind(this));
|
||||
},
|
||||
|
||||
updateRow: function(tr, row){
|
||||
var tds = tr.getElements('td');
|
||||
for(var i=0; i<row.length; i++) {
|
||||
if(i==2) {
|
||||
tds[i].set('html', '');
|
||||
tds[i].adopt(new ProgressBar(row[i].toFloat(), {width:80}));
|
||||
} else {
|
||||
tds[i].set('html', row[i]);
|
||||
}
|
||||
}
|
||||
return true;
|
||||
},
|
||||
|
||||
insertRow: function(id, row) {
|
||||
if(this.rows.has(id)) {
|
||||
var tr = this.rows.get(id);
|
||||
this.updateRow(tr, row);
|
||||
return;
|
||||
}
|
||||
//this.removeRow(id);
|
||||
var tr = new Element('tr');
|
||||
this.rows.set(id, tr);
|
||||
for(var i=0; i<row.length; i++)
|
||||
{
|
||||
var td = new Element('td');
|
||||
if(i==2) {
|
||||
td.adopt(new ProgressBar(row[i].toFloat(), {width:80}));
|
||||
} else {
|
||||
td.set('html', row[i]);
|
||||
}
|
||||
td.injectInside(tr);
|
||||
}
|
||||
tr.injectInside(this.table);
|
||||
},
|
||||
});
|
||||
|
||||
var round1 = function(val){return Math.round(val*10)/10};
|
||||
var waitingTorrentFiles=false;
|
||||
var current_hash = "";
|
||||
|
||||
var loadTorrentFilesData = function() {
|
||||
if(!$defined($('filesTable'))) {
|
||||
// Tab changed
|
||||
return;
|
||||
}
|
||||
var new_hash = myTable.getCurrentTorrentHash();
|
||||
if(new_hash == "") {
|
||||
fTable.removeAllRows();
|
||||
loadTorrentFilesData.delay(1500);
|
||||
return;
|
||||
}
|
||||
if(new_hash != current_hash) {
|
||||
fTable.removeAllRows();
|
||||
current_hash = new_hash;
|
||||
}
|
||||
var url = 'json/propertiesFiles/'+current_hash;
|
||||
if (!waitingTorrentFiles) {
|
||||
waitingTorrentFiles=true;
|
||||
var request = new Request.JSON({
|
||||
url: url,
|
||||
method: 'get',
|
||||
onFailure: function() {
|
||||
$('error_div').set('html', 'qBittorrent client is not reachable');
|
||||
waitingTorrentFiles=false;
|
||||
loadTorrentFilesData.delay(2000);
|
||||
},
|
||||
onSuccess: function(files) {
|
||||
$('error_div').set('html', '');
|
||||
if(files){
|
||||
// Update Trackers data
|
||||
var i=0;
|
||||
files.each(function(file){
|
||||
var row = new Array();
|
||||
row.length = 4;
|
||||
row[0] = file.name;
|
||||
row[1] = file.size;
|
||||
row[2] = round1(file.progress*100);
|
||||
row[3] = file.priority;
|
||||
fTable.insertRow(i, row);
|
||||
i++;
|
||||
}.bind(this));
|
||||
} else {
|
||||
fTable.removeAllRows();
|
||||
}
|
||||
waitingTorrentFiles=false;
|
||||
loadTorrentFilesData.delay(1500);
|
||||
}
|
||||
}).send();
|
||||
}
|
||||
|
||||
}
|
||||
fTable = new filesDynTable();
|
||||
fTable.setup($('filesTable'));
|
||||
// Initial loading
|
||||
loadTorrentFilesData();
|
||||
</script>
|
||||
@@ -1,124 +0,0 @@
|
||||
/*
|
||||
|
||||
Script: Tree.js
|
||||
Create folder trees.
|
||||
|
||||
Copyright:
|
||||
Copyright (c) 2007-2008 Greg Houston, <http://greghoustondesign.com/>.
|
||||
|
||||
License:
|
||||
MIT-style license.
|
||||
|
||||
*/
|
||||
|
||||
function buildTree(treeID){
|
||||
|
||||
$$('#'+treeID+' li.folder').each(function(folder){
|
||||
var folderContents = folder.getChildren('ul');
|
||||
var folderImage = new Element('img', {
|
||||
'src': '../images/tree/_open.gif',
|
||||
'width': 18,
|
||||
'height': 18
|
||||
}).inject(folder, 'top');
|
||||
|
||||
// Determine which open and close graphic each folder gets
|
||||
|
||||
if (folder.hasClass('root')) {
|
||||
folder.minus = '../images/tree/Rminus.gif'
|
||||
folder.plus = '../images/tree/Rplus.gif'
|
||||
}
|
||||
else
|
||||
if (folder.getNext()) {
|
||||
folder.minus = '../images/tree/Tminus.gif'
|
||||
folder.plus = '../images/tree/Tplus.gif'
|
||||
}
|
||||
else {
|
||||
folder.minus = '../images/tree/Lminus.gif'
|
||||
folder.plus = '../images/tree/Lplus.gif'
|
||||
}
|
||||
|
||||
var image = new Element('img', {
|
||||
'src': folder.minus,
|
||||
'width': 18,
|
||||
'height': 18
|
||||
}).addEvent('click', function(){
|
||||
if (folder.hasClass('f-open')) {
|
||||
image.setProperty('src', folder.plus);
|
||||
folderImage.setProperty('src', '../images/tree/_closed.gif');
|
||||
folderContents.each(function(el){
|
||||
el.setStyle('display', 'none');
|
||||
});
|
||||
folder.removeClass('f-open');
|
||||
}
|
||||
else {
|
||||
image.setProperty('src', folder.minus);
|
||||
folderImage.setProperty('src', '../images/tree/_open.gif');
|
||||
folderContents.each(function(el){
|
||||
el.setStyle('display', 'block');
|
||||
});
|
||||
folder.addClass('f-open');
|
||||
}
|
||||
}).inject(folder, 'top');
|
||||
|
||||
if (!folder.hasClass('f-open')) {
|
||||
image.setProperty('src', folder.plus);
|
||||
folderContents.each(function(el){
|
||||
el.setStyle('display', 'none');
|
||||
});
|
||||
folder.removeClass('f-open');
|
||||
}
|
||||
|
||||
// Add connecting branches to each file node
|
||||
|
||||
folderContents.each(function(element){
|
||||
var docs = element.getChildren('li.doc');
|
||||
docs.each(function(el){
|
||||
if (el == docs.getLast() && !el.getNext()) {
|
||||
new Element('img', {
|
||||
'src': '../images/tree/L.gif',
|
||||
'width': 18,
|
||||
'height': 18
|
||||
}).inject(el.getElement('span'), 'before');
|
||||
}
|
||||
else {
|
||||
new Element('img', {
|
||||
'src': '../images/tree/T.gif',
|
||||
'width': 18,
|
||||
'height': 18
|
||||
}).inject(el.getElement('span'), 'before');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
// Add connecting branches to each node
|
||||
|
||||
$$('#'+treeID+' li').each(function(node){
|
||||
node.getParents('li').each(function(parent){
|
||||
if (parent.getNext()) {
|
||||
new Element('img', {
|
||||
'src': '../images/tree/I.gif',
|
||||
'width': 18,
|
||||
'height': 18
|
||||
}).inject(node, 'top');
|
||||
}
|
||||
else {
|
||||
new Element('img', {
|
||||
'src': 'images/spacer.gif',
|
||||
'width': 18,
|
||||
'height': 18
|
||||
}).inject(node, 'top');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$$('#'+treeID+' li.doc').each(function(el){
|
||||
new Element('img', {
|
||||
'src': '../images/tree/_doc.gif',
|
||||
'width': 18,
|
||||
'height': 18
|
||||
}).inject(el.getElement('span'), 'before');
|
||||
});
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user