coffeeproject20230512/coffeeproject/app/templates/clean.html

<!-- 宣告我們要套用模板 -->
{% extends "base.html" %}
{% block title %}{{ title }}{% endblock %}

{% block script %}
    <script>
        var status = '{{status}}';
        var username = '{{username}}';
        $(document).ready(function(){
            $("#coffee_title_pc").text('清洗貨櫃');
            $("#coffee_title_phone").text('清洗貨櫃');
            $('#navbarDropdown_user_pc').text(username);
            $('#navbarDropdown_user_phone').text(username);
            myrefresh();
        });
        function myrefresh()
        { 
          $.get('/clean_auto_data', function (resText) {
                var CI = [resText.CI1,resText.CI2];
                var C=[resText.C1,resText.C2,resText.C3,resText.C4];
                var R=[resText.R1];
                var S = [resText.S1,resText.S2];
                var SO = [resText.SO1,resText.SO2];
                var P = [resText.P1,resText.P2];
                var PO = [resText.PO1,resText.PO2];
     
        
                for (let i=0; i<2; i++) {
                    if (CI[i] == 'CI_InputtingBean') {
                        $("#CI"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                        $("#CI"+parseInt(i+1)+"_status").text("CI" + parseInt(i+1) + " 入豆中")
                  } else if (CI[i] == 'CI_Waiting') {
                        $("#CI"+parseInt(i+1)+"_bar").css("background-color", "lightgray")
                        $("#CI"+parseInt(i+1)+"_status").text("CI" + parseInt(i+1) + " 空桶等待")
                  } else if (CI[i] == 'CI_OutputtingBean') {
                        $("#CI"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                        $("#CI"+parseInt(i+1)+"_status").text("CI" + parseInt(i+1) + " 可出豆")
                  } else if (CI[i] == 'CI_Stand_by') {
                        $("#CI"+parseInt(i+1)+"_bar").css("background-color", "HotPink")
                        $("#CI"+parseInt(i+1)+"_status").text("CI" + parseInt(i+1) + " 待命")
                  } else {
                    console.log('pass')
                  }
                }
                for (let i=0; i<4; i++) {
                if (C[i] == 'C_InputtingBean') {
                    $("#C"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                    $("#C"+parseInt(i+1)+"_status").text("C" + parseInt(i+1) + "  入豆中")
                  } else if (C[i] == 'C_Waiting') {
                    $("#C"+parseInt(i+1)+"_bar").css("background-color", "lightgray")
                    $("#C"+parseInt(i+1)+"_status").text("C" + parseInt(i+1) + "  空桶等待")
                  } else if (C[i] == 'C_InputtingWater') {
                      $("#C"+parseInt(i+1)+"_bar").css("background-color", "DeepSkyBlue")
                      $("#C"+parseInt(i+1)+"_status").text("C" + parseInt(i+1) + "  內桶入水中")
                  } else if (C[i] == 'C_Cleaning') {
                    $("#C"+parseInt(i+1)+"_bar").css("background-color", "plum")
                    $("#C"+parseInt(i+1)+"_status").text("C" + parseInt(i+1) + "  清洗中")
                  } else if (C[i] == 'C_OutputtingWater') {
                      $("#C"+parseInt(i+1)+"_bar").css("background-color", "DeepSkyBlue")
                      $("#C"+parseInt(i+1)+"_status").text("C" + parseInt(i+1) + "  內桶排水中")
                  } else if (C[i] == 'C_OutputtingBean') {
                    $("#C"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                    $("#C"+parseInt(i+1)+"_status").text("C" + parseInt(i+1) + "  可出豆")
                  } else if (C[i] == 'C_Warning') {
                    $("#C"+parseInt(i+1)+"_bar").css("background-color", "crimson")
                    $("#C"+parseInt(i+1)+"_status").text("C" + parseInt(i+1) + "  警告")
                  } else if (C[i] == 'C_Stand_by') {
                    $("#C"+parseInt(i+1)+"_bar").css("background-color", "HotPink")
                    $("#C"+parseInt(i+1)+"_status").text("C" + parseInt(i+1) + " 待命")
                  } else {
                    console.log('pass')
                  }
                }    
                for (let i=0; i<1; i++) {
                if (R[i] == 'R_InputtingWater') {
                    $("#R"+parseInt(i+1)+"_bar").css("background-color", "DeepSkyBlue")
                    $("#R"+parseInt(i+1)+"_status").text("R" + parseInt(i+1) + " 入水中")

                  } else if (R[i] == 'R_Waiting') {
                    $("#R"+parseInt(i+1)+"_bar").css("background-color", "lightgray")
                    $("#R"+parseInt(i+1)+"_status").text("R" + parseInt(i+1) + " 空桶等待")

                  } else if (R[i] == 'R_OutputtingWater') {
                    $("#R"+parseInt(i+1)+"_bar").css("background-color", "DeepSkyBlue")
                    $("#R"+parseInt(i+1)+"_status").text("R" + parseInt(i+1) + " 排水中")
                  } else if (R[i] == 'R_Stand_by') {
                    $("#R"+parseInt(i+1)+"_bar").css("background-color", "HotPink")
                    $("#R"+parseInt(i+1)+"_status").text("R" + parseInt(i+1) + " 待命")
                  } else if (R[i] == 'R_Warning') {
                    console.log('[動作] R桶警告 R' + parseInt(i+1) + ' 警告')
                    $("#R"+parseInt(i+1)+"_bar").css("background-color", "crimson")
                    $("#R"+parseInt(i+1)+"_status").text("R" + parseInt(i+1) + " 警告")

                  } else {
                    console.log('pass')
                  }                
                }    
                for (let i=0; i<2; i++) {
                if (S[i] == 'S_InputtingBean') {
                    $("#S"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                    $("#S"+parseInt(i+1)+"_status").text("S" + parseInt(i+1) + " 入豆中")

                  } else if (S[i] == 'S_Waiting') {
                    $("#S"+parseInt(i+1)+"_bar").css("background-color", "lightgray")
                    $("#S"+parseInt(i+1)+"_status").text("S" + parseInt(i+1) + " 空桶等待")

                  } else if (S[i] == 'S_OutputtingBean') {
                    $("#S"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                    $("#S"+parseInt(i+1)+"_status").text("S" + parseInt(i+1) + " 可出豆")
                  } else if (S[i] == 'S_Stand_by') {
                    $("#S"+parseInt(i+1)+"_bar").css("background-color", "HotPink")
                    $("#S"+parseInt(i+1)+"_status").text("S" + parseInt(i+1) + " 待命")

                  } else {
                    console.log('pass')
                  }                
                }        
                for (let i=0; i<2; i++) {
                if (SO[i] == 'SO_InputtingBean') {
                    $("#SO"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                    $("#SO"+parseInt(i+1)+"_status").text("SO" + parseInt(i+1) + " 入豆中")

                  } else if (SO[i] == 'SO_Waiting') {
                    $("#SO"+parseInt(i+1)+"_bar").css("background-color", "lightgray")
                    $("#SO"+parseInt(i+1)+"_status").text("SO" + parseInt(i+1) + " 空桶等待")

                  } else if (SO[i] == 'SO_OutputtingBean') {
                    $("#SO"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                    $("#SO"+parseInt(i+1)+"_status").text("SO" + parseInt(i+1) + " 可出豆")
                  } else if (SO[i] == 'SO_Stand_by') {
                    $("#SO"+parseInt(i+1)+"_bar").css("background-color", "HotPink")
                    $("#SO"+parseInt(i+1)+"_status").text("SO" + parseInt(i+1) + " 待命")

                  } else {
                    console.log('pass')
                  }                
                }
                for (let i=0; i<2; i++) {
                if (P[i] == 'P_InputtingBean') {
                    $("#P"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                    $("#P"+parseInt(i+1)+"_status").text("P" + parseInt(i+1) + " 入豆中")

                  } else if (P[i] == 'P_Waiting') {
                    $("#P"+parseInt(i+1)+"_bar").css("background-color", "lightgray")
                    $("#P"+parseInt(i+1)+"_status").text("P" + parseInt(i+1) + " 空桶等待")

                  } else if (P[i] == 'P_OutputtingBean') {
                    $("#P"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                    $("#P"+parseInt(i+1)+"_status").text("P" + parseInt(i+1) + " 可出豆")
                  } else if (P[i] == 'P_Stand_by') {
                    $("#P"+parseInt(i+1)+"_bar").css("background-color", "HotPink")
                    $("#P"+parseInt(i+1)+"_status").text("P" + parseInt(i+1) + " 待命")

                  } else {
                    console.log('pass')
                  }                
                }
                for (let i=0; i<2; i++) {
                if (PO[i] == 'PO_InputtingBean') {
                    $("#PO"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                    $("#PO"+parseInt(i+1)+"_status").text("PO" + parseInt(i+1) + " 入豆中")

                  } else if (PO[i] == 'PO_Waiting') {
                    $("#PO"+parseInt(i+1)+"_bar").css("background-color", "lightgray")
                    $("#PO"+parseInt(i+1)+"_status").text("PO" + parseInt(i+1) + " 空桶等待")

                  } else if (PO[i] == 'PO_OutputtingBean') {
                    $("#PO"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                    $("#PO"+parseInt(i+1)+"_status").text("PO" + parseInt(i+1) + " 可出豆")
                  } else if (PO[i] == 'PO_Stand_by') {
                    $("#PO"+parseInt(i+1)+"_bar").css("background-color", "HotPink")
                    $("#PO"+parseInt(i+1)+"_status").text("PO" + parseInt(i+1) + " 待命")

                  } else {
                    console.log('pass')
                  }                
                }          
          },'json');
        }        
    setInterval('myrefresh()',1000);   
    </script>
{% endblock %}
{% block style %} 
    <style>
    /* 各桶槽狀態大小的共同 CSS */
        .div_CleanTank_position {
            text-align: center;
            font-weight: bold;
            border: 0px aquamarine solid;
        }
        .td-clickable:hover {
            background-color: Lavender; 
            border: 2px Gray solid;
        }
        /* 桶槽狀態顯示的顏色條 */
        .div_CleanTank_Status { 
            height: 20px; 
            border-style: solid; 
            border-color: whitesmoke; 
            background-color: black;
        }
        /* 致動器狀態的圈圈 */
        .actuator_status {
            width: 18px; 
            height: 18px; 
            background-color:black; 
            border-radius: 50%;
        }
        /* 狀態外框的 CSS */
        .table_css {
            border: 0px lightsteelblue solid; 
            margin-right: auto; 
            margin-left: auto; 
            text-align: center; 
            margin-top: 5px; 
            width: 80%;
        }
    </style>
{% endblock %}
{% block main %}





        <!-- 清洗浮選 模态框 -->
        <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="btn-close" data-bs-dismiss="modal" aria-label="Close"></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_tank/1">致動器狀態</a></strong></td>
                                    <td><strong><a id="C_sensor_link" href="/clean_container_tank/1">感測器狀態</a></strong></td>
                                </tr>
                                <tr>
                                    <td style="vertical-align:text-top;">
                                        <table style="border:0px gray solid;" cellpadding="3">
                                            <tr>
                                                <td>
                                                    <div id="Ctank_vacuum_status" style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                    </div>
                                                    
                                                </td>
                                                <td>
                                                    <a id="C_Vacuum" href="">真空吸料機</a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div id="Ctank_threewayvalve_input_status"style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                    </div>
                                                </td>
                                                <td>
                                                    <a id="C_threewayvalve_input" href="">入料三通閥</a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div id="Ctank_motor_status"style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                    </div>
                                                </td>
                                                <td>
                                                    <a id="C_motor" href="">馬達</a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div id="Ctank_solenoid_reclaimed_in_status" style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                    </div>
                                                </td>
                                                <td>
                                                    <a id="C_solenoid_reclaimed_in" href="">中水入水電磁閥</a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div id="Ctank_solenoid_water_in_status" style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                    </div>
                                                </td>
                                                <td>
                                                    <a id="C_solenoid_water_in" href="">清水入水電磁閥</a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div id="Ctank_pump_water_in_status"style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                    </div>
                                                </td>
                                                <td>
                                                    <a id="C_pump_water_in" href="">幫浦(清水入水)</a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div id="Ctank_solenoid_water_out_status" style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                    </div>
                                                </td>
                                                <td>
                                                    <a id="C_solenoid_water_out" href="">排水廢水電磁閥</a>
                                                </td>
                                                <tr>
                                                    <td>
                                                        <div id="Ctank_solenoid_reclaimed_out_status" style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <a id="C_solenoid_reclaimed_out" href="">排水中水電磁閥</a>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <div id="Ctank_solenoid_disinfect_status" style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <a id="C_solenoid_disinfect" href="">桶內消毒電磁閥</a>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <div id="Ctank_pump_disinfect_status" style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <a id="C_pump_disinfect" href="">混合槽幫浦</a>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <div id="Ctank_diskvalve_status" style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <a id="C_diskvalve" href="">蝴蝶閥</a>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <div id="Warning_Light_status" style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <a id="Warning_Light" href="">警示燈</a>
                                                    </td>
                                                </tr>
                                            </tr>
                                        </table> 
                                    </td>
                                    <td style="vertical-align:text-top;">
                                        <table style="border:0px gray solid;" cellpadding="3">
                                            <tr>
                                                <td>
                                                    <a id="C_UltraSonic" href="">水位/生豆高度</a>
                                                </td>
                                                <td>
                                                    <span id="CUltraSonic_t_status"></span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <a id="C_MotorEncoder" href="">馬達編碼器</a>
                                                </td>
                                                <td>
                                                    <span id="CMotorEncoder_t_status"></span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <a id="butterflyvalve" href="">蝴蝶閥編碼器</a>
                                                </td>
                                                <td>
                                                    <span id="butterflyvalve_status"></span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <a id="C_Turbidity" href="">濁度計</a>
                                                </td>
                                                <td>
                                                    <span id="CtankTurbidity_t_status"></span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <a id="camera_clean_tid" href=""><strong>攝影機畫面</strong></a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td><strong><a id="C_set" href="">自動化設定</a></strong></td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>

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

                    <div class="modal-header">
                        <h4 id="CI_Modal_title" class="modal-title">清洗浮選入料儲豆槽 CI1 狀態</h4>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></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="CI_actuator_link" href="/clean_container/1">致動器狀態</a></strong></td>
                                    <td><strong><a id="CI_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="CI_vacuum_status" style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                    </div>
                                                    
                                                </td>
                                                <td>
                                                    <a id="input_Vacuum" href="">真空吸料機</a>
                                                </td>
                                            </tr>
                                        </table> 
                                    </td>
                                    <td style="vertical-align:text-top;">
                                        <table style="border:0px gray solid;" cellpadding="3">
                                            <tr>
                                                <td>
                                                    <a id="CI_UltraSonic" href="">咖啡生豆高度</a>
                                                </td>
                                                <td>
                                                    <span id="CI_UltraSonic_status"></span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <a id="CI_camera_clean_tid" href=""><strong>攝影機畫面</strong></a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td><strong><a id="CI_set" href="">自動化設定</a></strong></td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- 色選機 模态框 -->
        <div class="modal fade" id="S_Modal">
            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 id="S_Modal_title" class="modal-title">色選機 S1 狀態</h4>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></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="S_actuator_link" href="/colorselect_container_tank/1">致動器狀態</a></strong></td>
                                    <td><strong><a id="S_sensor_link" href="/colorselect_container_tank/1">感測器狀態</a></strong></td>
                                </tr>
                                <tr>
                                    <td style="vertical-align:text-top;">
                                        <table style="border:0px gray solid;" cellpadding="3">
                                            <tr>
                                                <td>
                                                    <div id="S_vacuum_status"style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                    </div>
                                                </td>
                                                <td>
                                                    <a id="S_Vacuum" href="">真空吸料機</a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div id="S_motor_status"style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                    </div>
                                                </td>
                                                <td>
                                                    <a id="S_motor" href="">馬達</a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div id="S_nozzle_status" style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                    </div>
                                                </td>
                                                <td>
                                                    <a id="S_nozzle" href="">噴嘴</a>
                                                </td>
                                            </tr>
                                        </table> 
                                    </td>
                                    <td style="vertical-align:text-top;">
                                        <table style="border:0px gray solid;" cellpadding="3">
                                            <tr>
                                                <td>
                                                    <a id="S_color" href="">顏色感測器</a>
                                                </td>
                                                <td>
                                                    <span id="S_color_status"></span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <a id="S_camera_colorselect_tid" href=""><strong>攝影機畫面</strong></a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td><strong><a id="S_set" href="">自動化設定</a></strong></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">色選機出料儲豆槽 SO1 狀態</h4>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></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_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>
                                                    <a id="SO_UltraSonic" href="">咖啡生豆高度</a>
                                                </td>
                                                <td>
                                                    <span id="SO_UltraSonic_status"></span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <a id="SO_camera_colorselect_tid" href=""><strong>攝影機畫面</strong></a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td><strong><a id="SO_set" href="">自動化設定</a></strong></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="btn-close" data-bs-dismiss="modal" aria-label="Close"></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>
                                                    <a id="P_Vacuum" href="">真空吸料機</a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div id="tank_motor_status" style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                    </div>
                                                </td>
                                                <td>
                                                    <a id="motor" href="">馬達</a>
                                                </td>
                                            </tr>
                                        </table> 
                                    </td>
                                    <td style="vertical-align:text-top;">
                                        <table style="border:0px gray solid;" cellpadding="3">
                                            <tr>
                                                <td>
                                                    <a id="motorEncoder" href="">馬達編碼器</a>
                                                </td>
                                                <td>
                                                    <span id="P_motorEncoder_status"></span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <a id="camera_peel_tid" href=""><strong>攝影機畫面</strong></a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td><strong><a id="P_set" href="">自動化設定</a></strong></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="btn-close" data-bs-dismiss="modal" aria-label="Close"></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>
                                                    <a id="output_Vacuum" href="">真空吸料機</a>
                                                </td>
                                            </tr>
                                        </table> 
                                    </td>
                                    <td style="vertical-align:text-top;">
                                        <table style="border:0px gray solid;" cellpadding="3">
                                            <tr>
                                                <td>
                                                    <a id="PO_UltraSonic" href="">咖啡生豆高度</a>
                                                </td>
                                                <td>
                                                    <span id="PO_UltraSonic_status"></span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <a id="PO_camera_peel_tid" href=""><strong>攝影機畫面</strong></a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td><strong><a id="PO_set" href="">自動化設定</a></strong></td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- 中水桶 模态框 -->
        <div class="modal fade" id="R_Modal">
            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
                <div class="modal-content">

                    <div class="modal-header">
                        <h4 id="R_Modal_title" class="modal-title">中水桶 R1 狀態</h4>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></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="R_actuator_link" href="/reclimedwater_tank/1">致動器狀態</a></strong></td>
                                    <td><strong><a id="R_sensor_link" href="/reclimedwater_tank/1">感測器狀態</a></strong></td>
                                </tr>
                                <tr>
                                    <td style="vertical-align:text-top;">
                                        <table style="border:0px gray solid;" cellpadding="3">
                                            <tr>
                                                <td>
                                                    <div id="R_solenoid_water_in_status"style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                    </div>
                                                </td>
                                                <td>
                                                    <a id="R_solenoid_water_in" href="">清水入水電磁閥</a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div id="R_solenoid_reclaimed_out_status" style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                    </div>
                                                </td>
                                                <td>
                                                    <a id="R_solenoid_reclaimed_out" href="">排水中水電磁閥</a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div id="R_solenoid_water_out_status" style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                    </div>
                                                </td>
                                                <td>
                                                    <a id="R_solenoid_water_out" href="">排水廢水電磁閥</a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div id="R_pump_reclaimed_out_status" style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                    </div>
                                                </td>
                                                <td>
                                                    <a id="R_pump_reclaimed_out" href="">入水清洗槽幫浦</a>
                                                </td>
                                            </tr>
                                            
                                            
                                        </table> 
                                    </td>
                                    <td style="vertical-align:text-top;">
                                        <table style="border:0px gray solid;" cellpadding="3">
                                            <tr>
                                                <td>
                                                    <a id="R_UltraSonic" href="">水位</a>
                                                </td>
                                                <td>
                                                    <span id="R_UltraSonic_status"></span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <a id="R_Turbidity" href="">濁度計</a>
                                                </td>
                                                <td>
                                                    <span id="R_Turbidity_status"></span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <a id="R_camera_reclaimedwater_tid" href=""><strong>攝影機畫面</strong></a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td><strong><a id="R_set" href="">自動化設定</a></strong></td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>





  <div class="album py-5 bg-light">
    <div class="container">

      <div class="row row-cols-1 row-cols-sm-1 row-cols-md-1 g-3">
        <div class="col">
          <div class="card shadow-sm">
            <div class="card-body">
              <div class="d-flex justify-content-between align-items-center">
                <table class="table_css" cellpadding="6" border="1" style="width: 100%" >
                <tr>
                    <td class="td-clickable" width="12%" style="border: lightsteelblue 1px solid;">
                    
                        <div id="CI1" tabindex="0" class="div_CleanTank_position" role="button">
                            <span id="CI1_status" class="demo_status_css">CI1 status</span>
                        </div>
                        
                    </td>
                    <td style="width: 10px; font-weight: 900; border: lightsteelblue 1px solid;">
                        入料
                    </td>
                    <td class="td-clickable" width="12%" style="border: lightsteelblue 1px solid;">
                        <div id="C1" tabindex="0" class="div_CleanTank_position" role="button">
                            <span id="C1_status" class="demo_status_css">C1 status</span>
                            
                        </div>
                    </td>
                    <td class="td-clickable" width="12%" style="border: lightsteelblue 1px solid;">
                        <div id="C2" tabindex="0" class="div_CleanTank_position" role="button">
                            <span id="C2_status" class="demo_status_css">C2 status</span>
                            
                        </div>
                    </td>
                    <td class="td-clickable" width="12%" style="border: lightsteelblue 1px solid;">
                        <div id="R1" tabindex="0" class="div_CleanTank_position" role="button">
                            <span id="R1_status" class="demo_status_css">R1 status</span>
                            
                        </div>
                    </td>
                    <td class="td-clickable" width="12%" style="border: lightsteelblue 1px solid;">
                        <div id="S1" tabindex="0" class="div_CleanTank_position" role="button">
                            <span id="S1_status" class="demo_status_css">S1 status</span>
                            
                        </div>
                    </td>
                    <td class="td-clickable" width="12%" style="border: lightsteelblue 1px solid;">
                        <div id="SO1" tabindex="0" class="div_CleanTank_position" role="button">
                            <span id="SO1_status" class="demo_status_css">SO1 status</span>
                            
                        </div>
                    </td>
                    <td class="td-clickable" width="12%" style="border: lightsteelblue 1px solid;">
                        <div id="P1" tabindex="0" class="div_CleanTank_position" role="button">
                            <span id="P1_status" class="demo_status_css">P1 status</span>
                            
                        </div>
                    </td>
                    <td style="width: 10px; font-weight: 900; border: lightsteelblue 1px solid;">
                        出料
                    </td>
                    <td class="td-clickable" width="12%" style="border: lightsteelblue 1px solid;">
                        <div id="PO1" tabindex="0" class="div_CleanTank_position" role="button">
                            <span id="PO1_status" class="demo_status_css">PO1 status</span>
                            
                        </div>
                    </td>
                </tr>
                <tr>
                   <td style="border: lightsteelblue 1px solid;">
                     <center><div id="CI1_bar" class="div_CleanTank_Status"></div></center>
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                     <center><div id="C1_bar" class="div_CleanTank_Status"></div></center>
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                     <center><div id="C2_bar" class="div_CleanTank_Status"></div></center>
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                     <center><div id="R1_bar" class="div_CleanTank_Status"></div></center>
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                     <center><div id="S1_bar" class="div_CleanTank_Status"></div></center>
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                     <center><div id="SO1_bar" class="div_CleanTank_Status"></div></center>
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                     <center><div id="P1_bar" class="div_CleanTank_Status"></div></center>
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                     <center><div id="PO1_bar" class="div_CleanTank_Status"></div></center>
                   </td>
                </tr>
              </table>
              </div>
            </div>
            <img src="../static/img/web_CleanColorPeel_container.png">
            <div class="card-body">
              <div class="d-flex justify-content-between align-items-center">
              <table class="table_css" cellpadding="6" border="1" style="width: 100%">
              <tr>
                    <td class="td-clickable" width="12%" style="border: lightsteelblue 1px solid;">
                        <div id="CI2" tabindex="0" class="div_CleanTank_position" role="button">
                            <span id="CI2_status" class="demo_status_css">CI2 status</span>
                            
                        </div>
                    </td>
                    <td style="width: 10px; font-weight: 900; border: lightsteelblue 1px solid;">
                        入料
                    </td>
                    <td class="td-clickable" width="12%" style="border: lightsteelblue 1px solid;">
                        <div id="C3" tabindex="0" class="div_CleanTank_position" role="button">
                            <span id="C3_status" class="demo_status_css">C3 status</span>
                            
                        </div>
                    </td>
                    <td class="td-clickable" width="12%" style="border: lightsteelblue 1px solid;">
                        <div id="C4" tabindex="0" class="div_CleanTank_position" role="button">
                            <span id="C4_status" class="demo_status_css">C4 status</span>
                            
                        </div>
                    </td>
                    <td style="border: lightsteelblue 1px solid;">
                    </td>
                    <td class="td-clickable" width="12%" style="border: lightsteelblue 1px solid;">
                        <div id="S2" tabindex="0" class="div_CleanTank_position" role="button">
                            <span id="S2_status" class="demo_status_css">S2 status</span>
                          
                        </div>
                    </td>
                    <td class="td-clickable" width="12%" style="border: lightsteelblue 1px solid;">
                        <div id="SO2" tabindex="0" class="div_CleanTank_position" role="button">
                            <span id="SO2_status" class="demo_status_css">SO2 status</span>
                            
                        </div>
                    </td>
                    <td class="td-clickable" width="12%" style="border: lightsteelblue 1px solid;">
                        <div id="P2" tabindex="0" class="div_CleanTank_position" role="button">
                            <span id="P2_status" class="demo_status_css">P2 status</span>
                           
                        </div>
                    </td>
                    <td style="width: 10px; font-weight: 900; border: lightsteelblue 1px solid;">
                        出料
                    </td>
                    <td class="td-clickable" width="12%" style="border: lightsteelblue 1px solid;">
                        <div id="PO2" tabindex="0" class="div_CleanTank_position" role="button">
                            <span id="PO2_status" class="demo_status_css">PO2 status</span>
                            
                        </div>
                    </td>
                </tr>
                 <tr>
                   <td style="border: lightsteelblue 1px solid;">
                     <center><div id="CI2_bar" class="div_CleanTank_Status"></div></center>
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                     <center><div id="C3_bar" class="div_CleanTank_Status"></div></center>
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                     <center><div id="C4_bar" class="div_CleanTank_Status"></div></center>
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                    
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                     <center><div id="S2_bar" class="div_CleanTank_Status"></div></center>
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                     <center><div id="SO2_bar" class="div_CleanTank_Status"></div></center>
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                     <center><div id="P2_bar" class="div_CleanTank_Status"></div></center>
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                     <center><div id="PO2_bar" class="div_CleanTank_Status"></div></center>
                   </td>
                </tr>
              </table>
              </div>
            </div>
          </div>
        </div>
            
      </div>
    </div>
  </div>
{% endblock %}
{% block script2 %}

        <script>
            function update_data_C(ctid) {
                $.get('/loading/C' + ctid, '', function (res) {
                    if (res.vacuum == 0) {
                        $("#Ctank_vacuum_status").css("background-color", "#C0C0C0")
                    } else if (res.vacuum == 1) {
                        $("#Ctank_vacuum_status").css("background-color", "forestgreen")
                    } else { $("#Ctank_vacuum_status").css("background-color", "crimson") }

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

                    if (res.motor == 0) {
                        $("#Ctank_motor_status").css("background-color", "#C0C0C0")
                    }else if (res.motor == 1) {
                        $("#Ctank_motor_status").css("background-color", "forestgreen")
                    } 
                    else { $("#Ctank_motor_status").css("background-color", "crimson") }
                    
                    if (res.solenoid_reclaimed_in == 0) {
                        $("#Ctank_solenoid_reclaimed_in_status").css("background-color", "#C0C0C0")
                    } else if (res.solenoid_reclaimed_in == 1) {
                        $("#Ctank_solenoid_reclaimed_in_status").css("background-color", "forestgreen")
                    } else { $("#Ctank_solenoid_reclaimed_in_status").css("background-color", "crimson") }

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

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

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

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

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

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

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

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


                    $("#CUltraSonic_t_status").text(res.UltraSonic);
                    $("#CMotorEncoder_t_status").text(res.Encoder);
                    $("#CtankTurbidity_t_status").text(res.tankTurbidity);
                    $("#butterflyvalve_status").text(res.butterflyvalve);
                }, 'json');

                $('#C_Modal_title').text("清洗浮選槽 C" + ctid + " 狀態");
                $('#C_actuator_link').attr("href", "/clean_container_tank/" + ctid);
                $('#C_sensor_link').attr("href", "/clean_container_tank/" + ctid);
                
                $("#C_Vacuum").attr("href", "/actuator_chart_C/vacuum/" + ctid);
                $("#C_threewayvalve_input").attr("href", "/actuator_chart_C/threewayvalve_input/" + ctid);
                $("#C_diskvalve").attr("href", "/actuator_chart_C/diskvalve/" + ctid);
                $("#C_motor").attr("href", "/actuator_chart_C/motor/" + ctid);
                $("#C_solenoid_disinfect").attr("href", "/actuator_chart_C/solenoid_disinfect/" + ctid);
                $("#C_solenoid_water_in").attr("href", "/actuator_chart_C/solenoid_tank_water_in/" + ctid);
                $("#C_solenoid_water_out").attr("href", "/actuator_chart_C/solenoid_tank_water_out/" + ctid);
                $("#C_solenoid_reclaimed_in").attr("href", "/actuator_chart_C/solenoid_reclaimed_in/" + ctid);
                $("#C_solenoid_reclaimed_out").attr("href", "/actuator_chart_C/solenoid_reclaimed_out/" + ctid);
                $("#C_pump_water_in").attr("href", "/actuator_chart_C/pump_water_in/" + ctid);
                $("#C_pump_disinfect").attr("href", "/actuator_chart_C/pump_disinfect/" + ctid);
                $("#Warning_Light").attr("href", "/actuator_chart_C/Warning_Light/" + ctid);
                
                $("#C_UltraSonic").attr("href", "/sensor_chart_C/UltraSonic/" + ctid);
                $("#C_MotorEncoder").attr("href", "/sensor_chart_C/motorEncoder/" + ctid);
                $("#C_Turbidity").attr("href", "/sensor_chart_C/turbidity/" + ctid);
                $("#butterflyvalve").attr("href", "/sensor_chart_C/butterflyvalve/" + ctid);
                $('#camera_clean_tid').attr("href", "/camera_C" + ctid);
                $('#C_set').attr("href", "/auto_C/" + ctid);
                $('#C_Modal').modal('show');
            }

            function update_data_SO(sotid){
                $.get('/loading/SO' + sotid, '', function (res) {
                    $("#SO_UltraSonic_status").text(res.tank_UltraSonic);
                }, 'json');

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

            }

            function update_data_S(stid) {
                $.get('/loading/S' + stid, '', function (res) {
                    if (res.tank_vacuum == 0) {
                        $("#S_vacuum_status").css("background-color", "#C0C0C0")
                    } else if (res.tank_vacuum == 1) {
                        $("#S_vacuum_status").css("background-color", "forestgreen")
                    } else { $("#S_vacuum_status").css("background-color", "crimson") }

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

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

                    $("#S_color_status").text(res.color);
                    
                }, 'json');

                $('#S_Modal_title').text("色選機 S" + stid + " 狀態");
                $('#S_actuator_link').attr("href", "/colorselect_container_tank/" + stid);
                $('#S_sensor_link').attr("href", "/colorselect_container_tank/" + stid);
                $("#S_Vacuum").attr("href", "/actuator_chart_S/vacuum/" + stid);
                $("#S_motor").attr("href", "/actuator_chart_S/motor/" + stid);
                $("#S_nozzle").attr("href", "/actuator_chart_S/nozzle/" + stid);
                $("#S_color").attr("href", "/sensor_chart_S/color/" + stid);
                $('#S_camera_colorselect_tid').attr("href", "/camera_S" + stid);
                $('#S_set').attr("href", "/auto_S/" + stid);
                $('#S_Modal').modal('show');
            }

            function update_data_P(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 == 1 ) {
                        $("#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") }
                    
                    $("#P_motorEncoder_status").text(res.motorEncoder);
                }, '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);
                $("#P_Vacuum").attr("href", "/actuator_chart_P/vacuum/" + ptid);
                $("#motor").attr("href", "/actuator_chart_P/motor/" + ptid);
                $("#motorEncoder").attr("href", "/sensor_chart_P/motorEncoder/" + ptid);
                $('#camera_peel_tid').attr("href", "/camera_P" + ptid);
                $('#P_set').attr("href", "/auto_P/" + ptid);
                $('#P_Modal').modal('show');
            }

            function update_data_CI(citid){
                $.get('loading/CI' + citid, '', function (res){
                    if (res.input_vacuum == 0) {
                        $("#CI_vacuum_status").css("background-color", "#C0C0C0")
                    } else if (res.input_vacuum == 1) {
                        $("#CI_vacuum_status").css("background-color", "forestgreen")
                    } else { $("#CI_vacuum_status").css("background-color", "crimson") }
                    
                    $("#CI_UltraSonic_status").text(res.input_UltraSonic);
                }, 'json');

                $('#CI_Modal_title').text("清洗浮選出料儲豆槽 CI" + citid + " 狀態");
                $('#CI_actuator_link').attr("href", "/clean_container/" + citid);
                $('#CI_sensor_link').attr("href", "/clean_container/" + citid);
                $("#input_Vacuum").attr("href", "/actuator_chart_CI/vacuum/" + citid);
                $('#CI_UltraSonic').attr("href", "/sensor_chart_CI/UltraSonic/" + citid);
                $('#CI_camera_clean_tid').attr("href", "/camera_CI" + citid);
                $('#CI_set').attr("href", "/auto_CI/" + citid);
                $('#CI_Modal').modal('show');

            }

            function update_data_PO(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") }
                    $("#PO_UltraSonic_status").text(res.output_UltraSonic);
                }, 'json');

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

            }

            function update_data_R(rtid){
                $.get('/loading/R' + rtid, '', function (res) {
                    if (res.tank_solenoid_water_in == 0) {
                        $("#R_solenoid_water_in_status").css("background-color", "#C0C0C0")
                    } else if (res.tank_solenoid_water_in == 1) {
                        $("#R_solenoid_water_in_status").css("background-color", "forestgreen")
                    } else { $("#R_solenoid_water_in_status").css("background-color", "crimson") }

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

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

                    if (res.tank_pump_reclaimed_out == 0) {
                        $("#R_pump_reclaimed_out_status").css("background-color", "#C0C0C0")
                    } else if (res.tank_pump_reclaimed_out == 1) {
                        $("#R_pump_reclaimed_out_status").css("background-color", "forestgreen")
                    } else { $("#R_pump_reclaimed_out_status").css("background-color", "crimson") }
                    $("#R_UltraSonic_status").text(res.tank_UltraSonic);
                    $("#R_Turbidity_status").text(res.tank_Turbidity);
                }, 'json');

                $('#R_Modal_title').text("中水桶 R" + rtid + " 狀態");
                $('#R_actuator_link').attr("href", "/reclaimedwater_tank/" + rtid);
                $('#R_sensor_link').attr("href", "/reclaimedwater_tank/" + rtid);
                
                $('#R_solenoid_water_in').attr("href", "/actuator_chart_R/solenoid_water_in/" + rtid);
                $('#R_solenoid_reclaimed_out').attr("href", "/actuator_chart_R/solenoid_reclaimed_out/" + rtid);
                $('#R_solenoid_water_out').attr("href", "/actuator_chart_R/solenoid_water_out/" + rtid);
                $('#R_pump_reclaimed_out').attr("href", "/actuator_chart_R/pump_reclaimed_out/" + rtid);
                
                $('#R_UltraSonic').attr("href", "/sensor_chart_R/UltraSonic/" + rtid);
                $('#R_camera_reclaimedwater_tid').attr("href", "/camera_R" + rtid);
                $('#R_set').attr("href", "/auto_R/" + rtid);
                $('#R_Modal').modal('show');

            }
            
            var button_CI1 = document.getElementById('CI1');
            button_CI1.addEventListener('click', function () { update_data_CI("1") });

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

            var button_C3 = document.getElementById('C3');
            button_C3.addEventListener('click', function () { update_data_C("3") });

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

            var button_C4 = document.getElementById('C4');
            button_C4.addEventListener('click', function () { update_data_C("4") });

            var button_R1 = document.getElementById('R1');
            button_R1.addEventListener('click', function () { update_data_R("1") });

            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>
{% endblock %}