713 lines
		
	
	
		
			30 KiB
		
	
	
	
		
			PHP
		
	
	
	
			
		
		
	
	
			713 lines
		
	
	
		
			30 KiB
		
	
	
	
		
			PHP
		
	
	
	
<?php
 | 
						||
include( "head.php" );
 | 
						||
?>
 | 
						||
<link href="/css/fontawesome-iconpicker.min.css" rel="stylesheet">
 | 
						||
<link href="/css/loading.css" rel="stylesheet">
 | 
						||
<div id="alert"></div>
 | 
						||
    <div class="row" id="effect">
 | 
						||
        <div class="col-md-5 col-md-offset-1">
 | 
						||
            <div class="panel panel-default">
 | 
						||
                <div class="title">
 | 
						||
                    <h3 class="panel-title">
 | 
						||
                        <cn>按键管理</cn>
 | 
						||
                        <en>Controler manager</en>
 | 
						||
                    </h3>
 | 
						||
                </div>
 | 
						||
                <div class="panel-body">
 | 
						||
                    <form class="form-horizontal" role="form">
 | 
						||
                        <div class="form-group">
 | 
						||
                            <div class="row">
 | 
						||
                                <div class="col-md-3 col-sm-3 col-md-offset-1 text-center">
 | 
						||
                                    <cn>名称</cn>
 | 
						||
                                    <en>Name</en>
 | 
						||
                                </div>
 | 
						||
                                <div class="col-md-3 col-sm-3 text-center">
 | 
						||
                                    <cn>图标</cn>
 | 
						||
                                    <en>Icon</en>
 | 
						||
                                </div>
 | 
						||
                                <div class="col-md-3 col-sm-3 text-center">
 | 
						||
                                    <cn>操作</cn>
 | 
						||
                                    <en>Operate</en>
 | 
						||
                                </div>
 | 
						||
                            </div>
 | 
						||
                        </div>
 | 
						||
                        <hr style="margin-top:10px; margin-bottom: 10px;"/>
 | 
						||
                        <div id="remoteBtns" class="form-group"></div>
 | 
						||
                        <hr style="margin-top:10px; margin-bottom: 10px;"/>
 | 
						||
 | 
						||
                        <div class="form-group">
 | 
						||
                            <div class="row">
 | 
						||
                                <div class="col-md-7">
 | 
						||
                                    <div class="text-right">
 | 
						||
                                        <button type="button" class="btn btn-warning text-center" id="addRemote" style="outline: none;width: 112px;height: 34px" >
 | 
						||
                                            <div class="fa" style="font-weight: bold;font-size: 15px;">
 | 
						||
                                                <cn>添加按键</cn>
 | 
						||
                                                <en>Add</en>
 | 
						||
                                            </div>
 | 
						||
                                            <div class="sp sp-circle hide"></div>
 | 
						||
                                        </button>
 | 
						||
                                    </div>
 | 
						||
                                </div>
 | 
						||
                                <div class="col-md-5" style="padding: 0">
 | 
						||
                                    <div class="row">
 | 
						||
                                        <div class="col-md-12">
 | 
						||
                                            <div class="text-left" style="margin-top: 20px;color: #cccccc">
 | 
						||
                                                <small id="addHint" class="hide" style="button:0">
 | 
						||
                                                    <cn>按键识别中...</cn>
 | 
						||
                                                    <en>Will be recognition...</en>
 | 
						||
                                                </small>
 | 
						||
                                            </div>
 | 
						||
                                        </div>
 | 
						||
                                    </div>
 | 
						||
                                </div>
 | 
						||
                            </div>
 | 
						||
 | 
						||
                        </div>
 | 
						||
                    </form>
 | 
						||
                </div>
 | 
						||
            </div>
 | 
						||
        </div>
 | 
						||
        <div class="col-md-6">
 | 
						||
            <div class="row">
 | 
						||
                <div class="col-md-12">
 | 
						||
                    <div class="panel panel-default">
 | 
						||
                        <div class="title">
 | 
						||
                            <h3 class="panel-title">
 | 
						||
                                <cn>方案管理</cn>
 | 
						||
                                <en>Project manager</en>
 | 
						||
                            </h3>
 | 
						||
                        </div>
 | 
						||
                        <div class="panel-body">
 | 
						||
                            <form class="form-horizontal" role="form">
 | 
						||
                                <div class="form-group">
 | 
						||
                                    <label class="col-md-3 col-sm-3 control-label">
 | 
						||
                                        <cn>按键方案</cn>
 | 
						||
                                        <en>Projects</en>
 | 
						||
                                    </label>
 | 
						||
                                    <div class="col-md-6 col-sm-6">
 | 
						||
                                        <cn>
 | 
						||
                                            <select id="projectsCH" class="form-control"></select>
 | 
						||
                                        </cn>
 | 
						||
                                        <en>
 | 
						||
                                            <select id="projectsEN" class="form-control"></select>
 | 
						||
                                        </en>
 | 
						||
                                    </div>
 | 
						||
                                    <div class="col-md-3 col-sm-3">
 | 
						||
                                        <div id="setProject" class="btn btn-warning">
 | 
						||
                                            <cn>启用</cn>
 | 
						||
                                            <en>Use</en>
 | 
						||
                                        </div>
 | 
						||
                                    </div>
 | 
						||
                                </div>
 | 
						||
                            </form>
 | 
						||
                        </div>
 | 
						||
                    </div>
 | 
						||
                </div>
 | 
						||
            </div>
 | 
						||
 | 
						||
            <div class="row">
 | 
						||
                <div class="col-md-12">
 | 
						||
                    <div class="panel panel-default">
 | 
						||
                        <div class="title">
 | 
						||
                            <h3 class="panel-title">
 | 
						||
                                <cn>功能设置</cn>
 | 
						||
                                <en>Feature setting</en>
 | 
						||
                            </h3>
 | 
						||
                        </div>
 | 
						||
                        <div class="panel-body">
 | 
						||
                            <form class="form-horizontal" role="form">
 | 
						||
                                <div class="form-group">
 | 
						||
                                    <div class="row">
 | 
						||
                                        <div class="col-md-3 col-sm-3 col-md-offset-1 text-center">
 | 
						||
                                            <cn>按键</cn>
 | 
						||
                                            <en>Button</en>
 | 
						||
                                        </div>
 | 
						||
                                        <div class="col-md-3 col-sm-3 text-center">
 | 
						||
                                            <cn>短按</cn>
 | 
						||
                                            <en>Short Press</en>
 | 
						||
                                        </div>
 | 
						||
                                        <div class="col-md-3 col-sm-3 text-center">
 | 
						||
                                            <cn>长按</cn>
 | 
						||
                                            <en>Long Press</en> <span style="font-size: 6px;color: grey;">[>3s]</span></div>
 | 
						||
                                    </div>
 | 
						||
                                </div>
 | 
						||
                                <hr style="margin-top:10px; margin-bottom: 10px;"/>
 | 
						||
                                <div id="featureItem" class="form-group"></div>
 | 
						||
                                <hr style="margin-top:10px; margin-bottom: 10px;"/>
 | 
						||
                                <div class="form-group">
 | 
						||
                                    <div class="text-center">
 | 
						||
                                        <button type="button" id="saveProject" class="btn btn-warning col-xs-4 col-xs-offset-4 col-md-2 col-md-offset-5">
 | 
						||
                                            <cn>保存</cn>
 | 
						||
                                            <en>Save</en>
 | 
						||
                                        </button>
 | 
						||
                                    </div>
 | 
						||
                                </div>
 | 
						||
                            </form>
 | 
						||
                        </div>
 | 
						||
                    </div>
 | 
						||
                </div>
 | 
						||
            </div>
 | 
						||
        </div>
 | 
						||
    </div>
 | 
						||
 | 
						||
 | 
						||
