<!doctype html>
<html lang="en">
<head>
    <style>
    </style>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/tempus-dominus.css" rel="stylesheet" />

    <script src="js/jquery-3.7.1.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/popper.js"></script>
    <script src="js/loader.js"></script>
    <script src="js/moment.min.js"></script>
    <script src="js/bootstrap-datetimepicker.min.js"></script>
    <script src="js/solid.min.js"></script>
    <script src="js/fontawesome.min.js"></script>
    <script src="js/tempus-dominus.js"></script>

    <script>
    let data;
    let options;
    let chart;

    const VALVE_STATE_UNDEFINED           = -1;
    const VALVE_STATE_CLOSED              = 0;
    const VALVE_STATE_OPEN                = 1;

    const VALVE_MODE_UNDEFINED            = -1;
    const VALVE_MODE_AUTO                 = 0;
    const VALVE_MODE_MANUAL_CLOSE         = 1;
    const VALVE_MODE_MANUAL_OPEN          = 2;

    const STATE_IDLE                      = 0;
    const STATE_PREHEATING                = 1;
    const STATE_TIMER_DELAY               = 2;
    const STATE_DISCHARGE                 = 3;
    const STATE_PROCESS_HEADS             = 4;
    const STATE_BODY_TAKE                 = 5;
    const STATE_BODY_REST                 = 6;
    const STATE_BODY_STABILIZATION        = 7;
    const STATE_PAUSE_AFTER_BODY          = 8;
    const STATE_PROCESS_TAILS             = 9;

    let timeoutID                         = -1;
    let prevState                         = -1;

    let spnState1                   = null;
    let spnState2                   = null;
    let spnState3                   = null;
    let btnHeads                    = null;
    let btnBody                     = null;
    let btnTails                    = null;
    let btnStart                    = null;
    let log                         = null;
    let divRun                      = null;
    let divSettings                 = null;
    let btnHeadsValveState          = null;
    let btnBodyValveState           = null;
    let btnTailsValveState          = null;
    let btnColumnTemperature        = null;
    let btnCubeTemperature          = null;
    let pictureValvesControl        = null;
    let prevObjJson                 = null;
    let modalValvesState            = null;
    let modalBodyTakeParameters     = null;
    let modalHeadsTakeParameters    = null;
    let modalTailsTakeParameters    = null;
    let modalParallelHeadsParams    = null;
    let modalParallelTailsParams    = null;
    let datetimepicker1             = null;

    function drawChart()
    {
        data = new google.visualization.DataTable();
        data.addColumn('timeofday', 'Time');
        data.addColumn('number', 'T column');
        data.addColumn('number', 'T cube');

        options =
            {
                title: 'Temperature',
                curveType: 'function',
                legend: { position: 'bottom' },
                chartArea: {width: '100%', left: '0'}
            };

        chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
        chart.draw(data, options);
    }

    function toTime(sec)
    {
        let hours = Math.floor(sec/3600);
        (hours >= 1) ? sec = sec - (hours*3600) : hours = '00';
        let min = Math.floor(sec/60);
        (min >= 1) ? sec = sec - (min*60) : min = '00';
        (sec < 1) ? sec='00' : void 0;

        (min.toString().length === 1) ? min = '0'+min : void 0;
        (sec.toString().length === 1) ? sec = '0'+sec : void 0;

        return hours+':'+min+':'+sec;
    }

    function toTimeMS(sec)
    {
        let min = Math.floor(sec/60);
        (min >= 1) ? sec = sec - (min*60) : min = '00';
        (sec < 1) ? sec='00' : void 0;

        (min.toString().length === 1) ? min = '0'+min : void 0;
        (sec.toString().length === 1) ? sec = '0'+sec : void 0;

        return min+':'+sec;
    }

    function secondsToHM(d)
    {
        d = Number(d);
        let h = Math.floor(d / 3600);
        let m = Math.floor(d % 3600 / 60);
        let s = Math.floor(d % 3600 % 60);

        return h + ":" + m;
    }
    async function getJsonFromUrl(url, callback)
    {
        const xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.responseType = 'json';
        xhr.onload = function ()
        {
            const status = xhr.status;
            if (status === 200)
            {
                callback(xhr.response, null);
            }
            else
            {
                callback(xhr.response, status);
            }
        };
        xhr.send();
    }

    async function getSettings()
    {
        let objJson = getJsonFromUrl("/getSettings", parseSettings);
        return objJson;
    }

    function document_onload()
    {
        spnState1               = document.getElementById("spanState1");
        spnState2               = document.getElementById("spanState2");
        spnState3               = document.getElementById("spanState3");
        btnStart                = document.getElementById("btnStart");
        btnHeads                = document.getElementById("btnHeads");
        btnBody                 = document.getElementById("btnBody");
        btnTails                = document.getElementById("btnTails");
        divRun                  = document.getElementById("run_div");
        divSettings             = document.getElementById("settings_div");
        btnHeadsValveState      = document.getElementById("btnHeadsValveState");
        btnBodyValveState       = document.getElementById("btnBodyValveState");
        btnTailsValveState      = document.getElementById("btnTailsValveState");
        btnColumnTemperature    = document.getElementById("btnColumnTemperature");
        btnCubeTemperature      = document.getElementById("btnCubeTemperature");
        pictureValvesControl    = document.getElementById("pictureValvesControl");

        datetimepicker1         = new tempusDominus.TempusDominus(document.getElementById("datetimepicker1"),
            {
                useCurrent: false,
                display:
                {
                    viewMode: "clock",
                    buttons:
                    {
                        close: true,
                    },
                    components:
                    {
                        //useTwentyfourHour: true,
                        decades: false,
                        year: false,
                        month: false,
                        date: false,
                        hours: true,
                        minutes: true,
                        seconds: false
                    }
                },
                localization:
                {
                    locale: "en-GB",
                    format: "HH:mm",
                    hourCycle: "h23"
                }
            });
        google.charts.load('current', {'packages':['corechart']});
        google.charts.setOnLoadCallback(drawChart);

        modalValvesState            = new bootstrap.Modal(document.getElementById("modalValvesControlDialog"), {keyboard: true});
        modalBodyTakeParameters     = new bootstrap.Modal(document.getElementById("modalChangeTakeBodyParamsDialog"), {keyboard: true});
        modalHeadsTakeParameters    = new bootstrap.Modal(document.getElementById("modalChangeHeadsParamsDialog"), {keyboard: true});
        modalTailsTakeParameters    = new bootstrap.Modal(document.getElementById("modalChangeTailsParamsDialog"), {keyboard: true});
        modalParallelHeadsParams    = new bootstrap.Modal(document.getElementById("modalParallelHeadsParamsDialog"), {keyboard: true});
        modalParallelTailsParams    = new bootstrap.Modal(document.getElementById("modalParallelTailsParamsDialog"), {keyboard: true});
        refreshState();
    }

    function refreshState()
    {
        clearTimeout (timeoutID);
        let objJson = getJsonFromUrl ("/getState", parseState);
    }

    function RestoreStateAfterRefreshButton(objJson)
    {
        btnStart.setAttribute("class", "btn btn-success btn-sm disabled");

        if (objJson.state == STATE_PREHEATING ||
            objJson.state == STATE_TIMER_DELAY ||
            objJson.state == STATE_DISCHARGE ||
            objJson.state == STATE_PROCESS_HEADS)
        {
            btnHeads.classList.remove("btn-secondary");
            btnHeads.classList.add("btn-info");

            btnBody.remove("btn-info");
            btnBody.classList.add("btn-secondary");

            btnTails.classList.remove("btn-info");
            btnTails.classList.add("btn-secondary");
        }

        if (objJson.state == STATE_TIMER_DELAY ||
            objJson.state == STATE_BODY_TAKE ||
            objJson.state == STATE_BODY_REST ||
            objJson.state == STATE_BODY_STABILIZATION)
        {
            btnHeads.classList.remove("btn-info");
            btnHeads.classList.add("btn-secondary");

            btnBody.classList.remove("btn-secondary");
            btnBody.classList.add("btn-info");

            btnTails.classList.remove("btn-info");
            btnTails.classList.add("btn-secondary");
        }

        if (objJson.state == STATE_PROCESS_TAILS)
        {
            btnHeads.classList.remove("btn-info");
            btnHeads.classList.add("btn-secondary");

            btnBody.classList.remove("btn-info");
            btnBody.classList.add("btn-secondary");

            btnTails.classList.remove("btn-secondary");
            btnTails.classList.add("btn-info");
        }

        spnState1.classList.remove("bg-danger");
        spnState1.classList.remove("bg-success");
        spnState2.classList.remove("bg-danger");
        spnState2.classList.remove("bg-success");
        spnState3.classList.remove("bg-danger");
        spnState3.classList.remove("bg-success");
    }

    function ShowBodyStabilizationValveStatus(objJson)
    {

        if (objJson.heads_valve_mode == VALVE_MODE_AUTO)
        {
            btnHeadsValveState.setAttribute("class", "btn btn-danger btn-sm");
            btnHeadsValveState.innerText = "PAUSED";
        }
        else
        {
            SetValvesState(objJson, btnHeadsValveState, objJson.heads_valve_state, objJson.heads_valve_mode);

        }

        if (objJson.body_valve_mode != VALVE_MODE_AUTO)
        {
            SetValvesState(objJson, btnBodyValveState, objJson.body_valve_state, objJson.body_valve_mode);
        }

        if (objJson.tails_valve_mode == VALVE_MODE_AUTO)
        {
            btnTailsValveState.setAttribute("class", "btn btn-danger btn-sm");
            btnTailsValveState.innerText = "PAUSED";
        }
        else
        {
            SetValvesState(objJson, btnTailsValveState, objJson.tails_valve_state, objJson.tails_valve_mode);
        }
    }

    function SetValvesState(objJson, objValve, iState, iMode)
    {
        let bShowOpenClose = false;
        if (iState == STATE_BODY_TAKE || iState == STATE_BODY_REST || iState == STATE_BODY_STABILIZATION)
        {
            bShowOpenClose = false;
        }
        else
        {
            bShowOpenClose = true;
        }

        if (iMode == VALVE_MODE_AUTO)
        {
            if (iState == VALVE_STATE_CLOSED)
            {
                if (bShowOpenClose)
                    objValve.innerText = "CLOSED";
                objValve.setAttribute("class", "btn btn-danger btn-sm");
            }
            else if (iState == VALVE_STATE_OPEN)
            {
                if (bShowOpenClose)
                    objValve.innerText = "OPEN";
                objValve.setAttribute("class", "btn btn-success btn-sm");
            }
            else if (iState == VALVE_STATE_UNDEFINED)
            {
                if (bShowOpenClose)
                    objValve.innerText = "NO INFO";
                objValve.setAttribute("class", "btn btn-info btn-sm");
            }
        }
        else if (iMode == VALVE_MODE_MANUAL_CLOSE)
        {
            objValve.innerText = "MANUAL CLOSED";
            objValve.setAttribute("class", "btn btn-danger btn-sm");
        }
        else if (iMode == VALVE_MODE_MANUAL_OPEN)
        {
            objValve.innerText = "MANUAL OPEN";
            objValve.setAttribute("class", "btn btn-success btn-sm");
        }
    }

    function SetButtonActive(button)
    {
        button.classList.remove("btn-secondary");
        button.classList.add("btn-info");
    }

    function SetButtonNotActive(button)
    {
        button.classList.remove("btn-info");
        button.classList.add("btn-secondary");
    }

    function ShowOpenClosedValvesState(objJson)
    {
        SetValvesState(objJson, btnHeadsValveState, objJson.heads_valve_state, objJson.heads_valve_mode);
        SetValvesState(objJson, btnBodyValveState, objJson.body_valve_state, objJson.body_valve_mode);
        SetValvesState(objJson, btnTailsValveState, objJson.tails_valve_state, objJson.tails_valve_mode);
    }

    function ShowTemperature(objJson)
    {
        btnColumnTemperature.innerText  = objJson.column_temperature.toFixed(2);
        btnCubeTemperature.innerText    = objJson.cube_temperature.toFixed(2);
    }

    function ShowTemperatureGraph(objJson)
    {
        if (objJson.state != STATE_IDLE)
        {
            const date  = new Date();
            const hour  = date.getHours();
            const min   = date.getMinutes();
            const sec   = date.getSeconds();

            data.addRow([[hour, min, sec], objJson.column_temperature, objJson.cube_temperature]);
            chart.draw(data, options);
        }
    }

    function ShowIdleState(objJson)
    {
        if (prevState != STATE_IDLE)
        {
            pictureValvesControl.removeEventListener("click", pictureValvesControl_onclick, false);
            btnStart.setAttribute("class", "btn btn-success btn-sm");

            SetButtonNotActive(btnHeads);
            SetButtonNotActive(btnBody);
            SetButtonNotActive(btnTails);

            RemoveEventListeners();
        }

        spnState1.innerText = "Press START button.";
        spnState2.innerText = "";
        spnState3.innerText = "";
    }

    function ShowPreheatingState(objJson)
    {
        SetButtonActive(btnHeads);

        spnState1.innerText = "Preheating: " + objJson.column_temperature.toFixed(2) + " / " + objJson.preheat_temperature.toFixed(2);
        spnState2.innerText = "";
        spnState3.innerText = "";
    }

    function ShowTimerDelay(objJson)
    {
        if (prevState != STATE_TIMER_DELAY)
        {
            RemoveEventListeners();
            spnState3.classList.remove("bg-danger");
            spnState3.classList.remove("bg-success");
        }
        spnState1.innerText = "Timer delay: " + toTimeMS(objJson.current_timer_delay) + " / " + toTimeMS(objJson.timer_delay);
        spnState2.innerText = "";
        spnState3.innerText = "";
    }

    function ShowDischarge(objJson)
    {
        spnState1.innerText = "Heads discharge: " + toTimeMS(objJson.current_heads_discharge_time) + " / " + toTimeMS(objJson.heads_discharge_time);
        spnState2.innerText = "";
        spnState3.innerText = "";
    }

    function ShowHeadsProcessing(objJson)
    {

        if (prevState != STATE_PROCESS_HEADS)
        {
            SetButtonActive(btnHeads);
            SetButtonNotActive(btnBody);
            SetButtonNotActive(btnTails);

            btnHeadsValveState.addEventListener("click", btnHeadsValveState_onclick, false);
        }


        spnState1.innerText = "Heads cycle: " + toTimeMS(objJson.heads_take_time) + " / " + toTimeMS(objJson.heads_cycle_time);
        spnState2.innerText = "Heads time: " + toTime(objJson.current_heads_time) + " / " + toTime(objJson.heads_duration);
        if (objJson.current_heads_rest_time != -1)
        {
            spnState3.innerText = "Rest time: " + toTimeMS(objJson.current_heads_rest_time) + " / " + toTimeMS(objJson.heads_cycle_time - objJson.heads_take_time);
            spnState3.setAttribute("class", "bg-danger text-white");
        }
        else if (objJson.current_heads_take_time != -1)
        {
            spnState3.innerText = "Taking heads: " + toTimeMS(objJson.current_heads_take_time) + " / " + toTimeMS(objJson.heads_take_time);
            spnState3.setAttribute("class", "bg-success text-white");
        }
        else
        {
            spnState3.innerText = "";
        }
    }

    function ShowBodyTaking(objJson)
    {
        if (prevState != STATE_BODY_TAKE)
        {
            SetButtonNotActive(btnHeads);
            SetButtonActive(btnBody);
            SetButtonNotActive(btnTails);

            btnHeadsValveState.addEventListener("click", btnHeadsValveStateBodyTake_onclick, false);
            btnBodyValveState.addEventListener("click", btnBodyValveState_onclick, false);
            btnTailsValveState.addEventListener("click", btnHeadsValveStateTailsTake_onclick, false);

        }

        spnState3.classList.remove("bg-danger");
        spnState3.classList.remove("bg-success");

        if (objJson.current_body_take_time != -1)
        {
            btnBodyValveState.innerText = objJson.current_body_take_time.toFixed(2);
        }
    }

    function ShowBodyRest(objJson)
    {
        if (prevState != STATE_BODY_REST)
        {
            SetButtonNotActive(btnHeads);
            SetButtonActive(btnBody);
            SetButtonNotActive(btnTails);

            btnHeadsValveState.addEventListener("click", btnHeadsValveStateBodyTake_onclick, false);
            btnBodyValveState.addEventListener("click", btnBodyValveState_onclick, false);
            btnTailsValveState.addEventListener("click", btnHeadsValveStateTailsTake_onclick, false);
        }
        spnState3.classList.remove("bg-danger");
        spnState3.classList.remove("bg-success");

        if (objJson.current_body_rest_time != -1)
        {
            btnBodyValveState.innerText = objJson.current_body_rest_time.toFixed(2);
        }
    }

    function ShowBodyStabilization(objJson)
    {
        btnBodyValveState.innerText = toTimeMS(objJson.stabilization_time_current);
        btnBodyValveState.setAttribute("class", "btn btn-danger btn-sm");
    }

    function ShowPauseAfterBody(objJson)
    {
        RemoveEventListeners();

        spnState1.innerText = "Process paused: " + toTime(objJson.pause_after_body_time);
        spnState2.innerText = "Hit NEXT button to continue.";
        spnState3.innerText = "";

        if (objJson.current_parallel_heads_rest_time != -1 &&
            objJson.current_parallel_heads_take_time != -1 &&
            objJson.current_parallel_tails_rest_time != -1 &&
            objJson.current_parallel_tails_take_time != -1)
        {
            if (objJson.current_parallel_heads_rest_time >= 0)
                btnHeadsValveState.innerText = objJson.current_parallel_heads_rest_time.toFixed(1);
            else
                btnHeadsValveState.innerText = objJson.current_parallel_heads_take_time.toFixed(1);

            if (objJson.current_parallel_tails_rest_time >= 0)
                btnTailsValveState.innerText = objJson.current_parallel_tails_rest_time.toFixed(1);
            else
                btnTailsValveState.innerText = objJson.current_parallel_tails_take_time.toFixed(1);
        }
   }

   function ShowProcessTails(objJson)
   {
       if (prevState != STATE_PROCESS_TAILS)
       {
           SetButtonNotActive(btnHeads);
           SetButtonNotActive(btnBody);
           SetButtonActive(btnTails);
           btnTailsValveState.addEventListener("click", btnTailsValveState_onclick, false);
       }

       if (objJson.current_tails_rest_time >= 0)
       {
           btnBodyValveState.innerText = objJson.current_tails_rest_time.toFixed(2);
           btnBodyValveState.setAttribute("class", "btn btn-danger btn-sm");
       }

       if (objJson.current_tails_take_time >= 0)
       {
           btnBodyValveState.innerText = objJson.current_tails_take_time.toFixed(2);
           btnBodyValveState.setAttribute("class", "btn btn-success btn-sm");
       }

       spnState1.innerText = "Tails stop temperature: " + objJson.tails_finish_temperature;
       spnState2.innerText = "Tails cycle: " + objJson.tails_cycle_take_time.toFixed(2) + " / " + (objJson.tails_cycle_time).toFixed(2);
       spnState3.innerText = "";
   }

   function ShowParallelHeadsAndTails(objJson)
   {
       if (objJson.state == STATE_BODY_TAKE ||
           objJson.state == STATE_BODY_REST ||
           objJson.state == STATE_BODY_STABILIZATION ||
           objJson.state == STATE_PROCESS_TAILS)
       {
           if (objJson.state != STATE_PROCESS_TAILS)
           {
               if (objJson.state == STATE_BODY_STABILIZATION && objJson.body_column_overheat > 0)
                   spnState1.innerText = "Overheat: " + objJson.body_column_overheat.toFixed(2) + "°C.";
               else
                   spnState1.innerText = objJson.column_temperature.toFixed(2) + " / " + objJson.body_work_temperature.toFixed(2) + "( " + objJson.hysteresis + " )";
               spnState2.innerText = "Stops: " + objJson.body_overheat_stop_counter + " (" + objJson.finish_after_stops + " max)";
               spnState3.innerText = "Cycle: " + objJson.calculated_body_take_time.toFixed(2) + " / " + (objJson.body_cycle_time).toFixed(2); //body_cycle_time or calculated_body_rest_time
           }

           if (objJson.state != STATE_BODY_STABILIZATION)
           {
               if (objJson.current_parallel_heads_rest_time >= 0)
                   btnHeadsValveState.innerText = objJson.current_parallel_heads_rest_time.toFixed(1);
               else
                   btnHeadsValveState.innerText = objJson.current_parallel_heads_take_time.toFixed(1);

               if (objJson.current_parallel_tails_rest_time == -1 && objJson.current_parallel_tails_take_time == -1)
               {
                   btnTailsValveState.innerText = "T < "+objJson.parallel_tails_start_temperature.toFixed(1);
               }
               else
               {
                   if (objJson.current_parallel_tails_rest_time >= 0)
                       btnTailsValveState.innerText = objJson.current_parallel_tails_rest_time.toFixed(1);
                   else
                       btnTailsValveState.innerText = objJson.current_parallel_tails_take_time.toFixed(1);
               }
           }
       }
   }

   function parseState(objJson, status)
   {
        prevObjJson = objJson;
        if (objJson != null)
        {
            //Restore state after page refresh
            if (prevState == -1 && objJson.state != STATE_IDLE)
            {
                RestoreStateAfterRefreshButton(objJson);
            }

            if (objJson.state == STATE_BODY_STABILIZATION)
            {
                ShowBodyStabilizationValveStatus(objJson);
            }
            else
            {
                ShowOpenClosedValvesState(objJson);
            }

            ShowTemperature(objJson);
            ShowTemperatureGraph(objJson);

            switch (objJson.state)
            {
                case STATE_IDLE:
                    ShowIdleState(objJson);
                    break;
                case STATE_PREHEATING:
                    ShowPreheatingState(objJson);
                    break;
                case STATE_TIMER_DELAY:
                    ShowTimerDelay(objJson);
                    break;
                case STATE_DISCHARGE:
                    ShowDischarge(objJson);
                    break;
                case STATE_PROCESS_HEADS:
                    ShowHeadsProcessing(objJson);
                    break;
                case STATE_BODY_TAKE:
                    ShowBodyTaking(objJson);
                    break;
                case STATE_BODY_REST:
                    ShowBodyRest(objJson);
                    break;
                case STATE_BODY_STABILIZATION:
                    ShowBodyStabilization(objJson);
                    break;
                case STATE_PAUSE_AFTER_BODY:
                    ShowPauseAfterBody(objJson);
                    break;
                case STATE_PROCESS_TAILS:
                    ShowProcessTails(objJson);
                    break;
            }

            ShowParallelHeadsAndTails(objJson);
        }
        prevState = objJson.state;
        timeoutID = setTimeout("refreshState();", 1000); // clearTimeout (timeoutID);
    }

    function parseSettings(objJson, status)
    {
        if (objJson != null)
        {
            let tHeadsPIN = document.getElementById("textHeadsPIN");
            tHeadsPIN.value = objJson.heads_valve_pid;
            let tBodyPIN = document.getElementById("textBodyPIN");
            tBodyPIN.value = objJson.body_valve_pid;
            let tTailsPIN = document.getElementById("textTailsPIN");
            tTailsPIN.value = objJson.tails_valve_pid;
        }
    }

    function btnStart_onclick()
    {
        pictureValvesControl.addEventListener("click", pictureValvesControl_onclick, false);
        let objJson = getJsonFromUrl ("/Start", parseState);
        btnStart.setAttribute("class", "btn btn-success btn-sm disabled");
        return objJson;
    }

    function btnNext_onclick()
    {
        let objJson = getJsonFromUrl ("/Next", parseState);
        return objJson;
    }

    function run_onclick()
    {
        divRun.classList.remove("d-none");
        divSettings.classList.add("d-none");
    }

    function settings_onclick()
    {
        divSettings.classList.remove("d-none");
        divRun.classList.add("d-none");
    }

    function radioValveStateChanged(intValve, iState)
    {
        let objJson = getJsonFromUrl ("/SetValveState?valve=" + intValve + "&state="+iState, parseState);
        return objJson;
    }

    function modalChangeTakeBodyParamsDialog_onclose()
    {
        //alert("modalChangeTakeBodyParamsDialog_onclose");
    }

    function btnBodyValveState_onclick()
    {
        let dblBodyCycleTime        = prevObjJson.body_cycle_time;
        let dblBodyTakeTime         = prevObjJson.body_cycle_take_time;
        let dblHysteresis           = prevObjJson.hysteresis;
        let dblBodyWorkTemperature  = prevObjJson.body_work_temperature;

        document.getElementById("inputBodyTakeCycle").value     = dblBodyCycleTime;
        document.getElementById("inputBodyTakeTime").value      = dblBodyTakeTime;
        document.getElementById("inputHysteresis").value        = dblHysteresis;
        document.getElementById("inputWorkTemperature").value   = dblBodyWorkTemperature.toFixed(2);

        document.getElementById("modalChangeTakeBodyParamsDialog").addEventListener("hidden.bs.modal", modalChangeTakeBodyParamsDialog_onclose, false);
        modalBodyTakeParameters.show();
    }

    function pictureValvesControl_onclick()
    {
        document.getElementById("modalValvesControlDialog").addEventListener("hidden.bs.modal", modalValvesControlDialog_onclose, false);

        document.getElementById("radioHeads01").checked = true;
        document.getElementById("radioBody01").checked  = true;
        document.getElementById("radioTails01").checked = true;

        modalValvesState.show();
    }

    function modalValvesControlDialog_onclose ()
    {
        let objJson = getJsonFromUrl ("/RestoreAllValvesState", parseState);
        return objJson;
    }

    function onclick_btnBodyTakeSettings()
    {
        let dblBodyCycleTime    = document.getElementById("inputBodyTakeTime").value;
        let dblBodyTakeTime     = document.getElementById("inputBodyTakeCycle").value;
        let dblHysteresis       = document.getElementById("inputHysteresis").value;
        let dblWorkTemperature  = document.getElementById("inputWorkTemperature").value;

        let objJson = getJsonFromUrl ("/UpdateSettings?body_cycle_take_time=" + dblBodyCycleTime +
                                      "&body_cycle_time=" + dblBodyTakeTime +
                                      "&body_work_temperature=" + dblWorkTemperature +
                                      "&hysteresis=" + dblHysteresis, parseState);

        modalBodyTakeParameters.hide();
        return objJson;
    }

    function btnHeadsValveState_onclick()
    {
        let dblHeadsCycleTime    = prevObjJson.heads_cycle_time;
        let dblHeadsTakeTime     = prevObjJson.heads_take_time;
        let dblHeadsDuration     = prevObjJson.heads_duration;

        document.getElementById("inputHeadsTakeTime").value     = dblHeadsTakeTime;
        document.getElementById("inputHeadsTakeCycle").value    = dblHeadsCycleTime;

        let timeHeadsDuration = secondsToHM(dblHeadsDuration);
        let DateTimeVal = moment(timeHeadsDuration, 'HH:mm').toDate();
        datetimepicker1.dates.setValue(tempusDominus.DateTime.convert(DateTimeVal));

        document.getElementById("modalChangeHeadsParamsDialog").addEventListener("hidden.bs.modal", modalChangeTakeHeadsParamsDialog_onclose, false);
        modalHeadsTakeParameters.show();
    }

    function btnHeadsValveStateBodyTake_onclick()
    {
        let dblParallelHeadsCycleTime   = prevObjJson.parallel_heads_cycle_time;
        let dblParallelHeadsTakeTime    = prevObjJson.parallel_heads_take_time;

        document.getElementById("inputParallelHeadsDuration").value = dblParallelHeadsCycleTime;
        document.getElementById("inputParallelHeadsTakeTime").value = dblParallelHeadsTakeTime;

        document.getElementById("modalParallelHeadsParamsDialog").addEventListener("hidden.bs.modal", modalChangeParallelHeadsParamsDialog_onclose, false);
        modalParallelHeadsParams.show();
    }

    function modalChangeParallelHeadsParamsDialog_onclose()
    {

    }

    function btnHeadsValveStateTailsTake_onclick()
    {
        let dblParallelTailsCycleTime           = prevObjJson.parallel_tails_cycle_time;
        let dblParallelTailsTakeTime            = prevObjJson.parallel_tails_take_time;
        let dblParallelTailsStartTemperature    = prevObjJson.parallel_tails_start_temperature;
        let dblParallelTailsIncrement           = prevObjJson.parallel_tails_increment;

        document.getElementById("inputParallelTailsDuration").value         = dblParallelTailsCycleTime;
        document.getElementById("inputParallelTailsTakeTime").value         = dblParallelTailsTakeTime;
        document.getElementById("inputParallelTailsStartTemperature").value = dblParallelTailsStartTemperature;
        document.getElementById("inputParallelTailsIncrement").value        = dblParallelTailsIncrement;

        document.getElementById("modalParallelTailsParamsDialog").addEventListener("hidden.bs.modal", modalChangeParallelTailsParamsDialog_onclose, false);
        modalParallelTailsParams.show();
    }

    function modalChangeParallelTailsParamsDialog_onclose()
    {

    }

    function btnTailsValveState_onclick()
    {
        let dblTailsCycleTime    = prevObjJson.tails_cycle_time;
        let dblTailsTakeTime     = prevObjJson.tails_cycle_take_time;
        let dblTailsTemperature  = prevObjJson.tails_finish_temperature;

        document.getElementById("inputTailsTakeCycle").value                = dblTailsCycleTime;
        document.getElementById("inputTailsTakeTime").value                 = dblTailsTakeTime;
        document.getElementById("inputTakeTailsFinishTemperature").value    = dblTailsTemperature;

        document.getElementById("modalChangeTailsParamsDialog").addEventListener("hidden.bs.modal", modalChangeTakeTailsParamsDialog_onclose, false);
        modalTailsTakeParameters.show();
    }

    function onclick_btnTailsTakeSettings()
    {
        let dblTailsCycleTime    = document.getElementById("inputTailsTakeCycle").value;
        let dblTailsTakeTime     = document.getElementById("inputTailsTakeTime").value;
        let dblTailsTemperature  = document.getElementById("inputTakeTailsFinishTemperature").value;

        let objJson = getJsonFromUrl ("/UpdateSettings?tails_cycle_time=" + dblTailsCycleTime +
            "&tails_cycle_take_time=" + dblTailsTakeTime +
            "&tails_finish_temperature=" + dblTailsTemperature, parseState);

        modalTailsTakeParameters.hide();
        return objJson;
    }

    function onclick_btnHeadsTakeSettings()
    {
        let dblHeadsCycleTime   = document.getElementById("inputHeadsTakeCycle").value;
        let dblHeadsTakeTime    = document.getElementById("inputHeadsTakeTime").value;
        let timeDuration        = document.getElementById("datetimepicker1Input").value;

        let DateTimeVal = moment(timeDuration, 'HH:mm').toDate();

        let objJson = getJsonFromUrl ("/UpdateSettings?heads_cycle_time=" + dblHeadsCycleTime +
            "&heads_take_time=" + dblHeadsTakeTime +
            "&heads_duration=" + (DateTimeVal.getHours()*3600+DateTimeVal.getMinutes()*60), parseState);

        modalHeadsTakeParameters.hide();
        return objJson;
    }

    function onclick_btnParallelHeadsParamsDialog()
    {
        let dblParallelHeadsCycleTime   = document.getElementById("inputParallelHeadsDuration").value;
        let dblParallelHeadsTakeTime    = document.getElementById("inputParallelHeadsTakeTime").value;

        let objJson = getJsonFromUrl ("/UpdateSettings?parallel_heads_duration=" + dblParallelHeadsCycleTime +
            "&parallel_heads_take_time=" + dblParallelHeadsTakeTime, parseState);

        modalParallelHeadsParams.hide();
        return objJson;
    }

    function onclick_btnParallelTailsParamsDialog()
    {
        let dblParallelTailsTakeTime            = document.getElementById("inputParallelTailsTakeTime").value;
        let dblParallelTailsCycleTime           = document.getElementById("inputParallelTailsDuration").value;
        let dblParallelTailsStartTemperature    = document.getElementById("inputParallelTailsStartTemperature").value;
        let dblParallelTailsIncrement           = document.getElementById("inputParallelTailsIncrement").value;

        let objJson = getJsonFromUrl ("/UpdateSettings?parallel_tails_take_time=" + dblParallelTailsTakeTime +
            "&parallel_tails_duration=" + dblParallelTailsCycleTime +
            "&parallel_tails_start_temperature=" + dblParallelTailsStartTemperature +
            "&parallel_tails_increment=" + dblParallelTailsIncrement, parseState);

        modalParallelTailsParams.hide();
        return objJson;

    }

    function modalChangeTakeHeadsParamsDialog_onclose()
    {
    }

    function modalChangeTakeTailsParamsDialog_onclose()
    {
    }

    function RemoveEventListeners()
    {
        btnBodyValveState.removeEventListener("click", btnBodyValveState_onclick, false);
        btnHeadsValveState.removeEventListener("click", btnHeadsValveState_onclick, false);
        btnTailsValveState.removeEventListener("click", btnTailsValveState_onclick, false);
        btnHeadsValveState.removeEventListener("click", btnHeadsValveStateBodyTake_onclick, false);
        btnTailsValveState.removeEventListener("click", btnHeadsValveStateTailsTake_onclick, false);
    }
    </script>
