coffeeproject20230512/coffeeproject/app/templates/board.html

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

{% block script %}
    <script>
        var status = '{{status}}';
        var username = '{{username}}';
        $(document).ready(function(){
            $('#navbarDropdown_user_pc').text(username);
            $('#navbarDropdown_user_phone').text(username);
            });
    </script>
{% endblock %}
 
{% block style %}       
    <style>
        /* .boardpic_position {
            position: absolute;
            top: 80px;
            left: 25px;
        } */

        .r5_position {
            position: absolute;
            top: 160px;
            left: 310px;
            width: 40px;
            height: 150px;
            border-style: solid;
            border-color: aqua;
        }
        .div_relay_css {
            position: absolute; 
            border-style: solid; 
            border-color: aqua; 
            text-align: center;
            font-size: 12px;
        }
        /* header */
        /* 文字輸入框 */
        .input-text {
            height: 25px;
            width: 40px;
            text-align: center;
            margin-left: 2px;
            margin-right: 5px;
        }
        /* 致動器狀態表格置中 */
        .label_ActuatorStatus {
            margin: auto;
        }
        /* 致動器 ON 樣式 */
        .input-button-on {
            color: #008CBA;
            border: 2px rgb(182, 181, 181) solid;
            background-color: whitesmoke;
            padding: 1px 3px;
            width: 45px;
        }
        /* 致動器 OFF 樣式 */
        .input-button-off {
            color: #707070;
            border: 2px rgb(192, 192, 192) solid;
            background-color: whitesmoke;
            padding: 1px 3px;
            width: 45px;
        }
        /* 輸入按鈕 */
        .input-button {
            font-size: 14px;
            color: #008CBA;
            border: 2px rgb(182, 181, 181) solid;
            background-color: whitesmoke;
            padding: 1px 3px;
        }
        /* 大表格樣式 */
        .table-all {
            font-size:18px; 
            border:2px #cccccc solid; 
            margin-left: 10px; 
            margin-right: 10px; 
            width: 98%;
        }
        /* footer */
        .footer{
            height: 40px;
            box-sizing: border-box;
            /* 設定footer絕對位置在底部 */
            position: absolute;
            bottom: 0px;
            width: 100%;
            background-color: #eee;
            text-align: center;
        }

        html, body {
            height: 100%;
            /* margin: 0; */
            position: relative;
        }

        #wrapper {
            /* 設定高度最小為100%, 如果內容區塊很多, 可以長大 */
            /* min-height: 100%; */
            /* 位置設為relative, 作為footer區塊位置的參考 */
            position: relative;
        }
        
        .form-signin {
         max-width: 330px;
         padding: 15px;
      }

      .form-signin .form-floating:focus-within {
         z-index: 2;
      }

      .form-signin input[type="email"] {
         margin-bottom: -1px;
         border-bottom-right-radius: 0;
         border-bottom-left-radius: 0;
      }

      .form-signin input[type="password"] {
         margin-bottom: 10px;
         border-top-left-radius: 0;
         border-top-right-radius: 0;
      }
    </style>
{% endblock %}

