shadowsocks-manager/plugins/webgui/public/views/dialog/ip.html

A shadowsocks manager tool for multi user and traffic control.

<md-dialog aria-label="ip dialog" ng-style="setDialogWidth()">
    <md-toolbar>
        <div class="md-toolbar-tools">
            <h2>最近连接IP</h2>
            <span flex></span>
            <md-button class="md-icon-button" ng-click="publicInfo.hide()">
                <md-icon class="material-icons" aria-label="Close dialog">close</md-icon>
            </md-button>
        </div>
    </md-toolbar>
    <md-dialog-content>
        <div class="md-dialog-content">
            <div flex layout="row" layout-align="center center" ng-show="!ip && !allIp">
                <md-progress-circular md-mode="indeterminate" class="md-accent"></md-progress-circular>
            </div>
            <div layout="column" layout-align="center stretch" ng-hide="!ip && !allIp">
                <md-list>
                    <md-divider></md-divider>
                    <md-list-item>
                        <div>本服务器：<span ng-show="ip.length > 0">({{ip.length}})</span></div>
                    </md-list-item>
                    <md-divider></md-divider>
                    <md-list-item ng-repeat="i in ip">
                        <div flex layout="row" layout-align="space-between center">
                            <div flex="60">{{i.ip}}</div>
                            <div flex="40" style="text-align:right">
                                <span style="font-size: 0.9em;">{{ i.info[0] }}</span>
                                <span ng-show="i.info[1]" style="font-size: 0.9em;">{{ i.info[1] }}</span>
                            </div>
                        </div>
                        <md-divider ng-hide="$last"></md-divider>
                    </md-list-item>
                    <md-list-item ng-show="ip.length === 0">
                        <div style="width: 100%; text-align: center;">暂无</div>
                    </md-list-item>
                    <md-divider></md-divider>
                    <md-list-item>
                        <div>所有服务器：<span ng-show="allIp.length > 0">({{allIp.length}})</span></div>
                    </md-list-item>
                    <md-divider></md-divider>
                    <md-list-item ng-repeat="i in allIp">
                        <div flex layout="row" layout-align="space-between center">
                            <div flex="60">{{i.ip}}</div>
                            <div flex="40" style="text-align:right">
                                <span style="font-size: 0.9em;">{{ i.info[0] }}</span>
                                <span ng-show="i.info[1]" style="font-size: 0.9em;">{{ i.info[1] }}</span>
                            </div>
                        </div>
                        <md-divider></md-divider>
                    </md-list-item>
                    <md-list-item ng-show="allIp.length === 0">
                        <div style="width: 100%; text-align: center;">暂无</div>
                        <md-divider></md-divider>
                    </md-list-item>
                </md-list>
            </div>
        </div>
    </md-dialog-content>
</md-dialog>