Added files before attempting testing

POCloud/NodeDetailHeader.html

@@ -0,0 +1,10 @@
+<div class='col-xs-1'>
+    <div class="<%= nodecolors.statuscolor %> nodecolor"></div>
+</div>
+<div class='col-xs-6'>
+    <h3><%= node.vanityname %></h3>
+    <h4><span data-updatevalue="wellstatus"><%=channels["thehenrypump.wellstatus"].value %></span></h4>
+</div>
+<div class-"col-xs-3">
+    <h4>Strokes Today: <span data-updatevalue="strokestoday"><%=channels["thehenrypump.strokestoday"].value %></span></h4>
+</div>

POCloud/NodeList.html

@@ -0,0 +1,35 @@
+<style>
+    .header h4 {
+        position: relative;
+        top: 0.9em;
+    }
+    .header h2 {
+        text-transform: uppercase;
+        font-size: 14px;
+        color: #aaa;
+        margin: 0.75em 0;
+    }
+    .header p {
+        font-size: 24px;
+        color: black;
+        font-weight: 600;
+    }
+</style>
+
+<div class="row header">
+    <div class="col-xs-1">
+        <div class="<%= nodecolors.statuscolor %> nodecolor"></div>
+    </div>
+
+    <div class="col-xs-2">
+        <img src="<%= nodeimgurl %>" />
+    </div>
+
+    <div class="col-xs-4">
+        <h4><%= node.vanityname %>:<br/><%=channels["thehenrypump.wellstatus"].value %></h4>
+    </div>
+    <div class="col-xs-2">
+        <h2>Strokes Today</h2>
+        <p><%= channels["thehenrypump.strokestoday"].value %></p>
+    </div>
+</div>

POCloud/Overview.html

@@ -0,0 +1,194 @@
+
+<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="thehenrypump.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>
+    <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-motorcurrent"
+            data-chart="solidgauge"
+            data-nodename="thehenrypump.motorcurrent"
+            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['thehenrypump.motorcurrent'].channelId %>" class="data-table" title="Download Channel History">
+                    <i class="fa fa-download"></i>
+                </a>
+            </div>
+            <span data-timeupdate="motorcurrent">
+                <%= channels["thehenrypump.motorcurrent"].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="thehenrypump.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['thehenrypump.flowrate'].channelId %>" class="data-table" title="Download Channel History">
+                    <i class="fa fa-download"></i>
+                </a>
+            </div>
+            <span data-timeupdate="flowrate">
+                <%= channels["thehenrypump.flowrate"].timestamp %>
+            </span>
+        </div>
+    </div>
+
+    <div class='col-xs-4 text-center box-me'>
+        <h2>Surface Pressure</h2>
+        <div class="gauge-box">
+            <div data-labelheight="10"
+            style="height: 170px; background: transparent; margin: 0 auto;"
+            id="gauge-surfacepressure"
+            data-chart="solidgauge"
+            data-nodename="thehenrypump.surfacepressure"
+            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['thehenrypump.surfacepressure'].channelId %>" class="data-table" title="Download Channel History">
+                <i class="fa fa-download"></i>
+            </a>
+        </div>
+        <span data-timeupdate="surfacepressure">
+            <%= channels["thehenrypump.surfacepressure"].timestamp %>
+        </span>
+    </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>
+
+
+<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;
+}
+</style>