<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Aisky-coffee</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>
<!--可用來建立使用者小圖示-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script>
$(function () {
//提升機
{% if params.hoists %}
var hoist_num = 0;
{% for hoist in params.hoists %}
if ('{{hoist.start}}' != '00:00' && '{{hoist.end}}' != '00:00' && hoist_num == 0) {
var ho = $(".set-schedule")[0];
var ho_div = $("#hoist_div");
ho.style.display = 'none';
ho_div.css('visibility', 'visible');
$('select[name=hoist_duration1]').val('{{hoist.duration}}');
$('select[name=hoist_from_hr1]').val('{{hoist.start}}'.split(':')[0]);
$('select[name=hoist_from_min1]').val('{{hoist.start}}'.split(':')[1]);
$('select[name=hoist_to_hr1]').val('{{hoist.end}}'.split(':')[0]);
$('select[name=hoist_to_min1]').val('{{hoist.end}}'.split(':')[1]);
hoist_num++;
} else if (hoist_num > 0) {
if (hoist_num == 1) {
var add = document.getElementById('hoist_add1');
hoist_num++;
} else {
var add = document.getElementById('hoist_add' + i);
};
Add(add);
// Rita 從資料庫回傳最新資料 ???
$('select[name=hoist_duration' + i + ']').val('{{hoist.duration}}');
$('select[name=' + 'hoist_from_hr' + i + ']').val('{{hoist.start}}'.split(':')[0]);
$('select[name=' + 'hoist_from_min' + i + ']').val('{{hoist.start}}'.split(':')[1]);
$('select[name=' + 'hoist_to_hr' + i + ']').val('{{hoist.end}}'.split(':')[0]);
$('select[name=' + 'hoist_to_min' + i + ']').val('{{hoist.end}}'.split(':')[1]);
};
{% endfor %}
{% endif %}
//烘乾機
{% if params.dryers %}
var dryer_num = 0;
{% for dryer in params.dryers %}
if ('{{dryer.start}}' != '00:00' && '{{dryer.end}}' != '00:00' && dryer_num == 0) {
var dry = $(".set-schedule")[1];
var dry_div = $("#dryer_div");
dry.style.display = 'none';
dry_div.css('visibility', 'visible');
$('select[name=dryer_duration1]').val('{{dryer.duration}}');
$('select[name=dryer_from_hr1]').val('{{dryer.start}}'.split(':')[0]);
$('select[name=dryer_from_min1]').val('{{dryer.start}}'.split(':')[1]);
$('select[name=dryer_to_hr1]').val('{{dryer.end}}'.split(':')[0]);
$('select[name=dryer_to_min1]').val('{{dryer.end}}'.split(':')[1]);
dryer_num++;
} else if (dryer_num > 0) {
if (dryer_num == 1) {
var add = document.getElementById('dryer_add1');
dryer_num++;
} else {
var add = document.getElementById('dryer_add' + i);
};
Add(add);
$('select[name=dryer_duration' + i + ']').val('{{dryer.duration}}');
$('select[name=' + 'dryer_from_hr' + i + ']').val('{{dryer.start}}'.split(':')[0]);
$('select[name=' + 'dryer_from_min' + i + ']').val('{{dryer.start}}'.split(':')[1]);
$('select[name=' + 'dryer_to_hr' + i + ']').val('{{dryer.end}}'.split(':')[0]);
$('select[name=' + 'dryer_to_min' + i + ']').val('{{dryer.end}}'.split(':')[1]);
};
{% endfor %}
{% endif %}
});
</script>
<script>
var i = 1;
function Cancel() {
window.location.href = '/cargo3';
};
function Add(evt) {
// onclick = "Add(hoist_add1);""
// evt = hoist_num (= hoist_add1 / hoist_add2 / hoist_add3 ...)
evt.style.display = "none"; // 元素不顯示
i++;
var div = document.createElement('div'); // 輸出 <div></div>
var from_hr = 'from_hr' + i;
var from_min = 'from_min' + i;
var to_hr = 'to_hr' + i;
var to_min = 'to_min' + i;
var id = evt.getAttribute('id'); // 輸出 hoist_add1
var len = id.length;
var add = id.split('_')[0] + '_add' + i; // hoist + _add + 2 => 輸出 hoist_add2
var del = id.split('_')[0] + '_del' + i; // hoist + _del + 2 => 輸出 hoist_del2
var html = '';
var begin = id.split('_')[0]; // 輸出 hoist
div.className = "col-12 row";
div.style.marginTop = "10px";
console.log(div)
html += '<div class="col-xl-5 col-lg-5 col-md-4" style="margin-top:10px;">';
html += '<span>Duration</span>';
if (begin == 'hoist') {
html += ' <select name="hoist_duration' + i + '" class="duration">';
} else if (begin == 'dryer') {
html += ' <select name="dryer_duration' + i + '" class="duration">';
} else {
};
html += '<option selected value="30min">30 min</option><option value="60min">60 min</option><option value="90min">90 min</option><option value="120min">120 min</option><option value="150min">150 min</option></select>';
html += '</div>';
html += '<div class="from-to col-xl-7 col-lg-7 col-md-8" style="margin-top:10px;">';
html += '<div>';
html += '<div class="from row">';
html += '<div class="col-3">';
html += '<span>From</span>';
html += '</div>';
html += '<div class="col-xs-6">';
if (id.split('_')[0] == 'hoist') {
html += '<select name="hoist_from_hr' + i + '">';
} else if (id.split('_')[0] == 'dryer') {
html += '<select name="dryer_from_hr' + i + '">';
} else {
};
for (var hr = 0; hr < 24; hr++) {
if (hr < 10) {
html += '<option value="0' + hr + '">0' + hr + '</option>';
} else {
html += '<option value="' + hr + '">' + hr + '</option>';
};
};
html += '</select>';
if (id.split('_')[0] == 'hoist') {
html += ' : <select name="hoist_from_min' + i + '">';
} else if (id.split('_')[0] == 'dryer') {
html += ' : <select name="dryer_from_min' + i + '">';
} else {
};
for (var min = 0; min < 60; min++) {
if (min < 10) {
html += '<option value="0' + min + '">0' + min + '</option>';
} else {
html += '<option value="' + min + '">' + min + '</option>';
};
};
html += '</select>';
html += '</div>';
html += '<div class="col-xs-3">';
html += '<input id=' + del + ' class="delete" type="button" value="Delete" onclick="Delete(' + del + ');">';
html += '</div>';
html += '</div>';
html += '<div class="to row">';
html += '<div class="col-3">';
html += '<span>To</span>';
html += '</div>';
html += '<div class="col-xs-6">';
if (id.split('_')[0] == 'hoist') {
html += '<select name="hoist_to_hr' + i + '">';
} else if (id.split('_')[0] == 'dryer') {
html += '<select name="dryer_to_hr' + i + '">';
} else {
};
for (var hr = 0; hr < 24; hr++) {
if (hr < 10) {
html += '<option value="0' + hr + '">0' + hr + '</option>';
} else {
html += '<option value="' + hr + '">' + hr + '</option>';
};
};
html += '</select>';
if (id.split('_')[0] == 'hoist') {
html += ' : <select name="hoist_to_min' + i + '">';
} else if (id.split('_')[0] == 'dryer') {
html += ' : <select name="dryer_to_min' + i + '">';
} else {
};
for (var min = 0; min < 60; min++) {
if (min < 10) {
html += '<option value="0' + min + '">0' + min + '</option>';
} else {
html += '<option value="' + min + '">' + min + '</option>';
};
};
html += '</select><br>';
html += '<input id=' + add + ' class="add" type="button" value="Add" onclick="Add(' + add + ');">';
html += '</div>';
html += '<div class="col-xs-3"></div>';
html += '</div>';
html += '</div>';
html += '</div>';
div.innerHTML = html;
//console.log(html)
div.style.marginTop = '15px';
div.style.zIndex = '100';
evt.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(div);
};
function Delete(evt) {
var id = evt.getAttribute('id'); // dryinput_del2
var add = id.split('_')[0] + '_' + 'add'; // add = dryinput_add
var clo_xs_3 = evt.parentNode;
var from = clo_xs_3.parentNode;
var begin = id.split('_')[0]; // begin = dryinput
var div = from.parentNode.parentNode.parentNode; // 輸出 div[object HTMLDivElement]
var next_div = div.nextElementSibling; // 輸出 null
var pre_div = div.previousElementSibling; // 輸出 null
if (next_div && pre_div == null) { // 1 && null == null (true)
div.parentNode.removeChild(div);
next_div.style.marginTop = '0px';
} else if (next_div && pre_div) { // 兩者都有時 true
div.parentNode.removeChild(div);
} else if (next_div == null && pre_div == null) { // 兩者都沒有時 true
div.parentNode.parentNode.children[1].style.display = 'inline-block';
div.parentNode.style.visibility = 'hidden';
var name = id.split('_')[0];
var from_hr = name + '_from_hr' + 1;
var from_min = name + '_from_min' + 1;
var to_hr = name + '_to_hr' + 1;
var to_min = name + '_to_min' + 1;
$('select[name=' + from_hr + ']').val('00');
$('select[name=' + from_min + ']').val('00');
$('select[name=' + to_hr + ']').val('00');
$('select[name=' + to_min + ']').val('00');
} else {
div.parentNode.removeChild(div);
i--;
add = add + i;
add = document.getElementById(add);
if (add == null) {
add = pre_div.children[1].children[0].children[1].children[1].children[3];
};
add.style.display = 'block';
};
};
$(function () {
var hoist = $(".set-schedule")[0];
var hoist_div = $("#hoist_div");
var dryer = $(".set-schedule")[1];
var dryer_div = $("#dryer_div");
hoist.onclick = function () {
hoist.style.display = 'none';
hoist_div.css('visibility', 'visible');
};
dryer.onclick = function () {
dryer.style.display = 'none';
dryer_div.css('visibility', 'visible');
};
});
</script>
<style>
body {
margin: 0;
}
.navbar-dark .navbar-nav .nav-link {
color: white;
cursor: pointer;
text-decoration: none;
width: 110px;
height: 46px;
}
.nav-top {
line-height: 40px;
background-color: #C4C4C4;
}
.website_title {
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 30px;
color: #000000;
}
.navbar-nav>li {
float: none;
display: inline-block;
width: 100px;
margin: 0 auto;
text-align: center;
}
.navbar-nav>li a {
font-size: 20px;
}
.main-page {
margin-top: 200px;
}
.page-title {
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 36px;
color: #000000;
}
form {
margin-top: 70px;
}
.flex {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.flex span {
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 18px;
margin-left: 20px;
color: #000000;
}
.duration {
background: #FFFFFF;
border: 1px solid #000000;
box-sizing: border-box;
border-radius: 5px;
width: 110px;
height: 40px;
font-size: 20px;
margin-left: 15px;
text-align: center;
}
.from select,
.to select {
width: 65px;
height: 35px;
margin-left: 2px;
}
.to {
margin-top: 10px;
margin-left: 10px;
}
.from {
margin-left: 10px;
}
.from>div:first-child,
.to>div:first-child {
padding-right: 0px;
text-align: right;
margin-right: 5px;
}
.hoist,
.dryer {
height: 400px;
border: 2px solid #E5E5E5;
border-radius: 5px;
margin-top: 35px;
margin-left: 35px;
}
.item-title {
display: inline-block;
margin-top: 20px;
margin-left: 20px;
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 24px;
color: #000000;
}
.set-schedule {
width: 200px;
height: 45px;
background: #008CBA;
border: 1px solid #CFCFCF;
box-sizing: border-box;
color: #FFFFFF;
border-radius: 5px;
font-size: 17px;
margin-left: 10px;
}
.delete {
background: #E43030;
border: 1px solid #CFCFCF;
box-sizing: border-box;
border-radius: 5px;
margin-left: 5px;
width: 65px;
height: 33px;
font-size: 16px;
text-align: center;
line-height: 16px;
color: #FFFFFF;
}
.add {
background: #008CBA;
border: 1px solid #CFCFCF;
box-sizing: border-box;
border-radius: 5px;
margin-top: 10px;
margin-left: 82px;
;
width: 65px;
height: 33px;
font-size: 16px;
text-align: center;
line-height: 16px;
color: #FFFFFF;
}
.page-bottom {
margin-top: 100px;
}
.form-control {
background: #008CBA;
border: 1px solid #CFCFCF;
box-sizing: border-box;
border-radius: 5px;
width: 120px;
height: 58px;
text-align: center;
line-height: 50px;
color: #FFFFFF;
display: inline-block;
}
@media(max-width:373px) {
.card {
margin-right: 0px;
}
.hoist,
.dryer {
margin-left: 0px;
}
.col {
padding-right: 0px;
padding-left: 0px;
}
.from,
.to {
margin-left: 0px;
}
.flex span {
margin-left: 0px;
}
.from select,
.to select {
width: 45px;
}
.add {
width: 50px;
margin-left: 62px;
}
.delete {
width: 58px;
}
.col-xs-8:not(:first-child) {
margin-top: 150px;
}
.form-group {
margin-top: 50px;
}
}
@media(max-width:577px) {}
@media(min-width:576px) {}
@media(min-width:768px) {
.navbar-nav>li {
margin-left: 0px;
}
.navbar-nav .li-block {
display: none;
}
}
@media(min-width:991px) {
.navbar-nav>li {
margin-left: 20px;
}
.navbar-nav .li-block {
display: none;
}
.page-bottom input:last-child {
margin-left: 100px;
}
}
@media(min-width:1200px) {
.navbar-nav>li {
margin-left: 50px;
}
.navbar-nav .li-block {
display: inline-block;
width: 100px;
}
.page-bottom input:last-child {
margin-left: 100px;
}
}
@media(min-width:1400px) {
.navbar-nav .li-block {
display: inline-block;
width: 200px;
}
.page-bottom input:last-child {
margin-left: 100px;
}
}
@media(min-width:1689px) {
.navbar-nav>li {
margin-left: 50px;
}
.navbar-nav .li-block {
display: inline-block;
width: 500px;
}
.page-bottom input:last-child {
margin-left: 100px;
}
}
</style>
</head>
<body>
<nav class="fixed-top">
<nav class="navbar navbar-expand-md nav-top justify-content-center">
<div>
<span class="website_title">貨櫃3</span>
</div>
</nav>
<nav class="navbar navbar-expand-md bg-dark navbar-dark nav-bottom">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/">首頁</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">關於我們</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">資訊</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">聯絡方法</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/cargo_list">咖啡貨櫃</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/video">影像串流</a>
</li>
<li class="li-block"></li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-user-o"></i> {{params.username}}</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/logout">Logout</a>
</li>
</ul>
</div>
</nav>
</nav>
<div class="main-page">
<div class="page-title text-center">
</div>
<form method="post" action="/b_cargo3">
<div class="container-fluid">
<div class="row">
<div class="col flex">
<div class="hoist col-xl-5 col-lg-5 col-md-5 col-sm-8 col-xs-8">
<h2 class="item-title">提升機</h2>
<input class="set-schedule" type="button" value="Set up the schedule">
<br>
<div id="hoist_div" class="row" style="visibility:hidden;">
<div class="col-12 row">
<div class="col-xl-5 col-lg-5 col-md-4 col-sm-12 col-xs-12"
style="margin-top:10px;">
<span>Duration</span>
<select name="hoist_duration1" class="duration">
<option selected value="30min">30 min</option>
<option value="60min">60 min</option>
<option value="90min">90 min</option>
<option value="120min">120 min</option>
<option value="150min">150 min</option>
</select>
</div>
<div class="from-to col-xl-7 col-lg-7 col-md-8 col-sm-12 col-xs-12"
style="margin-top:10px;">
<div>
<div class="from row">
<div class="col-3">
<span>From</span>
</div>
<div class="col-xs-6">
<select name="hoist_from_hr1">
{% for hr in range(0, 24) %}
{% if hr < 10 %}
<option value="0{{hr}}">0{{hr}}</option>
{% else %}
<option value="{{hr}}">{{hr}}</option>
{% endif %}
{% endfor %}
</select>
:
<select name="hoist_from_min1">
{% for min in range(0, 60) %}
{% if min < 10 %} <option value="0{{min}}">0{{min}}</option>
{% else %}
<option value="{{min}}">{{min}}</option>
{% endif %}
{% endfor %}
</select>
</div>
<div class="col-xs-3">
<input id="hoist_del1" class="delete" type="button" value="Delete"
onclick="Delete(hoist_del1);">
</div>
</div>
<div class="to row">
<div class="col-3">
<span>To</span>
</div>
<div class="col-xs-6">
<select name="hoist_to_hr1">
{% for hr in range(0, 24) %}
{% if hr < 10 %}
<option value="0{{hr}}">0{{hr}}</option>
{% else %}
<option value="{{hr}}">{{hr}}</option>
{% endif %}
{% endfor %}
</select>
: <select name="hoist_to_min1">
{% for min in range(0, 60) %}
{% if min < 10 %} <option value="0{{min}}">0{{min}}</option>
{% else %}
<option value="{{min}}">{{min}}</option>
{% endif %}
{% endfor %}
</select><br>
<input id="hoist_add1" class="add" type="button" value="Add"
onclick="Add(hoist_add1);">
</div>
<div class="col-xs-3"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="dryer col-xl-5 col-lg-5 col-md-5 col-sm-8 col-xs-8">
<h2 class="item-title">烘乾機</h2>
<input class="set-schedule" type="button" value="Set up the schedule">
<br>
<div id="dryer_div" class="row" style="visibility:hidden;">
<div class="col-12 row">
<div class="col-xl-5 col-lg-5 col-md-4 col-sm-12 col-xs-12"
style="margin-top:10px;">
<span>Duration</span>
<select name="dryer_duration1" class="duration">
<option selected value="30min">30 min</option>
<option value="60min">60 min</option>
<option value="90min">90 min</option>
<option value="120min">120 min</option>
<option value="150min">150 min</option>
</select>
</div>
<div class="from-to col-xl-7 col-lg-7 col-md-8 col-sm-12 col-xs-12"
style="margin-top:10px;">
<div>
<div class="from row">
<div class="col-3">
<span>From</span>
</div>
<div class="col-xs-6">
<select name="dryer_from_hr1">
{% for hr in range(0, 24) %}
{% if hr < 10 %} <option value="0{{hr}}">0{{hr}}</option>
{% else %}
<option value="{{hr}}">{{hr}}</option>
{% endif %}
{% endfor %}
</select>
: <select name="dryer_from_min1">
{% for min in range(0, 60) %}
{% if min < 10 %} <option value="0{{min}}">0{{min}}</option>
{% else %}
<option value="{{min}}">{{min}}</option>
{% endif %}
{% endfor %}
</select>
</div>
<div class="col-xs-3">
<input id="dryer_del1" class="delete" type="button" value="Delete"
onclick="Delete(dryer_del1);">
</div>
</div>
<div class="to row">
<div class="col-3">
<span>To</span>
</div>
<div class="col-xs-6">
<select name="dryer_to_hr1">
{% for hr in range(0, 24) %}
{% if hr < 10 %} <option value="0{{hr}}">0{{hr}}</option>
{% else %}
<option value="{{hr}}">{{hr}}</option>
{% endif %}
{% endfor %}
</select>
: <select name="dryer_to_min1">
{% for min in range(0, 60) %}
{% if min < 10 %} <option value="0{{min}}">0{{min}}</option>
{% else %}
<option value="{{min}}">{{min}}</option>
{% endif %}
{% endfor %}
</select><br>
<input id="dryer_add1" class="add" type="button" value="Add"
onclick="Add(dryer_add1);">
</div>
<div class="col-xs-3"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row page-bottom">
<div class="col"></div>
<div class="col-xl-4 col-lg-6 col-md-8 col-sm-10 col-xs-10" style="text-align:center;">
<div class="form-group">
<input type="button" class="form-control" value="Cancel" onclick="Cancel();">
<input type="submit" class="form-control" value="Confirm">
</div>
</div>
<div class="col"></div>
</div>
</form>
</div>
</body>
</html>