<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<% for(var i = 1; i<=3; i++){ %>
    <% if (((i == 1) && ([2, 3, 6, 7, 10, 11, 14, 15].indexOf(parseInt(channels["transferstation.systems_enabled"].value)) != -1)) || ((i == 2) && ([4, 5, 6, 7, 12, 13, 14, 15].indexOf(parseInt(channels["transferstation.systems_enabled"].value)) != -1)) || ((i == 3) && ([8, 9, 10, 11, 12, 13, 14, 15].indexOf(parseInt(channels["transferstation.systems_enabled"].value)) != -1))){ %>
        <div class="row row-flex">
            <div class="col-md-12" style="text-align:center;">
                <h2>System <%=i %>: <%= channels["transferstation.system_status_" + i].value %></h2>
            </div>
            <div class="col-md-2 box-me">
                <div class="m levelSensor">
                    <h3 class="uppercase">Pond Level</h3>
                    <h3 class="uppercase">LT<%= i %>1</h3>
                    <hr />
                    <br />
                    <p><span data-valueupdate="lt<%=i %>1_level" data-refreshonupdate=true>
                        <%= Math.round(channels["transferstation.lt" + i + "1_level"].value * 100) / 100 %> ft.
                    </span></p>
                </div>
            </div>

            <div class="col-md-2 box-me">
                <div class="m chargePump">
                    <h3 class="uppercase">Charge Pump</h3>
                    <h3 class="uppercase">MC<%= i %>1</h3>
                    <hr />
                    <br />
                    <p><span data-valueupdate="mc<%=i %>1_frequency" data-refreshonupdate=true>
                        <%= Math.round(channels["transferstation.mc" + i + "1_frequency"].value * 100) / 100 %> Hz
                    </span></p>
                    <p><span data-valueupdate="mc<%=i %>1_current" data-refreshonupdate=true>
                        <%= Math.round(channels["transferstation.mc" + i + "1_current"].value * 100) / 100 %> A
                    </span></p>
                </div>
            </div>

            <div class="col-md-2 box-me">
                <div class="m boosterPumpIntakePressure">
                    <h3 class="uppercase">BP Intake</h3>
                    <h3 class="uppercase">PT<%= i %>1</h3>
                    <hr />
                    <br />
                    <p><span data-valueupdate="pt<%=i %>1_pressure" data-refreshonupdate=true>
                        <%= Math.round(channels["transferstation.pt" + i + "1_pressure"].value * 100) / 100 %> PSI
                    </span></p>
                </div>
            </div>

            <div class="col-md-2 box-me">
                <div class="m boosterPump">
                    <h3 class="uppercase">Charge Pump</h3>
                    <h3 class="uppercase">MC<%= i %>1</h3>
                    <hr />
                    <br />
                    <p><span data-valueupdate="mc<%=i %>2_frequency" data-refreshonupdate=true>
                        <%= Math.round(channels["transferstation.mc" + i + "2_frequency"].value * 100) / 100 %> Hz
                    </span></p>
                    <p><span data-valueupdate="mc<%=i %>2_current" data-refreshonupdate=true>
                        <%= Math.round(channels["transferstation.mc" + i + "2_current"].value * 100) / 100 %> A
                    </span></p>
                </div>
            </div>

            <div class="col-md-2 box-me">
                <div class="m boosterPumpDischargePressure">
                    <h3 class="uppercase">BP Discharge</h3>
                    <h3 class="uppercase">PT<%= i %>2</h3>
                    <hr />
                    <br />
                    <p><span data-valueupdate="pt<%=i %>2_pressure" data-refreshonupdate=true>
                        <%= Math.round(channels["transferstation.pt" + i + "2_pressure"].value * 100) / 100 %> PSI
                    </span></p>
                </div>
            </div>

            <div class="col-md-2 box-me">
                <div class="m flowSensor">
                    <h3 class="uppercase">Flow</h3>
                    <h3 class="uppercase">FT<%= i %>1</h3>
                    <hr />
                    <br />
                    <p><span data-valueupdate="ft<%=i %>1_flow" data-refreshonupdate=true>
                        <%= Math.round(channels["transferstation.ft" + i + "1_flow"].value * 100) / 100 %> BPD
                    </span></p>
                </div>
            </div>
        </div>

        <div class="row row-flex">
            <div class="col-md-2 box-me">
                <div class="m priority">
                    <h3 class="uppercase">Priority</h3>
                    <hr />
                    <br />

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

            <div class="col-md-2 box-me">
                <div class="m boosterPumpIntakePressureTarget">
                    <h3 class="uppercase">BP Pressure SP</h3>
                    <hr />
                    <br />

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

            <div class="col-md-2 box-me">
                <div class="m flowTarget">
                    <h3 class="uppercase">Flow Target</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['transferstation.flow_target_' + i].value %>">
                            </div>
                            <a href="#"
                            data-confirm-message="Are you sure you want to do this?"
                            data-refreshpause="1"
                            data-command=""
                            data-staticsend="{'tag': 'par_SystemFlowrate[<%=i %>]', 'val': <%=channels['transferstation.flow_target_' + i].value %>}"
                            data-channelId="<%= channels["transferstation.writeplctag"].channelId %>"
                            data-techname="<%=channels["transferstation.writeplctag"].techName %>"
                            data-name="<%= channels["transferstation.writeplctag"].name%>"
                            data-nodechannelcurrentId="<%= channels["transferstation.writeplctag"].nodechannelcurrentId %>"
                            id="<%= channels["transferstation.writeplctag"].channelId %>"
                            class="btn btn-large btn-theme animated setstatic material-icons">send</a>
                        </form>
                    </div>
                </div>
            </div>

            <div class="col-md-2 box-me">
                <div class="m getHelpFrequency">
                    <h3 class="uppercase">Get Help Freq.</h3>
                    <hr />
                    <br />

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

            <div class="col-md-2 box-me">
                <div class="m takeoverFrequency">
                    <h3 class="uppercase">Takeover Freq.</h3>
                    <hr />
                    <br />

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

            <div class="col-md-2 box-me">
                <div class="m takeoverFrequency">
                    <h3 class="uppercase">Manual Mode</h3>
                    <hr />
                    <br />
                    <% if (channels['transferstation.auto_manual'].value === "Manual"){ %>
                        <a href="#"
                            data-confirm-message="Are you sure you want to remotely start the transfer station?"
                            data-refreshpause="1"
                            data-command=""
                            data-staticsend="{'tag': 'cmd_ManualStart[<%= i %>]', 'val': 1}"
                            data-channelId="<%= channels["transferstation.writeplctag"].channelId %>"
                            data-techname="<%=channels["transferstation.writeplctag"].techName %>"
                            data-name="<%= channels["transferstation.writeplctag"].name%>"
                            data-nodechannelcurrentId="<%= channels["transferstation.writeplctag"].nodechannelcurrentId %>"
                            id="<%= channels["transferstation.writeplctag"].channelId %>"
                            class="btn btn-large btn-success animated confirmstatic"
                            style="width:90%;">
                            Start</a>
                        <br />
                        <a href="#"
                            data-confirm-message="Are you sure you want to remotely start the transfer station?"
                            data-refreshpause="1"
                            data-command=""
                            data-staticsend="{'tag': 'cmd_ManualStop[<%= i %>]', 'val': 1}"
                            data-channelId="<%= channels["transferstation.writeplctag"].channelId %>"
                            data-techname="<%=channels["transferstation.writeplctag"].techName %>"
                            data-name="<%= channels["transferstation.writeplctag"].name%>"
                            data-nodechannelcurrentId="<%= channels["transferstation.writeplctag"].nodechannelcurrentId %>"
                            id="<%= channels["transferstation.writeplctag"].channelId %>"
                            class="btn btn-large btn-danger animated confirmstatic"
                            style="width:90%;margin-top:10px;">
                            Stop</a>
                    <% } else { %>
                        <p>Commands not available in auto mode.</p>
                    <% } %>
                </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>
