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

    <link rel="stylesheet" href="../static/css/sign_in.css">
-->
    <script>
        $(document).ready(function(){
            $("#coffee_title").text('清洗貨櫃');
        });
    </script>

    <style>
        .C1_position {
            position: absolute;
            top: 135px;
            left: 205px;
            width: 175px;
            height: 230px;
            border-style: solid;
            border-color: aqua;
        }
        .C2_position {
            position: absolute;
            top: 400px;
            left: 205px;
            width: 175px;
            height: 230px;
            border-style: solid;
            border-color: aqua;
        }
        .CO1_position {
            position: absolute;
            top: 135px;
            left: 400px;
            width: 175px;
            height: 230px;
            border-style: solid;
            border-color: aqua;
        }
        .CO2_position {
            position: absolute;
            top: 400px;
            left: 400px;
            width: 175px;
            height: 230px;
            border-style: solid;
            border-color: aqua;
        }
        .S1_position {
            position: absolute;
            top: 135px;
            left: 945px;
            width: 115px;
            height: 230px;
            border-style: solid;
            border-color: aqua;
        }
        .S2_position {
            position: absolute;
            top: 400px;
            left: 945px;
            width: 115px;
            height: 230px;
            border-style: solid;
            border-color: aqua;
        }
        .SO1_position {
            position: absolute;
            top: 135px;
            left: 1065px;
            width: 60px;
            height: 230px;
            border-style: solid;
            border-color: aqua;
        }
        .SO2_position {
            position: absolute;
            top: 400px;
            left: 1065px;
            width: 60px;
            height: 230px;
            border-style: solid;
            border-color: aqua;
        }
        .P1_position {
            position: absolute;
            top: 135px;
            left: 1150px;
            width: 95px;
            height: 230px;
            border-style: solid;
            border-color: aqua;
        }
        .P2_position {
            position: absolute;
            top: 400px;
            left: 1150px;
            width: 95px;
            height: 230px;
            border-style: solid;
            border-color: aqua;
        }
        .PO1_position {
            position: absolute;
            top: 135px;
            left: 1250px;
            width: 50px;
            height: 230px;
            border-style: solid;
            border-color: aqua;
        }
        .PO2_position {
            position: absolute;
            top: 400px;
            left: 1250px;
            width: 50px;
            height: 230px;
            border-style: solid;
            border-color: aqua;
        }
    </style>
    <script language="JavaScript">
        // 指定 10秒 刷新網頁一次
        var WebRestart
        // WebRestart = setTimeout(function () { location.reload() }, 10000);
    </script>

</head>

