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

A shadowsocks manager tool for multi user and traffic control.

<div layout="row">
    <div flex layout="row">
        <md-card flex>
            <md-card-header>
                <md-card-header-text ng-show="server">
                    <span class="md-title">{{ server.name }}&nbsp;<span style="color: #999">[{{ portNumber }}]</span></span>
                    <span class="md-subhead">{{server.host.split(':')[0]}}:{{server.port}}</span>
                </md-card-header-text>
                <md-card-header-text ng-hide="server">
                    <span>
                        <div flex layout="row" layout-align="center center">
                            <md-progress-circular md-mode="indeterminate" class="md-accent"></md-progress-circular>
                        </div>
                    </span>
                </md-card-header-text>
            </md-card-header>
            <md-card-content ng-show="server">
                <div 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" ng-change="getChartData()" 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}}
                        </div>
                        <div layout="row" layout-align="center center">
                            <md-button md-no-ink class="md-primary" ng-click="changeFlowTime(-1)">prev</md-button>
                            <md-button md-no-ink class="md-primary" ng-click="resetFlowTime()">now</md-button>
                            <md-button md-no-ink class="md-primary" ng-click="changeFlowTime(1)">next</md-button>
                        </div>
                    </div>
                </div>
                <div layout="row" layout-xs="column" layout-sm="column" layout-warp layout-align="center center" style="overflow: hidden;">
                    <div flex-md="5" flex-gt-md="15"></div>
                    <div width="{{getChartSize().line[0]}}">
                        <div layout="row" layout-align="center center">
                            <div>
                                <canvas class="chart chart-line"
                                    width="{{getChartSize().line[0]}}"
                                    height="{{getChartSize().line[1]}}"
                                    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 style="position: relative;">
                                <div style="position: absolute; bottom: 3px; color: #666;" ng-style="{ 'right': (getChartSize().pie[0] - getChartSize().pie[1])/2 + 'px' }">{{ pieChart.data.length }}</div>
                                <canvas id="pie" 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="row" layout-wrap>
    <div flex-xs="100" flex-sm="50" flex-md="33" flex-gt-md="25" ng-repeat="(key, value) in currentPorts" ng-if="matchPort(value.port, value.password, menuSearch.text)">
        <md-card md-colors="{{ value.exists ? {} : {'background': 'red-50'} }}">
            <md-card-content style="padding-top: 5px; padding-bottom: 5px;">
                <div layout="row" layout-align="space-between center">
                    <div flex="70" ng-click="toAccountPage(value.port)"><span>{{ value.port }}</span><br><span style="text-align:right; color: #aaa; font-size: 0.8em;">{{ value.password }}</span></div>
                    <div flex="30" layout="row" layout-align="space-between center">
                        <div></div>
                        <md-button class="md-icon-button" aria-label="ban" ng-click="banAccount(value.id)">
                            <md-icon class="material-icons" style="color: #bbb">schedule</md-icon>
                        </md-button>
                    </div>
                </div>
            </md-card-content>
        </md-card>
    </div>
</div>
<div style="height: 100px;"></div>