
<%
--[[
    Info    安全中心
]]--
local ver = require("xiaoqiang.XQVersion").webVersion
local wifiUtil = require("xiaoqiang.util.XQWifiUtil")
local request_uri = luci.http.getenv("REMOTE_URI")
local remote_addr = luci.http.getenv("REMOTE_ADDR")
local mac = luci.sys.net.ip4mac(remote_addr)
local lanType = wifiUtil.getDeviceWifiIndex(mac)
%>
<%include("web/inc/head")%>
<title><%:小米路由器%></title>
<meta name="viewport" content="width=1200">
<link href="<%=resource%>/web/css/bc.css?v=<%=ver%>" rel="stylesheet">
<link href="<%=resource%>/web/css/safe.css?v=<%=ver%>" rel="stylesheet">
</head>
<body>
<div id="doc">
    <%include( "web/inc/header")%>
    <div id="bd">
        <div class="mod-set mod-macfilter" id="modMacfilter" style="display:none;">
            <div class="hd">
                <h3><%:无线访问控制%></h3>
                <div class="switch">
                    <a data-enable="1" class="btn-switch btn-switch-off" id="macfilterswitch" href="#"></a>
                </div>
            </div>
            <div class="bd">
                <div class="section" style="display:none;">
                    <h4><%:控制模式%>：</h4>
                    <p>
                        <label for="filtertype1">
                            <input id="filtertype1" type="radio" name="filtertype" value="0" class="filtertype"> <span><%:黑名单模式（不允许列表中设备访问）%></span>
                        </label>
                        <label for="filtertype2">
                            <input id="filtertype2" type="radio" name="filtertype" value="1" class="filtertype"> <span><%:白名单模式（只允许列表中设备访问）%></span>
                        </label>
                    </p>
                </div>
                <div class="section" style="display:none;">
                    <h4 id="typeText"><%:正在检测模式列表...%></h4>
                    <table class="table">
                        <thead>
                            <tr>
                                <th><%:设备名称%></th>
                                <th><%:MAC地址%></th>
                                <th width="80" style="padding-left:21px;"><%:操作%></th>
                            </tr>
                        </thead>
                        <tbody id="deviceslist">
                            <tr>
                                <td colspan="3"><%:正在查询中...%></td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="add-contral">
                        <a id="btnListAdd" href="#" class="btn btn-dft btn-m"><span><%:从在线列表添加%></span></a><a id="btnSelfAdd" href="#" class="btn btn-dft btn-m"><span><%:手工添加%></span></a>
                    </div>
                </div>
                <div class="form-contral">
                    <button style="display:none;" id="setWifiMacfilter" class="btn btn-primary btn-l" type="submit"><span><%:保存并生效%></span>
                    </button>
                </div>
            </div>
        </div>
        <%include( "web/inc/password")%>

        <div class="mod-set mod-manage-filter">
            <div class="hd">
                <h3><%:管理后台访问控制%></h3>
                <div class="switch">
                    <a data-enable="1" class="btn-switch btn-switch-off" id="managefilterswitch" href="#"></a>
                </div>
            </div>
            <div class="bd" id="manageFilterBody">
                <div class="isoff" style="display:none;">
                    <p><%:开启白名单功能后，将只允许名单中的设备访问管理后台，每次开启会将本机自动添加至白名单。%></p>
                </div>
                <div class="ison" style="display:none;">
                     <table class="table">
                        <thead>
                            <tr>
                                <th><%:MAC地址白名单%></th>
                                <th width="80" class="center"><%:操作%></th>
                            </tr>
                        </thead>
                        <tbody id="manageFilterList">
                        </tbody>
                    </table>
                    <div class="btns" style="padding:20px 0;">
                        <button class="btn btn-primary btn-l" id="manageFilterAdd"><span><%:通过MAC地址添加设备%></span></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <%include( "web/inc/footer")%>
</div>
<%include( "web/inc/g.js")%>
<script type="tmpl/html" id="tmplAddSelf">
    <div class="dialog-selfadd-form-wrap">
        <form action='<%=luci.dispatcher.build_url("api", "xqnetwork", "manually_add")%>' class="form" name="selfadd" id="selfAdd">
            <div class="form-item">
                <label class="k">
                    <%:名称%>
                </label>
                <span class="v">
<input type="text" id="macname" name="macname" class="ipt-text" reqMsg="<%:名称%>" />
</span>
                <em class="t"></em>
            </div>
            <div class="form-item">
                <label class="k">
                    <%:MAC地址%>
                </label>
                <span class="v">
