<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class="row row-flex">
    <div class="col-xs-12 text-center">
        <h1>Control</h1>
    </div>
    <div class='col-xs-6 text-center box-me'>
        <!-- Use data-confirm-message to set the exact message that pops up in the alert window.  -->

        <a href="#"
        data-confirm-message="Are you sure you want to remotely start the pump?"
        data-refreshpause="1"
        data-command=""
        data-staticsend="{'tag': 'cmd_Start', 'val': 1}"
        data-channelId="<%= channels["rigpump.writeplctag"].channelId %>"
        data-techname="<%=channels["rigpump.writeplctag"].techName %>"
        data-name="<%= channels["rigpump.writeplctag"].name%>"
        data-nodechannelcurrentId="<%= channels["rigpump.writeplctag"].nodechannelcurrentId %>"
        id="<%= channels["rigpump.writeplctag"].channelId %>"
        class="btn btn-large btn-theme animated confirmstatic pad15">
        Start</a>
    </div>
    <div class='col-xs-6 text-center box-me'>
        <a href="#"
        data-confirm-message="Are you sure you want to remotely stop the pump?"
        data-refreshpause="1"
        data-command=""
        data-staticsend="{'tag': 'cmd_Stop', 'val': 1}"
        data-channelId="<%= channels["rigpump.writeplctag"].channelId %>"
        data-techname="<%=channels["rigpump.writeplctag"].techName %>"
        data-name="<%= channels["rigpump.writeplctag"].name%>"
        data-nodechannelcurrentId="<%= channels["rigpump.writeplctag"].nodechannelcurrentId %>"
        id="<%= channels["rigpump.writeplctag"].channelId %>"
        class="btn btn-large btn-theme animated confirmstatic pad15">
        Stop</a>

    </div>
</div>
<div class="row row-flex">
    <div class='col-xs-6 text-center box-me'>
        <h2>Auto/Manual Mode</h2>
        <a href="#"
            data-confirm-message="Are you sure you want to switch to Auto Mode?"
            data-refreshpause="1"
            data-command=""
            data-staticsend="{'tag': 'mode_AutoManual', 'val': 1}"
            data-channelId="<%= channels["rigpump.writeplctag"].channelId %>"
            data-techname="<%=channels["rigpump.writeplctag"].techName %>"
            data-name="<%= channels["rigpump.writeplctag"].name%>"
            data-nodechannelcurrentId="<%= channels["rigpump.writeplctag"].nodechannelcurrentId %>"
            id="<%= channels["rigpump.writeplctag"].channelId %>"
            class="btn btn-large btn-theme animated confirmstatic pad15">
            Auto Mode</a>
        <br />

        <a href="#"
            data-confirm-message="Are you sure you want to switch to Manual Mode?"
            data-refreshpause="1"
            data-command=""
            data-staticsend="{'tag': 'mode_AutoManual', 'val': 0}"
            data-channelId="<%= channels["rigpump.writeplctag"].channelId %>"
            data-techname="<%=channels["rigpump.writeplctag"].techName %>"
            data-name="<%= channels["rigpump.writeplctag"].name%>"
            data-nodechannelcurrentId="<%= channels["rigpump.writeplctag"].nodechannelcurrentId %>"
            id="<%= channels["rigpump.writeplctag"].channelId %>"
            class="btn btn-large btn-theme animated confirmstatic pad15">
            Manual Mode</a>
    </div>

    <div class='col-xs-6 text-center box-me'>
        <h2>Control Mode</h2>
        <a href="#"
            data-confirm-message="Are you sure you want to switch to Pressure Control Mode?"
            data-refreshpause="1"
            data-command=""
            data-staticsend="{'tag': 'controlMode', 'val': 0}"
            data-channelId="<%= channels["rigpump.writeplctag"].channelId %>"
            data-techname="<%=channels["rigpump.writeplctag"].techName %>"
            data-name="<%= channels["rigpump.writeplctag"].name%>"
            data-nodechannelcurrentId="<%= channels["rigpump.writeplctag"].nodechannelcurrentId %>"
            id="<%= channels["rigpump.writeplctag"].channelId %>"
            class="btn btn-large btn-theme animated confirmstatic pad15">
            Pressure Control</a>
        <br />

        <a href="#"
            data-confirm-message="Are you sure you want to switch to Flow Control Mode?"
            data-refreshpause="1"
            data-command=""
            data-staticsend="{'tag': 'controlMode', 'val': 1}"
            data-channelId="<%= channels["rigpump.writeplctag"].channelId %>"
            data-techname="<%=channels["rigpump.writeplctag"].techName %>"
            data-name="<%= channels["rigpump.writeplctag"].name%>"
            data-nodechannelcurrentId="<%= channels["rigpump.writeplctag"].nodechannelcurrentId %>"
            id="<%= channels["rigpump.writeplctag"].channelId %>"
            class="btn btn-large btn-theme animated confirmstatic pad15">
            Flow Control</a>
    </div>
</div>