<div class="modal fade bs-example-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
 | 
						||
    <div class="modal-dialog" role="document" style="width: 20%">
 | 
						||
        <div class="modal-content">
 | 
						||
            <div class="modal-header">
 | 
						||
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
 | 
						||
                <h4 class="modal-title">
 | 
						||
                    <cn>识别到新的按键</cn>
 | 
						||
                    <en>Recognize the new button</en>
 | 
						||
                </h4>
 | 
						||
            </div>
 | 
						||
            <div class="modal-body">
 | 
						||
                <div class="row">
 | 
						||
                    <div class="col-md-7" style="line-height: 34px;font-size: 14px">
 | 
						||
                        <span>
 | 
						||
                            <cn>选择一个按键图标:</cn>
 | 
						||
                            <en>Select a button icon:</en>
 | 
						||
                        </span>
 | 
						||
                    </div>
 | 
						||
                    <div class="col-md-5">
 | 
						||
                        <div class="btn-group">
 | 
						||
                            <button type="button" class="btn iconpicker-component" ><i id="icon" class="fa fa-power-off"></i></button>
 | 
						||
                            <button type="button" class="icp icp-dd btn dropdown-toggle" data-selected="fa-car" data-toggle="dropdown">
 | 
						||
                                <i class="fa fa-angle-double-down"></i>
 | 
						||
                            </button>
 | 
						||
                            <div class="dropdown-menu"></div>
 | 
						||
                        </div>
 | 
						||
                    </div>
 | 
						||
                </div>
 | 
						||
            </div>
 | 
						||
            <div class="modal-footer">
 | 
						||
                <button type="button" class="btn btn-warning" data-dismiss="modal">
 | 
						||
                    <cn>取消</cn>
 | 
						||
                    <en>Cancel</en>
 | 
						||
                </button>
 | 
						||
                <button type="button" class="btn btn-warning" onclick="onNewRemoteBtn()">
 | 
						||
                    <cn>确定</cn>
 | 
						||
                    <en>OK</en>
 | 
						||
                </button>
 | 
						||
            </div>
 | 
						||
        </div>
 | 
						||
    </div>
 | 
						||
