cargo1_schedule.html 87 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Aisky-coffee</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7. <!-- 新 Bootstrap4 核心 CSS 文件 -->
  8. <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
  9. <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  10. <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  11. <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
  12. <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
  13. <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
  14. <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  15. <!--可用來建立使用者小圖示-->
  16. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  17. <script>
  18. $(function(){
  19. //進豆閥
  20. {% if params.beans %}
  21. var bean_num = 0;
  22. {% for bean in params.beans %}
  23. if('{{bean.start}}' != '00:00' && '{{bean.end}}' != '00:00' && bean_num == 0){
  24. var iv = $(".set-schedule")[0];
  25. var iv_div = $("#inletValve_div");
  26. iv.style.display = 'none';
  27. iv_div.css('visibility','visible');
  28. $('select[name=inletValve_duration1]').val('{{bean.duration}}');
  29. $('select[name=inletValve_from_hr1]').val('{{bean.start}}'.split(':')[0]);
  30. $('select[name=inletValve_from_min1]').val('{{bean.start}}'.split(':')[1]);
  31. $('select[name=inletValve_to_hr1]').val('{{bean.end}}'.split(':')[0]);
  32. $('select[name=inletValve_to_min1]').val('{{bean.end}}'.split(':')[1]);
  33. bean_num ++;
  34. }else if(bean_num > 0){
  35. if(bean_num == 1){
  36. var add = document.getElementById('inletValve_add1');
  37. bean_num ++;
  38. }else{
  39. var add = document.getElementById('inletValve_add' + i);
  40. };
  41. Add(add);
  42. $('select[name=inletValve_duration' + i + ']').val('{{bean.duration}}');
  43. $('select[name=' + 'inletValve_from_hr' + i + ']').val('{{bean.start}}'.split(':')[0]);
  44. $('select[name=' + 'inletValve_from_min' + i + ']').val('{{bean.start}}'.split(':')[1]);
  45. $('select[name=' + 'inletValve_to_hr' + i + ']').val('{{bean.end}}'.split(':')[0]);
  46. $('select[name=' + 'inletValve_to_min' + i + ']').val('{{bean.end}}'.split(':')[1]);
  47. };
  48. {% endfor %}
  49. {% endif %}
  50. //清洗機
  51. {% if params.washes %}
  52. var wash_num = 0;
  53. {% for wash in params.washes %}
  54. if('{{wash.start}}' != '00:00' && '{{wash.end}}' != '00:00' && wash_num == 0){
  55. var wash = $(".set-schedule")[1];
  56. var wash_div = $("#wash_div");
  57. wash.style.display = 'none';
  58. wash_div.css('visibility','visible');
  59. $('select[name=wash_duration1]').val('{{wash.duration}}');
  60. $('select[name=wash_from_hr1]').val('{{wash.start}}'.split(':')[0]);
  61. $('select[name=wash_from_min1]').val('{{wash.start}}'.split(':')[1]);
  62. $('select[name=wash_to_hr1]').val('{{wash.end}}'.split(':')[0]);
  63. $('select[name=wash_to_min1]').val('{{wash.end}}'.split(':')[1]);
  64. wash_num ++;
  65. }else if(wash_num > 0){
  66. if(wash_num == 1){
  67. var add = document.getElementById('wash_add1');
  68. wash_num ++;
  69. }else{
  70. var add = document.getElementById('wash_add' + i);
  71. };
  72. Add(add);
  73. $('select[name=wash_duration' + i + ']').val('{{wash.duration}}');
  74. $('select[name=' + 'wash_from_hr' + i + ']').val('{{wash.start}}'.split(':')[0]);
  75. $('select[name=' + 'wash_from_min' + i + ']').val('{{wash.start}}'.split(':')[1]);
  76. $('select[name=' + 'wash_to_hr' + i + ']').val('{{wash.end}}'.split(':')[0]);
  77. $('select[name=' + 'wash_to_min' + i + ']').val('{{wash.end}}'.split(':')[1]);
  78. };
  79. {% endfor %}
  80. {% endif %}
  81. //輸送帶1
  82. {% if params.belts1 %}
  83. var belt1_num = 0;
  84. {% for belt1 in params.belts1 %}
  85. if('{{belt1.start}}' != '00:00' && '{{belt1.end}}' != '00:00' && belt1_num == 0){
  86. var belt1 = $(".set-schedule")[2];
  87. var belt1_div = $("#belt1_div");
  88. belt1.style.display = 'none';
  89. belt1_div.css('visibility','visible');
  90. $('select[name=belt1_duration1]').val('{{belt1.duration}}');
  91. $('select[name=belt1_from_hr1]').val('{{belt1.start}}'.split(':')[0]);
  92. $('select[name=belt1_from_min1]').val('{{belt1.start}}'.split(':')[1]);
  93. $('select[name=belt1_to_hr1]').val('{{belt1.end}}'.split(':')[0]);
  94. $('select[name=belt1_to_min1]').val('{{belt1.end}}'.split(':')[1]);
  95. belt1_num ++;
  96. }else if(belt1_num > 0){
  97. if(belt1_num == 1){
  98. var add = document.getElementById('belt1_add1');
  99. belt1_num ++;
  100. }else{
  101. var add = document.getElementById('belt1_add' + i);
  102. };
  103. Add(add);
  104. $('select[name=belt1_duration' + i + ']').val('{{belt1.duration}}');
  105. $('select[name=' + 'belt1_from_hr' + i + ']').val('{{belt1.start}}'.split(':')[0]);
  106. $('select[name=' + 'belt1_from_min' + i + ']').val('{{belt1.start}}'.split(':')[1]);
  107. $('select[name=' + 'belt1_to_hr' + i + ']').val('{{belt1.end}}'.split(':')[0]);
  108. $('select[name=' + 'belt1_to_min' + i + ']').val('{{belt1.end}}'.split(':')[1]);
  109. };
  110. {% endfor %}
  111. {% endif %}
  112. //消毒機
  113. {% if params.disinfects %}
  114. var disinfect_num = 0;
  115. {% for disinfect in params.disinfects %}
  116. if('{{disinfect.start}}' != '00:00' && '{{disinfect.end}}' != '00:00' && disinfect_num == 0){
  117. var di = $(".set-schedule")[3];
  118. var di_div = $("#disinfect_div");
  119. di.style.display = 'none';
  120. di_div.css('visibility','visible');
  121. $('select[name=disinfect_duration1]').val('{{disinfect.duration}}');
  122. $('select[name=disinfect_from_hr1]').val('{{disinfect.start}}'.split(':')[0]);
  123. $('select[name=disinfect_from_min1]').val('{{disinfect.start}}'.split(':')[1]);
  124. $('select[name=disinfect_to_hr1]').val('{{disinfect.end}}'.split(':')[0]);
  125. $('select[name=disinfect_to_min1]').val('{{disinfect.end}}'.split(':')[1]);
  126. disinfect_num ++;
  127. }else if(disinfect_num > 0){
  128. if(disinfect_num == 1){
  129. var add = document.getElementById('disinfect_add1');
  130. disinfect_num ++;
  131. }else{
  132. var add = document.getElementById('disinfect_add' + i);
  133. };
  134. Add(add);
  135. $('select[name=disinfect_duration' + i + ']').val('{{disinfect.duration}}');
  136. $('select[name=' + 'disinfect_from_hr' + i + ']').val('{{disinfect.start}}'.split(':')[0]);
  137. $('select[name=' + 'disinfect_from_min' + i + ']').val('{{disinfect.start}}'.split(':')[1]);
  138. $('select[name=' + 'disinfect_to_hr' + i + ']').val('{{disinfect.end}}'.split(':')[0]);
  139. $('select[name=' + 'disinfect_to_min' + i + ']').val('{{disinfect.end}}'.split(':')[1]);
  140. };
  141. {% endfor %}
  142. {% endif %}
  143. //色選機
  144. {% if params.colors %}
  145. var color_num = 0;
  146. {% for color in params.colors %}
  147. if('{{color.start}}' != '00:00' && '{{color.end}}' != '00:00' && color_num == 0){
  148. var color = $(".set-schedule")[4];
  149. var color_div = $("#color_div");
  150. color.style.display = 'none';
  151. color_div.css('visibility','visible');
  152. $('select[name=color_duration1]').val('{{color.duration}}');
  153. $('select[name=color_from_hr1]').val('{{color.start}}'.split(':')[0]);
  154. $('select[name=color_from_min1]').val('{{color.start}}'.split(':')[1]);
  155. $('select[name=color_to_hr1]').val('{{color.end}}'.split(':')[0]);
  156. $('select[name=color_to_min1]').val('{{color.end}}'.split(':')[1]);
  157. color_num ++;
  158. }else if(color_num > 0){
  159. if(color_num == 1){
  160. var add = document.getElementById('color_add1');
  161. color_num ++;
  162. }else{
  163. var add = document.getElementById('color_add' + i);
  164. };
  165. Add(add);
  166. $('select[name=color_duration' + i + ']').val('{{color.duration}}');
  167. $('select[name=' + 'color_from_hr' + i + ']').val('{{color.start}}'.split(':')[0]);
  168. $('select[name=' + 'color_from_min' + i + ']').val('{{color.start}}'.split(':')[1]);
  169. $('select[name=' + 'color_to_hr' + i + ']').val('{{color.end}}'.split(':')[0]);
  170. $('select[name=' + 'color_to_min' + i + ']').val('{{color.end}}'.split(':')[1]);
  171. };
  172. {% endfor %}
  173. {% endif %}
  174. //輸送帶2
  175. {% if params.belts2 %}
  176. var belt2_num = 0;
  177. {% for belt2 in params.belts2 %}
  178. if('{{belt2.start}}' != '00:00' && '{{belt2.end}}' != '00:00' && belt2_num == 0){
  179. var belt2 = $(".set-schedule")[5];
  180. var belt2_div = $("#belt2_div");
  181. belt2.style.display = 'none';
  182. belt2_div.css('visibility','visible');
  183. $('select[name=belt2_duration1]').val('{{belt2.duration}}');
  184. $('select[name=belt2_from_hr1]').val('{{belt2.start}}'.split(':')[0]);
  185. $('select[name=belt2_from_min1]').val('{{belt2.start}}'.split(':')[1]);
  186. $('select[name=belt2_to_hr1]').val('{{belt2.end}}'.split(':')[0]);
  187. $('select[name=belt2_to_min1]').val('{{belt2.end}}'.split(':')[1]);
  188. belt2_num ++;
  189. }else if(belt2_num > 0){
  190. if(belt2_num == 1){
  191. var add = document.getElementById('belt2_add1');
  192. belt2_num ++;
  193. }else{
  194. var add = document.getElementById('belt2_add' + i);
  195. };
  196. Add(add);
  197. $('select[name=belt2_duration' + i + ']').val('{{belt2.duration}}');
  198. $('select[name=' + 'belt2_from_hr' + i + ']').val('{{belt2.start}}'.split(':')[0]);
  199. $('select[name=' + 'belt2_from_min' + i + ']').val('{{belt2.start}}'.split(':')[1]);
  200. $('select[name=' + 'belt2_to_hr' + i + ']').val('{{belt2.end}}'.split(':')[0]);
  201. $('select[name=' + 'belt2_to_min' + i + ']').val('{{belt2.end}}'.split(':')[1]);
  202. };
  203. {% endfor %}
  204. {% endif %}
  205. //去皮機
  206. {% if params.peelings %}
  207. var peeling_num = 0;
  208. {% for peeling in params.peelings %}
  209. if('{{peeling.start}}' != '00:00' && '{{peeling.end}}' != '00:00' && peeling_num == 0){
  210. var peeled = $(".set-schedule")[6];
  211. var peeled_div = $("#peeled_div");
  212. peeled.style.display = 'none';
  213. peeled_div.css('visibility','visible');
  214. $('select[name=peeled_duration1]').val('{{peeling.duration}}');
  215. $('select[name=peeled_from_hr1]').val('{{peeling.start}}'.split(':')[0]);
  216. $('select[name=peeled_from_min1]').val('{{peeling.start}}'.split(':')[1]);
  217. $('select[name=peeled_to_hr1]').val('{{peeling.end}}'.split(':')[0]);
  218. $('select[name=peeled_to_min1]').val('{{peeling.end}}'.split(':')[1]);
  219. peeling_num ++;
  220. }else if(peeling_num > 0){
  221. if(peeling_num == 1){
  222. var add = document.getElementById('peeled_add1');
  223. peeling_num ++;
  224. }else{
  225. var add = document.getElementById('peeled_add' + i);
  226. };
  227. Add(add);
  228. $('select[name=peeled_duration' + i + ']').val('{{peeling.duration}}');
  229. $('select[name=' + 'peeled_from_hr' + i + ']').val('{{peeling.start}}'.split(':')[0]);
  230. $('select[name=' + 'peeled_from_min' + i + ']').val('{{peeling.start}}'.split(':')[1]);
  231. $('select[name=' + 'peeled_to_hr' + i + ']').val('{{peeling.end}}'.split(':')[0]);
  232. $('select[name=' + 'peeled_to_min' + i + ']').val('{{peeling.end}}'.split(':')[1]);
  233. };
  234. {% endfor %}
  235. {% endif %}
  236. //輸送帶3
  237. {% if params.belts3 %}
  238. var belt3_num = 0;
  239. {% for belt3 in params.belts3 %}
  240. if('{{belt3.start}}' != '00:00' && '{{belt3.end}}' != '00:00' && belt3_num == 0){
  241. var belt3 = $(".set-schedule")[7];
  242. var belt3_div = $("#belt3_div");
  243. belt3.style.display = 'none';
  244. belt3_div.css('visibility','visible');
  245. $('select[name=belt3_duration1]').val('{{belt3.duration}}');
  246. $('select[name=belt3_from_hr1]').val('{{belt3.start}}'.split(':')[0]);
  247. $('select[name=belt3_from_min1]').val('{{belt3.start}}'.split(':')[1]);
  248. $('select[name=belt3_to_hr1]').val('{{belt3.end}}'.split(':')[0]);
  249. $('select[name=belt3_to_min1]').val('{{belt3.end}}'.split(':')[1]);
  250. belt3_num ++;
  251. }else if(belt3_num > 0){
  252. if(belt3_num == 1){
  253. var add = document.getElementById('belt3_add1');
  254. belt3_num ++;
  255. }else{
  256. var add = document.getElementById('belt3_add' + i);
  257. };
  258. Add(add);
  259. $('select[name=belt3_duration' + i + ']').val('{{belt3.duration}}');
  260. $('select[name=' + 'belt3_from_hr' + i + ']').val('{{belt3.start}}'.split(':')[0]);
  261. $('select[name=' + 'belt3_from_min' + i + ']').val('{{belt3.start}}'.split(':')[1]);
  262. $('select[name=' + 'belt3_to_hr' + i + ']').val('{{belt3.end}}'.split(':')[0]);
  263. $('select[name=' + 'belt3_to_min' + i + ']').val('{{belt3.end}}'.split(':')[1]);
  264. };
  265. {% endfor %}
  266. {% endif %}
  267. });
  268. </script>
  269. <script>
  270. var i = 1;
  271. function Cancel(){
  272. window.location.href='/cargo1';
  273. };
  274. function Add(evt){
  275. evt.style.display="none";
  276. i ++;
  277. var div = document.createElement('div');
  278. var from_hr = 'from_hr' + i;
  279. var from_min = 'from_min' + i;
  280. var to_hr = 'to_hr' + i;
  281. var to_min = 'to_min' + i;
  282. var id = evt.getAttribute('id');
  283. var len = id.length;
  284. var add = id.split('_')[0] + '_add' + i;
  285. var del = id.split('_')[0] + '_del' + i;
  286. var html = '';
  287. var begin = id.split('_')[0];
  288. div.className = "col-12 row";
  289. div.style.marginTop = "10px";
  290. html += '<div class="col-xl-5 col-lg-5 col-md-4" style="margin-top:10px;">';
  291. html += '<span>Duration</span>';
  292. if(begin == 'inletValve'){
  293. html += ' <select name="inletValve_duration' + i + '" class="duration">';
  294. }else if(begin == 'wash'){
  295. html += ' <select name="wash_duration' + i + '" class="duration">';
  296. }else if(begin == 'belt1'){
  297. html += ' <select name="belt1_duration' + i + '" class="duration">';
  298. }else if(begin == 'disinfect'){
  299. html += ' <select name="disinfect_duration' + i + '" class="duration">';
  300. }else if(begin == 'color'){
  301. html += ' <select name="color_duration' + i + '" class="duration">';
  302. }else if(begin == 'belt2'){
  303. html += ' <select name="belt2_duration' + i + '" class="duration">';
  304. }else if(begin == 'peeled'){
  305. html += ' <select name="peeled_duration' + i + '" class="duration">';
  306. }else if(begin == 'belt3'){
  307. html += ' <select name="belt3_duration' + i + '" class="duration">';
  308. }else{
  309. };
  310. 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>';
  311. html += '</div>';
  312. html += '<div class="from-to col-xl-7 col-lg-7 col-md-8" style="margin-top:10px;">';
  313. html += '<div>';
  314. html += '<div class="from row">';
  315. html += '<div class="col-3">';
  316. html += '<span>From</span>';
  317. html += '</div>';
  318. html += '<div class="col-xs-6">';
  319. if(id.split('_')[0] == 'inletValve'){
  320. html += '<select name="inletValve_from_hr' + i + '">';
  321. }else if(id.split('_')[0] == 'wash'){
  322. html += '<select name="wash_from_hr' + i + '">';
  323. }else if(id.split('_')[0] == 'belt1'){
  324. html += '<select name="belt1_from_hr' + i + '">';
  325. }else if(id.split('_')[0] == 'disinfect'){
  326. html += '<select name="disinfect_from_hr' + i + '">';
  327. }else if(id.split('_')[0] == 'color'){
  328. html += '<select name="color_from_hr' + i + '">';
  329. }else if(id.split('_')[0] == 'belt2'){
  330. html += '<select name="belt2_from_hr' + i + '">';
  331. }else if(id.split('_')[0] == 'peeled'){
  332. html += '<select name="peeled_from_hr' + i + '">';
  333. }else if(id.split('_')[0] == 'belt3'){
  334. html += '<select name="belt3_from_hr' + i + '">';
  335. }else{
  336. };
  337. for(var hr = 0; hr < 24; hr++){
  338. if(hr < 10){
  339. html += '<option value="0' + hr + '">0' + hr + '</option>';
  340. }else{
  341. html += '<option value="' + hr + '">' + hr + '</option>';
  342. };
  343. };
  344. html += '</select>';
  345. if(id.split('_')[0] == 'inletValve'){
  346. html += ' : <select name="inletValve_from_min' + i + '">';
  347. }else if(id.split('_')[0] == 'wash'){
  348. html += ' : <select name="wash_from_min' + i + '">';
  349. }else if(id.split('_')[0] == 'belt1'){
  350. html += ' : <select name="belt1_from_min' + i + '">';
  351. }else if(id.split('_')[0] == 'disinfect'){
  352. html += ' : <select name="disinfect_from_min' + i + '">';
  353. }else if(id.split('_')[0] == 'color'){
  354. html += ' : <select name="color_from_min' + i + '">';
  355. }else if(id.split('_')[0] == 'belt2'){
  356. html += ' : <select name="belt2_from_min' + i + '">';
  357. }else if(id.split('_')[0] == 'peeled'){
  358. html += ' : <select name="peeled_from_min' + i + '">';
  359. }else if(id.split('_')[0] == 'belt3'){
  360. html += ' : <select name="belt3_from_min' + i + '">';
  361. }else{
  362. };
  363. for(var min = 0; min < 60; min++){
  364. if(min < 10){
  365. html += '<option value="0' + min + '">0' + min + '</option>';
  366. }else{
  367. html += '<option value="' + min + '">' + min + '</option>';
  368. };
  369. };
  370. html += '</select>';
  371. html += '</div>';
  372. html += '<div class="col-xs-3">';
  373. html += '<input id=' + del + ' class="delete" type="button" value="Delete" onclick="Delete(' + del + ');">';
  374. html += '</div>';
  375. html += '</div>';
  376. html += '<div class="to row">';
  377. html += '<div class="col-3">';
  378. html += '<span>To</span>';
  379. html += '</div>';
  380. html += '<div class="col-xs-6">';
  381. if(id.split('_')[0] == 'inletValve'){
  382. html += '<select name="inletValve_to_hr' + i + '">';
  383. }else if(id.split('_')[0] == 'wash'){
  384. html += '<select name="wash_to_hr' + i + '">';
  385. }else if(id.split('_')[0] == 'belt1'){
  386. html += '<select name="belt1_to_hr' + i + '">';
  387. }else if(id.split('_')[0] == 'disinfect'){
  388. html += '<select name="disinfect_to_hr' + i + '">';
  389. }else if(id.split('_')[0] == 'color'){
  390. html += '<select name="color_to_hr' + i + '">';
  391. }else if(id.split('_')[0] == 'belt2'){
  392. html += '<select name="belt2_to_hr' + i + '">';
  393. }else if(id.split('_')[0] == 'peeled'){
  394. html += '<select name="peeled_to_hr' + i + '">';
  395. }else if(id.split('_')[0] == 'belt3'){
  396. html += '<select name="belt3_to_hr' + i + '">';
  397. }else{
  398. };
  399. for(var hr = 0; hr < 24; hr++){
  400. if(hr < 10){
  401. html += '<option value="0' + hr + '">0' + hr + '</option>';
  402. }else{
  403. html += '<option value="' + hr + '">' + hr + '</option>';
  404. };
  405. };
  406. html += '</select>';
  407. if(id.split('_')[0] == 'inletValve'){
  408. html += ' : <select name="inletValve_to_min' + i + '">';
  409. }else if(id.split('_')[0] == 'wash'){
  410. html += ' : <select name="wash_to_min' + i + '">';
  411. }else if(id.split('_')[0] == 'belt1'){
  412. html += ' : <select name="belt1_to_min' + i + '">';
  413. }else if(id.split('_')[0] == 'disinfect'){
  414. html += ' : <select name="disinfect_to_min' + i + '">';
  415. }else if(id.split('_')[0] == 'color'){
  416. html += ' : <select name="color_to_min' + i + '">';
  417. }else if(id.split('_')[0] == 'belt2'){
  418. html += ' : <select name="belt2_to_min' + i + '">';
  419. }else if(id.split('_')[0] == 'peeled'){
  420. html += ' : <select name="peeled_to_min' + i + '">';
  421. }else if(id.split('_')[0] == 'belt3'){
  422. html += ' : <select name="belt3_to_min' + i + '">';
  423. }else{
  424. };
  425. for(var min = 0; min < 60; min++){
  426. if(min < 10){
  427. html += '<option value="0' + min + '">0' + min + '</option>';
  428. }else{
  429. html += '<option value="' + min + '">' + min + '</option>';
  430. };
  431. };
  432. html += '</select><br>';
  433. html += '<input id=' + add + ' class="add" type="button" value="Add" onclick="Add(' + add + ');">';
  434. html += '</div>';
  435. html += '<div class="col-xs-3"></div>';
  436. html += '</div>';
  437. html += '</div>';
  438. html += '</div>';
  439. div.innerHTML = html;
  440. div.style.marginTop = '15px';
  441. div.style.zIndex = '100';
  442. evt.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(div);
  443. };
  444. function Delete(evt){
  445. var id = evt.getAttribute('id');
  446. var add = id.split('_')[0] + '_' + 'add';
  447. var clo_xs_3 = evt.parentNode;
  448. var from = clo_xs_3.parentNode;
  449. var begin = id.split('_')[0];
  450. var div = from.parentNode.parentNode.parentNode;
  451. var next_div = div.nextElementSibling;
  452. var pre_div = div.previousElementSibling;
  453. if(next_div && pre_div == null){
  454. div.parentNode.removeChild(div);
  455. next_div.style.marginTop = '0px';
  456. }else if(next_div && pre_div){
  457. div.parentNode.removeChild(div);
  458. }else if(next_div == null && pre_div == null){
  459. div.parentNode.parentNode.children[1].style.display = 'inline-block';
  460. div.parentNode.style.visibility = 'hidden';
  461. var name = id.split('_')[0];
  462. var from_hr = name + '_from_hr' + 1;
  463. var from_min = name + '_from_min' + 1;
  464. var to_hr = name + '_to_hr' + 1;
  465. var to_min = name + '_to_min' + 1;
  466. $('select[name=' + from_hr + ']').val('00');
  467. $('select[name=' + from_min + ']').val('00');
  468. $('select[name=' + to_hr + ']').val('00');
  469. $('select[name=' + to_min + ']').val('00');
  470. }else{
  471. div.parentNode.removeChild(div);
  472. i --;
  473. add = add + i;
  474. add = document.getElementById(add);
  475. if(add == null){
  476. add = pre_div.children[1].children[0].children[1].children[1].children[3];
  477. };
  478. add.style.display = 'block';
  479. };
  480. };
  481. $(function(){
  482. var inletValve = $(".set-schedule")[0];
  483. var inletValve_div = $("#inletValve_div");
  484. var wash = $(".set-schedule")[1];
  485. var wash_div = $("#wash_div");
  486. var belt1 = $(".set-schedule")[2];
  487. var belt1_div = $("#belt1_div");
  488. var disinfect = $(".set-schedule")[3];
  489. var disinfect_div = $("#disinfect_div");
  490. var color = $(".set-schedule")[4];
  491. var color_div = $("#color_div");
  492. var belt2 = $(".set-schedule")[5];
  493. var belt2_div = $("#belt2_div");
  494. var peeled = $(".set-schedule")[6];
  495. var peeled_div = $("#peeled_div");
  496. var belt3 = $(".set-schedule")[7];
  497. var belt3_div = $("#belt3_div");
  498. inletValve.onclick = function(){
  499. inletValve.style.display = 'none';
  500. inletValve_div.css('visibility','visible');
  501. };
  502. wash.onclick = function(){
  503. wash.style.display = 'none';
  504. wash_div.css('visibility','visible');
  505. };
  506. belt1.onclick = function(){
  507. belt1.style.display = 'none';
  508. belt1_div.css('visibility','visible');
  509. };
  510. disinfect.onclick = function(){
  511. disinfect.style.display = 'none';
  512. disinfect_div.css('visibility','visible');
  513. };
  514. color.onclick = function(){
  515. color.style.display = 'none';
  516. color_div.css('visibility','visible');
  517. };
  518. belt2.onclick = function(){
  519. belt2.style.display = 'none';
  520. belt2_div.css('visibility','visible');
  521. };
  522. peeled.onclick = function(){
  523. peeled.style.display = 'none';
  524. peeled_div.css('visibility','visible');
  525. };
  526. belt3.onclick = function(){
  527. belt3.style.display = 'none';
  528. belt3_div.css('visibility','visible');
  529. };
  530. });
  531. </script>
  532. <style>
  533. body {
  534. margin:0;
  535. }
  536. .navbar-dark .navbar-nav .nav-link {
  537. color: white;
  538. cursor: pointer;
  539. text-decoration:none;
  540. width: 110px;
  541. height: 46px;
  542. }
  543. .nav-top {
  544. line-height:40px;
  545. background-color: #C4C4C4;
  546. }
  547. .website_title{
  548. font-family: Roboto;
  549. font-style: normal;
  550. font-weight: normal;
  551. font-size: 30px;
  552. color: #000000;
  553. }
  554. .navbar-nav > li{
  555. float: none;
  556. display: inline-block;
  557. width: 100px;
  558. margin: 0 auto;
  559. text-align: center;
  560. }
  561. .navbar-nav > li a{
  562. font-size: 20px;
  563. }
  564. .main-page {
  565. margin-top: 200px;
  566. }
  567. .page-title {
  568. font-family: Roboto;
  569. font-style: normal;
  570. font-weight: bold;
  571. font-size: 36px;
  572. color: #000000;
  573. }
  574. form {
  575. margin-top: 70px;
  576. }
  577. .flex {
  578. display: flex;
  579. flex-direction: row;
  580. flex-wrap: wrap;
  581. justify-content: center;
  582. }
  583. .flex span {
  584. font-family: Roboto;
  585. font-style: normal;
  586. font-weight: normal;
  587. font-size: 18px;
  588. margin-left: 20px;
  589. color: #000000;
  590. }
  591. .duration {
  592. background: #FFFFFF;
  593. border: 1px solid #000000;
  594. box-sizing: border-box;
  595. border-radius: 5px;
  596. width: 110px;
  597. height: 40px;
  598. font-size: 20px;
  599. margin-left: 15px;
  600. text-align: center;
  601. }
  602. .from select, .to select {
  603. width: 65px;
  604. height: 35px;
  605. margin-left: 2px;
  606. }
  607. .to {
  608. margin-top: 10px;
  609. margin-left: 10px;
  610. }
  611. .from {
  612. margin-left: 10px;
  613. }
  614. .from > div:first-child, .to > div:first-child {
  615. padding-right: 0px;
  616. text-align: right;
  617. margin-right: 5px;
  618. }
  619. .inletValve, .belt1, .disinfect, .color, .peeled, .wash, .belt2, .belt3 {
  620. height: 400px;
  621. border: 2px solid #E5E5E5;
  622. border-radius: 5px;
  623. margin-top:35px;
  624. margin-left:35px;
  625. }
  626. .item-title {
  627. display: inline-block;
  628. margin-top: 20px;
  629. margin-left: 20px;
  630. font-family: Roboto;
  631. font-style: normal;
  632. font-weight: bold;
  633. font-size: 24px;
  634. color: #000000;
  635. }
  636. .set-schedule {
  637. width: 200px;
  638. height: 45px;
  639. background: #008CBA;
  640. border: 1px solid #CFCFCF;
  641. box-sizing: border-box;
  642. color: #FFFFFF;
  643. border-radius: 5px;
  644. font-size: 17px;
  645. margin-left: 20px;
  646. }
  647. .delete {
  648. background: #E43030;
  649. border: 1px solid #CFCFCF;
  650. box-sizing: border-box;
  651. border-radius: 5px;
  652. margin-left: 5px;
  653. width: 65px;
  654. height: 33px;
  655. font-size: 16px;
  656. text-align: center;
  657. line-height: 16px;
  658. color: #FFFFFF;
  659. }
  660. .add {
  661. background: #008CBA;
  662. border: 1px solid #CFCFCF;
  663. box-sizing: border-box;
  664. border-radius: 5px;
  665. margin-top: 10px;
  666. margin-left: 82px;;
  667. width: 65px;
  668. height: 33px;
  669. font-size: 16px;
  670. text-align: center;
  671. line-height: 16px;
  672. color: #FFFFFF;
  673. }
  674. .page-bottom {
  675. margin-top: 100px;
  676. }
  677. .form-control {
  678. background: #008CBA;
  679. border: 1px solid #CFCFCF;
  680. box-sizing: border-box;
  681. border-radius: 5px;
  682. width: 120px;
  683. height: 58px;
  684. text-align: center;
  685. line-height: 50px;
  686. color: #FFFFFF;
  687. display: inline-block;
  688. }
  689. @media(max-width:373px){
  690. .card {
  691. margin-right: 0px;
  692. }
  693. .inletValve, .wash, .belt1, .disinfect, .color, .belt2, .peeled, .belt3 {
  694. margin-left: 0px;
  695. }
  696. .col {
  697. padding-right: 0px;
  698. padding-left: 0px;
  699. }
  700. .from,.to {
  701. margin-left: 0px;
  702. }
  703. .flex span {
  704. margin-left: 0px;
  705. }
  706. .from select, .to select {
  707. width: 45px;
  708. }
  709. .add {
  710. width: 50px;
  711. margin-left: 62px;
  712. }
  713. .delete {
  714. width: 58px;
  715. }
  716. .col-xs-8:not(:first-child) {
  717. margin-top: 150px;
  718. }
  719. .form-group {
  720. margin-top: 50px;
  721. }
  722. }
  723. @media(max-width:577px){
  724. }
  725. @media(min-width:576px){
  726. }
  727. @media(min-width:768px){
  728. .navbar-nav > li {
  729. margin-left: 0px;
  730. }
  731. .navbar-nav .li-block {
  732. display:none;
  733. }
  734. }
  735. @media(min-width:991px){
  736. .navbar-nav > li {
  737. margin-left: 20px;
  738. }
  739. .navbar-nav .li-block {
  740. display:none;
  741. }
  742. .page-bottom input:last-child {
  743. margin-left: 100px;
  744. }
  745. }
  746. @media(min-width:1200px){
  747. .navbar-nav > li {
  748. margin-left: 50px;
  749. }
  750. .navbar-nav .li-block {
  751. display: inline-block;
  752. width: 100px;
  753. }
  754. .page-bottom input:last-child {
  755. margin-left: 100px;
  756. }
  757. }
  758. @media(min-width:1400px){
  759. .navbar-nav .li-block {
  760. display: inline-block;
  761. width: 200px;
  762. }
  763. .page-bottom input:last-child {
  764. margin-left: 100px;
  765. }
  766. }
  767. @media(min-width:1689px) {
  768. .navbar-nav > li {
  769. margin-left: 50px;
  770. }
  771. .navbar-nav .li-block {
  772. display: inline-block;
  773. width: 500px;
  774. }
  775. .page-bottom input:last-child {
  776. margin-left: 100px;
  777. }
  778. }
  779. </style>
  780. </head>
  781. <body>
  782. <nav class="fixed-top">
  783. <nav class="navbar navbar-expand-md nav-top justify-content-center">
  784. <div>
  785. <span class="website_title">貨櫃1</span>
  786. </div>
  787. </nav>
  788. <nav class="navbar navbar-expand-md bg-dark navbar-dark nav-bottom">
  789. <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
  790. <span class="navbar-toggler-icon"></span>
  791. </button>
  792. <div class="collapse navbar-collapse" id="collapsibleNavbar">
  793. <ul class="navbar-nav">
  794. <li class="nav-item">
  795. <a class="nav-link" href="/">首頁</a>
  796. </li>
  797. <li class="nav-item">
  798. <a class="nav-link" href="#">關於我們</a>
  799. </li>
  800. <li class="nav-item">
  801. <a class="nav-link" href="#">資訊</a>
  802. </li>
  803. <li class="nav-item">
  804. <a class="nav-link" href="#">聯絡方法</a>
  805. </li>
  806. <li class="nav-item">
  807. <a class="nav-link" href="/cargo_list">咖啡貨櫃</a>
  808. </li>
  809. <li class="nav-item">
  810. <a class="nav-link" href="/video">影像串流</a>
  811. </li>
  812. <li class="li-block"></li>
  813. <li class="nav-item">
  814. <a class="nav-link" href="#"><i class="fa fa-user-o"></i> {{params.username}}</a>
  815. </li>
  816. <li class="nav-item">
  817. <a class="nav-link" href="/logout">Logout</a>
  818. </li>
  819. </ul>
  820. </div>
  821. </nav>
  822. </nav>
  823. <div class="main-page">
  824. <form method="post" action="/b_cargo1">
  825. <div class="container-fluid">
  826. <div class="row">
  827. <div class="col flex">
  828. <div class="inletValve col-xl-5 col-lg-5 col-md-5 col-sm-8 col-xs-8">
  829. <h2 class="item-title">進豆閥</h2>
  830. <input class="set-schedule" type="button" value="Set up the schedule">
  831. <br>
  832. <div id="inletValve_div" class="row" style="visibility:hidden;">
  833. <div class="col-12 row">
  834. <div class="col-xl-5 col-lg-5 col-md-4 col-sm-12 col-xs-12" style="margin-top:10px;">
  835. <span>Duration</span>
  836. <select name="inletValve_duration1" class="duration">
  837. <option selected value="30min">30 min</option>
  838. <option value="60min">60 min</option>
  839. <option value="90min">90 min</option>
  840. <option value="120min">120 min</option>
  841. <option value="150min">150 min</option>
  842. </select>
  843. </div>
  844. <div class="from-to col-xl-7 col-lg-7 col-md-8 col-sm-12 col-xs-12" style="margin-top:10px;">
  845. <div>
  846. <div class="from row">
  847. <div class="col-3">
  848. <span>From</span>
  849. </div>
  850. <div class="col-xs-6">
  851. <select name="inletValve_from_hr1">
  852. {% for hr in range(0, 24) %}
  853. {% if hr < 10 %}
  854. <option value="0{{hr}}">0{{hr}}</option>
  855. {% else %}
  856. <option value="{{hr}}">{{hr}}</option>
  857. {% endif %}
  858. {% endfor %}
  859. </select>
  860. : <select name="inletValve_from_min1">
  861. {% for min in range(0, 60) %}
  862. {% if min < 10 %}
  863. <option value="0{{min}}">0{{min}}</option>
  864. {% else %}
  865. <option value="{{min}}">{{min}}</option>
  866. {% endif %}
  867. {% endfor %}
  868. </select>
  869. </div>
  870. <div class="col-xs-3">
  871. <input id="inletValve_del1" class="delete" type="button" value="Delete" onclick="Delete(inletValve_del1);">
  872. </div>
  873. </div>
  874. <div class="to row">
  875. <div class="col-3">
  876. <span>To</span>
  877. </div>
  878. <div class="col-xs-6">
  879. <select name="inletValve_to_hr1">
  880. {% for hr in range(0, 24) %}
  881. {% if hr < 10 %}
  882. <option value="0{{hr}}">0{{hr}}</option>
  883. {% else %}
  884. <option value="{{hr}}">{{hr}}</option>
  885. {% endif %}
  886. {% endfor %}
  887. </select>
  888. : <select name="inletValve_to_min1">
  889. {% for min in range(0, 60) %}
  890. {% if min < 10 %}
  891. <option value="0{{min}}">0{{min}}</option>
  892. {% else %}
  893. <option value="{{min}}">{{min}}</option>
  894. {% endif %}
  895. {% endfor %}
  896. </select><br>
  897. <input id="inletValve_add1" class="add" type="button" value="Add" onclick="Add(inletValve_add1);">
  898. </div>
  899. <div class="col-xs-3"></div>
  900. </div>
  901. </div>
  902. </div>
  903. </div>
  904. </div>
  905. </div>
  906. <div class="wash col-xl-5 col-lg-5 col-md-5 col-sm-8 col-xs-8">
  907. <h2 class="item-title">清洗機</h2>
  908. <input class="set-schedule" type="button" value="Set up the schedule">
  909. <br>
  910. <div id="wash_div" class="row" style="visibility:hidden;">
  911. <div class="col-12 row">
  912. <div class="col-xl-5 col-lg-5 col-md-4 col-sm-12 col-xs-12" style="margin-top:10px;">
  913. <span>Duration</span>
  914. <select name="wash_duration1" class="duration">
  915. <option selected value="30min">30 min</option>
  916. <option value="60min">60 min</option>
  917. <option value="90min">90 min</option>
  918. <option value="120min">120 min</option>
  919. <option value="150min">150 min</option>
  920. </select>
  921. </div>
  922. <div class="from-to col-xl-7 col-lg-7 col-md-8 col-sm-12 col-xs-12" style="margin-top:10px;">
  923. <div>
  924. <div class="from row">
  925. <div class="col-3">
  926. <span>From</span>
  927. </div>
  928. <div class="col-xs-6">
  929. <select name="wash_from_hr1">
  930. {% for hr in range(0, 24) %}
  931. {% if hr < 10 %}
  932. <option value="0{{hr}}">0{{hr}}</option>
  933. {% else %}
  934. <option value="{{hr}}">{{hr}}</option>
  935. {% endif %}
  936. {% endfor %}
  937. </select>
  938. : <select name="wash_from_min1">
  939. {% for min in range(0, 60) %}
  940. {% if min < 10 %}
  941. <option value="0{{min}}">0{{min}}</option>
  942. {% else %}
  943. <option value="{{min}}">{{min}}</option>
  944. {% endif %}
  945. {% endfor %}
  946. </select>
  947. </div>
  948. <div class="col-xs-3">
  949. <input id="wash_del1" class="delete" type="button" value="Delete" onclick="Delete(wash_del1);">
  950. </div>
  951. </div>
  952. <div class="to row">
  953. <div class="col-3">
  954. <span>To</span>
  955. </div>
  956. <div class="col-xs-6">
  957. <select name="wash_to_hr1">
  958. {% for hr in range(0, 24) %}
  959. {% if hr < 10 %}
  960. <option value="0{{hr}}">0{{hr}}</option>
  961. {% else %}
  962. <option value="{{hr}}">{{hr}}</option>
  963. {% endif %}
  964. {% endfor %}
  965. </select>
  966. : <select name="wash_to_min1">
  967. {% for min in range(0, 60) %}
  968. {% if min < 10 %}
  969. <option value="0{{min}}">0{{min}}</option>
  970. {% else %}
  971. <option value="{{min}}">{{min}}</option>
  972. {% endif %}
  973. {% endfor %}
  974. </select><br>
  975. <input id="wash_add1" class="add" type="button" value="Add" onclick="Add(wash_add1);">
  976. </div>
  977. <div class="col-xs-3"></div>
  978. </div>
  979. </div>
  980. </div>
  981. </div>
  982. </div>
  983. </div>
  984. <div class="belt1 col-xl-5 col-lg-5 col-md-5 col-sm-8 col-xs-8">
  985. <h2 class="item-title">輸送帶1</h2>
  986. <input class="set-schedule" type="button" value="Set up the schedule">
  987. <br>
  988. <div id="belt1_div" class="row" style="visibility:hidden;">
  989. <div class="col-12 row">
  990. <div class="col-xl-5 col-lg-5 col-md-4 col-sm-12 col-xs-12" style="margin-top:10px;">
  991. <span>Duration</span>
  992. <select name="belt1_duration1" class="duration">
  993. <option selected value="30min">30 min</option>
  994. <option value="60min">60 min</option>
  995. <option value="90min">90 min</option>
  996. <option value="120min">120 min</option>
  997. <option value="150min">150 min</option>
  998. </select>
  999. </div>
  1000. <div class="from-to col-xl-7 col-lg-7 col-md-8 col-sm-12 col-xs-12" style="margin-top:10px;">
  1001. <div>
  1002. <div class="from row">
  1003. <div class="col-3">
  1004. <span>From</span>
  1005. </div>
  1006. <div class="col-xs-6">
  1007. <select name="belt1_from_hr1">
  1008. {% for hr in range(0, 24) %}
  1009. {% if hr < 10 %}
  1010. <option value="0{{hr}}">0{{hr}}</option>
  1011. {% else %}
  1012. <option value="{{hr}}">{{hr}}</option>
  1013. {% endif %}
  1014. {% endfor %}
  1015. </select>
  1016. : <select name="belt1_from_min1">
  1017. {% for min in range(0, 60) %}
  1018. {% if min < 10 %}
  1019. <option value="0{{min}}">0{{min}}</option>
  1020. {% else %}
  1021. <option value="{{min}}">{{min}}</option>
  1022. {% endif %}
  1023. {% endfor %}
  1024. </select>
  1025. </div>
  1026. <div class="col-xs-3">
  1027. <input id="belt1_del1" class="delete" type="button" value="Delete" onclick="Delete(belt1_del1);">
  1028. </div>
  1029. </div>
  1030. <div class="to row">
  1031. <div class="col-3">
  1032. <span>To</span>
  1033. </div>
  1034. <div class="col-xs-6">
  1035. <select name="belt1_to_hr1">
  1036. {% for hr in range(0, 24) %}
  1037. {% if hr < 10 %}
  1038. <option value="0{{hr}}">0{{hr}}</option>
  1039. {% else %}
  1040. <option value="{{hr}}">{{hr}}</option>
  1041. {% endif %}
  1042. {% endfor %}
  1043. </select>
  1044. : <select name="belt1_to_min1">
  1045. {% for min in range(0, 60) %}
  1046. {% if min < 10 %}
  1047. <option value="0{{min}}">0{{min}}</option>
  1048. {% else %}
  1049. <option value="{{min}}">{{min}}</option>
  1050. {% endif %}
  1051. {% endfor %}
  1052. </select><br>
  1053. <input id="belt1_add1" class="add" type="button" value="Add" onclick="Add(belt1_add1);">
  1054. </div>
  1055. <div class="col-xs-3"></div>
  1056. </div>
  1057. </div>
  1058. </div>
  1059. </div>
  1060. </div>
  1061. </div>
  1062. <div class="disinfect col-xl-5 col-lg-5 col-md-5 col-sm-8 col-xs-8">
  1063. <h2 class="item-title">消毒</h2>
  1064. <input class="set-schedule" type="button" value="Set up the schedule">
  1065. <br>
  1066. <div id="disinfect_div" class="row" style="visibility:hidden;">
  1067. <div class="col-12 row">
  1068. <div class="col-xl-5 col-lg-5 col-md-4 col-sm-12 col-xs-12" style="margin-top:10px;">
  1069. <span>Duration</span>
  1070. <select name="disinfect_duration1" class="duration">
  1071. <option selected value="30min">30 min</option>
  1072. <option value="60min">60 min</option>
  1073. <option value="90min">90 min</option>
  1074. <option value="120min">120 min</option>
  1075. <option value="150min">150 min</option>
  1076. </select>
  1077. </div>
  1078. <div class="from-to col-xl-7 col-lg-7 col-md-8 col-sm-12 col-xs-12" style="margin-top:10px;">
  1079. <div>
  1080. <div class="from row">
  1081. <div class="col-3">
  1082. <span>From</span>
  1083. </div>
  1084. <div class="col-xs-6">
  1085. <select name="disinfect_from_hr1">
  1086. {% for hr in range(0, 24) %}
  1087. {% if hr < 10 %}
  1088. <option value="0{{hr}}">0{{hr}}</option>
  1089. {% else %}
  1090. <option value="{{hr}}">{{hr}}</option>
  1091. {% endif %}
  1092. {% endfor %}
  1093. </select>
  1094. : <select name="disinfect_from_min1">
  1095. {% for min in range(0, 60) %}
  1096. {% if min < 10 %}
  1097. <option value="0{{min}}">0{{min}}</option>
  1098. {% else %}
  1099. <option value="{{min}}">{{min}}</option>
  1100. {% endif %}
  1101. {% endfor %}
  1102. </select>
  1103. </div>
  1104. <div class="col-xs-3">
  1105. <input id="disinfect_del1" class="delete" type="button" value="Delete" onclick="Delete(disinfect_del1);">
  1106. </div>
  1107. </div>
  1108. <div class="to row">
  1109. <div class="col-3">
  1110. <span>To</span>
  1111. </div>
  1112. <div class="col-xs-6">
  1113. <select name="disinfect_to_hr1">
  1114. {% for hr in range(0, 24) %}
  1115. {% if hr < 10 %}
  1116. <option value="0{{hr}}">0{{hr}}</option>
  1117. {% else %}
  1118. <option value="{{hr}}">{{hr}}</option>
  1119. {% endif %}
  1120. {% endfor %}
  1121. </select>
  1122. : <select name="disinfect_to_min1">
  1123. {% for min in range(0, 60) %}
  1124. {% if min < 10 %}
  1125. <option value="0{{min}}">0{{min}}</option>
  1126. {% else %}
  1127. <option value="{{min}}">{{min}}</option>
  1128. {% endif %}
  1129. {% endfor %}
  1130. </select><br>
  1131. <input id="disinfect_add1" class="add" type="button" value="Add" onclick="Add(disinfect_add1);">
  1132. </div>
  1133. <div class="col-xs-3"></div>
  1134. </div>
  1135. </div>
  1136. </div>
  1137. </div>
  1138. </div>
  1139. </div>
  1140. <div class="color col-xl-5 col-lg-5 col-md-5 col-sm-8 col-xs-8">
  1141. <h2 class="item-title">色選機</h2>
  1142. <input class="set-schedule" type="button" value="Set up the schedule">
  1143. <br>
  1144. <div id="color_div" class="row" style="visibility:hidden;">
  1145. <div class="col-12 row">
  1146. <div class="col-xl-5 col-lg-5 col-md-4 col-sm-12 col-xs-12" style="margin-top:10px;">
  1147. <span>Duration</span>
  1148. <select name="color_duration1" class="duration">
  1149. <option selected value="30min">30 min</option>
  1150. <option value="60min">60 min</option>
  1151. <option value="90min">90 min</option>
  1152. <option value="120min">120 min</option>
  1153. <option value="150min">150 min</option>
  1154. </select>
  1155. </div>
  1156. <div class="from-to col-xl-7 col-lg-7 col-md-8 col-sm-12 col-xs-12" style="margin-top:10px;">
  1157. <div>
  1158. <div class="from row">
  1159. <div class="col-3">
  1160. <span>From</span>
  1161. </div>
  1162. <div class="col-xs-6">
  1163. <select name="color_from_hr1">
  1164. {% for hr in range(0, 24) %}
  1165. {% if hr < 10 %}
  1166. <option value="0{{hr}}">0{{hr}}</option>
  1167. {% else %}
  1168. <option value="{{hr}}">{{hr}}</option>
  1169. {% endif %}
  1170. {% endfor %}
  1171. </select>
  1172. : <select name="color_from_min1">
  1173. {% for min in range(0, 60) %}
  1174. {% if min < 10 %}
  1175. <option value="0{{min}}">0{{min}}</option>
  1176. {% else %}
  1177. <option value="{{min}}">{{min}}</option>
  1178. {% endif %}
  1179. {% endfor %}
  1180. </select>
  1181. </div>
  1182. <div class="col-xs-3">
  1183. <input id="color_del1" class="delete" type="button" value="Delete" onclick="Delete(color_del1);">
  1184. </div>
  1185. </div>
  1186. <div class="to row">
  1187. <div class="col-3">
  1188. <span>To</span>
  1189. </div>
  1190. <div class="col-xs-6">
  1191. <select name="color_to_hr1">
  1192. {% for hr in range(0, 24) %}
  1193. {% if hr < 10 %}
  1194. <option value="0{{hr}}">0{{hr}}</option>
  1195. {% else %}
  1196. <option value="{{hr}}">{{hr}}</option>
  1197. {% endif %}
  1198. {% endfor %}
  1199. </select>
  1200. : <select name="color_to_min1">
  1201. {% for min in range(0, 60) %}
  1202. {% if min < 10 %}
  1203. <option value="0{{min}}">0{{min}}</option>
  1204. {% else %}
  1205. <option value="{{min}}">{{min}}</option>
  1206. {% endif %}
  1207. {% endfor %}
  1208. </select><br>
  1209. <input id="color_add1" class="add" type="button" value="Add" onclick="Add(color_add1);">
  1210. </div>
  1211. <div class="col-xs-3"></div>
  1212. </div>
  1213. </div>
  1214. </div>
  1215. </div>
  1216. </div>
  1217. </div>
  1218. <div class="belt2 col-xl-5 col-lg-5 col-md-5 col-sm-8 col-xs-8">
  1219. <h2 class="item-title">輸送帶2</h2>
  1220. <input class="set-schedule" type="button" value="Set up the schedule">
  1221. <br>
  1222. <div id="belt2_div" class="row" style="visibility:hidden;">
  1223. <div class="col-12 row">
  1224. <div class="col-xl-5 col-lg-5 col-md-4 col-sm-12 col-xs-12" style="margin-top:10px;">
  1225. <span>Duration</span>
  1226. <select name="belt2_duration1" class="duration">
  1227. <option selected value="30min">30 min</option>
  1228. <option value="60min">60 min</option>
  1229. <option value="90min">90 min</option>
  1230. <option value="120min">120 min</option>
  1231. <option value="150min">150 min</option>
  1232. </select>
  1233. </div>
  1234. <div class="from-to col-xl-7 col-lg-7 col-md-8 col-sm-12 col-xs-12" style="margin-top:10px;">
  1235. <div>
  1236. <div class="from row">
  1237. <div class="col-3">
  1238. <span>From</span>
  1239. </div>
  1240. <div class="col-xs-6">
  1241. <select name="belt2_from_hr1">
  1242. {% for hr in range(0, 24) %}
  1243. {% if hr < 10 %}
  1244. <option value="0{{hr}}">0{{hr}}</option>
  1245. {% else %}
  1246. <option value="{{hr}}">{{hr}}</option>
  1247. {% endif %}
  1248. {% endfor %}
  1249. </select>
  1250. : <select name="belt2_from_min1">
  1251. {% for min in range(0, 60) %}
  1252. {% if min < 10 %}
  1253. <option value="0{{min}}">0{{min}}</option>
  1254. {% else %}
  1255. <option value="{{min}}">{{min}}</option>
  1256. {% endif %}
  1257. {% endfor %}
  1258. </select>
  1259. </div>
  1260. <div class="col-xs-3">
  1261. <input id="belt2_del1" class="delete" type="button" value="Delete" onclick="Delete(belt2_del1);">
  1262. </div>
  1263. </div>
  1264. <div class="to row">
  1265. <div class="col-3">
  1266. <span>To</span>
  1267. </div>
  1268. <div class="col-xs-6">
  1269. <select name="belt2_to_hr1">
  1270. {% for hr in range(0, 24) %}
  1271. {% if hr < 10 %}
  1272. <option value="0{{hr}}">0{{hr}}</option>
  1273. {% else %}
  1274. <option value="{{hr}}">{{hr}}</option>
  1275. {% endif %}
  1276. {% endfor %}
  1277. </select>
  1278. : <select name="belt2_to_min1">
  1279. {% for min in range(0, 60) %}
  1280. {% if min < 10 %}
  1281. <option value="0{{min}}">0{{min}}</option>
  1282. {% else %}
  1283. <option value="{{min}}">{{min}}</option>
  1284. {% endif %}
  1285. {% endfor %}
  1286. </select><br>
  1287. <input id="belt2_add1" class="add" type="button" value="Add" onclick="Add(belt2_add1);">
  1288. </div>
  1289. <div class="col-xs-3"></div>
  1290. </div>
  1291. </div>
  1292. </div>
  1293. </div>
  1294. </div>
  1295. </div>
  1296. <div class="peeled col-xl-5 col-lg-5 col-md-5 col-sm-8 col-xs-8">
  1297. <h2 class="item-title">去皮機</h2>
  1298. <input class="set-schedule" type="button" value="Set up the schedule">
  1299. <br>
  1300. <div id="peeled_div" class="row" style="visibility:hidden;">
  1301. <div class="col-12 row">
  1302. <div class="col-xl-5 col-lg-5 col-md-4 col-sm-12 col-xs-12" style="margin-top:10px;">
  1303. <span>Duration</span>
  1304. <select name="peeled_duration1" class="duration">
  1305. <option selected value="30min">30 min</option>
  1306. <option value="60min">60 min</option>
  1307. <option value="90min">90 min</option>
  1308. <option value="120min">120 min</option>
  1309. <option value="150min">150 min</option>
  1310. </select>
  1311. </div>
  1312. <div class="from-to col-xl-7 col-lg-7 col-md-8 col-sm-12 col-xs-12" style="margin-top:10px;">
  1313. <div>
  1314. <div class="from row">
  1315. <div class="col-3">
  1316. <span>From</span>
  1317. </div>
  1318. <div class="col-xs-6">
  1319. <select name="peeled_from_hr1">
  1320. {% for hr in range(0, 24) %}
  1321. {% if hr < 10 %}
  1322. <option value="0{{hr}}">0{{hr}}</option>
  1323. {% else %}
  1324. <option value="{{hr}}">{{hr}}</option>
  1325. {% endif %}
  1326. {% endfor %}
  1327. </select>
  1328. : <select name="peeled_from_min1">
  1329. {% for min in range(0, 60) %}
  1330. {% if min < 10 %}
  1331. <option value="0{{min}}">0{{min}}</option>
  1332. {% else %}
  1333. <option value="{{min}}">{{min}}</option>
  1334. {% endif %}
  1335. {% endfor %}
  1336. </select>
  1337. </div>
  1338. <div class="col-xs-3">
  1339. <input id="peeled_del1" class="delete" type="button" value="Delete" onclick="Delete(peeled_del1);">
  1340. </div>
  1341. </div>
  1342. <div class="to row">
  1343. <div class="col-3">
  1344. <span>To</span>
  1345. </div>
  1346. <div class="col-xs-6">
  1347. <select name="peeled_to_hr1">
  1348. {% for hr in range(0, 24) %}
  1349. {% if hr < 10 %}
  1350. <option value="0{{hr}}">0{{hr}}</option>
  1351. {% else %}
  1352. <option value="{{hr}}">{{hr}}</option>
  1353. {% endif %}
  1354. {% endfor %}
  1355. </select>
  1356. : <select name="peeled_to_min1">
  1357. {% for min in range(0, 60) %}
  1358. {% if min < 10 %}
  1359. <option value="0{{min}}">0{{min}}</option>
  1360. {% else %}
  1361. <option value="{{min}}">{{min}}</option>
  1362. {% endif %}
  1363. {% endfor %}
  1364. </select><br>
  1365. <input id="peeled_add1" class="add" type="button" value="Add" onclick="Add(peeled_add1);">
  1366. </div>
  1367. <div class="col-xs-3"></div>
  1368. </div>
  1369. </div>
  1370. </div>
  1371. </div>
  1372. </div>
  1373. </div>
  1374. <div class="belt3 col-xl-5 col-lg-5 col-md-5 col-sm-8 col-xs-8">
  1375. <h2 class="item-title">輸送帶3</h2>
  1376. <input class="set-schedule" type="button" value="Set up the schedule">
  1377. <br>
  1378. <div id="belt3_div" class="row" style="visibility:hidden;">
  1379. <div class="col-12 row">
  1380. <div class="col-xl-5 col-lg-5 col-md-4 col-sm-12 col-xs-12" style="margin-top:10px;">
  1381. <span>Duration</span>
  1382. <select name="belt3_duration1" class="duration">
  1383. <option selected value="30min">30 min</option>
  1384. <option value="60min">60 min</option>
  1385. <option value="90min">90 min</option>
  1386. <option value="120min">120 min</option>
  1387. <option value="150min">150 min</option>
  1388. </select>
  1389. </div>
  1390. <div class="from-to col-xl-7 col-lg-7 col-md-8 col-sm-12 col-xs-12" style="margin-top:10px;">
  1391. <div>
  1392. <div class="from row">
  1393. <div class="col-3">
  1394. <span>From</span>
  1395. </div>
  1396. <div class="col-xs-6">
  1397. <select name="belt3_from_hr1">
  1398. {% for hr in range(0, 24) %}
  1399. {% if hr < 10 %}
  1400. <option value="0{{hr}}">0{{hr}}</option>
  1401. {% else %}
  1402. <option value="{{hr}}">{{hr}}</option>
  1403. {% endif %}
  1404. {% endfor %}
  1405. </select>
  1406. : <select name="belt3_from_min1">
  1407. {% for min in range(0, 60) %}
  1408. {% if min < 10 %}
  1409. <option value="0{{min}}">0{{min}}</option>
  1410. {% else %}
  1411. <option value="{{min}}">{{min}}</option>
  1412. {% endif %}
  1413. {% endfor %}
  1414. </select>
  1415. </div>
  1416. <div class="col-xs-3">
  1417. <input id="belt3_del1" class="delete" type="button" value="Delete" onclick="Delete(belt3_del1);">
  1418. </div>
  1419. </div>
  1420. <div class="to row">
  1421. <div class="col-3">
  1422. <span>To</span>
  1423. </div>
  1424. <div class="col-xs-6">
  1425. <select name="belt3_to_hr1">
  1426. {% for hr in range(0, 24) %}
  1427. {% if hr < 10 %}
  1428. <option value="0{{hr}}">0{{hr}}</option>
  1429. {% else %}
  1430. <option value="{{hr}}">{{hr}}</option>
  1431. {% endif %}
  1432. {% endfor %}
  1433. </select>
  1434. : <select name="belt3_to_min1">
  1435. {% for min in range(0, 60) %}
  1436. {% if min < 10 %}
  1437. <option value="0{{min}}">0{{min}}</option>
  1438. {% else %}
  1439. <option value="{{min}}">{{min}}</option>
  1440. {% endif %}
  1441. {% endfor %}
  1442. </select><br>
  1443. <input id="belt3_add1" class="add" type="button" value="Add" onclick="Add(belt3_add1);">
  1444. </div>
  1445. <div class="col-xs-3"></div>
  1446. </div>
  1447. </div>
  1448. </div>
  1449. </div>
  1450. </div>
  1451. </div>
  1452. </div>
  1453. </div>
  1454. </div>
  1455. <div class="row page-bottom">
  1456. <div class="col"></div>
  1457. <div class="col-xl-4 col-lg-6 col-md-8 col-sm-10 col-xs-10" style="text-align:center;">
  1458. <div class="form-group">
  1459. <input type="button" class="form-control" value="Cancel" onclick="Cancel();">
  1460. <input type="submit" class="form-control" value="Confirm">
  1461. </div>
  1462. </div>
  1463. <div class="col"></div>
  1464. </div>
  1465. </form>
  1466. </div>
  1467. </body>
  1468. </html>