<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>{{ title }}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
    <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <!--可用來建立使用者小圖示-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <style>
        body {
            margin: 0;
        }

        .navbar-dark .navbar-nav .nav-link {
            color: white;
            cursor: pointer;
            text-decoration: none;
            width: 110px;
            height: 46px;
        }

        .nav-top {
            line-height: 40px;
            background-color: #C4C4C4;
        }

        .website_title {
            font-family: Roboto;
            font-style: normal;
            font-weight: normal;
            font-size: 30px;
            color: #000000;
        }

        .navbar-nav>li {
            float: none;
            display: inline-block;
            width: 100px;
            margin: 0 auto;
            text-align: center;
        }

        .navbar-nav>li a {
            font-size: 20px;
        }

        .main-page {
            margin-top: 200px;
        }

        .page-title {
            font-family: Roboto;
            font-style: normal;
            font-weight: bold;
            font-size: 36px;
        }


        .flex {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
        }

        .set-link {
            display: inline-block;
            width: 350px;
            height: 100px;
            line-height: 100px;
            background: #008CBA;
            border: 1px solid #CFCFCF;
            box-sizing: border-box;
            color: #FFFFFF;
            border-radius: 10px;
            font-size: 36px;
        }

        .cmn-toggle {
            position: absolute;
            margin-left: 0px;
            visibility: hidden;
        }

        .cmn-toggle+label {
            display: block;
            position: relative;
            cursor: pointer;
            outline: none;
            user-select: none;
        }

        input.cmn-toggle-round-flat+label {
            padding: 2px;
            width: 60px;
            height: 30px;
            background-color: #C0C0C0;
            border-radius: 60px;
            transition: background 0.4s;
        }

        input.cmn-toggle-round-flat+label:before,
        input.cmn-toggle-round-flat+label:after {
            display: block;
            position: absolute;
            content: "";
        }

        input.cmn-toggle-round-flat+label:before {
            top: 2px;
            left: 2px;
            bottom: 2px;
            right: 2px;
            background-color: #fff;
            border-radius: 60px;
            transition: background 0.4s;
        }

        input.cmn-toggle-round-flat+label:after {
            top: 4px;
            left: 4px;
            bottom: 4px;
            width: 24px;
            background-color: #dddddd;
            border-radius: 52px;
            transition: margin 0.4s, background 0.4s;
        }

        input.cmn-toggle-round-flat:checked+label {
            background-color: #C0C0C0;
        }

        input.cmn-toggle-round-flat:checked+label:after {
            margin-left: 27px;
            background-color: #008CBA;
        }

        @media(max-width:373px) {
            .card {
                margin-right: 0px;
            }

            .set-link {
                width: 250px;
            }
        }

        @media(max-width:577px) {}

        @media(min-width:576px) {}

        @media(min-width:768px) {
            .navbar-nav>li {
                margin-left: 0px;
            }

            .navbar-nav .li-block {
                display: none;
            }
        }

        @media(min-width:991px) {
            .navbar-nav>li {
                margin-left: 20px;
            }

            .navbar-nav .li-block {
                display: none;
            }
        }

        @media(min-width:1200px) {
            .navbar-nav>li {
                margin-left: 50px;
            }

            .navbar-nav .li-block {
                display: inline-block;
                width: 100px;
            }
        }

        @media(min-width:1400px) {
            .navbar-nav .li-block {
                display: inline-block;
                width: 200px;
            }
        }


        @media(min-width:1689px) {
            .navbar-nav>li {
                margin-left: 50px;
            }

            .navbar-nav .li-block {
                display: inline-block;
                width: 500px;
            }
        }
    </style>

</head>

