2013-01-15 09:24:09 +01:00
<!doctype>
< html >
2013-01-19 18:46:22 +01:00
<!-- {{{ head -->
2013-01-15 09:24:09 +01:00
< head >
< link rel = "icon" href = "favicon.ico" / >
< meta charset = "utf-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > aria2 web client< / title >
< link rel = "stylesheet" href = "css/bootstrap.css" >
< link rel = "stylesheet" href = "css/font-awesome.css" >
2013-01-15 12:19:26 +01:00
2013-01-15 09:24:09 +01:00
< link rel = "stylesheet" href = "css/style.css" >
2013-01-15 12:19:26 +01:00
< link rel = "stylesheet" href = "css/download.css" >
2013-01-15 09:24:09 +01:00
<!-- external javascript dependencies -->
< script src = "js/libs/jquery-1.8.3.js" > < / script >
< script src = "js/libs/underscore.js" > < / script >
< script src = "js/libs/bootstrap.js" > < / script >
< script src = "js/libs/angular.js" > < / script >
< script src = "js/libs/jquery.flot.js" > < / script >
< script src = "js/libs/jquery.flot.resize.js" > < / script >
<!-- webui core -->
2013-01-22 08:59:52 +01:00
< script src = "js/init.js" > < / script >
2013-01-15 09:24:09 +01:00
2013-01-21 15:07:55 +01:00
< script src = "js/directives/chunkbar.js" > < / script >
< script src = "js/directives/dgraph.js" > < / script >
2013-01-22 08:53:30 +01:00
< script src = "js/filters/bytes.js" > < / script >
2013-01-22 13:11:38 +01:00
< script src = "js/filters/path.js" > < / script >
2013-01-22 08:53:30 +01:00
2013-01-15 09:24:09 +01:00
< script src = "js/services/deps.js" > < / script >
< script src = "js/services/base64.js" > < / script >
< script src = "js/services/utils.js" > < / script >
< script src = "js/services/rpc/jsoncall.js" > < / script >
< script src = "js/services/rpc/sockcall.js" > < / script >
< script src = "js/services/rpc/syscall.js" > < / script >
< script src = "js/services/rpc/rpc.js" > < / script >
< script src = "js/ctrls/nav.js" > < / script >
< script src = "js/ctrls/modal.js" > < / script >
< script src = "js/ctrls/download.js" > < / script >
< / head >
2013-01-19 18:46:22 +01:00
<!-- }}} -->
2013-01-15 09:24:09 +01:00
< body >
2013-01-19 18:46:22 +01:00
<!-- {{{ header -->
2013-01-15 09:24:09 +01:00
< div class = "navbar navbar-inverse navbar-fixed-top" ng-controller = "NavCtrl" >
< div class = "navbar-inner" >
< div class = "container" >
<!-- .btn - navbar is used as the toggle for collapsed navbar content -->
< a class = "btn btn-navbar"
data-toggle="collapse"
data-target=".nav-collapse">
< span class = "icon-bar" > < / span >
< span class = "icon-bar" > < / span >
< span class = "icon-bar" > < / span >
< / a >
< a class = "brand" > {{ name }}< / a >
< div class = "nav-collapse" >
< ul class = "nav" >
< li class = "dropdown" >
< a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" >
Add < b class = "caret" > < / b >
< / a >
< ul class = "dropdown-menu" >
< li >
< a href = "#" > < i class = "icon-download" > < / i > Add Download URL< / a >
< / li >
< li >
< a href = "#" > < i class = "icon-file" > < / i > Add Metalink< / a >
< / li >
< li >
< a href = "#" > < i class = "icon-file" > < / i > Add Torrent< / a >
< / li >
< / ul >
< / li >
< li class = "dropdown" id = "stop_downloads" >
< a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" >
Manage < b class = "caret" > < / b >
< / a >
< ul class = "dropdown-menu" >
< li > < a href = "#" > < i class = "icon-pause" > < / i > Pause All< / a > < / li >
< li > < a href = "#" > < i class = "icon-play" > < / i > Resume Paused< / a > < / li >
< li > < a href = "#" > < i class = "icon-remove" > < / i > Purge Completed< / a > < / li >
< li > < a href = "#" > < i class = "icon-fire" > < / i > Remove All< / a > < / li >
< / ul >
< / li >
< / ul >
< ul class = "nav" >
< li class = "dropdown" >
< a href = "#" class = "dropdown-toggle" data-toggle = "dropdown" >
Settings < b class = "caret" > < / b >
< / a >
< ul class = "dropdown-menu" >
< li > < a href = "#" >
< i class = "icon-wrench" > < / i > Connection Settings< / a >
< / li >
< li > < a href = "#" >
< i class = "icon-wrench" > < / i > Global Settings< / a > < / li >
< / ul >
< / li >
< / ul >
< ul class = "nav pull-right" >
< li class = "dropdown" >
< a href = "#" class = "dropdown-toggle" data-toggle = "dropdown" >
About < b class = "caret" > < / b >
< / a >
< ul class = "dropdown-menu" >
< li > < a href = "#" >
< i class = "icon-list-alt" > < / i > Global Statistics< / a > < / li >
< li > < a href = "#" >
< i class = "icon-info-sign" > < / i > About< / a > < / li >
< / ul >
< / li >
< / ul >
< / div > <!-- /.nav - collapse -->
< / div >
< / div >
< / div >
2013-01-19 18:46:22 +01:00
<!-- }}} -->
2013-01-15 09:24:09 +01:00
2013-01-21 15:07:55 +01:00
<!-- {{{ downloads -->
2013-01-15 09:24:09 +01:00
< div role = "main" class = "container" ng-controller = "DownloadCtrl" >
2013-01-21 15:07:55 +01:00
<!-- {{{ download template -->
2013-01-19 18:46:22 +01:00
< table ng-repeat = "download in getDownloads()" class = "download" data-gid = "{{download.gid}}" >
< tbody >
< tr >
< td data-toggle = "collapse" data-target = "[data-gid={{download.gid}}] .download-detail .collapse" class = "download-overview" >
2013-01-22 13:11:38 +01:00
< b class = "download-name" > {{getName(download)}}< / b >
2013-01-19 18:46:22 +01:00
< / td >
< td class = "download-controls" rowspan = "2" >
< div class = "btn-group" >
2013-01-22 08:53:30 +01:00
2013-01-22 13:11:38 +01:00
< button ng-show = "hasStatus(download, 'active')" class = "btn download_pause" ng-click = "pause(download)" > < i class = "icon-pause" > < / i > < / button >
< button ng-show = "hasStatus(download, 'paused')" class = "btn download_play" ng-click = "resume(download)" > < i class = "icon-play" > < / i > < / button >
< button ng-show = "canRestart(download)" class = "btn download_restart" ng-click = "restart(download)" > < i class = "icon-repeat" > < / i > < / button >
2013-01-22 08:53:30 +01:00
2013-01-22 11:12:40 +01:00
< button class = "btn download_remove hidden-phone" ng-click = "remove(download)" > < i class = "icon-stop" > < / i > < / button >
2013-01-19 18:46:22 +01:00
2013-01-22 13:11:38 +01:00
< button class = "btn download_settings hidden-phone" > < i class = "icon-cog" > < / i > < / button >
2013-01-19 18:46:22 +01:00
< button class = "btn dropdown-toggle" data-toggle = "dropdown" >
< i class = "caret" > < / i >
< / button >
< ul class = "dropdown-menu" >
2013-01-22 13:11:38 +01:00
< li class = "visible-phone" > < a href = "#" > < i class = "icon-cog" > < / i > Settings< / a > < / li >
2013-01-19 18:46:22 +01:00
2013-01-22 13:11:38 +01:00
< li ng-show = "download.bittorrent" > < a href = "#" class = "torrent_info" > < i class = "icon-list-alt" > < / i > Peers< / a > < / li >
2013-01-19 18:46:22 +01:00
< li > < a href = "#" data-toggle = "collapse" data-target = "[data-gid={{download.gid}}] .download-detail .collapse" > < i class = "icon-info-sign" > < / i > More Info< / a > < / li >
2013-01-22 13:11:38 +01:00
< li class = "visible-phone" > < a href = "#" ng-click = "remove(download)" > < i class = "icon-remove" > < / i > Remove< / a > < / li >
2013-01-17 07:51:03 +01:00
< / ul >
2013-01-19 18:46:22 +01:00
< / div >
< / td >
< / tr >
< tr >
< td data-toggle = "collapse" data-target = "[data-gid={{download.gid}}] .download-detail .collapse" class = "download-overview" >
< ul class = "stats pull-left" >
2013-01-22 13:11:38 +01:00
< li ng-show = "hasStatus(download, 'active')" class = "label label-success hidden-phone hidden-tablet" > Status: < span class = "download-status" > {{download.status}}< / span > < / li >
< li ng-show = "hasStatus(download, 'active')" class = "label label-success" > ETA: < span class = "download-eta" > {{getEta(download) | time}}< / span > < / li >
< li ng-show = "hasStatus(download, 'active')" class = "label label-success hidden-phone" > Size: < span class = "download-totalLength" > {{download.totalLength | blength}}< / span > < / li >
< li ng-show = "hasStatus(download, 'active')" class = "label label-success hidden-phone" > Downloaded: < span class = "download-completedLength" > {{download.completedLength | blength}}< / span > < / li >
< li ng-show = "hasStatus(download, 'active')" class = "label label-success hidden-phone hidden-tablet" > Progress: < span class = "download-percentage" > {{getProgress(download)}}< / span > %< / li >
< li ng-show = "hasStatus(download, 'active')" class = "label label-success" > Speed: < span class = "download-downloadSpeed" > {{download.downloadSpeed | bspeed}}< / span > < / li >
2013-01-21 15:07:55 +01:00
<!-- TODO: figure out how to do multiple ng - show
2013-01-22 13:11:38 +01:00
< li ng-show = "download.bittorrent" class = "label label-success hidden-phone" > Upload Speed: < span class = "download-uploadSpeed" > {{download.uploadSpeed | bspeed}}< / span > < / li >
2013-01-21 15:07:55 +01:00
-->
2013-01-19 18:46:22 +01:00
2013-01-22 13:11:38 +01:00
< li ng-show = "hasStatus(download, 'paused')" class = "label label-info" > Status: < span class = "download-status" > {{download.status}}< / span > < / li >
< li ng-show = "hasStatus(download, 'paused')" class = "label label-info" > Size: < span class = "download-totalLength" > {{download.totalLength | blength}}< / span > < / li >
< li ng-show = "hasStatus(download, 'paused')" class = "label label-info hidden-phone" > Downloaded: < span class = "download-completedLength" > {{download.completedLength | blength}}< / span > < / li >
< li ng-show = "hasStatus(download, 'paused')" class = "label label-info hidden-phone" > Path: < span class = "download-dir" > {{download.dir}}< / span > < / li >
2013-01-19 18:46:22 +01:00
2013-01-22 13:11:38 +01:00
< li ng-show = "hasStatus(download, 'complete')" class = "label" > Status: < span class = "download-status" > {{download.status}}< / span > < / li >
< li ng-show = "hasStatus(download, 'complete')" class = "label hidden-phone" > Path: < span class = "download-dir" > {{download.dir}}< / span > < / li >
< li ng-show = "hasStatus(download, 'complete')" class = "label" > Size: < span class = "download-totalLength" > {{download.totalLength | blength}}< / span > < / li >
2013-01-19 18:46:22 +01:00
2013-01-22 13:11:38 +01:00
< li ng-show = "hasStatus(download, 'removed')" class = "label label-warning" > Status: < span class = "download-status" > {{download.status}}< / span > < / li >
< li ng-show = "hasStatus(download, 'removed')" class = "label label-warning hidden-phone" > Path: < span class = "download-dir" > {{download.dir}}< / span > < / li >
< li ng-show = "hasStatus(download, 'removed')" class = "label label-warning" > Size: < span class = "download-totalLength" > {{download.totalLength | blength}}< / span > < / li >
2013-01-19 18:46:22 +01:00
2013-01-22 13:11:38 +01:00
< li ng-show = "hasStatus(download, 'error')" class = "label label-important" > Status: < span class = "download-status" > {{download.status}}< / span > < / li >
< li ng-show = "hasStatus(download, 'error')" class = "label label-important hidden-phone" > Path: < span class = "download-dir" > {{download.dir}}< / span > < / li >
< li ng-show = "hasStatus(download, 'error')" class = "label label-important" > Size: < span class = "download-totalLength" > {{download.totalLength | blength}}< / span > < / li >
2013-01-15 09:24:09 +01:00
2013-01-19 18:46:22 +01:00
< / ul >
< / td >
< / tr >
< tr >
< td class = "download-progress" colspan = "2" data-toggle = "collapse" data-target = "[data-gid={{download.gid}}] .download-detail .collapse" >
2013-01-22 13:11:38 +01:00
< div ng-show = "hasStatus(download, 'active')" class = "progress progress-striped active" style = "width: 100%; margin: 0; padding: 0;" >
< div class = "bar" style = "width: {{getProgress(download)}}%;" > < / div >
2013-01-19 18:46:22 +01:00
< / div >
2013-01-22 13:11:38 +01:00
< div ng-show = "hasStatus(download, 'paused')" class = "progress progress-info progress-striped" style = "width: 100%; margin: 0; padding: 0;" >
< div class = "bar" style = "width: {{getProgress(download)}}%;" > < / div >
2013-01-19 18:46:22 +01:00
< / div >
2013-01-22 13:11:38 +01:00
< div ng-show = "hasStatus(download, 'error')" class = "progress progress-danger progress-striped" style = "width: 100%; margin: 0; padding: 0;" >
< div class = "bar" style = "width: {{getProgress(download)}}%;" > < / div >
2013-01-19 18:46:22 +01:00
< / div >
2013-01-22 13:11:38 +01:00
< div ng-show = "hasStatus(download, 'removed')" class = "progress progress-warning progress-striped" style = "width: 100%; margin: 0; padding: 0;" >
< div class = "bar" style = "width: {{getProgress(download)}}%;" > < / div >
2013-01-19 18:46:22 +01:00
< / div >
2013-01-22 13:11:38 +01:00
< div ng-show = "hasStatus(download, 'complete')" class = "progress progress-success progress-striped" style = "width: 100%; margin: 0; padding: 0;" >
< div class = "bar" style = "width: {{getProgress(download)}}%;" > < / div >
2013-01-19 18:46:22 +01:00
< / div >
< / td >
< / tr >
< tr data-toggle = "collapse" data-target = "[data-gid={{download.gid}}] .download-detail .collapse" class = "download-detail" >
< td colspan = "2" >
< div class = "collapse more_info" >
2013-01-21 15:07:55 +01:00
< canvas bitfield = "download.bitfield" pieces = "download.numPieces" class = "progress chunk-canvas" width = "1400" style = "width: 100%; margin: 5px;" chunkbar > < / canvas >
2013-01-19 18:46:22 +01:00
< ul class = "stats" >
< li class = "label" > Status: < span class = "download-status" > {{download.status}}< / span > < / li >
< li class = "label" > GID: < span class = "download-gid" > {{download.gid}}< / span > < / li >
< li class = "label" > Dir: < span class = "download-dir" > {{download.dir}}< / span > < / li >
2013-01-22 08:53:30 +01:00
< li class = "label" > Size: < span class = "download-totalLength" > {{download.totalLength | blength}}< / span > < / li >
< li class = "label" > Downloaded: < span class = "download-completedLength" > {{download.completedLength | blength}}< / span > < / li >
2013-01-19 18:46:22 +01:00
< li class = "label" > Num of Pieces: < span class = "download-numPieces" > {{download.numPieces}}< / span > < / li >
2013-01-22 08:53:30 +01:00
< li class = "label" > Piece Length: < span class = "download-pieceLength" > {{download.pieceLength | blength}}< / span > < / li >
2013-01-22 13:11:38 +01:00
< li class = "label" > ETA: < span class = "download-eta" > {{getEta(download) | time}}< / span > < / li >
2013-01-22 08:53:30 +01:00
< li class = "label" > Down Speed: < span class = "download-downloadSpeed" > {{download.downloadSpeed | bspeed}}< / span > < / li >
2013-01-19 18:46:22 +01:00
2013-01-22 13:11:38 +01:00
< li class = "label" ng-show = "download.bittorrent" > Upload Speed: < span class = "download-uploadSpeed" > {{download.uploadSpeed | bspeed}}< / span > < / li >
< li class = "label" ng-show = "download.bittorrent" > Upload Length: < span class = "download-uploadLength" > {{download.uploadLength | blength}}< / span > < / li >
2013-01-19 18:46:22 +01:00
< li class = "label" > Connections: < span class = "download-connections" > {{download.connections}}< / span > < / li >
< / ul >
2013-01-15 09:24:09 +01:00
2013-01-19 18:46:22 +01:00
< h4 class = "hidden-phone" > Download Files< / h4 >
< ul class = "download-files hidden-phone" >
2013-01-22 13:11:38 +01:00
< li class = "label" ng-repeat = "file in download.files" > {{file.path | prelative:download.dir}} ({{file.length | blength}})< / li >
2013-01-19 18:46:22 +01:00
< / ul >
2013-01-22 13:11:38 +01:00
< div ng-show = "hasStatus(download, 'active')" >
2013-01-22 08:53:30 +01:00
< div class = "download-graph" dspeed = "download.downloadSpeed" uspeed = "download.uploadSpeed" dgraph > < / div >
2013-01-19 18:46:22 +01:00
< / div >
< / div >
< / td >
< / tr >
< / tbody >
< / table >
2013-01-21 15:07:55 +01:00
<!-- }}} -->
< / div >
<!-- }}} -->
<!-- {{{ modals -->
< div ng-controller = "ModalCtrl" >
2013-01-15 09:24:09 +01:00
< / div >
2013-01-21 15:07:55 +01:00
<!-- }}} -->
2013-01-15 09:24:09 +01:00
< / body >
< / html >
