AriaNg/src/views/task-detail.html

<section class="content no-padding">
    <div class="nav-tabs-custom">
        <ul class="nav nav-tabs">
            <li ng-class="{'active': context.currentTab == 'overview'}">
                <a class="pointer-cursor" ng-click="changeTab('overview')" translate>Overview</a>
            </li>
            <li ng-class="{'active': context.currentTab == 'blocks'}">
                <a class="pointer-cursor" ng-click="changeTab('blocks')" translate>Blocks</a>
            </li>
            <li ng-class="{'active': context.currentTab == 'filelist'}">
                <a class="pointer-cursor" ng-click="changeTab('filelist')" translate>Files</a>
            </li>
            <li ng-class="{'active': context.currentTab == 'btpeers'}" ng-if="task && task.status == 'active' && task.bittorrent">
                <a class="pointer-cursor" ng-click="changeTab('btpeers')" translate>Peers</a>
            </li>
            <li ng-class="{'active': context.currentTab == 'settings'}" ng-if="task && (task.status == 'active' || task.status == 'waiting' || task.status == 'paused')" class="slim">
                <a class="pointer-cursor" ng-click="changeTab('settings')">
                    <i class="fa fa-gear"></i>
                </a>
            </li>
        </ul>

        <div class="tab-content no-padding">
            <div class="tab-pane" ng-class="{'active': context.currentTab == 'overview'}">
                <div class="settings-table striped hoverable">
                    <div class="row">
                        <div class="setting-key col-sm-4">
                            <span translate>Task Name</span>
                        </div>
                        <div class="setting-value col-sm-8">
                            <span ng-bind="task.taskName"></span>
                        </div>
                    </div>
                    <div class="row" ng-if="task">
                        <div class="setting-key col-sm-4">
                            <span translate>Task Size</span>
                        </div>
                        <div class="setting-value col-sm-8">
                            <span ng-bind="task.totalLength | readableVolumn"></span>
                            <span ng-if="task.files" ng-bind="('format.settings.file-count' | translate: {count: task.selectedFileCount})"></span>
                        </div>
                    </div>
                    <div class="row" ng-if="task">
                        <div class="setting-key col-sm-4">
                            <span translate>Task Status</span>
                        </div>
                        <div class="setting-value col-sm-8">
                            <span ng-bind="task | taskStatus | translate: {errorcode: task.errorCode}"></span>
                        </div>
                    </div>
                    <div class="row" ng-if="task && task.status == 'error' && task.errorMessage">
                        <div class="setting-key col-sm-4">
                            <span translate>Error Description</span>
                        </div>
                        <div class="setting-value col-sm-8">
                            <span ng-bind="task.errorMessage"></span>
                        </div>
                    </div>
                    <div class="row" ng-if="task">
                        <div class="setting-key col-sm-4">
                            <span ng-bind="('Progress' | translate) + (task.status == 'active' && task.bittorrent ? ' (' + ('Health Percentage' | translate) + ')' : '')"></span>
                        </div>
                        <div class="setting-value col-sm-8">
                            <span ng-bind="(task.completePercent | percent: 2) + '%' + (task.status == 'active' && task.bittorrent ? ' (' + (context.healthPercent | percent: 2) + '%' + ')' : '')"></span>
                        </div>
                    </div>
                    <div class="row" ng-if="task">
                        <div class="setting-key col-sm-4">
                            <span translate>Download</span>
                        </div>
                        <div class="setting-value col-sm-8">
                            <span ng-bind="(task.completedLength | readableVolumn) + (task.status == 'active' ? ' @ ' + (task.downloadSpeed | readableVolumn) + '/s' : '')"></span>
                        </div>
                    </div>
                    <div class="row" ng-if="task && task.bittorrent">
                        <div class="setting-key col-sm-4">
                            <span translate>Upload</span>
                        </div>
                        <div class="setting-value col-sm-8">
                            <span ng-bind="(task.uploadLength | readableVolumn) + (task.status == 'active' ? ' @ ' + (task.uploadSpeed | readableVolumn) + '/s' : '')"></span>
                        </div>
                    </div>
                    <div class="row" ng-if="task && task.bittorrent">
                        <div class="setting-key col-sm-4">
                            <span translate>Share Ratio</span>
                        </div>
                        <div class="setting-value col-sm-8">
                            <span ng-bind="(task.shareRatio | number: 2)"></span>
                        </div>
                    </div>
                    <div class="row" ng-if="task && task.status == 'active' && task.completedLength < task.totalLength">
                        <div class="setting-key col-sm-4">
                            <span translate>Remain Time</span>
                        </div>
                        <div class="setting-value col-sm-8">
                            <span ng-bind="0 <= task.remainTime && task.remainTime < 86400? (task.remainTime | dateDuration: 'second': 'HH:mm:ss') : ('More Than One Day' | translate)"></span>
                        </div>
                    </div>
                    <div class="row" ng-if="task && task.status == 'active'">
                        <div class="setting-key col-sm-4">
                            <span ng-bind="(task.bittorrent ? ('Seeders' | translate) + ' / ' : '') + ('Connections' | translate)">Connections</span>
                        </div>
                        <div class="setting-value col-sm-8">
                            <span ng-bind="(task.numSeeders ? (task.numSeeders + ' / ') : '') + task.connections"></span>
                        </div>
                    </div>
                    <div class="row" ng-if="task && task.bittorrent && task.bittorrent.creationDate">
                        <div class="setting-key col-sm-4">
                            <span translate>Seed Creation Time</span>
                        </div>
                        <div class="setting-value col-sm-8">
                            <span ng-bind="task.bittorrent.creationDate | amFromUnix | longDate"></span>
                        </div>
                    </div>
                    <div class="row" ng-if="task && task.infoHash">
                        <div class="setting-key col-sm-4">
                            <span translate>Info Hash</span>
                        </div>
                        <div class="setting-value col-sm-8">
                            <span ng-bind="task.infoHash"></span>
                        </div>
                    </div>
                    <div class="row" ng-if="task">
                        <div class="setting-key col-sm-4">
                            <span translate>Download Dir</span>
                        </div>
                        <div class="setting-value col-sm-8">
                            <span ng-bind="task.dir"></span>
                        </div>
                    </div>
                    <div class="row" ng-if="task && task.bittorrent && task.bittorrent.announceList && task.bittorrent.announceList.length > 0">
                        <div class="setting-key col-sm-4">
                            <span translate>BT Tracker Servers</span>
                            <span class="description-inline" ng-bind="'format.settings.total-count' | translate: {count: task.bittorrent.announceList.length}"></span>
                            <i class="icon-expand pointer-cursor fa" ng-if="task.bittorrent.announceList.length > 1"
                               ng-class="{'fa-plus': context.collapseTrackers, 'fa-minus': !context.collapseTrackers}"
                               ng-click="context.collapseTrackers = !context.collapseTrackers"
                               ng-tooltip="{{(context.collapseTrackers ? 'Expand' : 'Collapse') | translate}}"></i>
                        </div>
                        <div class="setting-value col-sm-8">
                            <div ng-bind="serverAddress" ng-repeat="serverAddress in task.bittorrent.announceList | limitTo: (context.collapseTrackers ? 1 : task.bittorrent.announceList.length)"></div>
                        </div>
                    </div>
                    <div class="row no-hover no-background" ng-if="task && task.status == 'active'">
                        <div class="col-sm-12">
                            <div class="task-status-chart-wrapper">
                                <ng-chart ng-data="context.statusData" height="200"></ng-chart>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane" ng-class="{'active': context.currentTab == 'blocks'}">
                <div class="piece-legends">
                    <div class="piece-legend">
                        <div class="piece piece-completed"></div><span translate>Completed</span>
                    </div>
                    <div class="piece-legend">
                        <div class="piece"></div><span translate>Uncompleted</span>
                    </div>
                </div>
                <ng-piece-map bit-field="task.bitfield" piece-count="task.numPieces"></ng-piece-map>
            </div>
            <div class="tab-pane" ng-class="{'active': context.currentTab == 'filelist'}">
                <div class="task-table">
                    <div class="task-table-title">
                        <div class="row">
                            <div class="col-sm-8">
                                <a ng-click="changeFileListDisplayOrder('name:asc', true)" translate>File Name</a>
                                <i class="fa" ng-class="{'fa-sort-asc fa-order-asc': isSetFileListDisplayOrder('name:asc'), 'fa-sort-desc fa-order-desc': isSetFileListDisplayOrder('name:desc')}"></i>
                                <a ng-click="showChooseFilesToolbar()" ng-if="task && task.files && task.files.length > 1 && (task.status == 'waiting' || task.status == 'paused')" translate>(Choose Files)</a>
                            </div>
                            <div class="col-sm-2">
                                <a ng-click="changeFileListDisplayOrder('percent:desc', true)" translate>Progress</a>
                                <i class="fa" ng-class="{'fa-sort-asc fa-order-asc': isSetFileListDisplayOrder('percent:asc'), 'fa-sort-desc fa-order-desc': isSetFileListDisplayOrder('percent:desc')}"></i>
                            </div>
                            <div class="col-sm-2">
                                <a ng-click="changeFileListDisplayOrder('size:asc', true)" translate>File Size</a>
                                <i class="fa" ng-class="{'fa-sort-asc fa-order-asc': isSetFileListDisplayOrder('size:asc'), 'fa-sort-desc fa-order-desc': isSetFileListDisplayOrder('size:desc')}"></i>
                            </div>
                        </div>
                    </div>
                    <div class="task-table-title" ng-if="context.showChooseFilesToolbar">
                        <div class="row">
                            <div class="col-sm-12">
                                <button class="btn btn-xs btn-primary" ng-click="selectFiles('all')" translate>Select All</button>
                                <button class="btn btn-xs btn-primary" ng-click="selectFiles('none')" translate>Select None</button>
                                <button class="btn btn-xs btn-primary" ng-click="selectFiles('reverse')" translate>Select Invert</button>
                                <button class="btn btn-xs btn-default" ng-click="chooseSpecifiedFiles('video')">
                                    <i class="fa fa-file-video-o"></i>
                                    <span translate>Videos</span>
                                </button>
                                <button class="btn btn-xs btn-default" ng-click="chooseSpecifiedFiles('audio')">
                                    <i class="fa fa-file-audio-o"></i>
                                    <span translate>Audios</span>
                                </button>
                                <button class="btn btn-xs btn-default" ng-click="chooseSpecifiedFiles('picture')">
                                    <i class="fa fa-file-picture-o"></i>
                                    <span translate>Pictures</span>
                                </button>
                                <button class="btn btn-xs btn-default" ng-click="chooseSpecifiedFiles('document')">
                                    <i class="fa fa-file-text-o"></i>
                                    <span translate>Documents</span>
                                </button>
                                <button class="btn btn-xs btn-default" ng-click="chooseSpecifiedFiles('application')">
                                    <i class="fa fa-file-o"></i>
                                    <span translate>Applications</span>
                                </button>
                                <button class="btn btn-xs btn-default" ng-click="chooseSpecifiedFiles('archive')">
                                    <i class="fa fa-file-archive-o"></i>
                                    <span translate>Archives</span>
                                </button>
                                <button class="btn btn-xs btn-success" ng-click="saveChoosedFiles()" ng-disabled="getSelectedFileCount() < 1" translate>Confirm</button>
                                <button class="btn btn-xs btn-default" ng-click="cancelChooseFiles()" translate>Cancel</button>
                            </div>
                        </div>
                    </div>
                    <div class="task-table-body">
                        <div class="row" ng-repeat="file in task.files | fileOrderBy: getFileListOrderType()" data-file-index="{{file.index}}">
                            <div class="col-sm-8">
                                <div class="checkbox checkbox-primary">
                                    <input id="{{'file_' + file.index}}" type="checkbox" ng-disabled="!task || !task.files || task.files.length < 2 || (task.status != 'waiting' && task.status != 'paused')"
                                           ng-model="file.selected" ng-change="setSelectedFile()"/>
                                    <label for="{{'file_' + file.index}}" ng-bind="file.fileName" ng-tooltip="{{file.fileName}}" ng-tooltip-container="body"></label>
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <div class="progress">
                                    <div class="progress-bar progress-bar-primary" role="progressbar"
                                         aria-valuenow="{{file.completePercent}}" aria-valuemin="1"
                                         aria-valuemax="100" ng-style="{ width: file.completePercent + '%' }">
                                        <span ng-class="{'progress-lower': file.completePercent < 50}"
                                              ng-bind="(file.completePercent | percent: 2) + '%'"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <span class="task-size" ng-bind="file.length | readableVolumn"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane" ng-class="{'active': context.currentTab == 'btpeers'}" ng-if="task && task.status == 'active' && task.bittorrent">
                <div class="task-table">
                    <div class="task-table-title">
                        <div class="row">
                            <div class="col-md-4 col-sm-4">
                                <a ng-click="changePeerListDisplayOrder('address:asc', true)" translate>Address</a>
                                <i class="fa" ng-class="{'fa-sort-asc fa-order-asc': isSetPeerListDisplayOrder('address:asc'), 'fa-sort-desc fa-order-desc': isSetPeerListDisplayOrder('address:desc')}"></i>
                                <span>/</span>
                                <a ng-click="changePeerListDisplayOrder('client:asc', true)" translate>Client</a>
                                <i class="fa" ng-class="{'fa-sort-asc fa-order-asc': isSetPeerListDisplayOrder('client:asc'), 'fa-sort-desc fa-order-desc': isSetPeerListDisplayOrder('client:desc')}"></i>
                            </div>
                            <div class="col-md-5 col-sm-4">
                                <div class="row">
                                    <div class="col-sm-6">
                                        <span translate>Status</span>
                                    </div>
                                    <div class="col-sm-6 text-right">
                                        <a ng-click="changePeerListDisplayOrder('percent:desc', true)" translate>Progress</a>
                                        <i class="fa" ng-class="{'fa-sort-asc fa-order-asc': isSetPeerListDisplayOrder('percent:asc'), 'fa-sort-desc fa-order-desc': isSetPeerListDisplayOrder('percent:desc')}"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-4">
                                <a ng-click="changePeerListDisplayOrder('dspeed:desc', true)" translate>Download</a>
                                <i class="fa" ng-class="{'fa-sort-asc fa-order-asc': isSetPeerListDisplayOrder('dspeed:asc'), 'fa-sort-desc fa-order-desc': isSetPeerListDisplayOrder('dspeed:desc')}"></i>
                                <span>/</span>
                                <a ng-click="changePeerListDisplayOrder('uspeed:desc', true)" translate>Upload</a>
                                <i class="fa" ng-class="{'fa-sort-asc fa-order-asc': isSetPeerListDisplayOrder('uspeed:asc'), 'fa-sort-desc fa-order-desc': isSetPeerListDisplayOrder('uspeed:desc')}"></i>
                                <span translate>Speed</span>
                            </div>
                        </div>
                    </div>
                    <div class="task-table-body">
                        <div class="row" ng-repeat="peer in context.btPeers | peerOrderBy: getPeerListOrderType()">
                            <div class="col-md-4 col-sm-4 col-xs-12">
                                <div class="peer-name-wrapper" ng-tooltip-if="{{!!peer.client}}" ng-tooltip-container="body"
                                     ng-tooltip="{{(peer.client ? (peer.client.name + (peer.client.version ? ' ' + peer.client.version : '')) : ('Unknown Client' | translate)) + (peer.seeder ? ', ' + ('Seeding' | translate) : '')}}">
                                    <span ng-bind="peer.name | translate"></span><i class="icon-seeder fa fa-angle-double-up" ng-if="peer && peer.seeder"></i>
                                    <span class="peer-client" ng-if="!!peer.client"
                                        ng-bind="peer.client ? ('(' + peer.client.name + (peer.client.version ? ' ' + peer.client.version : '') + ')') : ''"></span>
                                </div>
                            </div>
                            <div class="col-md-5 col-sm-4 col-xs-12">
                                <div class="row">
                                    <div class="col-md-9 col-sm-7 col-xs-12">
                                        <div class="piece-bar-wrapper">
                                            <ng-piece-bar bit-field="peer.bitfield" piece-count="task.numPieces" color="#208fe5"></ng-piece-bar>
                                        </div>
                                    </div>
                                    <div class="col-md-3 col-sm-5 hidden-xs text-right">
                                        <span ng-bind="(peer.completePercent | percent: 2) + '%'"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="visible-xs col-xs-4">
                                <span ng-bind="(peer.completePercent | percent: 2) + '%'"></span>
                            </div>
                            <div class="col-md-3 col-sm-4 col-xs-8">
                                <div class="task-peer-download-speed">
                                    <i class="icon-download fa fa-arrow-down"></i>
                                    <span ng-bind="(peer.downloadSpeed | readableVolumn) + '/s'"></span>&nbsp;
                                    <i class="icon-upload fa fa-arrow-up"></i>
                                    <span ng-bind="(peer.uploadSpeed | readableVolumn) + '/s'"></span>
                                </div>
                            </div>
                        </div>
                        <div class="row" ng-if="!context.btPeers || context.btPeers.length < 1">
                            <div class="col-sm-12 text-center">
                                <span translate>No connected peers</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane" ng-class="{'active': context.currentTab == 'settings'}" ng-if="task && (task.status == 'active' || task.status == 'waiting' || task.status == 'paused')">
                <div class="settings-table striped hoverable">
                    <ng-setting ng-repeat="option in context.availableOptions" option="option"
                                ng-model="context.options[option.key]" default-value="option.defaultValue"
                                on-change-value="setOption(key, value, optionStatus)"></ng-setting>
                </div>
            </div>
        </div>
    </div><!-- /.nav-tabs-custom -->
</section>