<body>
    <div id="wrapper">
        <div id="coffee_header">
            <!-- 匯入共同使用的 header.html 內容 -->
            {% include 'header.html' %}
        </div>
    
        <!--
            background-color:rgb(0, 238, 255);
        -->
        <!--
        <div style="text-align: left;">
            <a href="/index_new" style="float: left;">&nbsp;&nbsp;&nbsp;返回貨櫃首頁</a>
        </div>
        <div style="text-align: right;">
            <a href="/camera_clean" style="float: right;">清洗貨櫃攝影機&nbsp;&nbsp;&nbsp;</a>
        </div>
        
        <div style="text-align: center; margin-top: 30px; font-size: 24px;">
            Smart Coffee
        </div>
        -->
        <div>
            <!-- 底圖 清洗浮選貨櫃 12 個清洗浮選桶槽 -->
            <center><img src="../static/img/web_CleanColorPeel_container.png" style="margin: auto; width: 1430px;"></center>

            <!-- 清洗浮選槽 C1 -->
            <div id="C1" tabindex="0" class="C1_position" role="button">
                C1 status
                <!-- C1 狀態點點-->
                <div id="C1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
            </div>
            
            <!-- 清洗浮選槽 C2 -->
            <div id="C2" tabindex="0" class="C2_position" role="button">
                C2 status
                <div id="C2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
            </div>

            <!-- 清洗浮選 CO1 出料儲豆槽 -->
            <div id="CO1" tabindex="0" class="CO1_position" role="button">
                CO1 status
                <!-- CO1 狀態點點-->
                <div id="CO1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
            </div>

            <!-- 清洗浮選 CO2 出料儲豆槽 -->
            <div id="CO2" tabindex="0" class="CO2_position" role="button">
                CO2 status
                <!-- CO2 狀態點點-->
                <div id="CO2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
            </div>

            <!-- 色選機 S1 -->
            <div id="S1" tabindex="0" class="S1_position" role="button">
                S1 status
                <div id="S1_status" style="width: 20px; height: 20px; background-color: crimson; border-radius: 50%;"></div>
            </div>

            <!-- 色選機 S2 -->
            <div id="S2" tabindex="0" class="S2_position" role="button">
                S2 status
                <div id="S2_status" style="width: 20px; height: 20px; background-color: crimson; border-radius: 50%;"></div>
            </div>

            <!-- 色選機 SO1 出料儲豆槽 -->
            <div id="SO1" tabindex="0" class="SO1_position" role="button">
                SO1 status
                <div id="SO1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
            </div>

            <!-- 色選機 SO2 出料儲豆槽 -->
            <div id="SO2" tabindex="0" class="SO2_position" role="button">
                SO2 status
                <div id="SO2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
            </div>

            <!-- 脫皮機 P1 -->
            <div id="P1" tabindex="0" class="P1_position" role="button">
                P1 status
                <div id="P1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
            </div>

            <!-- 脫皮機 P2 -->
            <div id="P2" tabindex="0" class="P2_position" role="button">
                P2 status
                <div id="P2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
            </div>

            <!-- 脫皮機 PO1 出料儲豆槽 -->
            <div id="PO1" tabindex="0" class="PO1_position" role="button">
                PO1 status
                <div id="PO1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
            </div>

            <!-- 脫皮機 PO2 出料儲豆槽 -->
            <div id="PO2" tabindex="0" class="PO2_position" role="button">
                PO2 status
                <div id="PO2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
            </div>

            
        </div>

        <!-- 清洗浮選 模态框 -->
        <div class="modal fade" id="C_Modal">
            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
                <div class="modal-content">

                    <div class="modal-header">
                        <h4 id="C_Modal_title" class="modal-title">清洗浮選槽 C1 狀態</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <!-- 模态框主体 -->
                    <div class="modal-body">
                        <table style="border:0px gray solid; width: 100%;" cellpadding="3">
                            <!--<table style="border:0px gray solid;-->
                                <tr>
                                    <td><strong><a id="C_actuator_link" href="/clean_container/1">制動器狀態</a></strong></td>
                                    <td><strong><a id="C_sensor_link" href="/clean_container/1">感測器狀態</a></strong></td>
                                </tr>
                                <tr>
                                    <td style="vertical-align:text-top;">
                                        <table style="border:0px gray solid;" cellpadding="3">
                                            <tr>
                                                <td>
                                                    <div id="C_vacuum_status"
                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                    </div>
                                                    
                                                </td>
                                                <td>
                                                    真空吸料機
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div id="tank_pump_waterInput_status"
                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                    </div>
                                                </td>
                                                <td>
                                                    入水口_雙核泵
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div id="tank_pump_waterL2L3_status"
                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                    </div>
                                                </td>
                                                <td>
                                                    出水口 2、3_雙核泵
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div id="tank_pump_waterL4L5_status"
                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                    </div>
                                                </td>
                                                <td>
                                                    出水口 4、5_雙核泵
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div id="tank_solenoid_waterL2L3_status"
                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                    </div>
                                                </td>
                                                <td>
                                                    出水口 2、3_電磁閥
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div id="tank_solenoid_waterL4L5_status"
                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                    </div>
                                                </td>
                                                <td>
                                                    出水口 4、5_電磁閥
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div id="tank_stepping_motor_status"
                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                    </div>
                                                </td>
                                                <td>
                                                    步進馬達
                                                </td>
                                            </tr>
                                        </table> 
                                    </td>
                                    <td style="vertical-align:text-top;">
                                        <table style="border:0px gray solid;" cellpadding="3">
                                            <tr>
                                                <td>
                                                    咖啡生豆高度
                                                </td>
                                                <td>
                                                    <span id="UltraSonic_t_status"></span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <a id="camera_clean_tid" href=""><strong>攝影機畫面</strong></a>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- 清洗浮選 出料儲豆槽 模态框 -->
        <div class="modal fade" id="CO_Modal">
            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
                <div class="modal-content">

                    <div class="modal-header">
                        <h4 id="CO_Modal_title" class="modal-title">清洗浮選出料儲豆槽 CO1 狀態</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <!-- 模态框主体 -->
                    <div class="modal-body">
                        <table style="border:0px gray solid; width: 100%;" cellpadding="3">
                            <!--<table style="border:0px gray solid;-->
                                <tr>
                                    <td><strong><a id="CO_actuator_link" href="/clean_container/1">制動器狀態</a></strong></td>
                                    <td><strong><a id="CO_sensor_link" href="/clean_container/1">感測器狀態</a></strong></td>
                                </tr>
                                <tr>
                                    <td style="vertical-align:text-top;">
                                        <table style="border:0px gray solid;" cellpadding="3">
                                            <tr>
                                                <td>
                                                    <div id="CO_vacuum_status"
                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                    </div>
                                                    
                                                </td>
                                                <td>
                                                    真空吸料機
                                                </td>
                                            </tr>
                                        </table> 
                                    </td>
                                    <td style="vertical-align:text-top;">
                                        <table style="border:0px gray solid;" cellpadding="3">
                                            <tr>
                                                <td>
                                                    (感測器)
                                                </td>
                                                <td>
                                                    <span id="">000</span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <a id="CO_camera_clean_tid" href=""><strong>攝影機畫面</strong></a>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- 色選機 模态框 -->




        <!-- 色選機 出料儲豆槽 模态框 -->
        <div class="modal fade" id="SO_Modal">
            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
                <div class="modal-content">

                    <div class="modal-header">
                        <h4 id="SO_Modal_title" class="modal-title">色選機出料儲豆槽 CO1 狀態</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <!-- 模态框主体 -->
                    <div class="modal-body">
                        <table style="border:0px gray solid; width: 100%;" cellpadding="3">
                            <!--<table style="border:0px gray solid;-->
                                <tr>
                                    <td><strong><a id="SO_actuator_link" href="/colorselect_container/1">制動器狀態</a></strong></td>
                                    <td><strong><a id="SO_sensor_link" href="/colorselect_container/1">感測器狀態</a></strong></td>
                                </tr>
                                <tr>
                                    <td style="vertical-align:text-top;">
                                        <table style="border:0px gray solid;" cellpadding="3">
                                            <tr>
                                                <td>
                                                    <div id="SO_vacuum_status"
                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                    </div>
                                                    
                                                </td>
                                                <td>
                                                    真空吸料機
                                                </td>
                                            </tr>
                                        </table> 
                                    </td>
                                    <td style="vertical-align:text-top;">
                                        <table style="border:0px gray solid;" cellpadding="3">
                                            <tr>
                                                <td>
                                                    (感測器)
                                                </td>
                                                <td>
                                                    <span id="">000</span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <a id="SO_camera_colorselect_tid" href=""><strong>攝影機畫面</strong></a>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- 脫皮機 模态框 -->
        <div class="modal fade" id="P_Modal">
            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
                <div class="modal-content">

                    <div class="modal-header">
                        <h4 id="P_Modal_title" class="modal-title">脫皮機 P1 狀態</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <!-- 模态框主体 -->
                    <div class="modal-body">
                        <table style="border:0px gray solid; width: 100%;" cellpadding="3">
                            <!--<table style="border:0px gray solid;-->
                                <tr>
                                    <td><strong><a id="P_actuator_link" href="">制動器狀態</a></strong></td>
                                    <td><strong><a id="P_sensor_link" href="">感測器狀態</a></strong></td>
                                </tr>
                                <tr>
                                    <td style="vertical-align:text-top;">
                                        <table style="border:0px gray solid;" cellpadding="3">
                                            <tr>
                                                <td>
                                                    <div id="P_vacuum_status"
                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                    </div>
                                                    
                                                </td>
                                                <td>
                                                    真空吸料機
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div id="tank_motor_status"
                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                    </div>
                                                </td>
                                                <td>
                                                    馬達
                                                </td>
                                            </tr>
                                        </table> 
                                    </td>
                                    <td style="vertical-align:text-top;">
                                        <table style="border:0px gray solid;" cellpadding="3">
                                            <tr>
                                                <td>
                                                    (感測器)
                                                </td>
                                                <td>
                                                    <span id="SENSOR_t_status">000</span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <a id="camera_peel_tid" href=""><strong>攝影機畫面</strong></a>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- 脫皮機 出料儲豆槽 模态框 -->
        <div class="modal fade" id="PO_Modal">
            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
                <div class="modal-content">

                    <div class="modal-header">
                        <h4 id="PO_Modal_title" class="modal-title">脫皮機出料儲豆槽 PO1 狀態</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <!-- 模态框主体 -->
                    <div class="modal-body">
                        <table style="border:0px gray solid; width: 100%;" cellpadding="3">
                            <!--<table style="border:0px gray solid;-->
                                <tr>
                                    <td><strong><a id="PO_actuator_link" href="/clean_container/1">制動器狀態</a></strong></td>
                                    <td><strong><a id="PO_sensor_link" href="/clean_container/1">感測器狀態</a></strong></td>
                                </tr>
                                <tr>
                                    <td style="vertical-align:text-top;">
                                        <table style="border:0px gray solid;" cellpadding="3">
                                            <tr>
                                                <td>
                                                    <div id="PO_vacuum_status"
                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                    </div>
                                                    
                                                </td>
                                                <td>
                                                    真空吸料機
                                                </td>
                                            </tr>
                                        </table> 
                                    </td>
                                    <td style="vertical-align:text-top;">
                                        <table style="border:0px gray solid;" cellpadding="3">
                                            <tr>
                                                <td>
                                                    (感測器)
                                                </td>
                                                <td>
                                                    <span id="">000</span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <a id="PO_camera_peel_tid" href=""><strong>攝影機畫面</strong></a>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>




        <script>
            function update_data_C(ctid) {
                console.log('clean_tank_id:' + ctid)
                $.get('/loading/C' + ctid, '', function (res) {

                    if (res.tank_vacuum == 0) {
                        $("#C_vacuum_status").css("background-color", "#C0C0C0")
                    } else if (res.tank_vacuum == 1) {
                        $("#C_vacuum_status").css("background-color", "forestgreen")
                    } else { $("#C_vacuum_status").css("background-color", "crimson") }

                    if (res.tank_pump_waterInput == 0) {
                        $("#tank_pump_waterInput_status").css("background-color", "#C0C0C0")
                    } else if (res.tank_pump_waterInput == 1) {
                        $("#tank_pump_waterInput_status").css("background-color", "forestgreen")
                    } else { $("#tank_pump_waterInput_status").css("background-color", "crimson") }

                    if (res.tank_pump_waterL2L3 == 0) {
                        $("#tank_pump_waterL2L3_status").css("background-color", "#C0C0C0")
                    } else if (res.tank_pump_waterL2L3 == 1) {
                        $("#tank_pump_waterL2L3_status").css("background-color", "forestgreen")
                    } else { $("#tank_pump_waterL2L3_status").css("background-color", "crimson") }

                    if (res.tank_pump_waterL4L5 == 0) {
                        $("#tank_pump_waterL4L5_status").css("background-color", "#C0C0C0")
                    } else if (res.tank_pump_waterL4L5 == 1) {
                        $("#tank_pump_waterL4L5_status").css("background-color", "forestgreen")
                    } else { $("#tank_pump_waterL4L5_status").css("background-color", "crimson") }

                    if (res.tank_solenoid_waterL2L3 == 0) {
                        $("#tank_solenoid_waterL2L3_status").css("background-color", "#C0C0C0")
                    } else if (res.tank_solenoid_waterL2L3 == 1) {
                        $("#tank_solenoid_waterL2L3_status").css("background-color", "forestgreen")
                    } else { $("#tank_solenoid_waterL2L3_status").css("background-color", "crimson") }

                    if (res.tank_solenoid_waterL4L5 == 0) {
                        $("#tank_solenoid_waterL4L5_status").css("background-color", "#C0C0C0")
                    } else if (res.tank_solenoid_waterL4L5 == 1) {
                        $("#tank_solenoid_waterL4L5_status").css("background-color", "forestgreen")
                    } else { $("#tank_solenoid_waterL4L5_status").css("background-color", "crimson") }

                    if (res.tank_stepping_motor == 'stop' || res.tank_stepping_motor == '0' ) {
                        $("#tank_stepping_motor_status").css("background-color", "#C0C0C0")
                    } else if (res.tank_stepping_motor == 'up' || res.tank_stepping_motor == 'down' ) {
                        $("#tank_stepping_motor_status").css("background-color", "forestgreen")
                    } else { $("#tank_stepping_motor_status").css("background-color", "crimson") }

                    $("#UltraSonic_t_status").text(res.UltraSonic);

                }, 'json');

                $('#C_Modal_title').text("清洗浮選槽 C" + ctid + " 狀態");
                $('#C_actuator_link').attr("href", "/clean_container/" + ctid);
                $('#C_sensor_link').attr("href", "/clean_container/" + ctid);
                $('#camera_clean_tid').attr("href", "/camera_C" + ctid);
                $('#C_Modal').modal('show');
            }

            function update_data_SO(sotid){
                console.log('color-select_tank_id:' + sotid)
                $.get('/loading/SO' + sotid, '', function (res) {
                    if (res.output_vacuum == 0) {
                        $("#SO_vacuum_status").css("background-color", "#C0C0C0")
                    } else if (res.output_vacuum == 1) {
                        $("#SO_vacuum_status").css("background-color", "forestgreen")
                    } else { $("#SO_vacuum_status").css("background-color", "crimson") }
                }, 'json');

                $('#SO_Modal_title').text("色選機出料儲豆槽 SO" + sotid + " 狀態");
                $('#SO_actuator_link').attr("href", "/colorselect_container/" + sotid);
                $('#SO_sensor_link').attr("href", "/colorselect_container/" + sotid);
                $('#SO_camera_colorselect_tid').attr("href", "/camera_SO" + sotid);
                $('#SO_Modal').modal('show');

            }

            function update_data_S(stid) {
                console.log('color-select_tank_id:' + stid)
                $.get('/loading/S' + stid, '', function (res) {

                }, 'json');

                $('#camera_colorselect_tid').attr("href", "/camera_S" + stid);
                $('#S1_Modal').modal('show');
            }

            function update_data_P(ptid) {
                console.log('peel_tank_id:' + ptid)
                $.get('/loading/P' + ptid, '', function (res) {
                    if (res.tank_vacuum == 0) {
                        $("#P_vacuum_status").css("background-color", "#C0C0C0")
                    } else if (res.tank_vacuum == 1) {
                        $("#P_vacuum_status").css("background-color", "forestgreen")
                    } else { $("#P_vacuum_status").css("background-color", "crimson") }

                    if (res.tank_motor > 0) {
                        $("#tank_motor_status").css("background-color", "forestgreen")
                    } else if (res.tank_motor == 0) {
                        $("#tank_motor_status").css("background-color", "#C0C0C0")
                    } else { $("#tank_motor_status").css("background-color", "crimson") }

                }, 'json');

                $('#P_Modal_title').text("脫皮機 P" + ptid + " 狀態");
                $('#P_actuator_link').attr("href", "/peel_container_tank/" + ptid);
                $('#P_sensor_link').attr("href", "/peel_container_tank/" + ptid);
                $('#camera_peel_tid').attr("href", "/camera_P" + ptid);
                $('#P_Modal').modal('show');
            }

            function update_data_CO(cotid){
                console.log('clean_output_tank_id:' + cotid)
                $.get('loading/CO' + cotid, '', function (res){
                    if (res.output_vacuum == 0) {
                        $("#CO_vacuum_status").css("background-color", "#C0C0C0")
                    } else if (res.output_vacuum == 1) {
                        $("#CO_vacuum_status").css("background-color", "forestgreen")
                    } else { $("#CO_vacuum_status").css("background-color", "crimson") }
                }, 'json');

                $('#CO_Modal_title').text("清洗浮選出料儲豆槽 CO" + cotid + " 狀態");
                $('#CO_actuator_link').attr("href", "/clean_container/" + cotid);
                $('#CO_sensor_link').attr("href", "/clean_container/" + cotid);
                $('#CO_camera_clean_tid').attr("href", "/camera_CO" + cotid);
                $('#CO_Modal').modal('show');

            }

            function update_data_PO(potid){
                console.log('peel_output_tank_id' + potid)
                $.get('loading/PO' + potid, '', function (res){
                    if (res.output_vacuum == 0) {
                        $("#PO_vacuum_status").css("background-color", "#C0C0C0")
                    } else if (res.output_vacuum == 1) {
                        $("#PO_vacuum_status").css("background-color", "forestgreen")
                    } else { $("#PO_vacuum_status").css("background-color", "crimson") }
                }, 'json');

                $('#PO_Modal_title').text("脫皮機出料儲豆槽 PO" + potid + " 狀態");
                $('#PO_actuator_link').attr("href", "/peel_container/" + potid);
                $('#PO_sensor_link').attr("href", "/peel_container/" + potid);
                $('#PO_camera_peel_tid').attr("href", "/camera_PO" + potid);
                $('#PO_Modal').modal('show');

            }




            var button_C1 = document.getElementById('C1');
            button_C1.addEventListener('click', function () { update_data_C("1") });

            var button_C2 = document.getElementById('C2');
            button_C2.addEventListener('click', function () { update_data_C("2") });

            var button_CO1 = document.getElementById('CO1');
            button_CO1.addEventListener('click', function () { update_data_CO("1") });

            var button_CO2 = document.getElementById('CO2');
            button_CO2.addEventListener('click', function () { update_data_CO("2") });

            var button_S1 = document.getElementById('S1');
            button_S1.addEventListener('click', function () { update_data_S("1") });

            var button_S2 = document.getElementById('S2');
            button_S2.addEventListener('click', function () { update_data_S("2") });

            var button_SO1 = document.getElementById('SO1');
            button_SO1.addEventListener('click', function () { update_data_SO("1") });

            var button_SO2 = document.getElementById('SO2');
            button_SO2.addEventListener('click', function () { update_data_SO("2") });

            var button_P1 = document.getElementById('P1');
            button_P1.addEventListener('click', function () { update_data_P("1") });

            var button_P2 = document.getElementById('P2');
            button_P2.addEventListener('click', function () { update_data_P("2") });

            var button_PO1 = document.getElementById('PO1');
            button_PO1.addEventListener('click', function () { update_data_PO("1") });

            var button_PO2 = document.getElementById('PO2');
            button_PO2.addEventListener('click', function () { update_data_PO("2") });

        </script>
        <!--
        <footer class="footer">
            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">
                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有
                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>
            </div>
        </footer>
        -->
        <div id="coffee_footer">
            <!-- 匯入共同使用的 footer.html 內容 -->
            {% include 'footer.html' %}
        </div>
    </div>

</body>

</html>