coffeeproject20230512/coffeeproject/app/templates/ferment.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('/ferment_auto_data', function (resText) {
                var FI = [resText.FI1,resText.FI2];
                var F=[resText.F1,resText.F2,resText.F3,resText.F4,resText.F5,resText.F6,resText.F7,resText.F8,resText.F9,resText.F10,resText.F11,resText.F12];
                var FO = [resText.FO1,resText.FO2];                                                            
                for (let i=0; i<2; i++) {
                    if (FI[i] == 'FI_InputtingBean') {
                        $("#FI"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                        $("#FI"+parseInt(i+1)+"_status").text("FI" + parseInt(i+1) + " 入豆中")
                  } else if (FI[i] == 'FI_Waiting') {
                        $("#FI"+parseInt(i+1)+"_bar").css("background-color", "lightgray")
                        $("#FI"+parseInt(i+1)+"_status").text("FI" + parseInt(i+1) + " 空桶等待")
                  } else if (FI[i] == 'FI_OutputtingBean') {
                        $("#FI"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                        $("#FI"+parseInt(i+1)+"_status").text("FI" + parseInt(i+1) + " 可出豆")
                  } else if (FI[i] == 'FI_Stand_by') {
                        $("#FI"+parseInt(i+1)+"_bar").css("background-color", "HotPink")
                        $("#FI"+parseInt(i+1)+"_status").text("FI" + parseInt(i+1) + " 待命")
                  } else {
                    console.log('pass')
                  }
                }
                for (let i=0; i<12; i++) {
                    if (F[i] == 'F_InputtingBean') {
                      $("#F"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                      $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + "  入豆中")
                  } else if (F[i] == 'F_InputtingBean_Pause') {
                      $("#F"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                      $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + "  入豆暫停")
                  } else if (F[i] == 'F_InputtingBean_Finish') {
                      $("#F"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                      $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + "  入豆完成")
                  } else if (F[i] == 'F_InputtingWater') {
                      $("#F"+parseInt(i+1)+"_bar").css("background-color", "DeepSkyBlue")
                      $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + "  內外桶入水中")
                  } else if (F[i] == 'F_Waiting') {
                      $("#F"+parseInt(i+1)+"_bar").css("background-color", "lightgray")
                      $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + "  空桶等待")
                  } else if (F[i] == 'F_Cleaning') {
                      $("#F"+parseInt(i+1)+"_bar").css("background-color", "plum")
                      $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + "  清洗中")
                  } else if (F[i] == 'F_Fermenting') {
                      $("#F"+parseInt(i+1)+"_bar").css("background-color", "NavajoWhite")
                      $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + "  發酵中")
                  } else if (F[i] == 'F_OutputtingWater') {
                      $("#F"+parseInt(i+1)+"_bar").css("background-color", "DeepSkyBlue")
                      $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + "  內桶排水中")
                  } else if (F[i] == 'F_OutputtingBean') {
                      $("#F"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                      $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + "  可出豆")
                  } else if (F[i] == 'F_Warning') {
                      $("#F"+parseInt(i+1)+"_bar").css("background-color", "crimson")
                      $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + "  發生錯誤")
                      $("#F"+parseInt(i+1)+"_status").css("color", "crimson")
                  } else if (F[i] == 'F_Stand_by') {
                      $("#F"+parseInt(i+1)+"_bar").css("background-color", "HotPink")
                      $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + " 待命中")
                  } else {
                    console.log('pass')
                  }
                }                
                for (let i=0; i<2; i++) {
                if (FO[i] == 'FO_InputtingBean') {
                    $("#FO"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
                    $("#FO"+parseInt(i+1)+"_status").text("FO" + parseInt(i+1) + " 入豆中")

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

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

                  } else {
                    console.log('pass')
                  }                
                }
          },'json'); 
        }
        setInterval('myrefresh()',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: 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="F_Modal">
            <div class="modal-dialog modal-dialog-centered" style="width: 410px;">
                <div class="modal-content">

                    <!-- 互動視窗 標題 -->
                    <div class="modal-header">
                        <h4 id="Modal_title" class="modal-title">發酵槽 F1 狀態</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="/ferment_container/1">致動器狀態</a></strong></td>
                                    <td><strong><a id="sensor_link" href="/ferment_container/1">感測器狀態</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"
                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                    </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"
                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                    </div>
                                                </td>
                                                <td>
                                                    <a id="ThreeWayValveInput" href="">入料三通閥</a>
                                                    <!--<span id="tank_threewayvalve_input_t_status"></span>-->
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div id="solenoid_tank_pump_status"
                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                    </div>
                                                </td>
                                                <td>
                                                    <a id="SolenoidTankPump" href="">逆洗幫浦電磁閥</a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div id="outer_solenoid_water_status"
                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                    </div>
                                                </td>
                                                <td>
                                                    <a id="SolenoidOuterWater" href="">保溫夾層進水電磁閥</a>
                                                    <!--<span id="outer_solenoid_water_t_status"></span>-->
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div id="tank_solenoid_water_in_status"
                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                    </div>
                                                </td>
                                                <td>
                                                    <a id="SolenoidWaterIn" href="">清水入水電磁閥</a>
                                                    <!--<span id="tank_solenoid_water_in_t_status"></span>-->
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div id="tank_solenoid_water_out_status"
                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                    </div>
                                                </td>
                                                <td>
                                                    <a id="SolenoidWaterOut" href="">排水廢水電磁閥</a>
                                                    <!--<span id="tank_solenoid_water_in_t_status"></span>-->
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div id="tank_pump_sensor_status"
                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                    </div>
                                                </td>
                                                <td>
                                                    <a id="PumpSensor" href="">感測器抽水雙核隔膜泵</a>
                                                    <!--<span id="tank_pump_sensor_t_status"></span>-->
                                                </td>
                                            </tr>
                                            <!-- <tr>
                                                <td>
                                                    <div id="tank_threewayvalve_bean_status"
                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                    </div>
                                                </td>
                                                <td>
                                                    <a id="ThreeWayValveBean" href="">感測模組下豆三通閥</a>
                                                    <span id="tank_threewayvalve_bean_t_status"></span>
                                                </td>
                                            </tr> -->
                                            <tr>
                                                <td>
                                                    <div id="outer_threewayvalve_float_status"
                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                    </div>
                                                </td>
                                                <td>
                                                    <a id="ThreeWayValveFloat" href="">外桶浮選三通閥</a>
                                                    <!--<span id="outer_threewayvalve_float_t_status"></span>-->
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div id="tank_solenoid_disinfect_status"
                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                    </div>
                                                </td>
                                                <td>
                                                    <a id="SolenoidDisinfect" href="">桶內消毒電磁閥</a>
                                                    <!--<span id="tank_solenoid_disinfect_t_status"></span>-->
                                                </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>
                                                    <!--<span id="tank_motor_t_status"></span>-->
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div id="tank_heater1_status"
                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                    </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"
                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                    </div>                                                
                                                </td>
                                                <td>
                                                    <a id="Heater2" href="">加熱器 2</a>
                                                    <!--<span id="tank_heater2_t_status"></span>-->
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div id="tank_diskvalve_status"
                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                    </div>
                                                </td>
                                                <td>
                                                    <a id="DiskValve" href="">蝴蝶閥</a>
                                                <!--<span id="tank_diskvalve_t_status"></span>-->
                                                </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>
                                                <!--<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">
                                            <tr>
                                                <td>
                                                    <a id="UltraSonic" href="">水位/生豆高度</a>
                                                </td>
                                                <td>
                                                    <span id="UltraSonic_t_status"></span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <a id="motorEncoder" href="">馬達編碼器</a>
                                                </td>
                                                <td>
                                                    <span id="motorEncoder_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="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="CO2" href="">二氧化碳</a>
                                                </td>
                                                <td>
                                                    <span id="CO2_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="PH" href="">水質酸鹼度(PH)</a>
                                                </td>
                                                <td>
                                                    <span id="PH_t_status"></span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <a id="ORP" href="">水質氧化還原電位(ORP)</a>
                                                </td>
                                                <td>
                                                    <span id="ORP_t_status"></span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <a id="DO" href="">水質溶氧量(DO)</a>
                                                </td>
                                                <td>
                                                    <span id="DO_t_status"></span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <a id="EC" href="">水質導電度(EC)</a>
                                                </td>
                                                <td>
                                                    <span id="EC_t_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_ferment_tid" href="/video"><strong>攝影機畫面</strong></a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td><strong><a id="F_set" href="">自動化設定</a></strong></td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>





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

                    <!-- 互動視窗 標題 -->
                    <div class="modal-header">
                        <h4 id="Modal_title_input" class="modal-title">發酵入料儲豆槽 FI1 狀態</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="intput_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="FI_UltraSonic"href="">咖啡生豆高度</a>
                                                </td>
                                                <td>
                                                    <span id="FI_UltraSonic_status"></span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <a id="FI_camera_ferment_tid"href=""><strong>攝影機畫面</strong></a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td><strong><a id="FI_set" href="">自動化設定</a></strong></td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- 發酵槽出料儲豆槽互動視窗(模态框) -->
        <div class="modal fade" id="FO_Modal">
            <div class="modal-dialog modal-dialog-centered" style="width: 410px;">
                <div class="modal-content">

                    <!-- 互動視窗 標題 -->
                    <div class="modal-header">
                        <h4 id="Modal_title_output" class="modal-title">發酵出料儲豆槽 FO1 狀態</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" >致動器狀態</a></strong></td>
                                    <td><strong><a id="sensor_link_output" >感測器狀態</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="output_Vacuum">真空吸料機</a>
                                                </td>
                                            </tr>
                                        </table> 
                                    </td>
                                    <td style="vertical-align:text-top;">
                                        <table style="border:0px gray solid;" cellpadding="3">
                                            <tr>
                                                <td>
                                                    <a id="FO_UltraSonic">咖啡生豆高度</a>
                                                </td>
                                                <td>
                                                    <span id="FO_UltraSonic_status"></span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <a id="FO_camera_ferment_tid"href=""><strong>攝影機畫面</strong></a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td><strong><a id="FO_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="FI1" tabindex="0" class="div_DryTank_position" role="button">
                            <span id="FI1_status" class="demo_status_css">FI1 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="F1" tabindex="0" class="div_DryTank_position" role="button">
                            <span id="F1_status" class="demo_status_css">F1 status</span>
                            
                         </div>
                    </td>
                    <td class="td-clickable" width="12%" style="border: lightsteelblue 1px solid;">
                        <div id="F2" tabindex="0" class="div_DryTank_position" role="button">
                            <span id="F2_status" class="demo_status_css">F2 status</span>
                            
                        </div>
                    </td>
                    <td class="td-clickable" width="12%" style="border: lightsteelblue 1px solid;">
                        <div id="F3" tabindex="0" class="div_DryTank_position" role="button">
                            <span id="F3_status" class="demo_status_css">F3 status</span>
                            
                        </div>
                    </td>
                    <td class="td-clickable" width="12%" style="border: lightsteelblue 1px solid;">
                        <div id="F4" tabindex="0" class="div_DryTank_position" role="button">
                            <span id="F4_status" class="demo_status_css">F4 status</span>
                            
                        </div>
                    </td>
                    <td class="td-clickable" width="12%" style="border: lightsteelblue 1px solid;">
                        <div id="F5" tabindex="0" class="div_DryTank_position" role="button">
                            <span id="F5_status" class="demo_status_css">F5 status</span>
                            
                        </div>
                    </td>
                    <td class="td-clickable" width="12%" style="border: lightsteelblue 1px solid;">
                        <div id="F6" tabindex="0" class="div_DryTank_position" role="button">
                            <span id="F6_status" class="demo_status_css">F6 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="FO1" tabindex="0" class="div_DryTank_position" role="button">
                            <span id="FO1_status" class="demo_status_css">FO1 status</span>
                            
                        </div>
                    </td>
                </tr>
                 <tr>
                   <td style="border: lightsteelblue 1px solid;">
                     <center><div id="FI1_bar" class="div_DryTank_Status"></div></center>
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                     <center><div id="F1_bar" class="div_DryTank_Status"></div></center>
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                     <center><div id="F2_bar" class="div_DryTank_Status"></div></center>
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                     <center><div id="F3_bar" class="div_DryTank_Status"></div></center>
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                     <center><div id="F4_bar" class="div_DryTank_Status"></div></center>
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                     <center><div id="F5_bar" class="div_DryTank_Status"></div></center>
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                     <center><div id="F6_bar" class="div_DryTank_Status"></div></center>
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                     <center><div id="FO1_bar" class="div_DryTank_Status"></div></center>
                   </td>
                </tr>
              </table>
              </div>
            </div>
            <img src="../static/img/web_ferment_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="FI2" tabindex="0" class="div_DryTank_position" role="button">
                            <span id="FI2_status" class="demo_status_css">FI2 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="F7" tabindex="0" class="div_DryTank_position" role="button">
                            <span id="F7_status" class="demo_status_css">F7 status</span>
                            
                        </div>
                    </td>
                    <td class="td-clickable" width="12%" style="border: lightsteelblue 1px solid;">
                        <div id="F8" tabindex="0" class="div_DryTank_position" role="button">
                            <span id="F8_status" class="demo_status_css">F8 status</span>
                            
                        </div>
                    </td>
                    <td class="td-clickable" width="12%" style="border: lightsteelblue 1px solid;">
                        <div id="F9" tabindex="0" class="div_DryTank_position" role="button">
                            <span id="F9_status" class="demo_status_css">F9 status</span>
                            
                        </div>
                    </td>
                    <td class="td-clickable" width="12%" style="border: lightsteelblue 1px solid;">
                        <div id="F10" tabindex="0" class="div_DryTank_position" role="button">
                            <span id="F10_status" class="demo_status_css">F10 status</span>
                            
                        </div>
                    </td>
                    <td class="td-clickable" width="12%" style="border: lightsteelblue 1px solid;">
                        <div id="F11" tabindex="0" class="div_DryTank_position" role="button">
                            <span id="F11_status" class="demo_status_css">F11 status</span>
                            
                        </div>
                    </td>
                    <td class="td-clickable" width="12%" style="border: lightsteelblue 1px solid;">
                        <div id="F12" tabindex="0" class="div_DryTank_position" role="button">
                            <span id="F12_status" class="demo_status_css">F12 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="FO2" tabindex="0" class="div_DryTank_position" role="button">
                            <span id="FO2_status" class="demo_status_css">FO2 status</span>
                            
                        </div>
                    </td>
                </tr>
                 <tr>
                   <td style="border: lightsteelblue 1px solid;">
                     <center><div id="FI2_bar" class="div_DryTank_Status"></div></center>
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                     <center><div id="F7_bar" class="div_DryTank_Status"></div></center>
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                     <center><div id="F8_bar" class="div_DryTank_Status"></div></center>
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                     <center><div id="F9_bar" class="div_DryTank_Status"></div></center>
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                     <center><div id="F10_bar" class="div_DryTank_Status"></div></center>
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                     <center><div id="F11_bar" class="div_DryTank_Status"></div></center>
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                     <center><div id="F12_bar" class="div_DryTank_Status"></div></center>
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                   </td>
                   <td style="border: lightsteelblue 1px solid;">
                     <center><div id="FO2_bar" class="div_DryTank_Status"></div></center>
                   </td>
                </tr>
              </table>
              </div>
            </div>
          </div>
        </div>
            
      </div>
    </div>
  </div>
{% endblock %}
{% block script2 %}
        <script>
            /*
            var button_F1 = document.getElementById('F1');
            button_F1.addEventListener('click', showTankDetail);
            //var button_F2 = document.getElementById('F2');
            //button_F2.addEventListener('click', showTankDetail);

            var tank_num = 0;

            function showTankDetail() {
                // 打開模態框
                $('#Modal').modal('show');
            };
            */

            function update_data_F(ftid) {
                $.get('/loading/F' + ftid, '', 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_tank_pump == 0) {
                        $("#solenoid_tank_pump_status").css("background-color", "#C0C0C0")
                    } else if (res.solenoid_tank_pump == 1) {
                        $("#tank_solenoid_water_total_status").css("background-color", "forestgreen")
                    } else { $("#solenoid_tank_pump_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_in == 0) {
                        $("#tank_solenoid_water_in_status").css("background-color", "#C0C0C0")
                    } else if (res.solenoid_water_in == 1) {
                        $("#tank_solenoid_water_in_status").css("background-color", "forestgreen")
                    } else { $("#tank_solenoid_water_in_status").css("background-color", "crimson") }
                    
                    if (res.solenoid_water_out == 0) {
                        $("#tank_solenoid_water_out_status").css("background-color", "#C0C0C0")
                    } else if (res.solenoid_water_out == 1) {
                        $("#tank_solenoid_water_out_status").css("background-color", "forestgreen")
                    } else { $("#tank_solenoid_water_out_status").css("background-color", "crimson") }

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

                    if (res.threewayvalve_outer_float == 0) {
                        $("#outer_threewayvalve_float_status").css("background-color", "#C0C0C0")
                    } else if (res.threewayvalve_outer_float == 1) {
                        $("#outer_threewayvalve_float_status").css("background-color", "forestgreen")
                    } else { $("#outer_threewayvalve_float_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.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);
                    $("#motorEncoder_t_status").text(res.motorEncoder)
                    $("#SHT11_Temp_t_status").text(res.SHT11_Temp);
                    $("#SHT11_Humidity_t_status").text(res.SHT11_Humidity);
                    $("#CO2_t_status").text(res.CO2);
                    $("#PH_t_status").text(res.PH);
                    $("#ORP_t_status").text(res.ORP);
                    $("#DO_t_status").text(res.DO);
                    $("#EC_t_status").text(res.EC);
                    $("#PA_t_status").text(res.PA);
                    $("#butterflyvalve_status").text(res.butterflyvalve);
                    $("#WaterLevel_t_status").text(res.WaterLevel);

                    if (res.WaterLevel == 0) {
                        $("#WaterLevel_t_status").text("未滿");
                    } else if (res.WaterLevel == 1) {
                        $("#WaterLevel_t_status").text("滿");}

                }, 'json');

                $('#Modal_title').text("發酵槽 F" + ftid + " 狀態")
                if (status == 2) {
                    $('#actuator_link').attr("title", "該使用者無修改權限")
                    $('#sensor_link').attr("title", "該使用者無修改權限")
                    $('#Vacuum').attr("title", "該使用者無修改權限")
                    $('#ThreeWayValveInput').attr("title", "該使用者無修改權限")
                    $('#SolenoidWaterTotal').attr("title", "該使用者無修改權限")
                    $('#SolenoidOuterWater').attr("title", "該使用者無修改權限")
                    $('#SolenoidWaterIn').attr("title", "該使用者無修改權限")
                    $('#PumpSensor').attr("title", "該使用者無修改權限")
                    $('#ThreeWayValveBean').attr("title", "該使用者無修改權限")
                    $('#ThreeWayValveFloat').attr("title", "該使用者無修改權限")
                    $('#SolenoidDisinfect').attr("title", "該使用者無修改權限")
                    $('#Motor').attr("title", "該使用者無修改權限")
                    $('#Heater1').attr("title", "該使用者無修改權限")
                    $('#Heater2').attr("title", "該使用者無修改權限")
                    $('#TempEnable').attr("title", "該使用者無修改權限")
                    $('#temp').attr("title", "該使用者無修改權限")
                    $('#DiskValve').attr("title", "該使用者無修改權限")
                } else if ( (status == 0) || (status == 1) ) {
                    $('#actuator_link').attr("href", "/ferment_container_tank/" + ftid)
                    $('#sensor_link').attr("href", "/ferment_container_tank/" + ftid)
                    $('#Vacuum').attr("href", "/ctrl_F_Vacuum/" + ftid)
                    $('#ThreeWayValveInput').attr("href", "/ctrl_F_ThreeWayValveInput/" + ftid)
                    $('#SolenoidWaterTotal').attr("href", "/ctrl_F_SolenoidWaterTotal/" + ftid)
                    $('#SolenoidOuterWater').attr("href", "/ctrl_F_SolenoidOuterWater/" + ftid)
                    $('#SolenoidWaterIn').attr("href", "/ctrl_F_SolenoidWaterIn/" + ftid)
                    $('#PumpSensor').attr("href", "/ctrl_F_PumpSensor/" + ftid)
                    $('#ThreeWayValveBean').attr("href", "/ctrl_F_ThreeWayValveBean/" + ftid)
                    $('#ThreeWayValveFloat').attr("href", "/ctrl_F_ThreeWayValveFloat/" + ftid)
                    $('#SolenoidDisinfect').attr("href", "/ctrl_F_SolenoidDisinfect/" + ftid)
                    $('#Motor').attr("href", "/ctrl_F_Motor/" + ftid)
                    $('#Heater1').attr("href", "/ctrl_F_Heater1/" + ftid)
                    $('#Heater2').attr("href", "/ctrl_F_Heater2/" + ftid)
                    $('#TempEnable').attr("href", "/ctrl_F_TempEnable/" + ftid)
                    $('#temp').attr("href", "/ctrl_F_Temp/" + ftid)
                    $('#DiskValve').attr("href", "/ctrl_F_DiskValve/" + ftid)
                }
                $('#Vacuum').attr("href", "/actuator_chart_F/vacuum/" + ftid)
                $('#ThreeWayValveInput').attr("href", "/actuator_chart_F/threewayvalve_input/" + ftid)
                $('#SolenoidTankPump').attr("href", "/actuator_chart_F/solenoid_tank_pump/" + ftid)
                $('#SolenoidOuterWater').attr("href", "/actuator_chart_F/solenoid_outer_water/" + ftid)
                $('#SolenoidWaterIn').attr("href", "/actuator_chart_F/solenoid_tank_water_in/" + ftid)
                $('#SolenoidWaterOut').attr("href", "/actuator_chart_F/solenoid_tank_water_out/" + ftid)
                $('#PumpSensor').attr("href", "/actuator_chart_F/pump_sensor/" + ftid)
                $('#ThreeWayValveFloat').attr("href", "/actuator_chart_F/threewayvalve_outer_float/" + ftid)
                $('#SolenoidDisinfect').attr("href", "/actuator_chart_F/solenoid_tank_disinfect/" + ftid)
                $('#Motor').attr("href", "/actuator_chart_F/motor/" + ftid)
                $('#Heater1').attr("href", "/actuator_chart_F/heater1/" + ftid)
                $('#Heater2').attr("href", "/actuator_chart_F/heater2/" + ftid)
                $('#DiskValve').attr("href", "/actuator_chart_F/diskValve/" + ftid)
                $('#Warning_Light').attr("href", "/actuator_chart_F/Warning_Light/" + ftid)
                
                $("#UltraSonic").attr("href", "/sensor_chart_F/UltraSonic/" + ftid)
                $("#motorEncoder").attr("href", "/sensor_chart_F/motorEncoder/" + ftid)
                $("#SHT11_Temp").attr("href", "/sensor_chart_F/SHT11_Temp/" + ftid)
                $("#SHT11_Humidity").attr("href", "/sensor_chart_F/SHT11_Humidity/" + ftid)
                $("#CO2").attr("href", "/sensor_chart_F/CO2/" + ftid)
                $("#PH").attr("href", "/sensor_chart_F/PH/" + ftid)
                $("#ORP").attr("href", "/sensor_chart_F/ORP/" + ftid)
                $("#DO").attr("href", "/sensor_chart_F/DO/" + ftid)
                $("#EC").attr("href", "/sensor_chart_F/EC/" + ftid)
                $("#PA").attr("href", "/sensor_chart_F/PA/" + ftid)
                $("#WaterLevel").attr("href", "/sensor_chart_F/WaterLevel/" + ftid)
                $("#butterflyvalve").attr("href", "/sensor_chart_F/butterflyvalve/" + ftid)
                $('#camera_ferment_tid').attr("href", "/camera_F" + ftid)
                $("#F_set").attr("href", "/auto_F/" + ftid)
                $('#F_Modal').modal('show');
            }
            
            
            function update_data_FI(fitid){
                $('#Modal_title_input').text("發酵入料儲豆槽 FI" + fitid + " 狀態")
                
                $.get('/loading/FI' + fitid,'', function (res) {
                    if (res.input_vacuum == 0) {
                        $("#intput_vacuum_status").css("background-color", "#C0C0C0")
                    } else if (res.input_vacuum == 1) {
                        $("#intput_vacuum_status").css("background-color", "forestgreen")
                    } else { $("#intput_vacuum_status").css("background-color", "crimson") }

                    $("#FI_UltraSonic_status").text(res.input_UltraSonic);
                }, 'json');
                
                if (status == 2) {
                    $('#actuator_link_input').attr("title", "該使用者無修改權限")
                    $('#sensor_link_input').attr("title", "該使用者無修改權限")
                    $('#input_Vacuum').attr("title", "該使用者無修改權限")
                } 
                $("#input_Vacuum").attr("href", "/actuator_chart_FI/vacuum/" + fitid)
                $('#FI_camera_ferment_tid').attr("href", "/camera_FI" + fitid)
                $("#FI_UltraSonic").attr("href", "/sensor_chart_FI/UltraSonic/" + fitid)
                $("#FI_set").attr("href", "/auto_FI/" + fitid)
                $('#FI_Modal').modal('show');
            };
            
            function update_data_FO(fotid){
                $.get('/loading/FO' + fotid, '', 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") }

                    $("#FO_UltraSonic_status").text(res.output_UltraSonic);
                    
                }, 'json');

                $('#Modal_title_output').text("發酵出料儲豆槽 FO" + fotid + " 狀態")

                if (status == 2) {
                    $('#actuator_link_output').attr("title", "該使用者無修改權限")
                    $('#sensor_link_output').attr("title", "該使用者無修改權限")
                    $('#output_Vacuum').attr("title", "該使用者無修改權限")
                } 
                $("#output_Vacuum").attr("href", "/actuator_chart_FO/vacuum/" + fotid)
                $('#FO_camera_ferment_tid').attr("href", "/camera_FO" + fotid)
                $("#FO_UltraSonic").attr("href", "/sensor_chart_FO/UltraSonic/" + fotid)
                $("#FO_set").attr("href", "/auto_FO/" + fotid)
                $('#FO_Modal').modal('show');

            };

            var button_F1 = document.getElementById('F1');
            button_F1.addEventListener('click', function () {update_data_F("1")});
            
            var button_F2 = document.getElementById('F2');
            button_F2.addEventListener('click', function () { update_data_F("2")});

            var button_F3 = document.getElementById('F3');
            button_F3.addEventListener('click', function () { update_data_F("3") });

            var button_F4 = document.getElementById('F4');
            button_F4.addEventListener('click', function () { update_data_F("4") });

            var button_F5 = document.getElementById('F5');
            button_F5.addEventListener('click', function () { update_data_F("5") });

            var button_F6 = document.getElementById('F6');
            button_F6.addEventListener('click', function () { update_data_F("6") });

            var button_F7 = document.getElementById('F7');
            button_F7.addEventListener('click', function () { update_data_F("7") });

            var button_F8 = document.getElementById('F8');
            button_F8.addEventListener('click', function () { update_data_F("8") });

            var button_F9 = document.getElementById('F9');
            button_F9.addEventListener('click', function () { update_data_F("9") });

            var button_F10 = document.getElementById('F10');
            button_F10.addEventListener('click', function () { update_data_F("10") });

            var button_F11 = document.getElementById('F11');
            button_F11.addEventListener('click', function () { update_data_F("11") });

            var button_F12 = document.getElementById('F12');
            button_F12.addEventListener('click', function () { update_data_F("12") });

            var button_FI1 = document.getElementById('FI1');
            button_FI1.addEventListener('click', function () { update_data_FI("1") });

            var button_FI2 = document.getElementById('FI2');
            button_FI2.addEventListener('click', function () { update_data_FI("2") });

            var button_FO1 = document.getElementById('FO1');
            button_FO1.addEventListener('click', function () { update_data_FO("1") });

            var button_FO2 = document.getElementById('FO2');
            button_FO2.addEventListener('click', function () { update_data_FO("2") });

        </script>
{% endblock %}