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

A shadowsocks manager tool for multi user and traffic control.

<div layout="row" layout-wrap ng-show="account">
    <div flex>
        <md-card>
            <md-card-header>
                <md-card-header-text>
                    <span class="md-title">{{ account.port || '...' }} <span ng-if="account.orderName" style="color: #666; font-size: 0.8em;">{{account.orderName}}</span><span ng-if="account.active === 0" style="color: #a33; font-size: 0.8em;">未激活</span></span>
                    <span class="md-subhead hover-mouse" ng-click="toUserPage(account.userId)">{{ account.user || account.password || '...' }}</span>
                </md-card-header-text>
            </md-card-header>
        </md-card>
    </div>
</div>
<div layout="row" ng-if="defaultTab >= 0">
    <div flex="100">
        <md-card>
            <md-card-content>
                <md-tabs md-selected="defaultTab" md-border-bottom md-dynamic-height>
                    <md-tab ng-repeat="server in servers track by server.id"
                            label="{{server.name}}"
                            md-on-select="getServerPortData(server, accountId)"
                            ng-disabled="account.server && account.server.indexOf(server.id) < 0">
                    </md-tab>
                </md-tabs>
                <div layout="row" layout-align="center center" layout-wrap ng-if="servers.length">
                    <div flex-lg="10"></div>
                    <div flex="70" flex-md="80" flex-sm="100" flex-xs="100">
                        <md-list>
                            <md-list-item>
                                <div flex layout="row" layout-align="space-between center">
                                    <div flex="40" translate>地址：</div><div flex="60" style="text-align:right">{{ server.host }}</div>
                                </div>
                            </md-list-item>
                            <md-divider></md-divider>
                            <md-list-item ng-show="isSS(server)">
                                <div flex layout="row" layout-align="space-between center">
                                    <div flex="40" translate>端口：</div><div flex="60" style="text-align:right">{{ account.port + server.shift }}</div>
                                </div>
                            </md-list-item>
                            <md-list-item ng-show="isWG(server)">
                                <div flex layout="row" layout-align="space-between center">
                                    <div flex="40" translate>端口：</div><div flex="60" style="text-align:right">{{ server.wgPort }}</div>
                                </div>
                            </md-list-item>
                            <md-list-item ng-show="isTJ(server)">
                                <div flex layout="row" layout-align="space-between center">
                                    <div flex="40" translate>端口：</div><div flex="60" style="text-align:right">{{ server.tjPort }}</div>
                                </div>
                            </md-list-item>
                            <md-divider></md-divider>
                            <md-list-item ng-show="isSS(server)">
                                <div flex layout="row" layout-align="space-between center">
                                    <div flex="40" translate>密码：</div><div flex="60" style="text-align:right">{{ account.password }}</div>
                                </div>
                            </md-list-item>
                            <md-divider ng-show="isSS(server)"></md-divider>
                            <md-list-item ng-show="isTJ(server)">
                                <div flex layout="row" layout-align="space-between center">
                                    <div flex="40" translate>密码：</div><div flex="60" style="text-align:right">{{ account.port + ':' + account.password }}</div>
                                </div>
                            </md-list-item>
                            <md-divider ng-show="isTJ(server)"></md-divider>
                            <md-list-item ng-show="isTJ(server)">
                                <div flex layout="row" layout-align="space-between center">
                                    <div flex="40" translate>加密方式：</div><div flex="60" style="text-align:right">Trojan</div>
                                </div>
                            </md-list-item>
                            <md-divider ng-show="isTJ(server)"></md-divider>
                            <md-list-item ng-show="isSS(server)">
                                <div flex layout="row" layout-align="space-between center">
                                    <div flex="40" translate>加密方式：</div><div flex="60" style="text-align:right">{{ server.method }}</div>
                                </div>
                            </md-list-item>
                            <md-divider ng-show="isSS(server)"></md-divider>
                            <md-list-item ng-show="isWG(server)">
                                <div flex layout="row" layout-align="space-between center">
                                    <div flex="40" translate>公钥：</div><div flex="60" style="text-align:right; overflow: hidden; text-overflow: ellipsis; color: #666; font-size: 0.8em; font-family: 'Courier New', Consolas, monospace;">{{ account.publicKey }}</div>
                                </div>
                            </md-list-item>
                            <md-divider ng-show="isWG(server)"></md-divider>
                            <md-list-item ng-show="isWG(server)">
                                <div flex layout="row" layout-align="space-between center">
                                    <div flex="40" translate>私钥：</div><div flex="60" style="text-align:right; overflow: hidden; text-overflow: ellipsis; color: #666; font-size: 0.8em; font-family: 'Courier New', Consolas, monospace;">{{ account.privateKey }}</div>
                                </div>
                            </md-list-item>
                            <md-divider ng-show="isWG(server)"></md-divider>
                            <md-list-item>
                                <div flex layout="row" layout-align="space-between center">
                                    <div flex="40" translate>流量：</div>
                                    <div flex="60" style="text-align:right">
                                        <!-- <span ng-if="account.type === 1" translate><span style="color: #333">{{ serverPortFlow | flow }}</span> / 不限量</span> -->
                                        <span ng-if="account.type >= 1 && account.type <= 5"><span ng-style="server.isFlowOutOfLimit ? {color: '#a33'} : {color: '#333'}">{{ serverPortFlow | flow }}</span> / <span ng-show="account.data.flow > 0">{{ account.data.flow + account.data.flowPack | flow}}</span><span ng-show="!account.data || account.data.flow <= 0">∞</span></span>
                                    </div>
                                </div>
                            </md-list-item>
                            <md-divider></md-divider>
                            <md-list-item>
                                <div flex layout="row" layout-align="space-between center">
                                    <div flex="40" translate>流量倍率：</div><div flex="60" style="text-align:right">{{ server.scale }}</div>
                                </div>
                            </md-list-item>
                            <md-divider></md-divider>
                            <md-list-item ng-style="cycleStyle(account)">
                                <div flex layout="row" layout-align="space-between center">
                                    <div flex="40" translate>周期：</div>
                                    <div flex="60" style="text-align:right">
                                        <span ng-if="account.type === 1" translate>无</span>
                                        <span ng-if="account.type >=2 && account.type <= 5">
                                            <span style="font-size: 0.9em;">{{account.data.from | date : 'yyyy-MM-dd HH:mm'}}</span><br><span style="font-size: 0.9em;">{{account.data.to | date : 'yyyy-MM-dd HH:mm'}}</span>
                                        </span>
                                    </div>
                                </div>
                            </md-list-item>
                            <md-divider></md-divider>
                            <md-list-item>
                                <div flex layout="row" layout-align="space-between center" ng-click="expireTimeSheet((account.type === 1 || account.active === 0) ? 0 : account.data.expire)">
                                    <div flex="40" translate>到期时间：</div>
                                    <div flex="60" style="text-align:right">
                                        <span ng-if="account.type === 1" translate>不限时</span>
                                        <span ng-if="account.active === 0" translate>未激活</span>
                                        <span ng-if="account.type >=2 && account.type <= 5 && account.active !== 0">
                                            <span ng-if="account.active !== 0" style="font-size: 0.9em;">{{account.data.expire | date : 'yyyy-MM-dd HH:mm'}}</span><br><span style="font-size: 0.9em;" ng-style="fontColor(account)">{{ account.data.expire | timeago | translateTime }}</span>
                                        </span>
                                    </div>
                                </div>
                            </md-list-item>
                            <md-divider></md-divider>
                            <md-list-item>
                                <div flex layout="row" layout-align="space-between center" ng-click="clientIp(server.id, account.id)">
                                  <div flex="40" translate>最近连接：</div><div flex="60" style="text-align:right">
                                      <span ng-if="lastConnect" style="font-size: 0.9em;">{{lastConnect | date : 'yyyy-MM-dd HH:mm'}}<span><br><span ng-if="lastConnect" style="font-size: 0.9em;">{{ lastConnect | timeago | translateTime }}</span>
                                  </div>
                                </div>
                            </md-list-item>
                            <md-divider></md-divider>
                            <md-list-item>
                                <div flex layout="row" layout-align="space-between center">
                                    <div flex="40" translate>备注：</div><div flex="60" style="text-align:right">{{ server.comment }}</div>
                                </div>
                            </md-list-item>
                            <md-divider></md-divider>
                        </md-list>
                    </div>
                    <div flex-lg="10"></div>
                </div>
                <div layout="row" layout-align="center center" layout-wrap ng-if="servers.length">
                    <div flex-lg="10"></div>
                    <div flex="70" flex-md="80" flex-sm="100" flex-xs="100">
                        <md-button class="md-primary" ng-click="subscribe(account.id)" ng-if="config.subscribe">{{ '订阅链接' | translate }}</md-button>
                        <md-button ng-show="isSS(server)" class="md-primary" ng-click="showQrcodeDialog(server, account)">{{ '账号二维码' | translate }}</md-button>
                        <md-button ng-show="isWG(server)" class="md-primary" ng-click="showWireGuard(server, account)">{{ '账号二维码' | translate }}</md-button>
                        <md-button ng-show="isTJ(server)" class="md-primary" ng-click="showQrcodeDialog(server, account)">{{ '账号二维码' | translate }}</md-button>
                    </div>
                    <div flex-lg="10"></div>
                </div>
                <div flex="100" layout="row" layout-xs="column" layout-warp layout-align="center center">
                    <div flex flex="100" style="margin: 15px 0px 25px 0px;">
                        <div layout="column" layout-align="center center">
                            <div layout="row" layout-align="center center" style="margin-bottom: 15px;">
                                <md-radio-group ng-model="flowType.value" ng-change="getChartData(server.id)" layout="row" layout-align="center center">
                                    <md-radio-button value="hour">时</md-radio-button>
                                    <md-radio-button value="day" >天</md-radio-button>
                                    <md-radio-button value="week">周</md-radio-button>
                                </md-radio-group>
                            </div>
                            <div>
                                {{ time }}，{{ sumFlow | flow }}, {{ sumFlowForAllServer.flow | flow }}
                            </div>
                            <div>
                                <md-button md-no-ink class="md-primary" ng-click="changeFlowTime(server.id, -1)">prev</md-button>
                                <md-button md-no-ink class="md-primary" ng-click="resetFlowTime(server.id)">now</md-button>
                                <md-button md-no-ink class="md-primary" ng-click="changeFlowTime(server.id, 1)">next</md-button>
                            </div>
                        </div>
                    </div>
                </div>
                <div layout="row" layout-xs="column" layout-sm="column" layout-warp layout-align="center center">
                    <div flex-md="5" flex-gt-md="15"></div>
                    <div width="{{getChartSize().line[0]}}">
                        <div layout="row" layout-align="center center">
                            <div>
                                <canvas
                                    width="{{getChartSize().line[0]}}"
                                    height="{{getChartSize().line[1]}}"
                                    class="chart chart-line"
                                    chart-data="lineChart.data"
                                    chart-labels="lineChart.labels"
                                    chart-series="lineChart.series"
                                    chart-options="lineChart.options"
                                    chart-dataset-override="lineChart.datasetOverride">
                                </canvas>
                            </div>
                        </div>
                    </div>
                    <div width="{{getChartSize().pie[0]}}">
                        <div layout="row" layout-align="center center">
                            <div>
                                <canvas class="chart chart-pie"
                                    width="{{getChartSize().pie[0]}}"
                                    height="{{getChartSize().pie[1]}}"
                                    chart-data="pieChart.data"
                                    chart-labels="pieChart.labels"
                                    chart-options="pieChart.options">
                                </canvas>
                            </div>
                        </div>
                    </div>
                    <div flex-md="5" flex-gt-md="15"></div>
                </div>
            </md-card-content>
        </md-card>
    </div>
</div>
<div layout-fill layout="row" layout-align="center center" ng-if="!account.password">
    <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>