<!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 ng-bind="$root.pageTitle">Aria2 WebUI</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/download.css">
<link rel="stylesheet" href="css/modals.css">
<!-- external javascript dependencies -->
<script src="js/libs/jquery-2.1.3.js"></script>
<script src="js/libs/lodash.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>
<script src="js/libs/jquery.flot.time.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="configuration.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/url.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/errors.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/main.js"></script>
<script src="js/ctrls/modal.js"></script>
<script src="js/ctrls/nav.js"></script>
<script src="js/ctrls/alert.js"></script>
<script src="js/ctrls/props.js"></script>
</head>
<!-- }}} -->
<body ng-controller="MainCtrl">
<!-- {{{ header -->
<div class="navbar navbar-inverse navbar-static-top" ng-controller="NavCtrl">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" ng-click="collapsed = !collapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand"><span class="fa fa-fw fa-arrow-circle-down"></span> {{ name }}</a>
</div>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input class="form-control" type="text" placeholder="Search" ng-model="downloadFilter" autocomplete="off" ng-change="onDownloadFilter()" />
</div>
</form>
<!-- {{{ Nav menu -->
<div class="collapse navbar-collapse" collapse="collapsed">
<ul class="nav navbar-nav">
<li class="dropdown" dropdown>
<a class="dropdown-toggle" href="#" dropdown-toggle>
Add <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
<a href="#" ng-click="addUris()">
<span class="fa fa-fw fa-arrow-circle-o-down"> </span> By URIs
</a>
</li>
<li ng-show="isFeatureEnabled('BitTorrent') && enable.torrent">
<a href="#" ng-click="addTorrents()">
<span class="fa fa-fw fa-cloud-download"> </span> By Torrents
</a>
</li>
<li ng-show="isFeatureEnabled('Metalink') && enable.metalink">
<a href="#" ng-click="addMetalinks()">
<span class="fa fa-fw fa-file-text-o"> </span> By Metalinks
</a>
</li>
</ul>
</li>
<li class="dropdown" dropdown>
<a class="dropdown-toggle" href="#" dropdown-toggle> Manage <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<a
href="#"
ng-click="forcePauseAll()"><span class="fa fa-fw fa-pause"> </span> Pause All</a>
</li>
<li>
<a
href="#"
ng-click="unpauseAll()"><span class="fa fa-fw fa-play"> </span> Resume Paused</a>
</li>
<li>
<a
href="#"
ng-click="purgeDownloadResult()"><span class="fa fa-fw fa-times-circle"> </span> Purge Completed</a>
</li>
<!-- not adding remove all as requires many rpc syscalls to finish
<li>
<a
href="#"
ng-click="removeAll()"><span class="fa fa-fw fa-fire"> </span> Remove All</a>
</li>
-->
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="dropdown" dropdown>
<a
href="#"
class="dropdown-toggle" dropdown-toggle>Settings <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<a
ng-click="changeCSettings()"
href="#"><span class="fa fa-fw fa-wrench"> </span> Connection Settings</a>
</li>
<li>
<a
ng-click="changeGSettings()"
href="#"><span class="fa fa-fw fa-wrench"> </span> Global Settings</a>
</li>
<li>
<a
ng-click="showServerInfo()"
href="#"><span class="fa fa-fw fa-info-circle"> </span> Server info</a>
</li>
<li>
<a
ng-click="showAbout()"
href="#"><span class="fa fa-fw fa-question-circle"> </span> About and contribute</a>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav pull-right" ng-show="false">
<li class="dropdown" dropdown>
<a
class="dropdown-toggle" dropdown-toggle
href="#">Miscellaneous <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<a href="#"><span class="fa fa-fw fa-list-alt"> </span> Global Statistics</a>
</li>
<li>
<a href="#"><span class="fa fa-fw fa-info-circle"> </span> About</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- }}} -->
</div><!--/.nav-collapse -->
</div>
</div>
<!-- }}} -->
<!-- {{{ body -->
<div role="main" class="container-fluid">
<!-- {{{ alerts -->
<div ng-controller="AlertCtrl" class="row-fluid alerts">
<div class="alert alert-{{alert.type == 'error' ? 'danger' : alert.type}}" ng-repeat="alert in pendingAlerts">
<button type="button" class="close" ng-click="removeAlert($index)">x</button>
<span ng-bind-html="alert.msg"></span>
</div>
</div>
<!-- }}} -->
<div class="row-fluid">
<div ng-class="{'col-md-3': enable.sidebar.show}" ng-show="enable.sidebar.show">
<!-- {{{ nav side bar -->
<div class="well sidebar-nav">
<!-- {{{ 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="1"
dspeed="gstats.downloadSpeed"
uspeed="gstats.uploadSpeed"
dgraph ng-show="totalAria2Downloads()"
nolabel="true"
draw="true">
</div>
</li>
</ul>
<!-- }}} -->
<br>
<!-- {{{ download filters -->
<ul id="filters" class="clearfix nav nav-list" ng-show="enable.sidebar.filters">
<li class="nav-header">Download Filters</li>
<li class="checkbox">
<label for="filter-speed">
<input type="checkbox" ng-model="filterSpeed" ng-change="persistFilters()" id="filter-speed">
Running
</label>
</li>
<li class="active checkbox">
<label for="filter-active">
<input type="checkbox" ng-model="filterActive" ng-change="persistFilters()" id="filter-active">
Active
</label>
</li>
<li class="checkbox">
<label for="filter-waiting">
<input type="checkbox" ng-model="filterWaiting" ng-change="persistFilters()" id="filter-waiting">
Waiting
</label>
</li>
<li class="checkbox">
<label for="filter-complete">
<input type="checkbox" ng-model="filterComplete" ng-change="persistFilters()" id="filter-complete">
Complete
</label>
</li>
<li class="checkbox">
<label for="filter-error">
<input type="checkbox" ng-model="filterError" ng-change="persistFilters()" id="filter-error">
Error
</label>
</li>
<li class="checkbox">
<label for="filter-paused">
<input type="checkbox" ng-model="filterPaused" ng-change="persistFilters()" id="filter-paused">
Paused
</label>
</li>
<li class="checkbox">
<label for="filter-removed">
<input type="checkbox" ng-model="filterRemoved" ng-change="persistFilters()" id="filter-removed">
Removed
</label>
</li>
<li class="checkbox">
<label>
<input type="checkbox" ng-model="hideLinkedMetadata" id="hide-linked-metadata">
Hide linked meta-data
</label>
</li>
<li>
<p>
Displaying <strong>{{totalDownloads}}</strong> of <em>{{totalAria2Downloads()}}</em> downloads
</p>
<p>
<button ng-click="toggleStateFilters()" class="btn btn-default btn-xs">Toggle</button>
<button ng-click="resetFilters()" class="btn btn-default btn-xs">Reset filters</button>
</p>
</li>
</ul>
<!-- }}} -->
<br>
<!-- {{{ starred properties -->
<ul class="clearfix nav nav-list" ng-controller="StarredPropsCtrl" ng-show="properties.length && enable.sidebar.starredProps">
<li class="nav-header">Quick Access Settings</li>
<li ng-repeat="prop in properties" class="form-group">
<label title="{{prop.desc}}" style="width: 100%;">{{prop.name}}</label>
<div class="form-group">
<select style="width: 100%;" ng-show="prop.options.length" class="form-control" 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="form-control input-large" ng-model="prop.val"/>
</div>
</li>
<li>
<button ng-disabled="!enabled()" ng-click="save()" class="btn btn-default btn-sm">Save settings</button>
</li>
</ul>
<!-- }}} -->
</div>
<!-- }}} -->
</div>
<div ng-class="{'col-md-9': enable.sidebar.show, 'col-md-12': !enable.sidebar.show }">
<!-- {{{ downloads -->
<!-- Bug?? <div ng-show="!totalAria2Downloads() && totalAria2Downloads() > getDownloads()" class="hero-unit">-->
<div ng-show="!totalAria2Downloads()" class="jumbotron">
Currently no download in line to display, use the '<strong>Add</strong>' download button to start downloading files!
</div>
<!-- {{{ download template -->
<div
ng-repeat="download in getDownloads()"
class="row-fluid download well" data-gid="{{download.gid}}"
ng-click="toggleCollapsed(download)">
<div class="download-name download-item download-controls">
<!-- {{{ download control buttons -->
<div class="btn-group" role="group" ng-click="$event.stopPropagation()">
<button
ng-if="hasStatus(download, ['active', 'waiting'])"
class="btn btn-default"
ng-click="pause(download)">
<span class="fa fa-fw fa-pause"></span>
</button>
<button
ng-if="hasStatus(download, 'paused')"
class="btn btn-default"
ng-click="resume(download)">
<span class="fa fa-fw fa-play"></span>
</button>
<button
ng-if="canRestart(download)"
class="btn btn-default"
ng-click="restart(download)">
<span class="fa fa-fw fa-repeat"></span>
</button>
<button
class="btn btn-default hidden-phone"
ng-click="remove(download)">
<span class="fa fa-fw fa-stop"></span>
</button>
<button
ng-if="hasStatus(download, 'paused')"
class="btn btn-default"
ng-click="selectFiles(download)">
<span class="fa fa-fw fa-list"></span>
</button>
<button
class="btn btn-default hidden-phone"
ng-if="['waiting', 'active'].indexOf( getType(download) )!= -1"
ng-click="showSettings(download)">
<span class="fa fa-fw fa-cog"></span>
</button>
<div class="btn-group" dropdown>
<button class="btn btn-default dropdown-toggle" dropdown-toggle>
<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right">
<li class="visible-phone">
<a
ng-click="showSettings(download)"
ng-show="['waiting', 'active'].indexOf( getType(download) )!= -1"
href="#"><span class="fa fa-fw fa-cog"> </span> Settings</a>
</li>
<li ng-show="download.bittorrent && false">
<a href="#"><span class="fa fa-fw fa-list-alt"> </span> Peers</a>
</li>
<li>
<a ng-click="toggleCollapsed(download)"
href="#"><span class="fa fa-fw fa-info-circle"> </span> More Info</a>
</li>
<li class="visible-phone">
<a ng-click="remove(download)"
href="#"><span class="fa fa-fw fa-times"> </span> Remove</a>
</li>
</ul>
</div>
</div>
<!-- }}} -->
<div class="title">
<span class="fa fa-fw fa-magnet" style="color: red;" ng-show="download.metadata"></span>
{{download.name}}
</div>
</div>
<div class="download-overview download-item" ng-switch="download.status">
<!-- {{{ statistics -->
<ul class="stats pull-left" ng-switch-when="active">
<!-- {{{ active download statistics -->
<li class="label label-active hidden-phone hidden-tablet">
<span title="Download status"><span class="fa fa-fw fa-play"> </span> {{download.status}}</span>
</li>
<li class="label label-default" ng-class="{'label-active': download.downloadSpeed > 2048, 'label-warning': download.downloadSpeed <= 2048}">
<span title="Download Speed"><span class="fa fa-fw fa-arrow-circle-o-down"> </span> {{download.downloadSpeed | bspeed}}</span>
</li>
<li ng-show="download.bittorrent" class="label label-default hidden-phone" ng-class="{'label-info': download.uploadSpeed > 2048}">
<span title="Upload Speed"><span class="fa fa-fw fa-arrow-circle-o-up"> </span> {{download.uploadSpeed | bspeed}}</span>
</li>
<li class="label label-active">
<span title="Estimated time"><span class="fa fa-fw fa-clock-o"> </span> {{getEta(download) | time}}</span>
</li>
<li class="label label-active hidden-phone">
<span title="Download Size"><span class="fa fa-fw fa-cloud-download"> </span> {{download.fmtTotalLength}}</span>
</li>
<li class="label label-active hidden-phone">
<span title="Downloaded"><span class="fa fa-fw fa-arrow-circle-o-down"> </span> {{download.fmtCompletedLength}}</span>
</li>
<li class="label label-active hidden-phone hidden-tablet">
<span title="Progress"><span class="fa fa-fw fa-chevron-right"> </span> {{getProgress(download)}}%</span>
</li>
<!-- }}} -->
</ul>
<ul class="stats pull-left" ng-switch-when="paused">
<!-- {{{ paused download statistics -->
<li class="label label-info">
<span title="Download Status"><span class="fa fa-fw fa-pause"> </span> {{download.status}}</span>
</li>
<li class="label label-info">
<span title="Download Size"><span class="fa fa-fw fa-cloud-download"> </span> {{download.fmtTotalLength}}</span>
</li>
<li class="label label-info hidden-phone">
<span title="Downloaded"><span class="fa fa-fw fa-download"> </span> {{download.fmtCompletedLength}}</span>
</li>
<li class="label label-info hidden-phone">
<span title="Download Path"><span class="fa fa-fw fa-folder-open"> </span> {{download.dir}}</span>
</li>
<!-- }}} -->
</ul>
<ul class="stats pull-left" ng-switch-when="waiting">
<!-- {{{ paused download statistics -->
<li class="label label-default">
<span title="Download Status"><span class="fa fa-fw fa-caret-right"> </span> {{download.status}}</span>
</li>
<li class="label label-default">
<span title="Download Size"><span class="fa fa-fw fa-cloud-download"> </span> {{download.fmtTotalLength}}</span>
</li>
<li class="label label-default hidden-phone">
<span title="Downloaded"><span class="fa fa-fw fa-download"> </span> {{download.fmtCompletedLength}}</span>
</li>
<li class="label label-default hidden-phone">
<span title="Download Path"><span class="fa fa-fw fa-folder-open"> </span> {{download.dir}}</span>
</li>
<!-- }}} -->
</ul>
<ul class="stats pull-left" ng-switch-when="complete">
<!-- {{{ complete download statistics -->
<li class="label label-success">
<span title="Download Status"><span class="fa fa-fw fa-check-square-o"> </span> {{download.status}}</span>
</li>
<li class="label label-success">
<span title="Download Size"><span class="fa fa-fw fa-cloud-download"> </span> {{download.fmtTotalLength}}</span>
</li>
<li class="label label-success hidden-phone">
<span title="Download Path"><span class="fa fa-fw fa-folder-open"> </span> {{download.dir}}</span>
</li>
<!-- }}} -->
</ul>
<ul class="stats pull-left" ng-switch-when="removed">
<!-- {{{ removed download statistics -->
<li class="label label-warning">
<span title="Download Status"><span class="fa fa-fw fa-times"> </span> {{download.status}}</span>
</li>
<li class="label label-warning">
<span title="Download Size"><span class="fa fa-fw fa-cloud-download"> </span> {{download.fmtTotalLength}}</span>
</li>
<li class="label label-warning hidden-phone">
<span title="Download Path"><span class="fa fa-fw fa-folder-open"> </span> {{download.dir}}</span>
</li>
<!-- }}} -->
</ul>
<ul class="stats pull-left" ng-switch-when="error">
<!-- {{{ error download statistics -->
<li class="label label-danger">
<span title="Error "><span class="fa fa-fw fa-times-circle"> </span> {{getErrorStatus(download.errorCode)}}</span>
</li>
<li class="label label-default">
<span title="Download Size"><span class="fa fa-fw fa-cloud-download"> </span> {{download.fmtTotalLength}}</span>
</li>
<li class="label label-default hidden-phone">
<span title="Download Path"><span class="fa fa-fw fa-folder-open"> </span> {{download.dir}}</span>
</li>
<!-- }}} -->
</ul>
<!-- }}} -->
</div>
<div class="download-progress download-item">
<div class="progress">
<div ng-class="'progress-bar progress-bar-striped ' + getProgressClass(download)" style="width: {{getProgress(download)}}%;"></div>
</div>
</div>
<div ng-switch="download.collapsed">
<div ng-switch-when="false" collapse="download.animCollapsed">
<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">
<li class="label label-default" title="Estimated Time"><i class="fa fa-fw fa-clock-o"> </i> <span class="download-eta">{{getEta(download) | time}}</span></li>
<li class="label label-default" title="Download Size"><i class="fa fa-fw fa-cloud-download"> </i> <span class="download-totalLength">{{download.fmtTotalLength}}</span></li>
<li class="label label-default" title="Downloaded"><i class="fa fa-fw fa-download"> </i> <span class="download-completedLength">{{download.fmtCompletedLength}}</span></li>
<li class="label label-default" title="Download Speed"><i class="fa fa-fw fa-arrow-circle-o-down"> </i> <span class="download-downloadSpeed">{{download.fmtDownloadSpeed}}</span></li>
<li class="label label-default" 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 label-default" title="Uploaded" ng-show="download.bittorrent"><i class="fa fa-fw fa-upload"> </i> <span class="download-uploadLength">{{download.fmtUploadLength}}</span></li>
<li class="label label-default" title={{download.connectionsTitle}}><i class="fa fa-fw fa-link"> </i> <span class="download-connections">{{download.connections}}{{download.numSeeders}}</span></li>
<li class="label label-default" title="Download GID"><i class="fa fa-fw fa-bars"> </i> <span class="download-gid">{{download.gid}}</span></li>
<li class="label label-default" 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 label-default" title="Piece Length"><i class="fa fa-fw fa-puzzle-piece"></i> Length <span class="download-pieceLength">{{download.fmtPieceLength}}</span></li>
<li class="label label-default" title="Download Path"><i class="fa fa-fw fa-folder-open"> </i> <span class="download-dir">{{download.dir}}</span></li>
</ul>
<ul class="download-files hidden-phone download-item">
<li class="label label-default" ng-repeat="file in download.files" ng-class="{'label-success': file.selected}">
<a ng-if="hasDirectURL()" ng-click="$event.stopPropagation()" ng-href="{{getDirectURL()}}{{file.relpath | encodeURI}}" target="download">{{file.relpath}} ({{file.fmtLength}})</a>
<span ng-if="!hasDirectURL()">{{file.relpath}} ({{file.fmtLength}})</span>
</li>
</ul>
<div ng-show="hasStatus(download, 'active')" class="download-item hidden-phone">
<div class="download-graph" dspeed="download.downloadSpeed" uspeed="download.uploadSpeed" xticks="7" yticks="7" dgraph draw="!download.collapsed"></div>
</div>
</div>
</div>
</div>
<!-- }}} -->
<!-- }}} -->
</div>
<!-- {{{ download pagination -->
<div class="col-md-offset-3 col-md-9" ng-show="totalDownloads > pageSize">
<div class="pagination pull-right">
<pagination
total-items="totalDownloads"
items-per-page="pageSize"
max-size="11"
ng-model="currentPage"
boundary-links="true"
previous-text="‹"
next-text="›"
first-text="«"
last-text="»"
>
</pagination>
</div>
</div>
<!-- }}} -->
</div>
</div>
<!-- }}} -->
<!-- {{{ modals -->
<div ng-controller="ModalCtrl">
<!--{{{ add uri modal -->
<script type="text/ng-template" id="getUris.html">
<div class="modal-header">
<button class="close" ng-click="$dismiss()">×</button>
<h4>Add Downloads By URIs</h4>
</div>
<form class="modal-body">
<fieldset>
<p class="help-block">
- You can add multiple downloads (files)
at the same time by putting uris for each
file on a separate line. <br>
- You can also add multiple uris (mirrors) for the
*same* file. To do this separate the uris
by a space. <br>
- A URI can be HTTP(S)/FTP/BitTorrent Magnet URI. </br>
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 --out=file2.mp4
</pre>
</p>
<textarea rows="4" style="width: 100%" ng-model="getUris.uris"></textarea>
<br /><br />
<div>
<div class="modal-advanced-title">
Download settings
</div>
<div class="form-horizontal modal-advanced-options">
<div class="form-group" ng-repeat="(name, set) in getUris.settings">
<label class="col-sm-3 control-label">{{name}}</label>
<div class="col-sm-9 controls">
<select class="form-control" ng-show="set.options.length" ng-options="opt for opt in set.options" ng-model="set.val">
</select>
<input ng-show="!set.options.length" type="text" class="form-control input-xxlarge modal-form-input-verylarge" ng-model="set.val"/>
</div>
<br>
</div>
</div>
<br />
<div ng-click="getUris.collapsed = !getUris.collapsed" class="modal-advanced-title">
Advanced settings
<i ng-hide="!getUris.collapsed" class="fa fa-fw fa-caret-right"></i>
<i ng-hide="getUris.collapsed" class="fa fa-fw fa-caret-down"></i>
</div>
<div collapse="getUris.collapsed" class="form-horizontal modal-advanced-options">
<div class="form-group" ng-repeat="(name, set) in getUris.fsettings">
<p class="col-sm-offset-3 col-sm-9 help-block controls">{{set.desc}}</p>
<label class="col-sm-3 control-label">{{name}}</label>
<div class="col-sm-9 controls">
<select class="form-control" ng-show="set.options.length" ng-options="opt for opt in set.options" ng-model="set.val">
</select>
<input ng-show="!set.options.length" type="text" class="form-control input-xxlarge modal-form-input-verylarge" ng-model="set.val"/>
</div>
<br />
</div>
</div>
</div>
</fieldset>
</form>
<div class="modal-footer">
<button class="btn btn-default" ng-click="$dismiss()">Cancel</button>
<button class="btn btn-default btn-primary" ng-click="$close()">Start</button>
</div>
</script>
<!-- }}} -->
<!-- {{{ add torrent modal -->
<script type="text/ng-template" id="getTorrents.html">
<div class="modal-header">
<button class="close" ng-click="$dismiss()">x</button>
<h4>Add Downloads By Torrents</h4>
</div>
<form class="modal-body">
<fieldset>
<legend>Select Torrents</legend>
<p class="help-block">
- 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.
</p>
<div class="form-horizontal form-group">
<label class="control-label" style="text-align: left;"><b>Select a Torrent:</b></label>
<div class="controls">
<input type="file" class="input-xlarge" fselect="getTorrents.files" multiple/>
</div>
</div>
<br />
<div>
<div class="modal-advanced-title">
Download settings
</div>
<div class="form-horizontal modal-advanced-options">
<div class="form-group" ng-repeat="(name, set) in getTorrents.settings">
<label class="col-sm-3 control-label">{{name}}</label>
<div class="col-sm-9 controls">
<select class="form-control" ng-show="set.options.length" ng-options="opt for opt in set.options" ng-model="set.val">
</select>
<input ng-show="!set.options.length" type="text" class="form-control input-xxlarge modal-form-input-verylarge" ng-model="set.val"/>
</div>
<br>
</div>
</div>
<br />
<div ng-click="getTorrents.collapsed = !getTorrents.collapsed" class="modal-advanced-title">
Advanced settings
<i ng-hide="!getTorrents.collapsed" class="fa fa-fw fa-caret-right"></i>
<i ng-hide="getTorrents.collapsed" class="fa fa-fw fa-caret-down"></i>
</div>
<div collapse="getTorrents.collapsed" class="form-horizontal modal-advanced-options">
<div class="form-group" ng-repeat="(name, set) in getTorrents.fsettings">
<p class="col-sm-offset-3 col-sm-9 help-block controls">{{set.desc}}</p>
<label class="col-sm-3 control-label">{{name}}</label>
<div class="col-sm-9 controls">
<select class="form-control" ng-show="set.options.length" ng-options="opt for opt in set.options" ng-model="set.val">
</select>
<input ng-show="!set.options.length" type="text" class="form-control input-xxlarge modal-form-input-verylarge" ng-model="set.val"/>
</div>
<br />
</div>
</div>
</div>
</fieldset>
</form>
<div class="modal-footer">
<button class="btn btn-default" ng-click="$dismiss()">Cancel</button>
<button class="btn btn-default btn-primary" ng-click="$close()">Start</button>
</div>
</script>
<!-- }}} -->
<!-- {{{ add metalink modal -->
<script type="text/ng-template" id="getMetalinks.html">
<div class="modal-header">
<button class="close" ng-click="$dismiss()">x</button>
<h4>Add Downloads By Metalinks</h4>
</div>
<form class="modal-body">
<fieldset>
<legend>Select Metalinks</legend>
<p class="help-block">
- Select the metalink from the local filesystem to start the download. <br>
- You can select multiple metalinks to start multiple downloads
</p>
<div class="form-horizontal form-group">
<label class="control-label" style="text-align: left;"><b>Select a Metalinks:</b></label>
<div class="controls">
<input type="file" class="input-xlarge" fselect="getMetalinks.files" multiple/>
</div>
</div>
<br />
<div>
<div class="modal-advanced-title">
Download settings
</div>
<div class="form-horizontal modal-advanced-options">
<div class="form-group" ng-repeat="(name, set) in getMetalinks.settings">
<label class="col-sm-3 control-label">{{name}}</label>
<div class="col-sm-9 controls">
<select class="form-control" ng-show="set.options.length" ng-options="opt for opt in set.options" ng-model="set.val">
</select>
<input ng-show="!set.options.length" type="text" class="form-control input-xxlarge modal-form-input-verylarge" ng-model="set.val"/>
</div>
<br>
</div>
</div>
<br />
<div ng-click="getMetalinks.collapsed = !getMetalinks.collapsed" class="modal-advanced-title">
Advanced settings
<i ng-hide="!getMetalinks.collapsed" class="fa fa-fw fa-caret-right"></i>
<i ng-hide="getMetalinks.collapsed" class="fa fa-fw fa-caret-down"></i>
</div>
<div collapse="getMetalinks.collapsed" class="form-horizontal modal-advanced-options">
<div class="form-group" ng-repeat="(name, set) in getMetalinks.fsettings">
<p class="col-sm-offset-3 col-sm-9 help-block controls">{{set.desc}}</p>
<label class="col-sm-3 control-label">{{name}}</label>
<div class="col-sm-9 controls">
<select class="form-control" ng-show="set.options.length" ng-options="opt for opt in set.options" ng-model="set.val">
</select>
<input ng-show="!set.options.length" type="text" class="form-control input-xxlarge modal-form-input-verylarge" ng-model="set.val"/>
</div>
<br />
</div>
</div>
</div>
</fieldset>
</form>
<div class="modal-footer">
<button class="btn btn-default" ng-click="$dismiss()">Cancel</button>
<button class="btn btn-default btn-primary" ng-click="$close()">Start</button>
</div>
</script>
<!-- }}} -->
<!-- {{{ select file modal -->
<script type="text/ng-template" id="selectFiles.html">
<div class="modal-header">
<button class="close" ng-click="$dismiss()">x</button>
<h4>Choose files to start download for</h4>
</div>
<form class="form-horizontal modal-body">
<fieldset>
<div class="form-group">
<div ng-repeat="file in selectFiles.files">
<label class="control-label">Select to download </label>
<div class="controls">
<label class="checkbox">
<input type="checkbox" ng-model="file.selected"/>{{file.relpath}}
</label>
</div>
<br><br>
</div>
</div>
</fieldset>
</form>
<div class="modal-footer">
<button class="btn btn-default" ng-click="$dismiss()">Cancel</button>
<button class="btn btn-default btn-primary" ng-click="$close()">Choose</button>
</div>
</script>
<!-- }}} -->
<!-- {{{ settings modal -->
<script type="text/ng-template" id="settings.html">
<div class="modal-header">
<button class="close" ng-click="$dismiss()">x</button>
<h4>{{settings.title}}</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<fieldset>
<div class="form-group" ng-repeat="(name, set) in settings.settings">
<label class="col-sm-3 control-label">{{name}}</label>
<div class="col-sm-9 controls">
<select class="form-control" ng-show="set.options.length" ng-options="opt for opt in set.options" ng-model="set.val">
</select>
<input ng-show="!set.options.length" type="text" class="form-control input-xlarge" ng-model="set.val"/>
<div class="checkbox" ng-show="set.starred != undefined">
<label>
<input type="checkbox" ng-model="set.starred"/>
Quick Access (shown on the main page)
</label>
</div>
<p class="help-block">{{set.desc}}</p>
</div>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-default" ng-click="$dismiss()">Cancel</button>
<button class="btn btn-default btn-primary" ng-click="$close()">{{settings.actionText}}</button>
</div>
</script>
<!-- }}} -->
<!--{{{ connection modal -->
<script type="text/ng-template" id="connection.html">
<div class="modal-header">
<button class="close" ng-click="$dismiss()">x</button>
<h4>Connection Settings</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<fieldset>
<legend>Aria2 RPC host and port</legend>
<div class="form-group">
<label class="col-sm-3 control-label">Enter the host:</label>
<div class="col-sm-9 controls">
<div class="input-group">
<span class="input-group-addon">http(s)://</span>
<input type="text" class="form-control 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>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Enter the port:</label>
<div class="col-sm-9 controls">
<input type="text" class="form-control input-xlarge modal-form-input-number"
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>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">SSL/TLS encryption:</label>
<div class="col-sm-9 controls">
<div class="checkbox">
<label>
<input type="checkbox" ng-model="connection.conf.encrypt"/>
Enable SSL/TLS encryption.
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Enter the secret token (optional):</label>
<div class="col-sm-9 controls">
<label>
<input type="text" class="form-control 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>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Enter the username (optional):</label>
<div class="col-sm-9 controls">
<input type="text" class="form-control input-xlarge"
ng-model="connection.conf.auth.user"/>
<p class="help-block">
Enter the aria2 RPC username
(empty if authentication not enabled)
</p>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Enter the password (optional):</label>
<div class="col-sm-9 controls">
<input type="password" class="form-control 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>
<fieldset>
<legend>Direct Download</legend>
<div class="form-group">
<label class="col-sm-3 control-label">Enter base URL (optional):</label>
<div class="col-sm-9 controls">
<input type="text" class="form-control input-xlarge"
ng-model="connection.conf.directURL"/>
<p class="help-block">
If supplied, links will be created to enable direct download from the
aria2 server, requires appropriate webserver to be configured
</p>
</div>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<button href="#" class="btn btn-default" ng-click="$dismiss()">Cancel</button>
<button href="#" class="btn btn-default btn-primary" ng-click="$close()">
Save Connection configuration
</button>
</div>
</script>
<!-- }}} -->
<!-- {{{ server info modal -->
<script type="text/ng-template" id="server_info.html">
<div class="modal-header">
<button class="close" ng-click="$dismiss()">x</button>
<h4>Aria2 server info</h4>
</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 btn-default" ng-click="$dismiss()">Close</button>
</div>
</script>
<!-- }}} -->
<!-- {{{ about modal -->
<script type="text/ng-template" id="about.html">
<div class="modal-header">
<button class="close" ng-click="$dismiss()">x</button>
<h4>About and contribute</h4>
</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 btn-default" ng-click="$dismiss()">Close</button>
</div>
</script>
<!-- }}} -->
</div>
<!-- }}} -->
<!-- Bottom Padding -->
<br /><br /><br /><br /><br />
</body>
</html>