</head>

<body onload="document_onload();" style="min-width: 1000px;">

<header class="main-header" >
    <nav class="navbar navbar-expand-md navbar-light">
        <div class="container-fluid">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">

                <li class="nav-item">
                    <a class="navbar-brand" href="#">
                        <img src="img/logo.jpg" alt="Avatar Logo" style="width:40px;" class="rounded-pill">
                    </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link active" style="" href="#">Help</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link active" href="#">Contacts</a>
                </li>

            </ul>
        </div>
    </nav>
</header>

<section>
    <div class="container-fluid">
        <div class="row">
            <div class="col-1" style="max-width:42px;">
                <nav class="navbar .bg-dark">
                    <div>
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <a class="navbar-brand" style="font-size: .5rem;" href="#" onclick="run_onclick();">
                                    <img src="img/distill5.png" style="width:32px; height: 32px" class="rounded float-start" alt="Column"/>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" style="font-size: .5rem;" href="#" onclick="settings_onclick();">
                                    <img src="img/settings1.png" style="width:32px; height: 32px" class="rounded float-start" alt="Column"/>
                                </a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
            <div class="container-fluid col-11">
                <div id="run_div" class="row">
                    <div class="col-md-2" style="min-width: 275px;">
                        <img src="img/ss2.png" class="rounded float-start" alt="Column"/>

                        <button id="btnHeadsValveState" type="button" class="btn btn-success btn-sm"
                                style="margin-top: 10px; margin-left: 10px; width: 100px; --bs-btn-font-size: .5rem;">
                            OPEN
                        </button>
                        <p></p>
                        <button id="btnBodyValveState" type="button" class="btn btn-danger btn-sm"
                                style="margin-top: 30px; margin-left: 10px; width: 100px; --bs-btn-font-size: .5rem;">
                            CLOSED
                        </button>
                        <p></p>
                        <button id="btnColumnTemperature" type="button" class="btn btn-info btn-sm"
                                style="margin-top: 10px; margin-left: 10px; width: 100px; --bs-btn-font-size: .5rem;">
                            77.7
                        </button>
                        <p></p>
                        <button id="btnTailsValveState" type="button" class="btn btn-danger btn-sm"
                                style="margin-top: 10px; margin-left: 10px; width: 100px; --bs-btn-font-size: .5rem;">
                            CLOSED
                        </button>
                        <p></p>
                        <button id="btnCubeTemperature" type="button" class="btn btn-info btn-sm"
                                style="margin-top: 10px; margin-left: 10px; width: 100px; --bs-btn-font-size: .5rem;">
                            87.7
                        </button>
                    </div>
                    <div class="col-md-9" style="min-width: 600px;">
                        <button id="btnHeads" type="button" class="btn btn-secondary btn-sm mr-1 disabled"
                                style="--bs-btn-font-size: .5rem;">
                            Heads
                        </button>
                        <button id="btnBody" type="button" class="btn btn-secondary btn-sm mr-1 disabled"
                                style="margin-left: 30px; --bs-btn-font-size: .5rem;">
                            Body
                        </button>
                        <button id="btnTails" type="button" class="btn btn-secondary btn-sm mr-1 disabled"
                                style="margin-left: 30px; --bs-btn-font-size: .5rem;">
                            Tails
                        </button>

                        <img id="pictureValvesControl" src="img/valve3.png" style="width:32px; height: 32px; margin-left: 30px;" class="rounded" alt="Valves control"/>

                        <p></p>
                        <button id="btnStart" onclick="btnStart_onclick();" type="button"
                                class="btn btn-success btn-sm" style="width: 100px; --bs-btn-font-size: .5rem;">
                            START
                        </button>
                        <button id="btnNext" onclick="btnNext_onclick();" type="button" class="btn btn-dark btn-sm"
                                style="margin-left: 30px; width: 100px; --bs-btn-font-size: .5rem;">
                            NEXT
                        </button>
                        <p></p>

                        <button id="btnState" type="button" class="btn btn-info btn-sm disabled"
                                style="width: 300px; --bs-btn-font-size: .5rem; pointer-events: none;">
                            <span id="spanState1" class="badge badge-info">...</span>
                            <br/><span id="spanState2" class="badge badge-info"></span>
                            <br/><span id="spanState3" class="badge badge-info"></span>
                        </button>
                        <p></p>

                        <div id="curve_chart" style="width: 400px; height: 200px">
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <div id="settings_div" class="col-md-11 d-none">
            <table class="table" style="width: 50%">
                <thead>
                <tr>
                    <th scope="col">Option name</th>
                    <th scope="col">Value</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <th scope="row">
                        <div class="input-group mb-3">
                            <span class="input-group-text" id="basic-addon1">Heads PIN #</span>
                        </div>
                    </th>
                    <td>
                        <div class="input-group mb-3">
                            <input name="textHeadsPIN" id="textHeadsPIN" type="text" class="form-control"
                                   placeholder="Heads PIN #" aria-label="Heads PIN #"
                                   aria-describedby="basic-addon1">
                        </div>
                    </td>
                </tr>
                <tr>
                    <th scope="row">
                        <div class="input-group mb-3">
                            <span class="input-group-text" id="basic-addon2">Hearts PIN #</span>
                        </div>
                    </th>
                    <td>
                        <div class="input-group mb-3">
                            <input name="textHeadsPIN" id="textBodyPIN" type="text" class="form-control"
                                   placeholder="Heads PIN #" aria-label="Heads PIN #"
                                   aria-describedby="basic-addon2">
                        </div>
                    </td>
                </tr>
                <tr>
                    <th scope="row">
                        <div class="input-group mb-3">
                            <span class="input-group-text" id="basic-addon3">Tails PIN #</span>
                        </div>
                    </th>
                    <td>
                        <div class="input-group mb-3">
                            <input name="textHeadsPIN" id="textTailsPIN" type="text" class="form-control"
                                   placeholder="Heads PIN #" aria-label="Heads PIN #"
                                   aria-describedby="basic-addon3">
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

    </div>
