From 10894209f5f762b88ffa93188ae39fcaabb6d20d Mon Sep 17 00:00:00 2001
From: Patrick McDonagh <patrickjmcd@gmail.com>
Date: Fri, 28 Jul 2017 18:28:59 -0500
Subject: [PATCH] Adds auto/manual and flow set points

---
 POCloud/Control.html          | 106 ++++++++++++++++++++++++-
 POCloud/NodeDetailHeader.html |   1 +
 POCloud/Systems.html          | 138 +++++++++++++++++++++++++++-----
 POCloud/Totals.html           | 143 ++++++++++++++++++++++++++++++++++
 4 files changed, 366 insertions(+), 22 deletions(-)
 create mode 100644 POCloud/Totals.html

diff --git a/POCloud/Control.html b/POCloud/Control.html
index b7639f0..50e1501 100644
--- a/POCloud/Control.html
+++ b/POCloud/Control.html
@@ -18,7 +18,7 @@
         data-nodechannelcurrentId="<%= channels["transferstation.writeplctag"].nodechannelcurrentId %>"
         id="<%= channels["transferstation.writeplctag"].channelId %>"
         class="btn btn-large btn-theme animated confirmstatic pad15">
-        Start</a>
+        Auto Start</a>
     </div>
     <div class='col-xs-6 text-center box-me'>
         <a href="#"
@@ -32,7 +32,109 @@
         data-nodechannelcurrentId="<%= channels["transferstation.writeplctag"].nodechannelcurrentId %>"
         id="<%= channels["transferstation.writeplctag"].channelId %>"
         class="btn btn-large btn-theme animated confirmstatic pad15">
-        Stop</a>
+        Auto Stop</a>
 
     </div>
 </div>
+
+<div class="row row-flex">
+    <div class="col-md-4 box-me">
+        <div class="m flowTarget">
+            <h3>Flow Target</h3>
+            <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>
+
+<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>
diff --git a/POCloud/NodeDetailHeader.html b/POCloud/NodeDetailHeader.html
index 1de2c06..b4642ca 100644
--- a/POCloud/NodeDetailHeader.html
+++ b/POCloud/NodeDetailHeader.html
@@ -3,6 +3,7 @@
 </div>
 <div class='col-xs-6'>
     <h3><%= node.vanityname %></h3>
+    <h3><%= channels["transferstation.auto_manual"].value %> Mode</h3>
 </div>
 <div class='col-xs-2'>
     <h3><%= channels["transferstation.cmd_run"].value %></h3>
diff --git a/POCloud/Systems.html b/POCloud/Systems.html
index fc81f5e..8440348 100644
--- a/POCloud/Systems.html
+++ b/POCloud/Systems.html
@@ -7,8 +7,8 @@
             </div>
             <div class="col-md-2 box-me">
                 <div class="m levelSensor">
-                    <h3>Pond Level</h3>
-                    <h3>LT<%= i %>1</h3>
+                    <h3 class="uppercase">Pond Level</h3>
+                    <h3 class="uppercase">LT<%= i %>1</h3>
                     <hr />
                     <br />
                     <p><span data-valueupdate="lt<%=i %>1_level" data-refreshonupdate=true>
@@ -19,8 +19,8 @@
 
             <div class="col-md-2 box-me">
                 <div class="m chargePump">
-                    <h3>Charge Pump</h3>
-                    <h3>MC<%= i %>1</h3>
+                    <h3 class="uppercase">Charge Pump</h3>
+                    <h3 class="uppercase">MC<%= i %>1</h3>
                     <hr />
                     <br />
                     <p><span data-valueupdate="mc<%=i %>1_frequency" data-refreshonupdate=true>
@@ -34,8 +34,8 @@
 
             <div class="col-md-2 box-me">
                 <div class="m boosterPumpIntakePressure">
-                    <h3>BP Intake</h3>
-                    <h3>PT<%= i %>1</h3>
+                    <h3 class="uppercase">BP Intake</h3>
+                    <h3 class="uppercase">PT<%= i %>1</h3>
                     <hr />
                     <br />
                     <p><span data-valueupdate="pt<%=i %>1_pressure" data-refreshonupdate=true>
@@ -46,8 +46,8 @@
 
             <div class="col-md-2 box-me">
                 <div class="m boosterPump">
-                    <h3>Charge Pump</h3>
-                    <h3>MC<%= i %>1</h3>
+                    <h3 class="uppercase">Charge Pump</h3>
+                    <h3 class="uppercase">MC<%= i %>1</h3>
                     <hr />
                     <br />
                     <p><span data-valueupdate="mc<%=i %>2_frequency" data-refreshonupdate=true>
