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">
|
|
|
|
|
|
|
|
|
|
<title>aria2 web client</title>
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="css/bootstrap.css">
|
|
|
|
|
<link rel="stylesheet" href="css/font-awesome.css">
|
|
|
|
|
|
|
|
|
|
<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 -->
|
|
|
|
|
<script src="js/libs/jquery-1.8.3.js"></script>
|
|
|
|
|
<script src="js/libs/underscore.js"></script>
|
|
|
|
|
|
|
|
|
|
<script src="js/libs/angular.js"></script>
|
|
|
|
|
|
|
|
|
|
<script src="js/libs/angularui-bootstrap.js"></script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script src="js/libs/jquery.flot.js"></script>
|
|
|
|
|
|
|
|
|
|
<!-- We do manual resize currently
|
|
|
|
|
<script src="js/libs/jquery.flot.resize.js"></script>
|
|
|
|
|
-->
|
|
|
|
|
|
|
|
|
|
<!-- webui core -->
|
|
|
|
|
<script src="js/init.js"></script>
|
|
|
|
|
|
|
|
|
|
<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/filters/path.js"></script>
|
|
|
|
|
|
|
|
|
|
<script src="js/services/constants.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>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script src="js/ctrls/modal.js"></script>
|
|
|
|
|
<script src="js/ctrls/nav.js"></script>
|
|
|
|
|
<script src="js/ctrls/download.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>
|
|
|
|
|
<!-- }}} -->
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
<!-- {{{ header -->
|
|
|
|
|
<div class="navbar navbar-inverse navbar-fixed-top" ng-controller="NavCtrl">
|
|
|
|
|
<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">
|
|
|
|
|
|
|
|
|
|
<span class="icon-bar"></span>
|
|
|
|
|
<span class="icon-bar"></span>
|
|
|
|
|
<span class="icon-bar"></span>
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
|
|
<a class="brand">{{ name }}</a>
|
|
|
|
|
|
|
|
|
|
<div class="nav-collapse" collapse="collapsed">
|
|
|
|
|
<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()">
|
|
|
|
|
<i class="icon-download"></i> By URIs
|
|
|
|
|
</a>
|
|
|
|
|
</li>
|
2013-03-20 08:45:28 +01:00
|
|
|
<li ng-show="isFeatureEnabled('BitTorrent')">
|
2013-03-19 21:57:52 +01:00
|
|
|
<a href="#" ng-click="addTorrents()">
|
|
|
|
|
<i class="icon-file"></i> By Torrents
|
|
|
|
|
</a>
|
|
|
|
|
</li>
|
2013-03-20 08:45:28 +01:00
|
|
|
<li ng-show="isFeatureEnabled('Metalink')">
|
2013-03-19 21:57:52 +01:00
|
|
|
<a href="#" ng-click="addMetalinks()">
|
|
|
|
|
<i class="icon-file"></i> By Metalinks
|
|
|
|
|
</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="#"
|
|
|
|
|
ng-click="forcePauseAll()"><i class="icon-pause"></i> Pause All</a>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<a
|
|
|
|
|
href="#"
|
|
|
|
|
ng-click="unpauseAll()"><i class="icon-play"></i> Resume Paused</a>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<a
|
|
|
|
|
href="#"
|
|
|
|
|
ng-click="purgeDownloadResult()"><i class="icon-remove"></i> Purge Completed</a>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<!-- not adding remove all as requires many rpc syscalls to finish
|
|
|
|
|
<li>
|
|
|
|
|
<a
|
|
|
|
|
href="#"
|
|
|
|
|
ng-click="removeAll()"><i class="icon-fire"></i> Remove All</a>
|
|
|
|
|
</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()"
|
|
|
|
|
href="#"><i class="icon-wrench"></i> Connection Settings</a>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li>
|
|
|
|
|
<a
|
|
|
|
|
ng-click="changeGSettings()"
|
|
|
|
|
href="#"><i class="icon-wrench"></i> Global Settings</a>
|
|
|
|
|
</li>
|
2014-02-17 01:13:25 +01:00
|
|
|
|
|
|
|
|
<li>
|
|
|
|
|
<a
|
|
|
|
|
ng-click="showServerInfo()"
|
|
|
|
|
href="#"><i class="icon-info-sign"></i> Server info</a>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li>
|
|
|
|
|
<a
|
|
|
|
|
ng-click="showAbout()"
|
|
|
|
|
href="#"><i class="icon-question-sign"></i> About and contribute</a>
|
|
|
|
|
</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>
|
|
|
|
|
<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-03-20 08:45:28 +01:00
|
|
|
<!-- {{{ body -->
|
2013-03-19 21:57:52 +01:00
|
|
|
<div role="main" class="container" ng-controller="DownloadCtrl">
|
|
|
|
|
|
|
|
|
|
<!-- {{{ alerts -->
|
2013-06-23 22:01:15 +02:00
|
|
|
<div ng-controller="AlertCtrl" class="row">
|
2013-03-19 21:57:52 +01:00
|
|
|
<div class="alert alert-{{alert.type}}" ng-repeat="alert in pendingAlerts">
|
|
|
|
|
<span ng-bind-html-unsafe="alert.msg"></span>
|
|
|
|
|
<button type="button" class="close" ng-click="removeAlert($index)">x</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- }}} -->
|
|
|
|
|
|
2013-06-23 22:01:15 +02:00
|
|
|
<!-- starred properties {{{ -->
|
|
|
|
|
<div ng-controller="StarredPropsCtrl" ng-show="properties.length">
|
|
|
|
|
<h3>Quick Access Settings</h3>
|
|
|
|
|
<form class="row">
|
|
|
|
|
<fieldset>
|
|
|
|
|
<div class="span4" ng-repeat="prop in properties">
|
|
|
|
|
<label>{{prop.name}}</label>
|
|
|
|
|
<select ng-show="prop.options.length" ng-options="opt for opt in prop.options" ng-model="prop.val">
|
|
|
|
|
</select>
|
|
|
|
|
<input ng-show="!prop.options.length" typ="text" class="input-large" ng-model="prop.val"/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="span12"><button ng-disabled="!enabled()" ng-click="save()">Save</button></div>
|
|
|
|
|
</fieldset>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
<!--}}} -->
|
|
|
|
|
|
2013-03-19 21:57:52 +01:00
|
|
|
<!-- {{{ downloads -->
|
2013-03-24 09:57:56 +01:00
|
|
|
<div ng-show="!totalAria2Downloads() && totalAria2Downloads() > getDownloads()" class="hero-unit">
|
2013-03-19 21:57:52 +01:00
|
|
|
<h3>Currently no downloads in line to display, use the Add download button to start downloading files!</h3>
|
|
|
|
|
</div>
|
|
|
|
|
|
2013-06-23 22:01:15 +02:00
|
|
|
|
2013-03-19 21:57:52 +01:00
|
|
|
<!-- {{{ download template -->
|
2013-06-23 22:01:15 +02:00
|
|
|
|
|
|
|
|
<form class="row" ng-show="(totalAria2Downloads() > pageSize) || downloadFilter.length">
|
2013-03-19 21:57:52 +01:00
|
|
|
<fieldset>
|
2013-06-23 22:01:15 +02:00
|
|
|
<div class="span4">
|
|
|
|
|
<label>Search</label>
|
|
|
|
|
<input typ="text" ng-model="downloadFilter" class="input-large"/>
|
|
|
|
|
<br>
|
|
|
|
|
<b>Found: {{totalDownloads}} / {{totalAria2Downloads()}} </b>
|
|
|
|
|
</div>
|
2013-03-19 21:57:52 +01:00
|
|
|
</fieldset>
|
|
|
|
|
</form>
|
|
|
|
|
|
|
|
|
|
<table
|
|
|
|
|
ng-repeat="download in getDownloads()"
|
2013-06-23 22:01:15 +02:00
|
|
|
class="row download" data-gid="{{download.gid}}">
|
2013-03-19 21:57:52 +01:00
|
|
|
<tbody>
|
|
|
|
|
<tr>
|
|
|
|
|
<td
|
|
|
|
|
ng-click="download.collapsed = !download.collapsed"
|
|
|
|
|
class="download-overview">
|
|
|
|
|
<b class="download-name">{{getName(download)}}</b>
|
|
|
|
|
</td>
|
|
|
|
|
<td class="download-controls" rowspan="2">
|
|
|
|
|
<!-- {{{ download control buttons -->
|
|
|
|
|
<div class="btn-group">
|
|
|
|
|
<button
|
|
|
|
|
ng-show="hasStatus(download, 'active')"
|
|
|
|
|
class="btn"
|
|
|
|
|
ng-click="pause(download)">
|
|
|
|
|
<i class="icon-pause"></i>
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<button
|
2013-04-18 09:24:23 +02:00
|
|
|
ng-show="hasStatus(download, ['paused', 'waiting'])"
|
2013-03-19 21:57:52 +01:00
|
|
|
class="btn"
|
|
|
|
|
ng-click="resume(download)">
|
|
|
|
|
<i class="icon-play"></i>
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<button
|
|
|
|
|
ng-show="canRestart(download)"
|
|
|
|
|
class="btn"
|
|
|
|
|
ng-click="restart(download)">
|
|
|
|
|
<i class="icon-repeat"></i>
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<button
|
|
|
|
|
class="btn hidden-phone"
|
|
|
|
|
ng-click="remove(download)">
|
|
|
|
|
<i class="icon-stop"></i>
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<button
|
|
|
|
|
class="btn hidden-phone"
|
|
|
|
|
ng-show="['waiting', 'active'].indexOf( getType(download) )!= -1"
|
|
|
|
|
ng-click="showSettings(download)">
|
|
|
|
|
<i class="icon-cog"></i>
|
|
|
|
|
</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"
|
|
|
|
|
href="#"><i class="icon-cog"></i> Settings</a>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li ng-show="download.bittorrent && false">
|
|
|
|
|
<a href="#"><i class="icon-list-alt"></i> Peers</a>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li>
|
|
|
|
|
<a ng-click="download.collapsed = !download.collapsed"
|
|
|
|
|
href="#"><i class="icon-info-sign"></i> More Info</a>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="visible-phone">
|
|
|
|
|
<a ng-click="remove(download)"
|
|
|
|
|
href="#"><i class="icon-remove"></i> Remove</a>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- }}} -->
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td
|
|
|
|
|
ng-click="download.collapsed = !download.collapsed"
|
|
|
|
|
class="download-overview">
|
|
|
|
|
<!-- {{{ statistics -->
|
|
|
|
|
<ul class="stats pull-left">
|
|
|
|
|
<!-- {{{ active download statistics -->
|
|
|
|
|
<li
|
|
|
|
|
ng-show="hasStatus(download, 'active')"
|
|
|
|
|
class="label label-success hidden-phone hidden-tablet">
|
|
|
|
|
<span>Status: {{download.status}}</span>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li
|
|
|
|
|
ng-show="hasStatus(download, 'active')"
|
|
|
|
|
class="label label-success">
|
|
|
|
|
<span>ETA: {{getEta(download) | time}}</span>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li
|
|
|
|
|
ng-show="hasStatus(download, 'active')"
|
|
|
|
|
class="label label-success hidden-phone">
|
|
|
|
|
<span>Size: {{download.totalLength | blength}}</span>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li
|
|
|
|
|
ng-show="hasStatus(download, 'active')"
|
|
|
|
|
class="label label-success hidden-phone">
|
|
|
|
|
<span>Downloaded: {{download.completedLength | blength}}</span>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li
|
|
|
|
|
ng-show="hasStatus(download, 'active')"
|
|
|
|
|
class="label label-success hidden-phone hidden-tablet">
|
|
|
|
|
<span>Progress: {{getProgress(download)}}%</span>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li
|
|
|
|
|
ng-show="hasStatus(download, 'active')"
|
|
|
|
|
class="label label-success">
|
|
|
|
|
<span>Speed: {{download.downloadSpeed | bspeed}}</span>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<!-- TODO: figure out how to do multiple ng-show
|
|
|
|
|
<li ng-show="download.bittorrent" class="label label-success hidden-phone">Upload Speed: <span class="download-uploadSpeed">{{download.uploadSpeed | bspeed}}</span></li>
|
|
|
|
|
-->
|
|
|
|
|
|
|
|
|
|
<!-- }}} -->
|
|
|
|
|
<!-- {{{ paused download statistics -->
|
|
|
|
|
<li
|
|
|
|
|
ng-show="hasStatus(download, ['paused', 'waiting'])"
|
|
|
|
|
class="label label-info">
|
|
|
|
|
<span>Status: {{download.status}}</span>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li
|
|
|
|
|
ng-show="hasStatus(download, ['paused', 'waiting'])"
|
|
|
|
|
class="label label-info">
|
|
|
|
|
<span>Size: {{download.totalLength | blength}}</span>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li
|
|
|
|
|
ng-show="hasStatus(download, ['paused', 'waiting'])"
|
|
|
|
|
class="label label-info hidden-phone">
|
|
|
|
|
<span>Downloaded: {{download.completedLength | blength}}</span>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li
|
|
|
|
|
ng-show="hasStatus(download, ['paused', 'waiting'])"
|
|
|
|
|
class="label label-info hidden-phone">
|
|
|
|
|
<span>Path: {{download.dir}}</span>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<!-- }}} -->
|
|
|
|
|
<!-- {{{ complete download statistics -->
|
|
|
|
|
|
|
|
|
|
<li
|
|
|
|
|
ng-show="hasStatus(download, 'complete')"
|
|
|
|
|
class="label">
|
|
|
|
|
<span>Status: {{download.status}}</span>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li
|
|
|
|
|
ng-show="hasStatus(download, 'complete')"
|
|
|
|
|
class="label hidden-phone">
|
|
|
|
|
<span>Path: {{download.dir}}</span>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li
|
|
|
|
|
ng-show="hasStatus(download, 'complete')"
|
|
|
|
|
class="label">
|
|
|
|
|
<span>Size: {{download.totalLength | blength}}</span>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<!-- }}} -->
|
|
|
|
|
<!-- {{{ removed download statistics -->
|
|
|
|
|
<li
|
|
|
|
|
ng-show="hasStatus(download, 'removed')"
|
|
|
|
|
class="label label-warning">
|
|
|
|
|
<span>Status: {{download.status}}</span>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li
|
|
|
|
|
ng-show="hasStatus(download, 'removed')"
|
|
|
|
|
class="label label-warning hidden-phone">
|
|
|
|
|
<span>Path: {{download.dir}}</span>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li
|
|
|
|
|
ng-show="hasStatus(download, 'removed')"
|
|
|
|
|
class="label label-warning">
|
|
|
|
|
<span>Size: {{download.totalLength | blength}}</span>
|
|
|
|
|
</li>
|
|
|
|
|
<!-- }}} -->
|
|
|
|
|
<!-- {{{ error download statistics -->
|
|
|
|
|
<li
|
|
|
|
|
ng-show="hasStatus(download, 'error')"
|
|
|
|
|
class="label label-important">
|
|
|
|
|
<span>Status: {{download.status}}</span>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li
|
|
|
|
|
ng-show="hasStatus(download, 'error')"
|
|
|
|
|
class="label label-important hidden-phone">
|
|
|
|
|
<span>Path: {{download.dir}}</span>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li
|
|
|
|
|
ng-show="hasStatus(download, 'error')"
|
|
|
|
|
class="label label-important">
|
|
|
|
|
<span>Size: {{download.totalLength | blength}}</span>
|
|
|
|
|
</li>
|
|
|
|
|
<!-- }}} -->
|
|
|
|
|
</ul>
|
|
|
|
|
<!-- }}} -->
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td class="download-progress" colspan="2" ng-click="download.collapsed = !download.collapsed">
|
|
|
|
|
|
|
|
|
|
<div ng-show="hasStatus(download, 'active')" class="progress progress-striped" style="width: 100%; margin: 0; padding: 0;">
|
|
|
|
|
<div class="bar" style="width: {{getProgress(download)}}%;"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div ng-show="hasStatus(download, ['paused', 'waiting'])" class="progress progress-info progress-striped" style="width: 100%; margin: 0; padding: 0;">
|
|
|
|
|
<div class="bar" style="width: {{getProgress(download)}}%;"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr ng-click="download.collapsed = !download.collapsed" class="download-detail">
|
|
|
|
|
<td colspan="2">
|
|
|
|
|
<div collapse="download.collapsed">
|
|
|
|
|
<canvas bitfield="download.bitfield" draw="!download.collapsed" pieces="download.numPieces" class="progress chunk-canvas" width="1400" style="width: 100%; margin: 5px;" chunkbar></canvas>
|
|
|
|
|
<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>
|
|
|
|
|
<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>
|
|
|
|
|
<li class="label">Num of Pieces: <span class="download-numPieces">{{download.numPieces}}</span></li>
|
|
|
|
|
<li class="label">Piece Length: <span class="download-pieceLength">{{download.pieceLength | blength}}</span></li>
|
|
|
|
|
<li class="label">ETA: <span class="download-eta">{{getEta(download) | time}}</span></li>
|
|
|
|
|
<li class="label">Down Speed: <span class="download-downloadSpeed">{{download.downloadSpeed | bspeed}}</span></li>
|
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
|
<li class="label">Connections: <span class="download-connections">{{download.connections}}</span></li>
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
<h4 class="hidden-phone">Download Files</h4>
|
|
|
|
|
<ul class="download-files hidden-phone">
|
|
|
|
|
<li class="label" ng-repeat="file in download.files">{{file.path | prelative:download.dir}} ({{file.length | blength}})</li>
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
<div ng-show="hasStatus(download, 'active')">
|
|
|
|
|
<div class="download-graph" dspeed="download.downloadSpeed" uspeed="download.uploadSpeed" dgraph draw="!download.collapsed"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
<!-- }}} -->
|
|
|
|
|
|
|
|
|
|
<!-- }}} -->
|
|
|
|
|
|
|
|
|
|
<!-- {{{ download pagination -->
|
|
|
|
|
<div class="pagination pagination-right" ng-show="totalDownloads > pageSize">
|
|
|
|
|
<ul>
|
|
|
|
|
<li
|
|
|
|
|
ng-class="{disabled: currentPage == 1}"
|
|
|
|
|
ng-click="setPage(1)">
|
|
|
|
|
<a href="#">«</a>
|
|
|
|
|
</li>
|
|
|
|
|
<li
|
|
|
|
|
ng-repeat="page in getPages()"
|
|
|
|
|
ng-class="{active: currentPage == page}"
|
|
|
|
|
ng-click="setPage(page)">
|
|
|
|
|
<a href="#">{{page}}</a>
|
|
|
|
|
</li>
|
|
|
|
|
<li
|
|
|
|
|
ng-class="{disabled: currentPage == totalPages}"
|
|
|
|
|
ng-click="setPage(totalPages)">
|
|
|
|
|
<a href="#">»</a>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- }}} -->
|
|
|
|
|
|
2013-03-20 08:45:28 +01:00
|
|
|
<!-- {{{ global statistics -->
|
2013-03-24 09:57:56 +01:00
|
|
|
<h3 ng-show="totalAria2Downloads()">Global Statistics</h3>
|
2013-03-19 21:57:52 +01:00
|
|
|
|
|
|
|
|
<div class="download-graph"
|
|
|
|
|
dspeed="gstats.downloadSpeed"
|
|
|
|
|
uspeed="gstats.uploadSpeed"
|
2013-03-24 09:57:56 +01:00
|
|
|
dgraph ng-show="totalAria2Downloads()">
|
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
|
|
|
</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-15 20:37:04 +01:00
|
|
|
<div class="modal hide modal-adduris modal-large" modal="getUris.shown">
|
2013-03-19 21:57:52 +01:00
|
|
|
<div class="modal-header">
|
|
|
|
|
<button class="close" ng-click="getUris.close()">x</button>
|
|
|
|
|
<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-15 20:37:04 +01:00
|
|
|
<textarea rows="6" ng-model="getUris.uris"></textarea>
|
2013-03-19 21:57:52 +01:00
|
|
|
</fieldset>
|
|
|
|
|
</form>
|
|
|
|
|
<div class="modal-footer">
|
|
|
|
|
<button class="btn" ng-click="getUris.close()">Cancel</button>
|
|
|
|
|
<button class="btn btn-primary" ng-click="getUris.success()">Start</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- }}} -->
|
|
|
|
|
|
|
|
|
|
<!-- {{{ add torrent modal -->
|
|
|
|
|
<div class="modal hide" modal="getTorrents.shown">
|
|
|
|
|
<div class="modal-header">
|
|
|
|
|
<button class="close" ng-click="getTorrents.close()">x</button>
|
|
|
|
|
<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/>
|
2013-03-19 21:57:52 +01:00
|
|
|
</fieldset>
|
|
|
|
|
</form>
|
|
|
|
|
<div class="modal-footer">
|
|
|
|
|
<button class="btn" ng-click="getTorrents.close()">Cancel</button>
|
|
|
|
|
<button class="btn btn-primary" ng-click="getTorrents.success()">Start</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div
|
|
|
|
|
<!-- }}} -->
|
|
|
|
|
|
|
|
|
|
<!-- {{{ add metalink modal -->
|
|
|
|
|
<div class="modal hide" modal="getMetalinks.shown">
|
|
|
|
|
<div class="modal-header">
|
|
|
|
|
<button class="close" ng-click="getMetalinks.close()">x</button>
|
|
|
|
|
<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/>
|
2013-03-19 21:57:52 +01:00
|
|
|
</fieldset>
|
|
|
|
|
</form>
|
|
|
|
|
<div class="modal-footer">
|
|
|
|
|
<button class="btn" ng-click="getMetalinks.close()">Cancel</button>
|
|
|
|
|
<button class="btn btn-primary" ng-click="getMetalinks.success()">Start</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div
|
|
|
|
|
<!-- }}} -->
|
|
|
|
|
|
|
|
|
|
<!-- {{{ settings modal -->
|
2014-02-15 20:37:04 +01:00
|
|
|
<div class="modal hide modal-large" modal="settings.shown">
|
2013-03-19 21:57:52 +01:00
|
|
|
<div class="modal-header">
|
|
|
|
|
<button class="close" ng-click="settings.close()">x</button>
|
|
|
|
|
<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"/>
|
2013-06-23 22:01:15 +02:00
|
|
|
<label class="checkbox">
|
|
|
|
|
<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">
|
|
|
|
|
<button class="btn" ng-click="settings.close()">Cancel</button>
|
|
|
|
|
<button class="btn btn-success" ng-click="settings.success()">Save</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div
|
|
|
|
|
<!-- }}} -->
|
|
|
|
|
|
|
|
|
|
<!--{{{ connection modal -->
|
2014-02-15 20:37:04 +01:00
|
|
|
<div class="modal hide modal-large" modal="connection.shown">
|
2013-03-19 21:57:52 +01:00
|
|
|
<div class="modal-header">
|
|
|
|
|
<button class="close" ng-click="connection.close()">x</button>
|
|
|
|
|
<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">
|
|
|
|
|
<input type="checkbox"
|
|
|
|
|
ng-model="connection.conf.encrypt">
|
|
|
|
|
Enable encryption connection to aria2
|
|
|
|
|
</input>
|
|
|
|
|
<p class="help-block">Enable SSL/TLS encryption.</p>
|
|
|
|
|
</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">
|
|
|
|
|
<button href="#" class="btn" ng-click="connection.close()">Cancel</button>
|
|
|
|
|
<button href="#"
|
|
|
|
|
class="btn btn-primary" ng-click="connection.success()">
|
|
|
|
|
Save Connection configuration
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- }}} -->
|
|
|
|
|
|
|
|
|
|
|
2014-02-17 01:13:25 +01:00
|
|
|
<!-- {{{ server info modal -->
|
|
|
|
|
<div class="modal hide" modal="server_info.shown">
|
|
|
|
|
<div class="modal-header">
|
|
|
|
|
<button class="close" ng-click="server_info.close()">x</button>
|
|
|
|
|
<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">
|
|
|
|
|
<button class="btn" ng-click="server_info.close()">Close</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div
|
|
|
|
|
<!-- }}} -->
|
|
|
|
|
|
|
|
|
|
<!-- {{{ about modal -->
|
|
|
|
|
<div class="modal hide" modal="about.shown">
|
|
|
|
|
<div class="modal-header">
|
|
|
|
|
<button class="close" ng-click="about.close()">x</button>
|
|
|
|
|
<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">
|
|
|
|
|
<button class="btn" ng-click="about.close()">Close</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div
|
|
|
|
|
<!-- }}} -->
|
|
|
|
|
|
|
|
|
|
|
2013-03-19 21:57:52 +01:00
|
|
|
</div>
|
|
|
|
|
<!-- }}} -->
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
