Added Alarm Log

POCloud/HTML/Overview.html

@@ -30,7 +30,7 @@
 <div class="row row-flex box-me">
     <div class='col-xs-8 box-me' id="systemStatusTimelineContainer">
         <div class="text-center">
-            <h2>Well Status</h2>
+            <h3 class="subdued">Well Status</h3>
         </div>
         <div id="statusTimeline"
         data-chart="timeline"
@@ -286,6 +286,7 @@
         </div>
     </div>
 </div>
+
 <div class="row box-me">
     <div class='col-xs-12'>
         <div style="height:300px"
@@ -307,8 +308,43 @@
     </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>
-.modal-backdrop {position: relative;}
+#note-modal{
+    position: absolute;
+}
+
+.modal-backdrop {
+    position: relative;
+}
+.modal-dialog {
+    top:5%;
+}
 .note-btn {
     margin-top: 10px;
     width: 75%;
@@ -369,4 +405,117 @@
     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>