<%inherit file="base.html"/>
<%def name="head()">

<script>
    var updater = {
        socket: null,
        timer: null,

        start: function () {
            var _prefix = "${use_ssl and 'wss' or 'ws'}";
            var url = _prefix+"://${sys_param_value('radiusd_address')}:${sys_param_value('radiusd_admin_port')}";
            updater.socket = new WebSocket(url);
            updater.socket.onmessage = function (event) {
                updater.showMessage(JSON.parse(event.data));
            }
            updater.socket.onclose = function (event) {
                updater.start();
            }
            updater.socket.onopen = updater.onOpen;
        },

        showMessage: function (message) {
            $("#inbox").prepend('<div class="well well-sm">'
             + message.time 
             + " :: " + message.data + '</div>');
        },

        onOpen: function(event){

        }
    };

    function doGetLastTrace() {
        var message = {
            process:"admin_trace_global",
            type:$("#msgType").val(),
            bas:$("#basAddr").val(),
            username: $("#userName").val()
        }
        data = JSON.stringify(message);
        $.post("/encrypt", {data:data} , function (ev) {
            updater.socket.send(ev.data);
            updater.timer = setTimeout("doGetLastTrace()", 300);
        }, "json");
    }
    
    function doGetUserTrace() {
        clearTimeout(updater.timer);
        $("#traceAction").removeAttr("disabled");
        $("#stopTraceAction").attr("disabled", "disabled");    
        $("#inbox").empty();

        var message = {
            process:"admin_trace_user",
            username: $("#userName").val()
        }
        data = JSON.stringify(message);
        $.post("/encrypt", {data:data} , function (ev) {
            updater.socket.send(ev.data);
        }, "json");
    }


    $(document).ready(function () {
        updater.start();
        $("#stopTraceAction").attr("disabled", "disabled");
        $("#traceAction").click(function(){
            doGetLastTrace();
            $("#traceAction").attr("disabled", "disabled");
            $("#stopTraceAction").removeAttr("disabled");
        });

        $("#stopTraceAction").click(function () {
            clearTimeout(updater.timer);
            $("#traceAction").removeAttr("disabled");
            $("#stopTraceAction").attr("disabled", "disabled");
        });

        $("#clearTraceAction").click(function (){$("#inbox").empty();});
        $("#queryUserAction").click(function(){doGetUserTrace();});
    });

</script>
</%def>

<%def name="body()">

    <div class="panel panel-default">
        <div class="panel-heading"><span class="glyphicon glyphicon-th"></span> 消息跟踪</div>
        <div class="panel-body">
            <form class="form-inline" role="form">
                <div class="form-group">
                    <select id="basAddr" class="form-control">
                        <option value="">所有BAS</option>
                        % for bas in bas_list:
                        <option value="${bas.ip_addr}">${bas.bas_name}</option>
                        % endfor
                    </select>
                </div>
                <div class="form-group">
                    <select id="msgType" class="form-control">
                        <option value="0">所有消息</option>
                        <option value="1">认证消息</option>
                        <option value="4">计费消息</option>
                    </select>
                </div>
                <div class="form-group">
                    <input type="userName" class="form-control" id="userName" placeholder="用户账号" onblur="doSetTracePoicy();">
                </div>
                <button type="button" id="traceAction" class="btn btn-info">开始跟踪</button>
                <button type="button" id="stopTraceAction" class="btn btn-info">停止跟踪</button>
                <button type="button" id="clearTraceAction" class="btn btn-info">清除消息</button>
                <button type="button" id="queryUserAction" class="btn btn-info">用户最近消息</button>
            </form>
            <hr>
            <div id="inbox" style="height:410px;overflow:auto">

            </div>
        </div>
    </div>

</%def>