rita
/
CoffeeProject


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449
							<!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="tank">桶槽</option>
                            <option value="import">入料儲豆槽</option>
                            <option value="export">出料儲豆槽</option>
                            <option value="mix">混合槽</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="tank">桶槽</option>
                            <option value="import">入料儲豆槽</option>
                            <option value="export">出料儲豆槽</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>