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

A shadowsocks manager tool for multi user and traffic control.

<div layout="row" layout-wrap>
    <div flex-xs="100" flex-sm="100" flex-gt-sm="50">
        <md-card>
            <md-card-header>
                <md-card-header-text>
                    <span class="md-headline" translate>最新注册用户</span>
                </md-card-header-text>
            </md-card-header>
            <md-card-content>
              <md-list>
                  <md-divider></md-divider>
                  <md-list-item ng-repeat="user in signupUsers" ng-click="toUser(user.id)">
                      <div flex layout="row" layout-align="space-between center">
                          <div style="word-break: keep-all; white-space:nowrap; overflow: hidden; text-overflow:ellipsis;" flex="70" flex-xs="60">{{user.username}}</div>
                          <div flex="30" flex-xs="40" style="text-align: right; color: #aaa; font-size: 0.8em;" ng-if="user.createTime">{{user.createTime | timeagoshort | translateTime}}</div>
                      </div>
                      <md-divider></md-divider>
                  </md-list-item>
              </md-list>
            </md-card-content>
        </md-card>
    </div>
    <div flex-xs="100" flex-sm="100" flex-gt-sm="50">
        <md-card>
            <md-card-header>
                <md-card-header-text>
                    <span class="md-headline" translate>最近登录用户</span>
                </md-card-header-text>
            </md-card-header>
            <md-card-content>
              <md-list>
                  <md-divider></md-divider>
                  <md-list-item ng-repeat="user in loginUsers" ng-click="toUser(user.id)">
                      <div flex layout="row" layout-align="space-between center">
                          <div style="word-break: keep-all; white-space:nowrap; overflow: hidden; text-overflow:ellipsis;" flex="70" flex-xs="60">{{user.username}}</div>
                          <div flex="30" flex-xs="40" style="text-align: right; color: #aaa; font-size: 0.8em;" ng-if="user.lastLogin">{{user.lastLogin | timeagoshort | translateTime}}</div>
                      </div>
                      <md-divider></md-divider>
                  </md-list-item>
              </md-list>
            </md-card-content>
        </md-card>
    </div>
    <div flex-xs="100" flex-sm="100" flex-gt-sm="50" ng-show="orders.length">
        <md-card>
            <md-card-header>
                <md-card-header-text>
                    <span class="md-headline" translate>支付宝订单</span>
                </md-card-header-text>
            </md-card-header>
            <md-card-content>
              <md-list>
                  <md-divider></md-divider>
                  <md-list-item ng-repeat="order in orders">
                      <div flex layout="row" layout-align="space-between center" ng-click="showOrderInfo(order)">
                          <div flex="30" flex-xs="60">
                              <span style="font-size: 0.9em;">{{ order.orderId }}</span><br><span style="font-size: 0.9em;">{{ order.createTime | timeago }}</span>
                          </div>
                          <div flex="30" flex-xs="40" style="text-align: right;">
                              <span style="font-size: 0.9em; color: #555">{{order.amount}}</span><br><span style="font-size: 0.9em; color: #000">{{ order.status | order | translate }}</span>
                          </div>
                      </div>
                      <md-divider></md-divider>
                  </md-list-item>
              </md-list>
            </md-card-content>
        </md-card>
    </div>
    <div flex-xs="100" flex-sm="100" flex-gt-sm="50" ng-show="paypalOrders.length">
        <md-card>
            <md-card-header>
                <md-card-header-text>
                    <span class="md-headline" translate>PayPal订单</span>
                </md-card-header-text>
            </md-card-header>
            <md-card-content>
              <md-list>
                  <md-divider></md-divider>
                  <md-list-item ng-repeat="order in paypalOrders">
                      <div flex layout="row" layout-align="space-between center" ng-click="showOrderInfo(order)">
                          <div flex="30" flex-xs="60">
                              <span style="font-size: 0.9em;">{{ order.orderId }}</span><br><span style="font-size: 0.9em;">{{ order.createTime | timeago }}</span>
                          </div>
                          <div flex="30" flex-xs="40" style="text-align: right;">
                              <span style="font-size: 0.9em; color: #555">{{order.amount}}</span><br><span style="font-size: 0.9em; color: #000">{{ order.status | order | translate }}</span>
                          </div>
                      </div>
                      <md-divider></md-divider>
                  </md-list-item>
              </md-list>
            </md-card-content>
        </md-card>
    </div>
    <div flex-xs="100" flex-sm="100" flex-gt-sm="50">
        <md-card>
            <md-card-header>
                <md-card-header-text>
                    <span class="md-headline" translate>今日流量排行</span>
                </md-card-header-text>
            </md-card-header>
            <md-card-content>
              <md-list>
                  <md-divider></md-divider>
                  <md-list-item ng-repeat="tf in topFlow">
                      <div flex layout="row" layout-align="space-between center" ng-click="toTopUser(tf)">
                          <div flex="30" flex-xs="60">
                              <span>{{ tf.email || tf.port }}</span>
                          </div>
                          <div flex="30" flex-xs="40" style="text-align: right;">
                              <span style="color: #555">{{ tf.sumFlow | flow }}</span>
                          </div>
                      </div>
                      <md-divider></md-divider>
                  </md-list-item>
              </md-list>
            </md-card-content>
        </md-card>
    </div>
</div>