{% block main %}
    <div id="wrapper" style="height: 500px;">
            <!-- 選擇燒錄桶槽 -->
           <div class="form-signin w-100 m-auto">
             <img class="mb-4" src="../static/img/ALMIGHTY_RAY.jpg" alt="" >
             <img class="mb-4" src="../static/img/SKYAI.jpg" alt="" >
             <h1 class="h3 mb-4 fw-normal"style="text-align:center;">選擇燒錄桶槽</h1>
             <div class="form-floating">
             <center><select id="prog_container" onchange="renew_tank()" class="form-control" ></center>
                        <option value="CI">清洗入料槽</option>
                        <option value="C">清洗槽</option>
                        <option value="R">中水桶</option>
                        <option value="S">色選機</option>
                        <option value="SO">色選機出料槽</option>
                        <option value="P">脫皮機</option>
                        <option value="PO">脫皮機出料槽</option>
                        <option value="FI">發酵入料槽</option>
                        <option value="F">發酵槽</option>
                        <option value="FO">發酵出料槽</option>
                        <option value="DI">乾燥入料槽</option>
                        <option value="D">乾燥槽</option>
                        <option value="DO">乾燥出料槽</option>
             </select>
             </div>
             <div class="form-floating">
             <center><select id="prog_tank" onchange="" class="form-control" ></center>
                        <option value="CI1">1</option>
                        <option value="CI2">2</option>
             </select>
             </div>
             <div class="checkbox mb-3">
             <label>
             </label>
             </div>
             <center><input type="button" class="w-40 btn btn-lg btn-secondary" value="確認" onclick="GoToBoardLoaderPage()"></center>
           </div>
    </div>
{% endblock %}
{% block script2 %}    
                    <script>
                        $("#coffee_title_pc").text('板子燒錄介面');
                        $("#coffee_title_phone").text('板子燒錄介面');
                        // 貨櫃-桶槽對應
                        const containerTOtank = {
                            'CI':[{'CI1':'1'}, {'CI2':'2'}],   
                            'C':[{'C1':'1'}, {'C2':'2'}, {'C3':'3'}, {'C4':'4'}], 
                            'R':[{'R1':'1'}],     
                            'S':[{'S1':'1'},{'S2':'2'}],  
                            'SO':[{'SO1':'1'},{'SO2':'2'}], 
                            'P':[{'P1':'1'},{'P2':'2'}],  
                            'PO':[{'PO1':'1'},{'PO2':'2'}],         
                            'FI':[{'FI1':'1'},{'FI2':'2'}],                
                            'F':[{'F1':'1'}, {'F2':'2'}, {'F3':'3'}, {'F4':'4'}, {'F5':'5'}, {'F6':'6'}, 
                                 {'F7':'7'}, {'F8':'8'}, {'F9':'9'}, {'F10':'10'}, {'F11':'11'}, {'F12':'12'}],
                            'FO':[{'FO1':'1'}, {'FO2':'2'}],
                            'DI':[{'DI1':'1'}, {'DI2':'2'}],
                            'D':[{'D1':'1'}, {'D2':'2'}, {'D3':'3'}, {'D4':'4'}, {'D5':'5'}, {'D6':'6'}, 
                                 {'D7':'7'}, {'D8':'8'}, {'D9':'9'}, {'D10':'10'}, {'D11':'11'}, {'D12':'12'}],
                            'DO':[{'DO1':'1'}, {'DO2':'2'}]
                        }
                    </script>
                    <script>
                        function renew_tank() {
                            var prog_container_value = $("#prog_container").val();
                            // console.log("prog_container_value: " + prog_container_value);

                            Value = '';
                            try {
                                for (let i = 0; i < containerTOtank[prog_container_value].length; i++) {
                                    Value += '<option value="' + Object.keys(containerTOtank[prog_container_value][i]) + '">' + Object.values(containerTOtank[prog_container_value][i]) + '</option>';
                                }
                            } catch (error) {
                                if (error.name === 'TypeError') {
                                    Value = '';
                                }
                            }
                            
                            var sectorSelect = document.getElementById("prog_tank");
                            if (sectorSelect != null) {
                                sectorSelect.innerHTML = Value;
                            }
                        }
                        function GoToBoardLoaderPage() {
                            var Tank_ID = $("#prog_container").val();
                            var target_tank = $("#prog_tank").val();
                            var confirm_GoToBoardLoaderPage = confirm("目前燒錄桶槽為 " + target_tank + "\n點擊 [確定] 按鈕後, 前往指定燒錄桶槽介面 ");
                            if (confirm_GoToBoardLoaderPage) {
                                location.href = "/board_loader_" + target_tank;
                            }
                        }
                    </script>
{% endblock %}