<body>
    <h6>感測器數值</h6>
    入料儲豆槽液位計高度(cm)：!測試時請用生豆高度!{{input_UltraSonic.UltraSonic}}
    <div id="input_UltraSonic" d={{input_UltraSonic.UltraSonic}} style="display:none"></div>
    <br>
    設定空桶高度應低於 10
    <br>
    乾燥槽液位計高度(cm)：!測試時請用生豆高度!{{tank_UltraSonic.UltraSonic}}
    <div id="tank_UltraSonic" d={{tank_UltraSonic.UltraSonic}} style="display:none"></div>
    <br>

    <hr size="50" width="100%">

    <h6>入料排程</h6>
    設定入料儲豆槽生豆高度(cm)：
    <input name="schedule_input_height" id="schedule_input_height" type="text" style="width:100px;" value="70">
    <br>
    設定吸料時間(s)：
    <input name="schedule_tank_vacuumin" id="schedule_tank_vacuumin" type="text" style="width:100px;" value="5">
    <br>
    設定放料時間(s)：
    <input name="schedule_tank_vacuumout" id="schedule_tank_vacuumout" type="text" style="width:100px;" value="10">
    <br>
    設定乾燥槽生豆高度(cm)：
    <input name="schedule_tank_height" id="schedule_tank_height" type="text" style="width:100px;" value="70">
    <br>
    入料時馬達轉速(rpm)：
    <input name="schedule_tank_motorrpm" id="schedule_tank_motorrpm" type="text" style="width:100px;" value="10">
    <br>
    <button type="submit" class="btn btn-primary" onclick="schedule_Start()">開始入料</button>
    <script>
        function schedule_Start() {
            //word = document.getElementById("schedule_SOP").innerHTML;
            //document.getElementById("schedule_SOP").innerHTML = word+'<br>*';

            var schedule_input_height = $("input[name=schedule_input_height]").val();
            var schedule_tank_vacuumin = $("input[name=schedule_tank_vacuumin]").val();
            var schedule_tank_vacuumout = $("input[name=schedule_tank_vacuumout]").val();
            var schedule_tank_height = $("input[name=schedule_tank_height]").val();
            var schedule_tank_motorrpm = $("input[name=schedule_tank_motorrpm]").val();

            var tank_UltraSonic = parseInt(document.getElementById('tank_UltraSonic').getAttribute('d'));

            // 入料判斷
            if (schedule_input_height <= input_UltraSonic) {
                console.log('儲豆槽達指定高度')
                console.log('tank_UltraSonic:' + tank_UltraSonic)

                if (tank_UltraSonic <= 10) {
                    var DRY_STATE = 'Ready'
                    console.log('乾燥桶為空, 狀態為 Ready, 準備入料')

                    // 開始入料
                    while (schedule_tank_height >= tank_UltraSonic) {

                        // 真空吸料機 ON
                        var data = { "tank-number": "1", "command": "tank_vacuum_status", "value": "on" };
                        console.log('data:', data)
                        /*
                        $.post('/mqtt/{{tid}}', data, function (res) {
                            console.log('真空吸料機 '+res)
                        }, 'text')
                        */

                        // 吸料時間
                        var time = new Date();
                        while ((new Date() - time) < schedule_tank_vacuumin * 1000) { }

                        // 真空吸料機 OFF
                        var data = { "tank-number": "1", "command": "tank_vacuum_status", "value": "off" };
                        console.log('data:', data)
                        /*
                        $.post('/mqtt/{{tid}}', data, function (res) {
                            console.log('真空吸料機 '+ res)
                        }, 'text')
                        */

                        // 放料時間
                        var time = new Date();
                        while ((new Date() - time) < schedule_tank_vacuumout * 1000) { }
                        location.reload();
                    }
                    console.log('乾燥桶生豆以達指定高度, 入料結束')


                } else { console.log('乾燥桶不為空, 無法入料') }
            } else { console.log('儲豆槽未達指定高度, 無法入料') }


        }

    </script>
    <br>
    <hr size="50" width="100%">
    <!--
    <h6>入料排程_程式</h6>
    <p id="schedule_SOP">按下"開始入料"</p>
