Shan
/
CoffeeProject
forked from rita/CoffeeProject


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731
							<!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">
    <!-- <meta http-equiv="refresh" content="10" />每 content 秒網頁自動更新-->


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

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

    <!-- 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 src="../static/js/sign_in.js"></script>

    <link rel="stylesheet" href="../static/css/sign_in.css">
    -->
    <script>
        $(document).ready(function(){
            $("#coffee_title").text('發酵自動化');

            // 桶槽入料顯示
            ferment_input_status_N = ['{{FI1}}', '{{FI2}}']
            console.log('ferment_input_status_N: ' + ferment_input_status_N)
            for (let i=0; i<ferment_input_status_N.length; i++) {
                // 顯示對應發酵桶槽號碼 F1~F6 和目前狀態
                // console.log(i+1 + ' : '+ ferment_output_status[i])
                // 1 : F_InputtingBean
                // 2 : F_Waiting
                if (ferment_input_status_N[i] == 'FI_InputtingBean') {
                    $("#FI"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#FI"+parseInt(i+1)+"_status").text("FI" + parseInt(i+1) + " 入豆中")
                } else if (ferment_input_status_N[i] == 'FI_Waiting') {
                    $("#FI"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
                    $("#FI"+parseInt(i+1)+"_status").text("FI" + parseInt(i+1) + " 空桶等待")
                } else if (ferment_input_status_N[i] == 'FI_OutputtingBean') {
                    $("#FI"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#FI"+parseInt(i+1)+"_status").text("FI" + parseInt(i+1) + " 可出豆")
                } else {
                    console.log('pass')
                }
            }

            // 桶槽狀態顯示
            ferment_tank_status_N = ['{{F1}}', '{{F2}}', '{{F3}}', '{{F4}}', '{{F5}}', '{{F6}}', 
                                    '{{F7}}', '{{F8}}', '{{F9}}', '{{F10}}', '{{F11}}', '{{F12}}']
            console.log('ferment_tank_status_N: ' + ferment_tank_status_N)
            for (let i=0; i<ferment_tank_status_N.length; i++) {
                // 顯示對應發酵桶槽號碼 F1~F6 和目前狀態
                // console.log(i+1 + ' : '+ ferment_tank_status[i])
                // 1 : F_InputtingBean
                // 2 : F_Waiting
                if (ferment_tank_status_N[i] == 'F_InputtingBean') {
                    $("#F"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + "  入豆中")
                } else if (ferment_tank_status_N[i] == 'F_InputtingBean_Pause') {
                    $("#F"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + "  入豆暫停")
                } else if (ferment_tank_status_N[i] == 'F_InputtingBean_Finish') {
                    $("#F"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + "  入豆完成")
                } else if (ferment_tank_status_N[i] == 'F_InputtingWater') {
                    $("#F"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + "  入水中")
                } else if (ferment_tank_status_N[i] == 'F_Waiting') {
                    $("#F"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
                    $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + "  空桶等待")
                } else if (ferment_tank_status_N[i] == 'F_Cleaning') {
                    $("#F"+parseInt(i+1)+"_status_dot").css("background-color", "plum")
                    $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + "  清洗中")
                } else if (ferment_tank_status_N[i] == 'F_Fermenting') {
                    $("#F"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + "  發酵中")
                } else if (ferment_tank_status_N[i] == 'F_OutputtingBean') {
                    $("#F"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + "  可出豆")
                } else if (ferment_tank_status_N[i] == 'F_Warning') {
                    $("#F"+parseInt(i+1)+"_status_dot").css("background-color", "crimson")
                    $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + "  發生錯誤")
                    $("#F"+parseInt(i+1)+"_status").css("color", "crimson")
                } else {
                    console.log('pass')
                }
            }
            
            // 桶槽出料顯示
            ferment_output_status_N = ['{{FO1}}', '{{FO2}}']
            console.log('ferment_output_status_N: ' + ferment_output_status_N)
            for (let i=0; i<ferment_output_status_N.length; i++) {
                // 顯示對應發酵桶槽號碼 F1~F6 和目前狀態
                // console.log(i+1 + ' : '+ ferment_output_status[i])
                // 1 : F_InputtingBean
                // 2 : F_Waiting
                if (ferment_output_status_N[i] == 'FO_InputtingBean') {
                    $("#FO"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#FO"+parseInt(i+1)+"_status").text("FO" + parseInt(i+1) + " 入豆中")
                    
                } else if (ferment_output_status_N[i] == 'FO_Waiting') {
                    $("#FO"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
                    $("#FO"+parseInt(i+1)+"_status").text("FO" + parseInt(i+1) + " 空桶等待")

                } else if (ferment_output_status_N[i] == 'FO_OutputtingBean') {
                    $("#FO"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#FO"+parseInt(i+1)+"_status").text("FO" + parseInt(i+1) + " 可出豆")

                } else {
                    console.log('pass')
                }

            }

            // css 
            // height: 185px; 取代成 height: 210px;
            // FI2 FO2  top: 620px; 取代成 top: 645px;
        });
    </script>
    
    <style>
        .F_status_css {
            font-weight: bold;
            text-align: center;
        }
        .FermentContainer_position {
            position: absolute;
            top: 95px;
            left: 53px;
        }
        .F1_position {
            width: 110px; 
        }
        .F2_position {
            width: 110px; 
        }
        .F3_position {
            width: 110px; 
        }
        .F4_position {
            width: 110px; 
        }
        .F5_position {
            width: 110px; 
        }
        .F6_position {
            width: 110px; 
        }
        .F7_position {
            width: 110px; 
        }
        .F8_position {
            width: 110px; 
        }
        .F9_position {
            width: 110px; 
        }
        .F10_position {
            width: 110px; 
        }
        .F11_position {
            width: 110px; 
        }
        .F12_position {
            width: 110px; 
        }

        .FI1_position {
            width: 110px; 
        }

        .FI2_position {
            width: 110px; 
        }
        
        .FO1_position {
            width: 110px; 
        }
        
        .FO2_position {
            width: 110px; 
        }
        .footer{
            position: absolute;
            bottom: 0px;
            width: 100%;
            background-color: #eee;
            text-align: center;
        }
        
    </style>
    <script language="JavaScript">
        // 指定 10秒 刷新網頁一次
        var WebUpdate_set
        // WebUpdate_set = setInterval(function(){WebUpdate()} , 60 * 1000)

        function WebUpdate(){
            console.log("-- 狀態更新 start --")
            /*
            $.get('/loading_container_status/F', '', function (res) {
            }, 'json');
            */
            console.log("-- 狀態更新 end --")
        };
    </script>

</head>

<body>
    <div id="wrapper">
        <div id="coffee_header">
            <!-- 匯入共同使用的 header.html 內容 -->
            {% include 'header.html' %}
        </div>

        <div>

            <!-- 發酵貨櫃 狀態表格-->
            <table style="border: 3px lightsteelblue solid; margin-right: auto; margin-left: auto; text-align: center; margin-top: 10px;" cellpadding="5" border="1">
                <tr>
                    <td style="border: lightsteelblue 1px solid;">
                        <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
                            <tr>
                                <td>
                                    <!-- 發酵槽入料儲豆槽 FI1 -->
                                    <div id="FI1" tabindex="0" class="FI1_position" role="button" style="text-align: center;">
                                        <span id="FI1_status" class="F_status_css">FI1 status</span>
                                        <div id="FI1_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </td>
                    <td style="border: lightsteelblue 1px solid;">
                        <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
                            <tr>
                                <td>
                                    <!-- 發酵槽 F1 -->
                                    <div id="F1" tabindex="0" class="F1_position" role="button">
                                        <span id="F1_status" class="F_status_css">F1 status</span>
                                        <!-- F1 狀態點點-->
                                        <div id="F1_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
                                    </div>
                                </td>
                                <td>
                                    <!-- 發酵槽 F2 -->
                                    <div id="F2" tabindex="0" class="F2_position" role="button">
                                        <span id="F2_status" class="F_status_css">F2 status</span>
                                        <div id="F2_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
                                    </div>
                                </td>
                                <td>
                                    <!-- 發酵槽 F3 -->
                                    <div id="F3" tabindex="0" class="F3_position" role="button">
                                        <span id="F3_status" class="F_status_css">F3 status</span>
                                        <div id="F3_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
                                    </div>
                                </td>
                                <td>
                                    <!-- 發酵槽 F4 -->
                                    <div id="F4" tabindex="0" class="F4_position" role="button">
                                        <span id="F4_status" class="F_status_css">F4 status</span>
                                        <div id="F4_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
                                    </div>
                                </td>
                                <td>
                                    <!-- 發酵槽 F5 -->
                                    <div id="F5" tabindex="0" class="F5_position" role="button">
                                        <span id="F5_status" class="F_status_css">F5 status</span>
                                        <div id="F5_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
                                    </div>
                                </td>
                                <td>
                                    <!-- 發酵槽 F6 -->
                                    <div id="F6" tabindex="0" class="F6_position" role="button">
                                        <span id="F6_status" class="F_status_css">F6 status</span>
                                        <div id="F6_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </td>
                    <td style="border: lightsteelblue 1px solid;">
                         <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
                            <tr>
                                <td>
                                    <!-- 發酵槽出料儲豆槽 FO1 -->
                                    <div id="FO1" tabindex="0" class="FO1_position" role="button">
                                        <span id="FO1_status" class="F_status_css">FO1 status</span>
                                        <div id="FO1_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>

                <tr>
                    <td style="border: lightsteelblue 1px solid;">
                        入料儲豆槽
                    </td>
                    <td style="border: lightsteelblue 1px solid;">
                        發酵桶槽
                    </td>
                    <td style="border: lightsteelblue 1px solid;">
                        出料儲豆槽
                    </td>
                </tr>

                <tr>
                    <td style="border: lightsteelblue 1px solid;">
                        <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
                            <tr>
                                <td>
                                    <!-- 發酵槽入料儲豆槽 FI2 -->
                                    <div id="FI2" tabindex="0" class="FI2_position" role="button">
                                        <span id="FI2_status" class="F_status_css">FI2 status</span>
                                        <div id="FI2_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </td>
                    <td style="border: lightsteelblue 1px solid;">
                        <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
                            <tr>
                                <td>
                                    <!-- 發酵槽 F7 -->
                                    <div id="F7" tabindex="0" class="F7_position" role="button" style="vertical-align: bottom;">
                                        <span id="F7_status" class="F_status_css">F7 status</span>
                                        <div id="F7_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
                                    </div>
                                </td>
                                <td>
                                    <!-- 發酵槽 F8 -->
                                    <div id="F8" tabindex="0" class="F8_position" role="button">
                                        <span id="F8_status" class="F_status_css">F8 status</span>
                                        <div id="F8_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
                                    </div>
                                </td>
                                <td>
                                    <!-- 發酵槽 F9 -->
                                    <div id="F9" tabindex="0" class="F9_position" role="button">
                                        <span id="F9_status" class="F_status_css">F9 status</span>
                                        <div id="F9_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
                                    </div>
                                </td>
                                <td>
                                    <!-- 發酵槽 F10 -->
                                    <div id="F10" tabindex="0" class="F10_position" role="button">
                                        <span id="F10_status" class="F_status_css">F10 status</span>
                                        <div id="F10_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
                                    </div>
                                </td>
                                <td>
                                    <!-- 發酵槽 F11 -->
                                    <div id="F11" tabindex="0" class="F11_position" role="button">
                                        <span id="F11_status" class="F_status_css">F11 status</span>
                                        <div id="F11_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
                                    </div>
                                </td>
                                <td>
                                    <!-- 發酵槽 F12 -->
                                    <div id="F12" tabindex="0" class="F12_position" role="button">
                                        <span id="F12_status" class="F_status_css">F12 status</span>
                                        <div id="F12_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </td>
                    <td style="border: lightsteelblue 1px solid;">
                        <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
                            <tr>
                                <td>
                                    <!-- 發酵槽出料儲豆槽 FO2 -->
                                    <div id="FO2" tabindex="0" class="FO2_position" role="button">
                                        <span id="FO2_status" class="F_status_css">FO2 status</span>
                                        <div id="FO2_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>


            <!-- 發酵貨櫃 參數設定-->
            <table style="border: 3px lightsteelblue solid; margin-right: auto; margin-left: auto; text-align: center; margin-top: 10px;" cellpadding="5" border="1">
                <tr>
                    <td>
                        發酵自動化<br>
                        排程
                    </td>
                    <td>
                        入料儲豆槽<br>
                        參數設定
                    </td>
                    <td>
                        桶槽<br>
                        參數設定
                    </td>
                    <td>
                        出料儲豆槽<br>
                        參數設定
                    </td>
                </tr>
                <tr>
                    <td style="padding: 10px; text-align: left; vertical-align: text-top;">
                        <label><input type="checkbox" id="cb_fermenting" checked>&nbsp; 發酵</label><br>
                        <label><input type="checkbox" id="cb_cleaning">&nbsp; 清洗</label><br>
                        <label><input type="checkbox" id="cb_calibratingEC">&nbsp; 校正 EC</label><br>
                        <label><input type="checkbox" id="cb_calibratingSTIR">&nbsp; 校正攪拌棒</label>
                    </td>
                    <td style="padding: 10px; text-align: left; vertical-align: text-top;">
                        吸料時間&nbsp; 
                        <input name="Ferment_Input_vacuumON_time" type="text" value="10" style="width:50px;">&nbsp; 秒<br>
                        放料時間&nbsp; 
                        <input name="Ferment_Input_vacuumOFF_time" type="text" value="10" style="width:50px;">&nbsp; 秒<br>
                    </td>
                    <td style="padding: 10px; text-align: left; vertical-align: text-top;">
                        指定生豆高度&nbsp; 
                        <input name="Ferment_Tank_bean_height" type="text" value="60" style="width:50px;">&nbsp; 公分<br>
                        吸料時間&nbsp; 
                        <input name="Ferment_Tank_vacuumON_time" type="text" value="10" style="width:50px;">&nbsp; 秒<br>
                        放料時間&nbsp; 
                        <input name="Ferment_Tank_vacuumOFF_time" type="text" value="10" style="width:50px;">&nbsp; 秒<br>
                        指定水位高度&nbsp; 
                        <input name="Ferment_Tank_water_height" type="text" value="120" style="width:50px;">&nbsp; 公分<br>
                        馬達轉速&nbsp; 
                        <input name="Ferment_Tank_motor_rpm" type="text" value="30" style="width:50px;">&nbsp; rpm<br>
                        ----- 發酵完成條件 (輸入 0 代表不設定) ------------------------------------------<br>
                        指定發酵溫度&nbsp; 
                        <input name="Ferment_Tank_fermenting_temp" type="text" value="40" style="width:50px;">&nbsp; ℃
                        , 且指定持溫時間&nbsp; 
                        <input name="Ferment_Tank_fermenting_time" type="text" value="30" style="width:50px;">&nbsp; 分鐘<br>
                        指定 pH &nbsp; 
                        <input name="Ferment_Tank_fermenting_pH" type="text" value="5" style="width:50px;">&nbsp;/&nbsp;
                        指定 DO &nbsp; 
                        <input name="Ferment_Tank_fermenting_DO" type="text" value="43" style="width:50px;">&nbsp;/&nbsp;
                        指定 ORP &nbsp; 
                        <input name="Ferment_Tank_fermenting_ORP" type="text" value="-0.5" style="width:50px;">&nbsp;/&nbsp;
                        指定 EC &nbsp; 
                        <input name="Ferment_Tank_fermenting_EC" type="text" value="300" style="width:50px;">&nbsp;<br>
                    </td>
                    <td style="padding: 10px; text-align: left; vertical-align: text-top;">
                        吸料時間&nbsp; 
                        <input name="Ferment_Output_vacuumON_time" type="text" value="10" style="width:50px;">&nbsp; 秒<br>
                        放料時間&nbsp; 
                        <input name="Ferment_Output_vacuumOFF_time" type="text" value="10" style="width:50px;">&nbsp; 秒<br>
                    </td>
                </tr>
            </table>

            <center><button style="margin: 15px 10px 0px 10px;" type="submit" class="btn btn-primary" onclick="ferment_auto()">
                [測試] MQTT + 每 60 秒更新貨櫃狀態</button></center>
            <script>
                function ferment_auto(){
                    var Ferment_Input_vacuumON_time = $("input[name=Ferment_Input_vacuumON_time]").val();
                    var Ferment_Input_vacuumOFF_time = $("input[name=Ferment_Input_vacuumOFF_time]").val();

                    var Ferment_Tank_bean_height = $("input[name=Ferment_Tank_bean_height]").val();
                    var Ferment_Tank_vacuumON_time = $("input[name=Ferment_Tank_vacuumON_time]").val();
                    var Ferment_Tank_vacuumOFF_time = $("input[name=Ferment_Tank_vacuumOFF_time]").val();
                    var Ferment_Tank_water_height = $("input[name=Ferment_Tank_water_height]").val();
                    var Ferment_Tank_fermenting_temp = $("input[name=Ferment_Tank_fermenting_temp]").val();
                    var Ferment_Tank_fermenting_time = $("input[name=Ferment_Tank_fermenting_time]").val();
                    var Ferment_Tank_fermenting_pH = $("input[name=Ferment_Tank_fermenting_pH]").val();
                    var Ferment_Tank_fermenting_DO = $("input[name=Ferment_Tank_fermenting_DO]").val();
                    var Ferment_Tank_fermenting_ORP = $("input[name=Ferment_Tank_fermenting_ORP]").val();
                    var Ferment_Tank_fermenting_EC = $("input[name=Ferment_Tank_fermenting_EC]").val();
                    var Ferment_Tank_motor_rpm = $("input[name=Ferment_Tank_motor_rpm]").val();

                    var Ferment_Output_vacuumON_time = $("input[name=Ferment_Output_vacuumON_time]").val();
                    var Ferment_Output_vacuumOFF_time = $("input[name=Ferment_Output_vacuumOFF_time]").val();
                    
                    var data = { 'command': 'Ferment_auto_parameter', 
                                 'Ferment_Input_vacuumON_time': Ferment_Input_vacuumON_time, 
                                 'Ferment_Input_vacuumOFF_time': Ferment_Input_vacuumOFF_time, 
                                 'Ferment_Tank_bean_height': Ferment_Tank_bean_height, 
                                 'Ferment_Tank_vacuumON_time': Ferment_Tank_vacuumON_time, 
                                 'Ferment_Tank_vacuumOFF_time': Ferment_Tank_vacuumOFF_time, 
                                 'Ferment_Tank_water_height': Ferment_Tank_water_height, 
                                 'Ferment_Tank_fermenting_temp': Ferment_Tank_fermenting_temp, 
                                 'Ferment_Tank_fermenting_time': Ferment_Tank_fermenting_time, 
                                 'Ferment_Tank_fermenting_pH': Ferment_Tank_fermenting_pH, 
                                 'Ferment_Tank_fermenting_DO': Ferment_Tank_fermenting_DO, 
                                 'Ferment_Tank_fermenting_ORP': Ferment_Tank_fermenting_ORP, 
                                 'Ferment_Tank_fermenting_EC': Ferment_Tank_fermenting_EC, 
                                 'Ferment_Tank_motor_rpm': Ferment_Tank_motor_rpm, 
                                 'Ferment_Output_vacuumON_time': Ferment_Output_vacuumON_time, 
                                 'Ferment_Output_vacuumOFF_time': Ferment_Output_vacuumOFF_time };
                    $.post('/mqtt/101', data, function (res) {
                        console.log('data: ', data)
                        console.log('res: ', res)

                    }, 'text')
                    
                    var ferment_interval = setInterval(testing_F_auto, 30*1000)
                }
            </script>

            <center><button style="margin: 15px 10px 0px 10px;" type="submit" class="btn btn-primary" onclick="testing_F_auto()">
                [測試] 發酵貨櫃狀態</button></center>
            
            <script>
                function test(){
                    
                    /*
                    if ($('#cb_fermenting').prop('checked')) {
                        console.log("發酵自動化：加入發酵排程");

                    }  else {

                    }
                    if ($('#cb_cleaning').prop('checked')) {
                        console.log("發酵自動化：加入清洗排程");
                    }
                    if ($('#cb_calibratingEC').prop('checked')) {
                        console.log("發酵自動化：加入校正 EC 排程");
                    }
                    if ($('#cb_calibratingSTIR').prop('checked')) {
                        console.log("發酵自動化：加入校正攪拌棒排程");
                    }
                    */
                   console.log(FermentAuto_fermenting)
                   console.log(FermentAuto_cleaning)
                   console.log(FermentAuto_calibratingEC)
                   console.log(FermentAuto_calibratingSTIR)
                
                };

                function testing_F_auto(){
                    var FermentAuto_fermenting = $('#cb_fermenting').prop('checked')
                    var FermentAuto_cleaning = $('#cb_cleaning').prop('checked')
                    var FermentAuto_calibratingEC = $('#cb_calibratingEC').prop('checked')
                    var FermentAuto_calibratingSTIR = $('#cb_calibratingSTIR').prop('checked')

                    var Ferment_Input_vacuumON_time = $("input[name=Ferment_Input_vacuumON_time]").val();
                    var Ferment_Input_vacuumOFF_time = $("input[name=Ferment_Input_vacuumOFF_time]").val();

                    var Ferment_Tank_bean_height = $("input[name=Ferment_Tank_bean_height]").val();
                    var Ferment_Tank_vacuumON_time = $("input[name=Ferment_Tank_vacuumON_time]").val();
                    var Ferment_Tank_vacuumOFF_time = $("input[name=Ferment_Tank_vacuumOFF_time]").val();
                    var Ferment_Tank_water_height = $("input[name=Ferment_Tank_water_height]").val();
                    var Ferment_Tank_fermenting_temp = $("input[name=Ferment_Tank_fermenting_temp]").val();
                    var Ferment_Tank_fermenting_time = $("input[name=Ferment_Tank_fermenting_time]").val();
                    var Ferment_Tank_fermenting_pH = $("input[name=Ferment_Tank_fermenting_pH]").val();
                    var Ferment_Tank_fermenting_DO = $("input[name=Ferment_Tank_fermenting_DO]").val();
                    var Ferment_Tank_fermenting_ORP = $("input[name=Ferment_Tank_fermenting_ORP]").val();
                    var Ferment_Tank_fermenting_EC = $("input[name=Ferment_Tank_fermenting_EC]").val();
                    var Ferment_Tank_motor_rpm = $("input[name=Ferment_Tank_motor_rpm]").val();

                    var Ferment_Output_vacuumON_time = $("input[name=Ferment_Output_vacuumON_time]").val();
                    var Ferment_Output_vacuumOFF_time = $("input[name=Ferment_Output_vacuumOFF_time]").val();
                    
                    var data = { 'command': 'Ferment_auto_parameter', 
                                 'FermentAuto_fermenting': FermentAuto_fermenting, 
                                 'FermentAuto_cleaning': FermentAuto_cleaning, 
                                 'FermentAuto_calibratingEC': FermentAuto_calibratingEC, 
                                 'FermentAuto_calibratingSTIR': FermentAuto_calibratingSTIR, 

                                 'Ferment_Input_vacuumON_time': Ferment_Input_vacuumON_time, 
                                 'Ferment_Input_vacuumOFF_time': Ferment_Input_vacuumOFF_time, 
                                 'Ferment_Tank_bean_height': Ferment_Tank_bean_height, 
                                 'Ferment_Tank_vacuumON_time': Ferment_Tank_vacuumON_time, 
                                 'Ferment_Tank_vacuumOFF_time': Ferment_Tank_vacuumOFF_time, 
                                 'Ferment_Tank_water_height': Ferment_Tank_water_height, 
                                 'Ferment_Tank_fermenting_temp': Ferment_Tank_fermenting_temp, 
                                 'Ferment_Tank_fermenting_time': Ferment_Tank_fermenting_time, 
                                 'Ferment_Tank_fermenting_pH': Ferment_Tank_fermenting_pH, 
                                 'Ferment_Tank_fermenting_DO': Ferment_Tank_fermenting_DO, 
                                 'Ferment_Tank_fermenting_ORP': Ferment_Tank_fermenting_ORP, 
                                 'Ferment_Tank_fermenting_EC': Ferment_Tank_fermenting_EC, 
                                 'Ferment_Tank_motor_rpm': Ferment_Tank_motor_rpm, 
                                 'Ferment_Output_vacuumON_time': Ferment_Output_vacuumON_time, 
                                 'Ferment_Output_vacuumOFF_time': Ferment_Output_vacuumOFF_time };
                    $.get('/ferment_auto_status', data, function (res) {
                        Ferment_Input_1_STATUS = res.Ferment_Input_1
                        console.log('FI1: ' + res.Ferment_Input_1)
                        console.log('F1: ' + res.Ferment_Tank_1)
                        console.log('F2: ' + res.Ferment_Tank_2)
                        console.log('F3: ' + res.Ferment_Tank_3)
                        console.log('F4: ' + res.Ferment_Tank_4)
                        console.log('F5: ' + res.Ferment_Tank_5)
                        console.log('F6: ' + res.Ferment_Tank_6)
                        console.log('FO1: ' + res.Ferment_Output_1)

                        // ----- 發酵出料 FO1 狀態 --------------------------------------------------------------
                        ferment_input_status = [res.Ferment_Input_1]
                        for (let i=0; i<ferment_input_status.length; i++) {
                            // 顯示對應發酵桶槽號碼 F1~F6 和目前狀態
                            // console.log(i+1 + ' : '+ ferment_output_status[i])
                            // 1 : F_InputtingBean
                            // 2 : F_Waiting
                            if (ferment_input_status[i] == 'FI_InputtingBean') {
                                console.log('[動作] 發酵入料 FI' + parseInt(i+1) + ' 入豆中')
                                $("#FI"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                                $("#FI"+parseInt(i+1)+"_status").text("FI" + parseInt(i+1) + " 入豆中")
                                
                            } else if (ferment_input_status[i] == 'FI_Waiting') {
                                console.log('[動作] 發酵入料 FI' + parseInt(i+1) + ' 空桶等待')
                                $("#FI"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
                                $("#FI"+parseInt(i+1)+"_status").text("FI" + parseInt(i+1) + " 空桶等待")

                            } else if (ferment_input_status[i] == 'FI_OutputtingBean') {
                                console.log('[動作] 發酵入料 FI' + parseInt(i+1) + ' 可出豆')
                                $("#FI"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                                $("#FI"+parseInt(i+1)+"_status").text("FI" + parseInt(i+1) + " 可出豆")

                            } else {
                                console.log('pass')
                            }
                        }

                        // ----- 發酵桶槽 F1~F6 狀態 --------------------------------------------------------------
                        ferment_tank_status = [res.Ferment_Tank_1, res.Ferment_Tank_2, res.Ferment_Tank_3,
                                                res.Ferment_Tank_4, res.Ferment_Tank_5, res.Ferment_Tank_6]
                        for (let i=0; i<ferment_tank_status.length; i++) {
                            // 顯示對應發酵桶槽號碼 F1~F6 和目前狀態
                            // console.log(i+1 + ' : '+ ferment_tank_status[i])
                            // 1 : F_InputtingBean
                            // 2 : F_Waiting
                            if (ferment_tank_status[i] == 'F_InputtingBean') {
                                console.log('[動作] 發酵桶槽 F' + parseInt(i+1) + ' 入豆中')
                                $("#F"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                                $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + "  入豆中")
                                
                            } else if (ferment_tank_status[i] == 'F_InputtingBean_Pause') {
                                console.log('[動作] 發酵桶槽 F' + parseInt(i+1) + ' 入豆暫停')
                                $("#F"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                                $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + "  入豆暫停")

                            } else if (ferment_tank_status[i] == 'F_InputtingBean_Finish') {
                                console.log('[動作] 發酵桶槽 F' + parseInt(i+1) + ' 入豆完成')
                                $("#F"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                                $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + "  入豆完成")

                            } else if (ferment_tank_status[i] == 'F_InputtingWater') {
                                console.log('[動作] 發酵桶槽 F' + parseInt(i+1) + ' 入水中')
                                $("#F"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                                $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + "  入水中")

                            } else if (ferment_tank_status[i] == 'F_Waiting') {
                                console.log('[動作] 發酵桶槽 F' + parseInt(i+1) + ' 空桶等待')
                                $("#F"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
                                $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + "  空桶等待")

                            } else if (ferment_tank_status[i] == 'F_Fermenting') {
                                console.log('[動作] 發酵桶槽 F' + parseInt(i+1) + ' 發酵中')
                                $("#F"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                                $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + "  發酵中")

                            } else if (ferment_tank_status[i] == 'F_OutputtingBean') {
                                console.log('[動作] 發酵桶槽 F' + parseInt(i+1) + ' 可出豆')
                                $("#F"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                                $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + "  可出豆")

                            } else if (ferment_tank_status[i] == 'F_Warning') {
                                console.log('[動作] 發酵桶槽 F' + parseInt(i+1) + ' 發生錯誤')
                                $("#F"+parseInt(i+1)+"_status_dot").css("background-color", "crimson")
                                $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + "  發生錯誤")
                                $("#F"+parseInt(i+1)+"_status").css("color", "crimson")
                            } else {
                                console.log('pass')
                            }
                        }

                        // ----- 發酵出料 FO1 狀態 --------------------------------------------------------------
                        ferment_output_status = [res.Ferment_Output_1]
                        for (let i=0; i<ferment_output_status.length; i++) {
                            // 顯示對應發酵桶槽號碼 F1~F6 和目前狀態
                            // console.log(i+1 + ' : '+ ferment_output_status[i])
                            // 1 : F_InputtingBean
                            // 2 : F_Waiting
                            if (ferment_output_status[i] == 'FO_InputtingBean') {
                                console.log('[動作] 發酵出料 FO' + parseInt(i+1) + ' 入豆中')
                                $("#FO"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                                $("#FO"+parseInt(i+1)+"_status").text("FO" + parseInt(i+1) + " 入豆中")
                                
                            } else if (ferment_output_status[i] == 'FO_Waiting') {
                                console.log('[動作] 發酵出料 FO' + parseInt(i+1) + ' 空桶等待')
                                $("#FO"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
                                $("#FO"+parseInt(i+1)+"_status").text("FO" + parseInt(i+1) + " 空桶等待")

                            } else if (ferment_output_status[i] == 'FO_OutputtingBean') {
                                console.log('[動作] 發酵出料 FO' + parseInt(i+1) + ' 可出豆')
                                $("#FO"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                                $("#FO"+parseInt(i+1)+"_status").text("FO" + parseInt(i+1) + " 可出豆")

                            } else {
                                console.log('pass')
                            }
                        }
                        /*
                        console.log(res.Ferment_Input_2)
                        console.log(res.Ferment_Tank_7)
                        console.log(res.Ferment_Tank_8)
                        console.log(res.Ferment_Tank_9)
                        console.log(res.Ferment_Tank_10)
                        console.log(res.Ferment_Tank_11)
                        console.log(res.Ferment_Tank_12)
                        console.log(res.Ferment_Output_1)
                        console.log(res.Ferment_Output_2)
                        */
                    }, 'json');
                    // console.log("-- 自動化程式 end --")
                }
            </script>


        </div>
        
        <div id="coffee_footer">
            <!-- 匯入共同使用的 footer.html 內容 -->
            {% include 'footer.html' %}
        </div>
    </div>

</body>

</html>