</section>

<section>
    <div class="modal fade" id="modalParallelTailsParamsDialog" tabindex="-1" aria-labelledby="myModalLabel5" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="myModalLabel5">Parallel tails settings</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">

                    <div data-mdb-input-init class="form-outline" style="width: 12rem;">
                        <input step="0.1" value="" type="number" id="inputParallelTailsTakeTime" class="form-control" />
                        <label class="form-label" for="inputParallelTailsTakeTime">Parallel tails take cycle</label>
                    </div>

                    <div data-mdb-input-init class="form-outline" style="width: 12rem;">
                        <input step="1" value="" type="number" id="inputParallelTailsDuration" class="form-control" />
                        <label class="form-label" for="inputParallelTailsDuration">Parallel tails cycle time</label>
                    </div>

                    <div data-mdb-input-init class="form-outline" style="width: 12rem;">
                        <input step="1" value="" type="number" id="inputParallelTailsStartTemperature" class="form-control" />
                        <label class="form-label" for="inputParallelTailsStartTemperature">Parallel tails start temperature</label>
                    </div>

                    <div data-mdb-input-init class="form-outline" style="width: 12rem;">
                        <input step="1" value="" type="number" id="inputParallelTailsIncrement" class="form-control" />
                        <label class="form-label" for="inputParallelTailsIncrement">Parallel tails increment</label>
                    </div>

                </div>
                <div class="modal-footer">
                    <button onclick="onclick_btnParallelTailsParamsDialog();" type="button" class="btn btn-primary">Save changes</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" >Close</button>
                </div>
            </div>
        </div>
    </div>
