FCC/Framework/Edge.WebHost/Views/Home/Configure.cshtml

@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@using Edge.Core.Processor.Dispatcher;
@model IEnumerable<ProcessorMetaDescriptor>;
@{
    Layout = null;
}
@*<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
    <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
    <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
    <script src="https://cdn.jsdelivr.net/npm/@@json-editor/json-editor@latest/dist/jsoneditor.min.js"></script>*@
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/lib/spectre/spectre.css" />
<link rel="stylesheet" href="~/lib/spectre/spectre-exp.css" />
<link rel="stylesheet" href="~/lib/spectre/spectre-icons.css" />
<link rel="stylesheet" href="~/lib/spectre/spectre-icons.css" />
<link rel="stylesheet" href="~/css/configure.css" />
<script src="~/js/jsoneditor.js"></script>
<script src="~/js/jquery-3.4.1.min.js"></script>
<script src="~/js/jquery-ui.js"></script>
<style type="text/css">
    a:hover {
        background: rgba(0, 148, 255, 0.37);
        color: white;
    }

    ul {
        list-style-type: none;
    }

    li {
        float: left;
        margin-right: 1%;
    }

    a {
        padding: 2px;
    }

    ::-webkit-scrollbar {
        display: none;
    }

    .tab {
        overflow: hidden;
        /*border: 1px solid #ccc;*/
        background-color: #f1f1f1;
    }

        .tab button {
            background-color: inherit;
            float: left;
            border: none;
            outline: none;
            cursor: pointer;
            padding: 14px 16px;
            transition: 0.3s;
            font-size: 17px;
            background: linear-gradient(-110deg, transparent 15px, #ddd 0);
        }
            /*Change background color of buttons on hover*/
            .tab button:hover {
                /*background-color: #ddd;*/
                background: linear-gradient(-110deg, transparent 15px, aliceblue 0);
            }
            /*Create an active/current tablink class*/
            .tab button.active {
                /*background-color: aliceblue;*/
                background: linear-gradient(-110deg, transparent 15px, aliceblue 0);
            }
</style>
@* main view of the configuration*@
<div id="config_main" style="position:absolute;height:100%;width:100%;">
    <div id="config_header" style="position: relative; height: 6%; width: 100%;top:0px; border-bottom: double;">
        <ul id="tags" style="list-style: none; margin: 0; padding: 0;width:90%;">
            <li style="float:left;">
                <a asp-controller="Home" asp-action="Index">Home</a>
            </li>
            <li style="float:left;">
                |
            </li>
            @*<li id="li_all" name="tag" onclick="tagClick(this)"><a id="a_all">|</a></li>*@
        </ul>
        <input id="btn_restart" class="btn" type="button" value="Restart" onclick="ReloadProcessors(this.id)" style="position:absolute;right:1%;bottom:10%; border-left:dashed;border-right:none;border-bottom:none;border-top:none;" />
        <input id="btn_pre" class="btn" type="button" value="<<" onclick="previous(this.id)" style="position:absolute;right:8.5%;bottom:10%;border:none;" />
        <input id="btn_next" class="btn" type="button" value=">>" onclick="next(this.id)" style="position:absolute;right:6%;bottom:10%;border:none;" />
        @*<ul>
            <li class="nav-item" style="float:left;">
                <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
            </li>
            <li class="nav-item" style="float:left;">
                <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="WebApi">Web API</a>
            </li>
            <li class="nav-item" style="float:left;">
                <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="MqttApi">Mqtt API</a>
            </li>
            <li class="nav-item" style="float:left;">
                <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="ProcessorMetaDescriptor">ProcessorMetaDescriptor</a>
            </li>
            <li class="nav-item" style="float:left;">
                <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Configure">Configure</a>
            </li>
        </ul>*@
    </div>
    <div id="page_body" style="position:relative;float:left;height:94%;width:100%;">
        <div id="processor_test_result_dialog" style="top: 130px;height: 20%; width: 60%;background-color:lightpink">
            <div id="processor_test_result_dialog_text"></div>
        </div>
        <div id="config_nav" style="position:relative;float:left;height:100%;width:16%;border-right:double;">
            <div style="border-bottom-style: double; height: 40%;overflow-y:auto;">
                <span style="background-color: bisque;width: 100%;">驅動(Drivers):</span>
                <ul id="config_nav_ul_device_processor" style="width: 90%; height: 100%; margin-top: 0px; margin-left: 5px;">
                    @*@for (var i = 0; i < Model.Count(); i++)
                        {
                            var typeStr = Model.ToArray()[i].SourceEndpointFullTypeStr.Split(",")[1];
                            <li id="processor_@i" name ="processor" style="width:100%;height:5%;" onclick="processorSelect(this)">@typeStr.Trim()</li>
                        }*@
                </ul>
            </div>
            <div style="width: 100%; height: 60%;overflow-y:auto;">
                <span style="background-color: pink; width: 100%;">應用(Apps):</span>
                <ul id="config_nav_ul_app_processor" style="width: 90%; height: 100%; margin-top: 0px; margin-left: 5px;">
                    @*@for (var i = 0; i < Model.Count(); i++)
                        {
                            var typeStr = Model.ToArray()[i].SourceEndpointFullTypeStr.Split(",")[1];
                            <li id="processor_@i" name ="processor" style="width:100%;height:5%;" onclick="processorSelect(this)">@typeStr.Trim()</li>
                        }*@
                </ul>
            </div>
        </div>

        <div id="config_body" style="position:relative;float:left;height:100%;width:84%;background-color:aliceblue;">

            <div id="config_body_filter" style="position:relative;float:left;width:100%;height:10%;">
                <div id="config_description" style="position:relative;float:left;overflow-y:auto;height:100%;width:99%;margin-left:1%;text-align:left;font-size:1rem;font:bold;border-bottom:groove;">
                    <div id="config_description_subscribe" style="position:relative;float:left;height:50%;width:100%;"></div>
                    <div id="config_description_details" style="position:relative; float:left; height:50%;width:100%;"></div>
                </div>
                @*用来作筛选可能*@
                <input id="config_add" type="button" value="Add" onclick="add()" style="position:absolute; right:1%; bottom:5%;border:none;" />
            </div>

            <div id="config_body_editorHolder" style="position: relative; float: left; width: 99%; height: 90%; margin-left: 1%;">
                @*配置部分*@
            </div>
        </div>
    </div>
    <div class="alarmInfoWrap hide">
        <div class="wrap-dialog hide">
            <div class="dialog">
                <div class="dialog-header">
                    <span class="dialog-title"></span>
                </div>
                <div class="dialog-body">
                    <span class="dialog-message"></span>
                </div>
                <div class="dialog-footer">
                    <input type="button" class="btn" id="confirm" value="確認" />
                    <input type="button" class="btn ml50" id="cancel" value="取消" />
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    //读取到的当前数据库中的某个被选中
    var currentConfigurationFromDataBase = null;
    //当前被选中的Processor的schema
    var tempProcessor = null;

    var currentGroup = 0;
    //如果一个Group有多个metal processor descriptor的时候，一个被选中时，另一个需要被disabled
    var currentMPDDivMap = new Map();
    //用来存放某个具体的meta part descriptor配置editor
    //把processor index, group index, schemaStrs index and schema string index来构成editor map的key, 后面的schemaValue最好也是这样
    var currentSchemaStrEditorsMap = new Map();

    //存放每个editor value的map
    var schemaStrEdiorValueMap = new Map();

    //创建一个Map用来对应每个metal part schema 跟metal tab
    var metalPartTabSchemaMap = new Map();

    var tempConfig = null;

    var currentTagKey = "";
    var tempProcessors = null;

    var currenthref = window.location.href;
    var currentPath = window.location.pathname;
    var currentHP = currenthref.slice(0, currenthref.indexOf(currentPath) + 1);

    var currentPage = 0;

    function processorSelect(htmlElement) {

        console.log("processSelect");
        var editorHolder = document.getElementById("config_body_editorHolder");
        if (editorHolder === null || (htmlElement === null && tempProcessor === null)) { return; }
        clearChildHtmlElements(editorHolder);

        if (htmlElement !== null) {
            var procressorIndex = 0;
            if (Array.isArray(htmlElement.id.split("_"))) {
                procressorIndex = htmlElement.id.split("_")[1];
            }
            //var procressorIndex = htmlElement.id.slice(htmlElement.id.indexOf("_") + 1, htmlElement.id.indexOf("_") + 2);
            //var tempProcessors = JSON.parse(JSON.stringify(@Html.Raw(Json.Serialize(Model))));
            tempProcessor = tempProcessors[procressorIndex];
            updateLiBackground(htmlElement);
        }
        //if (document.getElementById("config_description")) {
        //    document.getElementById("config_description").innerText = tempProcessor.description !== null ? tempProcessor.description : tempProcessor.sourceEndpointFullTypeStr;
        //}
        //查询的config名字需要跟保存时的一样
        var requestData = new Array();
        requestData.push(tempProcessor.sourceEndpointFullTypeStr);
        var tempUrl = this.currentHP + "u/?apitype=service&an=GetProcessorMetaConfigAsync&pn=ProcessorsDispatcher&en=Edge.Core.Processor.Dispatcher.DefaultDispatcher";
        //requestData.push(tempProcessor.sourceEndpointFullTypeStr.slice(0, tempProcessor.sourceEndpointFullTypeStr.indexOf(".")));
        $.ajax({
            url: tempUrl,
            datatype: "application/json",
            type: 'post',
            contentType: "application/json;charset=utf-8;",
            data: JSON.stringify(requestData),
            beforeSend: function () {
            },
            success: function (data) {
                var tempSavedConfigured = processorsMapViaTag.has("已配置") ? processorsMapViaTag.get("已配置") : null;
                var find = -1;
                if (tempSavedConfigured !== null) {
                    tempSavedConfigured.forEach(function (p,index) {
                        if (p.sourceEndpointFullTypeStr === tempProcessor.sourceEndpointFullTypeStr) find = index;
                    });
                }
                if (data.length === 0 && find > -1) {
                    processorsMapViaTag.get("已配置").splice(find,1);
                } else if (data.length > 0 && find === -1) {
                    processorsMapViaTag.get("已配置").push(tempProcessor);
                }

                currentConfigurationFromDataBase = data;
                if (document.getElementById("config_description_subscribe")) {
                    document.getElementById("config_description_subscribe").innerHTML = tempProcessor.displayName !== null ?
                        tempProcessor.displayName + "共有" + (currentConfigurationFromDataBase === null ? "0" : currentConfigurationFromDataBase.length) + "條配置" : tempProcessor.sourceEndpointFullTypeStr;
                }
                if (document.getElementById("config_description_details"))
                    document.getElementById("config_description_details").innerHTML = tempProcessor.description;

                BuildConfigTableForCurrentProcessor(currentConfigurationFromDataBase);
                console.log("get config data successfully");
            },
            error: function (err) {
                console.log(err);
            }
        });
    }

    function updateLiBackground(htmlElement) {
        if (htmlElement === null) return;
        var lis = document.getElementsByName(htmlElement.getAttribute("name"));
        if (lis === null) { return; }
        for (var i = 0; i < lis.length; i++) {
            if (lis[i] === htmlElement) {
                lis[i].style.background = "#0026ff"//"rgba(128, 128, 128, 0.35)";
                lis[i].style.color = "white";
            } else {
                lis[i].style.background = "white";
                lis[i].style.color = "black";
            }
        }
    }
    //当左侧某个processor被选中时，从数据库中读出该类processor所有的配置信息，生成一张表，可以通过表中的链接再创建配置页面
    function BuildConfigTableForCurrentProcessor(configDatas) {
        var editorHolder = document.getElementById("config_body_editorHolder");
        if (editorHolder === null) { return; }

        var configTable = document.createElement("table");
        configTable.style = "width:100%;height:100%;border-collapse:collapse;";

        var tableHead = document.createElement("thead");
        var headr = document.createElement("tr");
        tableHead.style = "display: table;width:100%;height:10%;table-layout:fixed;font-size: 1.2rem;";
        var tableData = document.createElement("td");
        tableData.style = "width:20%;text-align: center;";
        tableData.innerText = "Name";

        var tableData1 = document.createElement("td");
        tableData1.style = "width:25%;text-align: center;";
        tableData1.innerText = "Description";

        var tableData2 = document.createElement("td");
        tableData2.style = "width:20%;text-align: center;";
        tableData2.innerText = "Type";

        var tableData3 = document.createElement("td");
        tableData3.style = "width:20%;text-align: center;";
        tableData3.innerText = "Activated";

        var tableData4 = document.createElement("td");
        tableData4.style = "width:15%;text-align: center;";
        tableData4.innerText = "Operation";

        headr.appendChild(tableData);
        headr.appendChild(tableData1);
        headr.appendChild(tableData2);
        headr.appendChild(tableData3);
        headr.appendChild(tableData4);

        tableHead.appendChild(headr);
        configTable.appendChild(tableHead);

        var tableBody = document.createElement("tbody");
        tableBody.style = "height:90%;display: block;overflow:hidden;overflow-y: auto;";
        if (configDatas.length === 0) {
            var emptyRow = document.createElement("tr");
            emptyRow.style = "display:table;width:100%;height:10%;table-layout:fixed;font-size: 1.0rem;color:gray;text-align:left;";
            emptyRow.innerText = "當前有0條配置";
            tableBody.appendChild(emptyRow);
        }
        configDatas.forEach(function (config, index) {
            var tempr = document.createElement("tr");
            tempr.style = "display: table;width:100%;height:10%;table-layout:fixed;font-size: 1.0rem;";
            var temptableData = document.createElement("td");
            temptableData.style = "width:15%;text-align: center;";
            var Name_length = config.Name.length;
            temptableData.innerText = config.Name.slice(0, 5) + "..." + config.Name.slice(Name_length-5);

            var temptableData1 = document.createElement("td");
            temptableData1.style = "width:30%;text-align: center;";
            temptableData1.innerText = config.Description;

            var temptableData2 = document.createElement("td");
            temptableData2.style = "width:20%;text-align: center;";
            temptableData2.innerText = config.Type;

            var temptableData3 = document.createElement("td");
            temptableData3.style = "width:20%;text-align: center;";
            temptableData3.innerText = config.Activated;

            var temptableData4 = document.createElement("td");
            temptableData4.style = "width:15%;text-align: center;";
            var operationLink = document.createElement("a");
            operationLink.id = index.toString()+"_" + config.Id;
            operationLink.innerHTML = "編輯";
            operationLink.onclick = function (parameter) { showJsonEditorHodler(parameter) };

            var operationTestLink = document.createElement("a");
            operationTestLink.id = index.toString() + "_" + config.Id;
            operationTestLink.style = "margin-left:5%;";
            operationTestLink.innerHTML = "測試";
            operationTestLink.onclick = function (parameter) { TestProcessorMetaConfig(parameter) };

            var operationDeleteLink = document.createElement("a");
            operationDeleteLink.id = index.toString() + "_" + config.Id;
            operationDeleteLink.style = "margin-left:5%;";
            operationDeleteLink.innerHTML = "刪除";
            operationDeleteLink.onclick = function (parameter) { RemoveProcessorMetaConfig(parameter) };

            temptableData4.appendChild(operationLink);
            temptableData4.appendChild(operationDeleteLink);
            temptableData4.appendChild(operationTestLink);

            tempr.appendChild(temptableData);
            tempr.appendChild(temptableData1);
            tempr.appendChild(temptableData2);
            tempr.appendChild(temptableData3);
            tempr.appendChild(temptableData4);

            tableBody.appendChild(tempr);
        });
        configTable.appendChild(tableBody);
        editorHolder.appendChild(configTable);
    }
    //event is a mouse event currentTarget
    function showJsonEditorHodler(event) {
        if (tempProcessor === null) {
            console.log("the processor schema is null");
            alert("The Schema is null!!!");
            return;
        }
        //test to get config string
        var linkIndex = event.currentTarget.id;
        var configId = linkIndex.slice(linkIndex.indexOf("_") + 1);
        var configIndex = linkIndex.slice(0, linkIndex.indexOf("_"));
        tempConfig = currentConfigurationFromDataBase[configIndex];

        dialogBox("编辑配置", "确认编辑" + tempConfig.Description+"配置吗？", function () {
            updateEditorHolder(tempConfig);
        }, function () {
            tempConfig = null;
        });
    }
    //test the config to see if it can works ok
    function TestProcessorMetaConfig(event) {
        if (currentConfigurationFromDataBase === null) {
            console.log("currentConfigurationFromDataBase is null");
            alert("current config from DataBase is null!!!");
            return;
        }

        //test to get config string
        var linkIndex = event.currentTarget.id;
        var configIndex = linkIndex.slice(0, linkIndex.indexOf("_"));

        tempConfig = currentConfigurationFromDataBase[configIndex];
        dialogBox("测试配置", "确认测试" + tempConfig.Description + "配置吗？", function () {
            $(".ui-dialog").find(".ui-widget-header").css("background", "yellow");
            $("#processor_test_result_dialog_text").text("Please wait a while for the testing...");
            $("#processor_test_result_dialog")
                .dialog("option", "title", "Wait...")
                .dialog("option", "width", 500)
                .dialog('open');

            var requestData = new Array();
            requestData.push(tempConfig.Name);
            requestData.push(['no use']);
            var tempUrl = this.currentHP + "u/?apitype=service&an=TestProcessorMetaConfigAsync&pn=ProcessorsDispatcher&en=Edge.Core.Processor.Dispatcher.DefaultDispatcher";
            $.ajax({
                url: tempUrl,
                datatype: "application/json",
                type: 'post',
                contentType: "application/json;charset=utf-8;",
                data: JSON.stringify(requestData),
                beforeSend: function () {
                },
                success: function (data) {
                    $("#processor_test_result_dialog").dialog('close');
                    $(".ui-dialog").find(".ui-widget-header").css("background", "lightgreen");
                    $("#processor_test_result_dialog_text").text("");
                    $("#processor_test_result_dialog")
                        .dialog("option", "title", "测试成功!!!")
                        .dialog("option", "width", 500)
                        .dialog('open');
                    console.log("测试成功");
                },
                error: function (err) {
                    $("#processor_test_result_dialog").dialog('close');
                    $(".ui-dialog").find(".ui-widget-header").css("background", "red");
                    $("#processor_test_result_dialog_text").text("" + err.responseText + "");
                    $("#processor_test_result_dialog")
                        .dialog("option", "title", "测试失败")
                        .dialog("option", "width", 900)
                        .dialog('open');
                    //$("#config_body_dialog").dialog('open');
                    //$("#config_body_dialog").html("测试失败: " + err.responseText);
                    //alert("测试失败: " + err.responseText);
                    console.log("测试失败: " + err.responseText);
                }
            });
        }, function () {
            tempConfig = null;
        });
    }

    //remove the config from DB
    function RemoveProcessorMetaConfig(event) {
        if (event.currentTarget === null || event.currentTarget.id === undefined)
            return
        var linkIndex = event.currentTarget.id;
        var configIndex = linkIndex.slice(0, linkIndex.indexOf("_"));
        tempConfig = currentConfigurationFromDataBase[configIndex];
        dialogBox("删除配置", "确认删除" + tempConfig.Description+"配置吗？", function () {
            //var linkIndex = event.currentTarget.id;
            var configId = linkIndex.slice(linkIndex.indexOf("_") + 1);
            var requestData = new Array();
            requestData.push(parseInt(configId));
            var tempUrl = this.currentHP + "u/?apitype=service&an=RemoveProcessorMetaConfigAsync&pn=ProcessorsDispatcher&en=Edge.Core.Processor.Dispatcher.DefaultDispatcher";
            $.ajax({
                url: tempUrl,
                datatype: "application/json",
                type: 'post',
                contentType: "application/json;charset=utf-8;",
                data: JSON.stringify(requestData),
                beforeSend: function () {
                },
                success: function (data) {
                    alert("success")
                    console.log("delete succuessfully");
                    processorSelect(null);
                },
                error: function (err) {
                    alert("刪除失敗：" + err.statusText + "\n" + err.responseText);
                    console.log(err);
                }
            });
        }, function () {
            tempConfig = null;
        })
    }
    function updateEditorHolder(tempConfig) {
        if (tempProcessor === null) {
            console.log("the processor schema is null");
            alert("The Schema is null!!!");
            return;
        }
        //清掉editorBody中的所有子控件
        var editorbody = document.getElementById("config_body_editorHolder");
        if (editorbody === null) { console.log("config body div is null"); return; }
        buildEditorHolder();

        //var processorMeta = JSON.parse(tempProcessor);

        var mpgds = tempProcessor.metaPartsGroupDescriptors;
        if (!mpgds || mpgds.length === 0) { console.log("meta parts group is null in current processor:" + processorIndex); return; }

        metaGroupCount = mpgds.length;

        var btnNext = document.getElementById("next_group");
        if (btnNext) {
            btnNext.disabled = metaGroupCount > (currentGroup + 1) ? false : "disabled";
        }
        var btnSave = document.getElementById("save");
        if (btnSave) {
            btnSave.disabled = metaGroupCount > (currentGroup + 1) ? "disabled" : false;
        }
        var btnPre = document.getElementById("previous_group");
        if (btnPre) {
            btnPre.disabled = currentGroup > 0 ? false : "disabled";
        }
        console.log("1");

        editorHolder = document.getElementById("editor_holders");
        if (editorHolder === null) { console.log("editor_holders div is null"); return; }

        clearChildHtmlElements(editorHolder);

        var tempParts = new Map();

        if (tempConfig != null && tempConfig.SourceEndpointFullTypeStr.slice(0, tempConfig.SourceEndpointFullTypeStr.indexOf("Version=")) === tempProcessor.sourceEndpointFullTypeStr.slice(0, tempProcessor.sourceEndpointFullTypeStr.indexOf("Version="))) {
            this.tempConfig = tempConfig;
            tempConfig.Parts.forEach(function (p, index) {
                tempParts.set(p.FullTypeString.slice(0, p.FullTypeString.indexOf("Version=")), p);
            });
        }

        //var tempParts = tempConfigMap.has(processorMeta.description) ? tempConfigMap.get(processorMeta.description) : null;
        tempProcessor.metaPartsGroupDescriptors.forEach(function (mpgd, groupIndex) {
            if (currentGroup !== groupIndex) { return; }
            if (document.getElementById("config_description_subscribe")) {
                document.getElementById("config_description_subscribe").innerText = "";
            }
            var descriptionStr = "";
            currentMPDDivMap.clear();
            currentSchemaStrEditorsMap.clear();
            //build a metal part tab
            metalPartTabSchemaMap.clear();
            var tabsDiv = document.createElement("div");
            tabsDiv.id = "tabs_div_group" + groupIndex;
            tabsDiv.setAttribute("class", "tab");
            editorHolder.appendChild(tabsDiv);

            var tabEditorHolder = document.createElement("div");
            tabEditorHolder.id = "metaPart_editorHolder";
            editorHolder.appendChild(tabEditorHolder);
            var selectedtab = null;
            descriptionStr = "此metal group共支持" + mpgd.metaPartsDescriptors.length + "种方式，请选择下面一种进行配置";
            if (document.getElementById("config_description_subscribe")) {
                document.getElementById("config_description_subscribe").innerText = descriptionStr;
            }
            mpgd.metaPartsDescriptors.forEach(function (mpd, mpdIndex) {
                if (tabsDiv !== null) {
                    var tabButton = document.createElement("button");
                    tabButton.id = "group" + groupIndex + "_meta" + mpdIndex;
                    tabButton.innerHTML = mpd.displayName;
                    tabButton.setAttribute("class", "tablinks");
                    tabButton.onclick = function (event) {
                        metalPartTabSelect(event.currentTarget);
                    };
                    metalPartTabSchemaMap.set(tabButton.id, mpd);
                    tabsDiv.appendChild(tabButton);
                    if (schemaStrEdiorValueMap.has("group" + groupIndex + "_meta" + mpdIndex + "_schemaStrs0_strEditor0") ||
                        schemaStrEdiorValueMap.has("group" + groupIndex + "_meta" + mpdIndex)) {
                        selectedtab = tabButton;
                    } else if (selectedtab === null && tempParts.has(mpd.fullTypeString.slice(0, mpd.fullTypeString.indexOf("Version="))))
                        selectedtab = tabButton;
                }
            });
            if (selectedtab === null) selectedtab = document.getElementById("group" + groupIndex + "_meta0");
            metalPartTabSelect(selectedtab);
            //mpgd.metaPartsDescriptors.forEach(function (mpd, mpdIndex) {
            //    //每个Group中可能又包含着多种meta part，比如底层通信中有串口通信/TCPIP，它们各自应该是互斥的
            //    var groupMPDRadio = null;
            //    var groupMPDRadioLabel = null;
            //    var groupMPDdiv = null;
            //    if (tabsDiv !== null) {
            //        var tabButton = document.createElement("button");
            //        tabButton.id = "group" + groupIndex + "_meta" + mpdIndex;
            //        tabButton.innerHTML = mpd.displayName;
            //        tabButton.setAttribute("class", "tablinks");
            //        tabButton.onclick = function (event) {
            //            metalPartTabSelect(event.currentTarget);
            //        };
            //        metalPartTabSchemaMap.set(tabButton.id, mpd);
            //        tabsDiv.appendChild(tabButton);
            //    }
            //    if (mpgd.metaPartsDescriptors.length > 1) {
            //        groupMPDRadio = document.createElement("input");
            //        groupMPDRadio.type = "radio";
            //        groupMPDRadio.name = "metaPartsDescriptor";
            //        groupMPDRadio.id = "radio_group" + groupIndex + "_meta" + mpdIndex
            //        groupMPDRadio.checked = mpdIndex === 0 ? true : false;
            //        groupMPDRadio.style = "position:relative;float:left;margin-top:2px;";
            //        groupMPDRadio.onclick = function (event) {
            //            console.log("radio is clicked" + event.currentTarget.id);
            //            radioClicked(event.currentTarget.id);
            //        };

            //        groupMPDRadioLabel = document.createElement("label");
            //        groupMPDRadioLabel.style = "position:relative;float:left;margin-top:1px;";
            //        groupMPDRadioLabel.innerHTML = mpd.description;
            //        groupMPDRadioLabel.appendChild(groupMPDRadio);

            //        groupMPDdiv = document.createElement("div");
            //        groupMPDdiv.id = "div_group" + groupIndex + "_meta" + mpdIndex
            //        groupMPDdiv.style = "position:relative;float:left;width:100%;border:double;";
            //        currentMPDDivMap.set(groupMPDdiv.id, groupMPDdiv);
            //    }
            //    descriptionStr = descriptionStr === "" ? mpd.description : (descriptionStr + "\n" + mpd.description);
            //    var tempSavedJsonString = tempParts !== null && tempParts.has(mpd.fullTypeString) ?
            //        tempParts.get(mpd.fullTypeString).ParametersJsonArrayStr : null;
            //    //var tempSavedJsonString = null;

            //    mpd.parametersJsonSchemaStrings.forEach(function (schemaStrs, schemaIndex) {
            //        //相当于一个接口有多种构造函数时会出现数组的情况，应该每种情况也是互斥的

            //        schemaStrs.forEach(function (schemaStr, sIndex) {
            //            var schemaDiv = document.createElement("div");
            //            schemaDiv.id = "editor_schema_" + sIndex;
            //            schemaDiv.style = "position:related;float:left;";

            //            var schemaEditor = new JSONEditor(schemaDiv, {
            //                theme: 'spectre',
            //                iconlib: "spectre",
            //                disable_edit_json: true,
            //                disable_array_reorder: true,
            //                array_controls_top: true,
            //                disable_collapse: true,
            //                disable_properties: true,
            //                schema: JSON.parse(schemaStr)
            //            });
            //            //把processor index, group index, schemaStrs index and schema string index来构成editor map的key, 后面的schemaValue最好也是这样
            //            var editorKey = "group" + groupIndex + "_meta" + mpdIndex + "_schemaStrs" + schemaIndex +
            //                "_strEditor" + sIndex;
            //            currentSchemaStrEditorsMap.set(editorKey, schemaEditor);

            //            if (schemaStrEdiorValueMap.has(editorKey)) {
            //                if (groupMPDRadio !== null) groupMPDRadio.checked = true;
            //                schemaEditor.setValue(schemaStrEdiorValueMap.get(editorKey));
            //            } else if (tempSavedJsonString != null) {
            //                var tempTest = JSON.parse(tempSavedJsonString);
            //                schemaEditor.setValue(tempTest[sIndex]);
            //            }
            //            //schemaEditors.push(schemaEditor);
            //            if (groupMPDRadio !== null) {
            //                groupMPDdiv.appendChild(schemaDiv);
            //                //groupMPDRadio.appendChild(groupMPDdiv);
            //                editorHolder.appendChild(groupMPDRadioLabel);
            //                editorHolder.appendChild(groupMPDdiv);
            //            } else {
            //                editorHolder.appendChild(schemaDiv);
            //            }

            //        });
            //    });// mpd.parametersJsonSchemaStrings.forEach

            //});
            //if (document.getElementById("config_description")) {
            //    document.getElementById("config_description").innerText = descriptionStr;
            //}
            //add an active check box on the last group
            if (btnSave != null && btnSave.disabled === false) {
                var activate = document.createElement("input");
                activate.type = "checkbox";
                activate.id = "processor_activate";
                activate.style = "position:relative;float:left;margin:0.8%;";
                activate.checked = tempConfig !== null ? tempConfig.Activated:true;

                var lable = document.createElement("p");
                lable.innerText = "激活配置";
                var activateDiv = document.createElement("div");
                activateDiv.style = "position:relative;float:left;width:100%; margin:2px;";
                activateDiv.appendChild(activate);
                activateDiv.appendChild(lable);
                editorHolder.appendChild(activateDiv);

                var description = document.createElement("input");
                description.type = "text";
                description.id = "processor_description";
                description.style = "position:relative;float:left;margin:0.8%;";
                description.value = tempConfig !== null ? tempConfig.Description : "";

                var ds_lable = document.createElement("p");
                ds_lable.innerText = "描述";
                ds_lable.style = "position:relative;float:left;margin:0.8%;"
                var dsDiv = document.createElement("div");
                dsDiv.style = "position:relative;float:left;width:100%; margin:2px;";
                dsDiv.appendChild(ds_lable);
                dsDiv.appendChild(description);
                editorHolder.appendChild(dsDiv);

            }
        });
        //console.log("there are " + processorMetas.length + " processor metas, current index is:" + processorIndex);
    }
    function clearChildHtmlElements(htmlElement) {
        var nl = htmlElement.childNodes.length;
        for (var cn = 0; cn < nl; cn++) {
            var c = htmlElement.childNodes[0];
            htmlElement.removeChild(c);
        }
    }
    //添加用来放置根据schema生成的控件的div
    function buildEditorHolder() {
        //清掉editorBody中的所有子控件
        var editorbody = document.getElementById("config_body_editorHolder");
        if (editorbody === null) { console.log("config body div is null"); return; }

        //同一个processor不用全部清掉
        var editorHolder = document.getElementById("editor_holders");
        if (editorHolder !== null) { clearChildHtmlElements(editorHolder); return; }
        else { clearChildHtmlElements(editorbody); }
        //
        editorHolder = document.createElement("div");
        editorHolder.id = "editor_holders";
        editorHolder.style = "position:relative;float:left;width:100%;height:95%;overflow-y:auto;";

        var edtiorBtnsDiv = document.createElement("div");
        edtiorBtnsDiv.id = "editor_buttons";
        edtiorBtnsDiv.style = "position:relative;float:left;width:100%;height:5%;";

        var btnPre = document.createElement("input");
        btnPre.id = "previous_group";
        btnPre.type = "button";
        btnPre.value = "Previous";
        btnPre.style = "margin-left:3%;margin-right:3%;";
        btnPre.onclick = function () { preGroup(); };

        var btnNext = document.createElement("input");
        btnNext.id = "next_group";
        btnNext.type = "button";
        btnNext.value = "Next";
        btnNext.style = "margin-right:3%;";
        btnNext.onclick = function () { nextGroup(); };

        var btnSave = document.createElement("input");
        btnSave.id = "save";
        btnSave.type = "button";
        btnSave.value = "Save";
        btnSave.style = "margin-right:3%;";
        btnSave.onclick = function () { save(); };

        var btnCancel = document.createElement("input");
        btnCancel.id = "cancel";
        btnCancel.type = "button";
        btnCancel.value = "Cancel";
        btnCancel.style = "margin-right:3%;";
        btnCancel.onclick = function () { cancel(); };

        editorbody.appendChild(editorHolder);
        edtiorBtnsDiv.appendChild(btnPre);
        edtiorBtnsDiv.appendChild(btnSave);
        edtiorBtnsDiv.appendChild(btnCancel);
        edtiorBtnsDiv.appendChild(btnNext);
        editorbody.appendChild(edtiorBtnsDiv);

    }

    //Metal part tab select
    function metalPartTabSelect(htmlElement) {
        //update the tab's background clour
        var metalPartTabs = document.getElementsByClassName("tablinks");
        for (i = 0; i < metalPartTabs.length; i++) {
            metalPartTabs[i].className = metalPartTabs[i].className.replace(" active", "");
        }
        htmlElement.className += " active";

        //取出这个tab对应的metal part schema
        var metalPartSchema = metalPartTabSchemaMap.get(htmlElement.id);
        updateEditorHolderWithMetalPart(metalPartSchema, htmlElement);
    }
    //为单独的某个metal part构建页面
    //the JSONEditor result will appened to htmlElement
    function updateEditorHolderWithMetalPart(metalPart, metaTabElement) {
        clearChildHtmlElements(document.getElementById("metaPart_editorHolder"));
        var tempParts = new Map();
        if (tempConfig !== null) {
            tempConfig.Parts.forEach(function (p, index) {
                tempParts.set(p.FullTypeString.slice(0, p.FullTypeString.indexOf("Version=")), p);
            });
        }

        var descriptionStr = metalPart.description;
        var tempSavedJsonString = tempParts !== null && tempParts.has(metalPart.fullTypeString.slice(0, metalPart.fullTypeString.indexOf("Version="))) ?
            tempParts.get(metalPart.fullTypeString.slice(0, metalPart.fullTypeString.indexOf("Version="))).ParametersJsonArrayStr : null;
        currentSchemaStrEditorsMap.forEach(function (value, key) {
            if (schemaStrEdiorValueMap.has(key)) schemaStrEdiorValueMap.delete(key);
        });
        currentSchemaStrEditorsMap.clear();

        metalPart.parametersJsonSchemaStrings.forEach(function (schemaStrs, schemaIndex) {
            //相当于一个接口有多种构造函数时会出现数组的情况，应该每种情况也是互斥的

            schemaStrs.forEach(function (schemaStr, sIndex) {
                var schemaDiv = document.createElement("div");
                schemaDiv.id = "editor_schema_" + sIndex;
                schemaDiv.style = "position:related;float:left;";

                var schemaEditor = new JSONEditor(schemaDiv, {
                    theme: 'spectre',
                    iconlib: "spectre",
                    ajax : true,
                    disable_edit_json: true,
                    disable_array_reorder: true,
                    array_controls_top: true,
                    disable_collapse: true,
                    disable_properties: true,
                    schema: JSON.parse(schemaStr)
                });
                //把processor index, group index, schemaStrs index and schema string index来构成editor map的key, 后面的schemaValue最好也是这样
                var editorKey = metaTabElement.id + "_schemaStrs" + schemaIndex +
                    "_strEditor" + sIndex;
                currentSchemaStrEditorsMap.set(editorKey, schemaEditor);

                if (schemaStrEdiorValueMap.has(editorKey)) {
                    //if (groupMPDRadio !== null) groupMPDRadio.checked = true;
                    //schemaEditor.setValue(schemaStrEdiorValueMap.get(editorKey));
                    schemaEditor.on('ready', () => {
                        // Now the api methods will be available
                        schemaEditor.setValue(schemaStrEdiorValueMap.get(editorKey));
                    });
                } else if (tempSavedJsonString != null) {
                    var tempTest = JSON.parse(tempSavedJsonString);
                    schemaEditor.on('ready', () => {
                        // Now the api methods will be available
                        schemaEditor.setValue(tempTest[sIndex]);

                    });
                    //schemaEditor.setValue(tempTest[sIndex]);
                }
                document.getElementById("metaPart_editorHolder").appendChild(schemaDiv);
            });
        });

        //如果当前metal part没有可配置项时，currentSchemaStrEditorsMap里面没有内容，提示信息，无需配置
        if (currentSchemaStrEditorsMap.size === 0) {
            var tips = document.createElement("p");
            tips.innerHTML = metalPart.displayName + "不需要配置";
            tips.style = "position:relative;float:left;font-size: 0.8rem;color:gray;";
            document.getElementById("metaPart_editorHolder").appendChild(tips);
            //设置一个空的schemaEditor用以后续取值为“”空字符串
            currentSchemaStrEditorsMap.set(metaTabElement.id,"");
        }
        if (document.getElementById("config_description_details")) {
            document.getElementById("config_description_details").innerHTML = descriptionStr;
        }
    }

    function nextGroup() {
        var errorMessage = getCurrentGroupConfigValue();
        if (errorMessage !== "") {
            alert(errorMessage);
        } else {
            currentGroup = currentGroup + 1;
            updateEditorHolder(tempConfig);
        }
    }

    function preGroup() {
        getCurrentGroupConfigValue();
        currentGroup = currentGroup - 1;
        updateEditorHolder(tempConfig);
    }
    function getCurrentGroupConfigValue() {
        var errorMesage = "";
        currentSchemaStrEditorsMap.forEach(function (editor, key) {
            //当editor为空字符串时，意味着这个metal没有需要配置的参数
            if (editor === "") {
                if (schemaStrEdiorValueMap.has(key)) schemaStrEdiorValueMap.delete(key);
                schemaStrEdiorValueMap.set(key, "");
                return;
            }
            const errors = editor.validate();
            if (errors.length > 0) {
                console.error(errors[0]['message']);

                errorMesage = errors[0]['message'];
            }
            {
                var radioId = "radio_" + key.slice(0, key.indexOf("_schemaStrs"));
                if (document.getElementById(radioId) && !document.getElementById(radioId).checked) return;
                if (schemaStrEdiorValueMap.has(key)) schemaStrEdiorValueMap.delete(key);
                schemaStrEdiorValueMap.set(key, editor.getValue());
            }
        });
        return errorMesage;
    }
    function radioClicked(id) {
        var radio = document.getElementById(id);
        if (radio && radio.checked && currentMPDDivMap.size > 0) {
            var correspodingMPDDivId = "div" + id.slice(id.indexOf("_"));
            currentMPDDivMap.forEach(function (mpdDiv, key) {
                mpdDiv.style.dispaly = key === correspodingMPDDivId ? "" : "block";

            });
        }
    }
    function save() {
        if (tempProcessor === null) {
            console.log("processorIndex is out of range / processor is null");
            return;
        }
        //var currentProcessor = JSON.parse(processorMetas[processorIndex]);
        var groups = tempProcessor.metaPartsGroupDescriptors;
        if (groups === null) {
            console.log("there is no metaParts group in this processor");
            return;
        }
        getCurrentGroupConfigValue();
        // IEnumerable<ProcessorMetaPartsConfig> Parts

        var processorName = tempProcessor.sourceEndpointFullTypeStr.slice(0, tempProcessor.sourceEndpointFullTypeStr.indexOf("."))+"_0";
        if (tempConfig !== null) {
            processorName = tempConfig.Name;
        } else if (currentConfigurationFromDataBase !== null) {
            //processorName = tempProcessor.sourceEndpointFullTypeStr.slice(0, tempProcessor.sourceEndpointFullTypeStr.indexOf(".")) +
            //    "_" + currentConfigurationFromDataBase.length;

            //for avoid too long name generated here, below some tweak
            processorName = tempProcessor.sourceEndpointFullTypeStr.replace(" ", "").substring(0, 40) +
                "_" + md5(tempProcessor.sourceEndpointFullTypeStr).substring(0, 16) +
                "_" + currentConfigurationFromDataBase.length;
            console.info("A ProcessorMetaConfig name is generated as: " + processorName)
        }
        var activated = false;
        var htmlElementActivate = document.getElementById("processor_activate");
        if (htmlElementActivate!== null) {
            activated = htmlElementActivate.checked;
        }
        var description_text = "";
        var htmlElementDescription = document.getElementById("processor_description");
        if (htmlElementDescription !== null) {
            description_text = htmlElementDescription.value;
        }
        var processorMetaConfig = {
            "Id": 0, "Name": processorName, "Description": description_text, "Type": tempProcessor.type,
            "Parts": [],
            "Activated": activated
        };
        //"processor" + processorIndex + "_group" + groupIndex + "_meta" + mpdIndex+"_schemaStrs" + schemaIndex +
        //"_strEditor" + sIndex;
        var tempParts = new Map();
        if (tempConfig != null) {
            if (tempConfig.SourceEndpointFullTypeStr.slice(0, tempConfig.SourceEndpointFullTypeStr.indexOf("Version=")) ===
                tempProcessor.sourceEndpointFullTypeStr.slice(0, tempProcessor.sourceEndpointFullTypeStr.indexOf("Version="))) {
                processorMetaConfig.Id = tempConfig.Id;
                tempConfig.Parts.forEach(function (p, index) {
                    tempParts.set(p.FullTypeString.slice(0, p.FullTypeString.indexOf("Version=")), p);
                });
            }
        };
        groups.forEach(function (g, index) {
            var tempMetalGroupPart = { "Id": 0, "Type": g.groupType, "FullTypeString": "", "ParametersJsonArrayStr": "" };
            //当一个group有多种可选的metal part时,如果所选择的metal发生改变时，期望在做更新数据库时，仍然使用之前保存的配置的id
            var tempSavedConfigForThisGroup = null;
            g.metaPartsDescriptors.forEach(function (mpd, mpdIndex) {

                if (tempSavedConfigForThisGroup === null)
                    tempSavedConfigForThisGroup = tempParts !== null && tempParts.has(mpd.fullTypeString.slice(0, mpd.fullTypeString.indexOf("Version="))) ? tempParts.get(mpd.fullTypeString.slice(0, mpd.fullTypeString.indexOf("Version="))) : null;

                if (schemaStrEdiorValueMap.has("group" + index + "_meta" + mpdIndex)) {
                    tempMetalGroupPart.fullTypeString = mpd.fullTypeString;
                    tempMetalGroupPart.ParametersJsonArrayStr = JSON.stringify(new Array());
                    return;
                }
                mpd.parametersJsonSchemaStrings.forEach(function (schemaStrs, schemaIndex) {
                    var tempSchemaValue = new Array();
                    //相当于一个接口有多种构造函数时会出现数组的情况，应该每种情况也是互斥的
                    schemaStrs.forEach(function (schemaStr, sIndex) {
                        var tempKey = "group" + index + "_meta" + mpdIndex +
                            "_schemaStrs" + schemaIndex + "_strEditor" + sIndex;

                        if (schemaStrEdiorValueMap.has(tempKey)) {
                            //如果这个schemaStr有对应的配置值，那么认为用户选择了这个metalPartsDescript
                            if (tempMetalGroupPart.FullTypeString === "") { tempMetalGroupPart.FullTypeString = mpd.fullTypeString; }
                            tempSchemaValue.push(schemaStrEdiorValueMap.get(tempKey));
                        }
                    });
                    if (tempMetalGroupPart.ParametersJsonArrayStr === "" && tempSchemaValue.length > 0) {
                        tempMetalGroupPart.ParametersJsonArrayStr = JSON.stringify(tempSchemaValue);
                    }
                    //if (tempParts !== null) {
                    //    tempMetalGroupPart.Id = tempParts.has(mpd.fullTypeString) ? tempParts.get(mpd.fullTypeString).Id : 0;
                    //}
                });
            });
            if (tempSavedConfigForThisGroup !== null) tempMetalGroupPart.Id = tempSavedConfigForThisGroup.Id;
            processorMetaConfig.Parts.push(tempMetalGroupPart);
        });
        console.log(JSON.stringify(processorMetaConfig));
        var tempUrl = currentHP + "u/?apitype=service&an=UpsertProcessorMetaConfigAsync&pn=ProcessorsDispatcher&en=Edge.Core.Processor.Dispatcher.DefaultDispatcher";
        $.ajax({
            url: tempUrl,
            datatype: "application/json",
            type: 'post',
            contentType: "application/json;charset=utf-8;",
            data: JSON.stringify(processorMetaConfig),
            beforeSend: function () {
            },
            success: function (data) {
                alert("Config Saved Successfully!");

                clearCurrentDatas();
                processorSelect(null);

                console.log("successfully");
            },
            error: function (err) {
                alert("Failed to Save the config!");
                console.log(err);
            }
        });
    }

    function cancel() {
        clearCurrentDatas();
        processorSelect(null);
    }
    function add() {
        clearCurrentDatas();
        updateEditorHolder(null);
    }

    function clearCurrentDatas() {
        this.tempConfig = null;
        this.currentGroup = 0;
        this.currentMPDDivMap.clear();
        //用来存放某个具体的meta part descriptor配置editor
        //把processor index, group index, schemaStrs index and schema string index来构成editor map的key, 后面的schemaValue最好也是这样
        currentSchemaStrEditorsMap.clear();
        //存放每个editor value的map
        schemaStrEdiorValueMap.clear();
    }

    $(document).ready(function () {
        //查询的config名字需要跟保存时的一样
        var requestData = new Array();
        requestData.push("");
        var tempurl = currentHP+"u/?apitype=service&an=GetProcessorMetaConfigAsync&pn=ProcessorsDispatcher&en=Edge.Core.Processor.Dispatcher.DefaultDispatcher";
        console.log(tempurl);
        //requestData.push(tempProcessor.sourceEndpointFullTypeStr.slice(0, tempProcessor.sourceEndpointFullTypeStr.indexOf(".")));
        $.ajax({
            url: tempurl,
            datatype: "application/json",
            type: 'post',
            contentType: "application/json;charset=utf-8;",
            data: JSON.stringify(requestData),
            beforeSend: function () {
            },
            success: function (data) {
                var configMap = new Map();
                data.forEach(function (d, index) {
                    if (!configMap.has(d.SourceEndpointFullTypeStr.slice(0, d.SourceEndpointFullTypeStr.indexOf("Version=")))) {
                        configMap.set(d.SourceEndpointFullTypeStr.slice(0, d.SourceEndpointFullTypeStr.indexOf("Version=")), index);
                    }
                });
                splitProcessorsViaTag(configMap);
                buildTags();
                updatePageBtnState();
                if (getQueyValue("tags") === "" || getQueyValue("pn") === "") {
                    /*updateLeftSideBar("已配置");
                    document.getElementById("li_已配置").style.background = "#0026ff"//"rgba(128, 128, 128, 0.35)";
                    document.getElementById("li_已配置").style.color = "white";*/
                    tagClick(document.getElementById("li_已配置"))
                } else {
                    displayConfiguredProcessor(getQueyValue("pn"), getQueyValue("tags").split(",")[0]);
                }

                //var el = document.getElementById("li_all");
                //if (el === null) { return; }
                //tagClick(el);
            },
            error: function (err) {
                console.log(err);
            }
        });

        //var el = document.getElementById("processor_0");
        //if (el === null) { return; }
        //processorSelect(el);

        $("#processor_test_result_dialog").dialog({
            autoOpen: false,
            modal: true,
            //buttons: [
            //    {
            //        //text: "关闭",
            //        icon: "ui-icon-heart",
            //        click: function () {
            //            $(this).dialog("close");
            //        }

            //        // Uncommenting the following line would hide the text,
            //        // resulting in the label being used as a tooltip
            //        //showText: false
            //    }
            //]
        });
    });

    function getQueyValue(queryString) {
        var queries = new String(decodeURIComponent(this.currenthref)).split("?");
        var result = "";
        if (queries && queries.length > 1) {
            var temp = queries[1].split("&");
            if (temp && Array.isArray(temp)) {
                temp.forEach(function (q) {
                    var keyValuePairs = q.split("=");
                    if (keyValuePairs[0] === queryString) {
                        result = keyValuePairs[1];
                        return;
                    }
                });
            }
        }
        return result;
    }
    var processorsMapViaTag = new Map();
    function splitProcessorsViaTag(configMap) {
        var tempProcessors = JSON.parse(JSON.stringify(@Html.Raw(Json.Serialize(Model))));
        var tags = getQueyValue("tags");
        if (tags !== "") {
            tags = tags.split(",");
        }
        var noTagProcessors = new Array();
        var savedConfig = new Array();
        tempProcessors.forEach(function (p) {
            if (tags && Array.isArray(tags) && tags.length > 0) {
                var found = false;
                tags.forEach(function (tag) {
                    if (p.tags) {
                        p.tags.forEach(function (ptag) {
                            var tempTagObj = JSON.parse(ptag);
                            if (tempTagObj.TagKey === tag) { found = true; return; }
                        });
                    }
                });
                if (!found) return;
            }
            if (configMap != null && configMap.has(p.sourceEndpointFullTypeStr.slice(0, p.sourceEndpointFullTypeStr.indexOf("Version=")))) {
                savedConfig.push(p);
            }
            if (p.tags != null) {
                p.tags.forEach(function (t) {
                    var tagObj = JSON.parse(t);
                    if (processorsMapViaTag.has(tagObj.TagKey)) {
                        processorsMapViaTag.get(tagObj.TagKey).push(p);
                    } else {
                        var arr = new Array();
                        arr.push(p);
                        processorsMapViaTag.set(tagObj.TagKey, arr);
                    }
                });
            } else {
                noTagProcessors.push(p);
            }
        });
        processorsMapViaTag.set("已配置", savedConfig);
        if (noTagProcessors.length > 0) processorsMapViaTag.set("其他", noTagProcessors);
    }
    function buildTags() {
        var tagsUl = document.getElementById("tags");
        var header = document.getElementById("config_header");
        var count = 0;
        clearTags(tagsUl);
        var targetProcessorsMapViaTag = new Map();
        if (processorsMapViaTag.size < 11) {
            targetProcessorsMapViaTag = processorsMapViaTag;
        } else {
            processorsMapViaTag.forEach(function (value, key) {
                count += 1;
                if (count < (currentPage * 9 + 1) || count > (currentPage * 9 + 9)) return;
                targetProcessorsMapViaTag.set(key, value);
            })
            targetProcessorsMapViaTag.set("已配置", processorsMapViaTag.get("已配置"));
        }
        
        targetProcessorsMapViaTag.forEach(function (value, key) {
            var tagli = document.createElement("li");
            tagli.id = "li_" + key;
            tagli.setAttribute("name","tag");
            //tagli.style = "float:left;";
            //tagli.innerHTML = key === "无" ? key : key.slice(key.indexOf(":") + 1, key.indexOf("lang-en-us:"));
            var taga = document.createElement("a");
            taga.id = "a_" + key;
            tagli.onclick = function (event) { tagClick(event.currentTarget); };
            var displayedTagName = "";
            if (Array.isArray(value) && value[0].tags && Array.isArray(value[0].tags)) {
                value[0].tags.forEach(function (t) {
                    var temp = JSON.parse(t);
                    if (temp.TagKey === key) {
                        displayedTagName = temp.LocalizedTagName;
                    }
                })
            }
            taga.innerHTML = displayedTagName === "" ? key : displayedTagName;/* === "其他" ? key : key.slice(key.indexOf(":") + 1, key.indexOf("lang-en-us:"));*/
            tagli.appendChild(taga);
            tagsUl.appendChild(tagli);
        })
        if (header !== null && header.offsetHeight < header.scrollHeight) {
            header.style.height = "11%";
            document.getElementById("page_body").style.height = "89%";
        } else {
            header.style.height = "6%"
            document.getElementById("page_body").style.height = "94%";
        }
    }
    function clearTags(htmlElement) {
        var nl = htmlElement.childNodes.length;
        for (var cn = 4; cn < nl; cn++) {
            var c = htmlElement.childNodes[4];
            htmlElement.removeChild(c);
        }
    }
    function previous() {
        currentPage = currentPage - 1;
        updatePageBtnState();
        buildTags();
        tagClick(document.getElementById("li_已配置"))
    }
    function next() {
        currentPage = currentPage + 1;
        updatePageBtnState();
        buildTags();
        tagClick(document.getElementById("li_已配置"))
    }
    function updatePageBtnState() {
        var totalPage = Math.ceil((processorsMapViaTag.size - 1) / 9);
        var el_pre = document.getElementById("btn_pre");
        var el_nxt = document.getElementById("btn_next");
        if (currentPage === 0) {
            el_pre.disabled = 'disabled';
        } else {
            el_pre.disabled = false;
        }
        if (currentPage < totalPage - 1) {
            el_nxt.disabled = false;
        } else {
            el_nxt.disabled = 'disabled';
        }
    }
    function tagClick(htmlElement) {
        var tagId = htmlElement.id;
        var tagKey = tagId.slice(tagId.indexOf("_") + 1);
        clearCurrentDatas();
        updateLiBackground(htmlElement);
        updateLeftSideBar(tagKey);
        // "processor_" + pindex + "_" + processor.type ;
        var el = document.getElementById("processor_0_1");
        if (el === null) el = document.getElementById("processor_0_0");
        if (el === null) {
            if (document.getElementById("config_description_subscribe")) {
                document.getElementById("config_description_subscribe").innerHTML = "";
            }
            if (document.getElementById("config_description_details"))
                document.getElementById("config_description_details").innerHTML = "當前選項沒有配置項";
            var editorHolder = document.getElementById("config_body_editorHolder");
            if (editorHolder != null)clearChildHtmlElements(editorHolder);
            return;
        }
        processorSelect(el);
    }
    function displayConfiguredProcessor(processorName, tag) {
        tempProcessors = processorsMapViaTag.get(tag);
        var targetHtmlElement = null;
        if (tempProcessors === null || tempProcessors === undefined || processorName === "" || tag === "") { return; }
        updateLeftSideBar(tag);
        document.getElementById("li_"+tag).style.background = "#0026ff"//"rgba(128, 128, 128, 0.35)";
        document.getElementById("li_"+tag).style.color = "white";
        tempProcessors.forEach(function (p, index) {
            //如果sourceEndpointFullTypeStr中包含processor name则认为找到了需要显示的processor
            if (p.sourceEndpointFullTypeStr.toUpperCase().indexOf(processorName.toUpperCase()) > -1) {
                var targetId = "processor_" + index + "_" + p.type;
                targetHtmlElement = document.getElementById(targetId);
                return;
            }
        });
        if (targetHtmlElement !== null) {
            processorSelect(targetHtmlElement);
        }
    }
    function updateLeftSideBar(tagKey) {
        tempProcessors = processorsMapViaTag.get(tagKey);
        if (tempProcessors === null || tempProcessors == undefined) { return; }
        clearChildHtmlElements(document.getElementById("config_nav_ul_app_processor"));
        clearChildHtmlElements(document.getElementById("config_nav_ul_device_processor"));
        tempProcessors.forEach(function (processor, pindex) {
             //processor.Type == 0 is DeviceProcessor, processor.Type==1 is AppProcessor
            var navConfigUl = document.getElementById("config_nav_ul_app_processor");
            if (processor.type === 0)
                navConfigUl = document.getElementById("config_nav_ul_device_processor");
            var lip = document.createElement("li");
            lip.id = "processor_" + pindex + "_" + processor.type ;
            lip.setAttribute("name","processor");
            lip.style = "width:100%;white-space:nowrap;overflow-x:auto;";
            lip.onclick = function (event) {
                clearCurrentDatas();
                processorSelect(event.currentTarget);
            };
            var ap = document.createElement("a");
            ap.id = "aprocessor_" + pindex + "_" + processor.type;
            ap.innerHTML = processor.displayName!==null?processor.displayName:processor.sourceEndpointFullTypeStr.split(",")[1];
            lip.appendChild(ap);
            //lip.innerHTML = processor.sourceEndpointFullTypeStr.split(",")[1];
            navConfigUl.appendChild(lip);
        });
    }
    function ReloadProcessors(id) {
        var restartBtn = document.getElementById(id);
        if (restartBtn === null) return;
        restartBtn.disabled = "disabled";
        var requestData = new Array();
        requestData.push("Manual Restart from ConfigUI");
        var tempurl = currentHP + "u/?apitype=service&an=ReloadProcessorsAsync&pn=ProcessorsDispatcher&en=Edge.Core.Processor.Dispatcher.DefaultDispatcher";
        //requestData.push(tempProcessor.sourceEndpointFullTypeStr.slice(0, tempProcessor.sourceEndpointFullTypeStr.indexOf(".")));
        $.ajax({
            url: tempurl,
            datatype: "application/json",
            type: 'post',
            contentType: "application/json;charset=utf-8;",
            data: JSON.stringify(requestData),
            beforeSend: function () {
            },
            success: function (data) {
                console.log("Restart successfully, response data:" + data);
                restartBtn.disabled = false;
                alert("Restart Successfully");
            },
            error: function (err) {
                console.log(err);
                estartBtn.disabled = false;
                alert("Restart failed due to:"+err);
            }
        });
    }
    function md5(inputString) {
        var hc = "0123456789abcdef";
        function rh(n) { var j, s = ""; for (j = 0; j <= 3; j++) s += hc.charAt((n >> (j * 8 + 4)) & 0x0F) + hc.charAt((n >> (j * 8)) & 0x0F); return s; }
        function ad(x, y) { var l = (x & 0xFFFF) + (y & 0xFFFF); var m = (x >> 16) + (y >> 16) + (l >> 16); return (m << 16) | (l & 0xFFFF); }
        function rl(n, c) { return (n << c) | (n >>> (32 - c)); }
        function cm(q, a, b, x, s, t) { return ad(rl(ad(ad(a, q), ad(x, t)), s), b); }
        function ff(a, b, c, d, x, s, t) { return cm((b & c) | ((~b) & d), a, b, x, s, t); }
        function gg(a, b, c, d, x, s, t) { return cm((b & d) | (c & (~d)), a, b, x, s, t); }
        function hh(a, b, c, d, x, s, t) { return cm(b ^ c ^ d, a, b, x, s, t); }
        function ii(a, b, c, d, x, s, t) { return cm(c ^ (b | (~d)), a, b, x, s, t); }
        function sb(x) {
            var i; var nblk = ((x.length + 8) >> 6) + 1; var blks = new Array(nblk * 16); for (i = 0; i < nblk * 16; i++) blks[i] = 0;
            for (i = 0; i < x.length; i++) blks[i >> 2] |= x.charCodeAt(i) << ((i % 4) * 8);
            blks[i >> 2] |= 0x80 << ((i % 4) * 8); blks[nblk * 16 - 2] = x.length * 8; return blks;
        }
        var i, x = sb(inputString), a = 1732584193, b = -271733879, c = -1732584194, d = 271733878, olda, oldb, oldc, oldd;
        for (i = 0; i < x.length; i += 16) {
            olda = a; oldb = b; oldc = c; oldd = d;
            a = ff(a, b, c, d, x[i + 0], 7, -680876936); d = ff(d, a, b, c, x[i + 1], 12, -389564586); c = ff(c, d, a, b, x[i + 2], 17, 606105819);
            b = ff(b, c, d, a, x[i + 3], 22, -1044525330); a = ff(a, b, c, d, x[i + 4], 7, -176418897); d = ff(d, a, b, c, x[i + 5], 12, 1200080426);
            c = ff(c, d, a, b, x[i + 6], 17, -1473231341); b = ff(b, c, d, a, x[i + 7], 22, -45705983); a = ff(a, b, c, d, x[i + 8], 7, 1770035416);
            d = ff(d, a, b, c, x[i + 9], 12, -1958414417); c = ff(c, d, a, b, x[i + 10], 17, -42063); b = ff(b, c, d, a, x[i + 11], 22, -1990404162);
            a = ff(a, b, c, d, x[i + 12], 7, 1804603682); d = ff(d, a, b, c, x[i + 13], 12, -40341101); c = ff(c, d, a, b, x[i + 14], 17, -1502002290);
            b = ff(b, c, d, a, x[i + 15], 22, 1236535329); a = gg(a, b, c, d, x[i + 1], 5, -165796510); d = gg(d, a, b, c, x[i + 6], 9, -1069501632);
            c = gg(c, d, a, b, x[i + 11], 14, 643717713); b = gg(b, c, d, a, x[i + 0], 20, -373897302); a = gg(a, b, c, d, x[i + 5], 5, -701558691);
            d = gg(d, a, b, c, x[i + 10], 9, 38016083); c = gg(c, d, a, b, x[i + 15], 14, -660478335); b = gg(b, c, d, a, x[i + 4], 20, -405537848);
            a = gg(a, b, c, d, x[i + 9], 5, 568446438); d = gg(d, a, b, c, x[i + 14], 9, -1019803690); c = gg(c, d, a, b, x[i + 3], 14, -187363961);
            b = gg(b, c, d, a, x[i + 8], 20, 1163531501); a = gg(a, b, c, d, x[i + 13], 5, -1444681467); d = gg(d, a, b, c, x[i + 2], 9, -51403784);
            c = gg(c, d, a, b, x[i + 7], 14, 1735328473); b = gg(b, c, d, a, x[i + 12], 20, -1926607734); a = hh(a, b, c, d, x[i + 5], 4, -378558);
            d = hh(d, a, b, c, x[i + 8], 11, -2022574463); c = hh(c, d, a, b, x[i + 11], 16, 1839030562); b = hh(b, c, d, a, x[i + 14], 23, -35309556);
            a = hh(a, b, c, d, x[i + 1], 4, -1530992060); d = hh(d, a, b, c, x[i + 4], 11, 1272893353); c = hh(c, d, a, b, x[i + 7], 16, -155497632);
            b = hh(b, c, d, a, x[i + 10], 23, -1094730640); a = hh(a, b, c, d, x[i + 13], 4, 681279174); d = hh(d, a, b, c, x[i + 0], 11, -358537222);
            c = hh(c, d, a, b, x[i + 3], 16, -722521979); b = hh(b, c, d, a, x[i + 6], 23, 76029189); a = hh(a, b, c, d, x[i + 9], 4, -640364487);
            d = hh(d, a, b, c, x[i + 12], 11, -421815835); c = hh(c, d, a, b, x[i + 15], 16, 530742520); b = hh(b, c, d, a, x[i + 2], 23, -995338651);
            a = ii(a, b, c, d, x[i + 0], 6, -198630844); d = ii(d, a, b, c, x[i + 7], 10, 1126891415); c = ii(c, d, a, b, x[i + 14], 15, -1416354905);
            b = ii(b, c, d, a, x[i + 5], 21, -57434055); a = ii(a, b, c, d, x[i + 12], 6, 1700485571); d = ii(d, a, b, c, x[i + 3], 10, -1894986606);
            c = ii(c, d, a, b, x[i + 10], 15, -1051523); b = ii(b, c, d, a, x[i + 1], 21, -2054922799); a = ii(a, b, c, d, x[i + 8], 6, 1873313359);
            d = ii(d, a, b, c, x[i + 15], 10, -30611744); c = ii(c, d, a, b, x[i + 6], 15, -1560198380); b = ii(b, c, d, a, x[i + 13], 21, 1309151649);
            a = ii(a, b, c, d, x[i + 4], 6, -145523070); d = ii(d, a, b, c, x[i + 11], 10, -1120210379); c = ii(c, d, a, b, x[i + 2], 15, 718787259);
            b = ii(b, c, d, a, x[i + 9], 21, -343485551); a = ad(a, olda); b = ad(b, oldb); c = ad(c, oldc); d = ad(d, oldd);
        }
        return rh(a) + rh(b) + rh(c) + rh(d);
    }
    function dialogBox(title, message, yesCallback, noCallback) {
        if (message) {
            $('.dialog-title').html(title);
            $('.dialog-message').html(message);
        }
        // 显示遮罩和对话框
        $('.wrap-dialog').removeClass("hide");
        $('.alarmInfoWrap').removeClass("hide");
        // 确定按钮
        $('#confirm').click(function () {
            $('.wrap-dialog').addClass("hide");
            $('.alarmInfoWrap').addClass("hide");
            noCallback = null;
            if (yesCallback !== null && yesCallback !== undefined) {
                yesCallback();
                yesCallback = null;
            }
        });
        // 取消按钮
        $('#cancel').click(function () {
            yesCallback = null;
            $('.wrap-dialog').addClass("hide");
            $('.alarmInfoWrap').addClass("hide");
            if (noCallback !== null && noCallback !== undefined) {
                noCallback();
                noCallback = null;
            }

        });
    }
</script>