coffeeproject20230512/coffeeproject/app/templates/dry.html

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

{% block script %}
    <script language="JavaScript">
        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);
            loading_D_status();
        });

        function loading_D_status(){
            $.get('/dry_auto_data', '', function (res) {
                dry_tank_status = [res.D1, res.D2, res.D3, res.D4, res.D5, res.D6, 
                                   res.D7, res.D8, res.D9, res.D10, res.D11, res.D12 ]
                for (let i=0; i<dry_tank_status.length; i++) {
                    if (dry_tank_status[i] == 'D_InputtingBean') {
                        $("#D"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                        $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  入豆中")
                    } else if (dry_tank_status[i] == 'D_InputtingBean_Pause') {
                        $("#D"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                        $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  入豆暫停")
                    } else if (dry_tank_status[i] == 'D_InputtingBean_Finish') {
                        $("#D"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                        $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  入豆完成")
                    } else if (dry_tank_status[i] == 'D_Waiting') {
                        $("#D"+parseInt(i+1)+"_bar").css("background-color", "lightgray")
                        $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  空桶等待")
                    }  else if (dry_tank_status[i] == 'D_InputtingWater') {
                        $("#D"+parseInt(i+1)+"_bar").css("background-color", "DeepSkyBlue")
                        $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + " 外桶入水中")
                    }  else if (dry_tank_status[i] == 'D_Cleaning') {
                        $("#D"+parseInt(i+1)+"_bar").css("background-color", "plum")
                        $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  清洗中")
                    } else if (dry_tank_status[i] == 'D_Drying') {
                        $("#D"+parseInt(i+1)+"_bar").css("background-color", "Peru")
                        $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  乾燥中")
                    } else if (dry_tank_status[i] == 'D_OutputtingBean') {
                        $("#D"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                        $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  可出豆")
                    } else if (dry_tank_status[i] == 'D_Warning') {
                        $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  發生錯誤")
                        $("#D"+parseInt(i+1)+"_status").css("color", "crimson")
                        $("#D"+parseInt(i+1)+"_bar").css("background-color", "crimson")
                    } else {
                        console.log('pass')
                    }
                }
                dry_input_status = [res.DI1, res.DI2]
                for (let i=0; i<dry_input_status.length; i++) {
                    if (dry_input_status[i] == 'DI_InputtingBean') {
                        $("#DI"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                        $("#DI"+parseInt(i+1)+"_status").text("DI" + parseInt(i+1) + " 入豆中")
                    } else if (dry_input_status[i] == 'DI_Waiting') {
                        $("#DI"+parseInt(i+1)+"_bar").css("background-color", "lightgray")
                        $("#DI"+parseInt(i+1)+"_status").text("DI" + parseInt(i+1) + " 空桶等待")
                    } else if (dry_input_status[i] == 'DI_OutputtingBean') {
                        $("#DI"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                        $("#DI"+parseInt(i+1)+"_status").text("DI" + parseInt(i+1) + " 可出豆")
                    } else if (dry_input_status[i] == 'DI_Stand_by') {
                        $("#DI"+parseInt(i+1)+"_bar").css("background-color", "HotPink")
                        $("#DI"+parseInt(i+1)+"_status").text("DI" + parseInt(i+1) + " 待命")
                    } else {
                        console.log('DI pass')
                    }
                }
                dry_output_status = [res.DO1, res.DO2]
                for (let i=0; i<dry_output_status.length; i++) {
                    if (dry_output_status[i] == 'DO_InputtingBean') {
                        $("#DO"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                        $("#DO"+parseInt(i+1)+"_status").text("DO" + parseInt(i+1) + " 入豆中")
                    } else if (dry_output_status[i] == 'DO_Waiting') {
                        $("#DO"+parseInt(i+1)+"_bar").css("background-color", "lightgray")
                        $("#DO"+parseInt(i+1)+"_status").text("DO" + parseInt(i+1) + " 空桶等待")
                    } else if (dry_output_status[i] == 'DO_OutputtingBean') {
                        $("#DO"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                        $("#DO"+parseInt(i+1)+"_status").text("DO" + parseInt(i+1) + " 可出豆")
                    } else if (dry_output_status[i] == 'DO_Stand_by') {
                        $("#DO"+parseInt(i+1)+"_bar").css("background-color", "HotPink")
                        $("#DO"+parseInt(i+1)+"_status").text("DO" + parseInt(i+1) + " 待命")
                    } else {
                        console.log('DO pass')
                    }
                }
                
                $("#tank_temp1_t_status").text(res.tank_temp1);

            }, 'json');
        }
        // 指定 10秒 刷新網頁一次
        setInterval('loading_D_status()',1000);

    </script>
{% endblock %}

{% block style %} 
    <style>
        /* 各桶槽狀態大小的共同 CSS */
        .div_DryTank_position {
            text-align: center;
            font-weight: bold;
            border: 0px aquamarine solid;
        }
        .td-clickable:hover {
            /* background-color: rgb(238, 236, 236); */
            background-color: lavender;
            border: 2px Gray solid;
        }
        /* 桶槽狀態顯示的顏色條 */
        .div_DryTank_Status {
            height: 20px; 
            border-style: solid; 
            border-color: whitesmoke; 
            background-color: black;
        }
        .footer{
            position: absolute;
            bottom: 0px;
            width: 100%;
            background-color: #eee;
            text-align: center;
        }
        /* 致動器狀態的圈圈 */
        .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="D_Modal">
            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
                <div class="modal-content">

                    <!-- 互動視窗 標題 -->
                    <div class="modal-header">
                        <h4 id="Modal_title" class="modal-title">乾燥槽 D1 狀態</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="actuator_link" href="">致動器狀態</a></strong></td>
                                <td><strong><a id="sensor_link" href="">感測器狀態</a></strong></td>
                            </tr>
                            <tr>
                                <td style="vertical-align:text-top;">
                                    <table style="border:0px gray solid;" cellpadding="3">
                                        <!--font-size:12px; -->
                                        <tr>
                                            <td>
                                                <div id="tank_vacuum_status" class="actuator_status">
                                                </div>
                                            </td>
                                            <td>
                                                <a id="Vacuum" href="">真空吸料機</a>
                                                <!--<span id="tank_vacuum_t_status"></span>-->
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div id="tank_threewayvalve_input_status" class="actuator_status">
                                                </div>
                                            </td>
                                            <td>
                                                <a id="ThreeWayValveInput" href="">入料三通閥</a>
                                                <!--<span id="tank_threewayvalve_t_status"></span>-->
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div id="tank_solenoid_disinfect_status" class="actuator_status">
                                                </div>
                                            </td>
                                            <td>
                                                <a id="SolenoidDisinfect" href="">桶內消毒電磁閥</a>
                                                <!--<span id="tank_solenoid_disinfect_t_status"></span>-->
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div id="outer_solenoid_water_status" class="actuator_status">
                                                </div>
                                            </td>
                                            <td>
                                                <a id="SolenoidOuterWater" href="">保溫夾層進水電磁閥</a>
                                                <!--<span id="tank_solenoid_disinfect_t_status"></span>-->
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div id="tank_motor_status" class="actuator_status">
                                                </div>
                                            </td>
                                            <td>
                                                <a id="Motor" href="">馬達</a>
                                                <!--<span id="tank_motor_t_status"></span>-->
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div id="tank_vacuum_pump_status" class="actuator_status">
                                                </div>
                                            </td>
                                            <td>
                                                <a id="Blower" href="">乾燥真空機</a>
                                                <!--<span id="tank_blower_t_status"></span>-->
                                            </td>
                                        </tr>

                                        <tr>
                                            <td>
                                                <div id="tank_heater1_status" class="actuator_status">
                                                </div>
                                            </td>
                                            <td>
                                                <a id="Heater1" href="">加熱器 1</a>
                                                <!--<span id="tank_heater1_t_status"></span>-->
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div id="tank_heater2_status" class="actuator_status">
                                                </div>
                                            </td>
                                            <td>
                                                <a id="Heater2" href="">加熱器 2</a>
                                                <!--<span id="tank_heater2_t_status"></span>-->
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div id="tank_solenoid_water_status" class="actuator_status">
                                                </div>
                                            </td>
                                            <td>
                                                <a id="SolenoidWater" href="">排水廢水電磁閥</a>
                                                <!--<span id="tank_solenoid_water_t_status"></span>-->
                                            </td>
                                        </tr>

                                        <tr>
                                            <td>
                                                <div id="tank_diskvalve_status" class="actuator_status">
                                                </div>
                                            </td>
                                            <td>
                                                <a id="DiskValve" href="">蝴蝶閥</a>
                                                <!--<span id="tank_diskvalve_t_status"></span>-->
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div id="Warning_Light_status" class="actuator_status">
                                                </div>
                                            </td>
                                            <td>
                                                <a id="Warning_Light" href="">警示燈</a>
                                                <!--<span id="tank_diskvalve_t_status"></span>-->
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                                <td style="vertical-align:text-top;">
                                    <table style="border:0px gray solid;" cellpadding="3">
                                        <!--font-size:12px; -->
                                        <tr>
                                            <td>
                                                <a id="UltraSonic" href="">咖啡生豆高度</a>
                                            </td>
                                            <td>
                                                <span id="UltraSonic_t_status"></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <a id="SHT11_Temp" href="">溫度</a>
                                            </td>
                                            <td>
                                                <span id="SHT11_Temp_t_status"></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <a id="SHT11_Humidity" href="">濕度</a>
                                            </td>
                                            <td>
                                                <span id="SHT11_Humidity_t_status"></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <a id="soil_Temp" href="">咖啡生豆溫度</a>
                                            </td>
                                            <td>
                                                <span id="soil_Temp_t_status"></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <a id="soil_Humidity" href="">咖啡生豆濕度</a>
                                            </td>
                                            <td>
                                                <span id="soil_Humidity_t_status"></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <a id="soil_EC" href="">咖啡生豆 EC</a>
                                            </td>
                                            <td>
                                                <span id="soil_EC_t_status"></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <a id="PA" href="">大氣壓力</a>
                                            </td>
                                            <td>
                                                <span id="PA_t_status"></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <a id="motorEncoder" href="">馬達編碼器</a>
                                            </td>
                                            <td>
                                                <span id="motorEncoder_status"></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <a id="butterflyvalve" href="">蝴蝶閥編碼器</a>
                                            </td>
                                            <td>
                                                <span id="butterflyvalve_status"></span>
                                            </td>
                                        </tr>
                                        <tr>
                                                <td>
                                                    <a id="WaterLevel" href="">保溫夾層水位</a>
                                                </td>
                                                <td>
                                                    <span id="WaterLevel_t_status"></span>
                                                </td>
                                            </tr>
                                        <tr>
                                            <td>
                                                <a id="camera_dry_tid" href=""><strong>攝影機畫面</strong></a>
                                            </td>
                                        </tr>
                                        <tr>
                                                <td><strong><a id="D_set" href="">自動化設定</a></strong></td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>


        <!-- 乾燥槽入料儲豆槽互動視窗(模态框) -->
        <div class="modal fade" id="DI_Modal">
            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
                <div class="modal-content">

                    <!-- 互動視窗 標題 -->
                    <div class="modal-header">
                        <h4 id="Modal_title_input" class="modal-title">乾燥入料儲豆槽 DI1 狀態</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="actuator_link_input" href="">致動器狀態</a></strong></td>
                                <td><strong><a id="sensor_link_input" href="">感測器狀態</a></strong></td>
                            </tr>
                            <tr>
                                <td style="vertical-align:text-top;">
                                    <table style="border:0px gray solid;" cellpadding="3">
                                        <!--font-size:12px; -->
                                        <tr>
                                            <td>
                                                <div id="input_vacuum_status" class="actuator_status">
                                                </div>
                                            </td>
                                            <td>
                                                <a id="Vacuum_input" href="">真空吸料機</a>
                                                <!--<span id="tank_vacuum_t_status"></span>-->
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                                <td style="vertical-align:text-top;">
                                    <table style="border:0px gray solid;" cellpadding="3">
                                        <!--font-size:12px; -->
                                        <tr>
                                            <td>
                                                <a id="DI_UltraSonic" href="">咖啡生豆高度</a>
                                            </td>
                                            <td>
                                                <span id="DI_UltraSonic_t_status"></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <a id="DI_camera_dry_tid" href=""><strong>攝影機畫面</strong></a>
                                            </td>
                                        </tr>
                                        <tr>
                                                <td><strong><a id="DI_set" href="">自動化設定</a></strong></td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>





            <!-- 乾燥槽出料儲豆槽互動視窗(模态框) -->
            <div class="modal fade" id="DO_Modal">
                <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
                    <div class="modal-content">
        
                        <!-- 互動視窗 標題 -->
                        <div class="modal-header">
                            <h4 id="Modal_title_output" class="modal-title">乾燥入料儲豆槽 DI1 狀態</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="actuator_link_output" href="">致動器狀態</a></strong></td>
                                    <td><strong><a id="sensor_link_output" href="">感測器狀態</a></strong></td>
                                </tr>
                                <tr>
                                    <td style="vertical-align:text-top;">
                                        <table style="border:0px gray solid;" cellpadding="3">
                                            <!--font-size:12px; -->
                                            <tr>
                                                <td>
                                                    <div id="output_vacuum_status"
                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                    </div>
                                                </td>
                                                <td>
                                                    <a id="Vacuum_output" href="">真空吸料機</a>
                                                    <!--<span id="tank_vacuum_t_status"></span>-->
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                    <td style="vertical-align:text-top;">
                                        <table style="border:0px gray solid;" cellpadding="3">
                                            <!--font-size:12px; -->
                                            <tr>
                                                <td>
                                                    <a id="DO_UltraSonic" href="/chart_DO/UltraSonic/1">咖啡生豆高度</a>
                                                </td>
                                                <td>
                                                    <span id="DO_UltraSonic_status"></span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <a id="DO_camera_dry_tid" href=""><strong>攝影機畫面</strong></a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td><strong><a id="DO_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="DI1" tabindex="0" class="div_DryTank_position" role="button">
                            <span id="DI1_status" class="demo_status_css">DI1 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="D1" tabindex="0" class="div_DryTank_position" role="button">
                            <span id="D1_status" class="demo_status_css">D1 status</span>
                            
                        </div>
                    </td>
                    <td class="td-clickable" width="12%" style="border: lightsteelblue 1px solid;">
                        <div id="D2" tabindex="0" class="div_DryTank_position" role="button">
                            <span id="D2_status" class="demo_status_css">D2 status</span>
                            
                        </div>
                    </td>
                    <td class="td-clickable" width="12%" style="border: lightsteelblue 1px solid;">
                        <div id="D3" tabindex="0" class="div_DryTank_position" role="button">
                            <span id="D3_status" class="demo_status_css">D3 status</span>
                           
                        </div>
                    </td>
                    <td class="td-clickable" width="12%" style="border: lightsteelblue 1px solid;">
                        <div id="D4" tabindex="0" class="div_DryTank_position" role="button">
                            <span id="D4_status" class="demo_status_css">D4 status</span>
                           
                        </div>
                    </td>
                    <td class="td-clickable" width="12%" style="border: lightsteelblue 1px solid;">
                        <div id="D5" tabindex="0" class="div_DryTank_position" role="button">
                            <span id="D5_status" class="demo_status_css">D5 status</span>
                            
                        </div>
                    </td>
                    <td class="td-clickable" width="12%" style="border: lightsteelblue 1px solid;">
                        <div id="D6" tabindex="0" class="div_DryTank_position" role="button">
                            <span id="D6_status" class="demo_status_css">D6 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="DO1" tabindex="0" class="div_DryTank_position" role="button">
                            <span id="DO1_status" class="demo_status_css">DO1 status</span>
                            
                        </div>
                    </td>
                </tr>
                <tr>
                   <td style="border: lightsteelblue 1px solid;">
                     <center><div id="DI1_bar" class="div_DryTank_Status"></div></center>
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                    <center><div id="D1_bar" class="div_DryTank_Status"></div></center>
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                     <center><div id="D2_bar" class="div_DryTank_Status"></div></center>
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                     <center><div id="D3_bar" class="div_DryTank_Status"></div></center>
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                     <center><div id="D4_bar" class="div_DryTank_Status"></div></center>
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                     <center><div id="D5_bar" class="div_DryTank_Status"></div></center>
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                     <center><div id="D6_bar" class="div_DryTank_Status"></div></center>
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                     <center><div id="DO1_bar" class="div_DryTank_Status"></div></center>
                   </td>
                </tr>
              </table>
              </div>
            </div>
            <img src="../static/img/web_dry_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="DI2" tabindex="0" class="div_DryTank_position" role="button">
                            <span id="DI2_status" class="demo_status_css">DI2 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="D7" tabindex="0" class="div_DryTank_position" role="button">
                            <span id="D7_status" class="demo_status_css">D7 status</span>
                            
                        </div>
                    </td>
                    <td class="td-clickable" width="12%" style="border: lightsteelblue 1px solid;">
                        <div id="D8" tabindex="0" class="div_DryTank_position" role="button">
                            <span id="D8_status" class="demo_status_css">D8 status</span>
                            
                        </div>
                    </td>
                    <td class="td-clickable" width="12%" style="border: lightsteelblue 1px solid;">
                        <div id="D9" tabindex="0" class="div_DryTank_position" role="button">
                            <span id="D9_status" class="demo_status_css">D9 status</span>
                            
                        </div>
                    </td>
                    <td class="td-clickable" width="12%" style="border: lightsteelblue 1px solid;">
                        <div id="D10" tabindex="0" class="div_DryTank_position" role="button">
                            <span id="D10_status" class="demo_status_css">D10 status</span>
                            
                        </div>
                    </td>
                    <td class="td-clickable" width="12%" style="border: lightsteelblue 1px solid;">
                        <div id="D11" tabindex="0" class="div_DryTank_position" role="button">
                            <span id="D11_status" class="demo_status_css">D11 status</span>
                            
                        </div>
                    </td>
                    <td class="td-clickable" width="12%" style="border: lightsteelblue 1px solid;">
                        <div id="D12" tabindex="0" class="div_DryTank_position" role="button">
                            <span id="D12_status" class="demo_status_css">D12 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="DO2" tabindex="0" class="div_DryTank_position" role="button">
                            <span id="DO2_status" class="demo_status_css">DO2 status</span>
                            
                        </div>
                    </td>
                </tr>
                <tr>
                   <td style="border: lightsteelblue 1px solid;">
                     <center><div id="DI2_bar" class="div_DryTank_Status"></div></center>
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                    <center><div id="D7_bar" class="div_DryTank_Status"></div></center>
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                     <center><div id="D8_bar" class="div_DryTank_Status"></div></center>
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                     <center><div id="D9_bar" class="div_DryTank_Status"></div></center>
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                     <center><div id="D10_bar" class="div_DryTank_Status"></div></center>
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                     <center><div id="D11_bar" class="div_DryTank_Status"></div></center>
                   </td>
                   <td style="border: lightsteelblue 1px solid;"> 
                     <center><div id="D12_bar" class="div_DryTank_Status"></div></center>
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                     <center><div id="DO2_bar" class="div_DryTank_Status"></div></center>
                   </td>
                </tr>
              </table>
              </div>
            </div>
          </div>
        </div>
            
      </div>
    </div>
  </div>
{% endblock %}
{% block script2 %}
        <script>
            function update_data_D(dtid) {
                $.get('/loading/D' + dtid, '', function (res) {
                    if (res.vacuum == 0) {
                        $("#tank_vacuum_status").css("background-color", "#C0C0C0")
                    } else if (res.vacuum == 1) {
                        $("#tank_vacuum_status").css("background-color", "forestgreen")
                    } else { $("#tank_vacuum_status").css("background-color", "crimson") }

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

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

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

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

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

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

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

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

                    if (res.heater2 == 0) {
                        $("#tank_heater2_status").css("background-color", "#C0C0C0")
                    } else if (res.heater2 == 1) {
                        $("#tank_heater2_status").css("background-color", "forestgreen")
                    } else { $("#tank_heater2_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") }


                    $("#UltraSonic_t_status").text(res.UltraSonic);
                    $("#SHT11_Temp_t_status").text(res.SHT11_Temp);
                    $("#SHT11_Humidity_t_status").text(res.SHT11_Humidity);
                    $("#soil_Temp_t_status").text(res.soil_Temp);
                    $("#soil_Humidity_t_status").text(res.soil_Humidity);
                    $("#soil_EC_t_status").text(res.soil_EC);
                    $("#PA_t_status").text(res.PA);
                    $("#motorEncoder_status").text(res.motorEncoder);
                    $("#butterflyvalve_status").text(res.butterflyvalve);
                    
                    if (res.WaterLevel == 0) {
                        $("#WaterLevel_t_status").text("未滿");
                    } else if (res.WaterLevel == 1) {
                        $("#WaterLevel_t_status").text("滿");}
                    else {$("#WaterLevel_t_status").text("null");}
                        
                }, 'json');

                $('#Modal_title').text("乾燥槽 D" + dtid + " 狀態")

                if (status == 2) {
                    $('#actuator_link').attr("title", "該使用者無修改權限")
                    $('#sensor_link').attr("title", "該使用者無修改權限")
                    $('#Vacuum').attr("title", "該使用者無修改權限")
                    $('#ThreeWayValveInput').attr("title", "該使用者無修改權限")
                    $('#ThreeWayValveBean').attr("title", "該使用者無修改權限")
                    $('#SolenoidDisinfect').attr("title", "該使用者無修改權限")
                    $('#Motor').attr("title", "該使用者無修改權限")
                    $('#Blower').attr("title", "該使用者無修改權限")
                    $('#Heater1').attr("title", "該使用者無修改權限")
                    $('#Heater2').attr("title", "該使用者無修改權限")
                    $('#TempEnable').attr("title", "該使用者無修改權限")
                    $('#Temp').attr("title", "該使用者無修改權限")
                    $('#SolenoidWater').attr("title", "該使用者無修改權限")
                    $('#DiskValve').attr("title", "該使用者無修改權限")
                } else if ( (status == 0) || (status == 1) ) {
                    $('#actuator_link').attr("href", "/dry_container_tank/" + dtid)
                    $('#sensor_link').attr("href", "/dry_container_tank/" + dtid)
                    $('#Vacuum').attr("href", "/ctrl_D_Vacuum/" + dtid)
                    $('#ThreeWayValveInput').attr("href", "/ctrl_D_ThreeWayValveInput/" + dtid)
                    $('#ThreeWayValveBean').attr("href", "/ctrl_D_ThreeWayValveBean/" + dtid)
                    $('#SolenoidDisinfect').attr("href", "/ctrl_D_SolenoidDisinfect/" + dtid)
                    $('#Motor').attr("href", "/ctrl_D_Motor/" + dtid)
                    $('#Blower').attr("href", "/ctrl_D_Blower/" + dtid)
                    $('#Heater1').attr("href", "/ctrl_D_Heater1/" + dtid)
                    $('#Heater2').attr("href", "/ctrl_D_Heater2/" + dtid)
                    $('#TempEnable').attr("href", "/ctrl_D_TempEnable/" + dtid)
                    $('#Temp').attr("href", "/ctrl_D_Temp/" + dtid)
                    $('#SolenoidWater').attr("href", "/ctrl_D_SolenoidWater/" + dtid)
                    $('#DiskValve').attr("href", "/ctrl_D_DiskValve/" + dtid)
                }
                
                $('#Vacuum').attr("href", "/actuator_chart_D/vacuum/" + dtid)
                $('#ThreeWayValveInput').attr("href", "/actuator_chart_D/threewayvalve_input/" + dtid)
                $('#SolenoidDisinfect').attr("href", "/actuator_chart_D/solenoid_disinfect/" + dtid)
                $('#Motor').attr("href", "/actuator_chart_D/motor/" + dtid)
                $('#Blower').attr("href", "/actuator_chart_D/vacuum_pump/" + dtid)
                $('#Heater1').attr("href", "/actuator_chart_D/heater1/" + dtid)
                $('#Heater2').attr("href", "/actuator_chart_D/heater2/" + dtid)
                $('#SolenoidWater').attr("href", "/actuator_chart_D/solenoid_water_out/" + dtid)
                $('#DiskValve').attr("href", "/actuator_chart_D/diskvalve/" + dtid)
                $('#SolenoidOuterWater').attr("href", "/actuator_chart_D/solenoid_outer_water/" + dtid)
                $('#Warning_Light').attr("href", "/actuator_chart_D/Warning_Light/" + dtid)  
                 
                $('#SHT11_Temp').attr("href", "/sensor_chart_D/SHT11_Temp/" + dtid)
                $('#SHT11_Humidity').attr("href", "/sensor_chart_D/SHT11_Humidity/" + dtid)
                $('#UltraSonic').attr("href", "/sensor_chart_D/UltraSonic/" + dtid)
                $('#PA').attr("href", "/sensor_chart_D/PA/" + dtid)
                $('#soil_Temp').attr("href", "/sensor_chart_D/soil_Temp/" + dtid)
                $('#soil_Humidity').attr("href", "/sensor_chart_D/soil_Humidity/" + dtid)
                $('#soil_EC').attr("href", "/sensor_chart_D/soil_EC/" + dtid)
                $('#butterflyvalve').attr("href", "/sensor_chart_D/butterflyvalve/" + dtid)
                $('#WaterLevel').attr("href", "/sensor_chart_D/WaterLevel/" + dtid)
                $('#motorEncoder').attr("href", "/sensor_chart_D/motorEncoder/" + dtid)
                $('#camera_dry_tid').attr("href", "/camera_D" + dtid)
                $('#D_set').attr("href", "/auto_D/" + dtid)
                $('#D_Modal').modal('show')
               
                
            }



            function update_data_DI(ditid){
                $.get('/loading/DI' + ditid, '', function (res) {
                    if (res.input_vacuum == 0) {
                        $("#input_vacuum_status").css("background-color", "#C0C0C0")
                    } else if (res.input_vacuum == 1) {
                        $("#input_vacuum_status").css("background-color", "forestgreen")
                    } else { $("#input_vacuum_status").css("background-color", "crimson") }

                    $("#DI_UltraSonic_t_status").text(res.input_UltraSonic);

                }, 'json');
                
                $('#Modal_title_input').text("乾燥入料儲豆槽 DI" + ditid + " 狀態")

                if (status == 2) {
                    $('#actuator_link').attr("title", "該使用者無修改權限")
                    $('#sensor_link').attr("title", "該使用者無修改權限")
                    $('#Vacuum_input').attr("title", "該使用者無修改權限")
                } else if ( (status == 0) || (status == 1) ) {
                    $('#actuator_link_input').attr("href", "/dry_container_input/" + ditid)
                    $('#sensor_link_input').attr("href", "/dry_container_input/" + ditid)
                    $('#Vacuum_input').attr("href", "/ctrl_DI_Vacuum/" + ditid)
                }
                $('#Vacuum_input').attr("href", "/actuator_chart_DI/vacuum/" + ditid)
                $('#DI_UltraSonic').attr("href", "/sensor_chart_DI/UltraSonic/" + ditid)
                $('#DI_camera_dry_tid').attr("href", "/camera_DI" + ditid)
                $('#DI_set').attr("href", "/auto_DI/" + ditid)
                $('#DI_Modal').modal('show');
            };

            function update_data_DO(dotid){
                $.get('/loading/DO' + dotid, function (res) {
                    if (res.output_vacuum == 0) {
                        $("#output_vacuum_status").css("background-color", "#C0C0C0")
                    } else if (res.output_vacuum == 1) {
                        $("#output_vacuum_status").css("background-color", "forestgreen")
                    } else { $("#output_vacuum_status").css("background-color", "crimson") }

                    $("#DO_UltraSonic_status").text(res.output_UltraSonic);

                }, 'json');
                
                $('#Modal_title_output').text("乾燥出料儲豆槽 DO" + dotid + " 狀態")

                if (status == 2) {
                    $('#actuator_link').attr("title", "該使用者無修改權限")
                    $('#sensor_link').attr("title", "該使用者無修改權限")
                    $('#Vacuum_output').attr("title", "該使用者無修改權限")
                } else if ( (status == 0) || (status == 1) ) {
                    $('#actuator_link_output').attr("href", "/dry_container_output/" + dotid)
                    $('#sensor_link_output').attr("href", "/dry_container_output/" + dotid)
                    $('#Vacuum_output').attr("href", "/ctrl_DO_Vacuum/" + dotid)
                }
                $('#Vacuum_output').attr("href", "/actuator_chart_DO/vacuum/" + dotid)
                $('#DO_UltraSonic').attr("href", "/sensor_chart_DO/UltraSonic/" + dotid)
                $('#DO_camera_dry_tid').attr("href", "/camera_DO" + dotid)
                $('#DO_set').attr("href", "/auto_DO/" + dotid)
                $('#DO_Modal').modal('show');
            };


            var button_D1 = document.getElementById('D1');
            button_D1.addEventListener('click', function () { update_data_D("1") });
            
            var button_D2 = document.getElementById('D2');
            button_D2.addEventListener('click', function () { update_data_D("2") });

            var button_D3 = document.getElementById('D3');
            button_D3.addEventListener('click', function () { update_data_D("3") });

            var button_D4 = document.getElementById('D4');
            button_D4.addEventListener('click', function () { update_data_D("4") });

            var button_D5 = document.getElementById('D5');
            button_D5.addEventListener('click', function () { update_data_D("5") });

            var button_D6 = document.getElementById('D6');
            button_D6.addEventListener('click', function () { update_data_D("6") });

            var button_D7 = document.getElementById('D7');
            button_D7.addEventListener('click', function () { update_data_D("7") });

            var button_D8 = document.getElementById('D8');
            button_D8.addEventListener('click', function () { update_data_D("8") });

            var button_D9 = document.getElementById('D9');
            button_D9.addEventListener('click', function () { update_data_D("9") });

            var button_D10 = document.getElementById('D10');
            button_D10.addEventListener('click', function () { update_data_D("10") });

            var button_D11 = document.getElementById('D11');
            button_D11.addEventListener('click', function () { update_data_D("11") });

            var button_D12 = document.getElementById('D12');
            button_D12.addEventListener('click', function () { update_data_D("12") });

            var button_DI1 = document.getElementById('DI1');
            button_DI1.addEventListener('click', function () { update_data_DI("1") });

            var button_DI2 = document.getElementById('DI2');
            button_DI2.addEventListener('click', function () { update_data_DI("2") });

            var button_DO1 = document.getElementById('DO1');
            button_DO1.addEventListener('click', function () { update_data_DO("1") });

            var button_DO2 = document.getElementById('DO2');
            button_DO2.addEventListener('click', function () { update_data_DO("2") });

        </script>
{% endblock %}