<div class="modal fade" id="note-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form class='set_channel'>
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Note Entry</h4>
                </div>
                <div class="modal-body">

                    <input class="form-control" data-channelId='<%= channels["advvfdipp.notes"].channelId %>'
                    data-techName='<%=channels["advvfdipp.notes"].techName %>'
                    data-name='<%= channels["advvfdipp.notes"].name %>'
                    data-val="<%=channels["advvfdipp.notes"].value %>"
                    type="text"
                    id="<%= channels["advvfdipp.notes"].channelId %>"
                    value="<%=channels["advvfdipp.notes"].value %>">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button class="btn btn-primary set_channel_btn" value='Save'>Save Note</button>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<div class="row row-flex box-me">
    <div class='col-xs-8 box-me' id="systemStatusTimelineContainer">
        <div class="text-center">
            <h3 class="subdued">Well Status</h3>
        </div>
        <div id="statusTimeline"
        data-chart="timeline"
        data-nodename="advvfdipp.wellstatus"
        data-daysofhistory="2"
        data-chartlabel=""
        data-xlabel='Date'
        data-colors="Running:#3AFF83,Pumped Off:#dbda35,Alarmed:#e9821b,Locked Out:#cd2f34,Stopped:#3699b4"></div>
    </div>

    <div class='col-xs-4 box-me'>
        <div class="text-center">
            <h2>Last Note</h2>
            <p class="note-text"><%= channels['advvfdipp.notes'].value %></p>
            <p> at <%= channels["advvfdipp.notes"].timestamp %></p>
            <button href="#" data-channelId="<%= channels['advvfdipp.notes'].channelId %>" class="data-table btn btn-theme note-btn" title="Note History"><i style='margin-left: 0.5em; cursor: pointer' class="fa fa-th-list icon-theme"></i> All Notes</button>
            <br />
            <button type="button" class="btn btn-theme note-btn" data-toggle="modal" data-target="#note-modal"><i style='margin-left: 0.5em; cursor: pointer' class="fa fa-pencil icon-theme"></i> New Note</button>
        </div>
    </div>
    <div class='col-xs-4 text-center box-me'>
        <h2>Fluid Level</h2>
        <div class="gauge-box">
            <div data-labelheight="10"
            style="height: 170px; background: transparent; margin: 0 auto;"
            id="gauge-fluidlevel"
            data-chart="solidgauge"
            data-nodename="advvfdipp.fluidlevel"
            data-units="ft."
            data-min="0"
            data-max="500"
            data-decimalplaces="2"
            data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
            data-valuefontsize="18px">
            </div>
            <div class- "timestamp-box">
                <a href="#" data-channelId="<%= channels['advvfdipp.fluidlevel'].channelId %>" class="data-table" title="Download Channel History">
                    <i class="fa fa-download"></i>
                </a>
            </div>
            <span data-timeupdate="fluidlevel">
                <%= channels["advvfdipp.fluidlevel"].timestamp %>
            </span>
        </div>
    </div>


    <div class='col-xs-4 text-center box-me'>
        <h2>Flow Rate</h2>
        <div class="gauge-box">
            <div data-labelheight="10"
            style="height: 170px; background: transparent; margin: 0 auto;"
            id="gauge-flowrate"
            data-chart="solidgauge"
            data-nodename="advvfdipp.flowrate"
            data-units="GPM"
            data-min="0"
            data-max="250"
            data-decimalplaces="2"
            data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
            data-valuefontsize="18px">
            </div>
            <div class- "timestamp-box">
                <a href="#" data-channelId="<%= channels['advvfdipp.flowrate'].channelId %>" class="data-table" title="Download Channel History">
                    <i class="fa fa-download"></i>
                </a>
            </div>
            <span data-timeupdate="flowrate">
                <%= channels["advvfdipp.flowrate"].timestamp %>
            </span>
        </div>
    </div>

    <div class='col-xs-4 text-center box-me'>
        <h2>Intake Pressure</h2>
        <div class="gauge-box">
            <div data-labelheight="10"
            style="height: 170px; background: transparent; margin: 0 auto;"
            id="gauge-intakepressure"
            data-chart="solidgauge"
            data-nodename="advvfdipp.intakepressure"
            data-units="PSI"
            data-min="0"
            data-max="500"
            data-decimalplaces="1"
            data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
            data-valuefontsize="18px">
        </div>
        <div class- "timestamp-box">
            <a href="#" data-channelId="<%= channels['advvfdipp.intakepressure'].channelId %>" class="data-table" title="Download Channel History">
                <i class="fa fa-download"></i>
            </a>
        </div>
        <span data-timeupdate="intakepressure">
            <%= channels["advvfdipp.intakepressure"].timestamp %>
        </span>
    </div>
    </div>

    <div class='col-xs-4 text-center box-me'>
        <h2>Motor Frequency</h2>
        <div class="gauge-box">
            <div data-labelheight="10"
            style="height: 170px; background: transparent; margin: 0 auto;"
            id="gauge-vfdfrequency"
            data-chart="solidgauge"
            data-nodename="advvfdipp.vfdfrequency"
            data-units="Hz"
            data-min="0"
            data-max="75"
            data-decimalplaces="2"
            data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
            data-valuefontsize="18px">
        </div>
        <div class- "timestamp-box">
            <a href="#" data-channelId="<%= channels['advvfdipp.vfdfrequency'].channelId %>" class="data-table" title="Download Channel History">
                <i class="fa fa-download"></i>
            </a>
        </div>
        <span data-timeupdate="vfdfrequency">
            <%= channels["advvfdipp.vfdfrequency"].timestamp %>
        </span>
    </div>
    </div>

    <div class='col-xs-4 text-center box-me'>
        <h2>Motor Current</h2>
        <div class="gauge-box">
            <div data-labelheight="10"
            style="height: 170px; background: transparent; margin: 0 auto;"
            id="gauge-vfdcurrent"
            data-chart="solidgauge"
            data-nodename="advvfdipp.vfdcurrent"
            data-units="A"
            data-min="0"
            data-max="100"
            data-decimalplaces="2"
            data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
            data-valuefontsize="18px">
        </div>
        <div class- "timestamp-box">
            <a href="#" data-channelId="<%= channels['advvfdipp.vfdcurrent'].channelId %>" class="data-table" title="Download Channel History">
                <i class="fa fa-download"></i>
            </a>
        </div>
        <span data-timeupdate="vfdcurrent">
            <%= channels["advvfdipp.vfdcurrent"].timestamp %>
        </span>
    </div>
    </div>

    <div class='col-xs-4 text-center box-me'>
        <h2>Tubing Pressure</h2>
        <div class="gauge-box">
            <div data-labelheight="10"
            style="height: 170px; background: transparent; margin: 0 auto;"
            id="gauge-tubingpressure"
            data-chart="solidgauge"
            data-nodename="advvfdipp.tubingpressure"
            data-units="PSI"
            data-min="0"
            data-max="250"
            data-decimalplaces="2"
            data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
            data-valuefontsize="18px">
            </div>
            <div class- "timestamp-box">
                <a href="#" data-channelId="<%= channels['advvfdipp.tubingpressure'].channelId %>" class="data-table" title="Download Channel History">
                    <i class="fa fa-download"></i>
                </a>
            </div>
            <span data-timeupdate="tubingpressure">
                <%= channels["advvfdipp.tubingpressure"].timestamp %>
            </span>
        </div>
    </div>

    <div class='col-xs-4 text-center box-me'>
        <h2>Intake Temperature</h2>
        <div class="gauge-box">
            <div data-labelheight="10"
            style="height: 170px; background: transparent; margin: 0 auto;"
            id="gauge-intaketemperature"
            data-chart="solidgauge"
            data-nodename="advvfdipp.intaketemperature"
            data-units="&deg F"
            data-min="0"
            data-max="200"
            data-decimalplaces="1"
            data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
            data-valuefontsize="18px">
            </div>
            <div class- "timestamp-box">
                <a href="#" data-channelId="<%= channels['advvfdipp.intaketemperature'].channelId %>" class="data-table" title="Download Channel History">
                    <i class="fa fa-download"></i>
                </a>
            </div>
            <span data-timeupdate="intaketemperature">
                <%= channels["advvfdipp.intaketemperature"].timestamp %>
            </span>
        </div>
    </div>

    <div class='col-xs-4 text-center box-me'>
        <h2>Flow Today</h2>
        <div class="gauge-box">
            <div data-labelheight="10"
            style="height: 170px; background: transparent; margin: 0 auto;"
            id="gauge-flowtotal"
            data-chart="solidgauge"
            data-nodename="advvfdipp.flowtotal"
            data-units="BBL"
            data-min="0"
            data-max="5000"
            data-decimalplaces="1"
            data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
            data-valuefontsize="18px">
            </div>
            <div class- "timestamp-box">
                <a href="#" data-channelId="<%= channels['advvfdipp.flowtotal'].channelId %>" class="data-table" title="Download Channel History">
                    <i class="fa fa-download"></i>
                </a>
            </div>
            <span data-timeupdate="flowtotal">
                <%= channels["advvfdipp.flowtotal"].timestamp %>
            </span>
        </div>
    </div>

    <div class='col-xs-4 text-center box-me'>
        <h2>Energy Today</h2>
        <div class="gauge-box">
            <div data-labelheight="10"
            style="height: 170px; background: transparent; margin: 0 auto;"
            id="gauge-energytotal"
            data-chart="solidgauge"
            data-nodename="advvfdipp.energytotal"
            data-units="kWh"
            data-min="0"
            data-max="2000"
            data-decimalplaces="1"
            data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
            data-valuefontsize="18px">
            </div>
            <div class- "timestamp-box">
                <a href="#" data-channelId="<%= channels['advvfdipp.energytotal'].channelId %>" class="data-table" title="Download Channel History">
                    <i class="fa fa-download"></i>
                </a>
            </div>
            <span data-timeupdate="energytotal">
                <%= channels["advvfdipp.energytotal"].timestamp %>
            </span>
        </div>
    </div>