<div class="row row-flex">
    <div class="col-md-12 text-center box-me">
        <h2>Control Setpoint</h2>
        <div data-valueupdate="auto_manual" data-refreshonupdate=true>
            <% if (channels["rigpump.auto_manual"].value === "Manual") { %>
                <div class="m vfdFrequency">
                    <h3>VFD Frequency</h3>
                    <hr />
                    <br />

                    <div class="entry-top-level" id="flowTarget">
                        <form class="form-inline">
                            <div class="form-group">
                                <input class="form-control val_box"
                                type="number"
                                step="any"
                                value="<%=channels['rigpump.vfd_frequency_setpoint'].value %>">
                            </div>
                            <a href="#"
                            data-confirm-message="Are you sure you want to do this?"
                            data-refreshpause="1"
                            data-command=""
                            data-staticsend="{'tag': 'cfg_PID_ManualSP', 'val': <%=channels['rigpump.vfd_frequency_setpoint'].value %>}"
                            data-channelId="<%= channels["rigpump.writeplctag"].channelId %>"
                            data-techname="<%=channels["rigpump.writeplctag"].techName %>"
                            data-name="<%= channels["rigpump.writeplctag"].name%>"
                            data-nodechannelcurrentId="<%= channels["rigpump.writeplctag"].nodechannelcurrentId %>"
                            id="<%= channels["rigpump.writeplctag"].channelId %>"
                            class="btn btn-large btn-theme animated setstatic material-icons">send</a>
                        </form>
                    </div>
                </div>
            <% } else { %>
                <div data-valueupdate="auto_control_mode" data-refreshonupdate=true>
                    <% if (channels["rigpump.auto_control_mode"].value === "Flow"){ %>

                        <div class="m flowRate">
                            <h3>Flow Rate</h3>
                            <hr />
                            <br />

                            <div class="entry-top-level" id="flowRate">
                                <form class="form-inline">
                                    <div class="form-group">
                                        <input class="form-control val_box"
                                        type="number"
                                        step="any"
                                        value="<%=channels['rigpump.flow_rate_setpoint'].value %>">
                                    </div>
                                    <a href="#"
                                    data-confirm-message="Are you sure you want to do this?"
                                    data-refreshpause="1"
                                    data-command=""
                                    data-staticsend="{'tag': 'cfg_PID_FlowSP', 'val': <%=channels['rigpump.flow_rate_setpoint'].value %>}"
                                    data-channelId="<%= channels["rigpump.writeplctag"].channelId %>"
                                    data-techname="<%=channels["rigpump.writeplctag"].techName %>"
                                    data-name="<%= channels["rigpump.writeplctag"].name%>"
                                    data-nodechannelcurrentId="<%= channels["rigpump.writeplctag"].nodechannelcurrentId %>"
                                    id="<%= channels["rigpump.writeplctag"].channelId %>"
                                    class="btn btn-large btn-theme animated setstatic material-icons">send</a>
                                </form>
                            </div>
                        </div>
                    <% } else { %>

                        <div class="m dischargePressure">
                            <h3>Discharge Pressure</h3>
                            <hr />
                            <br />

                            <div class="entry-top-level" id="dischargePressure">
                                <form class="form-inline">
                                    <div class="form-group">
                                        <input class="form-control val_box"
                                        type="number"
                                        step="any"
                                        value="<%=channels['rigpump.discharge_pressure_setpoint'].value %>">
                                    </div>
                                    <a href="#"
                                    data-confirm-message="Are you sure you want to do this?"
                                    data-refreshpause="1"
                                    data-command=""
                                    data-staticsend="{'tag': 'cfg_PID_DischargePressureSP', 'val': <%=channels['rigpump.discharge_pressure_setpoint'].value %>}"
                                    data-channelId="<%= channels["rigpump.writeplctag"].channelId %>"
                                    data-techname="<%=channels["rigpump.writeplctag"].techName %>"
                                    data-name="<%= channels["rigpump.writeplctag"].name%>"
                                    data-nodechannelcurrentId="<%= channels["rigpump.writeplctag"].nodechannelcurrentId %>"
                                    id="<%= channels["rigpump.writeplctag"].channelId %>"
                                    class="btn btn-large btn-theme animated setstatic material-icons">send</a>
                                </form>
                            </div>
                        </div>
                    <% } %>
                </div>
            <% } %>
        </div>
    </div>

</div>

<script>

$('.val_box').each(function(topLevel){
    $(this).change(function(){
        var id = "#" + $(this).closest(".entry-top-level").attr('id');
        if (id !== "#undefined"){
            // console.log("before parse", $(id).find('.setstatic').attr('data-staticsend').replace(/'/g, '"'));
            var jsobj = JSON.parse($(id).find('.setstatic').attr('data-staticsend').replace(/'/g, '"'));
            // console.log("after parse", jsobj)
            // var tagStart = $(id).find('.setstatic').attr('data-staticsend').indexOf("tag") + 3;
            // var tagStop = $(id).find('.setstatic').attr('data-staticsend').indexOf("] ]");
            // var tag = $(id).find('.setstatic').attr('data-staticsend').substring(tagStart, tagStop).split(',')[0].replace(/'/g,"");
            var val = $(id).find('.val_box').val();
            var newData = "{'tag': '" + jsobj.tag +"', 'val': " + val.toString() + "}"
            var tag = $(id).find('.setstatic').attr('data-staticsend', newData);
            console.log($(id).find('.setstatic').attr('data-staticsend'));
        }
    });
});

</script>

<style>
    .uppercase {
        text-transform: uppercase;
        font-size: 14px;
        color: #666;
        font-weight: 400;
        letter-spacing: 1px;
        z-index: 100;
    }

    .box-me {
        position: relative;
        padding: 0.5em;
        padding-bottom: 1.5em;
        border: 1px solid #eee;
        /*margin: 1em 0;*/
    }
    .row-flex {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        flex-wrap: wrap;
    }

    .row-flex > [class*='col-'] {
        display: flex;
        flex-direction: column;
    }

    .m {
        text-align: center;
    }
    .val_box {
        width:75% !important;
    }

    .setstatic {
        margin-top: 10px;
    }

    p {
        font-size: 1.25em;
    }

</style>
