{% extends "../main.html" %}
{% block title %}百度ping{% end %}
{% block content %}
<div class="page-container">
    <div class="padding sr" id="list" data-plugin="musicapp">
        <div class="heading py-2 d-flex ">
            <div>
                <div class="text-muted text-sm sr-item"></div>
                <h5 class="text-highlight sr-item">百度ping</h5>
            </div>
            <span class="flex"></span>
        </div>
        <div class="pb-1 d-flex sr-item" id="filter-tag">
            <div class="text-muted no-shrink my-2"></div>
            <div class="mx-3">
            </div>
        </div>
        <div class="pb-4 d-flex sr-item" id="filter-category">
            <div class="text-muted no-shrink my-2"></div>
            <div class="mx-3">

            </div>
        </div>
        <div class="col-sm-10">
            <form data-plugin="parsley" data-option="{}">
                <div class="card">
                    <div class="card-header">
                        <div class="text-center pt-2">
                            <strong>网站链接</strong>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            <textarea id="textarea_site_link" class="form-control" rows="16" data-minwords="6" required
                                      placeholder="获取网站链接，手动输入网址，换行分隔。"></textarea>
                        </div>

                        <div class="text-right pt-2">
                            <button type="button" id="select_site" class="btn btn-primary">选择网站</button>
                            <button type="button" id="site_links_ping" class="btn btn-primary">Ping</button>
                        </div>

                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- .select_site modal -->
<div id="select_site_modal" class="modal bg-dark fade" data-backdrop="true">
    <div class="modal-dialog">
        <div class="modal-content ">
            <div class="modal-header ">
                <div class="modal-title text-md">选择需要导出网站链接的网站域名</div>
            </div>
            <div class="modal-body">
                <div class="modal-body p-4">
                    <div class="list list-row">
                        <div class="list-item " data-id="1">
                            <div>
                                <label class="ui-check m-0 ">
                                    <input type="checkbox" id="all_select" value="1" onclick="all_select()">
                                    <i></i>
                                </label>
                            </div>
                            <div class="flex">
                                <a href="#" class="item-author text-color ">全选</a>
                            </div>
                        </div>

                        {% for domain in domains %}
                        <div class="list-item ">
                            <div>
                                <label class="ui-check m-0 ">
                                    <input type="checkbox" class="domain_select" value="{{ domain }}">
                                    <i></i>
                                </label>
                            </div>
                            <div class="flex">
                                <a href="#" class="item-author text-color ">{{ domain }}</a>
                            </div>
                        </div>

                        {% end %}

                    </div>
                </div>
                <div class="modal-footer">
                    {% module xsrf_form_html() %}
                    <button class="btn btn-primary" id="write_link">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- / .select_site modal -->

<!-- .wait modal -->
<div id="wait-modal" class="modal bg-dark fade" data-backdrop="true">
    <div class="modal-dialog">
        <div class="modal-content ">
            <div class="modal-header ">
                <div class="modal-title text-md" id="wait-modal-div"></div>
            </div>
            <div class="modal-body">
                <div class="p-4 text-center">
                    <div class="loading m-4 m-auto"></div>
                    <p id="site_link"></p>
                    <p id="msg"></p>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- / .wait modal -->

{% end %}
{% block js %}
<script>
    $("#select_site").click(function () {
        $('#select_site_modal').modal();
    });


    function all_select() {
        var is_all_select = document.getElementById("all_select").checked;
        if (is_all_select) {
            var domain_select = document.getElementsByClassName("domain_select");
            for (var i = 0; i < domain_select.length; i++) {
                domain_select[i].checked = "checked";
            }
        } else {
            var domain_select = document.getElementsByClassName("domain_select");
            for (var i = 0; i < domain_select.length; i++) {
                domain_select[i].checked = "";
            }
        }
    }


    $(document).ready(function () {
        $("#write_link").click(function () {
            var domains = "";
            $(".domain_select").each(function () {
                var is_domain_select = $(this).is(":checked");
                if (is_domain_select) {
                    domains = domains + $(this).val() + ",";
                }

            });


            $("#select_site_modal").modal('hide');
            var ws = new WebSocket("ws://{{ url }}/bselectlink");
            ws.onopen = function () {
                console.log("连接成功！");
                ws.send(domains);
            };
            $("#wait-modal").modal();
            $("#wait-modal-div").text('输入框写入链接中');
            ws.onmessage = function (e) {
                {#console.log(e);#}
                var data = e.data;
                data = JSON.parse(data);
                $("#textarea_site_link").append(data['url_links']);
                $("#msg").empty();
                $("#msg").append(data['msg']);
                if (data['msg'] == 1) {
                    $("#msg").empty();
                    $("#msg").append("所有域名下的链接已经全部写入输入框！");
                    setTimeout(function () {
                        $("#wait-modal").modal("hide");
                    }, 3000);


                }
            };
            ws.onclose = function () {
                console.log("断开连接！");
            };

        });
    });


    $("#site_links_ping").click(function () {
        $("#wait-modal").modal();
        $("#wait-modal-div").text('百度Ping中');
        var site_link = $("#textarea_site_link").val();
        var ws = new WebSocket("ws://{{ url }}/sitelinkping");
        ws.onopen = function () {
            console.log("连接成功！");
            ws.send(site_link);
        };

        ws.onmessage = function (e) {
            {#console.log(e);#}
            var data = e.data;
            data = JSON.parse(data);
            $("#site_link").empty();
            $("#site_link").append(data['site_link']);
            $("#msg").empty();
            $("#msg").append(data['msg']);
            if (data['msg'] == 1) {
                $("#msg").empty();
                $("#msg").append("百度ping已经全部完成！");
                setTimeout(function () {
                    $("#wait-modal").modal("hide");
                }, 3000);


            }
        };
        ws.onclose = function () {
            console.log("断开连接！");
        };

    });
</script>
{% end %}