<div class="box-me">
    <div class="row row-flex">
        <div class="make-gauge col-xs-4" 
            data-deviceName="transferlite" 
            data-channelName="ft01_flowmeter_bpd" 
            data-displayName="Flow Rate (BPD)"
            data-units="BPD" 
            data-min="0" 
            data-max="100000" 
            data-decimalPlaces="0" 
            data-channelId="<%= channels['transferlite.ft01_flowmeter_bpd'].channelId %>"
            data-timestamp="<%= channels['transferlite.ft01_flowmeter_bpd'].timestamp %>">
        </div>

        <div class="make-gauge col-xs-4" 
            data-deviceName="transferlite" 
            data-channelName="ft01_flowmeter_gpm" 
            data-displayName="Flow Rate (GPM)"
            data-units="GPM" 
            data-min="0" 
            data-max="5000" 
            data-decimalPlaces="1" 
            data-channelId="<%= channels['transferlite.ft01_flowmeter_gpm'].channelId %>"
            data-timestamp="<%= channels['transferlite.ft01_flowmeter_gpm'].timestamp %>">
        </div>

        <div class="col-xs-4 text-center">
            <h2>Flow Totals</h2>
            <table id="totals">
                <tr><td>Today:</td><td><%= Math.round(channels['transferlite.ft01_flowmeter_bpd_today'].value * 10.0) / 10.0 %> BBL</td></tr>
                <tr><td>Yesterday:</td><td><%= Math.round(channels['transferlite.ft01_flowmeter_bpd_yesterday'].value * 10.0) / 10.0 %> BBL</td></tr>
            </table>
        </div>

    </div>
</div>
<div class="box-me">
    <div class="row">
        <div class="col-xs-12 text-center">
            <h1>System 1</h1>
        </div>
    </div>
    <div class="row">
        <% if(channels['transferlite.system1_hasleveltransmitter'].value === 'true') { %>
            <div class="make-gauge col-xs-4" 
                data-deviceName="transferlite" 
                data-channelName="lt11_pondlevel" 
                data-displayName="Pond Level"
                data-units="Ft" 
                data-min="0" 
                data-max="30" 
                data-decimalPlaces="2" 
                data-channelId="<%= channels['transferlite.lt11_pondlevel'].channelId %>"
                data-timestamp="<%= channels['transferlite.lt11_pondlevel'].timestamp %>">
            </div>
        <% } %>

        <div class="make-gauge col-xs-4" 
            data-deviceName="transferlite" 
            data-channelName="mc11_motorfrequency" 
            data-displayName="Motor Frequency"
            data-units="Hz" 
            data-min="0" 
            data-max="100" 
            data-decimalPlaces="2" 
            data-channelId="<%= channels['transferlite.mc11_motorfrequency'].channelId %>"
            data-timestamp="<%= channels['transferlite.mc11_motorfrequency'].timestamp %>">
        </div>

        <div class="make-gauge col-xs-4" 
            data-deviceName="transferlite" 
            data-channelName="pt11_dischargepressure" 
            data-displayName="Discharge Pressure"
            data-units="PSI" 
            data-min="0" 
            data-max="200" 
            data-decimalPlaces="1" 
            data-channelId="<%= channels['transferlite.pt11_dischargepressure'].channelId %>"
            data-timestamp="<%= channels['transferlite.pt11_dischargepressure'].timestamp %>">
        </div>
    </div>
</div>

<div class="box-me">
    <div class="row">
        <div class="col-xs-12 text-center">
            <h1>System 2</h1>
        </div>
    </div>
    <div class="row">
        <% if(channels['transferlite.system2_hasleveltransmitter'].value === 'true') { %>
            <div class="make-gauge col-xs-4" 
                data-deviceName="transferlite" 
                data-channelName="lt21_pondlevel" 
                data-displayName="Pond Level"
                data-units="Ft" 
                data-min="0" 
                data-max="30" 
                data-decimalPlaces="2" 
                data-channelId="<%= channels['transferlite.lt21_pondlevel'].channelId %>"
                data-timestamp="<%= channels['transferlite.lt21_pondlevel'].timestamp %>">
            </div>
        <% } %>

        <div class="make-gauge col-xs-4" 
            data-deviceName="transferlite" 
            data-channelName="mc21_motorfrequency" 
            data-displayName="Motor Frequency"
            data-units="Hz" 
            data-min="0" 
            data-max="100" 
            data-decimalPlaces="2" 
            data-channelId="<%= channels['transferlite.mc21_motorfrequency'].channelId %>"
            data-timestamp="<%= channels['transferlite.mc21_motorfrequency'].timestamp %>">
        </div>

        <div class="make-gauge col-xs-4" 
            data-deviceName="transferlite" 
            data-channelName="pt21_dischargepressure" 
            data-displayName="Discharge Pressure"
            data-units="PSI" 
            data-min="0" 
            data-max="200" 
            data-decimalPlaces="1" 
            data-channelId="<%= channels['transferlite.pt21_dischargepressure'].channelId %>"
            data-timestamp="<%= channels['transferlite.pt21_dischargepressure'].timestamp %>">
        </div>
    </div>
