webui-aria2/index.html
Nils Maier 4ab27fb503 Pimp the speed graphs
- Upgrade jquery-flot.
- Disable actual local time.
- Use colors more in line with the current theme.
- Scale the y-axis (bytes) ticks.
2014-02-28 13:05:24 +01:00

819 lines
28 KiB
HTML
Executable File
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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/bootstrap-responsive.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-2.1.0.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>
<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="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/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>
<script src="js/ctrls/props.js"></script>
</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">&nbsp;</i> By URIs
</a>
</li>
<li ng-show="isFeatureEnabled('BitTorrent')">
<a href="#" ng-click="addTorrents()">
<i class="icon-file">&nbsp;</i> By Torrents
</a>
</li>
<li ng-show="isFeatureEnabled('Metalink')">
<a href="#" ng-click="addMetalinks()">
<i class="icon-file">&nbsp;</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">&nbsp;</i> Pause All</a>
</li>
<li>
<a
href="#"
ng-click="unpauseAll()"><i class="icon-play">&nbsp;</i> Resume Paused</a>
</li>
<li>
<a
href="#"
ng-click="purgeDownloadResult()"><i class="icon-remove">&nbsp;</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">&nbsp;</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">&nbsp;</i> Connection Settings</a>
</li>
<li>
<a
ng-click="changeGSettings()"
href="#"><i class="icon-wrench">&nbsp;</i> Global Settings</a>
</li>
<li>
<a
ng-click="showServerInfo()"
href="#"><i class="icon-info-sign">&nbsp;</i> Server info</a>
</li>
<li>
<a
ng-click="showAbout()"
href="#"><i class="icon-question-sign">&nbsp;</i> About and contribute</a>
</li>
</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">&nbsp;</i> Global Statistics</a>
</li>
<li>
<a href="#"><i class="icon-info-sign">&nbsp;</i> About</a>
</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<!-- }}} -->
<!-- {{{ body -->
<div role="main" class="container" ng-controller="DownloadCtrl">
<!-- {{{ alerts -->
<div ng-controller="AlertCtrl" class="row alerts">
<div class="alert alert-{{alert.type}}" ng-repeat="alert in pendingAlerts">
<span ng-bind-html="alert.msg"></span>
<button type="button" class="close" ng-click="removeAlert($index)">x</button>
</div>
</div>
<!-- }}} -->
<!-- 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>
<!--}}} -->
<!-- {{{ 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>
<!-- {{{ global statistics -->
<h3 ng-show="totalAria2Downloads()">Global Statistics</h3>
<div ng-class="{'large-graph': large_graph}" class="download-graph"
dspeed="gstats.downloadSpeed"
uspeed="gstats.uploadSpeed"
dgraph ng-show="totalAria2Downloads()"
draw="true"
ng-click="large_graph = !large_graph">
</div>
<!-- }}} -->
<!-- {{{ download template -->
<h3 ng-show="totalAria2Downloads()">Download List</h3>
<form class="row" ng-show="(totalAria2Downloads() > pageSize) || downloadFilter.length">
<fieldset>
<div class="span4">
<label for="downloadFilter">Search</label>
<input id="downloadFilter" type="text" ng-model="downloadFilter" class="input-large"/>
<br>
<b>Found: {{totalDownloads}} / {{totalAria2Downloads()}} </b>
</div>
</fieldset>
</form>
<table
ng-repeat="download in getDownloads()"
class="row download" data-gid="{{download.gid}}">
<tbody>
<tr>
<td class="download-name download-item" ng-click="download.collapsed = !download.collapsed">
{{getName(download)}}
</td>
<td class="download-controls download-item" 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
ng-show="hasStatus(download, ['paused', 'waiting'])"
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">&nbsp;</i> Settings</a>
</li>
<li ng-show="download.bittorrent && false">
<a href="#"><i class="icon-list-alt">&nbsp;</i> Peers</a>
</li>
<li>
<a ng-click="download.collapsed = !download.collapsed"
href="#"><i class="icon-info-sign">&nbsp;</i> More Info</a>
</li>
<li class="visible-phone">
<a ng-click="remove(download)"
href="#"><i class="icon-remove">&nbsp;</i> Remove</a>
</li>
</ul>
</div>
<!-- }}} -->
</td>
</tr>
<tr>
<td class="download-overview download-item" ng-click="download.collapsed = !download.collapsed">
<!-- {{{ statistics -->
<ul class="stats pull-left" ng-show="hasStatus(download, 'active')">
<!-- {{{ active download statistics -->
<li class="label label-active hidden-phone hidden-tablet">
<span title="Download status"><i class="icon-play">&nbsp;</i> {{download.status}}</span>
</li>
<li class="label" ng-class="{'label-active': download.downloadSpeed > 2048, 'label-warning': download.downloadSpeed <= 2048}">
<span title="Download Speed"><i class="icon-download">&nbsp;</i> {{download.downloadSpeed | bspeed}}</span>
</li>
<li ng-show="download.bittorrent" class="label hidden-phone" ng-class="{'label-active': download.uploadSpeed > 2048}">
<span title="Upload Speed"><i class="icon-upload">&nbsp;</i> {{download.uploadSpeed | bspeed}}</span>
</li>
<li class="label label-active">
<span title="Estimated time"><i class="icon-time">&nbsp;</i> {{getEta(download) | time}}</span>
</li>
<li class="label label-active hidden-phone">
<span title="Download Size"><i class="icon-cloud-download">&nbsp;</i> {{download.totalLength | blength}}</span>
</li>
<li class="label label-active hidden-phone">
<span title="Downloaded"><i class="icon-download-alt">&nbsp;</i> {{download.completedLength | blength}}</span>
</li>
<li class="label label-active hidden-phone hidden-tablet">
<span title="Progress"><i class="icon-chevron-right">&nbsp;</i> {{getProgress(download)}}%</span>
</li>
<!-- }}} -->
</ul>
<ul class="stats pull-left" ng-show="hasStatus(download, 'paused')">
<!-- {{{ paused download statistics -->
<li class="label label-info">
<span title="Download Status"><i class="icon-pause">&nbsp;</i> {{download.status}}</span>
</li>
<li class="label label-info">
<span title="Download Size"><i class="icon-cloud-download">&nbsp;</i> {{download.totalLength | blength}}</span>
</li>
<li class="label label-info hidden-phone">
<span title="Downloaded"><i class="icon-download-alt">&nbsp;</i> {{download.completedLength | blength}}</span>
</li>
<li class="label label-info hidden-phone">
<span title="Download Path"><i class="icon-folder-open">&nbsp;</i> {{download.dir}}</span>
</li>
<!-- }}} -->
</ul>
<ul class="stats pull-left" ng-show="hasStatus(download, 'waiting')">
<!-- {{{ paused download statistics -->
<li class="label">
<span title="Download Status"><i class="icon-caret-right">&nbsp;</i> {{download.status}}</span>
</li>
<li class="label">
<span title="Download Size"><i class="icon-cloud-download">&nbsp;</i> {{download.fmtTotalLength}}</span>
</li>
<li class="label hidden-phone">
<span title="Downloaded"><i class="icon-download-alt">&nbsp;</i> {{download.fmtCompletedLength}}</span>
</li>
<li class="label hidden-phone">
<span title="Download Path"><i class="icon-folder-open">&nbsp;</i> {{download.dir}}</span>
</li>
<!-- }}} -->
</ul>
<ul class="stats pull-left" ng-show="hasStatus(download, 'complete')">
<!-- {{{ complete download statistics -->
<li class="label label-success">
<span title="Download Status"><i class="icon-check">&nbsp;</i> {{download.status}}</span>
</li>
<li class="label label-success hidden-phone">
<span title="Download Path"><i class="icon-folder-open">&nbsp;</i> {{download.dir}}</span>
</li>
<li class="label label-success">
<span title="Download Size"><i class="icon-cloud-download">&nbsp;</i> {{download.totalLength | blength}}</span>
</li>
<!-- }}} -->
</ul>
<ul class="stats pull-left" ng-show="hasStatus(download, 'removed')">
<!-- {{{ removed download statistics -->
<li class="label label-warning">
<span title="Download Status"><i class="icon-remove">&nbsp;</i> {{download.status}}</span>
</li>
<li ng-show="hasStatus(download, 'removed')"
class="label label-warning hidden-phone">
<span title="Download Path"><i class="icon-folder-open">&nbsp;</i> {{download.dir}}</span>
</li>
<li ng-show="hasStatus(download, 'removed')"
class="label label-warning">
<span title="Download Size"><i class="icon-cloud-download">&nbsp;</i> {{download.totalLength | blength}}</span>
</li>
<!-- }}} -->
</ul>
<ul class="stats pull-left" ng-show="hasStatus(download, 'error')">
<!-- {{{ error download statistics -->
<li class="label label-important">
<span title="Download Status"><i class="icon-remove-sign">&nbsp;</i> {{download.status}}</span>
</li>
<li class="label label-important hidden-phone">
<span title="Download Path"><i class="icon-folder-open">&nbsp;</i> {{download.dir}}</span>
</li>
<li class="label label-important">
<span title="Download Size"><i class="icon-cloud-download">&nbsp;</i> {{download.totalLength | blength}}</span>
</li>
<!-- }}} -->
</ul>
<!-- }}} -->
</td>
</tr>
<tr>
<td class="download-progress download-item" colspan="2" ng-click="download.collapsed = !download.collapsed">
<div class="progress progress-striped" ng-class="getProgressClass(download)">
<div class="bar" style="width: {{getProgress(download)}}%;"></div>
</div>
</td>
</tr>
<tr>
<td colspan="2" ng-click="download.collapsed = !download.collapsed">
<div collapse="download.collapsed">
<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" title="Download Path"><i class="icon-folder-open">&nbsp;</i> <span class="download-dir">{{download.dir}}</span></li>
<li class="label" title="Estimated Time"><i class="icon-time">&nbsp;</i> <span class="download-eta">{{getEta(download) | time}}</span></li>
<li class="label" title="Download Size"><i class="icon-cloud-download">&nbsp;</i> <span class="download-totalLength">{{download.totalLength | blength}}</span></li>
<li class="label" title="Downloaded"><i class="icon-download-alt">&nbsp;</i> <span class="download-completedLength">{{download.completedLength | blength}}</span></li>
<li class="label" title="Download Speed"><i class="icon-download">&nbsp;</i> <span class="download-downloadSpeed">{{download.downloadSpeed | bspeed}}</span></li>
<li class="label" title="Upload Speed" ng-show="download.bittorrent"><i class="icon-upload">&nbsp;</i> <span class="download-uploadSpeed">{{download.uploadSpeed | bspeed}}</span></li>
<li class="label" title="Uploaded" ng-show="download.bittorrent"><i class="icon-upload-alt">&nbsp;</i> <span class="download-uploadLength">{{download.uploadLength | blength}}</span></li>
<li class="label" title="Connections"><i class="icon-link">&nbsp;</i> <span class="download-connections">{{download.connections}}</span></li>
<li class="label" title="Download GID"><i class="icon-reorder">&nbsp;</i> <span class="download-gid">{{download.gid}}</span></li>
<li class="label" title="Number of Pieces"># of <i class="icon-puzzle-piece">&nbsp;</i> <span class="download-numPieces">{{download.numPieces}}</span></li>
<li class="label" title="Piece Length"><i class="icon-puzzle-piece"></i> Length&nbsp; <span class="download-pieceLength">{{download.pieceLength | blength}}</span></li>
</ul>
<ul class="download-files hidden-phone download-item">
<li class="label" ng-repeat="file in download.files">{{file.relpath}} ({{file.length | blength}})</li>
</ul>
<div ng-show="hasStatus(download, 'active')" class="download-item">
<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="#">&laquo;</a>
</li>
<li
ng-class="{disabled: currentPage == 1}"
ng-click="advancePage(-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="advancePage(1)">
<a href="#"></a>
</li>
<li
ng-class="{disabled: currentPage == totalPages}"
ng-click="setPage(totalPages)">
<a href="#">&raquo;</a>
</li>
</ul>
</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()">x</button>
<h3>Add Downloads By URIs</h3>
</div>
<form class="modal-body">
<fieldset>
<legend>Download URIs</legend>
<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.
- Aria2 will use multiple uris (or mirrors) to boost
the download speed for that file (download). <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
</pre>
</p>
<textarea rows="6" style="width: 100%" ng-model="getUris.uris"></textarea>
</fieldset>
</form>
<div class="modal-footer">
<button class="btn btn-warning" ng-click="$dismiss()">Cancel</button>
<button class="btn btn-success" 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>
<h3>Add Downloads By Torrents</h3>
</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>
<input type="file" class="input-xlarge" fselect="getTorrents.files" multiple/>
</fieldset>
</form>
<div class="modal-footer">
<button class="btn btn-warning" ng-click="$dismiss()">Cancel</button>
<button class="btn btn-success" 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>
<h3>Add Downloads By Metalinks</h3>
</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>
<input type="file" class="input-xlarge" fselect="getMetalinks.files" multiple/>
</fieldset>
</form>
<div class="modal-footer">
<button class="btn btn-warning" ng-click="$dismiss()">Cancel</button>
<button class="btn btn-success" ng-click="$close()">Start</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>
<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"/>
<label class="checkbox">
<input type="checkbox" ng-model="set.starred"/> Quick Access (shown on the main page)
</label>
<p class="help-block">{{set.desc}}</p>
</div>
<br><br>
</div>
</div>
</fieldset>
</form>
<div class="modal-footer">
<button class="btn btn-warning" ng-click="$dismiss()">Cancel</button>
<button class="btn btn-success" ng-click="$close()">Save</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>
<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 btn-warning" ng-click="$dismiss()">Cancel</button>
<button href="#" class="btn btn-success" 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>
<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="$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>
<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="$dismiss()">Close</button>
</div>
</script>
<!-- }}} -->
</div>
<!-- }}} -->
<!-- Bottom Padding -->
<br /><br /><br /><br /><br />
</body>
</html>