</div>

<div class="row box-me">
    <div class='col-xs-12'>
        <div style="height:300px"
        id="chart-overview"
        data-chart="chart"
        data-nodename1="advvfdipp.fluidlevel"
        data-datalabel1="Fluid Level"
        data-nodename2="advvfdipp.flowrate"
        data-datalabel2="Flow Rate"
        data-nodename3="advvfdipp.vfdcurrent"
        data-datalabel3="Motor Current"
        data-nodename4="advvfdipp.vfdfrequency"
        data-datalabel4="Motor Frequency"
        data-daysofhistory="2"
        data-chartlabel="Last 48 Hours"
        data-ylabel=""
        data-xlabel="Date"
        data-units=""></div>
    </div>
</div>


<div class="row box-me">
    <div class='col-xs-12 text-center'>
        <h3 class='subdued'>Alarm History</h3>
    </div>

    <div class="col-xs-6 col-xs-offset-3" style='padding: 1.5em 15px'>
          <div class="input-daterange input-group" id="datepicker">
              <input data-chartid="chart7" id="fromDate" data-daysofhistory="7" type="text" class="form-control" name="start">
              <span class="input-group-addon">to</span>
              <input class="form-control" data-chartid="chart7" id="toDate" type="text" name="end">
              <span class="input-group-btn">
                  <a href="#!" id='runHistory' data-chartid="chart7" data-otherchartids="chart8" class="btn btn-theme animated">Run</a>
              </span>
          </div>
      </div>
    <hr>

    <div class="col-xs-12">
        <ol id='alarms' class='list-unstyled'>

        </ol>
    </div>