</section>

<section>
    <div class="modal fade" id="modalParallelHeadsParamsDialog" tabindex="-1" aria-labelledby="myModalLabel4" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="myModalLabel4">Parallel heads settings</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">

                    <div data-mdb-input-init class="form-outline" style="width: 12rem;">
                        <input step="0.1" value="" type="number" id="inputParallelHeadsTakeTime" class="form-control" />
                        <label class="form-label" for="inputParallelHeadsTakeTime">Parallel heads take cycle</label>
                    </div>

                    <div data-mdb-input-init class="form-outline" style="width: 12rem;">
                        <input step="1" value="" type="number" id="inputParallelHeadsDuration" class="form-control" />
                        <label class="form-label" for="inputParallelHeadsDuration">Parallel heads cycle time</label>
                    </div>

                </div>
                <div class="modal-footer">
                    <button onclick="onclick_btnParallelHeadsParamsDialog();" type="button" class="btn btn-primary">Save changes</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" >Close</button>
                </div>
            </div>
        </div>
    </div>
</section>

<section>
    <div class="modal fade" id="modalChangeTailsParamsDialog" tabindex="-1" aria-labelledby="myModalLabel3" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="myModalLabel3">Tails take settings</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div data-mdb-input-init class="form-outline" style="width: 12rem;">
                        <input step="0.1" value="" type="number" id="inputTailsTakeTime" class="form-control" />
                        <label class="form-label" for="inputTailsTakeTime">Tails take time</label>
                    </div>

                    <div data-mdb-input-init class="form-outline" style="width: 12rem;">
                        <input step="1" value="" type="number" id="inputTailsTakeCycle" class="form-control" />
                        <label class="form-label" for="inputTailsTakeCycle">Tails take cycle</label>
                    </div>

                    <div data-mdb-input-init class="form-outline" style="width: 12rem;">
                        <input step="1" value="" type="number" id="inputTakeTailsFinishTemperature" class="form-control" />
                        <label class="form-label" for="inputTakeTailsFinishTemperature">Stop temperature</label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button onclick="onclick_btnTailsTakeSettings();" type="button" class="btn btn-primary">Save changes</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" >Close</button>
                </div>
            </div>
        </div>
    </div>
