<!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>