Shan
/
CoffeeProject
派生自 rita/CoffeeProject


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>{{ title }}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <!--可用來建立使用者小圖示-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    
    <script language="JavaScript">

        $(function(){
            // 網頁 title
            $("#coffee_title_pc").text("檢視積木條件");
            $("#coffee_title_phone").text("檢視積木條件");
            // 使用者權限判斷
            // $('.select-input').prop('disabled', false);

            
        });
        
        var Z;
        var X;
        var Y;
        var TT = {};  // 將總條件句/附加條件句/物件動作句存入 字典, 後續傳給 dry_block_format 再組合
        
                                        
    </script>
    <style>
        /* .boardpic_position {
            position: absolute;
            top: 80px;
            left: 25px;
        } */

        .r5_position {
            position: absolute;
            top: 160px;
            left: 310px;
            width: 40px;
            height: 150px;
            border-style: solid;
            border-color: aqua;
        }
        .div_relay_css {
            position: absolute; 
            border-style: solid; 
            border-color: aqua; 
            text-align: center;
            font-size: 12px;
        }
        /* header */
        /* 文字輸入框 */
        .input-text {
            height: 25px;
            width: 40px;
            text-align: center;
            margin-left: 2px;
            margin-right: 5px;
        }
        /* 致動器狀態表格置中 */
        .label_ActuatorStatus {
            margin: auto;
        }
        /* 致動器 ON 樣式 */
        .input-button-on {
            color: #008CBA;
            border: 2px rgb(182, 181, 181) solid;
            background-color: whitesmoke;
            padding: 1px 3px;
            width: 45px;
        }
        /* 致動器 OFF 樣式 */
        .input-button-off {
            color: #707070;
            border: 2px rgb(192, 192, 192) solid;
            background-color: whitesmoke;
            padding: 1px 3px;
            width: 45px;
        }
        /* 輸入按鈕 */
        .input-button {
            font-size: 14px;
            color: #008CBA;
            border: 2px rgb(182, 181, 181) solid;
            background-color: whitesmoke;
            padding: 1px 3px;
        }
        /* 大表格樣式 */
        .table-all {
            font-size:18px; 
            border:2px #cccccc solid; 
            margin-left: 10px; 
            margin-right: 10px; 
            width: 98%;
        }
        /* footer */
        .footer{
            height: 40px;
            box-sizing: border-box;
            /* 設定footer絕對位置在底部 */
            position: absolute;
            bottom: 0px;
            width: 100%;
            background-color: #eee;
            text-align: center;
        }

        html, body {
            height: 100%;
            /* margin: 0; */
            position: relative;
        }

        #wrapper {
            /* 設定高度最小為100%, 如果內容區塊很多, 可以長大 */
            min-height: 100%;
            /* 位置設為relative, 作為footer區塊位置的參考 */
            position: relative;
        }
    </style>
</head>

