rita
/
CoffeeProject


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050
							<!DOCTYPE html>
<html lang="en">

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

    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

    <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
    <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <!--
    <script src="../static/js/sign_in.js"></script>

    <link rel="stylesheet" href="../static/css/sign_in.css">
    -->
    <script>
        $(document).ready(function(){
            $("#coffee_title").text('發酵貨櫃');
        });
    </script>
    
    <style>
        .FermentContainer_position {
            position: absolute;
            top: 95px;
            left: 53px;
        }
        .F1_position {
            position: absolute;
            top: 155px;
            left: 240px;
            width: 160px;
            height: 210px;
            border-style: solid;
            border-color: aqua;
        }
        .F2_position {
            position: absolute;
            top: 155px;
            left: 415px;
            width: 160px;
            height: 210px;
            border-style: solid;
            border-color: aqua;
        }
        .F3_position {
            position: absolute;
            top: 155px;
            left: 595px;
            width: 160px;
            height: 210px;
            border-style: solid;
            border-color: aqua;
        }
        .F4_position {
            position: absolute;
            top: 155px;
            left: 780px;
            width: 160px;
            height: 210px;
            border-style: solid;
            border-color: aqua;
        }
        .F5_position {
            position: absolute;
            top: 155px;
            left: 960px;
            width: 160px;
            height: 210px;
            border-style: solid;
            border-color: aqua;
        }
        .F6_position {
            position: absolute;
            top: 155px;
            left: 1150px;
            width: 160px;
            height: 210px;
            border-style: solid;
            border-color: aqua;
        }
        .F7_position {
            position: absolute;
            top: 430px;
            left: 245px;
            width: 160px;
            height: 210px;
            border-style: solid;
            border-color: aqua;
        }
        .F8_position {
            position: absolute;
            top: 430px;
            left: 420px;
            width: 160px;
            height: 210px;
            border-style: solid;
            border-color: aqua;
        }
        .F9_position {
            position: absolute;
            top: 430px;
            left: 600px;
            width: 160px;
            height: 210px;
            border-style: solid;
            border-color: aqua;
        }
        .F10_position {
            position: absolute;
            top: 430px;
            left: 785px;
            width: 160px;
            height: 210px;
            border-style: solid;
            border-color: aqua;
        }
        .F11_position {
            position: absolute;
            top: 430px;
            left: 970px;
            width: 160px;
            height: 210px;
            border-style: solid;
            border-color: aqua;
        }
        .F12_position {
            position: absolute;
            top: 430px;
            left: 1155px;
            width: 160px;
            height: 210px;
            border-style: solid;
            border-color: aqua;
        }

        .FI1_position {
            position: absolute;
            top: 210px;
            left: 140px;
            width: 50px;
            height: 140px;
            border-style: solid;
            border-color: aqua;
        }

        .FI2_position {
            position: absolute;
            top: 430px;
            left: 140px;
            width: 50px;
            height: 140px;
            border-style: solid;
            border-color: aqua;
        }
        
        .FO1_position {
            position: absolute;
            top: 195px;
            left: 1350px;
            width: 50px;
            height: 140px;
            border-style: solid;
            border-color: aqua;
        }
        
        .FO2_position {
            position: absolute;
            top: 480px;
            left: 1350px;
            width: 50px;
            height: 140px;
            border-style: solid;
            border-color: aqua;
        }
        .footer{
            position: absolute;
            bottom: 0px;
            width: 100%;
            background-color: #eee;
            text-align: center;
        }
    </style>
    <script language="JavaScript">
        // 指定 10秒 刷新網頁一次
        var WebRestart
        // WebRestart = setTimeout(function () { location.reload() }, 10000);
    </script>

</head>

