{% extends "../main.html" %}
{% block title %}访问日志{% end %}
{% block css %}
<style>
    .d-none {
        min-width: 55px !important;
    }

    .ua-control {
        display: none;
    }

    .ua-show {

    }

    .hide-table {
        display: none;
    }

    #loading {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 999;
    }

    #loading i {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 50px;
        height: 50px;
        border: 4px solid grey;
        border-right-color: transparent;
        border-radius: 50%;
        animation: loadingAnimation 0.8s infinite Linear;
        margin: auto;
    }

    @keyframes loadingAnimation {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }

    .change-line-control {
        word-wrap: break-word;
    }

    .width-control {
        max-width: 250px;
    }

    #table a {
        color: #212529;
    }
    .table-theme thead{
        background: whitesmoke;
    }
    #logs-body tr{
        border-bottom: 1px solid #f9f9f9;
    }
    .log-header, .log-header input, .log-header select, #table tbody tr td, #table thead tr th, #pages-body,
    .select2-container,#search-button{
        font-size: 12px !important;
        -webkit-font-smoothing: antialiased !important;
    }
    .log-header label{ color:#000 }
    .card{border-radius: 0;}
    .card-header strong{font-size:.8rem;}
    span.log-detail {cursor: pointer;}
    .select2-container{
        display: block;
        width: 100% !important;
    }
</style>

{% end %}
{% block content %}
<div id="loading">
    <i></i>
</div>

<div class="page-hero page-container " id="page-hero">
    <div class="padding d-flex">
        <div class="page-title">
            <h2 class="text-md text-highlight">统计日志</h2>
            <small class="text-muted">访问总数：<span id="span-log-counts"></span></small>
        </div>
        <div class="flex">
            <div class="alert alert-warning" role="alert" id="alert-div" style="display: none;">
                <i data-feather="alert-circle"></i>
                <span class="mx-2" id="alert-msg"></span>
            </div>
        </div>
    </div>
</div>
<div class="page-content page-container" id="page-content">
    <div class="padding contents" style="padding-top:0;">
        <div class="log-header" style="padding: 0;">
            <form data-plugin="parsley" data-option="{}">
                {% module xsrf_form_html() %}
                <div class="card">
                    <div class="card-header">
                        <strong>日志搜索</strong>
                    </div>
                    <div class="card-body">
                        <div class="form-row">
                            <div class="form-group col-sm-3">
                                <label>访问域名</label>
                                <select id="input-host" data-plugin="select2" class="select2-log form-control" data-minimum-results-for-search="Infinity" data-placeholder="选择域名">
                                    <option></option>
                                    {% for domain in data['domains'] %}
                                    <option value="{{ domain }}">{{ domain }}</option>
                                    {% end %}
                                </select>
                            </div>
                            <div class="form-group col-sm-3">
                                <label>访客IP</label>
                                <input id="input-ip" type="text" class="form-control" placeholder="默认为空">
                            </div>
                            <div class="form-group col-sm-3">
                                <label>访问路径</label>
                                <input id="input-uri" type="text" class="form-control" placeholder="默认为空">
                            </div>
                            <div class="form-group col-sm-3">
                                <label>访问方法</label>
                                <select id="input-method" class="select2-log form-control" data-minimum-results-for-search="Infinity" data-placeholder="请求方法">
                                    <option></option>
                                    <option value="GET">GET</option>
                                    <option value="POST">POST</option>
                                    <option value="PUT">PUT</option>
                                    <option value="DELETE">DELETE</option>
                                    <option value="HEAD">HEAD</option>
                                    <option value="OPTION">OPTIONS</option>
                                    <option value="TRACE">TRACE</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group col-sm-3">
                                <label>响应状态码</label>
                                <input id="input-status" type="text" class="form-control" placeholder="默认为空">
                            </div>
                            <div class="form-group col-sm-3">
                                <label>请求UA</label>
                                <input id="input-ua" type="text" class="form-control" placeholder="默认为空">
                            </div>
                            <div class="form-group col-sm-3">
                                <label>访问来源</label>
                                <input id="input-refer" type="text" class="form-control" placeholder="默认为空">
                            </div>
                            <div class="form-group col-sm-3">
                                <label>排序方式</label>
                                <select id="input-reverse" class="select2-log form-control" data-minimum-results-for-search="Infinity">
                                    <option value="1">按时间倒序</option>
                                    <option value="0">按时间顺序</option>
                                </select>
                            </div>
    
                        </div>
                        <div class="form-group row row-sm">
                            <label class="col-sm-2 col-form-label">日志起始时间</label>
                            <div class="col-sm-5">
                                <input id="time-start-date" type="date" class="form-control" placeholder="Date">
                            </div>
                            <div class="col-sm-5">
                                <input id="time-start-time" type="time" class="form-control" placeholder="Time">
                            </div>
                        </div>
                        <div class="form-group row row-sm">
                            <label class="col-sm-2 col-form-label">日志结束时间</label>
                            <div class="col-sm-5">
                                <input id="time-end-date" type="date" class="form-control" placeholder="Date">
                            </div>
                            <div class="col-sm-5">
                                <input id="time-end-time" type="time" class="form-control" placeholder="Time">
                            </div>
                        </div>
    
                        <div class="text-right pt-2">
                            <button id="search-button" type="button" onclick="search_by_button();return false;"
                                class="btn btn-primary">搜索日志
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <table id="table" class="table table-theme v-middle hide-table" data-show-export="true" data-show-columns="true"
            data-detail-view="false" data-mobile-responsive="true" data-pagination="true"
            data-page-list="[10, 25, 50, 100, ALL]">
            <thead>
                <tr>
                    <th data-field="finish" style="text-align: center;"></th>
                    <th data-field="finish" style="min-width: 95px;">访问时间</th>
                    <th data-field="project">访客IP</th>
                    <th data-field="owner">访问域名</th>
                    <th data-field="task"><span class="d-none d-sm-block">访问方法</span></th>
                    <th data-field="finish"><span class="d-none d-sm-block">状态码</span></th>
                    <th data-field="finish"><span class="d-none d-sm-block change-line-control">访问路径</span></th>
                    {#                                    <th data-field="finish"><span class="d-none d-sm-block">来源</span></th>#}
                </tr>
            </thead>
            <tbody id="logs-body">
            </tbody>
        </table>
        <div class="d-flex">
            <ul class="pagination" id="pages-body">
            </ul>
        </div>
    </div>
</div>

{% end %}

{% block js %}
<script>

    let get_filter_params = function () {
        let filter_params = {
            host: $("#input-host").val(),
            ip: $("#input-ip").val(),
            ua: $("#input-ua").val(),
            uri: $("#input-uri").val(),
            time_start_date: $("#time-start-date").val(),
            time_start_time: $("#time-start-time").val(),
            time_end_date: $("#time-end-date").val(),
            time_end_time: $("#time-end-time").val(),
            method: $("#input-method").val(),
            status: $("#input-status").val(),
            refer: $("#input-refer").val(),
            reverse: $("#input-reverse").val(),
            _xsrf: $("[name='_xsrf']").val()
        };
        return filter_params;
    };

    let show_new_logs = function (logs) {
        logs.forEach(function (log) {
            let ele = '<tr data-id="2">\
            <td><span data-tmp="plus" class="log-detail" onclick="show_ua(this);" ><i class="mx-2" data-feather="plus"></i></span></td>\
            <td><span style="white-space: nowrap">' + log["time"] + '</span></td>\
            <td><span style="white-space: nowrap">' + log["ip"] + '</span></td>\
            <td><span style="white-space: nowrap"><a target="_blank" href="http://' +log["host"]+ '">' + log["host"] + '</a></span></td>\
            <td><span style="white-space: nowrap">' + log["method"] + '</span></td>\
            <td><span style="white-space: nowrap">' + log["status"] + '</span></td>\
            <td class="width-control"><span class="change-line-control"><a target="_blank" href="http://' + log['host'] + log["path"]+ '">' + log["path"] + '</a></span></td></tr>\
            <tr class="ua-control"><td style="background-color:#cecece24 !important;" colspan="7"><p style="margin-bottom: 0.3rem"><span style="font-weight: 700">访问来源：</span><a target="_blank" href="' +log["refer"]+ '">' + log["refer"] + '</a></p><p style="margin-bottom: 0rem"><span style="font-weight: 700">User-Agent：</span>' + log["ua"] + '</p></td></tr>';
            ele = ele.replace(/undefined/g, '');
            $('#logs-body').append(ele)
        })
    };

    let get_new_page_ele = function (no, flag) {
        let ele = '';
        if (flag === 0) {
            ele = '<li class="page-item" id="pre-page"><a class="page-link" onclick="search_by_page(this);return false;" value="' + no + '">' + '上一页' + '</a></li>';
        }
        if (flag === 1) {
            ele = '<li class="page-item"><a class="page-link" onclick="search_by_page(this);return false;" value="' + no + '">' + no + '</a></li>';
        }
        if (flag === 2) {
            ele = '<li class="page-item" id="next-page"><a class="page-link" onclick="search_by_page(this);return false;" value="' + no + '">' + '下一页' + '</a></li>';
        }
        return ele;
    };

    let show_new_pages = function (pages) {
        $('#span-log-counts').text(pages['counts']);
        if (pages['current'] == -1) {
            return
        }
        $('#pages-body').append(get_new_page_ele(pages['pre'], 0));
        pages['pages'].forEach(function (page) {
            $('#pages-body').append(get_new_page_ele(page, 1));
        });
        $('#pages-body').append(get_new_page_ele(pages['next'], 2));
        let new_pages = $('#pages-body').children();
        for (let i = 0; i < new_pages.length; i++) {
            let page_a = $(new_pages[i]).children()[0];
            if ($(page_a).attr('value') == -1) {
                $(new_pages[i]).addClass('disabled');
            }
            if ($(page_a).attr('value') == pages['current']) {
                $(new_pages[i]).addClass('active');
                $(new_pages[i]).addClass('disabled');
            }
        }
    };

    let search = function (params) {
        $('#logs-body').empty();
        $('#pages-body').empty();
        $('#loading').css('display', 'block');
        $('#table').addClass('hide-table');
        $.post('/accesslog', params, function (data, status) {
            let resp = JSON.parse(data);
            if (resp == "") {
                $('#loading').css('display', 'none');
                $('#span-log-counts').text('0');
                return
            }
            $('#table').removeClass('hide-table');
            show_new_logs(resp['logs']);
            show_new_pages(resp['pages']);
            $('#loading').css('display', 'none');
            feather.replace({'width':16,'height':16,'stroke-width': 2})
        });


    };

    let search_by_button = function () {
        let params = get_filter_params();
        search(params);
    };

    let search_by_page = function (obj) {
        let params = get_filter_params();
        let page = $(obj).attr('value');
        params['pagenum'] = page;
        search(params);

    };

    let show_ua = function (obj) {
        let eles = $('.ua-show');
        for (let i = 0; i < eles.length; i++) {
            if (eles[i] != $(obj).parent().parent().next()[0]) {
                $(eles[i]).removeClass('ua-show');
                $(eles[i]).addClass('ua-control');
                $(".log-detail").html('<i class="mx-2" data-feather="plus"></i>');
            }
        }
        
        if ($(obj).data("tmp")=="plus"){
            $(obj).data("tmp","minus")
            $(obj).html('<i class="mx-2" data-feather="minus"></i>')
        }else{
            $(obj).data("tmp","plus")
            $(obj).html('<i class="mx-2" data-feather="plus"></i>')
        }
        $(obj).parent().parent().next().toggleClass('ua-control');
        $(obj).parent().parent().next().addClass('ua-show');
        feather.replace({'width':16,'height':16,'stroke-width': 2})
    };

    $(function () {
        search_by_button();
    })

</script>
{% end %}