</div>
 | 
						||
 | 
						||
<div class="modal fade bs-example-modal-sm" id="infoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
 | 
						||
    <div class="modal-dialog" role="document" style="width: 20%">
 | 
						||
        <div class="modal-content">
 | 
						||
            <div class="modal-header">
 | 
						||
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
 | 
						||
                <h4 class="modal-title">
 | 
						||
                    <cn>提示</cn>
 | 
						||
                    <en>Info</en>
 | 
						||
                </h4>
 | 
						||
            </div>
 | 
						||
            <div class="modal-body">
 | 
						||
                <div class="row">
 | 
						||
                    <div class="col-md-7" style="line-height: 34px;font-size: 14px">
 | 
						||
                        <span>
 | 
						||
                            <cn>确认删除?</cn>
 | 
						||
                            <en>Confirm deletion?</en>
 | 
						||
                        </span>
 | 
						||
                    </div>
 | 
						||
                </div>
 | 
						||
            </div>
 | 
						||
            <div class="modal-footer">
 | 
						||
                <button type="button" class="btn btn-warning" data-dismiss="modal">
 | 
						||
                    <cn>取消</cn>
 | 
						||
                    <en>Cancel</en>
 | 
						||
                </button>
 | 
						||
                <button type="button" class="btn btn-warning" onclick="onDelRemoteBtn()">
 | 
						||
                    <cn>确定</cn>
 | 
						||
                    <en>OK</en>
 | 
						||
                </button>
 | 
						||
            </div>
 | 
						||
        </div>
 | 
						||
    </div>
 | 
						||
</div>
 | 
						||
 | 
						||
<script src="./js/fontawesome-iconpicker.min.js"></script>
 | 
						||
<script src="./js/handlebars-v4.7.6.js"></script>
 | 
						||
<!--按键管理模板-->
 | 
						||