<body>
    <div id="wrapper">
        <div id="coffee_header">
            <!-- 匯入共同使用的 header.html 內容 -->
            {% include 'header.html' %}
        </div>
        <!--
            background-color:rgb(0, 238, 255);
        -->
        <!--
        <div style="text-align: left;">
            <a href="/index_new" style="float: left;">&nbsp;&nbsp;&nbsp;返回貨櫃首頁</a>
        </div>
        <div style="text-align: right;">
            <a href="/camera_ferment" style="float: right;">發酵槽攝影機&nbsp;&nbsp;&nbsp;</a>
        </div>

        <div style="text-align: center; margin-top: 30px; font-size: 24px;">
            Smart Coffee
        </div>
        -->
        <div>
            <!-- 底圖 發酵貨櫃 12 個發酵桶槽 -->
            <div id="FermentContainer_pic" class="FermentContainer_position" >
                <img src="../static/img/web_ferment_container.png" width="1450x" style="margin: auto;">
            </div>


            <!-- 發酵槽 F1 -->
            <div id="F1" tabindex="0" class="F1_position" role="button">
                F1 status
                <!-- F1 狀態點點-->
                <div id="F1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
            </div>

            <!-- 發酵槽 F2 -->
            <div id="F2" tabindex="0" class="F2_position" role="button">
                F2 status
                <div id="F2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
            </div>

            <!-- 發酵槽 F3 -->
            <div id="F3" tabindex="0" class="F3_position" role="button">
                F3 status
                <div id="F3_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
            </div>

            <!-- 發酵槽 F4 -->
            <div id="F4" tabindex="0" class="F4_position" role="button">
                F4 status
                <div id="F4_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
            </div>

            <!-- 發酵槽 F5 -->
            <div id="F5" tabindex="0" class="F5_position" role="button">
                F5 status
                <div id="F5_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
            </div>

            <!-- 發酵槽 F6 -->
            <div id="F6" tabindex="0" class="F6_position" role="button">
                F6 status
                <div id="F6_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
            </div>

            <!-- 發酵槽 F7 -->
            <div id="F7" tabindex="0" class="F7_position" role="button" style="vertical-align: bottom;">
                F7 status
                <div id="F7_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
            </div>

            <!-- 發酵槽 F8 -->
            <div id="F8" tabindex="0" class="F8_position" role="button">
                F8 status
                <div id="F8_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
            </div>

            <!-- 發酵槽 F9 -->
            <div id="F9" tabindex="0" class="F9_position" role="button">
                F9 status
                <div id="F9_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
            </div>

            <!-- 發酵槽 F10 -->
            <div id="F10" tabindex="0" class="F10_position" role="button">
                F10 status
                <div id="F10_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
            </div>

            <!-- 發酵槽 F11 -->
            <div id="F11" tabindex="0" class="F11_position" role="button">
                F11 status
                <div id="F11_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
            </div>

            <!-- 發酵槽 F12 -->
            <div id="F12" tabindex="0" class="F12_position" role="button">
                F12 status
                <div id="F12_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
            </div>

            <!-- 發酵槽入料儲豆槽 FI1 -->
            <div id="FI1" tabindex="0" class="FI1_position" role="button">
                FI1 status
                <div id="FI1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
            </div>

            <!-- 發酵槽入料儲豆槽 FI2 -->
            <div id="FI2" tabindex="0" class="FI2_position" role="button">
                FI2 status
                <div id="FI2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
            </div>

            <!-- 發酵槽出料儲豆槽 FO1 -->
            <div id="FO1" tabindex="0" class="FO1_position" role="button">
                FO1 status
                <div id="FO1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
            </div>

            <!-- 發酵槽出料儲豆槽 FO2 -->
            <div id="FO2" tabindex="0" class="FO2_position" role="button">
                FO2 status
                <div id="FO2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
            </div>

        </div>


        <!-- 發酵槽互動視窗(模态框) -->
        <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="close" data-dismiss="modal">&times;</button>
                    </div>

                    <!-- 互動視窗 內容 -->
                    <div class="modal-body">
                        <table style="border:0px gray solid; width: 100%;" cellpadding="3">
                            <!--<table style="border:0px gray solid;-->
                                <tr>
                                    <td><strong><a id="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="tank_solenoid_water_total_status"
                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                    </div>
                                                </td>
                                                <td>
                                                    <a id="SolenoidWaterTotal" href="">總進水電磁閥</a>
                                                    <!--<span id="tank_solenoid_water_total_t_status"></span>-->
                                                </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_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_temp_enable_status"
                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                    </div>
                                                </td>
                                                <td>
                                                    <a id="TempEnable" href="">溫控開關</a>
                                                    <!--<span id="tank_temp_enable_t_status"></span>-->
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div id="tank_temp_status"
                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                    </div>
                                                </td>
                                                <td>
                                                    <a id="temp" href="">溫度設定</a>
                                                    <!--<span id="tank_temp_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>
                                        </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="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>
                                                    保溫夾層水位
                                                </td>
                                                <td>
                                                    <!-- 滿 / 未滿 -->
                                                    <span id="WaterLevel_t_status"></span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <a id="camera_ferment_tid" href=""><strong>攝影機畫面</strong></a>
                                                </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="close" data-dismiss="modal">&times;</button>
                    </div>

                    <!-- 互動視窗 內容 -->
                    <div class="modal-body">
                        <table style="border:0px gray solid; width: 100%;" cellpadding="3">
                            <!--<table style="border:0px gray solid;-->
                                <tr>
                                    <td><strong><a id="actuator_link_input" href="/ferment_container/1">制動器狀態</a></strong></td>
                                    <td><strong><a id="sensor_link_input" 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="input_vacuum_status"
                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                    </div>
                                                </td>
                                                <td>
                                                    <a id="input_Vacuum" href="">真空吸料機</a>
                                                    <span id="input_vacuum_status"></span>
                                                </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_t_status"></span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <a id="FI_camera_ferment_tid" href=""><strong>攝影機畫面</strong></a>
                                                </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="close" data-dismiss="modal">&times;</button>
                    </div>

                    <!-- 互動視窗 內容 -->
                    <div class="modal-body">
                        <table style="border:0px gray solid; width: 100%;" cellpadding="3">
                            <!--<table style="border:0px gray solid;-->
                                <tr>
                                    <td><strong><a id="actuator_link_output" href="/ferment_container/1">制動器狀態</a></strong></td>
                                    <td><strong><a id="sensor_link_output" 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="output_vacuum_status"
                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
                                                    </div>
                                                </td>
                                                <td>
                                                    <a id="output_Vacuum" href="">真空吸料機</a>
                                                    <span id="output_vacuum_status"></span>
                                                </td>
                                            </tr>
                                        </table> 
                                    </td>
                                    <td style="vertical-align:text-top;">
                                        <table style="border:0px gray solid;" cellpadding="3">
                                            <tr>
                                                <td>
                                                    <a id="FO_UltraSonic" href="">咖啡生豆高度</a>
                                                </td>
                                                <td>
                                                    <span id="FO_UltraSonic_t_status"></span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <a id="FO_camera_ferment_tid" href=""><strong>攝影機畫面</strong></a>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>


        <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) {
                console.log('ferment_tank_id:' + ftid)
                // ftid = dry_tank_id
                $.get('/loading/F' + ftid, '', function (res) {

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

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

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

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

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

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

                    if (res.tank_solenoid_water_in == 0) {
                        $("#tank_solenoid_water_in_status").css("background-color", "#C0C0C0")
                    } else if (res.tank_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.tank_pump_sensor == 0) {
                        $("#tank_pump_sensor_status").css("background-color", "#C0C0C0")
                    } else if (res.tank_pump_sensor == 1) {
                        $("#tank_pump_sensor_status").css("background-color", "forestgreen")
                    } else { $("#tank_pump_sensor_status").css("background-color", "crimson") }

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

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

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

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

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

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

                    $("#tank_vacuum_t_status").text(res.tank_vacuum);
                    $("#tank_threewayvalve_input_t_status").text(res.tank_threewayvalve_input);
                    $("#tank_diskvalve_t_status").text(res.tank_diskvalve);
                    $("#tank_solenoid_water_total_t_status").text(res.tank_solenoid_water_total);
                    $("#tank_solenoid_disinfect_t_status").text(res.tank_solenoid_disinfect);
                    $("#outer_solenoid_water_t_status").text(res.outer_solenoid_water);
                    $("#tank_solenoid_water_in_t_status").text(res.tank_solenoid_water_in);
                    $("#tank_pump_sensor_t_status").text(res.tank_pump_sensor);
                    $("#tank_threewayvalve_bean_t_status").text(res.tank_threewayvalve_bean);
                    $("#outer_threewayvalve_float_t_status").text(res.outer_threewayvalve_float);
                    $("#tank_motor_t_status").text(res.tank_motor);
                    $("#tank_heater1_t_status").text(res.tank_heater1);
                    $("#tank_heater2_t_status").text(res.tank_heater2);
                    $("#tank_temp_enable_t_status").text(res.tank_temp_enable);
                    $("#tank_temp_t_status").text(res.tank_temp);

                    $("#UltraSonic_t_status").text(res.UltraSonic);
                    $("#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);
                    $("#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 + " 狀態")
                $('#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)
                

                $("#LiDAR").attr("href", "/chart_F/LiDAR/" + ftid)
                $("#UltraSonic").attr("href", "/chart_F/UltraSonic/" + ftid)
                $("#SHT11_Temp").attr("href", "/chart_F/SHT11_Temp/" + ftid)
                $("#SHT11_Humidity").attr("href", "/chart_F/SHT11_Humidity/" + ftid)
                $("#CO2").attr("href", "/chart_F/CO2/" + ftid)
                $("#PH").attr("href", "/chart_F/PH/" + ftid)
                $("#ORP").attr("href", "/chart_F/ORP/" + ftid)
                $("#DO").attr("href", "/chart_F/DO/" + ftid)
                $("#EC").attr("href", "/chart_F/EC/" + ftid)
                $("#PA").attr("href", "/chart_F/PA/" + ftid)
                $('#camera_ferment_tid').attr("href", "/camera_F" + ftid)

                $('#F_Modal').modal('show');
            }

            function update_data_FI(fitid){
                console.log('ferment_input_tank_id:' + fitid)
                // fitid = ferment_input_tank_id
                $.get('/loading/FI' + fitid, '', 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") }

                    $("#FI_UltraSonic_t_status").text(res.input_UltraSonic);
                    
                }, 'json');

                $('#Modal_title_input').text("發酵入料儲豆槽 FI" + fitid + " 狀態")
                
                $('#actuator_link_input').attr("href", "/ferment_container_input/" + fitid)
                $('#sensor_link_input').attr("href", "/ferment_container_input/" + fitid)

                $('#input_Vacuum').attr("href", "/ctrl_FI_Vacuum/" + fitid)
                $('#FI_UltraSonic').attr("href", "/chart_FI/UltraSonic/" + fitid)
                $('#FI_camera_ferment_tid').attr("href", "/camera_FI" + fitid)
                $('#FI_Modal').modal('show');

            };

            function update_data_FO(fotid){
                console.log('ferment_output_tank_id:' + fotid)
                // fitid = ferment_input_tank_id
                $.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_t_status").text(res.output_UltraSonic);
                    
                }, 'json');

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

                $('#actuator_link_output').attr("href", "/ferment_container_output/" + fotid)
                $('#sensor_link_output').attr("href", "/ferment_container_output/" + fotid)

                $('#output_Vacuum').attr("href", "/ctrl_FO_Vacuum/" + fotid)
                $('#FO_UltraSonic').attr("href", "/chart_FO/UltraSonic/" + fotid)
                $('#FO_camera_ferment_tid').attr("href", "/camera_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>

        <footer class="footer">
            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">
                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有
                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>
            </div>
        </footer>

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

</body>

</html>