</div>


<style>
    .box-me {
        position: relative;
        padding: 0.5em;
        padding-bottom: 1.5em;
        border: 1px solid #eee;
        /*margin: 1em 0;*/
    }

    .box-me .gauge-box {
        margin-top: -0.25em;
    }

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

    .dynamic-chart-form {
        background-color: whiteSmoke;
        padding: 1em 0.5em;
        margin-top: 1em;
    }

    .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;
    }

    #systemStatusTimelineContainer h2 {
        text-transform: uppercase;
        font-size: 14px;
        color: #666;
        font-weight: 400;
        letter-spacing: 1px;
        z-index: 100;
    }

    .slice.node-detail hr {
        border-color: #ccc;
    }

    .slice.node-detail #alarms li {
        margin-bottom: 1em;
        padding: 0.5em;
    }

    .slice.node-detail #alarms li:nth-child(even) {
        background-color: whiteSmoke;
    }

    .slice.node-detail #alarms li span {
        margin-left: 1em;
        color: #aaa;
    }

    #totals td {
        font-size: 20px;
        color: black;
        font-weight: 600;
        padding-right: 15px;
    }
</style>

<script>

    $('.val_box').each(function (topLevel) {
        $(this).change(function () {
            var id = "#" + $(this).closest(".entry-top-level").attr('id');
            if (id !== "#undefined") {
                var val = $(id).find('.val_box').val();
                var tag = $(id).find('.setstatic').attr('data-staticsend', val);
                console.log($(id).find('.setstatic').attr('data-staticsend'));
            }
        });
    });

    $('.make-gauge').each(function (gaugeDiv) {
        const deviceName = $(this).attr("data-deviceName");
        const channelName = $(this).attr("data-channelName");
        const displayName = $(this).attr("data-displayName");
        const units = $(this).attr("data-units");
        const min = $(this).attr("data-min");
        const max = $(this).attr("data-max");
        const decimalPlaces = $(this).attr("data-decimalPlaces");
        const channelId = $(this).attr("data-channelId");
        const timestamp = $(this).attr("data-timestamp");
        const gaugeHTML = makeGauge(deviceName, channelName, displayName, units, min, max, decimalPlaces, channelId, timestamp);
        $(this).html(gaugeHTML);

    });

    function makeGauge(deviceName, channelName, displayName, units, min, max, decimalPlaces, channelId, timestamp) {

        return (
            '<div class="text-center"> \
                <h2>' + displayName + '</h2> \
                <div class="gauge-box"> \
                    <div data-labelheight="10" \
                        style="height: 170px; background: transparent; margin: 0 auto;" \
                        id="gauge-' + channelName + '" \
                        data-chart="solidgauge" \
                        data-nodename="' + deviceName + '.' + channelName + '" \
                        data-units="'+ units + '" \
                        data-min="' + min + '" \
                        data-max="' + max + '" \
                        data-decimalplaces="' + decimalPlaces + '" \
                        data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B" \
                        data-valuefontsize="18px"> \
                    </div> \
                    <div class- "timestamp-box"> \
                        <a href="#" data-channelId="' + channelId + '" class="data-table" title="Download Channel History"> \
                            <i class="fa fa-download"></i> \
                        </a> \
                    </div> \
                    <span data-timeupdate="' + channelName + '">' + timestamp + '</span> \
                </div> \
            </div>'
        );
    }


    $('.val_box').each(function (topLevel) {
        $(this).change(function () {
            var id = "#" + $(this).closest(".entry-top-level").attr('id');
            if (id !== "#undefined") {
                var val = $(id).find('.val_box').val();
                var tag = $(id).find('.setstatic').attr('data-staticsend', val);
                console.log($(id).find('.setstatic').attr('data-staticsend'));
            }
        });
    });

</script>