<input type="text" id="macaddr" name="addr" class="ipt-text" datatype="macaddr" reqMsg="<%:MAC地址%>" />
</span>
                <em class="t"></em>
            </div>
            <div class="form-contral">
                <button type="submit" class="btn btn-primary btn-l" id="selfAddSubmit"><span><%:确定%></span>
                </button>
            </div>
        </form>
    </div>
</script>
<script type="tmpl/html" id="tmplAddList">
    <div class="dialog-listadd-form-wrap">
        <form action='<%=luci.dispatcher.build_url("api", "xqnetwork", "edit_device")%>' class="form" name="listAdd" id="listAdd">
            <table class="table">
                <thead>
                    <tr>
                        <th><%:设备名称%></th>
                        <th><%:设备信息%></th>
                        <th><%:连接时长%></th>
                        <th width="80"><%:操作%></th>
                    </tr>
                </thead>
                <tbody id="dialogdeviceslist">
                    <tr>
                        <td colspan="4"><%:正在查询中...%></td>
                    </tr>
                </tbody>
            </table>
            <div class="form-contral">
                <button type="submit" class="btn btn-primary btn-l" id="listAddSubmit"><span><%:添加%></span>
                </button>
            </div>
        </form>
    </div>
</script>
<script type="tmpl/html" id="tmplAddedDevice">
    <tr data-mac="{$addr}">
        <td>{$name}</td>
        <td>{$addr}</td>
        <td><a href="#" class="btn btn-dft btn-s del"><span><%:删除%></span></a>
        </td>
    </tr>
</script>
<script type="tmpl/html" id="tmplOnlineDevice">
    <tr>
        <td>{$name}</td>
        <td>{$ip}
            <br />{$addr}</td>
        <td>{$time}</td>
        <td>
            <input class="onlinemacinput" type="checkbox" name="nowmac" value="{$addr}" />
        </td>
    </tr>
