Transfer-Station/POCloud/HTML Templates/Control.html

<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 transfer station?"
        data-refreshpause="1"
        data-command=""
        data-staticsend="{'tag': 'cmd_Start', '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-theme animated confirmstatic pad15">
        Auto 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 transfer station?"
        data-refreshpause="1"
        data-command=""
        data-staticsend="{'tag': 'cmd_Stop', '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-theme animated confirmstatic pad15">
        Auto Stop</a>

    </div>
</div>

<div class="row row-flex">
    <div class="col-md-4 box-me">
        <div class="m flowTarget">
            <h2>Flow Target</h2>
            <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_station'].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[0]', 'val': <%=channels['transferstation.flow_target_station'].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-4 box-me">
        <div class="m lineBreakSetpoint">
            <h2>Line Break Flow Multiplier</h2>
            <hr />
            <br />

            <div class="entry-top-level" id="lineBreakSetpoint">
                <form class="form-inline">
                    <div class="form-group">
                        <input class="form-control val_box"
                        type="number"
                        step="any"
                        value="<%=channels['transferstation.line_break_multiplier'].value %>">
                    </div>
                    <a href="#"
                    data-confirm-message="Are you sure you want to do this?"
                    data-refreshpause="1"
                    data-command=""
                    data-staticsend="{'tag': 'par_LineBreakFlowMultiplier', 'val': <%= Math.round(channels['transferstation.line_break_multiplier'].value * 100) / 100 %>}"
                    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>

<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>