<!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/flag-icon.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> <!-- translate --> <script src="js/libs/angular-translate.js"></script> <script src="js/translate/nl_NL.js"></script> <script src="js/translate/en_US.js"></script> <script src="js/translate/th_TH.js"></script> <script src="js/translate/zh_CN.js"></script> <script src="js/translate/pl_PL.js"></script> <script src="js/translate/fr_FR.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' | translate }}</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' | translate }}" 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' | translate }} <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' | translate }} </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' | translate }} </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' | translate }} </a> </li> </ul> </li> <li class="dropdown" dropdown> <a class="dropdown-toggle" href="#" dropdown-toggle> {{ 'Manage' | translate }} <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' | translate }}</a> </li> <li> <a href="#" ng-click="unpauseAll()"><span class="fa fa-fw fa-play"> </span> {{ 'Resume Paused' | translate }}</a> </li> <li> <a href="#" ng-click="purgeDownloadResult()"><span class="fa fa-fw fa-times-circle"> </span> {{ 'Purge Completed' | translate }}</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' | translate }} <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' | translate }}</a> </li> <li> <a ng-click="changeGSettings()" href="#"><span class="fa fa-fw fa-wrench"> </span> {{ 'Global Settings' | translate }}</a> </li> <li> <a ng-click="showServerInfo()" href="#"><span class="fa fa-fw fa-info-circle"> </span> {{ 'Server info' | translate }}</a> </li> <li> <a ng-click="showAbout()" href="#"><span class="fa fa-fw fa-question-circle"> </span> {{ 'About and contribute' | translate }}</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' | translate }} <span class="caret"></span></a> <ul class="dropdown-menu"> <li> <a href="#"><span class="fa fa-fw fa-list-alt"> </span> {{ 'Global Statistics' | translate }}</a> </li> <li> <a href="#"><span class="fa fa-fw fa-info-circle"> </span> {{ 'About' | translate }}</a> </li> </ul> </li> </ul> <ul class="nav navbar-nav"> <li class="dropdown" dropdown> <a href="#" class="dropdown-toggle" dropdown-toggle>{{ 'Language' | translate }} <span class="caret"></span></a> <ul class="dropdown-menu"> <li> <a ng-click="changeLanguage('en_US')" href="#"><span class="fa fa-fw flag-icon flag-icon-us"> </span> English</a> </li> <li> <a ng-click="changeLanguage('th_TH')" href="#"><span class="fa fa-fw flag-icon flag-icon-th"> </span> ไทย</a> </li> <li> <a ng-click="changeLanguage('nl_NL')" href="#"><span class="fa fa-fw flag-icon flag-icon-nl"> </span> Nederlands</a> </li> <li> <a ng-click="changeLanguage('zh_CN')" href="#"><span class="fa fa-fw flag-icon flag-icon-cn"> </span> 简体中文</a> </li> <li> <a ng-click="changeLanguage('pl_PL')" href="#"><span class="fa fa-fw flag-icon flag-icon-pl"> </span> Polish</a> </li> <li> <a ng-click="changeLanguage('fr_FR')" href="#"><span class="fa fa-fw flag-icon flag-icon-fr"> </span> Français</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' | translate }}</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' | translate }}</li> <li class="checkbox"> <label for="filter-speed"> <input type="checkbox" ng-model="filterSpeed" ng-change="persistFilters()" id="filter-speed"> {{ 'Running' | translate }} </label> </li> <li class="active checkbox"> <label for="filter-active"> <input type="checkbox" ng-model="filterActive" ng-change="persistFilters()" id="filter-active"> {{ 'Active' | translate }} </label> </li> <li class="checkbox"> <label for="filter-waiting"> <input type="checkbox" ng-model="filterWaiting" ng-change="persistFilters()" id="filter-waiting"> {{ 'Waiting' | translate }} </label> </li> <li class="checkbox"> <label for="filter-complete"> <input type="checkbox" ng-model="filterComplete" ng-change="persistFilters()" id="filter-complete"> {{ 'Complete' | translate }} </label> </li> <li class="checkbox"> <label for="filter-error"> <input type="checkbox" ng-model="filterError" ng-change="persistFilters()" id="filter-error"> {{ 'Error' | translate }} </label> </li> <li class="checkbox"> <label for="filter-paused"> <input type="checkbox" ng-model="filterPaused" ng-change="persistFilters()" id="filter-paused"> {{ 'Paused' | translate }} </label> </li> <li class="checkbox"> <label for="filter-removed"> <input type="checkbox" ng-model="filterRemoved" ng-change="persistFilters()" id="filter-removed"> {{ 'Removed' | translate }} </label> </li> <li class="checkbox"> <label> <input type="checkbox" ng-model="hideLinkedMetadata" id="hide-linked-metadata"> {{ 'Hide linked meta-data' | translate }} </label> </li> <li> <p> {{ 'Displaying' | translate }} <strong>{{totalDownloads}}</strong> {{ 'of' | translate }} <em>{{totalAria2Downloads()}}</em> {{ 'downloads' | translate }} </p> <p> <button ng-click="toggleStateFilters()" class="btn btn-default btn-xs">{{ 'Toggle' | translate }}</button> <button ng-click="resetFilters()" class="btn btn-default btn-xs">{{ 'Reset filters' | translate }}</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' | translate }}</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' | translate }}</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' | translate }} <strong>{{ 'Add' | translate }}</strong> {{ 'download button to start downloading files!' | translate }} </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' | translate }}</a> </li> <li ng-show="download.bittorrent && false"> <a href="#"><span class="fa fa-fw fa-list-alt"> </span> {{ 'Peers' | translate }}</a> </li> <li> <a ng-click="toggleCollapsed(download)" href="#"><span class="fa fa-fw fa-info-circle"> </span> {{ 'More Info' | translate }}</a> </li> <li class="visible-phone"> <a ng-click="remove(download)" href="#"><span class="fa fa-fw fa-times"> </span> {{ 'Remove' | translate }}</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' | translate }}"><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' | translate }}"><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' | translate }}"><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' | translate }}"><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' | translate }}"><span class="fa fa-fw fa-cloud-download"> </span> {{download.fmtTotalLength}}</span> </li> <li class="label label-active hidden-phone"> <span title="{{ 'Downloaded' | translate }}"><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' | translate }}"><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' | translate }}"><span class="fa fa-fw fa-pause"> </span> {{download.status}}</span> </li> <li class="label label-info"> <span title="{{ 'Download Size' | translate }}"><span class="fa fa-fw fa-cloud-download"> </span> {{download.fmtTotalLength}}</span> </li> <li class="label label-info hidden-phone"> <span title="{{ 'Downloaded' | translate }}"><span class="fa fa-fw fa-download"> </span> {{download.fmtCompletedLength}}</span> </li> <li class="label label-info hidden-phone"> <span title="{{ 'Download Path' | translate }}"><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' | translate }}"><span class="fa fa-fw fa-caret-right"> </span> {{download.status}}</span> </li> <li class="label label-default"> <span title="{{ 'Download Size' | translate }}"><span class="fa fa-fw fa-cloud-download"> </span> {{download.fmtTotalLength}}</span> </li> <li class="label label-default hidden-phone"> <span title="{{ 'Downloaded' | translate }}"><span class="fa fa-fw fa-download"> </span> {{download.fmtCompletedLength}}</span> </li> <li class="label label-default hidden-phone"> <span title="{{ 'Download Path' | translate }}"><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' | translate }}"><span class="fa fa-fw fa-check-square-o"> </span> {{download.status}}</span> </li> <li class="label label-success"> <span title="{{ 'Download Size' | translate }}"><span class="fa fa-fw fa-cloud-download"> </span> {{download.fmtTotalLength}}</span> </li> <li class="label label-success hidden-phone"> <span title="{{ 'Download Path' | translate }}"><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' | translate }}"><span class="fa fa-fw fa-times"> </span> {{download.status}}</span> </li> <li class="label label-warning"> <span title="{{ 'Download Size' | translate }}"><span class="fa fa-fw fa-cloud-download"> </span> {{download.fmtTotalLength}}</span> </li> <li class="label label-warning hidden-phone"> <span title="{{ 'Download Path' | translate }}"><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 ' | translate }}"><span class="fa fa-fw fa-times-circle"> </span> {{getErrorStatus(download.errorCode)}}</span> </li> <li class="label label-default"> <span title="{{ 'Download Size' | translate }}"><span class="fa fa-fw fa-cloud-download"> </span> {{download.fmtTotalLength}}</span> </li> <li class="label label-default hidden-phone"> <span title="{{ 'Download Path' | translate }}"><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' | translate }}"><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' | translate }}"><i class="fa fa-fw fa-cloud-download"> </i> <span class="download-totalLength">{{download.fmtTotalLength}}</span></li> <li class="label label-default" title="{{ 'Downloaded' | translate }}"><i class="fa fa-fw fa-download"> </i> <span class="download-completedLength">{{download.fmtCompletedLength}}</span></li> <li class="label label-default" title="{{ 'Download Speed' | translate }}"><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' | translate }}" 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' | translate }}" 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' | translate }}"><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' | translate }}">{{ '# of' | translate }} <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' | translate }}"><i class="fa fa-fw fa-puzzle-piece"></i> {{ 'Length' | translate }} <span class="download-pieceLength">{{download.fmtPieceLength}}</span></li> <li class="label label-default" title="{{ 'Download Path' | translate }}"><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' | translate }}</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.' | translate }}<br /> {{ '- You can also add multiple URIs (mirrors) for the *same* file. To do this, separate the URIs by a space.' | translate }}<br /> {{ '- A URI can be HTTP(S)/FTP/BitTorrent-Magnet.' | translate }}</br> {{ 'E.g. to add 2 files (downloads) f1.jpg and f2.mp4 with 2 URIs (mirrors) each, add URIs as follows' | translate }}:<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' | translate }} </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' | translate }} <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' | translate }}</button> <button class="btn btn-default btn-primary" ng-click="$close()">{{ 'Start' | translate }}</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' | translate }}</h4> </div> <form class="modal-body"> <fieldset> <legend>{{ 'Select Torrents' | translate }}</legend> <p class="help-block"> {{ '- Select the torrent from the local filesystem to start the download.' | translate }}<br /> {{ '- You can select multiple torrents to start multiple downloads.' | translate }}<br /> {{ '- To add a BitTorrent-Magnet URL, use the add URI option and add it there.' | translate }} </p> <div class="form-horizontal form-group"> <label class="control-label" style="text-align: left;"><b>{{ 'Select a Torrent' | translate }}:</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' | translate }} </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' | translate }} <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' | translate }}</button> <button class="btn btn-default btn-primary" ng-click="$close()">{{ 'Start' | translate }}</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' | translate }}</h4> </div> <form class="modal-body"> <fieldset> <legend>{{ 'Select Metalinks' | translate }}</legend> <p class="help-block"> {{ '- Select the Metalink from the local filesystem to start the download.' | translate }}<br /> {{ '- You can select multiple Metalinks to start multiple downloads.' | translate }} </p> <div class="form-horizontal form-group"> <label class="control-label" style="text-align: left;"><b>{{ 'Select a Metalink' | translate }}:</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' | translate }} </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' | translate }} <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' | translate }}</button> <button class="btn btn-default btn-primary" ng-click="$close()">{{ 'Start' | translate }}</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' | translate }}</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' | translate }}</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' | translate }}</button> <button class="btn btn-default btn-primary" ng-click="$close()">{{ 'Choose' | translate }}</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)' | translate }} </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' | translate }}</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' | translate }}</h4> </div> <div class="modal-body"> <form class="form-horizontal"> <fieldset> <legend>{{ 'Aria2 RPC host and port' | translate }}</legend> <div class="form-group"> <label class="col-sm-3 control-label">{{ 'Enter the host' | translate }}:</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)' | translate }} </p> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">{{ 'Enter the port' | translate }}:</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)' | translate }} </p> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">{{ 'Enter the RPC path' | translate }}:</label> <div class="col-sm-9 controls"> <div class="input-group"> <span class="input-group-addon">http(s)://{{connection.conf.host + ':' + connection.conf.port}}</span> <input type="text" class="form-control input-xlarge" ng-model="connection.conf.path"/> </div> <p class="help-block"> {{ 'Enter the path for the Aria2 RPC endpoint (default: /jsonrpc)' | translate }} </p> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">{{ 'SSL/TLS encryption' | translate }}:</label> <div class="col-sm-9 controls"> <div class="checkbox"> <label> <input type="checkbox" ng-model="connection.conf.encrypt"/> {{ 'Enable SSL/TLS encryption' | translate }} </label> </div> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">{{ 'Enter the secret token (optional)' | translate }}:</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)' | translate }} </p> </label> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">{{ 'Enter the username (optional)' | translate }}:</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)' | translate }} </p> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">{{ 'Enter the password (optional)' | translate }}:</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)' | translate }} </p> </div> </div> </fieldset> <fieldset> <legend>{{ 'Direct Download' | translate }}</legend> <div class="form-group"> <label class="col-sm-3 control-label">{{ 'Enter base URL (optional)' | translate }}:</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.' | translate }}<br /> (( '(Requires an appropriate webserver to be configured.)' | translate }} </p> </div> </div> </fieldset> </form> </div> <div class="modal-footer"> <button href="#" class="btn btn-default" ng-click="$dismiss()">{{ 'Cancel' | translate }}</button> <button href="#" class="btn btn-default btn-primary" ng-click="$close()"> {{ 'Save Connection configuration' | translate }} </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' | translate }}</h4> </div> <div class="modal-body"> <b>{{ 'Aria2 Version' | translate }} {{miscellaneous.version}}</b> <br /><br /> <b>{{ 'Features Enabled' | translate }}</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' | translate }}</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' | translate }}</h4> </div> <div class="modal-body"> <p> {{ 'To download the latest version of the project, add issues or to contribute back, head on to' | translate }}:<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' | translate }}:<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' | translate }}</button> </div> </script> <!-- }}} --> </div> <!-- }}} --> <!-- Bottom Padding --> <br /><br /><br /><br /><br /> </body> </html>