Shan
/
CoffeeProject
відгалужено від rita/CoffeeProject


			
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937
							<!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">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">

    <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
    <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
    
    
    <script language="JavaScript">
        

        $(function(){
            // 網頁 title
            $("#coffee_title_pc").text("設備單元整合運作");
            $("#coffee_title_phone").text("設備單元整合運作");
            // 使用者權限判斷
            // $('.select-input').prop('disabled', false);

            
        });
        
    </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: 3000px;">
        <div id="coffee_header">
            <!-- 匯入共同使用的 header.html 內容 -->
            {% include 'header.html' %}
        </div>

        <table style="position: absolute; top: 75px; left: 25px; width: max-content;">
            
            <!-- coffee1.0 板子圖片 -->
            <!-- 燒錄制動器 / 感測器 -->
            <tr>
                <td style="width: 900px; vertical-align: top;">
                    <img src="../static/img/0103_board_coffee1.0_tag.png" style="width: 100%;">
                </td>
                <td style="width: 20px;">

                </td>
                <td>
                    <table border="5" style="border: 3px white solid;">
                        <tr>
                            <td colspan="3">
                                ethernet :
                                <select id="select_ethernet_1" onchange="" class="select-input">
                                    <option>OFF</option>
                                    <option>ON</option>
                                </select>
                                &nbsp; 
                                Wi-Fi :
                                <select id="select_wifi_1" onchange="" class="select-input">
                                    <option>OFF</option>
                                    <option>ON</option>
                                </select>
                                &nbsp; 
                                zigbee :
                                <select id="select_zigbee_1" onchange="" class="select-input">
                                    <option>OFF</option>
                                    <option>ON</option>
                                </select>
                                <br>
                            </td>
                        </tr>
                        <tr>
                            <!-- Relay 1-10 -->
                            <td style="background-color: lightblue;">
                                Relay 1 :
                                <select id="select_relay_1" onchange="select_relay('1')" class="select-input">
                                    <option></option>
                                    <option value="vacuum">真空吸料機</option>
                                    <option value="solenoidvalve_disinfect">電磁閥_消毒</option>
                                    <option value="solenoidvalve_innerwaterout">電磁閥_桶內排廢水</option>
                                    <option value="solenoidvalve_outerwaterin">電磁閥_外桶入水</option>
                                    <option value="diskvalve">蝴蝶閥</option>
                                    <option value="warninglight">警示燈</option>
                                    <option value="camera">攝影機</option>
                                    <option value="heater">電熱管</option>
                                    <option value="pump">雙核泵</option>
                                </select>
                                <br>
                                Relay 2 :
                                <select id="select_relay_2" onchange="select_relay('2')" class="select-input">
                                    <option></option>
                                    <option value="vacuum">真空吸料機</option>
                                    <option value="solenoidvalve_disinfect">電磁閥_消毒</option>
                                    <option value="solenoidvalve_innerwaterout">電磁閥_桶內排廢水</option>
                                    <option value="solenoidvalve_outerwaterin">電磁閥_外桶入水</option>
                                    <option value="diskvalve">蝴蝶閥</option>
                                    <option value="warninglight">警示燈</option>
                                    <option value="camera">攝影機</option>
                                    <option value="heater">電熱管</option>
                                    <option value="pump">雙核泵</option>
                                </select>
                                <br>
                                Relay 3 :
                                <select id="select_relay_3" onchange="select_relay('3')" class="select-input">
                                    <option></option>
                                    <option value="vacuum">真空吸料機</option>
                                    <option value="solenoidvalve_disinfect">電磁閥_消毒</option>
                                    <option value="solenoidvalve_innerwaterout">電磁閥_桶內排廢水</option>
                                    <option value="solenoidvalve_outerwaterin">電磁閥_外桶入水</option>
                                    <option value="diskvalve">蝴蝶閥</option>
                                    <option value="warninglight">警示燈</option>
                                    <option value="camera">攝影機</option>
                                    <option value="heater">電熱管</option>
                                    <option value="pump">雙核泵</option>
                                </select>
                                <br>
                                Relay 4 :
                                <select id="select_relay_4" onchange="select_relay('4')" class="select-input">
                                    <option></option>
                                    <option value="vacuum">真空吸料機</option>
                                    <option value="solenoidvalve_disinfect">電磁閥_消毒</option>
                                    <option value="solenoidvalve_innerwaterout">電磁閥_桶內排廢水</option>
                                    <option value="solenoidvalve_outerwaterin">電磁閥_外桶入水</option>
                                    <option value="diskvalve">蝴蝶閥</option>
                                    <option value="warninglight">警示燈</option>
                                    <option value="camera">攝影機</option>
                                    <option value="heater">電熱管</option>
                                    <option value="pump">雙核泵</option>
                                </select>
                                <br>
                                Relay 5 :
                                <select id="select_relay_5" onchange="select_relay('5')" class="select-input">
                                    <option></option>
                                    <option value="vacuum">真空吸料機</option>
                                    <option value="solenoidvalve_disinfect">電磁閥_消毒</option>
                                    <option value="solenoidvalve_innerwaterout">電磁閥_桶內排廢水</option>
                                    <option value="solenoidvalve_outerwaterin">電磁閥_外桶入水</option>
                                    <option value="diskvalve">蝴蝶閥</option>
                                    <option value="warninglight">警示燈</option>
                                    <option value="camera">攝影機</option>
                                    <option value="heater">電熱管</option>
                                    <option value="pump">雙核泵</option>
                                </select>
                                <br>
                                Relay 6 :
                                <select id="select_relay_6" onchange="select_relay('6')" class="select-input">
                                    <option></option>
                                    <option value="vacuum">真空吸料機</option>
                                    <option value="solenoidvalve_disinfect">電磁閥_消毒</option>
                                    <option value="solenoidvalve_innerwaterout">電磁閥_桶內排廢水</option>
                                    <option value="solenoidvalve_outerwaterin">電磁閥_外桶入水</option>
                                    <option value="diskvalve">蝴蝶閥</option>
                                    <option value="warninglight">警示燈</option>
                                    <option value="camera">攝影機</option>
                                    <option value="heater">電熱管</option>
                                    <option value="pump">雙核泵</option>
                                </select>
                                <br>
                                Relay 7 :
                                <select id="select_relay_7" onchange="select_relay('7')" class="select-input">
                                    <option></option>
                                    <option value="vacuum">真空吸料機</option>
                                    <option value="solenoidvalve_disinfect">電磁閥_消毒</option>
                                    <option value="solenoidvalve_innerwaterout">電磁閥_桶內排廢水</option>
                                    <option value="solenoidvalve_outerwaterin">電磁閥_外桶入水</option>
                                    <option value="diskvalve">蝴蝶閥</option>
                                    <option value="warninglight">警示燈</option>
                                    <option value="camera">攝影機</option>
                                    <option value="heater">電熱管</option>
                                    <option value="pump">雙核泵</option>
                                </select>
                                <br>
                                Relay 8 :
                                <select id="select_relay_8" onchange="select_relay('8')" class="select-input">
                                    <option></option>
                                    <option value="vacuum">真空吸料機</option>
                                    <option value="solenoidvalve_disinfect">電磁閥_消毒</option>
                                    <option value="solenoidvalve_innerwaterout">電磁閥_桶內排廢水</option>
                                    <option value="solenoidvalve_outerwaterin">電磁閥_外桶入水</option>
                                    <option value="diskvalve">蝴蝶閥</option>
                                    <option value="warninglight">警示燈</option>
                                    <option value="camera">攝影機</option>
                                    <option value="heater">電熱管</option>
                                    <option value="pump">雙核泵</option>
                                </select>
                                <br>
                                Relay 9 :
                                <select id="select_relay_9" onchange="select_relay('9')" class="select-input">
                                    <option></option>
                                    <option value="vacuum">真空吸料機</option>
                                    <option value="solenoidvalve_disinfect">電磁閥_消毒</option>
                                    <option value="solenoidvalve_innerwaterout">電磁閥_桶內排廢水</option>
                                    <option value="solenoidvalve_outerwaterin">電磁閥_外桶入水</option>
                                    <option value="diskvalve">蝴蝶閥</option>
                                    <option value="warninglight">警示燈</option>
                                    <option value="camera">攝影機</option>
                                    <option value="heater">電熱管</option>
                                    <option value="pump">雙核泵</option>
                                </select>
                                <br>
                                Relay 10 :
                                <select id="select_relay_10" onchange="select_relay('10')" class="select-input">
                                    <option></option>
                                    <option value="vacuum">真空吸料機</option>
                                    <option value="solenoidvalve_disinfect">電磁閥_消毒</option>
                                    <option value="solenoidvalve_innerwaterout">電磁閥_桶內排廢水</option>
                                    <option value="solenoidvalve_outerwaterin">電磁閥_外桶入水</option>
                                    <option value="diskvalve">蝴蝶閥</option>
                                    <option value="warninglight">警示燈</option>
                                    <option value="camera">攝影機</option>
                                    <option value="heater">電熱管</option>
                                    <option value="pump">雙核泵</option>
                                </select>
                            </td>
                            <td></td>
                            <!-- Relay 11-20 -->
                            <td style="background-color: lightblue;">
                                Relay 11 :
                                <select id="select_relay_11" onchange="select_relay('11')" class="select-input">
                                    <option></option>
                                    <option value="vacuum">真空吸料機</option>
                                    <option value="solenoidvalve_disinfect">電磁閥_消毒</option>
                                    <option value="solenoidvalve_innerwaterout">電磁閥_桶內排廢水</option>
                                    <option value="solenoidvalve_outerwaterin">電磁閥_外桶入水</option>
                                    <option value="diskvalve">蝴蝶閥</option>
                                    <option value="warninglight">警示燈</option>
                                    <option value="camera">攝影機</option>
                                    <option value="heater">電熱管</option>
                                    <option value="pump">雙核泵</option>
                                </select>
                                <br>
                                Relay 12 :
                                <select id="select_relay_12" onchange="select_relay('12')" class="select-input">
                                    <option></option>
                                    <option value="vacuum">真空吸料機</option>
                                    <option value="solenoidvalve_disinfect">電磁閥_消毒</option>
                                    <option value="solenoidvalve_innerwaterout">電磁閥_桶內排廢水</option>
                                    <option value="solenoidvalve_outerwaterin">電磁閥_外桶入水</option>
                                    <option value="diskvalve">蝴蝶閥</option>
                                    <option value="warninglight">警示燈</option>
                                    <option value="camera">攝影機</option>
                                    <option value="heater">電熱管</option>
                                    <option value="pump">雙核泵</option>
                                </select>
                                <br>
                                Relay 13 :
                                <select id="select_relay_13" onchange="select_relay('13')" class="select-input">
                                    <option></option>
                                    <option value="vacuum">真空吸料機</option>
                                    <option value="solenoidvalve_disinfect">電磁閥_消毒</option>
                                    <option value="solenoidvalve_innerwaterout">電磁閥_桶內排廢水</option>
                                    <option value="solenoidvalve_outerwaterin">電磁閥_外桶入水</option>
                                    <option value="diskvalve">蝴蝶閥</option>
                                    <option value="warninglight">警示燈</option>
                                    <option value="camera">攝影機</option>
                                    <option value="heater">電熱管</option>
                                    <option value="pump">雙核泵</option>
                                </select>
                                <br>
                                Relay 14 :
                                <select id="select_relay_14" onchange="select_relay('14')" class="select-input">
                                    <option></option>
                                    <option value="vacuum">真空吸料機</option>
                                    <option value="solenoidvalve_disinfect">電磁閥_消毒</option>
                                    <option value="solenoidvalve_innerwaterout">電磁閥_桶內排廢水</option>
                                    <option value="solenoidvalve_outerwaterin">電磁閥_外桶入水</option>
                                    <option value="diskvalve">蝴蝶閥</option>
                                    <option value="warninglight">警示燈</option>
                                    <option value="camera">攝影機</option>
                                    <option value="heater">電熱管</option>
                                    <option value="pump">雙核泵</option>
                                </select>
                                <br>
                                Relay 15 :
                                <select id="select_relay_15" onchange="select_relay('15')" class="select-input">
                                    <option></option>
                                    <option value="vacuum">真空吸料機</option>
                                    <option value="solenoidvalve_disinfect">電磁閥_消毒</option>
                                    <option value="solenoidvalve_innerwaterout">電磁閥_桶內排廢水</option>
                                    <option value="solenoidvalve_outerwaterin">電磁閥_外桶入水</option>
                                    <option value="diskvalve">蝴蝶閥</option>
                                    <option value="warninglight">警示燈</option>
                                    <option value="camera">攝影機</option>
                                    <option value="heater">電熱管</option>
                                    <option value="pump">雙核泵</option>
                                </select>
                                <br>
                                Relay 16 :
                                <select id="select_relay_16" onchange="select_relay('16')" class="select-input">
                                    <option></option>
                                    <option value="vacuum">真空吸料機</option>
                                    <option value="solenoidvalve_disinfect">電磁閥_消毒</option>
                                    <option value="solenoidvalve_innerwaterout">電磁閥_桶內排廢水</option>
                                    <option value="solenoidvalve_outerwaterin">電磁閥_外桶入水</option>
                                    <option value="diskvalve">蝴蝶閥</option>
                                    <option value="warninglight">警示燈</option>
                                    <option value="camera">攝影機</option>
                                    <option value="heater">電熱管</option>
                                    <option value="pump">雙核泵</option>
                                </select>
                                <br>
                                Relay 17 :
                                <select id="select_relay_17" onchange="select_relay('17')" class="select-input">
                                    <option></option>
                                    <option value="vacuum">真空吸料機</option>
                                    <option value="solenoidvalve_disinfect">電磁閥_消毒</option>
                                    <option value="solenoidvalve_innerwaterout">電磁閥_桶內排廢水</option>
                                    <option value="solenoidvalve_outerwaterin">電磁閥_外桶入水</option>
                                    <option value="diskvalve">蝴蝶閥</option>
                                    <option value="warninglight">警示燈</option>
                                    <option value="camera">攝影機</option>
                                    <option value="heater">電熱管</option>
                                    <option value="pump">雙核泵</option>
                                </select>
                                <br>
                                Relay 18 :
                                <select id="select_relay_18" onchange="select_relay('18')" class="select-input">
                                    <option></option>
                                    <option value="vacuum">真空吸料機</option>
                                    <option value="solenoidvalve_disinfect">電磁閥_消毒</option>
                                    <option value="solenoidvalve_innerwaterout">電磁閥_桶內排廢水</option>
                                    <option value="solenoidvalve_outerwaterin">電磁閥_外桶入水</option>
                                    <option value="diskvalve">蝴蝶閥</option>
                                    <option value="warninglight">警示燈</option>
                                    <option value="camera">攝影機</option>
                                    <option value="heater">電熱管</option>
                                    <option value="pump">雙核泵</option>
                                </select>
                                <br>
                                Relay 19 :
                                <select id="select_relay_19" onchange="select_relay('19')" class="select-input">
                                    <option></option>
                                    <option value="vacuum">真空吸料機</option>
                                    <option value="solenoidvalve_disinfect">電磁閥_消毒</option>
                                    <option value="solenoidvalve_innerwaterout">電磁閥_桶內排廢水</option>
                                    <option value="solenoidvalve_outerwaterin">電磁閥_外桶入水</option>
                                    <option value="diskvalve">蝴蝶閥</option>
                                    <option value="warninglight">警示燈</option>
                                    <option value="camera">攝影機</option>
                                    <option value="heater">電熱管</option>
                                    <option value="pump">雙核泵</option>
                                </select>
                                <br>
                                Relay 20 :
                                <select id="select_relay_20" onchange="select_relay('20')" class="select-input">
                                    <option></option>
                                    <option value="vacuum">真空吸料機</option>
                                    <option value="solenoidvalve_disinfect">電磁閥_消毒</option>
                                    <option value="solenoidvalve_innerwaterout">電磁閥_桶內排廢水</option>
                                    <option value="solenoidvalve_outerwaterin">電磁閥_外桶入水</option>
                                    <option value="diskvalve">蝴蝶閥</option>
                                    <option value="warninglight">警示燈</option>
                                    <option value="camera">攝影機</option>
                                    <option value="heater">電熱管</option>
                                    <option value="pump">雙核泵</option>
                                </select>
                                <br>
                            </td>
                        </tr>
                        <tr>
                            <td> </td>
                        </tr>
                        <tr>
                            <!-- 類比 -->
                            <td style="background-color: lightgreen;">
                                類比 M4 : 
                                <select id="selectSensor_M4" onchange="selectSensor('M4')" class="select-input">
                                    <option></option>  
                                    <option>PH</option>
                                    <option>DO</option>
                                    <option>ORP</option>
                                </select>
                                <br>
                                類比 M5 : 
                                <select id="selectSensor_M5" onchange="selectSensor('M5')" class="select-input">
                                    <option></option>  
                                    <option>PH</option>
                                    <option>DO</option>
                                    <option>ORP</option>
                                </select>
                                <br>
                                類比 M7 : 
                                <select id="selectSensor_M7" onchange="selectSensor('M7')"  class="select-input">
                                    <option></option>  
                                    <option>PH</option>
                                    <option>DO</option>
                                    <option>ORP</option>
                                </select>
                                <br>
                            </td>
                            <td></td>
                            <!-- 數位 1-3 -->
                            <td style="background-color: lightgoldenrodyellow;">
                                數位 M9 :
                                <select id="selectSensor_M9" onchange="selectSensor('M9')" class="select-input">
                                    <option></option>
                                    <option>WATERLEVEL</option>
                                    <option>motorfeedback</option>
                                    <option>butterflyvalvefeedback</option>
                                </select>
                                <br>
                                數位 M12 :
                                <select id="selectSensor_M12" onchange="selectSensor('M12')" class="select-input">
                                    <option></option>
                                    <option>WATERLEVEL</option>
                                    <option>motorfeedback</option>
                                    <option>butterflyvalvefeedback</option>
                                </select>
                                <br>
                                數位 M19 :
                                <select id="selectSensor_M19" onchange="selectSensor('M19')" class="select-input">
                                    <option></option>
                                    <option>WATERLEVEL</option>
                                    <option>motorfeedback</option>
                                    <option>butterflyvalvefeedback</option>
                                </select>
                                <br>
                                
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                        </tr>
                        <tr>
                            <!-- PWM -->
                            <td style="background-color: lightcyan;">
                                PWM M10 :
                                <select id="selectSensor_M10" onchange="selectSensor('M10')" class="select-input">
                                    <option></option>
                                    <option>Motor</option>
                                </select>
                                <br>
                                PWM M2 :
                                <select id="selectSensor_M2" onchange="selectSensor('M2')" class="select-input">
                                    <option></option>
                                    <option>Servo</option>
                                </select>
                                <br>
                                PWM M3 :
                                <select id="selectSensor_M3" onchange="selectSensor('M3')" class="select-input">
                                    <option></option>
                                    <option>Servo</option>
                                </select>
                                <br>
                                
                            </td>
                            <td></td>
                            <!-- 數位 4-5 -->
                            <td style="background-color: lightgoldenrodyellow;">
                                數位 M14 :
                                <select id="selectSensor_M14" onchange="selectSensor('M14')" class="select-input">
                                    <option></option>
                                    <option>SHT11</option>
                                    <option>DS18B20</option>
                                </select>
                                <br>
                                數位 M11 :
                                <select id="selectSensor_M11" onchange="selectSensor('M11')" class="select-input">
                                    <option></option>
                                    <option>WATERLEVEL</option>
                                    <option>motorfeedback</option>
                                    <option>butterflyvalvefeedback</option>
                                </select>
                                <br>
                                <br>
                            </td>
                        </tr>
                        <tr>
                            <td> </td>
                        </tr>
                        <tr>
                            <!-- UART -->
                            <td style="background-color: linen;">
                                UART M16 :
                                <select id="selectSensor_M16" onchange="selectSensor('M16')" class="select-input">
                                    <option></option>
                                    <option>EC</option>
                                    <option>DS18B20</option>
                                    <option>Servo真空閥</option>
                                </select>
                                <br>
                                UART M17 :
                                <select id="selectSensor_M17" onchange="selectSensor('M17')" class="select-input">
                                    <option></option>
                                    <option>SHT11</option>
                                    <option>Servo真空閥</option>
                                </select>
                                <br>
                                UART M18 :
                                <select id="selectSensor_M18" onchange="selectSensor('M18')" class="select-input">
                                    <option></option>
                                
                                </select>
                                <br>
                            </td>
                            <td></td>
                            <!-- 分壓類比 1 -->
                            <td style="background-color:lavender;">
                                <br>
                                <br>
                                分壓類比 M6:
                                <select id="selectSensor_M6" onchange="selectSensor('M6')" class="select-input">
                                    <option></option>
                                    <option>SEN0189</option>
                                </select>
                                <br>
                            </td>
                        </tr>
                        <tr>
                            <!-- I2C -->
                            <!-- 485 -->
                            <td style="background-color: lightpink;">
                                I2C M15:
                                <select id="selectSensor_M15" onchange="selectSensor('M15')" class="select-input">
                                    <option></option>
                                    <option>BMP280</option>
                                </select>
                                <br>
                                485 M8:
                                <select id="selectSensor_M8" onchange="selectSensor('M8')" class="select-input">
                                    <option></option>
                                    <option>Soil</option>
                                </select>
                                <br>
                            </td>
                            <td></td>
                            <!-- 分壓類比 2-3 -->
                            <td style="background-color:lavender;">
                                分壓類比 M13:
                                <select id="selectSensor_M13" onchange="selectSensor('M13')" class="select-input">
                                    <option></option>
                                    <option>SEN0189</option>
                                </select>
                                <br>
                                分壓類比 M1:
                                <select id="selectSensor_M1" onchange="selectSensor('M1')" class="select-input">
                                    <option></option>
                                    <option>SonicESMUS07</option>
                                </select>
                                <br>
                            </td>
                        </tr>
                        <tr>
                            <td> </td>
                        </tr>
                        
                    </table>
                </td>
            </tr>

            <!-- 感測器取值頻率 -->
            <tr>
                <td colspan="5">
                    <span style="background-color:burlywood">感測器取值頻率</span><br>
                    <div id="SensorHz"></div><br>
                </td>
            </tr>

            <!-- 制動器感測器項目取值 -->
            <tr>
                <td colspan="5" style="background-color: red; height: 50px; vertical-align: middle; text-align: center;">
                    <!-- <input type="button" value="制動器感測器項目取值" onclick="ItemGetValue()"> -->
                    <input type="button" value="(單元測試保留) 腳位配置 toDB" onclick="ItemGetValueToDB()">
                    <!-- <input type="button" value="ItemGetValue" onclick="ItemGetValue()"> -->
                </td>
            </tr>

            <!-- 0526 積木測試 -->
            <!-- <tr>
                <td colspan="5" style="background-color:aqua">
                    test
                </td>
            </tr> -->
            
            <!-- 積木程式 -->
            <tr>
                <td>
                    <span style="background-color:burlywood">積木條件</span><br>
                    <span>入料儲豆槽為：{{tank_import}}</span><br>
                    <span>出料儲豆槽為：{{tank_export}}</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> ' +
                                        '<select id="cond_a' + condadd_parent_num + '_' + '1' + '">' +
                                        pin_data_sensor_option + 
                                        '<option value="tankstatus">tankstatus</option>' +
                                        '</select> ' +
                                        '<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> ' + 
                                    '<select id="cond_a' + condadd_parent_num + '_' + cond_add_child_i + '">' + 
                                    pin_data_sensor_option + 
                                    '<option value="tankstatus">tankstatus</option>' +
                                    // '</optgroup>' + 
                                    '</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 + '">' +
                                    '物件 ' +
                                    '<select id="do_obj' + condadd_parent_num + '_' + cond_add_child_i + '" onChange="renew(\''+ condadd_parent_num + '_' + cond_add_child_i + '\', this.selectedIndex);">' +
                                    // '<option value=" ">制動器 / 暫停秒數 / 桶槽狀態</option>' +
                                    pin_data_relay_option +  
                                    // '<option value="input_vacuum_status">入料儲豆槽真空吸料機</option>' +
                                    // '<option value="tank_vacuum_status">真空吸料機</option>' +
                                    // '<option value="tank_threewayvalve_vacuum_status">吸料機三通閥</option>' +
                                    // '<option value="tank_solenoid_disinfect_status">消毒電磁閥</option>' +
                                    // '<option value="tank_motor_status">馬達</option>' +
                                    // '<option value="outer_solenoid_water_status">桶外進水電磁閥</option>' +
                                    // '<option value="tank_solenoid_water_out_status">廢水排水電磁閥</option>' +
                                    // '<option value="tank_heater1_status">加熱棒 1</option>' +
                                    // '<option value="tank_heater2_status">加熱棒 2</option>' +
                                    // '<option value="tank_temp_enable">溫控開關</option>' +
                                    // '<option value="tank_temp">溫度設定</option>' +
                                    // '<option value="tank_diskvalve_status">蝴蝶閥</option>' +
                                    // '<option value="output_vacuum_status">出料儲豆槽真空吸料機</option>' +
                                    // '<option value="tank_magneticSwitch_status">電磁開關</option>' +
                                    // '<option value="tank_emergencySwitch_status">緊急開關</option>' +
                                    // '<option value="tank_camera_status">攝影機</option>' +
                                    // '<option value="tank_warningLight_status">警示燈</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 colspan="5" 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 colspan="5" 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 colspan="5" 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 + '\', \'' 
                                        + 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 + '">' +
                '物件 ' +
                '<select id="do_obj' + actadd_parent_num + '_' + act_add_child_i + '" onChange="renew(\'' + actadd_parent_num + '_' + act_add_child_i + '\', this.selectedIndex);">' +
                // '<option value=" ">制動器 / 暫停秒數 / 桶槽狀態</option>' +
                pin_data_relay_option + 
                // '<option value="input_vacuum_status">入料儲豆槽真空吸料機</option>' +
                // '<option value="tank_vacuum_status">真空吸料機</option>' +
                // '<option value="tank_threewayvalve_vacuum_status">吸料機三通閥</option>' +
                // '<option value="tank_solenoid_disinfect_status">消毒電磁閥</option>' +
                // '<option value="tank_motor_status">馬達</option>' +
                // '<option value="outer_solenoid_water_status">桶外進水電磁閥</option>' +
                // '<option value="tank_solenoid_water_out_status">廢水排水電磁閥</option>' +
                // '<option value="tank_heater1_status">加熱棒 1</option>' +
                // '<option value="tank_heater2_status">加熱棒 2</option>' +
                // '<option value="tank_temp_enable">溫控開關</option>' +
                // '<option value="tank_temp">溫度設定</option>' +
                // '<option value="tank_diskvalve_status">蝴蝶閥</option>' +
                // '<option value="output_vacuum_status">出料儲豆槽真空吸料機</option>' +
                // '<option value="tank_magneticSwitch_status">電磁開關</option>' +
                // '<option value="tank_emergencySwitch_status">緊急開關</option>' +
                // '<option value="tank_camera_status">攝影機</option>' +
                // '<option value="tank_warningLight_status">警示燈</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> ' + 
                '<select id="cond_a' + condadd_parent_num + '_' + cond_add_child_i + '">' + 
                pin_data_sensor_option + 
                '<option value="tankstatus">tankstatus</option>' +
                '</optgroup>' + 
                '</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">' +
                
                // 新增的分隔線
                // '<hr size="50" width="100%">' +


                '<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> ' +
                '<select id="cond_a' + new_condition_i + '_1">' +
                pin_data_sensor_option + 
                '<option value="tankstatus">tankstatus</option>' +
                '</optgroup>' + 
                '</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">' +
                '物件 ' +
                '<select 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>