shadowsocks-manager

<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.active === 0" style="color: #a33;">未激活</span></span> <span class="md-subhead" 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-show="servers.length"> <div flex="100"> <md-card> <md-card-content> <md-tabs md-selected="0" 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="60" flex-lg="50" 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> <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-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">{{ account.password }}</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.method }}</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"> <span ng-if="account.type === 1" translate>不限量</span> <span ng-if="account.type >=2 && account.type <= 5"><span ng-style="server.isFlowOutOfLimit ? {color: '#a33'} : {color: '#333'}">{{ serverPortFlow | flow }}</span> / {{ account.data.flow + account.data.flowPack | flow}}</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 flex-xs="100" flex-sm="40" flex-md="40" layout="row" layout-align-xs="center center" layout-align-gt-xs="space-between center"> <div layout-hide-xs></div> <qr ng-click="showQrcodeDialog(server.method, account.password, server.host, account.port + server.shift, server.name)" size="getQrCodeSize()" layout-margin text="createQrCode(server.method, account.password, server.host, account.port + server.shift, server.name)" image="true"></qr> <div layout-hide-xs></div> </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>