@@ -61,8 +61,8 @@
 
             <div class="col-md-2 box-me">
                 <div class="m boosterPumpDischargePressure">
-                    <h3>BP Discharge</h3>
-                    <h3>PT<%= i %>2</h3>
+                    <h3 class="uppercase">BP Discharge</h3>
+                    <h3 class="uppercase">PT<%= i %>2</h3>
                     <hr />
                     <br />
                     <p><span data-valueupdate="pt<%=i %>2_pressure" data-refreshonupdate=true>
@@ -73,8 +73,8 @@
 
             <div class="col-md-2 box-me">
                 <div class="m flowSensor">
-                    <h3>Flow</h3>
-                    <h3>FT<%= i %>1</h3>
+                    <h3 class="uppercase">Flow</h3>
+                    <h3 class="uppercase">FT<%= i %>1</h3>
                     <hr />
                     <br />
                     <p><span data-valueupdate="ft<%=i %>1_flow" data-refreshonupdate=true>
@@ -87,7 +87,7 @@
         <div class="row row-flex">
             <div class="col-md-2 box-me">
                 <div class="m priority">
-                    <h3>Priority</h3>
+                    <h3 class="uppercase">Priority</h3>
                     <hr />
                     <br />
 
@@ -115,9 +115,69 @@
                 </div>
             </div>
 
+            <div class="col-md-2 box-me">
+                <div class="m boosterPumpIntakePressureTarget">
+                    <h3 class="uppercase">BP Pressure SP</h3>
+                    <hr />
+                    <br />
+
+                    <div class="entry-top-level" id="boosterPumpIntakePressureTarget">
+                        <form class="form-inline">
+                            <div class="form-group">
+                                <input class="form-control val_box"
+                                type="number"
+                                step="any"
+                                value="<%=channels['transferstation.booster_pump_intake_target_' + i].value %>">
+                            </div>
+                            <a href="#"
+                            data-confirm-message="Are you sure you want to do this?"
+                            data-refreshpause="1"
+                            data-command=""
+                            data-staticsend="{'tag': 'par_BoosterPumpIntakePressure[<%=i %>]', 'val': <%=channels['transferstation.booster_pump_intake_target_' + i].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-2 box-me">
+                <div class="m flowTarget">
+                    <h3 class="uppercase">Flow Target</h3>
+                    <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_' + i].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[<%=i %>]', 'val': <%=channels['transferstation.flow_target_' + i].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-2 box-me">
                 <div class="m getHelpFrequency">
-                    <h3>Get Help Freq.</h3>
+                    <h3 class="uppercase">Get Help Freq.</h3>
                     <hr />
                     <br />
 
@@ -147,7 +207,7 @@
 
             <div class="col-md-2 box-me">
                 <div class="m takeoverFrequency">
-                    <h3>Takeover Freq.</h3>
+                    <h3 class="uppercase">Takeover Freq.</h3>
                     <hr />
                     <br />
 
@@ -175,11 +235,45 @@
                 </div>
             </div>
 
-
-
+            <div class="col-md-2 box-me">
+                <div class="m takeoverFrequency">
+                    <h3 class="uppercase">Manual Mode</h3>
+                    <hr />
+                    <br />
+                    <% if (channels['transferstation.auto_manual'].value === "Manual"){ %>
+                        <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_ManualStart[<%= i %>]', '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-success animated confirmstatic"
+                            style="width:90%;">
+                            Start</a>
+                        <br />
+                        <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_ManualStop[<%= i %>]', '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-danger animated confirmstatic"
+                            style="width:90%;margin-top:10px;">
+                            Stop</a>
+                    <% } else { %>
+                        <p>Commands not available in auto mode.</p>
+                    <% } %>
+                </div>
+            </div>
         </div>
-
-
     <% } %>
 <% } %>
 