<body style="font-size: 18px;">
    <div id="wrapper" style="height: auto;">
        <div id="coffee_header">
            <!-- 匯入共同使用的 header.html 內容 -->
            {% include 'header.html' %}
        </div>

        <table style="width: 700px;">
        <!-- <table style="position: absolute; top: 75px; left: 25px; width: max-content;"> -->
            <!-- 選擇燒錄桶槽 -->
            <tr>
                <td>
                    <script>
                        // 貨櫃-桶槽對應
                        const containerTOtank = {
                            'CleanContainer':[{'CCI1':'清洗貨櫃內'}, 
                                              {'CCO1':'清洗貨櫃外'},
                                              {'C1':'清洗槽 1'}, {'C2':'清洗槽 2'}, {'C3':'清洗槽 3'}, {'C4':'清洗槽 4'}, 
                                              {'R1':'中水桶 1'}, 
                                              {'S1':'色選機 1'}, {'S2':'色選機 2'}, 
                                              {'SO1':'色選機出料 1'}, {'SO2':'色選機出料 2'}, 
                                              {'P1':'脫皮機 1'}, {'P2':'脫皮機 2'}, 
                                              {'PO1':'脫皮機出料 1'}, {'PO2':'脫皮機出料 2'}
                                            ],
                            'FermentContainer':[{'FCI1':'發酵貨櫃內'},
                                                {'FCO1':'發酵貨櫃外'},
                                                {'FI1':'發酵槽入料 1'}, {'FI2':'發酵槽入料 2'},
                                                {'F1':'發酵槽 1'}, {'F2':'發酵槽 2'}, {'F3':'發酵槽 3'}, {'F4':'發酵槽 4'}, {'F5':'發酵槽 5'}, {'F6':'發酵槽 6'}, 
                                                {'F7':'發酵槽 7'}, {'F8':'發酵槽 8'}, {'F9':'發酵槽 9'}, {'F10':'發酵槽 10'}, {'F11':'發酵槽 11'}, {'F12':'發酵槽 12'}, 
                                                {'FO1':'發酵槽出料 1'}, {'FO2':'發酵槽出料 2'}
                                            ],
                            'DryContainer':[{'DCI1':'乾燥貨櫃內'},
                                            {'DCO1':'乾燥貨櫃外'},
                                            {'DI1':'乾燥槽入料 1'}, {'DI2':'乾燥槽入料 2'},
                                            {'D1':'乾燥槽 1'}, {'D2':'乾燥槽 2'}, {'D3':'乾燥槽 3'}, {'D4':'乾燥槽 4'}, {'D5':'乾燥槽 5'}, {'D6':'乾燥槽 6'}, 
                                            {'D7':'乾燥槽 7'}, {'D8':'乾燥槽 8'}, {'D9':'乾燥槽 9'}, {'D10':'乾燥槽 10'}, {'D11':'乾燥槽 11'}, {'D12':'乾燥槽 12'}, 
                                            {'DO1':'乾燥槽出料 1'}, {'DO2':'乾燥槽出料 2'}
                                            ]
                        }
                    </script>

                    <u>使用者名稱 : </u>
                    <select id="prog_username">
                        <option value="user" selected>user</option>
                        <option value=""></option>
                        {% for username in username_data %}
                            <option value="{{username[0]}}">{{username[0]}}</option>
                        {% endfor %}
                    </select>
                    <u>欲燒錄之桶槽 : </u>
                    <select id="prog_container" onchange="renew_tank()" class="select-input">
                        <option value="DryContainer" selected>乾燥槽</option>
                        <option value=""></option>
                        <option value="CleanContainer">清洗槽</option>
                        <option value="FermentContainer">發酵槽</option>
                        <option value="DryContainer">乾燥槽</option>
                    </select>
                    <select id="prog_tank" onchange="" class="select-input">
                        <option value="D2" selected>乾燥槽 2</option>
                        <option value=""></option>
                    </select>
                    <input type="button" value="查詢" onclick="select_cond()">
                    <br>
                    <!-- <input type="button" value="前往指定燒錄桶槽" onclick="GoToBoardLoaderPage()"> -->
                    <script>
                        function select_cond() {
                            var target_prog_username = $("#prog_username").val();
                            var target_prog_tank = $("#prog_tank").val();
                            console.log("target_prog_username: " + target_prog_username);
                            console.log("target_prog_tank: " + target_prog_tank);

                            var SelectCondData = {"username":target_prog_username,
                                                  "tank":target_prog_tank}

                            $.ajax({
                                type:"GET",
                                url:"/select_cond",
                                data:SelectCondData,
                                dataType:"JSON",
                                async:false,
                                success:function (res){
                                    cond_cond = res['cond']
                                    // 取得總條件數、子條件數、子物件數最大值
                                    const COND_NUMS = cond_cond.length;                                 // 總條件數
                                    var COND_ADD_NUMS_LIST = [];
                                    var COND_COM_NUMS_LIST = [];
                                    for (let Z = 0; Z < cond_cond.length; Z++) {
                                        COND_ADD_NUMS_LIST.push(cond_cond[Z].cond_add.length)
                                        COND_COM_NUMS_LIST.push(cond_cond[Z].cond_com.length)
                                    }
                                    // console.log("COND_ADD_NUMS_LIST: " + COND_ADD_NUMS_LIST);
                                    // console.log("COND_COM_NUMS_LIST: " + COND_COM_NUMS_LIST);
                                    const COND_ADD_NUMS = Math.max(...COND_ADD_NUMS_LIST)+1;            // 子條件數
                                    const COND_COM_NUMS = Math.max(...COND_COM_NUMS_LIST);              // 子物件數
                                    // console.log("COND_ADD_NUMS: " + COND_ADD_NUMS);
                                    // console.log("COND_COM_NUMS: " + COND_COM_NUMS);

                                    // 清空 DBvalue
                                    document.getElementById("DBvalue").innerHTML = '';
                                    // 生成積木
                                    DBvalue_btn(COND_NUMS, COND_ADD_NUMS, COND_COM_NUMS);
                                    for (let c_n = 0; c_n < cond_cond.length; c_n++) {
                                        // console.log("cond_cond[" + c_n + "]: " + cond_cond[c_n] + "_" + typeof(cond_cond[c_n]))
                                        if (typeof(cond_cond[c_n]) === 'object') {
                                            // main
                                            // console.log("cond_main: " + cond_cond[c_n].cond_main);
                                            var target_main = cond_cond[c_n].cond_main.split(' ');
                                            if (target_main[0] === 'else' && target_main[1] === 'if') {
                                                target_main[0] = target_main[0] + " " + target_main[1];
                                                target_main[1] = target_main[2];
                                                target_main[2] = target_main[3];
                                                target_main[3] = target_main[4];
                                            }
                                            $("#cond_z" + (c_n+1) + "_1").val(target_main[0]);
                                            $("#cond_a" + (c_n+1) + "_1").val(target_main[1]);
                                            $("#cond_b" + (c_n+1) + "_1").val(target_main[2]);
                                            $("#cond_c" + (c_n+1) + "_1").val(target_main[3]);

                                            // add
                                            // console.log("cond_add: " + cond_cond[c_n].cond_add + "_" + typeof(cond_cond[c_n].cond_add));
                                            if (typeof(cond_cond[c_n].cond_add) === 'object') {
                                                for (let add_n = 0; add_n < cond_cond[c_n].cond_add.length; add_n++) {
                                                    // console.log("cond_cond[" + c_n + "].cond_add[" + add_n + "]: " + cond_cond[c_n].cond_add[add_n])
                                                    var target_add = cond_cond[c_n].cond_add[add_n].split(' ');
                                                    $("#cond_d" + (c_n+1) + "_" + (add_n+2) + "").val(target_add[0]);
                                                    $("#cond_a" + (c_n+1) + "_" + (add_n+2) + "").val(target_add[1]);
                                                    $("#cond_b" + (c_n+1) + "_" + (add_n+2) + "").val(target_add[2]);
                                                    $("#cond_c" + (c_n+1) + "_" + (add_n+2) + "").val(target_add[3]);
                                                }
                                            }

                                            // com
                                            // console.log("cond_com: " + cond_cond[c_n].cond_com + "_" + typeof(cond_cond[c_n].cond_com));
                                            if (typeof(cond_cond[c_n].cond_com) === 'object') {
                                                for (let obj_n = 0; obj_n < cond_cond[c_n].cond_com.length; obj_n++) {
                                                    // console.log("cond_cond[" + c_n + "].cond_com[" + obj_n + "]: " + cond_cond[c_n].cond_com[obj_n])    // R1_vacuum on
                                                    var target_obj = cond_cond[c_n].cond_com[obj_n].split(' ');
                                                    // console.log("target_obj: " + target_obj);                                                           // R1_vacuum,on
                                                    // console.log(pin_data_relay_option.includes(target_obj[0]))

                                                    // 物件動作包含此積木程式的物件
                                                    $("#do_obj" + (c_n+1) + "_" + (obj_n+1) + "").val(target_obj[0]);
                                                    // console.log('renew((' + (c_n+1) + ') + "_" + (' + (obj_n+1) + '))')
                                                    eval('renew((c_n+1) + "_" + (obj_n+1))');
                                                    $("#do_act" + (c_n+1) + "_" + (obj_n+1) + "").val(target_obj[1]);
                                                    // console.log("target_obj[0]: " + target_obj[0]);
                                                    if (target_obj[0] === 'sleep') {
                                                        showSleepValue((c_n+1) + "_" + (obj_n+1), target_obj[1]);
                                                    } else if (target_obj[0].includes("Motor")) {
                                                        showMotorValue((c_n+1) + "_" + (obj_n+1), target_obj[1]);
                                                    }
                                                    
                                                }
                                            }


                                        }
                                    }

                                    new_condition_i = COND_NUMS;                    // 總條件數
                                    cond_add_child_i = COND_ADD_NUMS;              // 子條件數
                                    act_add_child_i = COND_COM_NUMS;               // 子物件數

                                    // document.getElementById("DBvalue").innerText = COND_NUMS + "_" + COND_ADD_NUMS + "_" + COND_COM_NUMS;
                                },
                                error: function (thrownError){
                                    alert("cond 取值失敗\n" + thrownError.statusText);
                                    document.getElementById("DBvalue").innerText = "(請確認是否有此桶槽/貨櫃之條件積木)";
                                }
                            })
                            
                        }
                    </script>
                </td>
            </tr>
            <!-- coffee1.0 板子圖片 -->
            <!-- 燒錄制動器 / 感測器 -->
            
            <!-- 感測器取值頻率 -->
            
            <!-- 制動器感測器項目取值 -->
            
            <!-- 積木程式 -->
            <tr>
                <td>
                    <span style="background-color:burlywood">積木條件</span><br>
                    
                    <div id="DBvalue">
                        <!-- 積木條件 -->
                        積木在這裡
                    </div>

                    <script>
                        // 指令燒錄桶槽時, 跳出桶槽選項
                        var Value = '';
                        function renew_tank() {
                            var prog_container_value = $("#prog_container").val();
                            // console.log("prog_container_value: " + prog_container_value);

                            Value = '';
                            try {
                                for (let i = 0; i < containerTOtank[prog_container_value].length; i++) {
                                    Value += '<option value="' + Object.keys(containerTOtank[prog_container_value][i]) + '">' + Object.values(containerTOtank[prog_container_value][i]) + '</option>';
                                }
                            } catch (error) {
                                if (error.name === 'TypeError') {
                                    Value = '';
                                }
                            }
                            
                            var sectorSelect = document.getElementById("prog_tank");
                            if (sectorSelect != null) {
                                sectorSelect.innerHTML = Value;
                            }
                        }

                        function DBvalue_btn(z_notempty_NUM, a_notempty_NUM, o_notempty_NUM) {
                            var html = '<div id="box">';
                            for (let condadd_parent_num = 1; condadd_parent_num <= z_notempty_NUM; condadd_parent_num++) {
                                html += '' + 
                                        '<div id="newcondition_' + condadd_parent_num + '" class="newcondition_css">' +

                                        '<div id="condition' + condadd_parent_num + '">' +
                                        '<div id="condition' + condadd_parent_num + '_' + '1' + '">' +
                                        '條件 ' +
                                        '<select id="cond_z' + condadd_parent_num + '_' + '1' + '">' +
                                        '<option value="if">if</option>' +
                                        '<option value="else if">else if</option>' +
                                        '<option value="else">else</option>' +
                                        '</select> ' +
                                        '<input type="text" id="cond_a' + condadd_parent_num + '_' + '1' + '">' +
                                        // pin_data_sensor_option + 
                                        // '<option value="tankstatus">tankstatus</option>' +
                                        // '</textarea> ' +
                                        '<select id="cond_b' + condadd_parent_num + '_' + '1' + '">' +
                                        '<option value=""></option>' + 
                                        '<option value=">">&gt;</option>' + 
                                        '<option value=">=">&gt;=</option>' + 
                                        '<option value="==">==</option>' + 
                                        '<option value="<=">&lt;=</option>' + 
                                        '<option value="<">&lt;</option>' + 
                                        '</select> ' +
                                        '<input list="cond_list_c' + condadd_parent_num + '_' + '1' + '" id="cond_c' + condadd_parent_num + '_' + '1' + '">' +
                                        '<datalist id="cond_list_c' + condadd_parent_num + '_' + '1' + '">' +
                                        '<option value="on">ON</option>' +
                                        '<option value="off">OFF</option>' +
                                        '<option value="">(或請自行輸入數值)</option>' +
                                        '<option value="Waiting">空桶等待</option>' +
                                        '<option value="InputtingBean">入豆中</option>' +
                                        '<option value="InputtingBean_Pause">入豆暫停</option>' +
                                        '<option value="InputtingBean_Finish">入豆完成</option>' +
                                        '<option value="InputtingWater">夾層入水</option>' +
                                        '<option value="Drying">乾燥中</option>' +
                                        '<option value="Drying_Finish">乾燥完成</option>' +
                                        '<option value="OutputtingBean">可出豆</option>' +
                                        '<option value="OutputtingBean_Finish">出豆完成</option>' +
                                        '</datalist> ' +
                                        '<input type="button" class="input-cond-add" id="cond_add' + condadd_parent_num + '_' + '1' + '" value="條件++" onclick="cond_add(cond_add' + condadd_parent_num + '_' + '1' + ')"><br>' +
                                        '</div>';
                                for (let cond_add_child_i = 2; cond_add_child_i <= a_notempty_NUM; cond_add_child_i++) {
                                    // if (cond_d_data[condadd_parent_num][cond_add_child_i] == '') {
                                    //     // alert("cond_d_data[" + condadd_parent_num + "][" + cond_add_child_i + " ] + 為空值")
                                    //     continue
                                    // }
                                    html += 
                                    '<div id="condition' + condadd_parent_num + '_' + cond_add_child_i + '">' +
                                    '<select id="cond_d' + condadd_parent_num + '_' + cond_add_child_i + '">' + 
                                    '<option value=""></option>' + 
                                    '<option value="&&">&&</option>' + 
                                    '<option value="||">||</option>' + 
                                    '</select> ' + 
                                    '<input type="text" id="cond_a' + condadd_parent_num + '_' + cond_add_child_i + '">' + 
                                    // pin_data_sensor_option + 
                                    // '<option value="tankstatus">tankstatus</option>' +
                                    // '</select> ' + 
                                    '<select id="cond_b' + condadd_parent_num + '_' + cond_add_child_i + '">' + 
                                    '<option value=""></option>' + 
                                    '<option value=">">&gt;</option>' + 
                                    '<option value=">=">&gt;=</option>' + 
                                    '<option value="==">==</option>' + 
                                    '<option value="<=">&lt;=</option>' + 
                                    '<option value="<">&lt;</option>' + 
                                    '</select> ' +
                                    '<input list="cond_list_c' + condadd_parent_num + '_' + cond_add_child_i + '" id="cond_c' + condadd_parent_num + '_' + cond_add_child_i + '">' + 
                                    '<datalist id="cond_list_c' + condadd_parent_num + '_' + cond_add_child_i + '">' +
                                    '<option value="on">ON</option>' +
                                    '<option value="off">OFF</option>' +
                                    '<option value="">(或請自行輸入數值)</option>' +
                                    '<option value="Waiting">空桶等待</option>' +
                                    '<option value="InputtingBean">入豆中</option>' +
                                    '<option value="InputtingBean_Pause">入豆暫停</option>' +
                                    '<option value="InputtingBean_Finish">入豆完成</option>' +
                                    '<option value="InputtingWater">夾層入水</option>' +
                                    '<option value="Drying">乾燥中</option>' +
                                    '<option value="Drying_Finish">乾燥完成</option>' +
                                    '<option value="OutputtingBean">可出豆</option>' +
                                    '<option value="OutputtingBean_Finish">出豆完成</option>' +
                                    '</datalist> ' +
                                    '<input type="button" class="input-cond-delete" id="cond_del' + condadd_parent_num + '_' + cond_add_child_i + '" value="條件--" onclick="cond_del(\'' + condadd_parent_num + '_' + cond_add_child_i + '\');">';
                                    if (cond_add_child_i == 2) {
                                        html +=
                                        '<input type="button" class="input-cond-add" id="cond_add' + condadd_parent_num + '_' + cond_add_child_i + '" value="條件++" onclick="cond_add(cond_add' + condadd_parent_num + '_' + cond_add_child_i + ');"><br>';
                                    } else {
                                        html +=
                                        '<input type="button" class="input-cond-add" id="cond_add' + condadd_parent_num + '_' + cond_add_child_i + '" value="條件++" onclick="cond_add(cond_add' + condadd_parent_num + '_' + cond_add_child_i + ');" style="display: none;"><br>';
                                    }
                                    html += '</div>';
                                }

                                html += '</div>';

                                // 新增的物件動作
                                html += '<div id="action' + condadd_parent_num + '">';
                                for (let cond_add_child_i = 1; cond_add_child_i <= o_notempty_NUM; cond_add_child_i++) {
                                    // if (cond_obj_data[condadd_parent_num][cond_add_child_i] == '') {
                                    //     // alert("cond_d_data[" + condadd_parent_num + "][" + cond_add_child_i + " ] + 為空值")
                                    //     continue
                                    // }
                                    html += 
                                    '<div id="action' + condadd_parent_num + '_' + cond_add_child_i + '">' +
                                    '物件 ' +
                                    '<input type="text" id="do_obj' + condadd_parent_num + '_' + cond_add_child_i + '" onChange="renew(\''+ condadd_parent_num + '_' + cond_add_child_i + '\', this.selectedIndex);">' +
                                    
                                    // pin_data_relay_option +  
                                    
                                    // '</select>' +

                                    // '<select id="do_act' + new_condition_i + '_1">' +
                                    // '<option value="">請由左方選取物件' +
                                    // '</select> ' +
                                    ' 動作 ' +
                                    '<div id="do_action' + condadd_parent_num + '_' + cond_add_child_i + '" style="display: inline-block;">' +
                                    '</div>' +
                                    '<input type="button" class="input-act-delete" id="act_del' + condadd_parent_num + '_' + cond_add_child_i + '" value="物件動作--" onclick="act_del(\'' + condadd_parent_num + '_' + cond_add_child_i + '\');">';
                                    if (cond_add_child_i == 1) {
                                        html +=
                                        '<input type="button" class="input-act-add" id="act_add' + condadd_parent_num + '_' + cond_add_child_i + '" value="物件動作++" onclick="act_add(act_add' + condadd_parent_num + '_' + cond_add_child_i + ');"><br>';
                                    } else {
                                        html +=
                                        '<input type="button" class="input-act-add" id="act_add' + condadd_parent_num + '_' + cond_add_child_i + '" value="物件動作++" onclick="act_add(act_add' + condadd_parent_num + '_' + cond_add_child_i + ');" style="display: none;"><br>';
                                    }
                                    
                                    html += '</div>';
                                }
                                html += '</div>';

                                // 新增的 條件物件動作++ 條件物件動作-- 按鈕
                                html += '<input type="button" class="input-delete" id="del' + condadd_parent_num + '" value="條件物件動作--" onclick="Delete(' + condadd_parent_num + ');"><br>' +
                                        '<input type="button" class="input-add" id="add' + condadd_parent_num + '" value="條件物件動作++" onclick="Add(add' + condadd_parent_num + ');">' +
                                        '</div><br>' ;
                            }
                            html += '</div>' ;
                            var divbox = document.getElementById('DBvalue');
                            divbox.insertAdjacentHTML('beforeend', html);
                        }
                    </script>
                </td>
            </tr>
            
            <tr>
                <td>
                    <br>
                    <hr>
                    <br>
                </td>
                
            </tr>

            <!-- 積木取值 -->
            <tr>
                <td style="background-color: red; height: 77px; vertical-align: middle; text-align: center;">
                    <input type="button" id="test" value="(單元測試保留) 顯示積木條件" onclick="getValue();"><br>
                    <input type="button" id="test" value="(單元測試保留) 積木條件 json 格式 + MQTT + toDB" onclick="MQTTgetValue();"><br>
                </td>
            </tr>

            <!-- 積木取值 文字輸出 -->
            <tr>
                <td colspan="2">
                    *** 以下內容測試用, 之後會刪除<br>
                    Value : <span id="show_Value"></span><br><br>
                    <!-- MySQL : <span id="show_MySQLcommand"></span><br><br> -->
                    MQTT : <span id="show_MQTTcommand"></span>
                </td>
            </tr>

            <!-- 燒錄 -->
            <tr>
                <td style="background-color: red; height: 77px; vertical-align: middle; text-align: center;">
                    <input type="button" value="(單元測試保留) 更新 main.c 檔案" onclick="prog_creat_hex();"><br>
                    <input type="button" value="(單元測試保留) 更新 SDIO.hex 檔案 + MQTT 其內容 + 備份 SDIO.hex toGit" onclick="programmer();">
                </td>
            </tr>
            <tr>
                <td style="background-color: red; height: 50px; vertical-align: middle; text-align: center;">
                    <input type="button" value="進行 OTA 燒錄" onclick="prog_OTA();">
                </td>  
            </tr>
            <script>
                function prog_creat_hex() {
                    MQTTgetValue();
                    $.ajax({
                        type:"GET",
                        url:"/creat_hex",
                        data:TT,
                        dataType:"text",
                        async:false,
                        success:function (res) {
                            $("#creat_hex_Value").text(res);
                        },
                        error: function (thrownError) {
                            alert(thrownError.statusText);
                            $("#creat_hex_Value").text(thrownError.statusText);
                        }
                    })
                }

                function programmer(params) {
                    var confirm_programmer = confirm("即將燒錄 Coffee1.0, 確定請按下 [確認] :");
                    if (!confirm_programmer) {
                        alert("已取消燒錄");
                    } else {
                        var prog_tank_data = $('#prog_tank').find(':selected').val();
                        var prog_data = {'tank':prog_tank_data,
                                         'USERNAME': USERNAME}
                        $("#programmer_Value").text("控制板燒錄中 ...");
                        $.get('/board_programmer', prog_data, function (res) {
                            $("#programmer_Value").text(res);
                            alert(res);
                        }, 'text');
                    }
                }

                function prog_OTA() {
                    prog_creat_hex();
                    programmer();
                }
            </script>

            <!-- 燒錄結果顯示 -->
            <tr>
                <td colspan="2">
                    creat_hex 結果：<span id="creat_hex_Value"></span><br>
                    <br>
                    燒錄結果：<span id="programmer_Value"></span>
                </td>
            </tr>
        </table>
        

        <!-- Relay、感測器選值時, 左側圖片顯示對應項目 -->
        <script>
            // 當右方的下拉式選單選擇時, 更新左方圖片上的文字 - relay
            function select_relay(id) {
                var select_relay_text = $("#select_relay_" + id).find(':selected').text()
                // console.log("select_relay_text: " + select_relay_text)
                if (select_relay_text == '') {
                    $("#relay" + id).text('');
                    document.getElementById("relay" + id).style.backgroundColor = 'transparent';
                } else {
                    $("#relay" + id).text(select_relay_text);
                    document.getElementById("relay" + id).style.backgroundColor = 'lightblue';
                    document.getElementById("relay" + id).style.color = 'black';
                    document.getElementById("relay" + id).style.fontWeight = '600';
                }
            }
            
            var sensorlist = ['', '分壓類比', 'PWM', 'PWM', '類比', '類比', '分壓類比', '類比', '485', '數位', 
                                'PWM', '數位', '數位', '分壓類比', '數位', 'I2C', 'UART', 'UART', 'UART', '數位']
            // selectSensor 
            function selectSensor(PinNum) {
                var Pin_sensor = $("#selectSensor_" + PinNum).find(':selected').text();
                // console.log("Pin_sensor: " + Pin_sensor)
                if (Pin_sensor == '') {
                    $("#sensor_" + PinNum).text('');
                    document.getElementById("sensor_" + PinNum).style.backgroundColor = 'transparent';
                } else {
                    $("#sensor_" + PinNum).text(Pin_sensor);
                    // alert("sensorlist[PinNum]]\n" + sensorlist[PinNum.substring(1)])
                    if (sensorlist[PinNum.substring(1)] == '類比') {
                        document.getElementById("sensor_" + PinNum).style.backgroundColor = 'lightgreen';
                    } else if (sensorlist[PinNum.substring(1)] == 'PWM') {
                        document.getElementById("sensor_" + PinNum).style.backgroundColor = 'lightcyan';
                    } else if (sensorlist[PinNum.substring(1)] == '數位') {
                        document.getElementById("sensor_" + PinNum).style.backgroundColor = 'lightgoldenrodyellow';
                    } else if (sensorlist[PinNum.substring(1)] == 'UART') {
                        document.getElementById("sensor_" + PinNum).style.backgroundColor = 'linen';
                    } else if (sensorlist[PinNum.substring(1)] == '分壓類比') {
                        document.getElementById("sensor_" + PinNum).style.backgroundColor = 'lavender';
                    } else if (sensorlist[PinNum.substring(1)] == 'I2C' || sensorlist[PinNum.substring(1)] == '485') {
                        document.getElementById("sensor_" + PinNum).style.backgroundColor = 'lightpink';
                    }
                    document.getElementById("sensor_" + PinNum).style.color = 'black';
                    document.getElementById("sensor_" + PinNum).style.fontWeight = '600';
                }
            }
        </script>
        

        <!--  -->
        <script>
            var relay_data = '';        // 積木程式 制動器選項
            var sensor_data = '';       // 積木程式 感測器選項
            var obj_data = '';          // 積木程式 物件選項：桶槽狀態 暫停秒數

            const list_R = ['R1','R2','R3','R4','R5','R6','R7','R8','R9','R10','R11','R12','R13','R14','R15','R16','R17','R18','R19','R20']
            var list_relay_item = [];   // R1~R20 對應的 relay 取值

            const list_M = ['M1','M2','M3','M4','M5','M6','M7','M8','M9','M10','M11','M12','M13','M14','M15','M16','M17','M18','M19']
            var list_sensor_item = [];   // M1~M19 對應的 sensor 取值

            const list_M_Hz = ['M1_Hz','M2_Hz','M3_Hz','M4_Hz','M5_Hz','M6_Hz','M7_Hz','M8_Hz','M9_Hz','M10_Hz',
                                'M11_Hz','M12_Hz','M13_Hz','M14_Hz','M15_Hz','M16_Hz','M17_Hz','M18_Hz','M19_Hz'];
            var list_sensorHz_item = [] // M1~M19 對應的取值頻率

            function ItemGetValueToDB() {
                var ethernet_text = $("#select_ethernet_1").find(':selected').val();
                var wifi_text = $("#select_wifi_1").find(':selected').val();
                var zigbee_text = $("#select_zigbee_1").find(':selected').val();
                var tank_text = $('#prog_tank').find(':selected').val();
                console.log("ethernet_text: " + ethernet_text);
                console.log("wifi_text: " + wifi_text);
                console.log("zigbee_text: " + zigbee_text);
                console.log("tank_text: " + tank_text);

                list_relay_item = [];
                for (let i = 1; i < 21; i++) {
                    var relay_text = $("#select_relay_" + i).find(':selected').val();
                    if (relay_text != '') {
                        list_relay_item.push(relay_text);
                    } else {
                        list_relay_item.push('');
                    }
                }
                console.log("list_relay_item: " + list_relay_item);

                list_sensor_item = [];
                for (let i = 1; i < 20; i++) {
                    var sensor_text = $("#selectSensor_M" + i).find(':selected').val();
                    if (sensor_text != '') {
                        list_sensor_item.push(sensor_text);
                    } else {
                        list_sensor_item.push('');
                    }
                }
                console.log("list_sensor_item: " + list_sensor_item);

                list_sensorHz_item = [];
                // list_M_Hz = ['M1_Hz','M2_Hz','M3_Hz','M4_Hz','M5_Hz','M6_Hz','M7_Hz','M8_Hz','M9_Hz','M10_Hz',
                //                 'M11_Hz','M12_Hz','M13_Hz','M14_Hz','M15_Hz','M16_Hz','M17_Hz','M18_Hz','M19_Hz'];
                // var list_sensorHz_item
                for (let i = 1; i < 20; i++) {
                    var sensor_text = $("#M" + i + "_Hz").val();
                    if (sensor_text !== undefined) {
                        console.log("sensor_text: ", sensor_text);
                        list_sensorHz_item.push(sensor_text);
                    } else {
                        list_sensorHz_item.push('');
                    }
                }
                
                var SQL_insert = 'INSERT INTO `coffee1_0_pin` (' + 
                                '`datetime`, `tid`, `ethernet`, `wifi`, `zigbee`, `' + 
                                list_R.join("`, `") + 
                                '`, `' + 
                                list_M.join("`, `") + 
                                '`, `' + 
                                list_M_Hz.join("`, `") + 
                                '`) VALUES (' + 
                                'current_timestamp(), "' + Tank_ID + '", "' + ethernet_text + '", "' + wifi_text + '", "' + zigbee_text + '", "' +
                                list_relay_item.join('", "')  + 
                                '", "' + 
                                list_sensor_item.join('", "')  + 
                                '", "' + 
                                list_sensorHz_item.join('", "')  + 
                                '")';

                var sql_data = { "sql":SQL_insert };
                console.log("sql_data: ", sql_data)
                $.get('/sql_get', sql_data, function (res) {
                    if (res['response'] == '') {
                        alert("OK");
                    } else {
                        alert(res['response']);
                    }
                    location.reload();
                }, 'json');

                // ItemGetValue();
                // location.reload();
            }

            function ItemGetValue() {
                list_relay_item = [];
                // ethernet、wifi、zigbee 取值測試
                // var select_ethernet_text = $("#select_ethernet_1").find(':selected').text()
                // var select_wifi_text = $("#select_wifi_1").find(':selected').text()
                // var select_zigbee_text = $("#select_zigbee_1").find(':selected').text()
                // console.log("select_ethernet_text: " + select_ethernet_text)
                // console.log("select_wifi_text: " + select_wifi_text)
                // console.log("select_zigbee_text: " + select_zigbee_text)

                // 制動器感測器 下拉式選單 不可更改
                $('.select-input').prop('disabled', true);

                // relay 取值
                relay_dict = {};
                for (let i = 1; i < 21; i++) {
                    var relay_text = $("#select_relay_" + i).find(':selected').val();
                    if (relay_text != '') {
                        relay_dict["R" + i] = "R" + i + "_" + relay_text;
                        // console.log("R" + i + " : " + relay_text);
                        list_relay_item.push(relay_text);
                    } else {
                        // relay_dict["R" + i] = "";
                        // console.log("R" + i + " : ");
                        list_relay_item.push('');
                    }
                }
                // console.log("list_relay_item: " + list_relay_item);

                // relay_data = '<optgroup label="制動器狀態">';
                relay_data = '<option value=""></option>';
                for (let r in relay_dict) {
                    // console.log(r + " : " + relay_dict[r]);
                    relay_data += '<option value="' + relay_dict[r] + '">' + relay_dict[r] + '</option>';
                }
                relay_data += '<option value="sleep">sleep</option>' +
                              '<option value="tankstatus">tankstatus</option>';
                // relay_data += '</optgroup>'
                // console.log("relay_data: " + relay_data)
                

                // sensor 取值 dict
                sensor_dict = {};
                for (let i = 1; i < 20; i++) {
                    var sensor_text = $("#selectSensor_M" + i).find(':selected').text();
                    if (sensor_text != '') {
                        sensor_dict["M" + i] = "M" + i + "_" + sensor_text;
                        // console.log("selectSensor_M" + i);
                        // console.log("M" + i + "_" + sensor_text);
                    } else {
                        // sensor_dict["M" + i] = "";
                        // console.log("selectSensor_M" + i);
                        // console.log("");
                    }
                }
                sensor_data = '';
                // sensor_data = '<optgroup label="感測器數值">';
                for (let s in sensor_dict) {
                    // console.log(s + " : " + sensor_dict[s])
                    sensor_data += '<option value="' + sensor_dict[s] + '">' + sensor_dict[s] + '</option>';
                }
                sensor_data += '<option value="tankstatus">tankstatus</option>';
                // sensor_data += '</optgroup>';
                // console.log("sensor_data: " + sensor_data)

                console.log("relay_data: " + relay_data);
                console.log("sensor_data: " + sensor_data);

                var relay_select_data = document.getElementById("");

                // // 賦值條件 a 
                // var sectorSelect = document.getElementById("cond_a1_1");
                // sectorSelect.innerHTML = '<option value="">制動器 / 感測器</option>' +  relay_data + sensor_data;

                // obj_data = '<option value="' + 'sleep' + '">' + 'sleep' + '</option>' + 
                //            '<option value="' + 'tankstatus' + '">' + 'tankstatus' + '</option>';

                // // 賦值物件 a 
                // var sectorSelect = document.getElementById("do_obj1_1");
                // sectorSelect.innerHTML = '<option value="">制動器 / 暫停秒數 / 桶槽狀態</option>' + relay_data + obj_data;


                //  ===== 下方傳值未測試 ====================================================

                // var loader_data = {
                //     "ethernet_list":select_ethernet_text,
                //     "wifi_list":select_wifi_text,
                //     "zigbee_list":select_zigbee_text,

                //     "relay_list":String(relay_list),
                //     "pwm_list":String(pwm_list),
                //     "digital_list":String(digital_list),
                //     "uart_list":String(uart_list),
                //     "i2c_list":String(i2c_list),
                //     "s485_list":String(s485_list),
                //     "ppa_list":String(ppa_list)
                // };

                // $.ajax({
                //     type:"GET",
                //     url:"/loader",
                //     dataType:"JSON",
                //     data:loader_data,
                //     success:function (res) {
                //         alert("ItemGetValue loader: " + res.response)
                //     },
                //     error: function (thrownError) {
                //         alert(thrownError)
                //     }

                // })
                
            }

            relay_obj2act = {'vacuum':['on', 'off'],
                             'solenoidvalve':['on', 'off'],
                             'diskvalve':['on', 'off'],
                             'warninglight':['on', 'off'],
                             'camera':['on', 'off'],
                             'heater':['on', 'off'],
                             'pump':['on', 'off'],
                             'sleep':'',
                             'tankstatus':['Waiting', 'InputtingBean', 'InputtingBean_Pause', 'InputtingBean_Finish', 
                                           'Drying', 'OutputtingBean', 'InputtingWater']
                            }
            dry_object = new Array();
            dry_object['tankstatus'] = ["Waiting", "InputtingBean", "InputtingBean_Pause", "InputtingBean_Finish", 
                                        "InputtingWater", "Drying", "Drying_Finish", "OutputtingBean", "OutputtingBean_Finish"];  // 暫停秒數
            // DRY_CONTAINER_STATUS 讓 do_act / dry_object 判斷用
            const DRY_CONTAINER_STATUS = {
                                            'Waiting':'空桶等待',
                                            'InputtingBean':'入豆中',
                                            'InputtingBean_Pause':'入豆暫停',
                                            'InputtingBean_Finish':'入豆完成',
                                            'InputtingWater':'夾層入水',
                                            'Drying':'乾燥中',
                                            'Drying_Finish':'乾燥完成',
                                            'OutputtingBean':'可出豆',
                                            'OutputtingBean_Finish':'出豆完成'
                                        }

            function renew(obj_num, index) {
                // console.log("renew!!!" + obj_num + "_____" + index);
                var index_name = $('#do_obj' + obj_num).val();
                // console.log("index_name: " + index_name);
                var Value = '';
                if (index_name === 'sleep') {
                    Value = '   暫停秒數 : ' + 
                            ' <input type="range" style="cursor: pointer;" id="do_act' + obj_num + '" min="5" max="60" step="5" value="10" oninput="showSleepValue(\'' + obj_num + '\', this.value)" onchange="showSleepValue(\'' + obj_num + '\', this.value)">' + 
                            ' <span id="sleepValue_text' + obj_num + '">10s</span>';
                } else if (index_name === 'tankstatus') {
                    Value = '<select id="do_act' + obj_num + '">';
                    for(var i=0; i<dry_object['tankstatus'].length; i++){
                        Value += '<option value=' + dry_object['tankstatus'][i] + '>' + DRY_CONTAINER_STATUS[dry_object['tankstatus'][i]] + '</option>';
                    }
                    Value += '</select>';
                } else if (index_name.includes('Motor')) {
                    Value = '   指定轉速 : ' + 
                            ' <input type="range" style="cursor: pointer;" id="do_act' + obj_num + '" min="-50" max="50" step="5" value="20" oninput="showMotorValue(\'' + obj_num + '\', this.value)" onchange="showMotorValue(\'' + obj_num + '\', this.value)">' + 
                            ' <span id="motorValue_text' + obj_num + '">20rpm</span>';
                } else if (index_name === '' || index_name == undefined) {
                } else {
                    Value = '<select id="do_act' + obj_num + '">' + 
                            '<option value="on">on</option>' + 
                            '<option value="off">off</option>' + 
                            '</select>';
                }
                // try {
                //     Value = '<select id="do_act' + obj_num + '">';
                //     for(var i=0; i<dry_object[index].length; i++){
                //         Value += '<option value=' + dry_object[index][i] + '>' + dry_object[index][i] + '</option>';
                //     }
                //     Value += '</select>';
                // } catch (e) {
                //     if (e.name == 'TypeError' && index == '5') {
                //         Value = '   轉速 : ' + 
                //                 ' <input type="range" style="cursor: pointer;" id="do_act' + obj_num + '" min="-50" max="50" step="5" value="0" oninput="showMotorValue(\'' + obj_num + '\', this.value)" onchange="showMotorValue(\'' + obj_num + '\', this.value)">' + 
                //                 ' <span id="motorValue_text' + obj_num + '">0</span>';
                //     } else if (e.name == 'TypeError' && index == '11') {
                //         Value = '   目標溫度 : ' + 
                //                 ' <input type="range" style="cursor: pointer;" id="do_act' + obj_num + '" min="20.0" max="50.0" step="0.5" value="28.0" oninput="showTempValue(\'' + obj_num + '\', this.value)" onchange="showTempValue(\'' + obj_num + '\', this.value)">' + 
                //                 ' <span id="tempValue_text' + obj_num + '">28.0</span>';
                //     } else if (e.name == 'TypeError' && index == '18') {
                //         Value = '   暫停秒數 : ' + 
                //                 ' <input type="range" style="cursor: pointer;" id="do_act' + obj_num + '" min="5" max="60" step="5" value="10" oninput="showSleepValue(\'' + obj_num + '\', this.value)" onchange="showSleepValue(\'' + obj_num + '\', this.value)">' + 
                //                 ' <span id="sleepValue_text' + obj_num + '">10s</span>';
                //     }
                // }

                var sectorSelect = document.getElementById("do_action" + obj_num);
                if (sectorSelect != null) {
                    sectorSelect.innerHTML = Value;
                }
            }

            function showSleepValue(obj_num, value) {
                document.getElementById("sleepValue_text" + obj_num).innerText = value + 's';
            }
            function showMotorValue(obj_num, value) {
                document.getElementById("motorValue_text" + obj_num).innerText = value + 'rpm';
            }
            function showSensorHzValue(obj_num, value) {
                document.getElementById(obj_num + "_HzText").innerText = value + 'Hz';
            }
        </script>


        <script>
            var cond_main = '';                 // 主條件
            var cond_add_list = [];             // 附加條件 List
            var cond_add_data = '';             // 欲加入附加條件的資料
            var cond_com_list = [];             // 動作 List
            var cond_com_data = '';             // 欲加入動作的資料
            var cond_item = [];                 // 主條件+附加條件+動作 List

            function showValue() {
                cond_item = [];
                var command_test = '';
                Z = 0;
                TT = {};                            // 將總條件句/附加條件句/物件動作句存入 字典, 後續傳給 dry_block_format 再組合
                var SQL_insert_total = '';          // MySQL 指令 全部條件輸出

                TT['mainLength'] = 0                    // 總條件數
                TT['addLength'] = 0                     // 子條件數
                TT['comLength'] = 0                     // 子物件數

                // 條件物件動作 取值
                // for (let z = 1; z <= 2; z++) {
                for (let z = 1; z <= new_condition_i; z++) {
                    
                    var set_key = [];                   // List 加入變數名稱, INSERT DB 用
                    var set_value = [];                 // List 加入值, INSERT DB 用

                    // 初始清空
                    cond_main = '';
                    // if-while 取值
                    try {
                        var cond_z_value = document.getElementById("cond_z" + z + "_1").value;
                        if (cond_z_value == '') {
                            // alert('if/while 欄位未輸入')
                        } else {
                            Z = Z + 1;
                            // if (Z > 4) {
                            //     alert("[Z > 4] 總條件數不得超過 3 項")
                            //     break
                            // }
                            // set_key.push('cond_z' + z + '_1');
                            set_key.push('cond_z' + Z + '_1');
                            set_value.push(cond_z_value);
                            console.log("cond_z_value: " + cond_z_value);
                            cond_main += cond_z_value + ' ';
                            console.log("cond_main: " + cond_main);
                        }
                    } catch (error) {
                        if (error.name == 'TypeError') {
                        } else {
                            alert("cond_z" + z + "_1: " + error.name)
                        }
                    }
                    X = 1;
                    cond_add_list = []; // 附加條件 List 清空
                    for (let x = 1; x <= cond_add_child_i; x++) {
                    // for (let x = 1; x <= cond_add_child_i; x++) {
                        cond_add_data = '';  // 附加條件資料 清空
                        if (x == 1) {
                            // 主條件
                            try {
                                var cond_a_value = document.getElementById("cond_a" + z + "_" + x).value;
                                if (cond_a_value == '') {
                                    // alert('主條件 感測器 欄位未輸入')
                                } else {
                                    // set_key.push('cond_a' + z + '_' + X);
                                    set_key.push('cond_a' + Z + '_' + X);
                                    set_value.push(cond_a_value);
                                    console.log("cond_a_value: " + cond_a_value);
                                    cond_main += cond_a_value + ' ';
                                }
                            } catch (error) {
                                if (error.name == 'TypeError') {
                                } else {
                                    alert("cond_a" + z + "_" + x + ": " + error.name)
                                }
                            }
                            // 子條件取值 : 條件中 > = <
                            try {
                                var cond_b_value = document.getElementById("cond_b" + z + "_" + x).value;
                                if (cond_b_value == '') {
                                    // alert('主條件 比較運算子 欄位未輸入')
                                } else {
                                    // set_key.push('cond_b' + z + '_' + X);
                                    set_key.push('cond_b' + Z + '_' + X);
                                    set_value.push(cond_b_value);
                                    console.log("cond_b_value: " + cond_b_value);
                                    // if (cond_b_value == 'MoreThan') { cond_main += '> '; }
                                    // else if (cond_b_value == 'MoreThanEqualTo') { cond_main += '>= '; }
                                    // else if (cond_b_value == 'Equal') { cond_main += '== '; }
                                    // else if (cond_b_value == 'LessThanEqualTo') { cond_main += '<= '; }
                                    // else if (cond_b_value == 'LessThan') { cond_main += '< '; }
                                    cond_main += cond_b_value + ' ';
                                }
                            } catch (error) {
                                if (error.name == 'TypeError') {
                                } else {
                                    alert("cond_b" + z + "_" + x + ": " + error.name)
                                }
                            }
                            // 子條件取值 : 條件右 ON / OFF / 輸入數值
                            try {
                                var cond_c_value = document.getElementById("cond_c" + z + "_" + x).value;
                                if (cond_c_value == '') {
                                    // alert('主條件 數值 欄位未輸入')
                                } else {
                                    // console.log("Ctest: " + typeof(cond_c_value))
                                    set_key.push('cond_c' + Z + '_' + X);
                                    set_value.push(cond_c_value);
                                    console.log("cond_c_value: " + cond_c_value);
                                    if (relay_obj2act['tankstatus'].includes(cond_c_value)) {
                                        cond_main += "'" + cond_c_value + "'";
                                    } else {
                                        cond_main += cond_c_value;
                                    }
                                    // set_key.push('cond_c' + z + '_' + X);
                                }
                            } catch (error) {
                                if (error.name == 'TypeError') {
                                } else {
                                    alert("cond_c" + z + "_" + x + ": " + error.name)
                                }
                            }
                        } else {
                            // 附加條件 x > 1
                            // 子條件取值 : 條件連接 and or
                            try {
                                var cond_d_value = document.getElementById("cond_d" + z + "_" + x).value;
                                if (cond_d_value == '') {
                                    // alert('附加條件 and/or 欄位未輸入')
                                } else {
                                    X = X + 1;
                                    // if (X > 13) {
                                    //     alert("[X > 13] 子條件數不得超過 13 項")
                                    //     break
                                    // }
                                    // set_key.push('cond_d' + z + '_' + X);
                                    set_key.push('cond_d' + Z + '_' + X);
                                    set_value.push(cond_d_value);
                                    cond_add_data += cond_d_value + ' ';
                                }
                            } catch (error) {
                                if (error.name == 'TypeError') {
                                } else {
                                    alert("cond_d" + z + "_" + x + ": " + error.name)
                                }
                            }
                            // 感測器取值 : 
                            try {
                                var cond_a_value = document.getElementById("cond_a" + z + "_" + x).value;
                                if (cond_a_value == '') {
                                    // alert('附加條件 感測器 欄位未輸入')
                                } else {
                                    // set_key.push('cond_a' + z + '_' + X);
                                    set_key.push('cond_a' + Z + '_' + X);
                                    set_value.push(cond_a_value);
                                    cond_add_data += cond_a_value + ' ';
                                }
                            } catch (error) {
                                if (error.name == 'TypeError') {
                                } else {
                                    alert("cond_a" + z + "_" + x + ": " + error.name)
                                }
                            }
                            // 子條件取值 : 條件中 > = <
                            try {
                                var cond_b_value = document.getElementById("cond_b" + z + "_" + x).value;
                                if (cond_b_value == '') {
                                    // alert('附加條件 比較運算子 欄位未輸入')
                                } else {
                                    // set_key.push('cond_b' + z + '_' + X);
                                    set_key.push('cond_b' + Z + '_' + X);
                                    set_value.push(cond_b_value);
                                    // if (cond_b_value == 'MoreThan') { cond_main += '> '; }
                                    // else if (cond_b_value == 'MoreThanEqualTo') { cond_main += '>= '; }
                                    // else if (cond_b_value == 'Equal') { cond_main += '== '; }
                                    // else if (cond_b_value == 'LessThanEqualTo') { cond_main += '<= '; }
                                    // else if (cond_b_value == 'LessThan') { cond_main += '< '; }
                                    cond_add_data += cond_b_value;
                                }
                            } catch (error) {
                                if (error.name == 'TypeError') {
                                } else {
                                    alert("cond_b" + z + "_" + x + ": " + error.name)
                                }
                            }
                            // 子條件取值 : 條件右 ON / OFF / 輸入數值
                            try {
                                var cond_c_value = document.getElementById("cond_c" + z + "_" + x).value;
                                if (cond_c_value == '') {
                                    // alert('附加條件 數值 欄位未輸入')
                                } else {
                                    // console.log("Ctest: " + cond_c_value)
                                    set_key.push('cond_c' + Z + '_' + X);
                                    set_value.push(cond_c_value);
                                    if (relay_obj2act['tankstatus'].includes(cond_c_value)) {
                                        cond_add_data += " '" + cond_c_value + "'";
                                    } else {
                                        cond_add_data += " " + cond_c_value;
                                    }
                                    // set_key.push('cond_c' + z + '_' + X);
                                }
                            } catch (error) {
                                if (error.name == 'TypeError') {
                                } else {
                                    alert("cond_c" + z + "_" + x + ": " + error.name)
                                }
                            }
                            if (cond_add_data != '') {
                                console.log("cond_add_list: " + cond_add_list)
                                console.log("cond_add_data: " + cond_add_data)
                                cond_add_list.push(cond_add_data)
                            }
                        }
                    }

                    // 子 物件動作 取值
                    Y = 0;
                    cond_com_list = [];
                    for (let y = 1; y <= act_add_child_i; y++) {
                        cond_com_data = '';
                        // 子物件動作取值 : 物件 do_obj1_1
                        try {
                            var do_obj_value = document.getElementById("do_obj" + z + "_" + y).value;
                            // console.log("do_obj" + z + "_" + y + " : " + do_obj_value)
                            if (do_obj_value == '') {
                                // alert('物件 欄位未輸入')
                            } else {
                                Y = Y + 1;
                                // if (Y > 20) {
                                //     alert("[Y > 20] 子物件數不得超過 20 項")
                                //     break
                                // }
                                set_key.push('do_obj' + Z + '_' + Y);
                                set_value.push(do_obj_value);
                                cond_com_data += do_obj_value + ' ';
                            }
                        } catch (error) {
                            if (error.name == 'TypeError') {
                            } else {
                                alert("do_obj" + z + "_" + y + ": " + error.name)
                            }
                        }

                        // 子物件動作取值 : 動作 do_act1_1
                        try {
                            var do_act_value = document.getElementById("do_act" + z + "_" + y).value;
                            // console.log("do_act" + z + "_" + y + " : " + do_act_value)
                            if (do_act_value == '') {
                                // alert('動作 欄位未輸入')
                            } else {
                                set_key.push('do_act' + Z + '_' + Y);
                                // if (DRY_CONTAINER_STATUS[do_act_value] != undefined ) {
                                //     console.log("=== != undefined ===")
                                //     console.log(DRY_CONTAINER_STATUS[do_act_value])
                                //     set_value.push(DRY_CONTAINER_STATUS[do_act_value]);
                                //     cond_com_data += DRY_CONTAINER_STATUS[do_act_value];

                                //     cond_com_list.push(cond_com_data);
                                // } else {
                                set_value.push(do_act_value);
                                cond_com_data += do_act_value;
                                cond_com_list.push(cond_com_data);
                                // }
                            }
                        } catch (error) {
                            if (error.name == 'TypeError') {
                            } else {
                                alert("do_act" + z + "_" + y + ": " + error.name)
                            }
                        }
                    }
                    // ===== 0324 測試 OK 勿刪 ===================================================
                    var A = 1;
                    var B = 1;
                    console.log("cond_add_list: " + cond_add_list);
                    console.log("cond_com_list: " + cond_com_list);
                    if (cond_main != '') {
                        TT['cond_main' + Z] = cond_main;
                        for (let a = 0; a < cond_add_list.length; a++) {
                            TT['cond_add'+ Z + '_' + A] = cond_add_list[a];
                            A = A + 1;
                        }
                        for (let b = 0; b < cond_com_list.length; b++) { 
                            TT['cond_com'+ Z + '_' + B] = cond_com_list[b]; 
                            B = B + 1;
                        }

                        cond_item.push(
                                '{"cond_main":"' + cond_main + '", ' + 
                                '"cond_add":["' + cond_add_list.join('", "') + '"], ' + 
                                '"cond_com":["' + cond_com_list.join('", "') + '"]}'
                        )
                    }
                    console.log("cond_add_list.length: " + cond_add_list.length + "__" + typeof(cond_add_list.length))
                    console.log("TT['addLength']: " + TT['addLength'] + "__" + typeof(TT['addLength']))
                    if (cond_add_list.length > TT['addLength']) {
                        TT['addLength'] = cond_add_list.length
                    }
                    if (cond_com_list.length > TT['comLength']) {
                        TT['comLength'] = cond_com_list.length
                    }
                    
                }

                // ========================================================
                TT['mainLength'] = Z
                
                console.log("***TT['mainLength']: " + TT['mainLength']);
                console.log("***TT['addLength']: " + TT['addLength']);
                console.log("***TT['comLength']: " + TT['comLength']);
                TT['tank_num'] = $('#prog_tank').find(':selected').val();
                // ========================================================

                document.getElementById('show_Value').innerText = '"cond": [' + cond_item + ']';   
            }

            function getValue(){
                var confirm_getValue = confirm("請確認積木條件無誤後, 再按下 [確認] :");
                if (!confirm_getValue) {
                    alert("已取消積木取值測試");
                } else {
                    showValue();          
                }
            }

            function MQTTgetValue() {
                var confirm_getValue = confirm("請確認積木條件無誤後, 再按下 [確認] :");
                if (!confirm_getValue) {
                    alert("已取消積木取值測試");
                } else {
                    showValue();
                    var msg_data;
                    
                    $.get('/dry_block_format', TT, function (res) {
                        // alert("MQTT OK")
                        document.getElementById('show_MQTTcommand').innerText = JSON.stringify(res.response);
                        msg_data = JSON.stringify(res.response);

                        // 存值
                        var prog_tank_data = $('#prog_tank').find(':selected').val();
                        var SQL_insert = 'INSERT INTO `block_cond_dry_t` (' + 
                                        '`datetime`, `UserName`, `tank_num`, `cond`) VALUES (' + 
                                        'current_timestamp(), \'' + USERNAME + '\', \'' + prog_tank_data.toLowerCase() + '\', \'' 
                                        + String(msg_data).replaceAll("'", "") + '\');';
                        console.log("SQL_insert: " + SQL_insert);
                        sql_data = { "sql" : SQL_insert };
                        // $.get('/sql_get', sql_data, function (res) {
                        //     // alert("OK")
                        // }, 'json');

                    }, 'json');
                }
            }
        </script>

        <!-- 條件物件 ++ -- -->
        <script>
            function act_add(evt) {
                evt.style.display = "none";
                var actadd_parent_num = String(evt.id).split('_')[1].slice(3, )
                // console.log("actadd_parent_num: " + actadd_parent_num)

                act_add_child_i++;

                var html = '';
                html +=
                '<div id="action' + actadd_parent_num + '_' + act_add_child_i + '">' +
                '物件 ' +
                '<input type="text" id="do_obj' + actadd_parent_num + '_' + act_add_child_i + '" onChange="renew(\'' + actadd_parent_num + '_' + act_add_child_i + '\', this.selectedIndex);">' +
                
                // pin_data_relay_option + 

                // '</select> ' +

                '動作 ' +
                '<div id="do_action' + actadd_parent_num + '_' + act_add_child_i + '" style="display: inline-block;">' +
                '</div>' +
                // '<select id="do_act' + actadd_parent_num + '_' + act_add_child_i + '">' +
                // '<option value="">請由左方選取物件</option>' +
                // '</select> ' +
                '<input type="button" class="input-act-delete" id="act_del' + actadd_parent_num + '_' + act_add_child_i + '" value="物件動作--" onclick="act_del(\'' + actadd_parent_num + '_' + act_add_child_i + '\');">' +
                '<input type="button" class="input-act-add" id="act_add' + actadd_parent_num + '_' + act_add_child_i + '" value="物件動作++" onclick="act_add(act_add' + actadd_parent_num + '_' + act_add_child_i + ');"><br>' +
                '</div>';

                var divbox = document.getElementById('action' + actadd_parent_num);
                divbox.insertAdjacentHTML('beforeend', html);
            }

            function act_del(evt) {
                var del_action = document.getElementById('action' + evt);
                del_action.innerHTML = ""

                var parentObj = del_action.parentNode;       // 取得欲刪除 div 的父類別
                parentObj.removeChild(del_action)            // 刪除 div
                
                var del_act_parent_num = String(evt).split('_')[0]
                var del_act_child_num = String(evt).split('_')[1]
                // console.log('del_act_parent_num: ' + del_act_parent_num)
                // console.log('del_act_child_num: ' + del_act_child_num)
                var button_return_id = document.getElementById('act_add' + del_act_parent_num + '_' + String(parseInt(del_act_child_num)-1));
                // console.log("test: " + 'cond_add' + del_act_parent_num + '_' + String(parseInt(del_act_child_num)-1))
                // console.log("button_return_id: " + button_return_id)    // null
                if (button_return_id == null) {
                    var button_return_id = document.getElementById('act_add' + del_act_parent_num + '_1');
                }
                button_return_id.style.display = "inline";

            }   
            // --------------------------------------------------------------------------------------------------
            
            
            function cond_add(evt) {                                                // cond_add1_1 下一個是 cond_add1(條件)_2(子條件)
                evt.style.display = "none";                                         // 不顯示原按鈕
                var condadd_parent_num = String(evt.id).split('_')[1].slice(3, )    // 把第一個條件的編號記下
                // console.log("condadd_parent_num: " + condadd_parent_num)

                cond_add_child_i++

                var html = '';
                html +=
                '<div id="condition' + condadd_parent_num + '_' + cond_add_child_i + '">' +
                '<select id="cond_d' + condadd_parent_num + '_' + cond_add_child_i + '">' + 
                '<option value=""></option>' + 
                '<option value="&&">&&</option>' + 
                '<option value="||">||</option>' + 
                '</select> ' + 
                '<input type="text" id="cond_a' + condadd_parent_num + '_' + cond_add_child_i + '">' + 
                // pin_data_sensor_option + 
                // '<option value="tankstatus">tankstatus</option>' +
                // '</select> ' + 
                '<select id="cond_b' + condadd_parent_num + '_' + cond_add_child_i + '">' + 
                '<option value=""></option>' + 
                '<option value=">">&gt;</option>' + 
                '<option value=">=">&gt;=</option>' + 
                '<option value="==">==</option>' + 
                '<option value="<=">&lt;=</option>' + 
                '<option value="<">&lt;</option>' + 
                '</select> ' +
                '<input list="cond_list_c' + condadd_parent_num + '_' + cond_add_child_i + '" id="cond_c' + condadd_parent_num + '_' + cond_add_child_i + '">' + 
                '<datalist id="cond_list_c' + condadd_parent_num + '_' + cond_add_child_i + '">' +
                '<option value="on">ON</option>' +
                '<option value="off">OFF</option>' +
                '<option value="">(或請自行輸入數值)</option>' +
                '<option value="Waiting">空桶等待</option>' +
                '<option value="InputtingBean">入豆中</option>' +
                '<option value="InputtingBean_Pause">入豆暫停</option>' +
                '<option value="InputtingBean_Finish">入豆完成</option>' +
                '<option value="InputtingWater">夾層入水</option>' +
                '<option value="Drying">乾燥中</option>' +
                '<option value="Drying_Finish">乾燥完成</option>' +
                '<option value="OutputtingBean">可出豆</option>' +
                '<option value="OutputtingBean_Finish">出豆完成</option>' +
                '</datalist> ' +
                '<input type="button" class="input-cond-delete" id="cond_del' + condadd_parent_num + '_' + cond_add_child_i + '" value="條件--" onclick="cond_del(\'' + condadd_parent_num + '_' + cond_add_child_i + '\');">' +
                '<input type="button" class="input-cond-add" id="cond_add' + condadd_parent_num + '_' + cond_add_child_i + '" value="條件++" onclick="cond_add(cond_add' + condadd_parent_num + '_' + cond_add_child_i + ');"><br>' +
                '</div>';

                var divbox = document.getElementById('condition' + condadd_parent_num);
                divbox.insertAdjacentHTML('beforeend', html);
            }

            function cond_del(evt) {
                // console.log('evt: ' + evt)
                var del_cond_child = document.getElementById('condition' + evt);
                // console.log("del_cond_child: " + del_cond_child)
                del_cond_child.innerHTML = ""

                var parentObj = del_cond_child.parentNode;       // 取得欲刪除 div 的父類別
                parentObj.removeChild(del_cond_child)            // 刪除 div

                // 上一個按鈕要顯示出來
                var del_cond_parent_num = String(evt).split('_')[0]
                var del_cond_child_num = String(evt).split('_')[1]
                console.log('del_cond_parent_num: ' + del_cond_parent_num)
                console.log('del_cond_child_num: ' + del_cond_child_num)
                var button_return_id = document.getElementById('cond_add' + del_cond_parent_num + '_' + String(parseInt(del_cond_child_num)-1));
                console.log("test: " + 'cond_add' + del_cond_parent_num + '_' + String(parseInt(del_cond_child_num)-1))
                console.log("button_return_id: " + button_return_id)    // null
                if (button_return_id == null) {
                    var button_return_id = document.getElementById('cond_add' + del_cond_parent_num + '_1');
                }
                try {
                    button_return_id.style.display = "inline";
                } catch (error) {
                    if (error.name !== 'TypeError') {
                        alert("cond_add" + del_cond_parent_num + "_" + String(parseInt(del_cond_child_num)-1) + " 子條件刪除錯誤\n" + 
                                error.name + "\n" + 
                                error.message);
                    }
                }
                
            }

            // -------------------------------------------------------------------------------------------------------------


            function Add(evt) {                                 // 網頁初始按鈕 onclick="Add(add1);
                evt.style.display = "none";                     // 元素不顯示。將 add1 的 input-button 不顯示
                new_condition_i++;                                            // 設定編號用
                // var div = document.createElement('div');        // 輸出 <div></div>。此時並不會顯示, 
                                                                // 需透過 appendChild()、insertBefore() 或 replaceChild() 等方法將新元素加入至指定的位置之後才會顯示。
                // var cond_number = String(evt).slice(3, )        // 目前的 condition 條件物件動作 數 (最外層)
                // var cond_a = 'cond_a' + cond_number + '_' + new_condition_i;  // [條件] 左方 : 制動器感測器
                // var cond_b = 'cond_b' + cond_number + '_' + new_condition_i;  // [條件] 中間 : > / = / < 
                // var cond_c = 'cond_c' + cond_number + '_' + new_condition_i;  // [條件] 右方 : ON / OFF / 數值
                // var cond_d = 'cond_d' + cond_number + '_' + new_condition_i;  // 條件] 最左方條件連接 : and / or
                // div.id = 'newcondition_' + new_condition_i;                   // 設定 div 的 id
                // div.style.marginTop = "10px";                   // 新增的 div 設定 marginTop 屬性值
                var html = ''

                
                // 新增的條件
                html += 
                '<div id="newcondition_' + new_condition_i + '" class="newcondition_css">' +
                
                '<div id="condition' + new_condition_i + '">' +
                '<div id="condition' + new_condition_i + '_1">' +
                '條件 ' +
                '<select id="cond_z' + new_condition_i + '_1">' +
                '<option value="if">if</option>' +
                '<option value="else if">else if</option>' +
                '<option value="else">else</option>' +
                '</select> ' +
                '<input type="text" id="cond_a' + new_condition_i + '_1">' +
                // pin_data_sensor_option + 
                // '<option value="tankstatus">tankstatus</option>' +
                // '</select> ' +
                '<select id="cond_b' + new_condition_i + '_1">' +
                '<option value=""></option>' + 
                '<option value=">">&gt;</option>' + 
                '<option value=">=">&gt;=</option>' + 
                '<option value="==">==</option>' + 
                '<option value="<=">&lt;=</option>' + 
                '<option value="<">&lt;</option>' + 
                '</select> ' +
                '<input list="cond_list_c' + new_condition_i + '_1" id="cond_c' + new_condition_i + '_1">' +
                '<datalist id="cond_list_c' + new_condition_i + '_1">' +
                '<option value="on">ON</option>' +
                '<option value="off">OFF</option>' +
                '<option value="">(或請自行輸入數值)</option>' +
                '<option value="Waiting">空桶等待</option>' +
                '<option value="InputtingBean">入豆中</option>' +
                '<option value="InputtingBean_Pause">入豆暫停</option>' +
                '<option value="InputtingBean_Finish">入豆完成</option>' +
                '<option value="InputtingWater">夾層入水</option>' +
                '<option value="Drying">乾燥中</option>' +
                '<option value="Drying_Finish">乾燥完成</option>' +
                '<option value="OutputtingBean">可出豆</option>' +
                '<option value="OutputtingBean_Finish">出豆完成</option>' +
                '</datalist> ' +
                '<input type="button" class="input-cond-add" id="cond_add' + new_condition_i + '_1" value="條件++" onclick="cond_add(cond_add' + new_condition_i + '_1)"><br>' +
                '</div></div>';

                // 新增的物件動作
                html +=
                '<div id="action' + new_condition_i + '">' +
                '<div id="action' + new_condition_i + '_1">' +
                '物件 ' +
                '<input type="text" id="do_obj' + new_condition_i + '_1" onChange="renew(\''+ new_condition_i + '_1\', this.selectedIndex);">' +
                // pin_data_relay_option + 
                // '</select>' +

                '動作 ' +
                '<div id="do_action' + new_condition_i + '_1" style="display: inline-block;">' +
                '</div>' +
                '<input type="button" class="input-act-add" id="act_add' + new_condition_i + '_1" value="物件動作++" onclick="act_add(act_add' + new_condition_i + '_1);"><br>' +
                '</div>' +
                '</div>' +

                // 新增的 條件物件動作++ 條件物件動作-- 按鈕
                '<input type="button" class="input-delete" id="del' + new_condition_i + '" value="條件物件動作--" onclick="Delete(' + new_condition_i + ');"><br>' +
                '<input type="button" class="input-add" id="add' + new_condition_i + '" value="條件物件動作++" onclick="Add(add' + new_condition_i + ');">' +
                '</div>' ;

                var divbox = document.getElementById('box');
                divbox.insertAdjacentHTML('beforeend', html);

            };
            function Delete(evt) {
                var del_condition = document.getElementById('newcondition_' + evt);
                del_condition.innerHTML = ""

                var parentObj = del_condition.parentNode;       // 取得欲刪除 div 的父類別
                parentObj.removeChild(del_condition)            // 刪除 div

                // 上一個按鈕要顯示出來
                var button_return_id = document.getElementById('add' + String(parseInt(evt)-1));
                if (button_return_id == null) {
                    var button_return_id = document.getElementById('add1');
                }
                // console.log('button_return_id: ' + button_return_id)
                button_return_id.style.display = "block";        // 元素顯示。顯示前一個 input-button
            };
            // -------------------------------------------------------------------------------------- 
        </script>
        
        
        <div id="coffee_footer">
            <!-- 匯入共同使用的 footer.html 內容 -->
            {% include 'footer.html' %}
            <br>
            <br>
        </div>
    </div>
</body>

</html>