AriaNg/src/views/list.html

<section class="content no-padding">
    <div id="task-table" class="task-table">
        <div class="task-table-title">
            <div class="row">
                <div class="col-md-8 col-sm-7">
                    <div class="row">
                        <div class="col-sm-8">
                            <a ng-click="changeDisplayOrder('name:asc', true)" translate>File Name</a>
                            <i class="fa" ng-class="{'fa-sort-asc fa-order-asc': isSetDisplayOrder('name:asc'), 'fa-sort-desc fa-order-desc': isSetDisplayOrder('name:desc')}"></i>
                        </div>
                        <div class="col-sm-4">
                            <a ng-click="changeDisplayOrder('size:asc', true)" translate>File Size</a>
                            <i class="fa" ng-class="{'fa-sort-asc fa-order-asc': isSetDisplayOrder('size:asc'), 'fa-sort-desc fa-order-desc': isSetDisplayOrder('size:desc')}"></i>
                        </div>
                    </div>
                </div>
                <div class="col-md-2 col-sm-3">
                    <div class="row">
                        <div class="col-sm-6">
                            <a ng-click="changeDisplayOrder('percent:desc', true)" translate>Progress</a>
                            <i class="fa" ng-class="{'fa-sort-asc fa-order-asc': isSetDisplayOrder('percent:asc'), 'fa-sort-desc fa-order-desc': isSetDisplayOrder('percent:desc')}"></i>
                        </div>
                        <div class="col-sm-6">
                            <a ng-click="changeDisplayOrder('remain:asc', true)" translate>Remain Time</a>
                            <i class="fa" ng-class="{'fa-sort-asc fa-order-asc': isSetDisplayOrder('remain:asc'), 'fa-sort-desc fa-order-desc': isSetDisplayOrder('remain:desc')}"></i>
                        </div>
                    </div>
                </div>
                <div class="col-md-2 col-sm-2">
                    <a ng-click="changeDisplayOrder('dspeed:desc', true)" translate>Download Speed</a>
                    <i class="fa" ng-class="{'fa-sort-asc fa-order-asc': isSetDisplayOrder('dspeed:asc'), 'fa-sort-desc fa-order-desc': isSetDisplayOrder('dspeed:desc')}"></i>
                </div>
            </div>
        </div>
        <div class="task-table-body" ng-class="{'draggable': isSupportDragTask()}" dragula="'task-list'" dragula-model="taskContext.list">
            <div class="row" ng-repeat="task in taskContext.list | filter: filterByTaskName | taskOrderBy: getOrderType()" data-gid="{{task.gid}}">
                <div class="col-md-8 col-sm-7 col-xs-12">
                    <div class="checkbox checkbox-primary" ng-class="{'checkbox-hide': !taskContext.selected[task.gid]}">
                        <input id="{{'task_' + task.gid}}" type="checkbox" ng-model="taskContext.selected[task.gid]"/>
                        <label for="{{'task_' + task.gid}}">
                            <span class="task-name auto-ellipsis" ng-bind="task.taskName" title="{{task.taskName}}"></span>
                        </label>
                    </div>
                    <div class="task-files">
                        <span ng-bind="task.totalLength | readableVolume"></span>
                        <a ng-href="#/task/detail/{{task.gid}}" title="{{'Click to view task detail' | translate}}">
                            <span ng-if="task.files" ng-bind="('format.settings.file-count' | translate: {count: task.selectedFileCount})"></span>
                        </a><i class="icon-error fa fa-times" ng-if="task && task.status == 'error' && task.errorDescription" title="{{task.errorDescription | translate}}"></i><i class="icon-seeder fa fa-arrow-up" ng-if="task && task.status == 'active' && task.seeder" title="{{'Seeding' | translate}}"></i>
                        <a class="pointer-cursor" ng-if="task && task.status == 'error' && task.errorDescription && !task.bittorrent" ng-click="restart(task)" title="{{'Restart' | translate}}" translate>Restart</a>
                    </div>
                </div>
                <div class="col-md-2 col-sm-3 col-xs-12">
                    <div class="progress">
                        <div class="progress-bar" role="progressbar"
                             ng-class="{'progress-bar-primary': task.status != 'error', 'progress-bar-warning': task.status == 'error'}"
                             aria-valuenow="{{task.completePercent}}" aria-valuemin="1"
                             aria-valuemax="100" ng-style="{ width: task.completePercent + '%' }">
                            <span ng-class="{'progress-lower': task.completePercent < 50}"
                                ng-bind="(task.completePercent | percent: 2) + '%'"></span>
                        </div>
                    </div>
                    <div>
                        <span class="task-last-time"
                              ng-bind="task.status === 'waiting' ? '--:--:--' : (task.status === 'paused' ? '' : (task.status === 'active' ? ((0 <= task.remainTime && task.remainTime < 86400) ? (task.remainTime | dateDuration: 'second': 'HH:mm:ss') : ('More Than One Day' | translate)) : ''))"></span>
                        <span class="task-download-speed visible-xs-inline pull-right"
                              ng-bind="task.status === 'waiting' ? ('Waiting' | translate) : (task.status === 'paused' ? ('Paused' | translate) : (task.status === 'active' ? (!task.seeder || task.downloadSpeed > 0 ? (task.downloadSpeed | readableVolume) + '/s' : '-') : ''))"></span>
                        <span class="task-seeders pull-right" ng-bind="task.status === 'active' ? ((task.numSeeders ? (task.numSeeders + '/') : '') + task.connections) : ''"></span>
                    </div>
                </div>
                <div class="col-md-2 col-sm-2 hidden-xs">
                    <span class="task-download-speed" ng-bind="task.status === 'waiting' ? ('Waiting' | translate) : (task.status === 'paused' ? ('Paused' | translate) : (task.status === 'active' ? (!task.seeder || task.downloadSpeed > 0 ? (task.downloadSpeed | readableVolume) + '/s' : '-') : ''))"></span>
                </div>
            </div>
        </div>
    </div>
</section>