<script id="tpl" type="text/x-handlebars-template">
 | 
						||
    {{#each this}}
 | 
						||
    <div class="row">
 | 
						||
        <div class="col-md-9 col-md-offset-1">
 | 
						||
            {{#handleHr @index 10}} {{/handleHr}}
 | 
						||
        </div>
 | 
						||
    </div>
 | 
						||
    <div class="row">
 | 
						||
        <div class="col-md-3 col-sm-3 col-md-offset-1 text-center" style="line-height: 22px">
 | 
						||
            <span>
 | 
						||
                <cn>{{btnNameCN}}</cn>
 | 
						||
                <en>{{btnNameEN}}</en>
 | 
						||
            </span>
 | 
						||
        </div>
 | 
						||
        <div class="col-md-3 col-sm-3 text-center" style="font-size: 20px;line-height: 22px">
 | 
						||
            {{#showIcon icon}} {{/showIcon}}
 | 
						||
        </div>
 | 
						||
        <div class="col-md-3 col-sm-3 text-center" style="line-height: 22px;cursor: pointer">
 | 
						||
            <a onclick="deleteBtn({{btnId}})">
 | 
						||
                <cn>删除</cn>
 | 
						||
                <en>delete</en>
 | 
						||
            </a>
 | 
						||
        </div>
 | 
						||
    </div>
 | 
						||
    {{/each}}
 | 
						||
</script>
 | 
						||
<!--功能布局模板-->
 | 
						||
<script id="tpl1" type="text/x-handlebars-template">
 | 
						||
    {{#each this}}
 | 
						||
    <div class="row">
 | 
						||
        <div class="col-md-9 col-md-offset-1">
 | 
						||
            {{#handleHr @index 8}} {{/handleHr}}
 | 
						||
        </div>
 | 
						||
    </div>
 | 
						||
    <div class="row">
 | 
						||
        <div class="col-md-3 col-sm-3 col-md-offset-1 text-center" style="font-size: 18px;line-height: 18px">
 | 
						||
            {{#showIcon icon}} {{/showIcon}}
 | 
						||
        </div>
 | 
						||
        <div class="col-md-3 col-sm-3 text-center" style="font-size: 18px;line-height: 18px">
 | 
						||
            {{#handleDrop @index 2 icon tapCH tapEN "tap"}} {{/handleDrop}}
 | 
						||
        </div>
 | 
						||
        <div class="col-md-3 col-sm-3 text-center" style="font-size: 18px;line-height: 18px">
 | 
						||
            {{#handleDrop @index 3 icon pressCH pressEN "press"}} {{/handleDrop}}
 | 
						||
        </div>
 | 
						||
    </div>
 | 
						||
    {{/each}}
 | 
						||
</script>
 | 
						||
<!--选择按键功能模板-->
 | 
						||
<script id="tpl2" type="text/x-handlebars-template">
 | 
						||
    <div class="dropup">
 | 
						||
        <button type="button" class="dropdown-toggle"  style="font-size:10px;outline: none;border: none;width: 140px;height: 25px;background: white" id="{{menuId}}" data-toggle="dropdown">
 | 
						||
            <cn>{{ch}}</cn>
 | 
						||
            <en>{{en}}</en>
 | 
						||
            <span class="caret"></span>
 | 
						||
        </button>
 | 
						||
        <div class="dropdown-menu" style="width: 550px;padding:20px 0px 10px 20px">
 | 
						||
            <div class="row">
 | 
						||
                <div class="col-md-4">
 | 
						||
                    <ul>
 | 
						||
                        {{#each mods1}}
 | 
						||
                            <li class="dropdown-header">
 | 
						||
                                <cn>{{titleCH}}</cn>
 | 
						||
                                <en>{{titleEN}}</en>
 | 
						||
                            </li>
 | 
						||
                                {{#each func}}
 | 
						||
                                    <li><a style="cursor: pointer;font-size: 12px;" onclick="setDropVal('{{../../menuId}}','{{ch}}','{{en}}','{{../../icon}}','{{../../type}}')">
 | 
						||
                                            <cn>{{ch}}</cn>
 | 
						||
                                            <en>{{en}}</en>
 | 
						||
                                        </a>
 | 
						||
                                    </li>
 | 
						||
                                {{/each}}
 | 
						||
                            <li class="divider"></li>
 | 
						||
                        {{/each}}
 | 
						||
                    </ul>
 | 
						||
                </div>
 | 
						||
                <div class="col-md-4">
 | 
						||
                    <ul>
 | 
						||
                        {{#each mods2}}
 | 
						||
                            <li class="dropdown-header">
 | 
						||
                                <cn>{{titleCH}}</cn>
 | 
						||
                                <en>{{titleEN}}</en>
 | 
						||
                            </li>
 | 
						||
                            {{#each func}}
 | 
						||
                                <li><a style="cursor: pointer;font-size: 12px;" onclick="setDropVal('{{../../menuId}}','{{ch}}','{{en}}','{{../../icon}}','{{../../type}}')">
 | 
						||
                                        <cn>{{ch}}</cn>
 | 
						||
                                        <en>{{en}}</en>
 | 
						||
                                    </a>
 | 
						||
                                </li>
 | 
						||
                            {{/each}}
 | 
						||
                            <li class="divider"></li>
 | 
						||
                        {{/each}}
 | 
						||
                    </ul>
 | 
						||
                </div>
 | 
						||
                <div class="col-md-4">
 | 
						||
                    <ul>
 | 
						||
                        {{#each mods3}}
 | 
						||
                        <li class="dropdown-header">
 | 
						||
                            <cn>{{titleCH}}</cn>
 | 
						||
                            <en>{{titleEN}}</en>
 | 
						||
                        </li>
 | 
						||
                        {{#each func}}
 | 
						||
                        <li><a style="cursor: pointer;font-size: 12px;" onclick="setDropVal('{{../../menuId}}','{{ch}}','{{en}}','{{../../icon}}','{{../../type}}')">
 | 
						||
                                <cn>{{ch}}</cn>
 | 
						||
                                <en>{{en}}</en>
 | 
						||
                            </a>
 | 
						||
                        </li>
 | 
						||
                        {{/each}}
 | 
						||
                        <li class="divider"></li>
 | 
						||
                        {{/each}}
 | 
						||
                    </ul>
 | 
						||
                </div>
 | 
						||
            </div>
 | 
						||
        </div>
 | 
						||
    </div>
 | 
						||
</script>
 | 
						||
 | 
						||
<script>
 | 
						||
 | 
						||
    var iconMap = {"my-ok":"ok", "my-9":"9", "my-8":"8", "my-7":"7", "my-6":"6", "my-5":"5", "my-4":"4", "my-3":"3", "my-2":"2", "my-1":"1", "my-0":"0",}
 | 
						||
    var iconArray = ['fa-power-off','fa-bars','fa-caret-up', 'fa-caret-left','fa-caret-right','fa-caret-down', 'fa-volume-down','fa-volume-up','fa-home','fa-clone', 'fa-reply','my-ok','my-0','my-1','my-2','my-3','my-4', 'my-5','my-6','my-7','my-8','my-9']
 | 
						||
    var iconSelect = "fa-power-off";
 | 
						||
    var remoteCode = "";
 | 
						||
    var wsocket = null;
 | 
						||
    var btnArray = [];
 | 
						||
    var delBtnId = -1;
 | 
						||
    var features = null;
 | 
						||
    var feaArray = [];
 | 
						||
 | 
						||
    //注册helper
 | 
						||
    Handlebars.registerHelper("showIcon",function (value,options) {
 | 
						||
        var html = "";
 | 
						||
        if(value.match(/^fa-/)){
 | 
						||
            html = '<i class="fa '+value+'"></i>'
 | 
						||
        } else {
 | 
						||
            html = '<span style="font-weight: bold">'+iconMap[value]+'</span>'
 | 
						||
        }
 | 
						||
        return html;
 | 
						||
    })
 | 
						||
 | 
						||
    //注册helper
 | 
						||
    Handlebars.registerHelper("handleHr",function (value,hh,options) {
 | 
						||
        var html = "";
 | 
						||
        if(value !== 0){
 | 
						||
            html = "<hr style=\"margin-top:"+hh+"px; margin-bottom: "+hh+"px;\"/>";
 | 
						||
        }
 | 
						||
        return html;
 | 
						||
    })
 | 
						||
 | 
						||
    //注册helper
 | 
						||
    Handlebars.registerHelper("handleDrop",function (index,num,icon,ch,en,type,options) {
 | 
						||
        var nn = (index+1)*num;
 | 
						||
        features["ch"] = ch;
 | 
						||
        features["en"] = en;
 | 
						||
        features["menuId"] = "menu_"+icon+nn;
 | 
						||
        features["type"] = type;
 | 
						||
        features["icon"] = icon;
 | 
						||
        var tpl = $("#tpl2").html();
 | 
						||
        var template = Handlebars.compile(tpl);
 | 
						||
        var html = template(features);
 | 
						||
        return html;
 | 
						||
    })
 | 
						||
 | 
						||
    function setDropVal(id,valCH,valEN,icon,type){
 | 
						||
        var html = "<cn>"+valCH+"</cn><en>"+valEN+"</en><span class='caret'></span>";
 | 
						||
        $("#"+id).html(html);
 | 
						||
        for(var i=0;i<feaArray.length;i++){
 | 
						||
            var config = feaArray[i];
 | 
						||
            if(config["used"]){
 | 
						||
                var btns = config["btns"];
 | 
						||
                for(var j=0;j<btns.length;j++){
 | 
						||
                    var btn = btns[j];
 | 
						||
                    if(btn["icon"] == icon){
 | 
						||
                        if(type == "tap"){
 | 
						||
                            btn["tapCH"] = valCH;
 | 
						||
                            btn["tapEN"] = valEN;
 | 
						||
                        }
 | 
						||
                        if(type == "press"){
 | 
						||
                            btn["pressCH"] = valCH;
 | 
						||
                            btn["pressEN"] = valEN;
 | 
						||
                        }
 | 
						||
                    }
 | 
						||
                }
 | 
						||
            }
 | 
						||
        }
 | 
						||
    }
 | 
						||
 | 
						||
    // Modal垂直居中
 | 
						||
    $("#myModal,#infoModal").on('show.bs.modal', function(){
 | 
						||
        var $this = $(this);
 | 
						||
        var $modal_dialog = $this.find('.modal-dialog');
 | 
						||
        // 关键代码,如没将modal设置为 block,则$modala_dialog.height() 为零
 | 
						||
        $this.css('display', 'block');
 | 
						||
        $modal_dialog.css({'margin-top': Math.max(0, ($(window).height() - $modal_dialog.height()) / 2) });
 | 
						||
    });
 | 
						||
 | 
						||
    // Modal关闭
 | 
						||
    $("#myModal").on('hide.bs.modal', function(){
 | 
						||
        $("#addRemote").find(".fa").removeClass("hide");
 | 
						||
        $("#addRemote").find(".sp").addClass("hide");
 | 
						||
        $("#addHint").addClass("hide");
 | 
						||
        wsocket.close();
 | 
						||
    });
 | 
						||
 | 
						||
    // 初始化websocket
 | 
						||
    function initWSocket() {
 | 
						||
        var wsuri = 'ws://' + location.hostname + '/api/remote/socket.io' // ws地址
 | 
						||
        wsocket = new WebSocket(wsuri)
 | 
						||
        wsocket.onopen = function () {
 | 
						||
            wsocket.send('bind')
 | 
						||
        };
 | 
						||
        wsocket.onmessage = function (msg) {
 | 
						||
            var data = JSON.parse(msg.data);
 | 
						||
            if(data.state === 0)
 | 
						||
                return;
 | 
						||
            remoteCode = data["high"]+data["low"];
 | 
						||
            var mark = false;
 | 
						||
            for(var i=0;i<btnArray.length;i++){
 | 
						||
                var btn = btnArray[i];
 | 
						||
                if(btn["remoteCode"] === remoteCode)
 | 
						||
                    mark = true;
 | 
						||
            }
 | 
						||
            if(mark) {
 | 
						||
                htmlAlert("#alert", "danger", "<cn>重复按键,请重试!</cn><en>Repeat the key, Please try again!</en>", "", 3000);
 | 
						||
                return;
 | 
						||
            }
 | 
						||
            $('#myModal').modal({
 | 
						||
                keyboard: false,
 | 
						||
                show: true,
 | 
						||
                backdrop: "static"
 | 
						||
            });
 | 
						||
        };
 | 
						||
        wsocket.onerror = function () {
 | 
						||
            $("#addRemote").find(".fa").removeClass("hide");
 | 
						||
            $("#addRemote").find(".sp").addClass("hide");
 | 
						||
            $("#addHint").addClass("hide");
 | 
						||
        };
 | 
						||
        wsocket.onclose = function () {
 | 
						||
            $("#addRemote").find(".fa").removeClass("hide");
 | 
						||
            $("#addRemote").find(".sp").addClass("hide");
 | 
						||
            $("#addHint").addClass("hide");
 | 
						||
        };
 | 
						||
    }
 | 
						||
 | 
						||
    function initRemoteBtns() {
 | 
						||
        var theme_tpl = $("#tpl").html();
 | 
						||
        var template = Handlebars.compile(theme_tpl);
 | 
						||
        var html = template(btnArray);
 | 
						||
        $("#remoteBtns").html(html);
 | 
						||
    }
 | 
						||
 | 
						||
    function initFeatures() {
 | 
						||
        for(var i=0;i<feaArray.length;i++){
 | 
						||
            var config = feaArray[i];
 | 
						||
            if(config["used"]){
 | 
						||
                var tpl1 = $("#tpl1").html();
 | 
						||
                var tem = Handlebars.compile(tpl1);
 | 
						||
                var ht = tem(config["btns"]);
 | 
						||
                $("#featureItem").html(ht);
 | 
						||
            }
 | 
						||
        }
 | 
						||
    }
 | 
						||
 | 
						||
    function deleteBtn(btnId) {
 | 
						||
        delBtnId = btnId;
 | 
						||
        $("#infoModal").modal({
 | 
						||
            keyboard: false,
 | 
						||
            show: true,
 | 
						||
            backdrop: "static"
 | 
						||
        });
 | 
						||
    }
 | 
						||
    function onDelRemoteBtn() {
 | 
						||
        var index = -1;
 | 
						||
        for(var i=0;i<btnArray.length;i++){
 | 
						||
            var btn = btnArray[i];
 | 
						||
            if(btn["btnId"] === delBtnId){
 | 
						||
                index = i;
 | 
						||
            }
 | 
						||
        }
 | 
						||
        btnArray.splice(index,1);
 | 
						||
        for(var i=0;i<btnArray.length;i++){
 | 
						||
            btnArray[i].btnNameCN = "按键"+(i+1);
 | 
						||
            btnArray[i].btnNameEN = "Button"+(i+1);
 | 
						||
        }
 | 
						||
        func("saveConfigFile",{path: "/config/misc/remote/remote.json",data: JSON.stringify(btnArray,null,2)},function (res) {
 | 
						||
            if(res["result"] === "OK"){
 | 
						||
                initRemoteBtns();
 | 
						||
                $('#infoModal').modal("hide");
 | 
						||
                for(var i=0;i<feaArray.length;i++){
 | 
						||
                    var config = feaArray[i];
 | 
						||
                    config["btns"].splice(index,1);
 | 
						||
                }
 | 
						||
                func("saveConfigFile",{path: "/config/misc/remote/remfea.json",data: JSON.stringify(feaArray,null,2)},function (res) {
 | 
						||
                    if(res["result"] === "OK")
 | 
						||
                        initFeatures();
 | 
						||
                })
 | 
						||
            }
 | 
						||
        })
 | 
						||
    }
 | 
						||
    function onNewRemoteBtn() {
 | 
						||
        var count = btnArray.length;
 | 
						||
        var obj = {
 | 
						||
            btnId:(count+1),
 | 
						||
            remoteCode:remoteCode,
 | 
						||
            btnNameCN:"按键 "+(count+1),
 | 
						||
            btnNameEN:"Button "+(count+1),
 | 
						||
            icon:iconSelect,
 | 
						||
        }
 | 
						||
        btnArray.push(obj);
 | 
						||
        func("saveConfigFile",{path: "/config/misc/remote/remote.json",data: JSON.stringify(btnArray,null,2)},function (res) {
 | 
						||
            if(res["result"] === "OK"){
 | 
						||
                initRemoteBtns();
 | 
						||
                $('#myModal').modal("hide");
 | 
						||
                for(var i=0;i<feaArray.length;i++){
 | 
						||
                    var feaObj = {
 | 
						||
                        icon: iconSelect,
 | 
						||
                        code: remoteCode,
 | 
						||
                        tapCH:"未启用",
 | 
						||
                        tapEN:"None",
 | 
						||
                        pressCH:"未启用",
 | 
						||
                        pressEN:"None"
 | 
						||
                    }
 | 
						||
                    var config = feaArray[i];
 | 
						||
                    config["btns"].push(feaObj);
 | 
						||
                }
 | 
						||
                func("saveConfigFile",{path: "/config/misc/remote/remfea.json",data: JSON.stringify(feaArray,null,2)},function (res) {
 | 
						||
                    if(res["result"] === "OK")
 | 
						||
                        initFeatures();
 | 
						||
                })
 | 
						||
            }
 | 
						||
        })
 | 
						||
    }
 | 
						||
 | 
						||
    $("#addRemote").click(function () {
 | 
						||
        if($(this).find(".fa").hasClass("hide")) {
 | 
						||
            $(this).find(".fa").removeClass("hide");
 | 
						||
            $(this).find(".sp").addClass("hide");
 | 
						||
            $("#addHint").addClass("hide");
 | 
						||
            wsocket.close();
 | 
						||
            return;
 | 
						||
        }
 | 
						||
        $(this).find(".fa").addClass("hide");
 | 
						||
        $(this).find(".sp").removeClass("hide");
 | 
						||
        $("#addHint").removeClass("hide");
 | 
						||
        initWSocket();
 | 
						||
 | 
						||
    });
 | 
						||
    $("#setProject").click(function () {
 | 
						||
        var id = $("#projectsCH").val();
 | 
						||
        for(var i=0;i<feaArray.length;i++){
 | 
						||
            var config = feaArray[i];
 | 
						||
            if(config["id"] === parseInt(id))
 | 
						||
                config["used"] = true;
 | 
						||
            else
 | 
						||
                config["used"] = false;
 | 
						||
        }
 | 
						||
        func("saveConfigFile",{path: "/config/misc/remote/remfea.json",data: JSON.stringify(feaArray,null,2)},function (res) {
 | 
						||
            if(res["result"] === "OK"){
 | 
						||
                rpc6("remote.updateConfig", [], function (data) {
 | 
						||
                    initFeatures();
 | 
						||
                });
 | 
						||
            }
 | 
						||
        })
 | 
						||
    });
 | 
						||
 | 
						||
    $("#projectsCH").change(function () {
 | 
						||
        var id = $("#projectsCH").val();
 | 
						||
        $("#projectsEN").val(id);
 | 
						||
    });
 | 
						||
 | 
						||
    $("#projectsEN").change(function () {
 | 
						||
        var id = $("#projectsEN").val();
 | 
						||
        $("#projectsCH").val(id);
 | 
						||
    });
 | 
						||
 | 
						||
    $("#saveProject").click(function () {
 | 
						||
        func("saveConfigFile",{path: "/config/misc/remote/remfea.json",data: JSON.stringify(feaArray,null,2)},function (res) {
 | 
						||
            if(res["result"] === "OK"){
 | 
						||
                rpc6("remote.updateConfig", [], function (data) {
 | 
						||
                    htmlAlert("#alert", "success", "<cn>保存成功!</cn><en>Save success!</en>", "", 3000);
 | 
						||
                });
 | 
						||
            }
 | 
						||
        })
 | 
						||
    });
 | 
						||
 | 
						||
    $('.btn-group>button').one("click",function(){
 | 
						||
        $('.icp-dd').iconpicker({
 | 
						||
            title: false,
 | 
						||
            icons: iconArray,
 | 
						||
            emptyIconValue: 'none',
 | 
						||
        });
 | 
						||
    }) ;
 | 
						||
 | 
						||
    $('.icp-dd').on('iconpickerCreated', function(event){
 | 
						||
        for(var i=0;i<iconArray.length;i++){
 | 
						||
            var icon = iconArray[i];
 | 
						||
            if(icon.match(/^my-/)){
 | 
						||
                $("."+icon).html(iconMap[icon])
 | 
						||
            }
 | 
						||
        }
 | 
						||
    });
 | 
						||
 | 
						||
    $('.icp-dd').on('iconpickerSetValue', function(event){
 | 
						||
        let cl = event.iconpickerValue;
 | 
						||
        if(cl.match(/^my-/)) {
 | 
						||
            $("#icon").html(iconMap[cl])
 | 
						||
        } else {
 | 
						||
            $("#icon").html("");
 | 
						||
        }
 | 
						||
    });
 | 
						||
 | 
						||
    $('.icp-dd').on('iconpickerSelected', function(event){
 | 
						||
        iconSelect = event.iconpickerValue;
 | 
						||
    });
 | 
						||
 | 
						||
 | 
						||
	$( function () {
 | 
						||
		navIndex( 4 );
 | 
						||
        $.ajax({url:"/config/misc/remote/remote.json",success:function(data){
 | 
						||
                btnArray = data;
 | 
						||
                initRemoteBtns();
 | 
						||
                $.ajax({url:"/config/misc/remote/remods.json",success:function(data){
 | 
						||
                        features = data;
 | 
						||
                        var mods3 = new Array();
 | 
						||
                        var func = new Array();
 | 
						||
                        var obj = {
 | 
						||
                            titleCH:"布局模块",
 | 
						||
                            titleEN:"Layout",
 | 
						||
                            func:func
 | 
						||
                        }
 | 
						||
                        mods3.push(obj);
 | 
						||
                        features["mods3"] = mods3;
 | 
						||
                        //加载自定义布局模块
 | 
						||
                        $.ajax({url:"/config/defLays.json",success:function (data) {
 | 
						||
                            //var func = new Array();
 | 
						||
                            for(var i=0;i<data.length;i++){
 | 
						||
                                var mark = false;
 | 
						||
                                var layouts = data[i].layouts;
 | 
						||
                                for(var j=0;j<layouts.length;j++) {
 | 
						||
                                    var id = layouts[j].id;
 | 
						||
                                    if(parseInt(id) >= 0){
 | 
						||
                                        mark = true;
 | 
						||
                                        break;
 | 
						||
                                    }
 | 
						||
                                }
 | 
						||
                                if(mark){
 | 
						||
                                    var lay = {
 | 
						||
                                        ch:data[i].layName,
 | 
						||
                                        en:data[i].layNameEn
 | 
						||
                                    }
 | 
						||
                                    func.push(lay);
 | 
						||
                                }
 | 
						||
                            }
 | 
						||
                        }})
 | 
						||
 | 
						||
                        $.ajax({url:"/config/misc/remote/remfea.json",success:function(data){
 | 
						||
                                feaArray = data;
 | 
						||
                                initFeatures();
 | 
						||
                                for(var i=0;i<feaArray.length;i++){
 | 
						||
                                    var config = feaArray[i];
 | 
						||
                                    var optionCH = new Option(config["nameCH"],config["id"]);
 | 
						||
                                    if(config["used"])
 | 
						||
                                        optionCH.selected = true;
 | 
						||
                                    $("#projectsCH").append(optionCH);
 | 
						||
 | 
						||
                                    var optionEN = new Option(config["nameEN"],config["id"]);
 | 
						||
                                    if(config["used"])
 | 
						||
                                        optionEN.selected = true;
 | 
						||
                                    $("#projectsEN").append(optionEN);
 | 
						||
                                }
 | 
						||
                            }
 | 
						||
                        });
 | 
						||
                    }
 | 
						||
                });
 | 
						||
            }
 | 
						||
        });
 | 
						||
	});
 | 
						||
</script>
 | 
						||
<?php
 | 
						||
include( "foot.php" );
 | 
						||
?>
 |