<!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.beans %} var bean_num = 0; {% for bean in params.beans %} if('{{bean.start}}' != '00:00' && '{{bean.end}}' != '00:00' && bean_num == 0){ var iv = $(".set-schedule")[0]; var iv_div = $("#inletValve_div"); iv.style.display = 'none'; iv_div.css('visibility','visible'); $('select[name=inletValve_duration1]').val('{{bean.duration}}'); $('select[name=inletValve_from_hr1]').val('{{bean.start}}'.split(':')[0]); $('select[name=inletValve_from_min1]').val('{{bean.start}}'.split(':')[1]); $('select[name=inletValve_to_hr1]').val('{{bean.end}}'.split(':')[0]); $('select[name=inletValve_to_min1]').val('{{bean.end}}'.split(':')[1]); bean_num ++; }else if(bean_num > 0){ if(bean_num == 1){ var add = document.getElementById('inletValve_add1'); bean_num ++; }else{ var add = document.getElementById('inletValve_add' + i); }; Add(add); $('select[name=inletValve_duration' + i + ']').val('{{bean.duration}}'); $('select[name=' + 'inletValve_from_hr' + i + ']').val('{{bean.start}}'.split(':')[0]); $('select[name=' + 'inletValve_from_min' + i + ']').val('{{bean.start}}'.split(':')[1]); $('select[name=' + 'inletValve_to_hr' + i + ']').val('{{bean.end}}'.split(':')[0]); $('select[name=' + 'inletValve_to_min' + i + ']').val('{{bean.end}}'.split(':')[1]); }; {% endfor %} {% endif %} //清洗機 {% if params.washes %} var wash_num = 0; {% for wash in params.washes %} if('{{wash.start}}' != '00:00' && '{{wash.end}}' != '00:00' && wash_num == 0){ var wash = $(".set-schedule")[1]; var wash_div = $("#wash_div"); wash.style.display = 'none'; wash_div.css('visibility','visible'); $('select[name=wash_duration1]').val('{{wash.duration}}'); $('select[name=wash_from_hr1]').val('{{wash.start}}'.split(':')[0]); $('select[name=wash_from_min1]').val('{{wash.start}}'.split(':')[1]); $('select[name=wash_to_hr1]').val('{{wash.end}}'.split(':')[0]); $('select[name=wash_to_min1]').val('{{wash.end}}'.split(':')[1]); wash_num ++; }else if(wash_num > 0){ if(wash_num == 1){ var add = document.getElementById('wash_add1'); wash_num ++; }else{ var add = document.getElementById('wash_add' + i); }; Add(add); $('select[name=wash_duration' + i + ']').val('{{wash.duration}}'); $('select[name=' + 'wash_from_hr' + i + ']').val('{{wash.start}}'.split(':')[0]); $('select[name=' + 'wash_from_min' + i + ']').val('{{wash.start}}'.split(':')[1]); $('select[name=' + 'wash_to_hr' + i + ']').val('{{wash.end}}'.split(':')[0]); $('select[name=' + 'wash_to_min' + i + ']').val('{{wash.end}}'.split(':')[1]); }; {% endfor %} {% endif %} //輸送帶1 {% if params.belts1 %} var belt1_num = 0; {% for belt1 in params.belts1 %} if('{{belt1.start}}' != '00:00' && '{{belt1.end}}' != '00:00' && belt1_num == 0){ var belt1 = $(".set-schedule")[2]; var belt1_div = $("#belt1_div"); belt1.style.display = 'none'; belt1_div.css('visibility','visible'); $('select[name=belt1_duration1]').val('{{belt1.duration}}'); $('select[name=belt1_from_hr1]').val('{{belt1.start}}'.split(':')[0]); $('select[name=belt1_from_min1]').val('{{belt1.start}}'.split(':')[1]); $('select[name=belt1_to_hr1]').val('{{belt1.end}}'.split(':')[0]); $('select[name=belt1_to_min1]').val('{{belt1.end}}'.split(':')[1]); belt1_num ++; }else if(belt1_num > 0){ if(belt1_num == 1){ var add = document.getElementById('belt1_add1'); belt1_num ++; }else{ var add = document.getElementById('belt1_add' + i); }; Add(add); $('select[name=belt1_duration' + i + ']').val('{{belt1.duration}}'); $('select[name=' + 'belt1_from_hr' + i + ']').val('{{belt1.start}}'.split(':')[0]); $('select[name=' + 'belt1_from_min' + i + ']').val('{{belt1.start}}'.split(':')[1]); $('select[name=' + 'belt1_to_hr' + i + ']').val('{{belt1.end}}'.split(':')[0]); $('select[name=' + 'belt1_to_min' + i + ']').val('{{belt1.end}}'.split(':')[1]); }; {% endfor %} {% endif %} //消毒機 {% if params.disinfects %} var disinfect_num = 0; {% for disinfect in params.disinfects %} if('{{disinfect.start}}' != '00:00' && '{{disinfect.end}}' != '00:00' && disinfect_num == 0){ var di = $(".set-schedule")[3]; var di_div = $("#disinfect_div"); di.style.display = 'none'; di_div.css('visibility','visible'); $('select[name=disinfect_duration1]').val('{{disinfect.duration}}'); $('select[name=disinfect_from_hr1]').val('{{disinfect.start}}'.split(':')[0]); $('select[name=disinfect_from_min1]').val('{{disinfect.start}}'.split(':')[1]); $('select[name=disinfect_to_hr1]').val('{{disinfect.end}}'.split(':')[0]); $('select[name=disinfect_to_min1]').val('{{disinfect.end}}'.split(':')[1]); disinfect_num ++; }else if(disinfect_num > 0){ if(disinfect_num == 1){ var add = document.getElementById('disinfect_add1'); disinfect_num ++; }else{ var add = document.getElementById('disinfect_add' + i); }; Add(add); $('select[name=disinfect_duration' + i + ']').val('{{disinfect.duration}}'); $('select[name=' + 'disinfect_from_hr' + i + ']').val('{{disinfect.start}}'.split(':')[0]); $('select[name=' + 'disinfect_from_min' + i + ']').val('{{disinfect.start}}'.split(':')[1]); $('select[name=' + 'disinfect_to_hr' + i + ']').val('{{disinfect.end}}'.split(':')[0]); $('select[name=' + 'disinfect_to_min' + i + ']').val('{{disinfect.end}}'.split(':')[1]); }; {% endfor %} {% endif %} //色選機 {% if params.colors %} var color_num = 0; {% for color in params.colors %} if('{{color.start}}' != '00:00' && '{{color.end}}' != '00:00' && color_num == 0){ var color = $(".set-schedule")[4]; var color_div = $("#color_div"); color.style.display = 'none'; color_div.css('visibility','visible'); $('select[name=color_duration1]').val('{{color.duration}}'); $('select[name=color_from_hr1]').val('{{color.start}}'.split(':')[0]); $('select[name=color_from_min1]').val('{{color.start}}'.split(':')[1]); $('select[name=color_to_hr1]').val('{{color.end}}'.split(':')[0]); $('select[name=color_to_min1]').val('{{color.end}}'.split(':')[1]); color_num ++; }else if(color_num > 0){ if(color_num == 1){ var add = document.getElementById('color_add1'); color_num ++; }else{ var add = document.getElementById('color_add' + i); }; Add(add); $('select[name=color_duration' + i + ']').val('{{color.duration}}'); $('select[name=' + 'color_from_hr' + i + ']').val('{{color.start}}'.split(':')[0]); $('select[name=' + 'color_from_min' + i + ']').val('{{color.start}}'.split(':')[1]); $('select[name=' + 'color_to_hr' + i + ']').val('{{color.end}}'.split(':')[0]); $('select[name=' + 'color_to_min' + i + ']').val('{{color.end}}'.split(':')[1]); }; {% endfor %} {% endif %} //輸送帶2 {% if params.belts2 %} var belt2_num = 0; {% for belt2 in params.belts2 %} if('{{belt2.start}}' != '00:00' && '{{belt2.end}}' != '00:00' && belt2_num == 0){ var belt2 = $(".set-schedule")[5]; var belt2_div = $("#belt2_div"); belt2.style.display = 'none'; belt2_div.css('visibility','visible'); $('select[name=belt2_duration1]').val('{{belt2.duration}}'); $('select[name=belt2_from_hr1]').val('{{belt2.start}}'.split(':')[0]); $('select[name=belt2_from_min1]').val('{{belt2.start}}'.split(':')[1]); $('select[name=belt2_to_hr1]').val('{{belt2.end}}'.split(':')[0]); $('select[name=belt2_to_min1]').val('{{belt2.end}}'.split(':')[1]); belt2_num ++; }else if(belt2_num > 0){ if(belt2_num == 1){ var add = document.getElementById('belt2_add1'); belt2_num ++; }else{ var add = document.getElementById('belt2_add' + i); }; Add(add); $('select[name=belt2_duration' + i + ']').val('{{belt2.duration}}'); $('select[name=' + 'belt2_from_hr' + i + ']').val('{{belt2.start}}'.split(':')[0]); $('select[name=' + 'belt2_from_min' + i + ']').val('{{belt2.start}}'.split(':')[1]); $('select[name=' + 'belt2_to_hr' + i + ']').val('{{belt2.end}}'.split(':')[0]); $('select[name=' + 'belt2_to_min' + i + ']').val('{{belt2.end}}'.split(':')[1]); }; {% endfor %} {% endif %} //去皮機 {% if params.peelings %} var peeling_num = 0; {% for peeling in params.peelings %} if('{{peeling.start}}' != '00:00' && '{{peeling.end}}' != '00:00' && peeling_num == 0){ var peeled = $(".set-schedule")[6]; var peeled_div = $("#peeled_div"); peeled.style.display = 'none'; peeled_div.css('visibility','visible'); $('select[name=peeled_duration1]').val('{{peeling.duration}}'); $('select[name=peeled_from_hr1]').val('{{peeling.start}}'.split(':')[0]); $('select[name=peeled_from_min1]').val('{{peeling.start}}'.split(':')[1]); $('select[name=peeled_to_hr1]').val('{{peeling.end}}'.split(':')[0]); $('select[name=peeled_to_min1]').val('{{peeling.end}}'.split(':')[1]); peeling_num ++; }else if(peeling_num > 0){ if(peeling_num == 1){ var add = document.getElementById('peeled_add1'); peeling_num ++; }else{ var add = document.getElementById('peeled_add' + i); }; Add(add); $('select[name=peeled_duration' + i + ']').val('{{peeling.duration}}'); $('select[name=' + 'peeled_from_hr' + i + ']').val('{{peeling.start}}'.split(':')[0]); $('select[name=' + 'peeled_from_min' + i + ']').val('{{peeling.start}}'.split(':')[1]); $('select[name=' + 'peeled_to_hr' + i + ']').val('{{peeling.end}}'.split(':')[0]); $('select[name=' + 'peeled_to_min' + i + ']').val('{{peeling.end}}'.split(':')[1]); }; {% endfor %} {% endif %} //輸送帶3 {% if params.belts3 %} var belt3_num = 0; {% for belt3 in params.belts3 %} if('{{belt3.start}}' != '00:00' && '{{belt3.end}}' != '00:00' && belt3_num == 0){ var belt3 = $(".set-schedule")[7]; var belt3_div = $("#belt3_div"); belt3.style.display = 'none'; belt3_div.css('visibility','visible'); $('select[name=belt3_duration1]').val('{{belt3.duration}}'); $('select[name=belt3_from_hr1]').val('{{belt3.start}}'.split(':')[0]); $('select[name=belt3_from_min1]').val('{{belt3.start}}'.split(':')[1]); $('select[name=belt3_to_hr1]').val('{{belt3.end}}'.split(':')[0]); $('select[name=belt3_to_min1]').val('{{belt3.end}}'.split(':')[1]); belt3_num ++; }else if(belt3_num > 0){ if(belt3_num == 1){ var add = document.getElementById('belt3_add1'); belt3_num ++; }else{ var add = document.getElementById('belt3_add' + i); }; Add(add); $('select[name=belt3_duration' + i + ']').val('{{belt3.duration}}'); $('select[name=' + 'belt3_from_hr' + i + ']').val('{{belt3.start}}'.split(':')[0]); $('select[name=' + 'belt3_from_min' + i + ']').val('{{belt3.start}}'.split(':')[1]); $('select[name=' + 'belt3_to_hr' + i + ']').val('{{belt3.end}}'.split(':')[0]); $('select[name=' + 'belt3_to_min' + i + ']').val('{{belt3.end}}'.split(':')[1]); }; {% endfor %} {% endif %} }); </script> <script> var i = 1; function Cancel(){ window.location.href='/cargo1'; }; function Add(evt){ evt.style.display="none"; i ++; var div = document.createElement('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'); var len = id.length; var add = id.split('_')[0] + '_add' + i; var del = id.split('_')[0] + '_del' + i; var html = ''; var begin = id.split('_')[0]; div.className = "col-12 row"; div.style.marginTop = "10px"; html += '<div class="col-xl-5 col-lg-5 col-md-4" style="margin-top:10px;">'; html += '<span>Duration</span>'; if(begin == 'inletValve'){ html += ' <select name="inletValve_duration' + i + '" class="duration">'; }else if(begin == 'wash'){ html += ' <select name="wash_duration' + i + '" class="duration">'; }else if(begin == 'belt1'){ html += ' <select name="belt1_duration' + i + '" class="duration">'; }else if(begin == 'disinfect'){ html += ' <select name="disinfect_duration' + i + '" class="duration">'; }else if(begin == 'color'){ html += ' <select name="color_duration' + i + '" class="duration">'; }else if(begin == 'belt2'){ html += ' <select name="belt2_duration' + i + '" class="duration">'; }else if(begin == 'peeled'){ html += ' <select name="peeled_duration' + i + '" class="duration">'; }else if(begin == 'belt3'){ html += ' <select name="belt3_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] == 'inletValve'){ html += '<select name="inletValve_from_hr' + i + '">'; }else if(id.split('_')[0] == 'wash'){ html += '<select name="wash_from_hr' + i + '">'; }else if(id.split('_')[0] == 'belt1'){ html += '<select name="belt1_from_hr' + i + '">'; }else if(id.split('_')[0] == 'disinfect'){ html += '<select name="disinfect_from_hr' + i + '">'; }else if(id.split('_')[0] == 'color'){ html += '<select name="color_from_hr' + i + '">'; }else if(id.split('_')[0] == 'belt2'){ html += '<select name="belt2_from_hr' + i + '">'; }else if(id.split('_')[0] == 'peeled'){ html += '<select name="peeled_from_hr' + i + '">'; }else if(id.split('_')[0] == 'belt3'){ html += '<select name="belt3_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] == 'inletValve'){ html += ' : <select name="inletValve_from_min' + i + '">'; }else if(id.split('_')[0] == 'wash'){ html += ' : <select name="wash_from_min' + i + '">'; }else if(id.split('_')[0] == 'belt1'){ html += ' : <select name="belt1_from_min' + i + '">'; }else if(id.split('_')[0] == 'disinfect'){ html += ' : <select name="disinfect_from_min' + i + '">'; }else if(id.split('_')[0] == 'color'){ html += ' : <select name="color_from_min' + i + '">'; }else if(id.split('_')[0] == 'belt2'){ html += ' : <select name="belt2_from_min' + i + '">'; }else if(id.split('_')[0] == 'peeled'){ html += ' : <select name="peeled_from_min' + i + '">'; }else if(id.split('_')[0] == 'belt3'){ html += ' : <select name="belt3_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] == 'inletValve'){ html += '<select name="inletValve_to_hr' + i + '">'; }else if(id.split('_')[0] == 'wash'){ html += '<select name="wash_to_hr' + i + '">'; }else if(id.split('_')[0] == 'belt1'){ html += '<select name="belt1_to_hr' + i + '">'; }else if(id.split('_')[0] == 'disinfect'){ html += '<select name="disinfect_to_hr' + i + '">'; }else if(id.split('_')[0] == 'color'){ html += '<select name="color_to_hr' + i + '">'; }else if(id.split('_')[0] == 'belt2'){ html += '<select name="belt2_to_hr' + i + '">'; }else if(id.split('_')[0] == 'peeled'){ html += '<select name="peeled_to_hr' + i + '">'; }else if(id.split('_')[0] == 'belt3'){ html += '<select name="belt3_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] == 'inletValve'){ html += ' : <select name="inletValve_to_min' + i + '">'; }else if(id.split('_')[0] == 'wash'){ html += ' : <select name="wash_to_min' + i + '">'; }else if(id.split('_')[0] == 'belt1'){ html += ' : <select name="belt1_to_min' + i + '">'; }else if(id.split('_')[0] == 'disinfect'){ html += ' : <select name="disinfect_to_min' + i + '">'; }else if(id.split('_')[0] == 'color'){ html += ' : <select name="color_to_min' + i + '">'; }else if(id.split('_')[0] == 'belt2'){ html += ' : <select name="belt2_to_min' + i + '">'; }else if(id.split('_')[0] == 'peeled'){ html += ' : <select name="peeled_to_min' + i + '">'; }else if(id.split('_')[0] == 'belt3'){ html += ' : <select name="belt3_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; 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'); var add = id.split('_')[0] + '_' + 'add'; var clo_xs_3 = evt.parentNode; var from = clo_xs_3.parentNode; var begin = id.split('_')[0]; var div = from.parentNode.parentNode.parentNode; var next_div = div.nextElementSibling; var pre_div = div.previousElementSibling; if(next_div && pre_div == null){ div.parentNode.removeChild(div); next_div.style.marginTop = '0px'; }else if(next_div && pre_div){ div.parentNode.removeChild(div); }else if(next_div == null && pre_div == null){ 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 inletValve = $(".set-schedule")[0]; var inletValve_div = $("#inletValve_div"); var wash = $(".set-schedule")[1]; var wash_div = $("#wash_div"); var belt1 = $(".set-schedule")[2]; var belt1_div = $("#belt1_div"); var disinfect = $(".set-schedule")[3]; var disinfect_div = $("#disinfect_div"); var color = $(".set-schedule")[4]; var color_div = $("#color_div"); var belt2 = $(".set-schedule")[5]; var belt2_div = $("#belt2_div"); var peeled = $(".set-schedule")[6]; var peeled_div = $("#peeled_div"); var belt3 = $(".set-schedule")[7]; var belt3_div = $("#belt3_div"); inletValve.onclick = function(){ inletValve.style.display = 'none'; inletValve_div.css('visibility','visible'); }; wash.onclick = function(){ wash.style.display = 'none'; wash_div.css('visibility','visible'); }; belt1.onclick = function(){ belt1.style.display = 'none'; belt1_div.css('visibility','visible'); }; disinfect.onclick = function(){ disinfect.style.display = 'none'; disinfect_div.css('visibility','visible'); }; color.onclick = function(){ color.style.display = 'none'; color_div.css('visibility','visible'); }; belt2.onclick = function(){ belt2.style.display = 'none'; belt2_div.css('visibility','visible'); }; peeled.onclick = function(){ peeled.style.display = 'none'; peeled_div.css('visibility','visible'); }; belt3.onclick = function(){ belt3.style.display = 'none'; belt3_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; } .inletValve, .belt1, .disinfect, .color, .peeled, .wash, .belt2, .belt3 { 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: 20px; } .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; } .inletValve, .wash, .belt1, .disinfect, .color, .belt2, .peeled, .belt3 { 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">貨櫃1</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"> <form method="post" action="/b_cargo1"> <div class="container-fluid"> <div class="row"> <div class="col flex"> <div class="inletValve 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="inletValve_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="inletValve_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="inletValve_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="inletValve_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="inletValve_del1" class="delete" type="button" value="Delete" onclick="Delete(inletValve_del1);"> </div> </div> <div class="to row"> <div class="col-3"> <span>To</span> </div> <div class="col-xs-6"> <select name="inletValve_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="inletValve_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="inletValve_add1" class="add" type="button" value="Add" onclick="Add(inletValve_add1);"> </div> <div class="col-xs-3"></div> </div> </div> </div> </div> </div> </div> <div class="wash 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="wash_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="wash_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="wash_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="wash_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="wash_del1" class="delete" type="button" value="Delete" onclick="Delete(wash_del1);"> </div> </div> <div class="to row"> <div class="col-3"> <span>To</span> </div> <div class="col-xs-6"> <select name="wash_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="wash_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="wash_add1" class="add" type="button" value="Add" onclick="Add(wash_add1);"> </div> <div class="col-xs-3"></div> </div> </div> </div> </div> </div> </div> <div class="belt1 col-xl-5 col-lg-5 col-md-5 col-sm-8 col-xs-8"> <h2 class="item-title">輸送帶1</h2> <input class="set-schedule" type="button" value="Set up the schedule"> <br> <div id="belt1_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="belt1_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="belt1_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="belt1_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="belt1_del1" class="delete" type="button" value="Delete" onclick="Delete(belt1_del1);"> </div> </div> <div class="to row"> <div class="col-3"> <span>To</span> </div> <div class="col-xs-6"> <select name="belt1_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="belt1_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="belt1_add1" class="add" type="button" value="Add" onclick="Add(belt1_add1);"> </div> <div class="col-xs-3"></div> </div> </div> </div> </div> </div> </div> <div class="disinfect 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="disinfect_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="disinfect_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="disinfect_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="disinfect_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="disinfect_del1" class="delete" type="button" value="Delete" onclick="Delete(disinfect_del1);"> </div> </div> <div class="to row"> <div class="col-3"> <span>To</span> </div> <div class="col-xs-6"> <select name="disinfect_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="disinfect_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="disinfect_add1" class="add" type="button" value="Add" onclick="Add(disinfect_add1);"> </div> <div class="col-xs-3"></div> </div> </div> </div> </div> </div> </div> <div class="color 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="color_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="color_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="color_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="color_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="color_del1" class="delete" type="button" value="Delete" onclick="Delete(color_del1);"> </div> </div> <div class="to row"> <div class="col-3"> <span>To</span> </div> <div class="col-xs-6"> <select name="color_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="color_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="color_add1" class="add" type="button" value="Add" onclick="Add(color_add1);"> </div> <div class="col-xs-3"></div> </div> </div> </div> </div> </div> </div> <div class="belt2 col-xl-5 col-lg-5 col-md-5 col-sm-8 col-xs-8"> <h2 class="item-title">輸送帶2</h2> <input class="set-schedule" type="button" value="Set up the schedule"> <br> <div id="belt2_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="belt2_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="belt2_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="belt2_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="belt2_del1" class="delete" type="button" value="Delete" onclick="Delete(belt2_del1);"> </div> </div> <div class="to row"> <div class="col-3"> <span>To</span> </div> <div class="col-xs-6"> <select name="belt2_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="belt2_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="belt2_add1" class="add" type="button" value="Add" onclick="Add(belt2_add1);"> </div> <div class="col-xs-3"></div> </div> </div> </div> </div> </div> </div> <div class="peeled 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="peeled_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="peeled_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="peeled_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="peeled_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="peeled_del1" class="delete" type="button" value="Delete" onclick="Delete(peeled_del1);"> </div> </div> <div class="to row"> <div class="col-3"> <span>To</span> </div> <div class="col-xs-6"> <select name="peeled_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="peeled_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="peeled_add1" class="add" type="button" value="Add" onclick="Add(peeled_add1);"> </div> <div class="col-xs-3"></div> </div> </div> </div> </div> </div> </div> <div class="belt3 col-xl-5 col-lg-5 col-md-5 col-sm-8 col-xs-8"> <h2 class="item-title">輸送帶3</h2> <input class="set-schedule" type="button" value="Set up the schedule"> <br> <div id="belt3_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="belt3_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="belt3_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="belt3_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="belt3_del1" class="delete" type="button" value="Delete" onclick="Delete(belt3_del1);"> </div> </div> <div class="to row"> <div class="col-3"> <span>To</span> </div> <div class="col-xs-6"> <select name="belt3_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="belt3_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="belt3_add1" class="add" type="button" value="Add" onclick="Add(belt3_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>