shadowsocks-manager/plugins/webgui/public/views/admin/topFlow.html

A shadowsocks manager tool for multi user and traffic control.

<div ng-if="topUsers">
    <md-card>
        <md-list>
            <md-divider></md-divider>
            <md-list-item>
                <div flex layout="row" layout-align="space-between center">
                    <div flex="70" flex-xs="60" flex layout="row">
                        <div style="color: #aaa; width: 40px;">∑</div>
                        <span>合计</span>
                    </div>
                    <div flex="30" flex-xs="40" style="text-align: right; color: #aaa; font-size: 0.8em;">
                        <span>{{ allFlow | flow }}</span>
                    </div>
                </div>
                <md-divider></md-divider>
            </md-list-item>
            <md-list-item ng-repeat="user in topUsers track by $index" ng-click="toUser(user)">
                <div flex layout="row" layout-align="space-between center">
                    <div flex="70" flex-xs="60" flex layout="row">
                        <div style="color: #aaa; width: 40px;">{{ $index + 1 }}.</div>
                        <span>{{ user.email }}</span>
                    </div>
                    <div flex="30" flex-xs="40" style="text-align: right; color: #aaa; font-size: 0.8em;">
                        <span>{{ user.sumFlow | flow }}</span>
                    </div>
                </div>
                <md-divider></md-divider>
            </md-list-item>
        </md-list>
    </md-card>
</div>
<div layout-fill layout="row" layout-align="center center" ng-if="!topUsers">
    <div flex style="height: 180px;"></div>
    <div flex layout="row" layout-align="center center">
        <md-progress-circular md-mode="indeterminate" class="md-accent"></md-progress-circular>
    </div>
    <div flex style="height: 180px;"></div>
</div>