allen
/
coffeeproject20230512


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464
							<!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://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <!--可用來建立使用者小圖示-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    
    <script language="JavaScript">
        var set_dryImport_number = 2;           // prompt("請輸入乾燥 入料儲豆槽 數量：")
        var set_dryTank_number = 12;            // prompt("請輸入乾燥 桶槽 數量：")
        var set_dryExport_number = 2;          // prompt("請輸入乾燥 出料儲豆槽 數量：")
        console.log("get number: " + set_dryImport_number + "-" + set_dryTank_number + "-" + set_dryExport_number);

        // 儲存乾燥貨櫃所有桶槽、入料儲豆槽、出料儲豆槽
        var dry_import_list = [];
        var dry_tank_list = [];
        var dry_export_list = [];
        // 桶槽對應值
        var dry_tank_data_list = [];
        var dry_import_data_list = [];
        var dry_export_data_list = [];
       
        var html = '';

        var dry_export_data = [];

        var data = '{{dtr[0]}}';
        console.log("data: " + data);
        
        $(function(){
            // 網頁 title
            $("#coffee_title_pc").text("桶槽關係建立");
            $("#coffee_title_phone").text("桶槽關係建立");

            console.log("dry_import_list: " + dry_import_list);
            console.log("dry_tank_list: " + dry_tank_list);
            console.log("dry_export_list: " + dry_export_list);

            console.log("dry_tank_data_list: " + dry_tank_data_list);
            console.log("dry_import_data_list: " + dry_import_data_list);
            console.log("dry_export_data_list: " + dry_export_data_list);

            // 從 入料桶槽出料 取得 桶槽值 D1, 轉換成下拉式選單選項
            html = '';
            for (let dil = 0; dil < dry_import_list.length; dil++) {
                html += '<option value="' + dry_import_list[dil] + '">' + dry_import_list[dil] + '</option>';
            }
            for (let dtl = 0; dtl < dry_tank_list.length; dtl++) {
                html += '<option value="' + dry_tank_list[dtl] + '">' + dry_tank_list[dtl] + '</option>';
            }
            for (let del = 0; del < dry_export_list.length; del++) {
                html += '<option value="' + dry_export_list[del] + '">' + dry_export_list[del] + '</option>';
            }

            // 賦值到下拉式選單中 - 入料 + 出料
            for (let dil = 0; dil < dry_import_list.length; dil++) {
                var divbox = document.getElementById(dry_import_list[dil] + '_import');
                divbox.insertAdjacentHTML('beforeend', html);
                var divbox = document.getElementById(dry_import_list[dil] + '_export');
                divbox.insertAdjacentHTML('beforeend', html);
            }
            for (let dtl = 0; dtl < dry_tank_list.length; dtl++) {
                var divbox = document.getElementById(dry_tank_list[dtl] + '_import');
                divbox.insertAdjacentHTML('beforeend', html);
                var divbox = document.getElementById(dry_tank_list[dtl] + '_export');
                divbox.insertAdjacentHTML('beforeend', html);
            }
            for (let del = 0; del < dry_export_list.length; del++) {
                var divbox = document.getElementById(dry_export_list[del] + '_import');
                divbox.insertAdjacentHTML('beforeend', html);
                var divbox = document.getElementById(dry_export_list[del] + '_export');
                divbox.insertAdjacentHTML('beforeend', html);
            }
            var divbox = document.getElementById('new_import');
            divbox.insertAdjacentHTML('beforeend', html);
            var divbox = document.getElementById('new_export');
            divbox.insertAdjacentHTML('beforeend', html);

            // DB 取值後顯示
                // // 儲存乾燥貨櫃所有桶槽、入料儲豆槽、出料儲豆槽
                // var dry_import_list = [];
                // var dry_tank_list = [];
                // var dry_export_list = [];
                // // 桶槽對應值
                // var dry_tank_data_list = [];
                // var dry_import_data_list = [];
                // var dry_export_data_list = [];
            for (let i = 0; i < dry_tank_data_list.length; i++) {
                if (dry_tank_data_list.includes(dry_import_data_list[i])) {
                    $("#" + dry_tank_data_list[i] + "_import").val(dry_import_data_list[i]);
                } else {
                    $("#" + dry_tank_data_list[i] + "_import").val('-');
                }
                
                if (dry_tank_data_list.includes(dry_export_data_list[i])) {
                    $("#" + dry_tank_data_list[i] + "_export").val(dry_export_data_list[i]);
                } else {
                    $("#" + dry_tank_data_list[i] + "_export").val('-');
                }
                // $("#" + dry_tank_data_list[i] + "_export").val(dry_export_data_list[i]);
                // if (dry_tank_data_list.includes(dry_import_data_list[i])) {
                //     console.log("tttest " + dry_import_data_list[i]);
                //     $("#" + dry_tank_data_list[i] + "_import").val(dry_import_data_list[i]);
                //     $("#" + dry_tank_data_list[i] + "_export").val(dry_export_data_list[i]);
                // } else {
                //     console.log("else tttest " + dry_import_data_list[i]);
                //     $("#" + dry_tank_data_list[i] + "_import").val('-');
                //     $("#" + dry_tank_data_list[i] + "_export").val('-');
                // }
            }

            
            

            // var html = '<table border="5" style="border: 3px lightgray solid; text-align: center; margin-left: auto; margin-right: auto; width: 500px;">' + 
            //             '<tr>' + 
            //             '<th>桶槽名稱</th>' + 
            //             '<th>桶槽類別</th>' + 
            //             '<th>桶槽入料</th>' + 
            //             '<th>桶槽出料</th>' + 
            //             '</tr>';
            // // 增加入料儲豆槽 設定表格
            // for (let di = 1; di <= set_dryImport_number; di++) {
            //     html +='<tr>' + 
            //             '<td>DI' + di + '</td>' + 
            //             '<td></td>' +  
            //             '<td></td>' +  
            //             '<td></td>' + 
            //             '</tr>';
            // }
            // // 增加桶槽 設定表格
            // for (let dt = 1; dt <= set_dryTank_number; dt++) {
            //     html +='<tr>' + 
            //             '<td>D' + dt + '</td>' + 
            //             '<td></td>' +  
            //             '<td></td>' +  
            //             '<td></td>' + 
            //             '</tr>';
            // }
            // // 增加出料儲豆槽 設定表格
            // for (let de = 1; de <= set_dryExport_number; de++) {
            //     html +='<tr>' + 
            //             '<td>DO' + de + '</td>' + 
            //             '<td></td>' +  
            //             '<td></td>' +  
            //             '<td></td>' + 
            //             '</tr>';
            // }

            // html += '<tr>' + 
            //         '<td colspan="5">[修改確認]</td>' + 
            //         '</table>';

            // var divbox = document.getElementById('set_table');
            // divbox.insertAdjacentHTML('beforeend', html);

        });
       
    </script>
    <style>
        .input-cond-delete {
            background: #E43030;
            border: 1px solid #CFCFCF;
            box-sizing: border-box;
            border-radius: 5px;
            margin-left: 5px;
            width: 86px;
            height: 33px;
            font-size: 16px;
            text-align: center;
            line-height: 16px;
            color: #FFFFFF;
        }
        .input-cond-add {
            background: #008CBA;
            border: 1px solid #CFCFCF;
            box-sizing: border-box;
            border-radius: 5px;
            margin-left: 5px;
            width: 80px;
            height: 33px;
            font-size: 16px;
            text-align: center;
            line-height: 16px;
            color: #FFFFFF;
        }

        .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;
        }
    </style>