</script>
<script>
    (function () {
        var listaddDialog;
        var selfaddDialog;
        var enableLast;
        var selfMac = '<%=mac%>'.toUpperCase();
        var lanType = '<%=lanType%>';
        var switchbtn = $('#macfilterswitch');

        var getWifiFilterInfo = function (data, callback) {
            $.getJSON('<%=luci.dispatcher.build_url("api", "xqnetwork", "wifi_macfilter_info")%>', data, function (rsp) {
                if (rsp.code == 0) {
                    enableLast = rsp.enable;
                    callback(rsp);
                }
                $('#modMacfilter').show();
                // else {
                //     alert(rsp.msg);
                // }
            });
        };
        var getAddedList = function (res) {
            var list = res.macfilter;
            var trarr = [];
            var tpl = $('#tmplAddedDevice').html();
            if ($.isArray(list) && list.length > 0) {
                for (var i = 0, len = list.length; i < len; i++) {
                    var tr = StringH.tmpl(tpl, {
                        name: StringH.encode4Html(list[i].name),
                        addr: list[i].mac
                    });
                    trarr.push(tr);
                }
                $('#deviceslist').html(trarr.join(''));
            } else {
                $('#deviceslist').html('<tr><td colspan="3"><%:还没有设备添加进来%></td></tr>');
            }
        };
        var getOnlineList = function () {
            var model = $('.filtertype:checked').val();
            getWifiFilterInfo({model: model}, function (res) {
                var list = res.list;
                var trarr = [];
                var tpl = $('#tmplOnlineDevice').html();
                if ($.isArray(list) && list.length > 0) {
                    for (var i = 0, len = list.length; i < len; i++) {
                        if(list[i].added == 0){
                            var tr = StringH.tmpl(tpl, {
                                name: StringH.encode4Html(list[i].name),
                                ip: list[i].ip,
                                addr: list[i].mac,
                                time: secondToDate(list[i].statistics.online)
                            });
                            trarr.push(tr);
                        }
                    }
                    if( trarr.length > 0 ){
                        $('#dialogdeviceslist').html(trarr.join(''));
                    }else{
                        $('#dialogdeviceslist').html('<tr><td colspan="4"><%:您已经全部添加过了%></td></tr>');
                    }
                } else {
                    $('#dialogdeviceslist').html('<tr><td colspan="4"><%:还没有设备连接进来%></td></tr>');
                }
            });
        };
        var getFilterType = function (res) {
            var model = res.model;
            if (model == 0) {
                $('#filtertype1').prop('checked', true);
                $('#typeText').html('<%:黑名单设备列表%>');
            } else {
                $('#filtertype2').prop('checked', true);
                $('#typeText').html('<%:白名单设备列表%>');
            }
        };
        var isEnable = function (res) {
            $.pub('wifiFilter:switch', {
                enable: res.enable
            });
        };
        var setWifiMacfilter = function(){
            var model = $('.filtertype:checked').val(),
                requestURL = '<%=luci.dispatcher.build_url("api", "xqnetwork", "set_wifi_macfilter")%>',
                enable = $('#macfilterswitch').attr('data-enable') == '1' ? 0 : 1,
                requestData = {
                    model: model,
                    enable: enable
                };
            if (model == 1 && enable == 1) {
                if ($('#deviceslist td').length == 1) {
                    $.dialog({
                        title: '<%:无线MAC地址过滤%>',
                        content: '<%:您没有在列表中添加任何设备，保存后所有设备将无法访问网络！请返回修改%>',
                        ok: function () {
                            this.close();
                        }
                    }).lock();
                    return;
                }
                var hasSelf = false;
                $('#deviceslist td').each(function(){
                    var text = this.innerHTML;
                    if( text == selfMac ){
                        hasSelf = true;
                    }
                });
                if( !hasSelf && lanType != 0 ){
                    $.dialog({
                        title: '<%:无线MAC地址过滤%>',
                        content: '<%:您没有将当前设备添加至白名单，保存后本机将无法访问网络！%>',
                        ok: function(){
                            this.close();
                        }
                    }).lock();
                    return;
                }
            }
            if( model ==0 && enable == 1 ){
                var hasSelf = false;
                $('#deviceslist td').each(function(){
                    var text = this.innerHTML;
                    if( text == selfMac ){
                        hasSelf = true;
                    }
                });
                if( hasSelf ){
                    $.dialog({
                        title: '<%:无线MAC地址过滤%>',
                        content: '<%:您将当前设备添加至黑名单，保存后本机将无法访问网络！%>',
                        ok: function(){
                            this.close();
                        }
                    }).lock();
                    return;
                }
            }
            $.getJSON(requestURL, requestData, function (res) {
                if (res.code == 0) {
                    location.reload(1);
                }else if(res.code == 401){
                    //
                }else{
                    alert(res.msg);
                }
            });
        };
        $.sub('wifiFilter:switch', function (e, data) {
            if (data.enable == 1) {
                switchbtn.attr('data-enable', 0);
                switchbtn[0].className = 'btn-switch btn-switch-on';
                $('.mod-macfilter .section').fadeIn();
            } else {
                switchbtn.attr('data-enable', 1);
                switchbtn[0].className = 'btn-switch btn-switch-off';
                $('.mod-macfilter .section').fadeOut();
            }
            if( data.enable == 0 && data.enable == enableLast ){
                $('#setWifiMacfilter').hide();
            }else{
                $('#setWifiMacfilter').show();
            }
        });
        switchbtn.on('click', function (e) {
            e.preventDefault();
            var enable = $(this).attr('data-enable');
            $.pub('wifiFilter:switch', {
                enable: enable
            });
            getWifiFilterInfo({}, function(res){
                res.enable = enable;
                getAddedList( res );
                getFilterType( res );
            });
        });
        $.sub('wifiFilter:addBySelf', function () {
            var formName = 'selfAdd';
            var validator = Valid.checkAll($('#selfAdd')[0]);
            if (validator) {
                $('#selfAddSubmit').addClass('btn-primary-disabled').prop('disabled', true).find('span').text('<%:保存中...%>');
                var mac = $('#macaddr').val(),
                    name = $('#macname').val(),
                    model = $('.filtertype:checked').val(),
                    option = 0;
                $.ajax({
                    url: $('#' + formName).attr('action'),
                    type: 'GET',
                    data: {
                        name: $.trim( name ),
                        mac: $.trim( mac ),
                        model: model,
                        option: option
                    },
                    dataType: 'json',
                    success: function (res) {
                        var msg;
                        if (res.code == 0) {
                            selfaddDialog.close();
                            getWifiFilterInfo({
                                model: model
                            }, function (res) {
                                getAddedList(res);
                            });
                        } else if(res.code == 401){
                            //
                        }else{
                            $('#selfAddSubmit').removeClass('btn-primary-disabled').prop('disabled', false).find('span').text('<%:添加%>');
                            msg = res.msg;
                            alert(msg);
                        }
                    }
                });
            }
        });
        $.sub('wifiFilter:addByList', function () {
            var formName = 'listAdd';

            var mac = '';
            var valarr = [];
            var model = $('.filtertype:checked').val();
            var option = 0;

            var inputs = $('.onlinemacinput:checked');
            if (inputs.length < 1) {
                alert("<%:请至少选择一个设备%>");
            } else {
                $('#listAddSubmit').addClass('btn-primary-disabled').prop('disabled', true).find('span').text('<%:保存中...%>');
                inputs.each(function (index, item) {
                    valarr.push( $.trim( item.value ) );
                });
                mac = valarr.join(';');
                $.ajax({
                    url: $('#' + formName).attr('action'),
                    type: 'GET',
                    data: {
                        mac: mac,
                        model: model,
                        option: option
                    },
                    dataType: 'json',
                    success: function (res) {
                        var msg;
                        if (res.code == 0) {
                            listaddDialog.close();
                            getWifiFilterInfo({
                                model: model
                            }, function (res) {
                                getAddedList(res);
                            });
                        } else if(res.code == 401){
                            //
                        }else {
                            $('#listAddSubmit').removeClass('btn-primary-disabled').prop('disabled', false).find('span').text('<%:添加%>');
                            msg = res.msg;
                            alert(msg);
                        }
                    }
                });
            }
        });
        $.sub('wifiFilter:delDevice', function (e, data) {
            var targetElement = data.targetElement;
            var tr = $(targetElement).closest('tr');
            var mac = tr.attr('data-mac');
            var model = $('.filtertype:checked').val();
            var option = 1;
            var requestURL = '<%=luci.dispatcher.build_url("api", "xqnetwork", "edit_device")%>';
            var requestData = {
                mac: mac,
                model: model,
                option: option
            };
            $.getJSON(requestURL, requestData, function (res) {
                if (res.code == 0) {
                    getWifiFilterInfo({
                        model: model
                    }, function (res) {
                        getAddedList(res);
                    });
                } else if(res.code == 401){
                    //
                }else {
                    alert(res.msg);
                }
            });
        });
        $.sub('addEvent', function () {
            $('.filtertype').on('click', function (e) {
                var val = $(this).val();
                if (val == 0) {
                    $('#typeText').html('<%:黑名单设备列表%>');
                } else {
                    $('#typeText').html('<%:白名单设备列表%>');
                }
                getWifiFilterInfo({
                    model: val
                }, function (res) {
                    // getFilterType( res );
                    getAddedList(res);
                });
            });
            //从列表添加
            $('#btnListAdd').on('click', function (e) {
                e.preventDefault();
                listaddDialog = $.dialog({
                    title: '<%:设备列表%><a id="devicesRefresh" class="ico-dev-refresh" href="#"></a>',
                    content: $('#tmplAddList').html(),
                    lock: true,
                    padding: 0,
                    width: 770
                });
                getOnlineList();
            });
            //手工添加
            $('#btnSelfAdd').on('click', function (e) {
                e.preventDefault();
                selfaddDialog = $.dialog({
                    title: '<%:手工添加%>',
                    content: $('#tmplAddSelf').html(),
                    lock: true,
                    padding: 0
                });
                setTimeout(function () {
                    $.formInit();
                }, 100);
            });
            //del
            $('body').delegate('#deviceslist .del', 'click', function (e) {
                e.preventDefault();
                $.pub('wifiFilter:delDevice', {
                    targetElement: this
                });
            });
            //
            $('body').delegate('#selfAdd', 'submit', function (e) {
                e.preventDefault();
                $.pub('wifiFilter:addBySelf');
            });
            //
            $('body').delegate('#listAdd', 'submit', function (e) {
                e.preventDefault();
                $.pub('wifiFilter:addByList');
            });
            //save and run
            $('#setWifiMacfilter').on('click', function (e) {
                e.preventDefault();
                setWifiMacfilter();
            });
            //refresh
            $('body').delegate('#devicesRefresh', 'click', function(e){
                e.preventDefault();
                $('#dialogdeviceslist').html('<tr><td colspan="4"><%:正在查询中...%></td></tr>');
                getOnlineList();
            });
        });
        $.sub('wifiFilter:init', function () {
            getWifiFilterInfo({}, function (res) {
                getFilterType(res);
                getAddedList(res);
                isEnable(res);
            });
        });

        $(function () {
            $.pub('addEvent');
            $.pub('wifiFilter:init');
        });
    }());