-->
    <script>
        dry_object = new Array();
        dry_object[0] = ["ON", "OFF"];  // 入料真空吸料機
        dry_object[1] = ["ON", "OFF"];  // 真空吸料機
        dry_object[2] = ["ON 吸料", "OFF 排氣"];  // 三通閥
        dry_object[3] = ["0", "10", "20", "30", "40", "50"];  // 馬達
        dry_object[4] = ["ON", "OFF"];  // 鼓風機
        dry_object[5] = ["ON", "OFF"];  // 加熱器 1
        dry_object[6] = ["ON", "OFF"];  // 加熱器 2
        dry_object[7] = ["ON", "OFF"];  // 蝴蝶閥
        dry_object[8] = ["ON", "OFF"];  // 消毒電磁閥
        dry_object[9] = ["ON", "OFF"];  // 排水電磁閥
        dry_object[10] = ["ON", "OFF"];  // 溫控開關
        dry_object[11] = ["OFF", "28", "30", "32", "34", "36", "38", "40"];  // 設定溫度
        dry_object[12] = ["ON", "OFF"];  // 出料真空吸料機

        dry_object[13] = ["ON", "OFF"];  // 入料儲豆槽_液位計
        dry_object[14] = ["ON", "OFF"];  // 液位計
        dry_object[15] = ["ON", "OFF"];  // SHT11_溫度
        dry_object[16] = ["ON", "OFF"];  // SHT11_濕度
        dry_object[17] = ["ON", "OFF"];  // 土壤三合一_溫度
        dry_object[18] = ["ON", "OFF"];  // 土壤三合一_濕度
        dry_object[19] = ["ON", "OFF"];  // 土壤三合一_EC
        dry_object[20] = ["ON", "OFF"];  // 氣壓
        dry_object[21] = ["ON", "OFF"];  // 出料儲豆槽_液位計

        function renew1(index) {
            console.log('index' + index)
            for (var i = 0; i < dry_object[index].length; i++)
                document.action.do_act1.options[i] = new Option(dry_object[index][i], dry_object[index][i]);
            document.action.do_act1.length = dry_object[index].length;	// 刪除多餘的選項
        }
        function renew2(index) {
            console.log('index' + index)
            for (var i = 0; i < dry_object[index].length; i++)
                document.action.dryinput_do_act2.options[i] = new Option(dry_object[index][i], dry_object[index][i]);
            document.action.dryinput_do_act2.length = dry_object[index].length;	// 刪除多餘的選項
        }
    </script>

    <!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
    <div id="box">
        <form name="condition">
            條件
            <select name="cond_a1">
                <optgroup label="Actuator">
                    <option value="input_vacuum">入料真空吸料機</option>
                    <option value="tank_vacuum">真空吸料機</option>
                    <option value="tank_threewayvalve">三通閥</option>
                    <option value="tank_motor">馬達</option>
                    <option value="tank_blower">鼓風機</option>
                    <option value="tank_heater1">加熱器 1</option>
                    <option value="tank_heater2">加熱器 2</option>
                    <option value="tank_diskvalve">蝴蝶閥</option>
                    <option value="tank_solenoid_disinfect">消毒電磁閥</option>
                    <option value="tank_solenoid_water">排水電磁閥</option>
                    <option value="tank_temp1_enable">溫控開關</option>
                    <option value="tank_temp1">設定溫度</option>
                    <option value="output_vacuum">出料真空吸料機</option>
                </optgroup>
                <optgroup label="Sensor">
                    <option value="input_UltraSonic">入料儲豆槽_液位計(cm)</option>
                    <option value="tank_UltraSonic">液位計(cm)</option>
                    <option value="tank_SHT11_Temp">SHT11_溫度(℃)</option>
                    <option value="tank_SHT11_Humidity">SHT11_濕度(%)</option>
                    <option value="tank_soil_Temp">土壤三合一_溫度(℃)</option>
                    <option value="tank_soil_Humidity">土壤三合一_濕度(%)</option>
                    <option value="tank_soil_EC">土壤三合一_EC(%)</option>
                    <option value="tank_PA">氣壓(PA)</option>
                    <option value="output_UltraSonic">出料儲豆槽_液位計(cm)</option>
                </optgroup>
            </select>
            <select name="cond_cal1">
                <option value="cal1_equal">==</option>
                <option value="cal1_more">&gt;=</option>
                <option value="cal1_less">&lt;=</option>
                <option value="cal1_and">and</option>
                <option value="cal1_or">or</option>
            </select>

            <input list="cal1" name="cond_b1">
            <datalist id="cal1">
                <option value="ON">
                <option value="OFF">
                <option value="(或請自行輸入數值)">
            </datalist>

        </form>

        <form name="action">
            物件：
            <select name="do_obj1" onChange="renew1(this.selectedIndex);">
                <optgroup label="Actuator">
                    <option value="input_vacuum1">入料真空吸料機
                    <option value="tank_vacuum1">真空吸料機</option>
                    <option value="tank_threewayvalve1">三通閥</option>
                    <option value="tank_motor1">馬達</option>
                    <option value="tank_blower1">鼓風機</option>
                    <option value="tank_heater11">加熱器 1</option>
                    <option value="tank_heater21">加熱器 2</option>
                    <option value="tank_diskvalve1">蝴蝶閥</option>
                    <option value="tank_solenoid_disinfect1">消毒電磁閥</option>
                    <option value="tank_solenoid_water1">排水電磁閥</option>
                    <option value="tank_temp1_enable1">溫控開關</option>
                    <option value="tank_temp11">設定溫度</option>
                    <option value="output_vacuum1">出料真空吸料機</option>
                </optgroup>
                <optgroup label="Sensor">
                    <option value="input_UltraSonic1">入料儲豆槽_液位計</option>
                    <option value="tank_UltraSonic1">液位計</option>
                    <option value="tank_SHT11_Temp1">SHT11_溫度</option>
                    <option value="tank_SHT11_Humidity1">SHT11_濕度</option>
                    <option value="tank_soil_Temp1">土壤三合一_溫度</option>
                    <option value="tank_soil_Humidity1">土壤三合一_濕度</option>
                    <option value="tank_soil_EC1">土壤三合一_EC</option>
                    <option value="tank_PA1">氣壓</option>
                    <option value="output_UltraSonic1">出料儲豆槽_液位計</option>
                </optgroup>
            </select>

            動作：
            <select name="do_act1">
                <option value="">請由左方選取物件
            </select>
        </form>

        <!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
        <div id="new">
                新增的條件物件放這裡
        </div>
        <!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->

        <script>
            var i = 1

            function Add(evt) {
                // onclick = "Add(hoist_add1);""
                // evt = hoist_num (= hoist_add1 / hoist_add2 / hoist_add3 ...)
                evt.style.display = "none";                 // 元素不顯示
                i++;
                var div = document.createElement('div');    // 輸出 <div></div>
                var cond_a = 'cond_a' + i;
                var cond_b = 'cond_b' + i;
                var cond_cal = 'cond_cal' + i;
                var id = evt.getAttribute('id');            // 輸出 dryinput_add1
                console.log('id:' + id)
                var add = id.split('_')[0] + '_add' + i;    // dryinput + _add + 2 => 輸出 hoist_add2
                var del = id.split('_')[0] + '_del' + i;    // dryinput + _del + 2 => 輸出 hoist_del2
                var html = '';
                var begin = id.split('_')[0];               // 輸出 dryinput
                div.className = "col-12 row";
                div.style.marginTop = "10px";

                html += '<form name="dryinput_condition">';
                html += '條件';
                if (begin == 'dryinput') {
                    html += ' <select name="dryinput_cond_a' + i + '">';
                } else {
                };

                html += '<optgroup label="Actuator">' +
                    '<option value="input_vacuum">入料真空吸料機</option>' +
                    '<option value="tank_vacuum">真空吸料機</option>' +
                    '<option value="tank_threewayvalve">三通閥</option>' +
                    '<option value="tank_motor">馬達</option>' +
                    '<option value="tank_blower">鼓風機</option>' +
                    '<option value="tank_heater1">加熱器 1</option>' +
                    '<option value="tank_heater2">加熱器 2</option>' +
                    '<option value="tank_diskvalve">蝴蝶閥</option>' +
                    '<option value="tank_solenoid_disinfect">消毒電磁閥</option>' +
                    '<option value="tank_solenoid_water">排水電磁閥</option>' +
                    '<option value="tank_temp1_enable">溫控開關</option>' +
                    '<option value="tank_temp1">設定溫度</option>' +
                    '<option value="output_vacuum">出料真空吸料機</option>' +
                    '</optgroup>' +
                    '<optgroup label="Sensor">' +
                    '<option value="input_UltraSonic">入料儲豆槽_液位計(cm)</option>' +
                    '<option value="tank_UltraSonic">液位計(cm)</option>' +
                    '<option value="tank_SHT11_Temp">SHT11_溫度(℃)</option>' +
                    '<option value="tank_SHT11_Humidity">SHT11_濕度(%)</option>' +
                    '<option value="tank_soil_Temp">土壤三合一_溫度(℃)</option>' +
                    '<option value="tank_soil_Humidity">土壤三合一_濕度(%)</option>' +
                    '<option value="tank_soil_EC">土壤三合一_EC(%)</option>' +
                    '<option value="tank_PA">氣壓(PA)</option>' +
                    '<option value="output_UltraSonic">出料儲豆槽_液位計(cm)</option>' +
                    '</optgroup>' +
                    '</select>';

                if (begin == 'dryinput') {
                    html += '<select name="dryinput_cond_cal' + i + '">';
                } else {
                };

                html += '<option value="cal1_equal">==</option>' +
                    '<option value="cal1_more">&gt;=</option>' +
                    '<option value="cal1_less">&lt;=</option>' +
                    '<option value="cal1_and">and</option>' +
                    '<option value="cal1_or">or</option>' +
                    '</select>';

                if (begin == 'dryinput') {
                    html += '<input list="cal' + i + '" name="dryinput_cond_b' + i + '">';
                } else {
                };

                html += '<datalist id="cal' + i + '">' +
                    '<option value="ON">' +
                    '<option value="OFF">' +
                    '<option value="(或請自行輸入數值)">' +
                    '</datalist>' +
                    '</form>';

                html += '<form name="dryinput_action">';
                html += '物件：';
                html += '<script>' +
                    'dry_object = new Array();' +
                    'dry_object[0] = ["ON", "OFF"];' +
                    'dry_object[1] = ["ON", "OFF"];' +
                    'dry_object[2] = ["ON 吸料", "OFF 排氣"];' +
                    'dry_object[3] = ["0", "10", "20", "30", "40", "50"];' +
                    'dry_object[4] = ["ON", "OFF"];' +
                    'dry_object[5] = ["ON", "OFF"];' +
                    'dry_object[6] = ["ON", "OFF"];' +
                    'dry_object[7] = ["ON", "OFF"]; ' +
                    'function renew' + i + '(index) {' +
                    'for (var i = 0; i < dry_object[index].length; i++)' +
                    'document.action.dryinput_do_act' + i + '.options[i] = new Option(dry_object[index][i], dry_object[index][i]);' +
                    'document.action.dryinput_do_act' + i + '.length = dry_object[index].length;' +
                    '}' +
                    '<\/script>';

                if (begin == 'dryinput') {
                    html += '<select name="dryinput_do_obj' + i + '" onChange="renew' + i + '(this.selectedIndex);">';
                } else {
                };


                html += '<optgroup label="Actuator">' +
                    '<option value="input_vacuum1">入料真空吸料機' +
                    '<option value="tank_vacuum1">真空吸料機</option>' +
                    '<option value="tank_threewayvalve1">三通閥</option>' +
                    '<option value="tank_motor1">馬達</option>' +
                    '<option value="tank_blower1">鼓風機</option>' +
                    '<option value="tank_heater11">加熱器 1</option>' +
                    '<option value="tank_heater21">加熱器 2</option>' +
                    '<option value="tank_diskvalve1">蝴蝶閥</option>' +
                    '<option value="tank_solenoid_disinfect1">消毒電磁閥</option>' +
                    '<option value="tank_solenoid_water1">排水電磁閥</option>' +
                    '<option value="tank_temp1_enable1">溫控開關</option>' +
                    '<option value="tank_temp11">設定溫度</option>' +
                    '<option value="output_vacuum1">出料真空吸料機</option>' +
                    '</optgroup>' +
                    '<optgroup label="Sensor">' +
                    '<option value="input_UltraSonic1">入料儲豆槽_液位計</option>' +
                    '<option value="tank_UltraSonic1">液位計</option>' +
                    '<option value="tank_SHT11_Temp1">SHT11_溫度</option>' +
                    '<option value="tank_SHT11_Humidity1">SHT11_濕度</option>' +
                    '<option value="tank_soil_Temp1">土壤三合一_溫度</option>' +
                    '<option value="tank_soil_Humidity1">土壤三合一_濕度</option>' +
                    '<option value="tank_soil_EC1">土壤三合一_EC</option>' +
                    '<option value="tank_PA1">氣壓</option>' +
                    '<option value="output_UltraSonic1">出料儲豆槽_液位計</option>' +
                    '</optgroup>' +
                    '</select>';
                html += '動作：';

                if (begin == 'dryinput') {
                    html += '<select name="dryinput_do_act' + i + '">';
                } else {
                };

                html += '<option value="">請由左方選取物件' +
                    '</select>' +
                    '<input  id=dryinput_del' + i + ' class="delete" type="button" value="條件物件--" onclick="Delete(dryinput_del' + i + ');">'
                '</form>' +
                    '</div>';
                //html += ;
                html += '<br><input id="dryinput_add' + i + '" class="add" type="button" value="條件物件++" onclick="Add(dryinput_add' + i + ');"><br>';
                html += '</div><div id="dry_con_act' + (i + 1) + '"></div>';

                var divbox = document.getElementById('box');
                divbox.insertAdjacentHTML('beforeend', html);


            };
            function Delete(evt) {
                // evt = dryinput_del2
                var id = evt.getAttribute('id');            // 輸出 dryinput_del2
                //console.log('id:'+id)
                var begin = id.split('_')[0];               // 輸出 dryinput
                //console.log('begin:'+begin)
                var del_num = id.split('_')[1].replace("del", "");
                //console.log('del_num:'+del_num)
                var obox = document.getElementById("box");
                var target = "dry_con_act" + del_num
                console.log('target:' + target)

                var divs = obox.getElementById(target);
                if (divs.length > 0) {
                    obox.removeChild(divs[0]);
                }
            };

        </script>
        <!--
    <input type="button" onclick="document.body.insertAdjacentHTML('beforeEnd', box)" value="新增">
    box = '<input type=text name=' + i + ' value=' + i + '><br>'
-->
        <input id="dryinput_add1" class="add" type="button" value="條件物件++" onclick="Add(dryinput_add1);">
        <br>

        <div id="dry_con_act2"></div>

    </div>
    <hr size="50" width="100%">

    

</body>

</html>