webui-aria2/angular.html

286 lines
13 KiB
HTML
Raw Normal View History

<!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">
2013-01-15 12:19:26 +01:00
<link rel="stylesheet" href="css/style.css">
2013-01-15 12:19:26 +01:00
<link rel="stylesheet" href="css/download.css">
<!-- external javascript dependencies -->
<script src="js/libs/jquery-1.8.3.js"></script>
<script src="js/libs/underscore.js"></script>
<script src="js/libs/bootstrap.js"></script>
<script src="js/libs/angular.js"></script>
<script src="js/libs/jquery.flot.js"></script>
<script src="js/libs/jquery.flot.resize.js"></script>
<!-- webui core -->
<script src="js/app.js"></script>
<script src="js/directives/chunkbar.js"></script>
<script src="js/directives/dgraph.js"></script>
2013-01-22 08:53:30 +01:00
<script src="js/filters/bytes.js"></script>
<script src="js/services/deps.js"></script>
<script src="js/services/base64.js"></script>
<script src="js/services/utils.js"></script>
<script src="js/services/rpc/jsoncall.js"></script>
<script src="js/services/rpc/sockcall.js"></script>
<script src="js/services/rpc/syscall.js"></script>
<script src="js/services/rpc/rpc.js"></script>
<script src="js/ctrls/nav.js"></script>
<script src="js/ctrls/modal.js"></script>
<script src="js/ctrls/download.js"></script>
<script src="js/init.js"></script>
</head>
<!-- }}} -->
<body>
<!-- {{{ header -->
<div class="navbar navbar-inverse navbar-fixed-top" ng-controller="NavCtrl">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar"
data-toggle="collapse"
data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand">{{ name }}</a>
<div class="nav-collapse">
<ul class="nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Add <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
<a href="#"><i class="icon-download"></i> Add Download URL</a>
</li>
<li>
<a href="#"><i class="icon-file"></i> Add Metalink</a>
</li>
<li>
<a href="#"><i class="icon-file"></i> Add Torrent</a>
</li>
</ul>
</li>
<li class="dropdown" id="stop_downloads">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Manage <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#"><i class="icon-pause"></i> Pause All</a></li>
<li><a href="#"><i class="icon-play"></i> Resume Paused</a></li>
<li><a href="#"><i class="icon-remove"></i> Purge Completed</a></li>
<li><a href="#"><i class="icon-fire"></i> Remove All</a></li>
</ul>
</li>
</ul>
<ul class="nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Settings <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">
<i class="icon-wrench"></i> Connection Settings</a>
</li>
<li><a href="#">
<i class="icon-wrench"></i> Global Settings</a></li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
About <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">
<i class="icon-list-alt"></i> Global Statistics</a></li>
<li><a href="#">
<i class="icon-info-sign"></i> About</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<!-- }}} -->
<!-- {{{ downloads -->
<div role="main" class="container" ng-controller="DownloadCtrl">
<!-- {{{ download template -->
<table ng-repeat="download in getDownloads()" class="download" data-gid="{{download.gid}}">
<tbody>
<tr>
<td data-toggle="collapse" data-target="[data-gid={{download.gid}}] .download-detail .collapse" class="download-overview">
<b class="download-name">{{download.name}}</b>
</td>
<td class="download-controls" rowspan="2">
<div class="btn-group">
2013-01-22 08:53:30 +01:00
<button ng-show="download.booleans.can_pause" class="btn download_pause"><i class="icon-pause"></i></button>
<button ng-show="download.booleans.can_play" class="btn download_play"><i class="icon-play"></i></button>
<button ng-show="download.booleans.can_restart" class="btn download_restart"><i class="icon-repeat"></i></button>
2013-01-22 08:53:30 +01:00
<button class="btn download_remove hidden-phone"><i class="icon-stop"></i></button>
<button ng-show="download.booleans.has_settings" class="btn download_settings hidden-phone"><i class="icon-cog"></i></button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<i class="caret"></i>
</button>
<ul class="dropdown-menu">
<li ng-show="download.booleans.has_settings"><a href="#" class="download_settings visible-phone"><i class="icon-cog"></i> Settings</a></li>
<li ng-show="download.booleans.bittorrent"><a href="#" class="torrent_info"><i class="icon-list-alt"></i> Peers</a></li>
<li><a href="#" data-toggle="collapse" data-target="[data-gid={{download.gid}}] .download-detail .collapse"><i class="icon-info-sign"></i> More Info</a></li>
<li class="visible-phone"><a href="#" class="download_remove"><i class="icon-remove"></i> Remove</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td data-toggle="collapse" data-target="[data-gid={{download.gid}}] .download-detail .collapse" class="download-overview">
<ul class="stats pull-left">
<li ng-show="download.booleans.can_pause" class="label label-success hidden-phone hidden-tablet">Status: <span class="download-status">{{download.status}}</span></li>
2013-01-22 08:53:30 +01:00
<li ng-show="download.booleans.can_pause" class="label label-success">ETA: <span class="download-eta">{{download.eta | time}}</span></li>
<li ng-show="download.booleans.can_pause" class="label label-success hidden-phone">Size: <span class="download-totalLength">{{download.totalLength | blength}}</span></li>
<li ng-show="download.booleans.can_pause" class="label label-success hidden-phone">Downloaded: <span class="download-completedLength">{{download.completedLength | blength}}</span></li>
<li ng-show="download.booleans.can_pause" class="label label-success hidden-phone hidden-tablet">Progress: <span class="download-percentage">{{download.percentage}}</span>%</li>
2013-01-22 08:53:30 +01:00
<li ng-show="download.booleans.can_pause" class="label label-success">Speed: <span class="download-downloadSpeed">{{download.downloadSpeed | bspeed}}</span></li>
<!-- TODO: figure out how to do multiple ng-show
2013-01-22 08:53:30 +01:00
<li ng-show="download.booleans.bittorrent" class="label label-success hidden-phone">Upload Speed: <span class="download-uploadSpeed">{{download.uploadSpeed | bspeed}}</span></li>
-->
<li ng-show="download.booleans.can_play" class="label label-info">Status: <span class="download-status">{{download.status}}</span></li>
2013-01-22 08:53:30 +01:00
<li ng-show="download.booleans.can_play" class="label label-info">Size: <span class="download-totalLength">{{download.totalLength | blength}}</span></li>
<li ng-show="download.booleans.can_play" class="label label-info hidden-phone">Downloaded: <span class="download-completedLength">{{download.completedLength | blength}}</span></li>
<li ng-show="download.booleans.can_play" class="label label-info hidden-phone">Path: <span class="download-dir">{{download.dir}}</span></li>
<li ng-show="download.booleans.is_complete" class="label">Status: <span class="download-status">{{download.status}}</span></li>
<li ng-show="download.booleans.is_complete" class="label hidden-phone">Path: <span class="download-dir">{{download.dir}}</span></li>
2013-01-22 08:53:30 +01:00
<li ng-show="download.booleans.is_complete" class="label">Size: <span class="download-totalLength">{{download.totalLength | blength}}</span></li>
<li ng-show="download.booleans.is_removed" class="label label-warning">Status: <span class="download-status">{{download.status}}</span></li>
<li ng-show="download.booleans.is_removed" class="label label-warning hidden-phone">Path: <span class="download-dir">{{download.dir}}</span></li>
2013-01-22 08:53:30 +01:00
<li ng-show="download.booleans.is_removed" class="label label-warning">Size: <span class="download-totalLength">{{download.totalLength | blength}}</span></li>
<li ng-show="download.booleans.is_error" class="label label-important">Status: <span class="download-status">{{download.status}}</span></li>
<li ng-show="download.booleans.is_error" class="label label-important hidden-phone">Path: <span class="download-dir">{{download.dir}}</span></li>
2013-01-22 08:53:30 +01:00
<li ng-show="download.booleans.is_error" class="label label-important">Size: <span class="download-totalLength">{{download.totalLength | blength}}</span></li>
</ul>
</td>
</tr>
<tr>
<td class="download-progress" colspan="2" data-toggle="collapse" data-target="[data-gid={{download.gid}}] .download-detail .collapse">
<div ng-show="download.booleans.can_pause" class="progress progress-striped active" style="width: 100%; margin: 0; padding: 0;">
<div class="bar" style="width: {{download.percentage}}%;"></div>
</div>
<div ng-show="download.booleans.can_play" class="progress progress-info progress-striped" style="width: 100%; margin: 0; padding: 0;">
<div class="bar" style="width: {{download.percentage}}%;"></div>
</div>
<div ng-show="download.booleans.is_error" class="progress progress-danger progress-striped" style="width: 100%; margin: 0; padding: 0;">
<div class="bar" style="width: {{download.percentage}}%;"></div>
</div>
<div ng-show="download.booleans.is_removed" class="progress progress-warning progress-striped" style="width: 100%; margin: 0; padding: 0;">
<div class="bar" style="width: {{download.percentage}}%;"></div>
</div>
<div ng-show="download.booleans.is_complete" class="progress progress-success progress-striped" style="width: 100%; margin: 0; padding: 0;">
<div class="bar" style="width: {{download.percentage}}%;"></div>
</div>
</td>
</tr>
<tr data-toggle="collapse" data-target="[data-gid={{download.gid}}] .download-detail .collapse" class="download-detail">
<td colspan="2">
<div class="collapse more_info">
<canvas bitfield="download.bitfield" 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>
2013-01-22 08:53:30 +01:00
<li class="label">Size: <span class="download-totalLength">{{download.totalLength | blength}}</span></li>
<li class="label">Downloaded: <span class="download-completedLength">{{download.completedLength | blength}}</span></li>
<li class="label">Num of Pieces: <span class="download-numPieces">{{download.numPieces}}</span></li>
2013-01-22 08:53:30 +01:00
<li class="label">Piece Length: <span class="download-pieceLength">{{download.pieceLength | blength}}</span></li>
<li class="label">ETA: <span class="download-eta">{{download.eta | time}}</span></li>
<li class="label">Down Speed: <span class="download-downloadSpeed">{{download.downloadSpeed | bspeed}}</span></li>
2013-01-22 08:53:30 +01:00
<li class="label" ng-show="download.booleans.bittorrent">Upload Speed: <span class="download-uploadSpeed">{{download.uploadSpeed | bspeed}}</span></li>
<li class="label" ng-show="download.booleans.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">
2013-01-22 08:53:30 +01:00
<li class="label" ng-repeat="file in download.files">{{file.path}} ({{file.length | blength}})</li>
</ul>
<div ng-show="download.booleans.can_pause">
2013-01-22 08:53:30 +01:00
<div class="download-graph" dspeed="download.downloadSpeed" uspeed="download.uploadSpeed" dgraph></div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<!-- }}} -->
</div>
<!-- }}} -->
<!-- {{{ modals -->
<div ng-controller="ModalCtrl">
</div>
<!-- }}} -->
</body>
</html>