@@ -206,7 +300,7 @@ $('.val_box').each(function(topLevel){
 </script>
 
 <style>
-    h3 {
+    .uppercase {
         text-transform: uppercase;
         font-size: 14px;
         color: #666;
@@ -245,4 +339,8 @@ $('.val_box').each(function(topLevel){
     .setstatic {
         margin-top: 10px;
     }
+
+    p {
+        font-size: 1.25em;
+    }
 </style>
diff --git a/POCloud/Totals.html b/POCloud/Totals.html
new file mode 100644
index 0000000..6a4e922
--- /dev/null
+++ b/POCloud/Totals.html
@@ -0,0 +1,143 @@
+<div class="row">
+    <div class="col-md-12" style="text-align:center">
+        <h1>Flow Totals</h1>
+    </div>
+    <div class="col-xs-6 text-center">
+        <h2>Flow Today</h2>
+        <div class="gauge-box">
+            <div data-labelheight="10"
+            style="height: 170px; background: transparent; margin: 0 auto;"
+            id="gauge-flow_total_today"
+            data-chart="solidgauge"
+            data-nodename="transferstation.flow_total_today"
+            data-units="BBL"
+            data-min="0"
+            data-max="100000"
+            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["transferstation.flow_total_today"].channelId %>" class="data-table" title="Download Channel History">
+                    <i class="fa fa-download"></i>
+                </a>
+            </div>
+            <span data-timeupdate="flow_total_today">
+                <%= channels["transferstation.flow_total_today"].timestamp %>
+            </span>
+        </div>
+    </div>
+
+    <div class="col-xs-6 text-center">
+        <h2>Flow Yesterday</h2>
+        <div class="gauge-box">
+            <div data-labelheight="10"
+            style="height: 170px; background: transparent; margin: 0 auto;"
+            id="gauge-flow_total_yesterday"
+            data-chart="solidgauge"
+            data-nodename="transferstation.flow_total_yesterday"
+            data-units="BBL"
+            data-min="0"
+            data-max="100000"
+            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["transferstation.flow_total_yesterday"].channelId %>" class="data-table" title="Download Channel History">
+                    <i class="fa fa-download"></i>
+                </a>
+            </div>
+            <span data-timeupdate="flow_total_yesterday">
+                <%= channels["transferstation.flow_total_yesterday"].timestamp %>
+            </span>
+        </div>
+    </div>
+
+    <div class='col-xs-12'>
+        <div style="height:300px"
+            id="chart-flow_total_yesterday"
+            data-chart="chart"
+            data-nodename1="transferstation.flow_total_yesterday"
+            data-datalabel1="Flow Total (Yesterday)"
+            data-daysofhistory="7"
+            data-chartlabel="Flow Total"
+            data-ylabel=""
+            data-xlabel="Date"
+            data-units=" BBL"></div>
+    </div>
+
+</div>
+
+<hr />
+
+<div class="row">
+    <div class="col-md-12" style="text-align:center">
+        <h1>Energy Totals</h1>
+    </div>
+    <div class="col-xs-6 text-center">
+        <h2>Energy Today</h2>
+        <div class="gauge-box">
+            <div data-labelheight="10"
+            style="height: 170px; background: transparent; margin: 0 auto;"
+            id="gauge-energy_total_today"
+            data-chart="solidgauge"
+            data-nodename="transferstation.energy_total_today"
+            data-units="kWh"
+            data-min="0"
+            data-max="100000"
+            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["transferstation.energy_total_today"].channelId %>" class="data-table" title="Download Channel History">
+                    <i class="fa fa-download"></i>
+                </a>
+            </div>
+            <span data-timeupdate="energy_total_today">
+                <%= channels["transferstation.energy_total_today"].timestamp %>
+            </span>
+        </div>
+    </div>
+
+    <div class="col-xs-6 text-center">
+        <h2>Energy Yesterday</h2>
+        <div class="gauge-box">
+            <div data-labelheight="10"
+            style="height: 170px; background: transparent; margin: 0 auto;"
+            id="gauge-energy_total_yesterday"
+            data-chart="solidgauge"
+            data-nodename="transferstation.energy_total_yesterday"
+            data-units="kWh"
+            data-min="0"
+            data-max="100000"
+            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["transferstation.energy_total_yesterday"].channelId %>" class="data-table" title="Download Channel History">
+                    <i class="fa fa-download"></i>
+                </a>
+            </div>
+            <span data-timeupdate="energy_total_yesterday">
+                <%= channels["transferstation.energy_total_yesterday"].timestamp %>
+            </span>
+        </div>
+    </div>
+
+    <div class='col-xs-12'>
+        <div style="height:300px"
+            id="chart-flow_total_today"
+            data-chart="chart"
+            data-nodename1="transferstation.energy_total_yesterday"
+            data-datalabel1="Energy Total (Yesterday)"
+            data-daysofhistory="7"
+            data-chartlabel="Energy Total"
+            data-ylabel=""
+            data-xlabel="Date"
+            data-units=" kWh"></div>
+    </div>
+
+</div>