</head>

<body style="font-size: 18px;">
    <div id="wrapper" style="height: fit-content; text-align: center; margin-left: auto; margin-right: auto;">
        <div id="coffee_header">
            <!-- 匯入共同使用的 header.html 內容 -->
            {% include 'header.html' %}
        </div>

        <!-- <div id="set_table">

        </div> -->

        <table border="5" style="border: 3px lightgray solid; text-align: center; margin-left: auto; margin-right: auto; width: 700px;">
            <tr>
                <th>桶槽名稱</th>
                <th>桶槽類別</th>
                <th>入料</th>
                <th>出料</th>
                <th></th>
            </tr>
                {% for i in dtr %}
                <script>
                    dry_tank_data_list.push('{{ i.tank_id }}');
                    if ('{{ i.tank_id }}'.substring(0, 2) === 'DO') {
                        dry_export_list.push('{{ i.tank_id }}');
                    } else if ('{{ i.tank_id }}'.substring(0, 2) === 'DI') {
                        dry_import_list.push('{{ i.tank_id }}');
                    } else {
                        dry_tank_list.push('{{ i.tank_id }}');
                    }
                </script>
                <tr>
                    <td>
                        {{ i.tank_id }}
                    </td>
                    <td>
                        <select id="{{ i.tank_id }}_type" onchange="" class="select-input">
                            <option value="mix" selected>混合槽</option>
                            <option value="clean_tank">清洗桶槽</option>
                            <option value="reclaimedwater_tank">中水桶</option>
                            <option value="colorselect_tank">色選機</option>
                            <option value="peel_tank">脫皮機</option>
                            <option value="ferment_in">發酵入料</option>
                            <option value="ferment_tank">發酵桶槽</option>
                            <option value="ferment_out">發酵出料</option>
                            <option value="dry_in">乾燥入料</option>
                            <option value="dry_tank">乾燥桶槽</option>
                            <option value="dry_out">乾燥出料</option>
                        </select>
                    </td>
                    <script>
                        var tank_type_data = '{{i.tank_type}}';
                        $("#{{ i.tank_id }}_type").val(tank_type_data);
                    </script>

                    <td>
                        <select id="{{ i.tank_id }}_import" onchange="" class="select-input">
                            <option value="-">-</option>
                        </select>
                    </td>
                    <script>
                        dry_import_data_list.push('{{ i.tank_import }}');
                    </script>
                    
                    <td>
                        <select id="{{ i.tank_id }}_export" onchange="" class="select-input">
                            <option value="-">-</option>
                        </select>
                    </td>
                    <script>
                        dry_export_data_list.push('{{ i.tank_export }}');
                    </script>
                    <td>
                        <input type="button" id="{{ i.tank_id }}_del" value="刪除 {{ i.tank_id }}" onclick="relation_del('{{ i.tank_id }}')" class="input-cond-delete">
                        <script>
                            function relation_del(tankID) {
                                var confirm_relation_del = confirm("是否要移除 " + tankID + " ?\n確認後即刪除該項關聯")
                                if (!confirm_relation_del) {
                                    alert("已取消動作");
                                } else {
                                    const SQL_delete = 'DELETE FROM `dry_tank_relation` WHERE `tank_id` = "' + tankID + '"';
                                    // console.log("sql_data: " + sql_data);
                                    var sql_data = { "sql": SQL_delete };
                                    console.log("sql_data: ", sql_data)
                                    $.get('/sql_get', sql_data, function (res) {
                                        if (res['response'] == '') {
                                            alert("OK");
                                        } else {
                                            alert(res['response']);
                                        }
                                    }, 'json');
                                    // TRUNCATE TABLE `dry_tank_relation`;
                                }
                            }
                        </script>
                    </td>
                </tr>
                {% endfor %}
                <tr>
                    <td>
                        <input type="text" id="new_tank_id" style="width: 120px;">
                    </td>
                    <td>
                        <select id="new_type" onchange="" class="select-input">
                            <option value="mix" selected>混合槽</option>
                            <option value="clean_tank">清洗桶槽</option>
                            <option value="reclaimedwater_tank">中水桶</option>
                            <option value="colorselect_tank">色選機</option>
                            <option value="peel_tank">脫皮機</option>
                            <option value="ferment_in">發酵入料</option>
                            <option value="ferment_tank">發酵桶槽</option>
                            <option value="ferment_out">發酵出料</option>
                            <option value="dry_in">乾燥入料</option>
                            <option value="dry_tank">乾燥桶槽</option>
                            <option value="dry_out">乾燥出料</option>
                        </select>
                    </td>
                    <td>
                        <select id="new_import" onchange="" class="select-input">
                            <option value="-">-</option>
                        </select>
                    </td>
                    <td>
                        <select id="new_export" onchange="" class="select-input">
                            <option value="-">-</option>
                        </select>
                    </td>
                    <td>
                        <input type="button" id="new_insert" value="新增" onclick="relation_ins()" class="input-cond-add">
                        <script>
                            function relation_ins() {
                                const new_insert_tid = $('#new_tank_id').val();
                                const new_insert_type = $("#new_type").val();
                                const new_insert_import = $("#new_import").val();
                                const new_insert_export = $("#new_export").val();
                                // console.log("new_insert_tid: " + new_insert_tid);
                                // console.log("new_insert_type: " + new_insert_type);
                                // console.log("new_insert_import: " + new_insert_import);
                                // console.log("new_insert_export: " + new_insert_export);

                                const SQL_delete = 'INSERT INTO `dry_tank_relation`(`tank_id`, `tank_type`, `tank_import`, `tank_export`, `datetime`) ' + 
                                                    'VALUES ("' + new_insert_tid + 
                                                    '","' + new_insert_type + 
                                                    '","' + new_insert_import + 
                                                    '","' + new_insert_export + 
                                                    '", current_timestamp())';
                                console.log("SQL_delete: " + SQL_delete);
                                var sql_data = { "sql": SQL_delete };
                                $.get('/sql_get', sql_data, function (res) {
                                    if (res['response'] == '') {
                                        alert("OK");
                                    } else {
                                        alert(res['response']);
                                    }
                                }, 'json');
                            }
                        </script>
                    </td>
                </tr>
                <script>
                    
                </script>
                <tr>
                    <td colspan="5">
                        [確認]
                    </td>
                </tr>
        </table>

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

</html>