shadowsocks-manager
Version:
A shadowsocks manager tool for multi user and traffic control.
57 lines (56 loc) • 3.48 kB
HTML
<div layout="row" layout-wrap>
<div ng-if="!servers.length" class="zero-element">没有服务器<br /><span class="zero-element-link" ng-if="id === 1" ng-click="addServer()">点击这里添加</span></div>
<div flex-xs="100" flex-sm="50" flex-md="33" flex-gt-md="25" ng-repeat="server in servers track by server.id" ng-show="showServer(server.name)">
<md-card class="hover-mouse hover-flow" ng-click="id === 1 && toServerPage(server.id)" md-colors="{{serverColor(server)}}">
<md-card-header>
<md-card-header-text layout="row" layout-align="space-between center">
<div layout="column" flex="100">
<span class="md-title" layout="row" layout-align="space-between center">
<span>
{{server.name}}
<span ng-show="server.status === -1" style="color: #a33;">离线</span>
<span ng-show="server.status !== -1 && !server.isGfw" style="color: #3a3;">{{server.status}}</span>
<span ng-show="server.status !== -1 && server.isGfw" style="color: #a33;">{{server.status}}</span>
</span>
<span><span style="color: #999;">{{ online[server.id] }}</span></span>
</span>
<span class="md-subhead">{{server.host.split(':')[0]}}:{{server.port}}</span>
</div>
</md-card-header-text>
</md-card-header>
<div layout="row" layout-align="center center" ng-if="serverChart.showChart" style="position: relative;">
<div style="position: absolute; width: 100%; height: 100%; z-index: 1;">
<div ng-if="server.sumFlowOneHour" style="position: absolute; right: 4%; bottom: 28px; color: rgba(70, 70, 70, 0.75); background-color: rgba(225, 225, 225, 0.5);">
{{ server.sumFlowOneHour | flow }}
</div>
</div>
<div style="width: 95%; max-width: 500px;">
<canvas class="chart chart-line"
chart-data="server.chart.data"
chart-labels="chart.labels"
chart-series="chart.series"
chart-options="chart.options"
chart-dataset-override="chart.datasetOverride">
</canvas>
</div>
</div>
<md-card-actions layout="row" layout-align="start center" ng-if="serverChart.showChart">
</md-card-actions>
<md-card-content layout="column" ng-if="serverChart.showFlow">
<div layout="row" layout-align="space-between center">
<div translate>本日流量：</div>
<div>{{server.flow.today | flow}}</div>
</div>
<div layout="row" layout-align="space-between center">
<div translate>本周流量：</div>
<div>{{server.flow.week | flow}}</div>
</div>
<div layout="row" layout-align="space-between center">
<div translate>本月流量：</div>
<div>{{server.flow.month | flow}}</div>
</div>
</md-card-content>
</md-card>
</div>
</div>
<div style="height: 100px;"></div>