2013-03-19 21:57:52 +01:00
<!doctype>
< html >
<!-- {{{ head -->
< 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" >
2014-05-17 15:46:11 +02:00
< title ng-controller = "NavCtrl" > {{ name }}< / title >
2013-03-19 21:57:52 +01:00
< link rel = "stylesheet" href = "css/bootstrap.css" >
2014-02-21 02:13:31 +01:00
< link rel = "stylesheet" href = "css/bootstrap-responsive.css" >
2014-06-09 03:35:50 +02:00
< link rel = "stylesheet" href = "css/font-awesome.min.css" >
2013-03-19 21:57:52 +01:00
< link rel = "stylesheet" href = "css/style.css" >
< link rel = "stylesheet" href = "css/download.css" >
< link rel = "stylesheet" href = "css/modals.css" >
< style >
/* temporary hack for angularui modal implementation */
.control-group input {
height: 30px;
}
< / style >
<!-- external javascript dependencies -->
2014-02-21 02:13:31 +01:00
< script src = "js/libs/jquery-2.1.0.js" > < / script >
2014-05-31 19:32:46 +02:00
< script src = "js/libs/lodash.js" > < / script >
2013-03-19 21:57:52 +01:00
< script src = "js/libs/angular.js" > < / script >
< script src = "js/libs/angularui-bootstrap.js" > < / script >
< script src = "js/libs/jquery.flot.js" > < / script >
2014-02-24 01:04:28 +01:00
< script src = "js/libs/jquery.flot.time.js" > < / script >
2013-03-19 21:57:52 +01:00
<!-- We do manual resize currently
< script src = "js/libs/jquery.flot.resize.js" > < / script >
-->
<!-- webui core -->
< script src = "js/init.js" > < / script >
2014-06-02 21:36:21 +02:00
< script src = "configuration.js" > < / script >
2013-03-19 21:57:52 +01:00
< script src = "js/directives/chunkbar.js" > < / script >
< script src = "js/directives/dgraph.js" > < / script >
< script src = "js/directives/fselect.js" > < / script >
< script src = "js/filters/bytes.js" > < / script >
< 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/modals.js" > < / script >
< script src = "js/services/alerts.js" > < / script >
< script src = "js/services/settings/settings.js" > < / script >
< script src = "js/services/settings/filters.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/services/rpc/helpers.js" > < / script >
2014-05-31 19:32:46 +02:00
< script src = "js/ctrls/main.js" > < / script >
2013-03-19 21:57:52 +01:00
< script src = "js/ctrls/modal.js" > < / script >
< script src = "js/ctrls/nav.js" > < / script >
< script src = "js/ctrls/alert.js" > < / script >
2013-06-23 22:01:15 +02:00
< script src = "js/ctrls/props.js" > < / script >
2013-03-19 21:57:52 +01:00
< / head >
<!-- }}} -->
2014-05-31 19:32:46 +02:00
< body ng-controller = "MainCtrl" >
2013-03-19 21:57:52 +01:00
<!-- {{{ header -->
2014-06-07 15:19:06 +02:00
< div class = "navbar navbar-inverse navbar-fixed-top" ng-controller = "NavCtrl" >
2013-03-19 21:57:52 +01:00
< div class = "navbar-inner" >
< div class = "container" >
<!-- using a span for collapse rather than a to fix the angular majic on anchors -->
< span class = "btn btn-navbar"
ng-click="collapsed = !collapsed">
2014-06-09 03:35:50 +02:00
< span class = "fa fa-fw fa-bar" > < / span >
< span class = "fa fa-fw fa-bar" > < / span >
< span class = "fa fa-fw fa-bar" > < / span >
2013-03-19 21:57:52 +01:00
< / span >
2014-06-09 03:35:50 +02:00
< a class = "brand" > < span class = "fa fa-fw fa-arrow-circle-down" > < / span > {{ name }}< / a >
2013-03-19 21:57:52 +01:00
2014-05-31 19:32:46 +02:00
< form class = "navbar-form pull-right control-group" >
< input class = "span3 input-large" type = "text" placeholder = "Search" ng-model = "downloadFilter" autocomplete = "off" ng-change = "onDownloadFilter()" > < / input >
< / form >
2014-06-07 15:19:06 +02:00
< div class = "nav-collapse" collapse = "collapsed" >
2014-05-31 19:32:46 +02:00
<!-- {{{ Nav menu -->
2013-03-19 21:57:52 +01:00
< ul class = "nav" >
< li class = "dropdown" >
< a class = "dropdown-toggle" href = "#" >
Add < b class = "caret" > < / b >
< / a >
< ul class = "dropdown-menu" >
< li >
< a href = "#" ng-click = "addUris()" >
2014-06-09 03:35:50 +02:00
< i class = "fa fa-fw fa-arrow-circle-o-down" > < / i > By URIs
2013-03-19 21:57:52 +01:00
< / a >
< / li >
2014-06-02 21:36:21 +02:00
< li ng-show = "isFeatureEnabled('BitTorrent') && enable.torrent" >
2013-03-19 21:57:52 +01:00
< a href = "#" ng-click = "addTorrents()" >
2014-06-09 03:35:50 +02:00
< i class = "fa fa-fw fa-cloud-download" > < / i > By Torrents
2013-03-19 21:57:52 +01:00
< / a >
< / li >
2014-06-02 21:36:21 +02:00
< li ng-show = "isFeatureEnabled('Metalink') && enable.metalink" >
2013-03-19 21:57:52 +01:00
< a href = "#" ng-click = "addMetalinks()" >
2014-06-09 03:35:50 +02:00
< i class = "fa fa-fw fa-file-text-o" > < / i > By Metalinks
2013-03-19 21:57:52 +01:00
< / a >
< / li >
< / ul >
< / li >
< li class = "dropdown" >
< a class = "dropdown-toggle" href = "#" > Manage < b class = "caret" > < / b > < / a >
< ul class = "dropdown-menu" >
< li >
< a
href="#"
2014-06-09 03:35:50 +02:00
ng-click="forcePauseAll()">< i class = "fa fa-fw fa-pause" > < / i > Pause All< / a >
2013-03-19 21:57:52 +01:00
< / li >
< li >
< a
href="#"
2014-06-09 03:35:50 +02:00
ng-click="unpauseAll()">< i class = "fa fa-fw fa-play" > < / i > Resume Paused< / a >
2013-03-19 21:57:52 +01:00
< / li >
< li >
< a
href="#"
2014-06-09 03:35:50 +02:00
ng-click="purgeDownloadResult()">< i class = "fa fa-fw fa-times-circle" > < / i > Purge Completed< / a >
2013-03-19 21:57:52 +01:00
< / li >
<!-- not adding remove all as requires many rpc syscalls to finish
< li >
< a
href="#"
2014-06-09 03:35:50 +02:00
ng-click="removeAll()">< i class = "fa fa-fw fa-fire" > < / i > Remove All< / a >
2013-03-19 21:57:52 +01:00
< / li >
-->
< / ul >
< / li >
< / ul >
< ul class = "nav" >
< li class = "dropdown" >
< a
href="#"
class="dropdown-toggle">Settings < b class = "caret" > < / b > < / a >
< ul class = "dropdown-menu" >
< li >
< a
ng-click="changeCSettings()"
2014-06-09 03:35:50 +02:00
href="#">< i class = "fa fa-fw fa-wrench" > < / i > Connection Settings< / a >
2013-03-19 21:57:52 +01:00
< / li >
< li >
< a
ng-click="changeGSettings()"
2014-06-09 03:35:50 +02:00
href="#">< i class = "fa fa-fw fa-wrench" > < / i > Global Settings< / a >
2013-03-19 21:57:52 +01:00
< / li >
2014-02-17 01:13:25 +01:00
< li >
< a
ng-click="showServerInfo()"
2014-06-09 03:35:50 +02:00
href="#">< i class = "fa fa-fw fa-info-circle" > < / i > Server info< / a >
2014-02-17 01:13:25 +01:00
< / li >
< li >
< a
ng-click="showAbout()"
2014-06-09 03:35:50 +02:00
href="#">< i class = "fa fa-fw fa-question-circle" > < / i > About and contribute< / a >
2014-02-17 01:13:25 +01:00
< / li >
2013-03-19 21:57:52 +01:00
< / ul >
< / li >
< / ul >
< ul class = "nav pull-right" ng-show = "false" >
< li class = "dropdown" >
< a
class="dropdown-toggle"
href="#">Miscellaneous < b class = "caret" > < / b > < / a >
< ul class = "dropdown-menu" >
< li >
2014-06-09 03:35:50 +02:00
< a href = "#" > < i class = "fa fa-fw fa-list-alt" > < / i > Global Statistics< / a >
2013-03-19 21:57:52 +01:00
< / li >
< li >
2014-06-09 03:35:50 +02:00
< a href = "#" > < i class = "fa fa-fw fa-info-circle" > < / i > About< / a >
2013-03-19 21:57:52 +01:00
< / li >
< / ul >
< / li >
< / ul >
2014-05-31 19:32:46 +02:00
<!-- }}} -->
2013-03-19 21:57:52 +01:00
< / div > <!-- /.nav - collapse -->
< / div >
< / div >
< / div >
<!-- }}} -->
2013-03-20 08:45:28 +01:00
<!-- {{{ body -->
2014-06-01 18:27:19 +02:00
< div role = "main" class = "container-fluid" >
2013-03-19 21:57:52 +01:00
<!-- {{{ alerts -->
2014-06-02 21:36:21 +02:00
< div ng-controller = "AlertCtrl" class = "row-fluid alerts" >
2013-03-19 21:57:52 +01:00
< div class = "alert alert-{{alert.type}}" ng-repeat = "alert in pendingAlerts" >
< button type = "button" class = "close" ng-click = "removeAlert($index)" > x< / button >
2014-06-09 04:21:02 +02:00
< span ng-bind-html = "alert.msg" > < / span >
2013-03-19 21:57:52 +01:00
< / div >
< / div >
<!-- }}} -->
2014-06-01 18:27:19 +02:00
< div class = "row-fluid" >
2014-06-03 02:28:55 +02:00
< div ng-class = "{'span3': enable.sidebar.show}" ng-show = "enable.sidebar.show" >
2014-06-01 18:27:19 +02:00
<!-- {{{ nav side bar -->
< div class = "well sidebar-nav" >
2014-06-02 12:58:58 +02:00
2014-06-09 04:35:04 +02:00
<!-- {{{ global statistics -->
< ul class = "nav nav-list" ng-if = "enable.sidebar.stats" >
< li class = "nav-header" ng-show = "totalAria2Downloads()" > Global Statistics< / li >
< li >
< div
yticks="3"
xticks="3"
dspeed="gstats.downloadSpeed"
uspeed="gstats.uploadSpeed"
dgraph ng-show="totalAria2Downloads()"
nolabel="true"
draw="true">
< / div >
< / li >
< / ul >
<!-- }}} -->
< br >
2014-06-02 12:58:58 +02:00
<!-- {{{ download filters -->
2014-06-03 02:28:55 +02:00
< ul id = "filters" class = "clearfix nav nav-list" ng-show = "enable.sidebar.filters" >
2014-06-01 18:27:19 +02:00
< li class = "nav-header" > Download Filters< / li >
< li >
< label for = "filter-speed" >
< input type = "checkbox" ng-model = "filterSpeed" ng-change = "persistFilters()" id = "filter-speed" >
Running
< / label >
< / li >
< li class = "active" >
< label for = "filter-active" >
< input type = "checkbox" ng-model = "filterActive" ng-change = "persistFilters()" id = "filter-active" >
Active
< / label >
< / li >
< li >
< label for = "filter-waiting" >
< input type = "checkbox" ng-model = "filterWaiting" ng-change = "persistFilters()" id = "filter-waiting" >
Waiting
< / label >
< / li >
< li >
< label for = "filter-complete" >
< input type = "checkbox" ng-model = "filterComplete" ng-change = "persistFilters()" id = "filter-complete" >
Complete
< / label >
< / li >
< li >
< label for = "filter-error" >
< input type = "checkbox" ng-model = "filterError" ng-change = "persistFilters()" id = "filter-error" >
Error
< / label >
< / li >
< li >
< label for = "filter-paused" >
< input type = "checkbox" ng-model = "filterPaused" ng-change = "persistFilters()" id = "filter-paused" >
Paused
< / label >
< / li >
< li >
< label for = "filter-removed" >
< input type = "checkbox" ng-model = "filterRemoved" ng-change = "persistFilters()" id = "filter-removed" >
Removed
< / label >
< / li >
< li >
< label > < input type = "checkbox" ng-model = "hideLinkedMetadata" id = "hide-linked-metadata" > Hide linked meta-data< / label >
< p >
Displaying < strong > {{totalDownloads}}< / strong > of < em > {{totalAria2Downloads()}}< / em > downloads
< / p >
< p >
< button ng-click = "toggleStateFilters()" class = "btn btn-default btn-mini" > Toggle< / button >
< button ng-click = "resetFilters()" class = "btn btn-default btn-mini" > Reset filters< / button >
< / p >
< / li >
< / ul >
2014-06-02 12:58:58 +02:00
<!-- }}} -->
2014-06-01 18:27:19 +02:00
2014-06-02 12:58:58 +02:00
< br >
2013-03-19 21:57:52 +01:00
2014-06-03 06:29:54 +02:00
2014-06-02 12:58:58 +02:00
<!-- {{{ starred properties -->
2014-06-02 21:36:21 +02:00
< ul class = "clearfix nav nav-list" ng-controller = "StarredPropsCtrl" ng-show = "properties.length && enable.sidebar.starredProps" >
2014-06-01 18:27:19 +02:00
< li class = "nav-header" > Quick Access Settings< / li >
< li ng-repeat = "prop in properties" >
< label title = "{{prop.desc}}" >
< div > {{prop.name}}< / div >
< div class = "control-group" >
< select style = "width: 100%;" ng-show = "prop.options.length" ng-options = "opt for opt in prop.options" ng-model = "prop.val" > < / select >
< input style = "width: 100%;" ng-show = "!prop.options.length" type = "text" class = "input-large" ng-model = "prop.val" / >
< / div >
< / label >
< / li >
< li >
< button ng-disabled = "!enabled()" ng-click = "save()" class = "btn btn-small" > Save settings< / button >
< / li >
< / ul >
2014-06-02 12:58:58 +02:00
<!-- }}} -->
2014-06-01 18:27:19 +02:00
< / div >
<!-- }}} -->
2014-02-18 01:10:45 +01:00
< / div >
2014-06-02 21:36:21 +02:00
< div ng-class = "{'span9': enable.sidebar.show, 'span12': !enable.sidebar.show }" >
2014-06-01 18:27:19 +02:00
<!-- {{{ downloads -->
<!-- Bug?? <div ng - show="!totalAria2Downloads() && totalAria2Downloads() > getDownloads()" class="hero - unit"> -->
< div ng-show = "!totalAria2Downloads()" class = "hero-unit" >
Currently no download in line to display, use the '< strong > Add< / strong > ' download button to start downloading files!
< / div >
2013-03-19 21:57:52 +01:00
2014-02-24 05:55:04 +01:00
2014-06-01 18:27:19 +02:00
<!-- {{{ download template -->
< table
ng-repeat="download in getDownloads()"
2014-06-02 21:36:21 +02:00
class="row-fluid download" data-gid="{{download.gid}}">
2014-06-01 18:27:19 +02:00
< tbody >
< tr >
2014-06-03 02:05:30 +02:00
< td class = "download-name download-item" ng-click = "toggleCollapsed(download)" >
2014-06-09 03:35:50 +02:00
< i class = "fa fa-fw fa-magnet" style = "color: red;" ng-show = "download.metadata" > < / i > {{download.name}}
2014-06-01 18:27:19 +02:00
< / td >
< td class = "download-controls download-item" rowspan = "2" >
<!-- {{{ download control buttons -->
< div class = "btn-group" >
< button
ng-show="hasStatus(download, ['active', 'waiting'])"
class="btn"
ng-click="pause(download)">
2014-06-09 03:35:50 +02:00
< i class = "fa fa-fw fa-pause" > < / i >
2014-06-01 18:27:19 +02:00
< / button >
< button
ng-show="hasStatus(download, 'paused')"
class="btn"
ng-click="resume(download)">
2014-06-09 03:35:50 +02:00
< i class = "fa fa-fw fa-play" > < / i >
2014-06-01 18:27:19 +02:00
< / button >
2014-06-02 10:06:39 +02:00
< button
ng-show="canRestart(download)"
class="btn"
ng-click="restart(download)">
2014-06-09 03:35:50 +02:00
< i class = "fa fa-fw fa-repeat" > < / i >
2014-06-02 10:06:39 +02:00
< / button >
2014-06-01 18:27:19 +02:00
< button
class="btn hidden-phone"
ng-click="remove(download)">
2014-06-09 03:35:50 +02:00
< i class = "fa fa-fw fa-stop" > < / i >
2014-06-01 18:27:19 +02:00
< / button >
< button
class="btn hidden-phone"
ng-show="['waiting', 'active'].indexOf( getType(download) )!= -1"
ng-click="showSettings(download)">
2014-06-09 03:35:50 +02:00
< i class = "fa fa-fw fa-cog" > < / i >
2014-06-01 18:27:19 +02:00
< / button >
< button class = "btn dropdown-toggle" >
< i class = "caret" > < / i >
< / button >
< ul class = "dropdown-menu" >
< li class = "visible-phone" >
< a
ng-click="showSettings(download)"
ng-show="['waiting', 'active'].indexOf( getType(download) )!= -1"
2014-06-09 03:35:50 +02:00
href="#">< i class = "fa fa-fw fa-cog" > < / i > Settings< / a >
2014-06-01 18:27:19 +02:00
< / li >
< li ng-show = "download.bittorrent && false" >
2014-06-09 03:35:50 +02:00
< a href = "#" > < i class = "fa fa-fw fa-list-alt" > < / i > Peers< / a >
2014-06-01 18:27:19 +02:00
< / li >
< li >
2014-06-03 02:05:30 +02:00
< a ng-click = "toggleCollapsed(download)"
2014-06-09 03:35:50 +02:00
href="#">< i class = "fa fa-fw fa-info-circle" > < / i > More Info< / a >
2014-06-01 18:27:19 +02:00
< / li >
< li class = "visible-phone" >
< a ng-click = "remove(download)"
2014-06-09 03:35:50 +02:00
href="#">< i class = "fa fa-fw fa-times" > < / i > Remove< / a >
2014-06-01 18:27:19 +02:00
< / li >
< / ul >
< / div >
<!-- }}} -->
< / td >
< / tr >
< tr >
2014-06-03 02:05:30 +02:00
< td class = "download-overview download-item" ng-click = "toggleCollapsed(download)" ng-switch = "download.status" >
2014-06-01 18:27:19 +02:00
<!-- {{{ statistics -->
< ul class = "stats pull-left" ng-switch-when = "active" >
<!-- {{{ active download statistics -->
< li class = "label label-active hidden-phone hidden-tablet" >
2014-06-09 03:35:50 +02:00
< span title = "Download status" > < i class = "fa fa-fw fa-play" > < / i > {{download.status}}< / span >
2013-03-19 21:57:52 +01:00
< / li >
2014-06-01 18:27:19 +02:00
< li class = "label" ng-class = "{'label-active': download.downloadSpeed > 2048, 'label-warning': download.downloadSpeed <= 2048}" >
2014-06-09 03:35:50 +02:00
< span title = "Download Speed" > < i class = "fa fa-fw fa-arrow-circle-o-down" > < / i > {{download.downloadSpeed | bspeed}}< / span >
2013-03-19 21:57:52 +01:00
< / li >
2014-06-01 18:27:19 +02:00
< li ng-show = "download.bittorrent" class = "label hidden-phone" ng-class = "{'label-info': download.uploadSpeed > 2048}" >
2014-06-09 03:35:50 +02:00
< span title = "Upload Speed" > < i class = "fa fa-fw fa-arrow-circle-o-up" > < / i > {{download.uploadSpeed | bspeed}}< / span >
2013-03-19 21:57:52 +01:00
< / li >
2014-06-01 18:27:19 +02:00
< li class = "label label-active" >
2014-06-09 03:35:50 +02:00
< span title = "Estimated time" > < i class = "fa fa-fw fa-clock-o" > < / i > {{getEta(download) | time}}< / span >
2013-03-19 21:57:52 +01:00
< / li >
2014-06-01 18:27:19 +02:00
< li class = "label label-active hidden-phone" >
2014-06-09 03:35:50 +02:00
< span title = "Download Size" > < i class = "fa fa-fw fa-cloud-download" > < / i > {{download.fmtTotalLength}}< / span >
2014-06-01 18:27:19 +02:00
< / li >
2013-03-19 21:57:52 +01:00
2014-06-01 18:27:19 +02:00
< li class = "label label-active hidden-phone" >
2014-06-09 03:35:50 +02:00
< span title = "Downloaded" > < i class = "fa fa-fw fa-arrow-circle-o-down" > < / i > {{download.fmtCompletedLength}}< / span >
2014-06-01 18:27:19 +02:00
< / li >
2013-03-19 21:57:52 +01:00
2014-06-01 18:27:19 +02:00
< li class = "label label-active hidden-phone hidden-tablet" >
2014-06-09 03:35:50 +02:00
< span title = "Progress" > < i class = "fa fa-fw fa-chevron-right" > < / i > {{getProgress(download)}}%< / span >
2014-06-01 18:27:19 +02:00
< / li >
2013-03-19 21:57:52 +01:00
2014-06-01 18:27:19 +02:00
<!-- }}} -->
< / ul >
2013-03-19 21:57:52 +01:00
2014-06-01 18:27:19 +02:00
< ul class = "stats pull-left" ng-switch-when = "paused" >
<!-- {{{ paused download statistics -->
< li class = "label label-info" >
2014-06-09 03:35:50 +02:00
< span title = "Download Status" > < i class = "fa fa-fw fa-pause" > < / i > {{download.status}}< / span >
2014-06-01 18:27:19 +02:00
< / li >
2014-02-20 21:36:21 +01:00
2014-06-01 18:27:19 +02:00
< li class = "label label-info" >
2014-06-09 03:35:50 +02:00
< span title = "Download Size" > < i class = "fa fa-fw fa-cloud-download" > < / i > {{download.fmtTotalLength}}< / span >
2014-06-01 18:27:19 +02:00
< / li >
2013-03-19 21:57:52 +01:00
2014-06-01 18:27:19 +02:00
< li class = "label label-info hidden-phone" >
2014-06-09 03:35:50 +02:00
< span title = "Downloaded" > < i class = "fa fa-fw fa-download" > < / i > {{download.fmtCompletedLength}}< / span >
2014-06-01 18:27:19 +02:00
< / li >
2013-03-19 21:57:52 +01:00
2014-06-01 18:27:19 +02:00
< li class = "label label-info hidden-phone" >
2014-06-09 03:35:50 +02:00
< span title = "Download Path" > < i class = "fa fa-fw fa-folder-open" > < / i > {{download.dir}}< / span >
2014-06-01 18:27:19 +02:00
< / li >
2013-03-19 21:57:52 +01:00
2014-06-01 18:27:19 +02:00
<!-- }}} -->
< / ul >
2013-03-19 21:57:52 +01:00
2014-06-01 18:27:19 +02:00
< ul class = "stats pull-left" ng-switch-when = "waiting" >
<!-- {{{ paused download statistics -->
< li class = "label" >
2014-06-09 03:35:50 +02:00
< span title = "Download Status" > < i class = "fa fa-fw fa-caret-right" > < / i > {{download.status}}< / span >
2014-06-01 18:27:19 +02:00
< / li >
2014-02-20 21:36:21 +01:00
2014-06-01 18:27:19 +02:00
< li class = "label" >
2014-06-09 03:35:50 +02:00
< span title = "Download Size" > < i class = "fa fa-fw fa-cloud-download" > < / i > {{download.fmtTotalLength}}< / span >
2014-06-01 18:27:19 +02:00
< / li >
2014-02-20 21:36:21 +01:00
2014-06-01 18:27:19 +02:00
< li class = "label hidden-phone" >
2014-06-09 03:35:50 +02:00
< span title = "Downloaded" > < i class = "fa fa-fw fa-download" > < / i > {{download.fmtCompletedLength}}< / span >
2014-06-01 18:27:19 +02:00
< / li >
2014-02-20 21:36:21 +01:00
2014-06-01 18:27:19 +02:00
< li class = "label hidden-phone" >
2014-06-09 03:35:50 +02:00
< span title = "Download Path" > < i class = "fa fa-fw fa-folder-open" > < / i > {{download.dir}}< / span >
2014-06-01 18:27:19 +02:00
< / li >
2014-02-20 21:36:21 +01:00
2014-06-01 18:27:19 +02:00
<!-- }}} -->
< / ul >
2014-02-20 21:36:21 +01:00
2014-06-01 18:27:19 +02:00
< ul class = "stats pull-left" ng-switch-when = "complete" >
<!-- {{{ complete download statistics -->
2014-02-20 21:36:21 +01:00
2014-06-01 18:27:19 +02:00
< li class = "label label-success" >
2014-06-09 03:35:50 +02:00
< span title = "Download Status" > < i class = "fa fa-fw fa-check-square-o" > < / i > {{download.status}}< / span >
2014-06-01 18:27:19 +02:00
< / li >
2013-03-19 21:57:52 +01:00
2014-06-01 18:27:19 +02:00
< li class = "label label-success" >
2014-06-09 03:35:50 +02:00
< span title = "Download Size" > < i class = "fa fa-fw fa-cloud-download" > < / i > {{download.fmtTotalLength}}< / span >
2014-06-01 18:27:19 +02:00
< / li >
2013-03-19 21:57:52 +01:00
2014-06-01 18:27:19 +02:00
< li class = "label label-success hidden-phone" >
2014-06-09 03:35:50 +02:00
< span title = "Download Path" > < i class = "fa fa-fw fa-folder-open" > < / i > {{download.dir}}< / span >
2014-06-01 18:27:19 +02:00
< / li >
2013-03-19 21:57:52 +01:00
2014-06-01 18:27:19 +02:00
<!-- }}} -->
< / ul >
2014-02-28 12:57:47 +01:00
2014-06-01 18:27:19 +02:00
< ul class = "stats pull-left" ng-switch-when = "removed" >
<!-- {{{ removed download statistics -->
< li class = "label label-warning" >
2014-06-09 03:35:50 +02:00
< span title = "Download Status" > < i class = "fa fa-fw fa-times" > < / i > {{download.status}}< / span >
2014-06-01 18:27:19 +02:00
< / li >
2014-02-20 21:36:21 +01:00
2014-06-01 18:27:19 +02:00
< li class = "label label-warning" >
2014-06-09 03:35:50 +02:00
< span title = "Download Size" > < i class = "fa fa-fw fa-cloud-download" > < / i > {{download.fmtTotalLength}}< / span >
2014-06-01 18:27:19 +02:00
< / li >
2013-03-19 21:57:52 +01:00
2014-06-01 18:27:19 +02:00
< li class = "label label-warning hidden-phone" >
2014-06-09 03:35:50 +02:00
< span title = "Download Path" > < i class = "fa fa-fw fa-folder-open" > < / i > {{download.dir}}< / span >
2014-06-01 18:27:19 +02:00
< / li >
2013-03-19 21:57:52 +01:00
2014-06-01 18:27:19 +02:00
<!-- }}} -->
< / ul >
2014-02-28 12:57:47 +01:00
2014-06-01 18:27:19 +02:00
< ul class = "stats pull-left" ng-switch-when = "error" >
<!-- {{{ error download statistics -->
< li class = "label label-important" >
2014-06-09 03:35:50 +02:00
< span title = "Download Status" > < i class = "fa fa-fw fa-times-circle" > < / i > {{download.status}}< / span >
2014-06-01 18:27:19 +02:00
< / li >
2014-02-20 21:36:21 +01:00
2014-06-01 18:27:19 +02:00
< li class = "label label-important" >
2014-06-09 03:35:50 +02:00
< span title = "Download Size" > < i class = "fa fa-fw fa-cloud-download" > < / i > {{download.fmtTotalLength}}< / span >
2014-06-01 18:27:19 +02:00
< / li >
2013-03-19 21:57:52 +01:00
2014-06-01 18:27:19 +02:00
< li class = "label label-important hidden-phone" >
2014-06-09 03:35:50 +02:00
< span title = "Download Path" > < i class = "fa fa-fw fa-folder-open" > < / i > {{download.dir}}< / span >
2014-06-01 18:27:19 +02:00
< / li >
2014-02-28 12:57:47 +01:00
2014-06-01 18:27:19 +02:00
<!-- }}} -->
< / ul >
2013-03-19 21:57:52 +01:00
<!-- }}} -->
2014-06-01 18:27:19 +02:00
< / td >
< / tr >
< tr >
2014-06-03 02:05:30 +02:00
< td class = "download-progress download-item" colspan = "2" ng-click = "toggleCollapsed(download)" >
2014-06-01 18:27:19 +02:00
< div class = "progress progress-striped" ng-class = "getProgressClass(download)" >
< div class = "bar" style = "width: {{getProgress(download)}}%;" > < / div >
2014-02-20 21:36:21 +01:00
< / div >
2014-06-01 18:27:19 +02:00
< / td >
< / tr >
< tr >
2014-06-03 02:05:30 +02:00
< td colspan = "2" ng-click = "toggleCollapsed(download)" ng-switch = "download.collapsed" >
< div ng-switch-when = "false" collapse = "download.animCollapsed" >
2014-06-01 18:27:19 +02:00
< div class = "download-item" ng-show = "download.numPieces > 1" >
< canvas bitfield = "download.bitfield" draw = "!download.collapsed" pieces = "download.numPieces" class = "progress chunk-canvas" width = "1400" chunkbar > < / canvas >
< / div >
< ul class = "stats download-item" >
2014-06-09 03:35:50 +02:00
< li class = "label" title = "Estimated Time" > < i class = "fa fa-fw fa-clock-o" > < / i > < span class = "download-eta" > {{getEta(download) | time}}< / span > < / li >
< li class = "label" title = "Download Size" > < i class = "fa fa-fw fa-cloud-download" > < / i > < span class = "download-totalLength" > {{download.fmtTotalLength}}< / span > < / li >
< li class = "label" title = "Downloaded" > < i class = "fa fa-fw fa-download" > < / i > < span class = "download-completedLength" > {{download.fmtCompletedLength}}< / span > < / li >
< li class = "label" title = "Download Speed" > < i class = "fa fa-fw fa-arrow-circle-o-down" > < / i > < span class = "download-downloadSpeed" > {{download.fmtDownloadSpeed}}< / span > < / li >
2014-06-01 18:27:19 +02:00
2014-06-09 03:35:50 +02:00
< li class = "label" title = "Upload Speed" ng-show = "download.bittorrent" > < i class = "fa fa-fw fa-arrow-circle-o-up" > < / i > < span class = "download-uploadSpeed" > {{download.fmtUploadSpeed}}< / span > < / li >
< li class = "label" title = "Uploaded" ng-show = "download.bittorrent" > < i class = "fa fa-fw fa-upload" > < / i > < span class = "download-uploadLength" > {{download.fmtUploadLength}}< / span > < / li >
2014-06-01 18:27:19 +02:00
2014-06-09 03:35:50 +02:00
< li class = "label" title = "Connections" > < i class = "fa fa-fw fa-link" > < / i > < span class = "download-connections" > {{download.connections}}< / span > < / li >
2014-06-01 18:27:19 +02:00
2014-06-09 03:35:50 +02:00
< li class = "label" title = "Download GID" > < i class = "fa fa-fw fa-bars" > < / i > < span class = "download-gid" > {{download.gid}}< / span > < / li >
< li class = "label" title = "Number of Pieces" > # of < i class = "fa fa-fw fa-puzzle-piece" > < / i > < span class = "download-numPieces" > {{download.numPieces}}< / span > < / li >
< li class = "label" title = "Piece Length" > < i class = "fa fa-fw fa-puzzle-piece" > < / i > Length < span class = "download-pieceLength" > {{download.fmtPieceLength}}< / span > < / li >
< li class = "label" title = "Download Path" > < i class = "fa fa-fw fa-folder-open" > < / i > < span class = "download-dir" > {{download.dir}}< / span > < / li >
2014-06-01 18:27:19 +02:00
< / ul >
< ul class = "download-files hidden-phone download-item" >
< li class = "label" ng-repeat = "file in download.files" > {{file.relpath}} ({{file.fmtLength}})< / li >
< / ul >
< div ng-show = "hasStatus(download, 'active')" class = "download-item hidden-phone" >
2014-06-02 21:36:21 +02:00
< div class = "download-graph" dspeed = "download.downloadSpeed" uspeed = "download.uploadSpeed" xticks = "7" yticks = "7" dgraph draw = "!download.collapsed" > < / div >
2014-06-01 18:27:19 +02:00
< / div >
2013-03-19 21:57:52 +01:00
< / div >
2014-06-01 18:27:19 +02:00
< / td >
< / tr >
< / tbody >
< / table >
<!-- }}} -->
2013-03-19 21:57:52 +01:00
2014-06-01 18:27:19 +02:00
<!-- }}} -->
< / div >
2013-03-19 21:57:52 +01:00
<!-- {{{ download pagination -->
< div class = "pagination pagination-right" ng-show = "totalDownloads > pageSize" >
2014-02-24 07:46:11 +01:00
< pagination
total-items="totalDownloads"
items-per-page="pageSize"
2014-06-02 22:02:23 +02:00
max-size="11"
2014-02-24 07:46:11 +01:00
page="currentPage"
boundary-links="true"
previous-text="‹ "
next-text="› "
first-text="« "
last-text="» "
>
< / pagination >
2013-03-19 21:57:52 +01:00
< / div >
<!-- }}} -->
2014-06-01 18:27:19 +02:00
< / div >
2013-03-19 21:57:52 +01:00
< / div >
2013-03-20 08:45:28 +01:00
<!-- }}} -->
2013-03-19 21:57:52 +01:00
<!-- {{{ modals -->
< div ng-controller = "ModalCtrl" >
<!-- {{{ add uri modal -->
2014-02-21 02:13:31 +01:00
< script type = "text/ng-template" id = "getUris.html" >
2013-03-19 21:57:52 +01:00
< div class = "modal-header" >
2014-02-21 02:13:31 +01:00
< button class = "close" ng-click = "$dismiss()" > x< / button >
2013-03-19 21:57:52 +01:00
< h3 > Add Downloads By URIs< / h3 >
< / div >
< form class = "modal-body" >
< fieldset >
< legend > Download URIs< / legend >
< p class = "help-block" >
2014-02-15 20:37:04 +01:00
- You can add multiple downloads (files)
2013-03-19 21:57:52 +01:00
at the same time by putting uris for each
2014-02-15 20:37:04 +01:00
file on a separate line. < br >
- You can also add multiple uris (mirrors) for the
2013-03-19 21:57:52 +01:00
*same* file. To do this separate the uris
2014-02-15 20:37:04 +01:00
by a space. < br >
- A URI can be HTTP(S)/FTP/BitTorrent Magnet URI.
- Aria2 will use multiple uris (or mirrors) to boost
the download speed for that file (download). < br >
2013-03-19 21:57:52 +01:00
E.g. To add 2 files (downloads) f1.jpg
and f2.mp4 with 2 uris (mirrors) each,
add uris as following:
< br >
<!-- pre tags print tabs, so do not indent them! -->
< pre >
http://ex1.com/f1.jpg http://ex2.com/f1.jpg
http://ex1.com/f2.mp4 http://ex2.com/f2.mp4
< / pre >
< / p >
2014-02-21 02:13:31 +01:00
< textarea rows = "6" style = "width: 100%" ng-model = "getUris.uris" > < / textarea >
2014-05-31 19:32:46 +02:00
2014-06-07 15:34:32 +02:00
< legend > Download Settings< / legend >
2014-05-31 19:32:46 +02:00
< div class = "control-group" >
< div ng-repeat = "(name, set) in getUris.settings" >
< label class = "control-label" > {{name}}< / label >
< div class = "controls" >
< select ng-show = "set.options.length" ng-options = "opt for opt in set.options" ng-model = "set.val" >
< / select >
< input ng-show = "!set.options.length" typ = "text" class = "input-xlarge" ng-model = "set.val" / >
< / div >
2014-06-07 15:34:32 +02:00
< br >
2014-05-31 19:32:46 +02:00
< / div >
2014-06-07 15:34:32 +02:00
< button class = "btn" ng-click = "getUris.advance_opts()" > Add More Download Specific Options< / button >
2014-05-31 19:32:46 +02:00
< / div >
2013-03-19 21:57:52 +01:00
< / fieldset >
< / form >
< div class = "modal-footer" >
2014-05-31 19:32:46 +02:00
< button class = "btn" ng-click = "$dismiss()" > Cancel< / button >
< button class = "btn btn-primary" ng-click = "$close()" > Start< / button >
2013-03-19 21:57:52 +01:00
< / div >
2014-02-21 02:13:31 +01:00
< / script >
2013-03-19 21:57:52 +01:00
<!-- }}} -->
<!-- {{{ add torrent modal -->
2014-02-21 02:13:31 +01:00
< script type = "text/ng-template" id = "getTorrents.html" >
2013-03-19 21:57:52 +01:00
< div class = "modal-header" >
2014-02-21 02:13:31 +01:00
< button class = "close" ng-click = "$dismiss()" > x< / button >
2013-03-19 21:57:52 +01:00
< h3 > Add Downloads By Torrents< / h3 >
< / div >
< form class = "modal-body" >
< fieldset >
< legend > Select Torrents< / legend >
< p class = "help-block" >
2014-02-15 20:37:04 +01:00
- Select the torrent from the local filesystem to start the download. < br >
- You can select multiple torrents to start multiple downloads < br >
- To add a magnet torrent url, use the add url option and add it there.
2013-03-19 21:57:52 +01:00
< / p >
2014-02-15 20:37:04 +01:00
< input type = "file" class = "input-xlarge" fselect = "getTorrents.files" multiple / >
2014-05-31 19:32:46 +02:00
< div class = "control-group" >
< div ng-repeat = "(name, set) in getTorrents.settings" >
< label class = "control-label" > {{name}}< / label >
< div class = "controls" >
< select ng-show = "set.options.length" ng-options = "opt for opt in set.options" ng-model = "set.val" >
< / select >
< input ng-show = "!set.options.length" typ = "text" class = "input-xlarge" ng-model = "set.val" / >
< / div >
< br > < br >
< / div >
< / div >
2013-03-19 21:57:52 +01:00
< / fieldset >
2014-05-31 19:32:46 +02:00
< button class = "btn" ng-click = "getTorrents.advance_opts()" > Add Download Specific Options< / button >
2013-03-19 21:57:52 +01:00
< / form >
< div class = "modal-footer" >
2014-05-31 19:32:46 +02:00
< button class = "btn" ng-click = "$dismiss()" > Cancel< / button >
< button class = "btn btn-primary" ng-click = "$close()" > Start< / button >
2013-03-19 21:57:52 +01:00
< / div >
2014-02-21 02:13:31 +01:00
< / script >
2013-03-19 21:57:52 +01:00
<!-- }}} -->
<!-- {{{ add metalink modal -->
2014-02-21 02:13:31 +01:00
< script type = "text/ng-template" id = "getMetalinks.html" >
2013-03-19 21:57:52 +01:00
< div class = "modal-header" >
2014-02-21 02:13:31 +01:00
< button class = "close" ng-click = "$dismiss()" > x< / button >
2013-03-19 21:57:52 +01:00
< h3 > Add Downloads By Metalinks< / h3 >
< / div >
< form class = "modal-body" >
< fieldset >
< legend > Select Metalinks< / legend >
< p class = "help-block" >
2014-02-15 20:37:04 +01:00
- Select the metalink from the local filesystem to start the download. < br >
- You can select multiple metalinks to start multiple downloads
2013-03-19 21:57:52 +01:00
< / p >
2014-02-15 20:37:04 +01:00
< input type = "file" class = "input-xlarge" fselect = "getMetalinks.files" multiple / >
2014-05-31 19:32:46 +02:00
< div class = "control-group" >
< div ng-repeat = "(name, set) in getMetalinks.settings" >
< label class = "control-label" > {{name}}< / label >
< div class = "controls" >
< select ng-show = "set.options.length" ng-options = "opt for opt in set.options" ng-model = "set.val" >
< / select >
< input ng-show = "!set.options.length" typ = "text" class = "input-xlarge" ng-model = "set.val" / >
< / div >
< br > < br >
< / div >
< / div >
2013-03-19 21:57:52 +01:00
< / fieldset >
2014-05-31 19:32:46 +02:00
< button class = "btn" ng-click = "getMetalinks.advance_opts()" > Add Download Specific Options< / button >
2013-03-19 21:57:52 +01:00
< / form >
< div class = "modal-footer" >
2014-05-31 19:32:46 +02:00
< button class = "btn" ng-click = "$dismiss()" > Cancel< / button >
< button class = "btn btn-primary" ng-click = "$close()" > Start< / button >
2013-03-19 21:57:52 +01:00
< / div >
2014-02-21 02:13:31 +01:00
< / script >
2013-03-19 21:57:52 +01:00
<!-- }}} -->
<!-- {{{ settings modal -->
2014-02-21 02:13:31 +01:00
< script type = "text/ng-template" id = "settings.html" >
2013-03-19 21:57:52 +01:00
< div class = "modal-header" >
2014-02-21 02:13:31 +01:00
< button class = "close" ng-click = "$dismiss()" > x< / button >
2013-03-19 21:57:52 +01:00
< h3 > {{settings.title}}< / h3 >
< / div >
< form class = "form-horizontal modal-body" >
< fieldset >
< div class = "control-group" >
< div ng-repeat = "(name, set) in settings.settings" >
< label class = "control-label" > {{name}}< / label >
< div class = "controls" >
< select ng-show = "set.options.length" ng-options = "opt for opt in set.options" ng-model = "set.val" >
< / select >
< input ng-show = "!set.options.length" typ = "text" class = "input-xlarge" ng-model = "set.val" / >
2014-05-31 19:32:46 +02:00
< label class = "checkbox" ng-show = "set.starred != undefined" >
2013-06-23 22:01:15 +02:00
< input type = "checkbox" ng-model = "set.starred" / > Quick Access (shown on the main page)
< / label >
2013-03-19 21:57:52 +01:00
< p class = "help-block" > {{set.desc}}< / p >
< / div >
< br > < br >
< / div >
< / div >
< / fieldset >
< / form >
< div class = "modal-footer" >
2014-05-31 19:32:46 +02:00
< button class = "btn" ng-click = "$dismiss()" > Cancel< / button >
< button class = "btn btn-primary" ng-click = "$close()" > {{settings.actionText}}< / button >
2013-03-19 21:57:52 +01:00
< / div >
2014-02-21 02:13:31 +01:00
< / script >
2013-03-19 21:57:52 +01:00
<!-- }}} -->
<!-- {{{ connection modal -->
2014-02-21 02:13:31 +01:00
< script type = "text/ng-template" id = "connection.html" >
2013-03-19 21:57:52 +01:00
< div class = "modal-header" >
2014-02-21 02:13:31 +01:00
< button class = "close" ng-click = "$dismiss()" > x< / button >
2013-03-19 21:57:52 +01:00
< h3 > Connection Settings< / h3 >
< / div >
< div class = "modal-body" >
< form class = "form-horizontal" >
< fieldset >
< legend > Aria2 RPC host and port< / legend >
< div class = "control-group" >
< label class = "control-label" > Enter the host:< / label >
< div class = "controls" >
< div class = "input-prepend" >
< span class = "add-on" > http(s)://< / span >
< input type = "text" class = "input-xlarge"
ng-model="connection.conf.host"/>
< / div >
< p class = "help-block" >
Enter the ip or dns name of the server on which the
rpc for aria2 is running (default = localhost)
< / p >
< / div >
< label class = "control-label" > Enter the port:< / label >
< div class = "controls" >
< input type = "text" class = "input-xlarge"
ng-model="connection.conf.port"/>
< p class = "help-block" >
Enter the port of the server on which the rpc for
aria2 is running (default = 6800)
< / p >
< / div >
< label class = "control-label" > SSL/TLS encryption:< / label >
< div class = "controls" >
2014-05-24 17:02:23 +02:00
< label >
< input type = "checkbox" ng-model = "connection.conf.encrypt" / >
Enable SSL/TLS encryption.
< / label >
2013-03-19 21:57:52 +01:00
< / div >
2014-05-17 17:41:00 +02:00
< label class = "control-label" > Enter the secret token (optional):< / label >
< div class = "controls" >
< label >
< input type = "text" class = "input-xlarge" ng-model = "connection.conf.auth.token" / >
< p class = "help-block" >
Enter the aria2 RPC secret token (leave empty if authentication is not enabled)>
< / p >
< / label >
2013-03-19 21:57:52 +01:00
< / div >
< label class = "control-label" > Enter the username (optional):< / label >
< div class = "controls" >
< input type = "text" class = "input-xlarge"
ng-model="connection.conf.auth.user"/>
< p class = "help-block" >
Enter the aria2 RPC username
(empty if authentication not enabled)
< / p >
< / div >
< label class = "control-label" > Enter the password (optional):< / label >
< div class = "controls" >
< input type = "password" class = "input-xlarge"
ng-model="connection.conf.auth.pass"/>
< p class = "help-block" >
Enter the aria2 RPC password
(empty if authentication not enabled)
< / p >
< / div >
< / div >
< / fieldset >
< / form >
< / div >
< div class = "modal-footer" >
2014-05-31 19:32:46 +02:00
< button href = "#" class = "btn" ng-click = "$dismiss()" > Cancel< / button >
< button href = "#" class = "btn btn-primary" ng-click = "$close()" >
2013-03-19 21:57:52 +01:00
Save Connection configuration
< / button >
< / div >
2014-02-21 02:13:31 +01:00
< / script >
2013-03-19 21:57:52 +01:00
<!-- }}} -->
2014-02-17 01:13:25 +01:00
<!-- {{{ server info modal -->
2014-02-21 02:13:31 +01:00
< script type = "text/ng-template" id = "server_info.html" >
2014-02-17 01:13:25 +01:00
< div class = "modal-header" >
2014-02-21 02:13:31 +01:00
< button class = "close" ng-click = "$dismiss()" > x< / button >
2014-02-17 01:13:25 +01:00
< h3 > Aria2 server info< / h3 >
< / div >
< div class = "modal-body" >
< b > Aria2 Version {{miscellaneous.version}}< / b >
< br > < br >
< b > Features Enabled< / b >
< ul >
< li
ng-repeat="feature in miscellaneous.enabledFeatures">
< span > {{feature}}< / span >
< / li >
< / ul >
< / div >
< div class = "modal-footer" >
2014-02-21 02:13:31 +01:00
< button class = "btn" ng-click = "$dismiss()" > Close< / button >
2014-02-17 01:13:25 +01:00
< / div >
2014-02-21 02:13:31 +01:00
< / script >
2014-02-17 01:13:25 +01:00
<!-- }}} -->
<!-- {{{ about modal -->
2014-02-21 02:13:31 +01:00
< script type = "text/ng-template" id = "about.html" >
2014-02-17 01:13:25 +01:00
< div class = "modal-header" >
2014-02-21 02:13:31 +01:00
< button class = "close" ng-click = "$dismiss()" > x< / button >
2014-02-17 01:13:25 +01:00
< h3 > About and contribute< / h3 >
< / div >
< div class = "modal-body" >
< p >
To download the latest version of the project,< br / >
add issues or to contribute back head on to:< br / >
< a href = "https://github.com/ziahamza/webui-aria2" > http://github.com/ziahamza/webui-aria2< / a >
< br / > < br / >
Or you can open the latest version in browser through:< br / >
< a href = "http://ziahamza.github.io/webui-aria2" > http://ziahamza.github.io/webui-aria2< / a >
< / p >
< / div >
< div class = "modal-footer" >
2014-02-21 02:13:31 +01:00
< button class = "btn" ng-click = "$dismiss()" > Close< / button >
2014-02-17 01:13:25 +01:00
< / div >
2014-02-21 02:13:31 +01:00
< / script >
2014-02-17 01:13:25 +01:00
<!-- }}} -->
2013-03-19 21:57:52 +01:00
< / div >
<!-- }}} -->
2014-02-18 01:10:45 +01:00
<!-- Bottom Padding -->
< br / > < br / > < br / > < br / > < br / >
2013-03-19 21:57:52 +01:00
< / body >
< / html >