</section>

<section>
    <div class="modal fade" id="modalChangeHeadsParamsDialog" tabindex="-1" aria-labelledby="myModalLabel2" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="myModalLabel2">Heads take settings</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div data-mdb-input-init class="form-outline" style="width: 12rem;">
                        <input step="0.01" value="" type="number" id="inputHeadsTakeTime" class="form-control" />
                        <label class="form-label" for="inputHeadsTakeTime">Heads take time</label>
                    </div>

                    <div data-mdb-input-init class="form-outline" style="width: 12rem;">
                        <input step="1" value="" type="number" id="inputHeadsTakeCycle" class="form-control" />
                        <label class="form-label" for="inputHeadsTakeCycle">Heads take cycle</label>
                    </div>

                    <div class="well">
                        <div class="input-group" id="datetimepicker1" data-td-target-input="nearest" data-td-target-toggle="nearest" >

                            <input id="datetimepicker1Input" type="text" class="form-control" data-td-target="#datetimepicker1" />
                            <span class="input-group-text" data-td-target="#datetimepicker1" data-td-toggle="datetimepicker" >
                              <span class="fas fa-calendar"></span>
                            </span>

                        </div>
                        <label class="form-label" for="datetimepicker1Input">Heads duration</label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button onclick="onclick_btnHeadsTakeSettings();" type="button" class="btn btn-primary">Save changes</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" >Close</button>
                </div>
            </div>
        </div>
    </div>
