linkpi_firmware_history/rootfs/link/web/remotelp.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>&nbsp;<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">&times;</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">&times;</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" );
?>