q3aql/webui-aria2
q3aql/webui-aria2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added more info functionality to downloads

Browse Source
This commit is contained in:
Hamza Zia 2012-06-07 18:02:11 +08:00
parent 535da8afe6
commit a05a7b552a
2 changed files with 69 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
index.html
View File

@ -28,25 +28,29 @@
float: right; float: right;
margin-bottom: 5px; margin-bottom: 5px;
} }
.active_settings {
text-align: center;
margin-bottom: 3px;
}
</style> </style>
<!--{{{ active downloads template start --> <!--{{{ active downloads template start -->
<script type="text/mustache" id="download_active_template"> <script type="text/mustache" id="download_active_template">
<div class="row download_active_item" data-gid="{{gid}}"> <div class="row download_active_item" data-gid="{{gid}}">
<div class="span3" style="overflow: hidden;"> <div class="span3" style="overflow: hidden;">
<b style="font-size: 14px;" class="name">{{name}}</b> <b style="font-size: 14px;" class="tmp_name">{{name}}</b>
</div> </div>
<div class="span6"> <div class="span6">
<div class="pull-right"> <div class="pull-right">
<span class="label label-success">Remaining: <span class="remaining">{{remaining}}</span></span> | <span class="label label-success">Remaining: <span class="tmp_remaining">{{remaining}}</span></span> |
<span class="label label-success">Progress: <span class="percentage">{{percentage}}</span>%</span> | <span class="label label-success">Progress: <span class="tmp_percentage">{{percentage}}</span>%</span> |
<span class="label label-success">Speed: <span class="down">{{down}}</span></span> | <span class="label label-success">Speed: <span class="tmp_down_speed">{{down_speed}}</span></span> |
<span class="label label-success">Time left: <span class="eta">{{eta}}</span></span> <span class="label label-success">Time left: <span class="tmp_eta">{{eta}}</span></span>
</div> </div>
</div> </div>
<div class="span3"> <div class="span3">
<div class="button_set"> <div class="button_set">
<button class="btn btn-mini download_pause"><i class="icon-pause"></i>Pause</button> <button class="btn btn-mini download_pause"><i class="icon-pause"></i>Pause</button>
<button class="btn btn-mini btn-info" data-toggle="collapse" data-target="[data-gid={{gid}}] .more_info">More Info</button> <button class="btn btn-mini btn-info" data-toggle="collapse" data-target="[data-gid={{gid}}] .more_info" onclick="$(this).button('toggle');"><i class="icon-info-sign"></i> More Info</button>
<button class="btn btn-mini btn-danger download_remove"><i class="icon-remove"></i> Remove</button> <button class="btn btn-mini btn-danger download_remove"><i class="icon-remove"></i> Remove</button>
</div> </div>
</div> </div>
@ -54,8 +58,19 @@
<div class="span12 progress progress-striped active"> <div class="span12 progress progress-striped active">
<div class="bar" style="width: {{percentage}}%;"></div> <div class="bar" style="width: {{percentage}}%;"></div>
</div> </div>
<br> <div class="span12 more_info collapse">
<div class="span12 more_info collapse">More info here!!!</div> <b class="span2 label active_settings">Status: <span class="tmp_status">{{status}}</span></b>
<b class="span2 label active_settings">GID: <span class="tmp_gid">{{gid}}</span></b>
<b class="span2 label active_settings">Dir: <span class="tmp_dir">{{dir}}</span></b>
<b class="span2 label active_settings">Size: <span class="tmp_size">{{size}}</span></b>
<b class="span2 label active_settings">Downloaded: <span class="tmp_downloaded">{{downloaded}}</span></b>
<b class="span2 label active_settings">Num of Pieces: <span class="tmp_numPieces">{{numPieces}}</span></b>
<b class="span2 label active_settings">Piece Length: <span class="tmp_pieceLength">{{pieceLength}}</span></b>
<b class="span2 label active_settings">ETA: <span class="tmp_eta">{{eta}}</span></b>
<b class="span2 label active_settings">Download Speed: <span class="tmp_down_speed">{{down_speed}}</span></b>
<b class="span2 label active_settings">Upload Speed: <span class="tmp_upload_speed">{{upload_speed}}</span></b>
<b class="span2 label active_settings">Upload Length: <span class="tmp_uploadLength">{{uploadLength}}</span></b>
</div>
</div> </div>
</script> </script>
@ -64,20 +79,21 @@
<!--{{{ waiting downloads template start --> <!--{{{ waiting downloads template start -->
<script type="text/mustache" id="download_waiting_template"> <script type="text/mustache" id="download_waiting_template">
<div class="row download_waiting_item" data-gid="{{gid}}"> <div class="row download_waiting_item" data-gid="{{gid}}">
<div class="span4" style="overflow: hidden;"> <div class="span3" style="overflow: hidden;">
<b style="font-size: 14px;">{{name}}</b> <b style="font-size: 14px;" class="tmp_name">{{name}}</b>
</div> </div>
<div class="span6"> <div class="span6">
<span class="badge badge-warning">Status: {{status}}</span> <span class="badge badge-warning">Status: <span class="tmp_status">{{status}}</span></span>
<div class="pull-right"> <div class="pull-right">
<span class="label label-warning">Size: {{size}}</span> | <span class="label label-warning">Size: <span class="tmp_size">{{size}}</span></span> |
<span class="label label-warning">Remaining: {{remaining}}</span> | <span class="label label-warning">Remaining: <span class="tmp_remaining">{{remaining}}</span></span> |
<span class="label label-warning">Progress: {{percentage}}%</span> <span class="label label-warning">Progress: <span class="tmp_percentage">{{percentage}}</span>%</span>
</div> </div>
</div> </div>
<div class="span2"> <div class="span3">
<div class="button_set"> <div class="button_set">
<button class="btn btn-mini download_play"><i class="icon-play"></i> Play</button> <button class="btn btn-mini download_play"><i class="icon-play"></i> Play</button>
<button class="btn btn-mini btn-info" data-toggle="collapse" data-target="[data-gid={{gid}}] .more_info" onclick="$(this).button('toggle');"><i class="icon-info-sign"></i> More Info</button>
<button class="btn btn-mini btn-danger download_remove"><i class="icon-fire"></i> Purge</button> <button class="btn btn-mini btn-danger download_remove"><i class="icon-fire"></i> Purge</button>
</div> </div>
</div> </div>
@ -85,6 +101,16 @@
<div class="span12 progress progress-striped"> <div class="span12 progress progress-striped">
<div class="bar" style="width: {{percentage}}%; background-color:#FBB450"></div> <div class="bar" style="width: {{percentage}}%; background-color:#FBB450"></div>
</div> </div>
<div class="span12 more_info collapse">
<b class="span2 label active_settings">Status: <span class="tmp_status">{{status}}</span></b>
<b class="span2 label active_settings">GID: <span class="tmp_gid">{{gid}}</span></b>
<b class="span2 label active_settings">Dir: <span class="tmp_dir">{{dir}}</span></b>
<b class="span2 label active_settings">Size: <span class="tmp_size">{{size}}</span></b>
<b class="span2 label active_settings">Downloaded: <span class="tmp_downloaded">{{downloaded}}</span></b>
<b class="span2 label active_settings">Num of Pieces: <span class="tmp_numPieces">{{numPieces}}</span></b>
<b class="span2 label active_settings">Piece Length: <span class="tmp_pieceLength">{{pieceLength}}</span></b>
<b class="span2 label active_settings">Upload Length: <span class="tmp_uploadLength">{{uploadLength}}</span></b>
</div>
</div> </div>
</script> </script>
<!-- waiting downloads template end }}}--> <!-- waiting downloads template end }}}-->
@ -92,20 +118,21 @@
<!--{{{ stopped downloads template start --> <!--{{{ stopped downloads template start -->
<script type="text/mustache" id="download_stopped_template"> <script type="text/mustache" id="download_stopped_template">
<div class="row download_stopped_item" data-gid="{{gid}}"> <div class="row download_stopped_item" data-gid="{{gid}}">
<div class="span4" style="overflow: hidden;"> <div class="span3" style="overflow: hidden;">
<b style="font-size: 14px;">{{name}}</b> <b style="font-size: 14px;" class="tmp_name">{{name}}</b>
</div> </div>
<div class="span6"> <div class="span6">
<span class="badge badge-important">Status: {{status}}</span> <span class="badge badge-important">Status: <span class="tmp_status">{{status}}</span></span>
<div class="pull-right"> <div class="pull-right">
<span class="label label-important">Size: {{size}}</span> | <span class="label label-important">Size: <span class="tmp_size">{{size}}</span></span> |
<span class="label label-important">Downloaded: {{downloaded}}</span> | <span class="label label-important">Downloaded: <span class="tmp_downloaded">{{downloaded}}</span></span> |
<span class="label label-important">Progress: {{percentage}}%</span> <span class="label label-important">Progress: <span class="tmp_percentage">{{percentage}}</span>%</span>
</div> </div>
</div> </div>
<div class="span2"> <div class="span3">
<div class="button_set"> <div class="button_set">
<button class="btn btn-mini download_restart"><i class="icon-repeat"></i> Restart</button> <button class="btn btn-mini download_restart"><i class="icon-repeat"></i> Restart</button>
<button class="btn btn-mini btn-info" data-toggle="collapse" data-target="[data-gid={{gid}}] .more_info" onclick="$(this).button('toggle');"><i class="icon-info-sign"></i> More Info</button>
<button class="btn btn-mini btn-danger download_remove"><i class="icon-fire"></i> Purge</button> <button class="btn btn-mini btn-danger download_remove"><i class="icon-fire"></i> Purge</button>
</div> </div>
</div> </div>
@ -113,6 +140,16 @@
<div class="span12 progress progress-striped"> <div class="span12 progress progress-striped">
<div class="bar" style="width: {{percentage}}%; background-color:#EE5F5B"></div> <div class="bar" style="width: {{percentage}}%; background-color:#EE5F5B"></div>
</div> </div>
<div class="span12 more_info collapse">
<b class="span2 label active_settings">Status: <span class="tmp_status">{{status}}</span></b>
<b class="span2 label active_settings">GID: <span class="tmp_gid">{{gid}}</span></b>
<b class="span2 label active_settings">Dir: <span class="tmp_dir">{{dir}}</span></b>
<b class="span2 label active_settings">Size: <span class="tmp_size">{{size}}</span></b>
<b class="span2 label active_settings">Downloaded: <span class="tmp_downloaded">{{downloaded}}</span></b>
<b class="span2 label active_settings">Num of Pieces: <span class="tmp_numPieces">{{numPieces}}</span></b>
<b class="span2 label active_settings">Piece Length: <span class="tmp_pieceLength">{{pieceLength}}</span></b>
<b class="span2 label active_settings">Upload Length: <span class="tmp_uploadLength">{{uploadLength}}</span></b>
</div>
</div> </div>
</script> </script>
<!-- stopped downloads template end }}}--> <!-- stopped downloads template end }}}-->

14
js/script.js
View File

@ -321,16 +321,22 @@ function getTemplateCtx(data) {
percentage:percentage, percentage:percentage,
gid: data.gid, gid: data.gid,
size: changeLength(data.totalLength, "B"), size: changeLength(data.totalLength, "B"),
down: changeLength(data.downloadSpeed, "B/s"), down_speed: changeLength(data.downloadSpeed, "B/s"),
remaining: changeLength(data.totalLength - data.completedLength, "B"), remaining: changeLength(data.totalLength - data.completedLength, "B"),
eta: eta, eta: eta,
downloaded: changeLength(data.completedLength, "B") downloaded: changeLength(data.completedLength, "B"),
dir: data.dir,
numPieces: data.numPieces,
pieceLength: changeLength(data.pieceLength, "B"),
uploadLength: changeLength(data.uploadLength, "B"),
upload_speed: changeLength(data.uploadSpeed, "B/s")
}; };
} }
function updateDownloadTemplates(elem, ctx) { function updateDownloadTemplates(elem, ctx) {
elem = $(elem); elem = $(elem);
for(var i in ctx) { for(var i in ctx) {
elem.find('.' + i).text(ctx[i]); elem.find('.tmp_' + i).text(ctx[i]);
} }
elem.find('.bar').css('width', ctx.percentage + '%'); elem.find('.bar').css('width', ctx.percentage + '%');
} }
@ -363,7 +369,7 @@ function refreshDownloadTemplates(top_elem, data) {
updateDownloadTemplates(elem, ctx); updateDownloadTemplates(elem, ctx);
} else { } else {
var item = Mustache.render(down_template, ctx); var item = Mustache.render(down_template, ctx);
$('#' + top_elem + '_downloads').append(item); $('#' + top_elem + '_downloads').prepend(item);
} }
} }