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

    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://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>

    <!--可用來建立使用者小圖示-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        .span-sensor-value {
            font-weight:600;
            padding-left: 3px;
        }
        .demo_status_css {
            font-weight: bold;
            text-align: center;
        }
        .input-text {
            height: 25px;
            width: 35px;
            text-align: center;
            margin-left: 2px;
            margin-right: 5px;
        }
    </style>
    <script>
        $(document).ready(function(){
            $("#coffee_title_pc").text('DEMO 貨櫃');
            $("#coffee_title_phone").text('DEMO 貨櫃');
            // $(document).attr("title", '{{title}}');
            loading_status();
            loading_sensors();
        });

        clean_input_status = ['{{CI1}}', '{{CI2}}']
        // console.log('clean_input_status: ' + clean_input_status)
        clean_tank_status = ['{{C1}}', '{{C2}}']
        // console.log('clean_tank_status: ' + clean_tank_status)
        colorselect_tank_status = ['{{S1}}', '{{S2}}']
        // console.log('colorselect_tank_status: ' + colorselect_tank_status)
        colorselect_outputg_status = ['{{SOg1}}', '{{SOg2}}']
        // console.log('colorselect_outputg_status: ' + colorselect_outputg_status)
        colorselect_outputb_status = ['{{SOb1}}', '{{SOb2}}']
        // console.log('colorselect_outputb_status: ' + colorselect_outputb_status)
        peel_tank_status = ['{{P1}}', '{{P2}}']
        // console.log('peel_tank_status: ' + peel_tank_status)
        peel_output_status = ['{{PO1}}', '{{PO2}}']
        // console.log('peel_output_status: ' + peel_output_status)
        ferment_tank_status = ['{{F1}}', '{{F2}}']
        dry_tank_status = ['{{D1}}', '{{D2}}']
        dry_output_status = ['{{DO1}}', '{{DO2}}']
        peel_outputb_status = ['{{POb1}}']
        // console.log('peel_outputb_status: ' + peel_outputb_status)


        // 更新桶槽狀態
        function loading_status(){
            for (let i=0; i<clean_input_status.length; i++) {
                if (clean_input_status[i] == 'CI_InputtingBean') {
                    $("#CI"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#CI"+parseInt(i+1)+"_status").text("CI" + parseInt(i+1) + " 入豆中")
                } else if (clean_input_status[i] == 'CI_Waiting') {
                    $("#CI"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
                    $("#CI"+parseInt(i+1)+"_status").text("CI" + parseInt(i+1) + " 空桶等待")
                } else if (clean_input_status[i] == 'CI_OutputtingBean') {
                    $("#CI"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#CI"+parseInt(i+1)+"_status").text("CI" + parseInt(i+1) + " 可出豆")
                } else if (clean_input_status[i] == 'CI_Warning') {
                    $("#CI"+parseInt(i+1)+"_status_dot").css("background-color", "crimson")
                    $("#CI"+parseInt(i+1)+"_status").text("CI" + parseInt(i+1) + "  發生錯誤")
                    $("#CI"+parseInt(i+1)+"_status").css("color", "crimson")
                } else {
                    console.log('CI pass')
                }
            }

            for (let i=0; i<clean_tank_status.length; i++) {
                if (clean_tank_status[i] == 'C_InputtingBean') {
                    $("#C"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#C"+parseInt(i+1)+"_status").text("C" + parseInt(i+1) + " 入豆中")
                } else if (clean_tank_status[i] == 'C_Waiting') {
                    $("#C"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
                    $("#C"+parseInt(i+1)+"_status").text("C" + parseInt(i+1) + " 空桶等待")
                } else if (clean_tank_status[i] == 'C_OutputtingBean') {
                    $("#C"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#C"+parseInt(i+1)+"_status").text("C" + parseInt(i+1) + " 可出豆")
                } else if (clean_tank_status[i] == 'C_Warning') {
                    $("#C"+parseInt(i+1)+"_status_dot").css("background-color", "crimson")
                    $("#C"+parseInt(i+1)+"_status").text("C" + parseInt(i+1) + "  發生錯誤")
                    $("#C"+parseInt(i+1)+"_status").css("color", "crimson")
                } else {
                    console.log('C pass')
                }
            }

            for (let i=0; i<colorselect_tank_status.length; i++) {
                if (colorselect_tank_status[i] == 'S_InputtingBean') {
                    $("#S"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#S"+parseInt(i+1)+"_status").text("S" + parseInt(i+1) + " 入豆中")
                } else if (colorselect_tank_status[i] == 'S_Waiting') {
                    $("#S"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
                    $("#S"+parseInt(i+1)+"_status").text("S" + parseInt(i+1) + " 空桶等待")
                } else if (colorselect_tank_status[i] == 'S_OutputtingBean') {
                    $("#S"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#S"+parseInt(i+1)+"_status").text("S" + parseInt(i+1) + " 可出豆")
                } else if (colorselect_tank_status[i] == 'S_Warning') {
                    $("#S"+parseInt(i+1)+"_status_dot").css("background-color", "crimson")
                    $("#S"+parseInt(i+1)+"_status").text("S" + parseInt(i+1) + "  發生錯誤")
                    $("#S"+parseInt(i+1)+"_status").css("color", "crimson")
                } else {
                    console.log('S pass')
                }
            }

            for (let i=0; i<colorselect_outputg_status.length; i++) {
                if (colorselect_outputg_status[i] == 'SO_InputtingBean') {
                    $("#SOg"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#SOg"+parseInt(i+1)+"_status").text("SOg" + parseInt(i+1) + " 入豆中")
                } else if (colorselect_outputg_status[i] == 'SO_Waiting') {
                    $("#SOg"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
                    $("#SOg"+parseInt(i+1)+"_status").text("SOg" + parseInt(i+1) + " 空桶等待")
                } else if (colorselect_outputg_status[i] == 'SO_OutputtingBean') {
                    $("#SOg"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#SOg"+parseInt(i+1)+"_status").text("SOg" + parseInt(i+1) + " 可出豆")
                } else if (colorselect_outputg_status[i] == 'SO_Warning') {
                    $("#SOg"+parseInt(i+1)+"_status_dot").css("background-color", "crimson")
                    $("#SOg"+parseInt(i+1)+"_status").text("SOg" + parseInt(i+1) + "  發生錯誤")
                    $("#SOg"+parseInt(i+1)+"_status").css("color", "crimson")
                } else {
                    console.log('SOg pass')
                }
            }

            for (let i=0; i<colorselect_outputb_status.length; i++) {
                if (colorselect_outputb_status[i] == 'SO_InputtingBean') {
                    $("#SOb"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#SOb"+parseInt(i+1)+"_status").text("SOb" + parseInt(i+1) + " 入豆中")
                } else if (colorselect_outputb_status[i] == 'SO_Waiting') {
                    $("#SOb"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
                    $("#SOb"+parseInt(i+1)+"_status").text("SOb" + parseInt(i+1) + " 空桶等待")
                } else if (colorselect_outputb_status[i] == 'SO_OutputtingBean') {
                    $("#SOb"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#SOb"+parseInt(i+1)+"_status").text("SOb" + parseInt(i+1) + " 可出豆")
                } else if (colorselect_outputb_status[i] == 'SO_Warning') {
                    $("#SOb"+parseInt(i+1)+"_status_dot").css("background-color", "crimson")
                    $("#SOb"+parseInt(i+1)+"_status").text("SOb" + parseInt(i+1) + "  發生錯誤")
                    $("#SOb"+parseInt(i+1)+"_status").css("color", "crimson")
                } else {
                    console.log('SOb pass')
                }
            }

            for (let i=0; i<peel_tank_status.length; i++) {
                if (peel_tank_status[i] == 'P_Waiting') {
                    $("#P"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
                    $("#P"+parseInt(i+1)+"_status").text("P" + parseInt(i+1) + " 等待中")
                } else if (peel_tank_status[i] == 'P_Peeling') {
                    $("#P"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#P"+parseInt(i+1)+"_status").text("P" + parseInt(i+1) + " 脫皮中")
                // } else if (peel_tank_status[i] == 'P_InputtingBean') {
                //     $("#P"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                //     $("#P"+parseInt(i+1)+"_status").text("P" + parseInt(i+1) + " 入豆中")
                // } else if (peel_tank_status[i] == 'P_OutputtingBean') {
                //     $("#P"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                //     $("#P"+parseInt(i+1)+"_status").text("P" + parseInt(i+1) + " 可出豆")
                } else if (peel_tank_status[i] == 'P_Warning') {
                    $("#P"+parseInt(i+1)+"_status_dot").css("background-color", "crimson")
                    $("#P"+parseInt(i+1)+"_status").text("P" + parseInt(i+1) + "  發生錯誤")
                    $("#P"+parseInt(i+1)+"_status").css("color", "crimson")
                } else {
                    console.log('P pass')
                }
            }

            for (let i=0; i<peel_output_status.length; i++) {
                if (peel_output_status[i] == 'PO_InputtingBean') {
                    $("#PO"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#PO"+parseInt(i+1)+"_status").text("PO" + parseInt(i+1) + " 入豆中")
                } else if (peel_output_status[i] == 'PO_Waiting') {
                    $("#PO"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
                    $("#PO"+parseInt(i+1)+"_status").text("PO" + parseInt(i+1) + " 空桶等待")
                } else if (peel_output_status[i] == 'PO_OutputtingBean') {
                    $("#PO"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#PO"+parseInt(i+1)+"_status").text("PO" + parseInt(i+1) + " 可出豆")
                } else if (peel_output_status[i] == 'PO_Warning') {
                    $("#PO"+parseInt(i+1)+"_status_dot").css("background-color", "crimson")
                    $("#PO"+parseInt(i+1)+"_status").text("PO" + parseInt(i+1) + "  發生錯誤")
                    $("#PO"+parseInt(i+1)+"_status").css("color", "crimson")
                } else {
                    console.log('PO pass')
                }
            }
            
            for (let i=0; i<ferment_tank_status.length; i++) {
                if (ferment_tank_status[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[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[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[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[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[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[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[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[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('F pass')
                }
            }
            
            for (let i=0; i<dry_tank_status.length; i++) {
                if (dry_tank_status[i] == 'D_InputtingBean') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  入豆中")
                } else if (dry_tank_status[i] == 'D_InputtingBean_Pause') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  入豆暫停")
                } else if (dry_tank_status[i] == 'D_InputtingBean_Finish') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  入豆完成")
                } else if (dry_tank_status[i] == 'D_Waiting') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  空桶等待")
                } else if (dry_tank_status[i] == 'D_Cleaning') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "plum")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  清洗中")
                } else if (dry_tank_status[i] == 'D_Drying') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  乾燥中")
                } else if (dry_tank_status[i] == 'D_OutputtingBean') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  可出豆")
                } else if (dry_tank_status[i] == 'D_Warning') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "crimson")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  發生錯誤")
                    $("#D"+parseInt(i+1)+"_status").css("color", "crimson")
                } else {
                    console.log('pass')
                }
            }

            for (let i=0; i<dry_output_status.length; i++) {
                if (dry_output_status[i] == 'DO_InputtingBean') {
                    $("#DO"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#DO"+parseInt(i+1)+"_status").text("DO" + parseInt(i+1) + " 入豆中")
                } else if (dry_output_status[i] == 'DO_Waiting') {
                    $("#DO"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
                    $("#DO"+parseInt(i+1)+"_status").text("DO" + parseInt(i+1) + " 空桶等待")
                } else if (dry_output_status[i] == 'DO_OutputtingBean') {
                    $("#DO"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#DO"+parseInt(i+1)+"_status").text("DO" + parseInt(i+1) + " 可出豆")
                } else {
                    console.log('DO pass')
                }
            }

            for (let i=0; i<peel_outputb_status.length; i++) {
                if (peel_outputb_status[i] == 'PO_InputtingBean') {
                    $("#POb"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#POb"+parseInt(i+1)+"_status").text("POb" + parseInt(i+1) + " 入豆中")
                } else if (peel_outputb_status[i] == 'PO_Waiting') {
                    $("#POb"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
                    $("#POb"+parseInt(i+1)+"_status").text("POb" + parseInt(i+1) + " 空桶等待")
                } else if (peel_outputb_status[i] == 'PO_OutputtingBean') {
                    $("#POb"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#POb"+parseInt(i+1)+"_status").text("POb" + parseInt(i+1) + " 可出豆")
                } else {
                    console.log('POb pass')
                }
            }

            // 

        };

        // 更新 UltraSonic 數值
        function loading_sensors(){
            $.get('/loading_sensors', '', function (res){
                $("#C1_UltraSonic").text(res.C1_UltraSonic);
                $("#C2_UltraSonic").text(res.C2_UltraSonic);
                $("#PO1_UltraSonic").text(res.PO1_UltraSonic);
                $("#PO2_UltraSonic").text(res.PO2_UltraSonic);
                $("#F1_UltraSonic").text(res.F1_UltraSonic);
                $("#F1_SHT11Temp").text(res.F1_SHT11Temp);
                $("#F1_SHT11Humidity").text(res.F1_SHT11Humidity);
                $("#F2_UltraSonic").text(res.F2_UltraSonic);
                $("#D1_UltraSonic").text(res.D1_UltraSonic);
                $("#D1_SHT11Temp").text(res.D1_SHT11Temp);
                $("#D1_SHT11Humidity").text(res.D1_SHT11Humidity);
                $("#D2_UltraSonic").text(res.D2_UltraSonic);
                $("#DO1_UltraSonic").text(res.DO1_UltraSonic);
                $("#DO2_UltraSonic").text(res.DO2_UltraSonic);
            }, 'json');
        }

        var data;                       // 狀態判斷傳參數用
        var peel_status_process = 0;    
        var peel_status_interval;       // 脫皮機自動化, 間隔 5 秒執行
        var ferment_status_process = 0;
        var ferment_status_interval;    // 發酵槽自動化, 間隔 5 秒執行
        var dry_status_process = 0;
        var dry_status_interval;        // 乾燥槽自動化, 間隔 5 秒執行
                    
    </script>
</head>
<body>
    <div id="wrapper">
        <div id="coffee_header">
            <!-- 匯入共同使用的 header.html 內容 -->
            {% include 'header.html' %}
            
        </div>

        <div>
            <!-- DEMO 貨櫃 狀態表格 -->
            <table style="border: 3px lightsteelblue solid; margin-right: auto; margin-left: auto; text-align: center; margin-top: 5px;" cellpadding="5" border="1">
                <tr>
                    <td>
                        <!-- 清洗浮選槽入料 CI1 -->
                        <div id="CI1" tabindex="0" class="CI1_position" role="button" style="text-align: center;">
                            <span id="CI1_status" class="demo_status_css">CI1 status</span>
                            <div id="CI1_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
                        </div>
                    </td>
                    <td>
                        <!-- 清洗浮選槽 C1 -->
                        <div id="C1" tabindex="0" class="C1_position" role="button" style="text-align: center;">
                            <span id="C1_status" class="demo_status_css">C1 status</span>
                            <div id="C1_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
                        </div>
                    </td>
                    <td>
                        中水桶
                    </td>
                    <td>
                        <!-- 色選機 S1 -->
                        <div id="S1" tabindex="0" class="S1_position" role="button" style="text-align: center;">
                            <span id="S1_status" class="demo_status_css">S1 status</span>
                            <div id="S1_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
                        </div>
                    </td>
                    <td>
                        <!-- 色選機好果 SOg1 -->
                        <div id="SOg1" tabindex="0" class="SOg1_position" role="button" style="text-align: center;">
                            <span id="SOg1_status" class="demo_status_css">SOg1 status</span>
                            <div id="SOg1_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
                        </div>
                    </td>
                    <td>
                        <!-- 色選機好果 SOb1 -->
                        <div id="SOb1" tabindex="0" class="SOb1_position" role="button" style="text-align: center;">
                            <span id="SOb1_status" class="demo_status_css">SOb1 status</span>
                            <div id="SOb1_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
                        </div>
                    </td>
                    <td>
                        <!-- 脫皮機 P1 -->
                        <div id="P1" tabindex="0" class="P1_position" role="button" style="text-align: center;">
                            <span id="P1_status" class="demo_status_css">P1 status</span>
                            <div id="P1_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
                        </div>
                    </td>
                    <td>
                        <!-- 脫皮機出料儲豆槽 PO1 -->
                        <div id="PO1" tabindex="0" class="PO1_position" role="button" style="text-align: center;">
                            <span id="PO1_status" class="demo_status_css">PO1 status</span>
                            <div id="PO1_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
                        </div>
                    </td>
                    <td>
                        <!-- 發酵槽 F1 -->
                        <div id="F1" tabindex="0" class="F1_position" role="button" style="vertical-align: bottom;">
                            <span id="F1_status" class="demo_status_css">F1 status</span>
                            <div id="F1_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
                        </div>
                    </td>
                    <td>
                        <!-- 乾燥槽 D1 -->
                        <div id="D1" tabindex="0" class="D1_position" role="button" style="vertical-align: bottom;">
                            <span id="D1_status" class="demo_status_css">D1 status</span>
                            <div id="D1_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
                        </div>
                    </td>
                    <td>
                        <!-- 乾燥槽 DO1 -->
                        <div id="DO1" tabindex="0" class="DO1_position" role="button" style="vertical-align: bottom;">
                            <span id="DO1_status" class="demo_status_css">DO1 status</span>
                            <div id="DO1_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
                        </div>
                    </td>
                    <td>
                        
                    </td>
                </tr>

                <tr>
                    <td>
                        清洗<br>
                        入料儲豆槽
                    </td>
                    <td>
                        清洗浮選槽
                    </td>
                    <td>
                        中水桶
                    </td>
                    <td>
                        色選機
                    </td>
                    <td>
                        色選機出料<br>好果
                    </td>
                    <td>
                        色選機出料<br>壞果
                    </td>
                    <td>
                        脫皮機
                    </td>
                    <td>
                        脫皮機<br>出料儲豆槽
                    </td>
                    <td>
                        發酵槽
                    </td>
                    <td>
                        乾燥槽
                    </td>
                    <td>
                        乾燥<br>
                        出料除豆槽
                    </td>
                    <td>
                        壞豆
                    </td>
                </tr>

                <tr>
                    <td>
                        <!-- 清洗浮選槽入料 CI2 -->
                        <div id="CI2" tabindex="0" class="CI2_position" role="button" style="text-align: center;">
                            <span id="CI2_status" class="demo_status_css">CI2 status</span>
                            <div id="CI2_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
                        </div>
                    </td>
                    <td>
                        <!-- 清洗浮選槽 C2 -->
                        <div id="C2" tabindex="0" class="C2_position" role="button" style="text-align: center;">
                            <span id="C2_status" class="demo_status_css">C2 status</span>
                            <div id="C2_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
                        </div>
                    </td>
                    <td>
                        中水桶
                    </td>
                    <td>
                        <!-- 色選機 S2 -->
                        <div id="S2" tabindex="0" class="S2_position" role="button" style="text-align: center;">
                            <span id="S2_status" class="demo_status_css">S2 status</span>
                            <div id="S2_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
                        </div>
                    </td>
                    <td>
                        <!-- 色選機好果 SOg2 -->
                        <div id="SOg2" tabindex="0" class="SOg2_position" role="button" style="text-align: center;">
                            <span id="SOg2_status" class="demo_status_css">SOg2 status</span>
                            <div id="SOg2_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
                        </div>
                    </td>
                    <td>
                        <!-- 色選機好果 SOb2 -->
                        <div id="SOb2" tabindex="0" class="SOb2_position" role="button" style="text-align: center;">
                            <span id="SOb2_status" class="demo_status_css">SOb2 status</span>
                            <div id="SOb2_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
                        </div>
                    </td>
                    <td>
                        <!-- 脫皮機 P2 -->
                        <div id="P2" tabindex="0" class="P2_position" role="button" style="text-align: center;">
                            <span id="P2_status" class="demo_status_css">P2 status</span>
                            <div id="P2_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
                        </div>
                    </td>
                    <td>
                        <!-- 脫皮機出料儲豆槽 PO2 -->
                        <div id="PO2" tabindex="0" class="PO2_position" role="button" style="text-align: center;">
                            <span id="PO2_status" class="demo_status_css">PO2 status</span>
                            <div id="PO2_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" style="vertical-align: bottom;">
                            <span id="F2_status" class="demo_status_css">F2 status</span>
                            <div id="F2_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
                        </div>
                    </td>
                    <td>
                        <!-- 乾燥槽 D2 -->
                        <div id="D2" tabindex="0" class="D2_position" role="button" style="vertical-align: bottom;">
                            <span id="D2_status" class="demo_status_css">D2 status</span>
                            <div id="D2_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
                        </div>
                    </td>
                    <td>
                        <!-- 乾燥槽 DO2 -->
                        <div id="DO2" tabindex="0" class="DO2_position" role="button" style="vertical-align: bottom;">
                            <span id="DO2_status" class="demo_status_css">DO2 status</span>
                            <div id="DO2_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
                        </div>
                    </td>
                    <td>
                        <!-- 壞豆槽 POb1 -->
                        <div id="POb1" tabindex="0" class="POb1_position" role="button" style="vertical-align: bottom;">
                            <span id="POb1_status" class="demo_status_css">POb1 status</span>
                            <div id="POb1_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
                        </div>
                    </td>
                </tr>
            </table>

            <!-- DEMO 貨櫃 參數設定 -->
            <table style="border: 3px lightsteelblue solid; margin-right: auto; margin-left: auto; text-align: center; margin-top: 10px;" cellpadding="5" border="1">
                <tr>
                    <td>
                        清洗入料
                    </td>
                    <td>
                        清洗浮選
                    </td>
                    <td>
                        中水桶
                    </td>
                    <td>
                        色選機
                    </td>
                    <td>
                        出料好果
                    </td>
                    <td>
                        出料壞果
                    </td>
                    <td>
                        脫皮機
                    </td>
                    <td>
                        脫皮機出料
                    </td>
                    <td>
                        發酵槽
                    </td>
                    <td>
                        乾燥槽
                    </td>
                    <td>
                        乾燥出料
                    </td>

                </tr>
                <tr style="vertical-align: top;">
                    <td colspan="3">
                        CI1_UltraSonic: <span id="CI1_UltraSonic" class="span-sensor-value">null</span><br>
                        C1_UltraSonic: <span id="C1_UltraSonic" class="span-sensor-value">null</span><br>
                        ----- 清洗入料 -----<br>
                        生豆高度
                        <input id="DEMO_CI_Bean_height" type="text" class="input-text" value="10">cm<br>
                        吸料時間
                        <input id="DEMO_CI_vacuumON_time" type="text" class="input-text" value="5">秒<br>
                        放料時間
                        <input id="DEMO_CI_vacuumOFF_time" type="text" class="input-text" value="10">秒<br>
                        ----- 清洗浮選 -----<br>
                        生豆高度
                        <input id="DEMO_C_Bean_height" type="text" class="input-text" value="10">cm<br>
                        吸料時間
                        <input id="DEMO_C_vacuumON_time" type="text" class="input-text" value="5">秒<br>
                        放料時間
                        <input id="DEMO_C_vacuumOFF_time" type="text" class="input-text" value="10">秒<br>
                        水位高度
                        <input id="DEMO_W_Bean_height" type="text" class="input-text" value="10">cm<br>
                        ------ 中水桶 ------<br>
                        水位高度
                        <input id="DEMO_WaterTank_Water_height" type="text" class="input-text" value="50">cm<br>
                    </td>
                    <td colspan="3">
                        S1_UltraSonic: <span id="S1_UltraSonic" class="span-sensor-value">null</span><br>
                        ------ 色選機 ------<br>
                        生豆高度
                        <input id="DEMO_S_Bean_height" type="text" class="input-text" value="10">cm<br>
                        吸料時間
                        <input id="DEMO_S_vacuumON_time" type="text" class="input-text" value="5">秒<br>
                        放料時間
                        <input id="DEMO_S_vacuumOFF_time" type="text" class="input-text" value="10">秒<br>
                        ----- 出料好果 -----<br>
                        生豆高度
                        <input id="DEMO_SOg_Bean_height" type="text" class="input-text" value="10">cm<br>
                        ----- 出料壞果 -----<br>
                        生豆高度
                        <input id="DEMO_SOb_Bean_height" type="text" class="input-text" value="10">cm<br>
                    </td>
                    <td colspan="2">
                        PO1_UltraSonic: <span id="PO1_UltraSonic" class="span-sensor-value">null</span><br>
                        ------ 脫皮機 ------<br>
                        馬達轉速
                        <input name="Peel_Tank_motor_rpm" type="text" class="input-text" value="30">rpm<br>
                        吸料時間
                        <input name="Peel_Tank_vacuumON_time" type="text" class="input-text" value="3">秒<br>
                        放料時間
                        <input name="Peel_Tank_vacuumOFF_time" type="text" class="input-text" value="30">秒<br>
                        --- 脫皮機出料 ---<br>
                        生豆高度
                        <input name="Peel_Tank_bean_height" type="text" class="input-text" value="10">cm<br>
                    </td>
                    <td>
                        F1_UltraSonic: <span id="F1_UltraSonic" class="span-sensor-value">null</span><br>
                        F1_SHT11Temp: <span id="F1_SHT11Temp" class="span-sensor-value">null</span><br>
                        F1_SHT11Humidity: <span id="F1_SHT11Humidity" class="span-sensor-value">null</span><br>
                        ------ 發酵槽 ------<br>
                        生豆高度
                        <input name="Ferment_Tank_bean_height" class="input-text" type="text" value="10">cm<br>
                        吸料時間
                        <input name="Ferment_Tank_vacuumON_time" class="input-text" type="text" value="5">秒<br>
                        放料時間
                        <input name="Ferment_Tank_vacuumOFF_time" class="input-text" type="text" value="10">秒<br>
                        <br>
                        水位高度
                        <input name="Ferment_Tank_water_height" class="input-text" type="text" value="15">cm<br>
                        馬達轉速
                        <input name="Ferment_Tank_motor_rpm" class="input-text" type="text" value="15">rpm<br>
                        <br>
                        發酵溫度
                        <input name="Ferment_Tank_fermenting_temp" class="input-text" type="text" value="10">℃<br>
                        發酵等待
                        <input name="Ferment_Tank_fermenting_time" class="input-text" type="text" value="5">秒<br>
                        廢水排放
                        <input name="Ferment_Tank_WaterOut_time" class="input-text" type="text" value="5">秒
                    </td>
                    <td>
                        D1_UltraSonic: <span id="D1_UltraSonic" class="span-sensor-value">null</span><br>
                        D1_SHT11Temp: <span id="D1_SHT11Temp" class="span-sensor-value">null</span><br>
                        D1_SHT11Humidity: <span id="D1_SHT11Humidity" class="span-sensor-value">null</span><br>
                        ------ 乾燥槽 ------<br>
                        <!-- 乾燥槽 -->
                        生豆高度
                        <input name="Dry_Tank_bean_height" type="text" class="input-text" value="10">cm<br>
                        吸料時間
                        <input name="Dry_Tank_vacuumON_time" type="text" class="input-text" value="5">秒<br>
                        放料時間
                        <input name="Dry_Tank_vacuumOFF_time" type="text" class="input-text" value="10">秒<br>
                        馬達轉速
                        <input name="Dry_Tank_motor_rpm" type="text" class="input-text" value="0">rpm<br>
                        <br>
                        指定溫度
                        <input name="Dry_Tank_drying_temp" type="text" class="input-text" value="38">℃<br>
                        指定濕度 
                        <input name="Dry_Tank_drying_Humidity" type="text" class="input-text" value="11">%<br>
                        返潮時間
                        <input name="Dry_Tank_drying_time" type="text" class="input-text" value="5">秒<br>
                    </td>
                    <td>
                        DO1_UltraSonic: <span id="DO1_UltraSonic" class="span-sensor-value">null</span><br>
                        ----- 乾燥出料 -----<br>
                        <!-- 乾燥出料 -->
                        生豆高度
                        <input name="Dry_Output_bean_height" type="text" class="input-text" value="10">cm<br>
                        吸料時間
                        <input name="Dry_Output_vacuumON_time" type="text" class="input-text" value="5"> 秒<br>
                        放料時間 
                        <input name="Dry_Output_vacuumOFF_time" type="text" class="input-text" value="10"> 秒<br>
                        <button style="margin: 5px 5px 0px 5px; font-size: 10px;" type="submit" class="btn btn-primary" onclick="stop_Drying_OutputtingBean()">
                            暫停乾燥<br><u>開啟 D1 蝴蝶閥</u></button>
                        <br>
                        <br>
                        <div style="font-size: 12px; color: crimson; line-height: 15px;">測試水份後<br>將桶槽改為入料中<br>D1_UltraSonic 改為 0</div>
                        <button style="margin: 5px 5px 0px 5px; font-size: 10px;" type="submit" class="btn btn-primary" onclick="DtankDiskValve('1')">
                            D1 蝴蝶閥 ON</u></button><br>
                        <button style="margin: 5px 5px 0px 5px; font-size: 10px;" type="submit" class="btn btn-primary" onclick="DtankDiskValve('0')">
                            D1 蝴蝶閥 OFF</u></button>
                        <script>
                            function DtankDiskValve(params) {
                                if (params == '1') {
                                    data = { "tank_num": "D1", "command": "tank_diskvalve_status", "value": "on" };
                                } else if (params == '0') {
                                    data = { "tank_num": "D1", "command": "tank_diskvalve_status", "value": "off" };
                                } else {
                                    data = { "tank_num": "D1", "command": "tank_diskvalve_status", "value": params };
                                }
                                $.post('/mqtt/1', data, function (res) {
                                    console.log('data: ', data)
                                    console.log('res: ', res)
                                }, 'text')
                            }
                            
                            // var outputtingBean_interval

                            // function stop_Drying_OutputtingBean_IN(){
                            //     console.log("---- 測試後入料 ----")
                            // }

                            function stop_Drying_OutputtingBean(){
                                clearInterval(dry_status_interval)
                                console.log("------- 狀態自動化判斷 停止 -------")
                                console.log("---- 出料至儲豆槽 ----")

                                var Dry_Output_bean_height = $("input[name=Dry_Output_bean_height]").val();
                                var Dry_Output_vacuumON_time = $("input[name=Dry_Output_vacuumON_time]").val();
                                var Dry_Output_vacuumOFF_time = $("input[name=Dry_Output_vacuumOFF_time]").val();

                                data = {"command": "stop_Drying_OutputtingBean",
                                        "Dry_Output_bean_height": Dry_Output_bean_height,
                                        "Dry_Output_vacuumON_time": Dry_Output_vacuumON_time,
                                        "Dry_Output_vacuumOFF_time": Dry_Output_vacuumOFF_time
                                        };

                                // 更新桶槽狀態
                                $.get('/dryDEMO_outputtingBean', data, function (res){
                                    D1 = res.Dry_Tank_1
                                    D2 = res.Dry_Tank_2
                                    DO1 = res.Dry_Output_1
                                    DO2 = res.Dry_Output_2
                                    dry_tank_status = [D1, D2]
                                    dry_output_status = [DO1, DO2]

                                    loading_status();
                                    loading_sensors();

                                }, 'json');

                            }
                        </script>
                    </td>
                </tr>
                <tr>
                    <td colspan="3">
                        清洗自動化
                    </td>
                    <td colspan="3">
                        色選自動化
                    </td>
                    <td colspan="2">
                        <button style="margin: 5px 5px 0px 5px; font-size: 10px;" type="submit" class="btn btn-primary" onclick="peel_auto_status_testing()">
                            脫皮自動化</button>
                        <br>
                        <button style="margin: 5px 5px 0px 5px; font-size: 10px;" type="submit" class="btn btn-primary" onclick="peel_auto_status_stop()">
                            <u>脫皮停止</u></button>
                        <script>
                            function peel_auto_status_stop(){
                                clearInterval(peel_status_interval)
                                console.log("------- 脫皮自動化判斷 停止 -------")
                            }

                            function peel_auto_status_testing(){
                                console.log("------- 脫皮自動化判斷 開始 -------")
                                var Peel_Tank_bean_height = $('input[name=Peel_Tank_bean_height]').val();
                                var Peel_Tank_motor_rpm = $('input[name=Peel_Tank_motor_rpm]').val();
                                var Peel_Tank_vacuumON_time = $('input[name=Peel_Tank_vacuumON_time]').val();
                                var Peel_Tank_vacuumOFF_time = $('input[name=Peel_Tank_vacuumOFF_time]').val();

                                data = {"Peel_Tank_bean_height":Peel_Tank_bean_height,
                                        "Peel_Tank_motor_rpm":Peel_Tank_motor_rpm,
                                        "Peel_Tank_vacuumON_time":Peel_Tank_vacuumON_time,
                                        "Peel_Tank_vacuumOFF_time":Peel_Tank_vacuumOFF_time
                                        }

                                // 更新桶槽狀態
                                peel_status_interval = setInterval(peel_auto_status, 5*1000);
                                // peel_auto_status()

                                function peel_auto_status(){
                                    if (peel_status_process == 1) { return }

                                    peel_status_process = 1;
                                    $.get('/peel_auto_status', data, function (res){
                                        P1 = res.Peel_Tank_1
                                        P2 = res.Peel_Tank_2
                                        PO1 = res.Peel_Output_1
                                        PO2 = res.Peel_Output_2

                                        peel_tank_status = [P1, P2]
                                        peel_output_status = [PO1, PO2]
                                        loading_status();
                                        loading_sensors();

                                        peel_status_process = 0;
                                    }, 'json');
                                }
                            }
                        </script>
                    </td>
                    <td>
                        <button style="margin: 5px 5px 0px 5px; font-size: 10px;" type="submit" class="btn btn-primary" onclick="ferment_auto_status_testing()">
                            發酵自動化</button>
                        <br>
                        <button style="margin: 5px 5px 0px 5px; font-size: 10px;" type="submit" class="btn btn-primary" onclick="ferment_auto_status_stop()">
                            <u>發酵停止</u></button>
                        <script>
                            function ferment_auto_status_stop(){
                                clearInterval(ferment_status_interval)
                                console.log("------- 發酵自動化判斷 停止 -------")
                            }

                            function ferment_auto_status_testing(){
                                console.log("------- 發酵自動化判斷 開始 -------")
                                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_motor_rpm = $("input[name=Ferment_Tank_motor_rpm]").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_WaterOut_time = $("input[name=Ferment_Tank_WaterOut_time]").val();

                                data = {"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_motor_rpm":Ferment_Tank_motor_rpm,
                                        "Ferment_Tank_fermenting_temp":Ferment_Tank_fermenting_temp,
                                        "Ferment_Tank_fermenting_time":Ferment_Tank_fermenting_time,
                                        "Ferment_Tank_WaterOut_time":Ferment_Tank_WaterOut_time
                                        }

                                // 更新桶槽狀態
                                ferment_status_interval = setInterval(ferment_auto_status, 5*1000);
                                // ferment_auto_status();

                                function ferment_auto_status(){
                                    if (ferment_status_process == 1) { return }

                                    ferment_status_process = 1;
                                    $.get('/fermentDEMO_auto_status', data, function (res){
                                        F1 = res.Ferment_Tank_1
                                        F2 = res.Ferment_Tank_2
                                        ferment_tank_status = [F1, F2]

                                        loading_status();
                                        loading_sensors();
                                        ferment_status_process = 0;
                                    }, 'json');
                                }

                            }
                        </script>
                    </td>
                    <td colspan="2">
                        <button style="margin: 5px 10px 0px 10px; font-size: 10px;" type="submit" class="btn btn-primary" onclick="dry_auto_status_testing()">
                            <u>乾燥自動化</u></button>
                            <br>
                        <button style="margin: 5px 10px 0px 10px; font-size: 10px;" type="submit" class="btn btn-primary" onclick="dry_auto_status_stop()">
                            <u>乾燥停止</u></button>
                        <script>
                            function dry_auto_status_stop(){
                                clearInterval(dry_status_interval)
                                console.log("------- 狀態自動化判斷 停止 -------")
                            }
                            function dry_auto_status_testing(){
                                console.log("------- 發酵自動化判斷 開始 -------")
                                
                                var Dry_Tank_bean_height = $("input[name=Dry_Tank_bean_height]").val();
                                var Dry_Tank_vacuumON_time = $("input[name=Dry_Tank_vacuumON_time]").val();
                                var Dry_Tank_vacuumOFF_time = $("input[name=Dry_Tank_vacuumOFF_time]").val();
                                var Dry_Tank_motor_rpm = $("input[name=Dry_Tank_motor_rpm]").val();
                                var Dry_Tank_drying_temp = $("input[name=Dry_Tank_drying_temp]").val();
                                var Dry_Tank_drying_Humidity = $("input[name=Dry_Tank_drying_Humidity]").val();
                                var Dry_Tank_drying_time = $("input[name=Dry_Tank_drying_time]").val();
                                var Dry_Output_bean_height = $("input[name=Dry_Output_bean_height]").val();
                                var Dry_Output_vacuumON_time = $("input[name=Dry_Output_vacuumON_time]").val();
                                var Dry_Output_vacuumOFF_time = $("input[name=Dry_Output_vacuumOFF_time]").val();
                            

                                data = {"command": "Dry_auto_parameter",
                                        "Dry_Tank_bean_height": Dry_Tank_bean_height,
                                        "Dry_Tank_vacuumON_time": Dry_Tank_vacuumON_time,
                                        "Dry_Tank_vacuumOFF_time": Dry_Tank_vacuumOFF_time,
                                        "Dry_Tank_motor_rpm": Dry_Tank_motor_rpm,
                                        "Dry_Tank_drying_temp": Dry_Tank_drying_temp,
                                        "Dry_Tank_drying_Humidity": Dry_Tank_drying_Humidity,
                                        "Dry_Tank_drying_time": Dry_Tank_drying_time,
                                        "Dry_Output_bean_height": Dry_Output_bean_height,
                                        "Dry_Output_vacuumON_time": Dry_Output_vacuumON_time,
                                        "Dry_Output_vacuumOFF_time": Dry_Output_vacuumOFF_time
                                        };

                                // 更新桶槽狀態
                                dry_status_interval = setInterval(dry_auto_status, 5*1000);
                                // dry_auto_status();

                                function dry_auto_status(){
                                    if (dry_status_process == 1) { return }

                                    dry_status_process = 1;
                                    $.get('/dryDEMO_auto_status', data, function (res){
                                        D1 = res.Dry_Tank_1
                                        D2 = res.Dry_Tank_2
                                        DO1 = res.Dry_Output_1
                                        DO2 = res.Dry_Output_2
                                        dry_tank_status = [D1, D2]
                                        dry_output_status = [DO1, DO2]

                                        loading_status();
                                        loading_sensors();
                                        dry_status_process = 0;
                                    }, 'json');
                                }

                            }
                        </script>
                    </td>
                </tr>
            </table>
        </div>

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

    </div>
    
</body>
</html>