</section>

<section>
    <div class="modal fade" id="modalChangeTakeBodyParamsDialog" tabindex="-1" aria-labelledby="myModalLabel1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="myModalLabel1">Body take settings</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div data-mdb-input-init class="form-outline" style="width: 12rem;">
                        <input step="0.01" value="" type="number" id="inputBodyTakeTime" class="form-control" />
                        <label class="form-label" for="inputBodyTakeTime">Body take time</label>
                    </div>

                    <div data-mdb-input-init class="form-outline" style="width: 12rem;">
                        <input step="1" value="" type="number" id="inputBodyTakeCycle" class="form-control" />
                        <label class="form-label" for="inputBodyTakeCycle">Body take cycle</label>
                    </div>

                    <div data-mdb-input-init class="form-outline" style="width: 12rem;">
                        <input step="0.01" value="" type="number" id="inputWorkTemperature" class="form-control" />
                        <label class="form-label" for="inputWorkTemperature">Work temperature</label>
                    </div>

                    <div data-mdb-input-init class="form-outline" style="width: 12rem;">
                        <input step="0.001" value="" type="number" id="inputHysteresis" class="form-control" />
                        <label class="form-label" for="inputHysteresis">Hysteresis</label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button onclick="onclick_btnBodyTakeSettings();" type="button" class="btn btn-primary">Save changes</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" >Close</button>
                </div>
            </div>
        </div>
    </div>