</script>
<%include( "web/inc/password.js")%>
<script type="text/tmpl" id="tplManageFilterlist">
{for(var i=0, len=$data.length; i < len; i++)}
<tr>
    <td>{$data[i].mac}{if($data[i].self)}(<%:本机%>){/if}</td>
    <td class="center">
        {if(len > 1)}
            {if(!$data[i].self)}<a class="btn btn-dft btn-s del" data-mac="{$data[i].mac}"><span><%:删除%></span></a>{/if}
        {/if}
    </td>
</tr>
{/for}
</script>
<script type="text/tmpl" id="tplManageFilterForm">
<div class="form-managefilter">
    <form action="#" class="form" id="manageFilterForm">
        <div class="form-item">
            <label class="k"><%:MAC地址%></label>
            <span class="v">
                <input type="text" name="mac" id="macaddr" class="ipt-text"  maxlength="17" datatype="macaddr" reqMsg="<%:MAC地址%>">
            </span>
            <em class="t"></em>
        </div>
        <div class="form-contral">
            <button type="submit" class="btn btn-primary btn-l"><span><%:保存%></span></button>
        </div>
    </form>
<div>
</script>
<script>
(function(){
    var selfMac = '<%=mac%>'.toUpperCase();
    var lanType = '<%=lanType%>';
    var switchbtn = $('#managefilterswitch');
    var listcont = $('#manageFilterList');
    var addBtn = $('#manageFilterAdd');
    var tpl = $('#tplManageFilterlist');
    var apiOpt = '<%=luci.dispatcher.build_url("api", "misystem", "web_access_opt")%>';
    var apiGet = '<%=luci.dispatcher.build_url("api", "misystem", "web_access_info")%>';

    function getInfo(){
        $.get(apiGet, function(rsp){
            rsp = $.parseJSON(rsp);
            if (rsp.code === 0 ) {
                if (rsp.open) {
                    switchbtn[0].className = 'btn-switch btn-switch-on';
                    var data = [];
                    for (var i = 0; i < rsp.list.length; i++) {
                        var tmp = {};
                        var mac = rsp.list[i].toUpperCase();
                        tmp.mac = mac;
                        tmp.self = mac === selfMac;
                        data.push(tmp);
                    };
                    listcont.html( tpl.html().tmpl({data: data}) );
                    $('#manageFilterBody .isoff').hide();
                    $('#manageFilterBody .ison').show();
                } else {
                    switchbtn[0].className = 'btn-switch btn-switch-off';
                    $('#manageFilterBody .isoff').show();
                    $('#manageFilterBody .ison').hide();
                }
            }
        });
    }

    switchbtn.on('click', function(e){
        e.preventDefault();
        var open = 1;
        if($(this).hasClass('btn-switch-on')){
            open = 0;
        }
        $.pub('loading:start');
        $.post(apiOpt, {open:open}, function(rsp){
            rsp = $.parseJSON(rsp)
            if (rsp.code === 0) {
                getInfo();
                $.pub('loading:stop');
            }
        });
    });

    listcont.delegate('.del', 'click', function(e){
        $.pub('loading:start');
        e.preventDefault();
        var mac = $(this).attr('data-mac');
        $.post(apiOpt, {open:1, opt: 1, mac: mac}, function(rsp){
            rsp = $.parseJSON(rsp)
            if (rsp.code === 0) {
                getInfo();
                $.pub('loading:stop');
            }
        });
    });

    addBtn.on('click', function(e){
        e.preventDefault();
        $.dialog({
            title: '<%:通过MAC地址添加设备%>',
            content: $('#tplManageFilterForm').html(),
            lock: true
        });
        setTimeout(function(){
            $.formInit('.form-managefilter');
        }, 10);
    });

    $('body').delegate('#manageFilterForm', 'submit', function(e){
        e.preventDefault();
        var formName = this.name;
        var validator = Valid.checkAll( this );
        if ( validator ) {
            var params = {mac: $('#macaddr').val(), open: 1, opt: 0};
            $.pub('loading:start');
            $.post(apiOpt, params, function(rsp){
                rsp = $.parseJSON(rsp);
                if (rsp.code === 0) {
                    window.self.location.reload(true);
                }
            });
        }
    });

    getInfo();
}());

</script>
</body>
</html>