{% extends 'base.html' %}
{% load mytags %}

{% block content %}

    <form method="post" action="">
        <table class="table table-striped table-hover table-condensed">
        <thead>
            <tr>
                <th>id</th>
                <th>用户名</th>
                <th>主机</th>
                <th>监控</th>
                <th>命令统计</th>
                <th>阻断</th>
                <th>开始时间</th>
                <th>结束时间</th>
            </tr>
        </thead>
        <tbody>
            {% for log in logs.object_list %}
            <tr>
                <!--<td><input type="checkbox" name="selected" value="{{ log.id }}"></td>-->
                <td>{{ log.id }}</td>
                <td>{{ log.user }}</td>
                <td>{{ log.host }}</td>
                {% if log.finish %}
                <td>监控</td>
                <td><a href="/logHistory/?id={{ log.id }}" class="log_command">统计</a></td>
                <td>阻断</td>
                {% else %}
                <td><a class='monitor' filename="{{ log.logfile }}">监控</a></td>
                <td>命令统计</td>
                <td><a href="/killSession/?id={{ log.id }}">阻断</a> </td>
                {% endif %}
                <td>{{ log.start_time|stamp2str }}</td>
                <td>{{ log.end_time|stamp2str }}</td>
            </tr>
            {% endfor %}
        </tbody>
        </table>
        <script src="http://{{ web_socket_host }}:3000/socket.io/socket.io.js"></script>


        <script >
           $.fn.webSocket = function(opt){
            var st = {};
            st = $.extend(st,opt);
            var message = {};
            var $this = $(this);


            var genUid = function(){
                return new Date().getTime()+""+Math.floor(Math.random()*899+100);
            };

            var init = function(e){

                var socket = io.connect('ws://'+globalConfig.SOCKET_HOST);
                var node = $(e.target);
                message.id = genUid();
                message.filename = node.attr('filename');
                BootstrapDialog.show({message:function(){
                    var escapeString = function (html){
                        var elem = document.createElement('div')
                        var txt = document.createTextNode(html)
                        elem.appendChild(txt)
                        return elem.innerHTML;
                    }
                    var tag = $('<div id="log" style="height:300px;overflow: auto;"></div>');
                    //告诉服务器端有用户登录
                    socket.emit('login', {userid:message.id, filename:message.filename});
                    socket.on('message',function(obj){
                        //去除log中的颜色控制字符
                        var regx =  /\x1B\[([0-9]{1,3}((;[0-9]{1,3})*)?)?[m|K]/g;
                        tag.append('<p>'+escapeString(obj.content.replace(regx,''))+'</p>');
                    });
                    return tag[0];
                } ,
                    title:'实时监控:',
                    onhide:function(){
                        socket.emit('disconnect');
                }});
            }


            $this.on("click",function(e){
                init(e);
                return false;
            });

        }

           $('.log_command').on('click',function(){
               var url = $(this).attr('href');
                $.ajax({url:url,success:function(data){
                BootstrapDialog.show({title:'命令统计',message:data});
                }});
               return false;
            })
           globalConfig = {
                SOCKET_HOST: "{{ web_socket_host }}"
           }
           $(".monitor").webSocket()

        </script>
    <!--<button class="btn btn-primary">删除</button>-->
    </form>
        <nav>
          <ul class="pager">
            {% if logs.has_previous %}
            <li><a href="?page={{ logs.previous_page_number }}">上一页</a></li>
            {% endif %}

            <span class="current">
             Page {{ logs.number }} of {{ logs.paginator.num_pages }}.
            </span>

            {% if logs.has_next %}
            <li><a href="?page={{ logs.next_page_number }}">下一页</a></li>
            {% endif %}
          </ul>
        </nav>
{% endblock %}