</div>


<style>
#note-modal{
    position: absolute;
}

.modal-backdrop {
    position: relative;
}
.modal-dialog {
    top:5%;
}
.note-btn {
    margin-top: 10px;
    width: 75%;
}
.note-text {
    font-size: 1.5em;
    font-style: italic;
}
.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;
}

.pad15 {
    margin: 15px 15px;
}

.box-me 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;
}
</style>



<script>
    var nodeID = <%= node.nodeId %>;
    var nodeType = '<%= node.nodetypeName %>';

    var alarmChannels = [
        {
            chId:<%= channels["advvfdipp.alarmflowrate"].channelId %>,
            chName: 'Flow Alarm'
        },
        {
            chId:<%= channels["advvfdipp.alarmintakepressure"].channelId %>,
            chName: 'Intake Pressure Alarm'
        },
        {
            chId:<%= channels["advvfdipp.alarmintaketemperature"].channelId %>,
            chName: 'Intake Temperature Alarm'
        },
        {
            chId:<%= channels["advvfdipp.alarmtubingpressure"].channelId %>,
            chName: 'Tubing Pressure Alarm'
        },
        {
            chId:<%= channels["advvfdipp.alarmvfd"].channelId %>,
            chName: 'VFD Alarm'
        }
    ];

    var formatDate = function(str){
        var c1, c2;
        c1 = new Date(str);
        c2 = (c1.getTime() / 1000);
        c2 = Math.floor(c2);
        return c2.toString();
    };

    var updateTable = function(){
        var $output = $('#alarms');
        var allAlarms = [];
        var ajaxResults = [];
        _.each(alarmChannels, function(ac){
            var channelID = ac.chId;
            var channelName = ac.chName;
            var apiData, start, end, finalURL, dateString;

            finalURL = '<%= rootURL %>' + "/api2/Nodechannels";
            start = $('#datepicker').find('#fromDate');
            dateString = start.val().replace(/-/g, "/");
            start = formatDate(dateString);
            end = $('#datepicker').find('#toDate');
            dateString = end.val().replace(/-/g, "/");
            end = formatDate(dateString);
            apiData = "&nodelist[0][nodeId]=" + nodeID.toString() + "&nodelist[0][channelId]=" + channelID.toString();
            apiData += "&start=" + start + "&end=" + end;

            ajaxResults.push($.ajax({
                url: finalURL,
                data: apiData,
                type: "GET",
                success: function(data) {
                  var alarms = data.listofstreams[0].stream;
                  _.each(alarms, function(alarm){
                    var timestamp = alarm.x;
                    var value = alarm.y;
                    if (value !== "OK"){
                        allAlarms.push({alarm: channelName, timestamp:timestamp, value:value});
                    }
                  });
                }
            }));
        });

        $.when.apply(this, ajaxResults).done(function(){
            if (allAlarms.length > 0){
                var html = '';
                _.each(_.sortBy(allAlarms, "timestamp").reverse(), function(al_in_order) {
                    console.log(al_in_order.timestamp);
                    html += "<li>" + al_in_order.alarm + ": " + al_in_order.value + "<span>" + moment(al_in_order.timestamp, "X").format("dddd, MMMM Do YYYY, h:mm:ss a"); + "</span></li>";
                })
                $output.html(html);
            } else {
                $output.html("<li>No Alarms for this time range</li>");
            }
        })


    };

    $('#runHistory').on('click', function(e){
        e.preventDefault();
        updateTable();
    });

    updateTable();

</script>
