cargo2_schedule.html 87 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597
  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.bacterias %}
  21. var bacteria_num = 0;
  22. {% for bacteria in params.bacterias %}
  23. if('{{bacteria.start}}' != '00:00' && '{{bacteria.end}}' != '00:00' && bacteria_num == 0){
  24. var bac = $(".set-schedule")[0];
  25. var bac_div = $("#bacteria_div");
  26. bac.style.display = 'none';
  27. bac_div.css('visibility','visible');
  28. $('select[name=bacteria_duration1]').val('{{bacteria.duration}}');
  29. $('select[name=bacteria_from_hr1]').val('{{bacteria.start}}'.split(':')[0]);
  30. $('select[name=bacteria_from_min1]').val('{{bacteria.start}}'.split(':')[1]);
  31. $('select[name=bacteria_to_hr1]').val('{{bacteria.end}}'.split(':')[0]);
  32. $('select[name=bacteria_to_min1]').val('{{bacteria.end}}'.split(':')[1]);
  33. bacteria_num ++;
  34. }else if(bacteria_num > 0){
  35. if(bacteria_num == 1){
  36. var add = document.getElementById('bacteria_add1');
  37. bacteria_num ++;
  38. }else{
  39. var add = document.getElementById('bacteria_add' + i);
  40. };
  41. Add(add);
  42. $('select[name=bacteria_duration' + i + ']').val('{{bacteria.duration}}');
  43. $('select[name=' + 'bacteria_from_hr' + i + ']').val('{{bacteria.start}}'.split(':')[0]);
  44. $('select[name=' + 'bacteria_from_min' + i + ']').val('{{bacteria.start}}'.split(':')[1]);
  45. $('select[name=' + 'bacteria_to_hr' + i + ']').val('{{bacteria.end}}'.split(':')[0]);
  46. $('select[name=' + 'bacteria_to_min' + i + ']').val('{{bacteria.end}}'.split(':')[1]);
  47. };
  48. {% endfor %}
  49. {% endif %}
  50. //消毒
  51. {% if params.disinfects %}
  52. var disinfect_num = 0;
  53. {% for disinfect in params.disinfects %}
  54. if('{{disinfect.start}}' != '00:00' && '{{disinfect.end}}' != '00:00' && disinfect_num == 0){
  55. var di = $(".set-schedule")[1];
  56. var di_div = $("#disinfect_div");
  57. di.style.display = 'none';
  58. di_div.css('visibility','visible');
  59. $('select[name=disinfect_duration1]').val('{{disinfect.duration}}');
  60. $('select[name=disinfect_from_hr1]').val('{{disinfect.start}}'.split(':')[0]);
  61. $('select[name=disinfect_from_min1]').val('{{disinfect.start}}'.split(':')[1]);
  62. $('select[name=disinfect_to_hr1]').val('{{disinfect.end}}'.split(':')[0]);
  63. $('select[name=disinfect_to_min1]').val('{{disinfect.end}}'.split(':')[1]);
  64. disinfect_num ++;
  65. }else if(disinfect_num > 0){
  66. if(disinfect_num == 1){
  67. var add = document.getElementById('disinfect_add1');
  68. disinfect_num ++;
  69. }else{
  70. var add = document.getElementById('disinfect_add' + i);
  71. };
  72. Add(add);
  73. $('select[name=disinfect_duration' + i + ']').val('{{disinfect.duration}}');
  74. $('select[name=' + 'disinfect_from_hr' + i + ']').val('{{disinfect.start}}'.split(':')[0]);
  75. $('select[name=' + 'disinfect_from_min' + i + ']').val('{{disinfect.start}}'.split(':')[1]);
  76. $('select[name=' + 'disinfect_to_hr' + i + ']').val('{{disinfect.end}}'.split(':')[0]);
  77. $('select[name=' + 'disinfect_to_min' + i + ']').val('{{disinfect.end}}'.split(':')[1]);
  78. };
  79. {% endfor %}
  80. {% endif %}
  81. //加熱
  82. {% if params.heatings %}
  83. var heating_num = 0;
  84. {% for heating in params.heatings %}
  85. if('{{heating.start}}' != '00:00' && '{{heating.end}}' != '00:00' && heating_num == 0){
  86. var heat = $(".set-schedule")[2];
  87. var heat_div = $("#heating_div");
  88. heat.style.display = 'none';
  89. heat_div.css('visibility','visible');
  90. $('select[name=heating_duration1]').val('{{heating.duration}}');
  91. $('select[name=heating_from_hr1]').val('{{heating.start}}'.split(':')[0]);
  92. $('select[name=heating_from_min1]').val('{{heating.start}}'.split(':')[1]);
  93. $('select[name=heating_to_hr1]').val('{{heating.end}}'.split(':')[0]);
  94. $('select[name=heating_to_min1]').val('{{heating.end}}'.split(':')[1]);
  95. heating_num ++;
  96. }else if(heating_num > 0){
  97. if(heating_num == 1){
  98. var add = document.getElementById('heating_add1');
  99. heating_num ++;
  100. }else{
  101. var add = document.getElementById('heating_add' + i);
  102. };
  103. Add(add);
  104. $('select[name=heating_duration' + i + ']').val('{{heating.duration}}');
  105. $('select[name=' + 'heating_from_hr' + i + ']').val('{{heating.start}}'.split(':')[0]);
  106. $('select[name=' + 'heating_from_min' + i + ']').val('{{heating.start}}'.split(':')[1]);
  107. $('select[name=' + 'heating_to_hr' + i + ']').val('{{heating.end}}'.split(':')[0]);
  108. $('select[name=' + 'heating_to_min' + i + ']').val('{{heating.end}}'.split(':')[1]);
  109. };
  110. {% endfor %}
  111. {% endif %}
  112. //攪拌
  113. {% if params.stirs %}
  114. var stir_num = 0;
  115. {% for stir in params.stirs %}
  116. if('{{stir.start}}' != '00:00' && '{{stir.end}}' != '00:00' && stir_num == 0){
  117. var stir = $(".set-schedule")[3];
  118. var stir_div = $("#stir_div");
  119. stir.style.display = 'none';
  120. stir_div.css('visibility','visible');
  121. $('select[name=stir_duration1]').val('{{stir.duration}}');
  122. $('select[name=stir_from_hr1]').val('{{stir.start}}'.split(':')[0]);
  123. $('select[name=stir_from_min1]').val('{{stir.start}}'.split(':')[1]);
  124. $('select[name=stir_to_hr1]').val('{{stir.end}}'.split(':')[0]);
  125. $('select[name=stir_to_min1]').val('{{stir.end}}'.split(':')[1]);
  126. stir_num ++;
  127. }else if(stir_num > 0){
  128. if(stir_num == 1){
  129. var add = document.getElementById('stir_add1');
  130. stir_num ++;
  131. }else{
  132. var add = document.getElementById('stir_add' + i);
  133. };
  134. Add(add);
  135. $('select[name=stir_duration' + i + ']').val('{{stir.duration}}');
  136. $('select[name=' + 'stir_from_hr' + i + ']').val('{{stir.start}}'.split(':')[0]);
  137. $('select[name=' + 'stir_from_min' + i + ']').val('{{stir.start}}'.split(':')[1]);
  138. $('select[name=' + 'stir_to_hr' + i + ']').val('{{stir.end}}'.split(':')[0]);
  139. $('select[name=' + 'stir_to_min' + i + ']').val('{{stir.end}}'.split(':')[1]);
  140. };
  141. {% endfor %}
  142. {% endif %}
  143. //注水
  144. {% if params.waters %}
  145. var water_num = 0;
  146. {% for water in params.waters %}
  147. if('{{water.start}}' != '00:00' && '{{water.end}}' != '00:00' && water_num == 0){
  148. var water = $(".set-schedule")[4];
  149. var water_div = $("#water_div");
  150. water.style.display = 'none';
  151. water_div.css('visibility','visible');
  152. $('select[name=water_duration1]').val('{{water.duration}}');
  153. $('select[name=water_from_hr1]').val('{{water.start}}'.split(':')[0]);
  154. $('select[name=water_from_min1]').val('{{water.start}}'.split(':')[1]);
  155. $('select[name=water_to_hr1]').val('{{water.end}}'.split(':')[0]);
  156. $('select[name=water_to_min1]').val('{{water.end}}'.split(':')[1]);
  157. water_num ++;
  158. }else if(water_num > 0){
  159. if(water_num == 1){
  160. var add = document.getElementById('water_add1');
  161. water_num ++;
  162. }else{
  163. var add = document.getElementById('water_add' + i);
  164. };
  165. Add(add);
  166. $('select[name=water_duration' + i + ']').val('{{water.duration}}');
  167. $('select[name=' + 'water_from_hr' + i + ']').val('{{water.start}}'.split(':')[0]);
  168. $('select[name=' + 'water_from_min' + i + ']').val('{{water.start}}'.split(':')[1]);
  169. $('select[name=' + 'water_to_hr' + i + ']').val('{{water.end}}'.split(':')[0]);
  170. $('select[name=' + 'water_to_min' + i + ']').val('{{water.end}}'.split(':')[1]);
  171. };
  172. {% endfor %}
  173. {% endif %}
  174. //開上閥
  175. {% if params.tops %}
  176. var top_num = 0;
  177. {% for top in params.tops %}
  178. if('{{top.start}}' != '00:00' && '{{top.end}}' != '00:00' && top_num == 0){
  179. var h_valve = $(".set-schedule")[5];
  180. var h_valve_div = $("#highValve_div");
  181. h_valve.style.display = 'none';
  182. h_valve_div.css('visibility','visible');
  183. $('select[name=highValve_duration1]').val('{{top.duration}}');
  184. $('select[name=highValve_from_hr1]').val('{{top.start}}'.split(':')[0]);
  185. $('select[name=highValve_from_min1]').val('{{top.start}}'.split(':')[1]);
  186. $('select[name=highValve_to_hr1]').val('{{top.end}}'.split(':')[0]);
  187. $('select[name=highValve_to_min1]').val('{{top.end}}'.split(':')[1]);
  188. top_num ++;
  189. }else if(top_num > 0){
  190. if(top_num == 1){
  191. var add = document.getElementById('highValve_add1');
  192. top_num ++;
  193. }else{
  194. var add = document.getElementById('highValve_add' + i);
  195. };
  196. Add(add);
  197. $('select[name=highValve_duration' + i + ']').val('{{top.duration}}');
  198. $('select[name=' + 'highValve_from_hr' + i + ']').val('{{top.start}}'.split(':')[0]);
  199. $('select[name=' + 'highValve_from_min' + i + ']').val('{{top.start}}'.split(':')[1]);
  200. $('select[name=' + 'highValve_to_hr' + i + ']').val('{{top.end}}'.split(':')[0]);
  201. $('select[name=' + 'highValve_to_min' + i + ']').val('{{top.end}}'.split(':')[1]);
  202. };
  203. {% endfor %}
  204. {% endif %}
  205. //開下閥
  206. {% if params.bottoms %}
  207. var bottom_num = 0;
  208. {% for bottom in params.bottoms %}
  209. if('{{bottom.start}}' != '00:00' && '{{bottom.end}}' != '00:00' && bottom_num == 0){
  210. var l_valve = $(".set-schedule")[6];
  211. var l_valve_div = $("#lowValve_div");
  212. l_valve.style.display = 'none';
  213. l_valve_div.css('visibility','visible');
  214. $('select[name=lowValve_duration1]').val('{{bottom.duration}}');
  215. $('select[name=lowValve_from_hr1]').val('{{bottom.start}}'.split(':')[0]);
  216. $('select[name=lowValve_from_min1]').val('{{bottom.start}}'.split(':')[1]);
  217. $('select[name=lowValve_to_hr1]').val('{{bottom.end}}'.split(':')[0]);
  218. $('select[name=lowValve_to_min1]').val('{{bottom.end}}'.split(':')[1]);
  219. bottom_num ++;
  220. }else if(bottom_num > 0){
  221. if(bottom_num == 1){
  222. var add = document.getElementById('lowValve_add1');
  223. bottom_num ++;
  224. }else{
  225. var add = document.getElementById('lowValve_add' + i);
  226. };
  227. Add(add);
  228. $('select[name=lowValve_duration' + i + ']').val('{{bottom.duration}}');
  229. $('select[name=' + 'lowValve_from_hr' + i + ']').val('{{bottom.start}}'.split(':')[0]);
  230. $('select[name=' + 'lowValve_from_min' + i + ']').val('{{bottom.start}}'.split(':')[1]);
  231. $('select[name=' + 'lowValve_to_hr' + i + ']').val('{{bottom.end}}'.split(':')[0]);
  232. $('select[name=' + 'lowValve_to_min' + i + ']').val('{{bottom.end}}'.split(':')[1]);
  233. };
  234. {% endfor %}
  235. {% endif %}
  236. //溫度
  237. {% if params.tems %}
  238. var tem_num = 0;
  239. {% for tem in params.tems %}
  240. if('{{tem.start}}' != '00:00' && '{{tem.end}}' != '00:00' && tem_num == 0){
  241. var tem = $(".set-schedule")[7];
  242. var tem_div = $("#tem_div");
  243. tem.style.display = 'none';
  244. tem_div.css('visibility','visible');
  245. $('select[name=tem_duration1]').val('{{tem.duration}}');
  246. $('select[name=tem_from_hr1]').val('{{tem.start}}'.split(':')[0]);
  247. $('select[name=tem_from_min1]').val('{{tem.start}}'.split(':')[1]);
  248. $('select[name=tem_to_hr1]').val('{{tem.end}}'.split(':')[0]);
  249. $('select[name=tem_to_min1]').val('{{tem.end}}'.split(':')[1]);
  250. tem_num ++;
  251. }else if(tem_num > 0){
  252. if(tem_num == 1){
  253. var add = document.getElementById('tem_add1');
  254. tem_num ++;
  255. }else{
  256. var add = document.getElementById('tem_add' + i);
  257. };
  258. Add(add);
  259. $('select[name=tem_duration' + i + ']').val('{{tem.duration}}');
  260. $('select[name=' + 'tem_from_hr' + i + ']').val('{{tem.start}}'.split(':')[0]);
  261. $('select[name=' + 'tem_from_min' + i + ']').val('{{tem.start}}'.split(':')[1]);
  262. $('select[name=' + 'tem_to_hr' + i + ']').val('{{tem.end}}'.split(':')[0]);
  263. $('select[name=' + 'tem_to_min' + i + ']').val('{{tem.end}}'.split(':')[1]);
  264. };
  265. {% endfor %}
  266. {% endif %}
  267. });
  268. </script>
  269. <script>
  270. var i = 1;
  271. function Cancel(){
  272. window.location.href='/b_cargo2';
  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 == 'bacteria'){
  293. html += ' <select name="bacteria_duration' + i + '" class="duration">';
  294. }else if(begin == 'disinfect'){
  295. html += ' <select name="disinfect_duration' + i + '" class="duration">';
  296. }else if(begin == 'heating'){
  297. html += ' <select name="heating_duration' + i + '" class="duration">';
  298. }else if(begin == 'stir'){
  299. html += ' <select name="stir_duration' + i + '" class="duration">';
  300. }else if(begin == 'water'){
  301. html += ' <select name="water_duration' + i + '" class="duration">';
  302. }else if(begin == 'highValve'){
  303. html += ' <select name="highValve_duration' + i + '" class="duration">';
  304. }else if(begin == 'lowValve'){
  305. html += ' <select name="lowValve_duration' + i + '" class="duration">';
  306. }else if(begin == 'tem'){
  307. html += ' <select name="tem_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] == 'bacteria'){
  320. html += '<select name="bacteria_from_hr' + i + '">';
  321. }else if(id.split('_')[0] == 'disinfect'){
  322. html += '<select name="disinfect_from_hr' + i + '">';
  323. }else if(id.split('_')[0] == 'heating'){
  324. html += '<select name="heating_from_hr' + i + '">';
  325. }else if(id.split('_')[0] == 'stir'){
  326. html += '<select name="stir_from_hr' + i + '">';
  327. }else if(id.split('_')[0] == 'water'){
  328. html += '<select name="water_from_hr' + i + '">';
  329. }else if(id.split('_')[0] == 'highValve'){
  330. html += '<select name="highValve_from_hr' + i + '">';
  331. }else if(id.split('_')[0] == 'lowValve'){
  332. html += '<select name="lowValve_from_hr' + i + '">';
  333. }else if(id.split('_')[0] == 'tem'){
  334. html += '<select name="tem_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] == 'bacteria'){
  346. html += ' : <select name="bacteria_from_min' + i + '">';
  347. }else if(id.split('_')[0] == 'disinfect'){
  348. html += ' : <select name="disinfect_from_min' + i + '">';
  349. }else if(id.split('_')[0] == 'heating'){
  350. html += ' : <select name="heating_from_min' + i + '">';
  351. }else if(id.split('_')[0] == 'stir'){
  352. html += ' : <select name="stir_from_min' + i + '">';
  353. }else if(id.split('_')[0] == 'water'){
  354. html += ' : <select name="water_from_min' + i + '">';
  355. }else if(id.split('_')[0] == 'highValve'){
  356. html += ' : <select name="highValve_from_min' + i + '">';
  357. }else if(id.split('_')[0] == 'lowValve'){
  358. html += ' : <select name="lowValve_from_min' + i + '">';
  359. }else if(id.split('_')[0] == 'tem'){
  360. html += ' : <select name="tem_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] == 'bacteria'){
  382. html += '<select name="bacteria_to_hr' + i + '">';
  383. }else if(id.split('_')[0] == 'disinfect'){
  384. html += '<select name="disinfect_to_hr' + i + '">';
  385. }else if(id.split('_')[0] == 'heating'){
  386. html += '<select name="heating_to_hr' + i + '">';
  387. }else if(id.split('_')[0] == 'stir'){
  388. html += '<select name="stir_to_hr' + i + '">';
  389. }else if(id.split('_')[0] == 'water'){
  390. html += '<select name="water_to_hr' + i + '">';
  391. }else if(id.split('_')[0] == 'highValve'){
  392. html += '<select name="highValve_to_hr' + i + '">';
  393. }else if(id.split('_')[0] == 'lowValve'){
  394. html += '<select name="lowValve_to_hr' + i + '">';
  395. }else if(id.split('_')[0] == 'tem'){
  396. html += '<select name="tem_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] == 'bacteria'){
  408. html += ' : <select name="bacteria_to_min' + i + '">';
  409. }else if(id.split('_')[0] == 'disinfect'){
  410. html += ' : <select name="disinfect_to_min' + i + '">';
  411. }else if(id.split('_')[0] == 'heating'){
  412. html += ' : <select name="heating_to_min' + i + '">';
  413. }else if(id.split('_')[0] == 'stir'){
  414. html += ' : <select name="stir_to_min' + i + '">';
  415. }else if(id.split('_')[0] == 'water'){
  416. html += ' : <select name="water_to_min' + i + '">';
  417. }else if(id.split('_')[0] == 'highValve'){
  418. html += ' : <select name="highValve_to_min' + i + '">';
  419. }else if(id.split('_')[0] == 'lowValve'){
  420. html += ' : <select name="lowValve_to_min' + i + '">';
  421. }else if(id.split('_')[0] == 'tem'){
  422. html += ' : <select name="tem_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 Cancel(){
  482. window.location.href='/cargo2';
  483. };
  484. $(function(){
  485. var bacteria = $(".set-schedule")[0];
  486. var bacteria_div = $("#bacteria_div");
  487. var disinfect = $(".set-schedule")[1];
  488. var disinfect_div = $("#disinfect_div");
  489. var heating = $(".set-schedule")[2];
  490. var heating_div = $("#heating_div");
  491. var stir = $(".set-schedule")[3];
  492. var stir_div = $("#stir_div");
  493. var water = $(".set-schedule")[4];
  494. var water_div = $("#water_div");
  495. var highValve = $(".set-schedule")[5];
  496. var highValve_div = $("#highValve_div");
  497. var lowValve = $(".set-schedule")[6];
  498. var lowValve_div = $("#lowValve_div");
  499. var tem = $(".set-schedule")[7];
  500. var tem_div = $("#tem_div");
  501. bacteria.onclick = function(){
  502. bacteria.style.display = 'none';
  503. bacteria_div.css('visibility','visible');
  504. };
  505. disinfect.onclick = function(){
  506. disinfect.style.display = 'none';
  507. disinfect_div.css('visibility','visible');
  508. };
  509. heating.onclick = function(){
  510. heating.style.display = 'none';
  511. heating_div.css('visibility','visible');
  512. };
  513. stir.onclick = function(){
  514. stir.style.display = 'none';
  515. stir_div.css('visibility','visible');
  516. };
  517. water.onclick = function(){
  518. water.style.display = 'none';
  519. water_div.css('visibility','visible');
  520. };
  521. highValve.onclick = function(){
  522. highValve.style.display = 'none';
  523. highValve_div.css('visibility','visible');
  524. };
  525. lowValve.onclick = function(){
  526. lowValve.style.display = 'none';
  527. lowValve_div.css('visibility','visible');
  528. };
  529. tem.onclick = function(){
  530. tem.style.display = 'none';
  531. tem_div.css('visibility','visible');
  532. };
  533. });
  534. </script>
  535. <style>
  536. body {
  537. margin:0;
  538. }
  539. .navbar-dark .navbar-nav .nav-link {
  540. color: white;
  541. cursor: pointer;
  542. text-decoration:none;
  543. width: 110px;
  544. height: 46px;
  545. }
  546. .nav-top {
  547. line-height:40px;
  548. background-color: #C4C4C4;
  549. }
  550. .website_title{
  551. font-family: Roboto;
  552. font-style: normal;
  553. font-weight: normal;
  554. font-size: 30px;
  555. color: #000000;
  556. }
  557. .navbar-nav > li{
  558. float: none;
  559. display: inline-block;
  560. width: 100px;
  561. margin: 0 auto;
  562. text-align: center;
  563. }
  564. .navbar-nav > li a{
  565. font-size: 20px;
  566. }
  567. .main-page {
  568. margin-top: 200px;
  569. }
  570. .page-title {
  571. font-family: Roboto;
  572. font-style: normal;
  573. font-weight: bold;
  574. font-size: 36px;
  575. color: #000000;
  576. }
  577. form {
  578. margin-top: 70px;
  579. }
  580. .flex {
  581. display: flex;
  582. flex-direction: row;
  583. flex-wrap: wrap;
  584. justify-content: center;
  585. }
  586. .flex span {
  587. font-family: Roboto;
  588. font-style: normal;
  589. font-weight: normal;
  590. font-size: 18px;
  591. margin-left: 20px;
  592. color: #000000;
  593. }
  594. .duration {
  595. background: #FFFFFF;
  596. border: 1px solid #000000;
  597. box-sizing: border-box;
  598. border-radius: 5px;
  599. width: 110px;
  600. height: 40px;
  601. font-size: 20px;
  602. margin-left: 15px;
  603. text-align: center;
  604. }
  605. .from select, .to select {
  606. width: 65px;
  607. height: 35px;
  608. margin-left: 2px;
  609. }
  610. .to {
  611. margin-top: 10px;
  612. margin-left: 10px;
  613. }
  614. .from {
  615. margin-left: 10px;
  616. }
  617. .from > div:first-child, .to > div:first-child {
  618. padding-right: 0px;
  619. text-align: right;
  620. margin-right: 5px;
  621. }
  622. .bacteria, .disinfect, .heating, .stir, .water, .highValve, .lowValve, .tem {
  623. height: 400px;
  624. border: 2px solid #E5E5E5;
  625. border-radius: 5px;
  626. margin-top:35px;
  627. margin-left:35px;
  628. }
  629. .item-title {
  630. display: inline-block;
  631. margin-top: 20px;
  632. margin-left: 20px;
  633. font-family: Roboto;
  634. font-style: normal;
  635. font-weight: bold;
  636. font-size: 24px;
  637. color: #000000;
  638. }
  639. .set-schedule {
  640. width: 200px;
  641. height: 45px;
  642. background: #008CBA;
  643. border: 1px solid #CFCFCF;
  644. box-sizing: border-box;
  645. color: #FFFFFF;
  646. border-radius: 5px;
  647. font-size: 17px;
  648. margin-left:10px;
  649. }
  650. .delete {
  651. background: #E43030;
  652. border: 1px solid #CFCFCF;
  653. box-sizing: border-box;
  654. border-radius: 5px;
  655. margin-left: 5px;
  656. width: 65px;
  657. height: 33px;
  658. font-size: 16px;
  659. text-align: center;
  660. line-height: 16px;
  661. color: #FFFFFF;
  662. }
  663. .add {
  664. background: #008CBA;
  665. border: 1px solid #CFCFCF;
  666. box-sizing: border-box;
  667. border-radius: 5px;
  668. margin-top: 10px;
  669. margin-left: 82px;;
  670. width: 65px;
  671. height: 33px;
  672. font-size: 16px;
  673. text-align: center;
  674. line-height: 16px;
  675. color: #FFFFFF;
  676. }
  677. .page-bottom {
  678. margin-top: 100px;
  679. }
  680. .form-control {
  681. background: #008CBA;
  682. border: 1px solid #CFCFCF;
  683. box-sizing: border-box;
  684. border-radius: 5px;
  685. width: 120px;
  686. height: 58px;
  687. text-align: center;
  688. line-height: 50px;
  689. color: #FFFFFF;
  690. display: inline-block;
  691. }
  692. @media(max-width:373px){
  693. .card {
  694. margin-right: 0px;
  695. }
  696. .bacteria, .disinfect, .heating, .stir, .water, .highValve, .lowValve, .tem {
  697. margin-left: 0px;
  698. }
  699. .col {
  700. padding-right: 0px;
  701. padding-left: 0px;
  702. }
  703. .from,.to {
  704. margin-left: 0px;
  705. }
  706. .flex span {
  707. margin-left: 0px;
  708. }
  709. .from select, .to select {
  710. width: 45px;
  711. }
  712. .add {
  713. width: 50px;
  714. margin-left: 62px;
  715. }
  716. .delete {
  717. width: 58px;
  718. }
  719. .col-xs-8:not(:first-child) {
  720. margin-top: 150px;
  721. }
  722. .form-group {
  723. margin-top: 50px;
  724. }
  725. }
  726. @media(max-width:577px){
  727. }
  728. @media(min-width:576px){
  729. }
  730. @media(min-width:768px){
  731. .navbar-nav > li {
  732. margin-left: 0px;
  733. }
  734. .navbar-nav .li-block {
  735. display:none;
  736. }
  737. }
  738. @media(min-width:991px){
  739. .navbar-nav > li {
  740. margin-left: 20px;
  741. }
  742. .navbar-nav .li-block {
  743. display:none;
  744. }
  745. .page-bottom input:last-child {
  746. margin-left: 100px;
  747. }
  748. }
  749. @media(min-width:1200px){
  750. .navbar-nav > li {
  751. margin-left: 50px;
  752. }
  753. .navbar-nav .li-block {
  754. display: inline-block;
  755. width: 100px;
  756. }
  757. .page-bottom input:last-child {
  758. margin-left: 100px;
  759. }
  760. }
  761. @media(min-width:1400px){
  762. .navbar-nav .li-block {
  763. display: inline-block;
  764. width: 200px;
  765. }
  766. .page-bottom input:last-child {
  767. margin-left: 100px;
  768. }
  769. }
  770. @media(min-width:1689px) {
  771. .navbar-nav > li {
  772. margin-left: 50px;
  773. }
  774. .navbar-nav .li-block {
  775. display: inline-block;
  776. width: 500px;
  777. }
  778. .page-bottom input:last-child {
  779. margin-left: 100px;
  780. }
  781. }
  782. </style>
  783. </head>
  784. <body>
  785. <nav class="fixed-top">
  786. <nav class="navbar navbar-expand-md nav-top justify-content-center">
  787. <div>
  788. <span class="website_title">發酵槽{{params.tid}}</span>
  789. </div>
  790. </nav>
  791. <nav class="navbar navbar-expand-md bg-dark navbar-dark nav-bottom">
  792. <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
  793. <span class="navbar-toggler-icon"></span>
  794. </button>
  795. <div class="collapse navbar-collapse" id="collapsibleNavbar">
  796. <ul class="navbar-nav">
  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="#">聯絡方法</a>
  808. </li>
  809. <li class="nav-item">
  810. <a class="nav-link" href="/cargo_list">咖啡貨櫃</a>
  811. </li>
  812. <li class="nav-item">
  813. <a class="nav-link" href="/video">影像串流</a>
  814. </li>
  815. <li class="li-block"></li>
  816. <li class="nav-item">
  817. <a class="nav-link" href="#"><i class="fa fa-user-o"></i> {{params.username}}</a>
  818. </li>
  819. <li class="nav-item">
  820. <a class="nav-link" href="/logout">Logout</a>
  821. </li>
  822. </ul>
  823. </div>
  824. </nav>
  825. </nav>
  826. <div class="main-page">
  827. <form method="post" action="/b_tank/{{params.tid}}">
  828. <div class="container-fluid">
  829. <div class="row">
  830. <div class="col flex">
  831. <div class="bacteria col-xl-5 col-lg-5 col-md-5 col-sm-8 col-xs-8">
  832. <h2 class="item-title">打菌</h2>
  833. <input class="set-schedule" type="button" value="Set up the schedule">
  834. <br>
  835. <div id="bacteria_div" class="row" style="visibility:hidden;">
  836. <div class="col-12 row">
  837. <div class="col-xl-5 col-lg-5 col-md-4 col-sm-12 col-xs-12" style="margin-top:10px;">
  838. <span>Duration</span>
  839. <select name="bacteria_duration1" class="duration">
  840. <option selected value="30min">30 min</option>
  841. <option value="60min">60 min</option>
  842. <option value="90min">90 min</option>
  843. <option value="120min">120 min</option>
  844. <option value="150min">150 min</option>
  845. </select>
  846. </div>
  847. <div class="from-to col-xl-7 col-lg-7 col-md-8 col-sm-12 col-xs-12" style="margin-top:10px;">
  848. <div>
  849. <div class="from row">
  850. <div class="col-3">
  851. <span>From</span>
  852. </div>
  853. <div class="col-xs-6">
  854. <select name="bacteria_from_hr1">
  855. {% for hr in range(0, 24) %}
  856. {% if hr < 10 %}
  857. <option value="0{{hr}}">0{{hr}}</option>
  858. {% else %}
  859. <option value="{{hr}}">{{hr}}</option>
  860. {% endif %}
  861. {% endfor %}
  862. </select>
  863. : <select name="bacteria_from_min1">
  864. {% for min in range(0, 60) %}
  865. {% if min < 10 %}
  866. <option value="0{{min}}">0{{min}}</option>
  867. {% else %}
  868. <option value="{{min}}">{{min}}</option>
  869. {% endif %}
  870. {% endfor %}
  871. </select>
  872. </div>
  873. <div class="col-xs-3">
  874. <input id="bacteria_del1" class="delete" type="button" value="Delete" onclick="Delete(bacteria_del1);">
  875. </div>
  876. </div>
  877. <div class="to row">
  878. <div class="col-3">
  879. <span>To</span>
  880. </div>
  881. <div class="col-xs-6">
  882. <select name="bacteria_to_hr1">
  883. {% for hr in range(0, 24) %}
  884. {% if hr < 10 %}
  885. <option value="0{{hr}}">0{{hr}}</option>
  886. {% else %}
  887. <option value="{{hr}}">{{hr}}</option>
  888. {% endif %}
  889. {% endfor %}
  890. </select>
  891. : <select name="bacteria_to_min1">
  892. {% for min in range(0, 60) %}
  893. {% if min < 10 %}
  894. <option value="0{{min}}">0{{min}}</option>
  895. {% else %}
  896. <option value="{{min}}">{{min}}</option>
  897. {% endif %}
  898. {% endfor %}
  899. </select><br>
  900. <input id="bacteria_add1" class="add" type="button" value="Add" onclick="Add(bacteria_add1);">
  901. </div>
  902. <div class="col-xs-3"></div>
  903. </div>
  904. </div>
  905. </div>
  906. </div>
  907. </div>
  908. </div>
  909. <div class="disinfect col-xl-5 col-lg-5 col-md-5 col-sm-8 col-xs-8">
  910. <h2 class="item-title">消毒</h2>
  911. <input class="set-schedule" type="button" value="Set up the schedule">
  912. <br>
  913. <div id="disinfect_div" class="row" style="visibility:hidden;">
  914. <div class="col-12 row">
  915. <div class="col-xl-5 col-lg-5 col-md-4 col-sm-12 col-xs-12" style="margin-top:10px;">
  916. <span>Duration</span>
  917. <select name="disinfect_duration1" class="duration">
  918. <option selected value="30min">30 min</option>
  919. <option value="60min">60 min</option>
  920. <option value="90min">90 min</option>
  921. <option value="120min">120 min</option>
  922. <option value="150min">150 min</option>
  923. </select>
  924. </div>
  925. <div class="from-to col-xl-7 col-lg-7 col-md-8 col-sm-12 col-xs-12" style="margin-top:10px;">
  926. <div>
  927. <div class="from row">
  928. <div class="col-3">
  929. <span>From</span>
  930. </div>
  931. <div class="col-xs-6">
  932. <select name="disinfect_from_hr1">
  933. {% for hr in range(0, 24) %}
  934. {% if hr < 10 %}
  935. <option value="0{{hr}}">0{{hr}}</option>
  936. {% else %}
  937. <option value="{{hr}}">{{hr}}</option>
  938. {% endif %}
  939. {% endfor %}
  940. </select>
  941. : <select name="disinfect_from_min1">
  942. {% for min in range(0, 60) %}
  943. {% if min < 10 %}
  944. <option value="0{{min}}">0{{min}}</option>
  945. {% else %}
  946. <option value="{{min}}">{{min}}</option>
  947. {% endif %}
  948. {% endfor %}
  949. </select>
  950. </div>
  951. <div class="col-xs-3">
  952. <input id="disinfect_del1" class="delete" type="button" value="Delete" onclick="Delete(disinfect_del1);">
  953. </div>
  954. </div>
  955. <div class="to row">
  956. <div class="col-3">
  957. <span>To</span>
  958. </div>
  959. <div class="col-xs-6">
  960. <select name="disinfect_to_hr1">
  961. {% for hr in range(0, 24) %}
  962. {% if hr < 10 %}
  963. <option value="0{{hr}}">0{{hr}}</option>
  964. {% else %}
  965. <option value="{{hr}}">{{hr}}</option>
  966. {% endif %}
  967. {% endfor %}
  968. </select>
  969. : <select name="disinfect_to_min1">
  970. {% for min in range(0, 60) %}
  971. {% if min < 10 %}
  972. <option value="0{{min}}">0{{min}}</option>
  973. {% else %}
  974. <option value="{{min}}">{{min}}</option>
  975. {% endif %}
  976. {% endfor %}
  977. </select><br>
  978. <input id="disinfect_add1" class="add" type="button" value="Add" onclick="Add(disinfect_add1);">
  979. </div>
  980. <div class="col-xs-3"></div>
  981. </div>
  982. </div>
  983. </div>
  984. </div>
  985. </div>
  986. </div>
  987. <div class="heating col-xl-5 col-lg-5 col-md-5 col-sm-8 col-xs-8">
  988. <h2 class="item-title">加熱</h2>
  989. <input class="set-schedule" type="button" value="Set up the schedule">
  990. <br>
  991. <div id="heating_div" class="row" style="visibility:hidden;">
  992. <div class="col-12 row">
  993. <div class="col-xl-5 col-lg-5 col-md-4 col-sm-12 col-xs-12" style="margin-top:10px;">
  994. <span>Duration</span>
  995. <select name="heating_duration1" class="duration">
  996. <option value="30min" selected>30 min</option>
  997. <option value="60min">60 min</option>
  998. <option value="90min">90 min</option>
  999. <option value="120min">120 min</option>
  1000. <option value="150min">150 min</option>
  1001. </select>
  1002. </div>
  1003. <div class="from-to col-xl-7 col-lg-7 col-md-8 col-sm-12 col-xs-12" style="margin-top:10px;">
  1004. <div>
  1005. <div class="from row">
  1006. <div class="col-3">
  1007. <span>From</span>
  1008. </div>
  1009. <div class="col-xs-6">
  1010. <select name="heating_from_hr1">
  1011. {% for hr in range(0, 24) %}
  1012. {% if hr < 10 %}
  1013. <option value="0{{hr}}">0{{hr}}</option>
  1014. {% else %}
  1015. <option value="{{hr}}">{{hr}}</option>
  1016. {% endif %}
  1017. {% endfor %}
  1018. </select>
  1019. : <select name="heating_from_min1">
  1020. {% for min in range(0, 60) %}
  1021. {% if min < 10 %}
  1022. <option value="0{{min}}">0{{min}}</option>
  1023. {% else %}
  1024. <option value="{{min}}">{{min}}</option>
  1025. {% endif %}
  1026. {% endfor %}
  1027. </select>
  1028. </div>
  1029. <div class="col-xs-3">
  1030. <input id="heating_del1" class="delete" type="button" value="Delete" onclick="Delete(heating_del1);">
  1031. </div>
  1032. </div>
  1033. <div class="to row">
  1034. <div class="col-3">
  1035. <span>To</span>
  1036. </div>
  1037. <div class="col-xs-6">
  1038. <select name="heating_to_hr1">
  1039. {% for hr in range(0, 24) %}
  1040. {% if hr < 10 %}
  1041. <option value="0{{hr}}">0{{hr}}</option>
  1042. {% else %}
  1043. <option value="{{hr}}">{{hr}}</option>
  1044. {% endif %}
  1045. {% endfor %}
  1046. </select>
  1047. : <select name="heating_to_min1">
  1048. {% for min in range(0, 60) %}
  1049. {% if min < 10 %}
  1050. <option value="0{{min}}">0{{min}}</option>
  1051. {% else %}
  1052. <option value="{{min}}">{{min}}</option>
  1053. {% endif %}
  1054. {% endfor %}
  1055. </select><br>
  1056. <input id="heating_add1" class="add" type="button" value="Add" onclick="Add(heating_add1);">
  1057. </div>
  1058. <div class="col-xs-3"></div>
  1059. </div>
  1060. </div>
  1061. </div>
  1062. </div>
  1063. </div>
  1064. </div>
  1065. <div class="stir col-xl-5 col-lg-5 col-md-5 col-sm-8 col-xs-8">
  1066. <h2 class="item-title">攪拌</h2>
  1067. <input class="set-schedule" type="button" value="Set up the schedule">
  1068. <br>
  1069. <div id="stir_div" class="row" style="visibility:hidden;">
  1070. <div class="col-12 row">
  1071. <div class="col-xl-5 col-lg-5 col-md-4 col-sm-12 col-xs-12" style="margin-top:10px;">
  1072. <span>Duration</span>
  1073. <select name="stir_duration1" class="duration">
  1074. <option selected value="30min">30 min</option>
  1075. <option value="60min">60 min</option>
  1076. <option value="90min">90 min</option>
  1077. <option value="120min">120 min</option>
  1078. <option value="150min">150 min</option>
  1079. </select>
  1080. </div>
  1081. <div class="from-to col-xl-7 col-lg-7 col-md-8 col-sm-12 col-xs-12" style="margin-top:10px;">
  1082. <div>
  1083. <div class="from row">
  1084. <div class="col-3">
  1085. <span>From</span>
  1086. </div>
  1087. <div class="col-xs-6">
  1088. <select name="stir_from_hr1">
  1089. {% for hr in range(0, 24) %}
  1090. {% if hr < 10 %}
  1091. <option value="0{{hr}}">0{{hr}}</option>
  1092. {% else %}
  1093. <option value="{{hr}}">{{hr}}</option>
  1094. {% endif %}
  1095. {% endfor %}
  1096. </select>
  1097. : <select name="stir_from_min1">
  1098. {% for min in range(0, 60) %}
  1099. {% if min < 10 %}
  1100. <option value="0{{min}}">0{{min}}</option>
  1101. {% else %}
  1102. <option value="{{min}}">{{min}}</option>
  1103. {% endif %}
  1104. {% endfor %}
  1105. </select>
  1106. </div>
  1107. <div class="col-xs-3">
  1108. <input id="stir_del1" class="delete" type="button" value="Delete" onclick="Delete(stir_del1);">
  1109. </div>
  1110. </div>
  1111. <div class="to row">
  1112. <div class="col-3">
  1113. <span>To</span>
  1114. </div>
  1115. <div class="col-xs-6">
  1116. <select name="stir_to_hr1">
  1117. {% for hr in range(0, 24) %}
  1118. {% if hr < 10 %}
  1119. <option value="0{{hr}}">0{{hr}}</option>
  1120. {% else %}
  1121. <option value="{{hr}}">{{hr}}</option>
  1122. {% endif %}
  1123. {% endfor %}
  1124. </select>
  1125. : <select name="stir_to_min1">
  1126. {% for min in range(0, 60) %}
  1127. {% if min < 10 %}
  1128. <option value="0{{min}}">0{{min}}</option>
  1129. {% else %}
  1130. <option value="{{min}}">{{min}}</option>
  1131. {% endif %}
  1132. {% endfor %}
  1133. </select><br>
  1134. <input id="stir_add1" class="add" type="button" value="Add" onclick="Add(stir_add1);">
  1135. </div>
  1136. <div class="col-xs-3"></div>
  1137. </div>
  1138. </div>
  1139. </div>
  1140. </div>
  1141. </div>
  1142. </div>
  1143. <div class="water col-xl-5 col-lg-5 col-md-5 col-sm-8 col-xs-8">
  1144. <h2 class="item-title">注水</h2>
  1145. <input class="set-schedule" type="button" value="Set up the schedule">
  1146. <br>
  1147. <div id="water_div" class="row" style="visibility:hidden;">
  1148. <div class="col-12 row">
  1149. <div class="col-xl-5 col-lg-5 col-md-4 col-sm-12 col-xs-12" style="margin-top:10px;">
  1150. <span>Duration</span>
  1151. <select name="water_duration1" class="duration">
  1152. <option selected value="30min">30 min</option>
  1153. <option value="60min">60 min</option>
  1154. <option value="90min">90 min</option>
  1155. <option value="120min">120 min</option>
  1156. <option value="150min">150 min</option>
  1157. </select>
  1158. </div>
  1159. <div class="from-to col-xl-7 col-lg-7 col-md-8 col-sm-12 col-xs-12" style="margin-top:10px;">
  1160. <div>
  1161. <div class="from row">
  1162. <div class="col-3">
  1163. <span>From</span>
  1164. </div>
  1165. <div class="col-xs-6">
  1166. <select name="water_from_hr1">
  1167. {% for hr in range(0, 24) %}
  1168. {% if hr < 10 %}
  1169. <option value="0{{hr}}">0{{hr}}</option>
  1170. {% else %}
  1171. <option value="{{hr}}">{{hr}}</option>
  1172. {% endif %}
  1173. {% endfor %}
  1174. </select>
  1175. : <select name="water_from_min1">
  1176. {% for min in range(0, 60) %}
  1177. {% if min < 10 %}
  1178. <option value="0{{min}}">0{{min}}</option>
  1179. {% else %}
  1180. <option value="{{min}}">{{min}}</option>
  1181. {% endif %}
  1182. {% endfor %}
  1183. </select>
  1184. </div>
  1185. <div class="col-xs-3">
  1186. <input id="water_del1" class="delete" type="button" value="Delete" onclick="Delete(water_del1);">
  1187. </div>
  1188. </div>
  1189. <div class="to row">
  1190. <div class="col-3">
  1191. <span>To</span>
  1192. </div>
  1193. <div class="col-xs-6">
  1194. <select name="water_to_hr1">
  1195. {% for hr in range(0, 24) %}
  1196. {% if hr < 10 %}
  1197. <option value="0{{hr}}">0{{hr}}</option>
  1198. {% else %}
  1199. <option value="{{hr}}">{{hr}}</option>
  1200. {% endif %}
  1201. {% endfor %}
  1202. </select>
  1203. : <select name="water_to_min1">
  1204. {% for min in range(0, 60) %}
  1205. {% if min < 10 %}
  1206. <option value="0{{min}}">0{{min}}</option>
  1207. {% else %}
  1208. <option value="{{min}}">{{min}}</option>
  1209. {% endif %}
  1210. {% endfor %}
  1211. </select><br>
  1212. <input id="water_add1" class="add" type="button" value="Add" onclick="Add(water_add1);">
  1213. </div>
  1214. <div class="col-xs-3"></div>
  1215. </div>
  1216. </div>
  1217. </div>
  1218. </div>
  1219. </div>
  1220. </div>
  1221. <div class="highValve col-xl-5 col-lg-5 col-md-5 col-sm-8 col-xs-8">
  1222. <h2 class="item-title">開上閥</h2>
  1223. <input class="set-schedule" type="button" value="Set up the schedule">
  1224. <br>
  1225. <div id="highValve_div" class="row" style="visibility:hidden;">
  1226. <div class="col-12 row">
  1227. <div class="col-xl-5 col-lg-5 col-md-4 col-sm-12 col-xs-12" style="margin-top:10px;">
  1228. <span>Duration</span>
  1229. <select name="highValve_duration1" class="duration">
  1230. <option selected value="30min">30 min</option>
  1231. <option value="60min">60 min</option>
  1232. <option value="90min">90 min</option>
  1233. <option value="120min">120 min</option>
  1234. <option value="150min">150 min</option>
  1235. </select>
  1236. </div>
  1237. <div class="from-to col-xl-7 col-lg-7 col-md-8 col-sm-12 col-xs-12" style="margin-top:10px;">
  1238. <div>
  1239. <div class="from row">
  1240. <div class="col-3">
  1241. <span>From</span>
  1242. </div>
  1243. <div class="col-xs-6">
  1244. <select name="highValve_from_hr1">
  1245. {% for hr in range(0, 24) %}
  1246. {% if hr < 10 %}
  1247. <option value="0{{hr}}">0{{hr}}</option>
  1248. {% else %}
  1249. <option value="{{hr}}">{{hr}}</option>
  1250. {% endif %}
  1251. {% endfor %}
  1252. </select>
  1253. : <select name="highValve_from_min1">
  1254. {% for min in range(0, 60) %}
  1255. {% if min < 10 %}
  1256. <option value="0{{min}}">0{{min}}</option>
  1257. {% else %}
  1258. <option value="{{min}}">{{min}}</option>
  1259. {% endif %}
  1260. {% endfor %}
  1261. </select>
  1262. </div>
  1263. <div class="col-xs-3">
  1264. <input id="highValve_del1" class="delete" type="button" value="Delete" onclick="Delete(highValve_del1);">
  1265. </div>
  1266. </div>
  1267. <div class="to row">
  1268. <div class="col-3">
  1269. <span>To</span>
  1270. </div>
  1271. <div class="col-xs-6">
  1272. <select name="highValve_to_hr1">
  1273. {% for hr in range(0, 24) %}
  1274. {% if hr < 10 %}
  1275. <option value="0{{hr}}">0{{hr}}</option>
  1276. {% else %}
  1277. <option value="{{hr}}">{{hr}}</option>
  1278. {% endif %}
  1279. {% endfor %}
  1280. </select>
  1281. : <select name="highValve_to_min1">
  1282. {% for min in range(0, 60) %}
  1283. {% if min < 10 %}
  1284. <option value="0{{min}}">0{{min}}</option>
  1285. {% else %}
  1286. <option value="{{min}}">{{min}}</option>
  1287. {% endif %}
  1288. {% endfor %}
  1289. </select><br>
  1290. <input id="highValve_add1" class="add" type="button" value="Add" onclick="Add(highValve_add1);">
  1291. </div>
  1292. <div class="col-xs-3"></div>
  1293. </div>
  1294. </div>
  1295. </div>
  1296. </div>
  1297. </div>
  1298. </div>
  1299. <div class="lowValve col-xl-5 col-lg-5 col-md-5 col-sm-8 col-xs-8">
  1300. <h2 class="item-title">開下閥</h2>
  1301. <input class="set-schedule" type="button" value="Set up the schedule">
  1302. <br>
  1303. <div id="lowValve_div" class="row" style="visibility:hidden;">
  1304. <div class="col-12 row">
  1305. <div class="col-xl-5 col-lg-5 col-md-4 col-sm-12 col-xs-12" style="margin-top:10px;">
  1306. <span>Duration</span>
  1307. <select name="lowValve_duration1" class="duration">
  1308. <option selected value="30min">30 min</option>
  1309. <option value="60min">60 min</option>
  1310. <option value="90min">90 min</option>
  1311. <option value="120min">120 min</option>
  1312. <option value="150min">150 min</option>
  1313. </select>
  1314. </div>
  1315. <div class="from-to col-xl-7 col-lg-7 col-md-8 col-sm-12 col-xs-12" style="margin-top:10px;">
  1316. <div>
  1317. <div class="from row">
  1318. <div class="col-3">
  1319. <span>From</span>
  1320. </div>
  1321. <div class="col-xs-6">
  1322. <select name="lowValve_from_hr1">
  1323. {% for hr in range(0, 24) %}
  1324. {% if hr < 10 %}
  1325. <option value="0{{hr}}">0{{hr}}</option>
  1326. {% else %}
  1327. <option value="{{hr}}">{{hr}}</option>
  1328. {% endif %}
  1329. {% endfor %}
  1330. </select>
  1331. : <select name="lowValve_from_min1">
  1332. {% for min in range(0, 60) %}
  1333. {% if min < 10 %}
  1334. <option value="0{{min}}">0{{min}}</option>
  1335. {% else %}
  1336. <option value="{{min}}">{{min}}</option>
  1337. {% endif %}
  1338. {% endfor %}
  1339. </select>
  1340. </div>
  1341. <div class="col-xs-3">
  1342. <input id="lowValve_del1" class="delete" type="button" value="Delete" onclick="Delete(lowValve_del1);">
  1343. </div>
  1344. </div>
  1345. <div class="to row">
  1346. <div class="col-3">
  1347. <span>To</span>
  1348. </div>
  1349. <div class="col-xs-6">
  1350. <select name="lowValve_to_hr1">
  1351. {% for hr in range(0, 24) %}
  1352. {% if hr < 10 %}
  1353. <option value="0{{hr}}">0{{hr}}</option>
  1354. {% else %}
  1355. <option value="{{hr}}">{{hr}}</option>
  1356. {% endif %}
  1357. {% endfor %}
  1358. </select>
  1359. : <select name="lowValve_to_min1">
  1360. {% for min in range(0, 60) %}
  1361. {% if min < 10 %}
  1362. <option value="0{{min}}">0{{min}}</option>
  1363. {% else %}
  1364. <option value="{{min}}">{{min}}</option>
  1365. {% endif %}
  1366. {% endfor %}
  1367. </select><br>
  1368. <input id="lowValve_add1" class="add" type="button" value="Add" onclick="Add(lowValve_add1);">
  1369. </div>
  1370. <div class="col-xs-3"></div>
  1371. </div>
  1372. </div>
  1373. </div>
  1374. </div>
  1375. </div>
  1376. </div>
  1377. <div class="tem col-xl-5 col-lg-5 col-md-5 col-sm-8 col-xs-8">
  1378. <h2 class="item-title">溫度</h2>
  1379. <input class="set-schedule" type="button" value="Set up the schedule">
  1380. <br>
  1381. <div id="tem_div" class="row" style="visibility:hidden;">
  1382. <div class="col-12 row">
  1383. <div class="col-xl-5 col-lg-5 col-md-4 col-sm-12 col-xs-12" style="margin-top:10px;">
  1384. <span>Duration</span>
  1385. <select name="tem_duration1" class="duration">
  1386. <option selected value="30min">30 min</option>
  1387. <option value="60min">60 min</option>
  1388. <option value="90min">90 min</option>
  1389. <option value="120min">120 min</option>
  1390. <option value="150min">150 min</option>
  1391. </select>
  1392. </div>
  1393. <div class="from-to col-xl-7 col-lg-7 col-md-8 col-sm-12 col-xs-12" style="margin-top:10px;">
  1394. <div>
  1395. <div class="from row">
  1396. <div class="col-3">
  1397. <span>From</span>
  1398. </div>
  1399. <div class="col-xs-6">
  1400. <select name="tem_from_hr1">
  1401. {% for hr in range(0, 24) %}
  1402. {% if hr < 10 %}
  1403. <option value="0{{hr}}">0{{hr}}</option>
  1404. {% else %}
  1405. <option value="{{hr}}">{{hr}}</option>
  1406. {% endif %}
  1407. {% endfor %}
  1408. </select>
  1409. : <select name="tem_from_min1">
  1410. {% for min in range(0, 60) %}
  1411. {% if min < 10 %}
  1412. <option value="0{{min}}">0{{min}}</option>
  1413. {% else %}
  1414. <option value="{{min}}">{{min}}</option>
  1415. {% endif %}
  1416. {% endfor %}
  1417. </select>
  1418. </div>
  1419. <div class="col-xs-3">
  1420. <input id="tem_del1" class="delete" type="button" value="Delete" onclick="Delete(tem_del1);">
  1421. </div>
  1422. </div>
  1423. <div class="to row">
  1424. <div class="col-3">
  1425. <span>To</span>
  1426. </div>
  1427. <div class="col-xs-6">
  1428. <select name="tem_to_hr1">
  1429. {% for hr in range(0, 24) %}
  1430. {% if hr < 10 %}
  1431. <option value="0{{hr}}">0{{hr}}</option>
  1432. {% else %}
  1433. <option value="{{hr}}">{{hr}}</option>
  1434. {% endif %}
  1435. {% endfor %}
  1436. </select>
  1437. : <select name="tem_to_min1">
  1438. {% for min in range(0, 60) %}
  1439. {% if min < 10 %}
  1440. <option value="0{{min}}">0{{min}}</option>
  1441. {% else %}
  1442. <option value="{{min}}">{{min}}</option>
  1443. {% endif %}
  1444. {% endfor %}
  1445. </select><br>
  1446. <input id="tem_add1" class="add" type="button" value="Add" onclick="Add(tem_add1);">
  1447. </div>
  1448. <div class="col-xs-3"></div>
  1449. </div>
  1450. </div>
  1451. </div>
  1452. </div>
  1453. </div>
  1454. </div>
  1455. </div>
  1456. </div>
  1457. </div>
  1458. <div class="row page-bottom">
  1459. <div class="col"></div>
  1460. <div class="col-xl-4 col-lg-6 col-md-8 col-sm-10 col-xs-10" style="text-align:center;">
  1461. <div class="form-group">
  1462. <input type="button" class="form-control" value="Cancel" onclick="Cancel();">
  1463. <input type="submit" class="form-control" value="Confirm">
  1464. </div>
  1465. </div>
  1466. <div class="col"></div>
  1467. </div>
  1468. </form>
  1469. </div>
  1470. </body>
  1471. </html>