</section>

<section>
    <div class="modal fade" id="modalValvesControlDialog" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="myModalLabel">Manual valves control</h5>
                    <button
                            type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="Close"
                    ></button>
                </div>
                <div class="modal-body">
                    <table class="table">
                        <tbody>
                        <tr>
                            <th scope="row">Heads</th>
                            <td>
                                <div class="form-check">
                                <input onchange="radioValveStateChanged(0,0);" class="form-check-input" type="radio" name="radioHeads" id="radioHeads00">
                                <label class="form-check-label" for="radioHeads00">
                                    Close
                                </label>
                                </div>
                            </td>
                            <td>
                                <div class="form-check">
                                    <input onchange="radioValveStateChanged(0,1);" class="form-check-input" type="radio" name="radioHeads" id="radioHeads01" checked>
                                    <label class="form-check-label" for="radioHeads01">
                                        Auto
                                    </label>
                                </div>
                            </td>
                            <td>
                                <div class="form-check">
                                    <input onchange="radioValveStateChanged(0,2);" class="form-check-input" type="radio" name="radioHeads" id="radioHeads02">
                                    <label class="form-check-label" for="radioHeads02">
                                        Open
                                    </label>
                                </div>

                            </td>
                        </tr>




                        <tr>
                            <th scope="row">Body</th>
                            <td>
                                <div class="form-check">
                                    <input onchange="radioValveStateChanged(1,0);" class="form-check-input" type="radio" name="radioBody" id="radioBody00">
                                    <label class="form-check-label" for="radioBody00">
                                        Close
                                    </label>
                                </div>
                            </td>
                            <td>
                                <div class="form-check">
                                    <input onchange="radioValveStateChanged(1,1);" class="form-check-input" type="radio" name="radioBody" id="radioBody01" checked>
                                    <label class="form-check-label" for="radioBody01">
                                        Auto
                                    </label>
                                </div>
                            </td>
                            <td>
                                <div class="form-check">
                                    <input onchange="radioValveStateChanged(1,2);" class="form-check-input" type="radio" name="radioBody" id="radioBody02">
                                    <label class="form-check-label" for="radioBody02">
                                        Open
                                    </label>
                                </div>

                            </td>
                        </tr>



                        <tr>
                            <th scope="row">Tails</th>
                            <td>
                                <div class="form-check">
                                    <input onchange="radioValveStateChanged(2,0);" class="form-check-input" type="radio" name="radioTails" id="radioTails00">
                                    <label class="form-check-label" for="radioTails00">
                                        Close
                                    </label>
                                </div>
                            </td>
                            <td>
                                <div class="form-check">
                                    <input onchange="radioValveStateChanged(2,1);" class="form-check-input" type="radio" name="radioTails" id="radioTails01" checked>
                                    <label class="form-check-label" for="radioTails01">
                                        Auto
                                    </label>
                                </div>
                            </td>
                            <td>
                                <div class="form-check">
                                    <input onchange="radioValveStateChanged(2,2);" class="form-check-input" type="radio" name="radioTails" id="radioTails02">
                                    <label class="form-check-label" for="radioTails02">
                                        Open
                                    </label>
                                </div>

                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" >
                        Close
                    </button>
                </div>
            </div>
        </div>
    </div>

</section>

</body>
</html>