From ef1b68c021faf6f5cef84e6c636b14ffa054d390 Mon Sep 17 00:00:00 2001
From: Patrick McDonagh <pmcdonagh@henry-pump.com>
Date: Wed, 14 Sep 2016 10:06:05 -0500
Subject: [PATCH] Progress on IPP-141 Added ability to configure PID

---
 POCloud/HTML/Configuration.html | 375 ++++++++++++++++++++------------
 1 file changed, 239 insertions(+), 136 deletions(-)

diff --git a/POCloud/HTML/Configuration.html b/POCloud/HTML/Configuration.html
index f29aa46..4c2b8b9 100644
--- a/POCloud/HTML/Configuration.html
+++ b/POCloud/HTML/Configuration.html
@@ -1,189 +1,292 @@
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-<div class="text-center"><h1>CONTROL</h1></div>
+
 <div class="row row-flex">
+    <div class="col-xs-12 text-center">
+        <h1>Control</h1>
+    </div>
     <div class='col-xs-6 text-center box-me'>
+        <!-- Use data-confirm-message to set the exact message that pops up in the alert window.  -->
+
         <a href="#"
+            data-confirm-message="Are you sure you want to remotely start the well?"
             data-refreshpause="3"
             data-command=""
             data-staticsend="[{'com':'1','values':[ ['cmd_Start',1] ] }]"
-            data-channelId="<%= channels["advvfdipp.modbuswrite"].channelId %>"
-            data-techname="<%=channels["advvfdipp.modbuswrite"].techName %>"
-            data-name="<%= channels["advvfdipp.modbuswrite"].name%>"
-            data-nodechannelcurrentId="<%= channels["advvfdipp.modbuswrite"].nodechannelcurrentId %>"
-            id="<%= channels["advvfdipp.modbuswrite"].channelId %>"
-            class="btn btn-large btn-theme animated confirmstatic setstatic pad15">
+            data-channelId="<%= channels['advvfdipp.modbuswrite'].channelId %>"
+            data-techname="<%=channels['advvfdipp.modbuswrite'].techName %>"
+            data-name="<%= channels['advvfdipp.modbuswrite'].name%>"
+            data-nodechannelcurrentId="<%= channels['advvfdipp.modbuswrite'].nodechannelcurrentId %>"
+            id="<%= channels['advvfdipp.modbuswrite'].channelId %>"
+            class="btn btn-large btn-theme animated confirmstatic pad15">
             Start</a>
+            <!-- Two sets were occurring because you had both the confirmstatic and setstatic classes on the button. Use one or the other, but not both. -->
     </div>
     <div class='col-xs-6 text-center box-me'>
         <a href="#"
+            data-confirm-message="Are you sure you want to remotely stop the well?"
             data-refreshpause="3"
             data-command=""
             data-staticsend="[{'com':'1','values':[ ['cmd_Stop',1] ] }]"
-            data-channelId="<%= channels["advvfdipp.modbuswrite"].channelId %>"
-            data-techname="<%=channels["advvfdipp.modbuswrite"].techName %>"
-            data-name="<%= channels["advvfdipp.modbuswrite"].name%>"
-            data-nodechannelcurrentId="<%= channels["advvfdipp.modbuswrite"].nodechannelcurrentId %>"
-            id="<%= channels["advvfdipp.modbuswrite"].channelId %>"
-            class="btn btn-large btn-theme animated confirmstatic setstatic pad15">
+            data-channelId="<%= channels['advvfdipp.modbuswrite'].channelId %>"
+            data-techname="<%=channels['advvfdipp.modbuswrite'].techName %>"
+            data-name="<%= channels['advvfdipp.modbuswrite'].name%>"
+            data-nodechannelcurrentId="<%= channels['advvfdipp.modbuswrite'].nodechannelcurrentId %>"
+            id="<%= channels['advvfdipp.modbuswrite'].channelId %>"
+            class="btn btn-large btn-theme animated confirmstatic pad15">
             Stop</a>
 
     </div>
 </div>
 
 <div class="row row-flex">
-    <div class="col-md-4 box-me" id="flowsetpoint">
+    <div class="col-xs-12 text-center">
+        <h1>PID Settings</h1>
+    </div>
+    <div class="col-md-6 box-me" id="flowsetpoint">
         <div class="pad15">
-            <h3>Flow Setpoint</h3>
-            <div class="input-group">
-                <input class="form-control val_box"
-                    data-channelId='<%= channels["advvfdipp.flowsetpoint"].channelId %>'
-                    data-techName='<%=channels["advvfdipp.flowsetpoint"].techName %>'
-                    data-name='<%= channels["advvfdipp.flowsetpoint"].name %>'
-                    data-val="<%=channels["advvfdipp.flowsetpoint"].value %>"
-                    type="number" step="any"
-                    value="<%=channels["advvfdipp.flowsetpoint"].value %>">
-                <span class="input-group-btn hidden sendbutton">
-                    <button href="#"
-                        type="button"
-                        data-refreshpause="3"
-                        data-command=""
-                        data-staticsend="[{'com':'1','values':[ ['cfg_PID_FlowSP',<%=channels["advvfdipp.flowsetpoint"].value %>] ] }]"
-                        data-channelId="<%= channels["advvfdipp.modbuswrite"].channelId %>"
-                        data-techname="<%=channels["advvfdipp.modbuswrite"].techName %>"
-                        data-name="<%= channels["advvfdipp.modbuswrite"].name%>"
-                        data-nodechannelcurrentId="<%= channels["advvfdipp.modbuswrite"].nodechannelcurrentId %>"
-                        class="btn btn-theme animated confirmstatic setstatic mbusbutton">
-                        <i class="material-icons">send</i></button>
-                </span>
-            </div>
+            <h2>Flow Setpoint
+                <% if (channels["advvfdipp.pidcontrolmode"].value == "Flow"){ %>
+                    <span class="label label-success">ACTIVE</span>
+                <% } %>
+            </h2>
+            <form class="form-inline">
+                <div class="form-group">
+                    <input class="form-control val_box"
+                        type="number" 
+                        step="any"
+                        value="<%=channels['advvfdipp.flowsetpoint'].value %>">
+                </div>
+                <a href="#"
+                    data-refreshpause="3"
+                    data-command=""
+                    data-staticsend="[{'com':'1','values':[ ['cfg_PID_FlowSP',<%=channels['advvfdipp.flowsetpoint'].value %>] ] }]"
+                    data-channelId="<%= channels['advvfdipp.modbuswrite'].channelId %>"
+                    data-techname="<%=channels['advvfdipp.modbuswrite'].techName %>"
+                    data-name="<%= channels['advvfdipp.modbuswrite'].name%>"
+                    data-nodechannelcurrentId="<%= channels['advvfdipp.modbuswrite'].nodechannelcurrentId %>"
+                    id="<%= channels['advvfdipp.modbuswrite'].channelId %>"
+                    class="btn btn-large btn-theme animated confirmstatic">
+                    <i class="material-icons">send</i></a>
+            </form>
+            <a href="#"
+                style="width:95%"
+                data-confirm-message="Are you sure you want to activate Flow Control Mode?"
+                data-refreshpause="3"
+                data-command=""
+                data-staticsend="[{'com':'1','values':[ ['cfg_PID_Flow',1] ] }]"
+                data-channelId="<%= channels['advvfdipp.modbuswrite'].channelId %>"
+                data-techname="<%=channels['advvfdipp.modbuswrite'].techName %>"
+                data-name="<%= channels['advvfdipp.modbuswrite'].name%>"
+                data-nodechannelcurrentId="<%= channels['advvfdipp.modbuswrite'].nodechannelcurrentId %>"
+                id="<%= channels['advvfdipp.modbuswrite'].channelId %>"
+                class="btn btn-large btn-theme animated confirmstatic pad15">
+                Activate Flow Control</a>
         </div>
     </div>
 
-    <div class="col-md-4 box-me" id="intakepressuresetpoint">
+    <div class="col-md-6 box-me" id="intakepressuresetpoint">
         <div class="pad15">
-            <h3>Intake Pressure Setpoint</h3>
-            <div class="input-group">
-                <input class="form-control val_box"
-                    data-channelId='<%= channels["advvfdipp.intakepressuresetpoint"].channelId %>'
-                    data-techName='<%=channels["advvfdipp.intakepressuresetpoint"].techName %>'
-                    data-name='<%= channels["advvfdipp.intakepressuresetpoint"].name %>'
-                    data-val="<%=channels["advvfdipp.intakepressuresetpoint"].value %>"
-                    type="number" step="any"
-                    value="<%=channels["advvfdipp.intakepressuresetpoint"].value %>">
-                <span class="input-group-btn hidden sendbutton">
-                    <button href="#"
-                        type="button"
-                        data-refreshpause="3"
-                        data-command=""
-                        data-staticsend="[{'com':'1','values':[ ['cfg_PID_IntakePressureSP',<%=channels["advvfdipp.intakepressuresetpoint"].value %>] ] }]"
-                        data-channelId="<%= channels["advvfdipp.modbuswrite"].channelId %>"
-                        data-techname="<%=channels["advvfdipp.modbuswrite"].techName %>"
-                        data-name="<%= channels["advvfdipp.modbuswrite"].name%>"
-                        data-nodechannelcurrentId="<%= channels["advvfdipp.modbuswrite"].nodechannelcurrentId %>"
-                        class="btn btn-theme animated confirmstatic setstatic mbusbutton">
-                        <i class="material-icons">send</i></button>
-                </span>
-            </div>
+            <h2>Intake Pressure Setpoint
+                <% if (channels["advvfdipp.pidcontrolmode"].value == "Intake Pressure"){ %>
+                    <span class="label label-success">ACTIVE</span>
+                <% } %>
+            </h2>
+            <form class="form-inline">
+                <div class="form-group">
+                    <input class="form-control val_box"
+                        type="number" 
+                        step="any"
+                        value="<%=channels['advvfdipp.intakepressuresetpoint'].value %>">
+                </div>
+                <a href="#"
+                    data-refreshpause="3"
+                    data-command=""
+                    data-staticsend="[{'com':'1','values':[ ['cfg_PID_IntakePressureSP',<%=channels['advvfdipp.intakepressuresetpoint'].value %>] ] }]"
+                    data-channelId="<%= channels['advvfdipp.modbuswrite'].channelId %>"
+                    data-techname="<%=channels['advvfdipp.modbuswrite'].techName %>"
+                    data-name="<%= channels['advvfdipp.modbuswrite'].name%>"
+                    data-nodechannelcurrentId="<%= channels['advvfdipp.modbuswrite'].nodechannelcurrentId %>"
+                    id="<%= channels['advvfdipp.modbuswrite'].channelId %>"
+                    class="btn btn-large btn-theme animated confirmstatic">
+                    <i class="material-icons">send</i></a>
+            </form>
+            <a href="#"
+                style="width:95%"
+                data-confirm-message="Are you sure you want to activate Intake Pressure Control Mode?"
+                data-refreshpause="3"
+                data-command=""
+                data-staticsend="[{'com':'1','values':[ ['cfg_PID_IntakePressure',1] ] }]"
+                data-channelId="<%= channels['advvfdipp.modbuswrite'].channelId %>"
+                data-techname="<%=channels['advvfdipp.modbuswrite'].techName %>"
+                data-name="<%= channels['advvfdipp.modbuswrite'].name%>"
+                data-nodechannelcurrentId="<%= channels['advvfdipp.modbuswrite'].nodechannelcurrentId %>"
+                id="<%= channels['advvfdipp.modbuswrite'].channelId %>"
+                class="btn btn-large btn-theme animated confirmstatic pad15">
+                Activate Intake Pressure Control</a>
         </div>
     </div>
 
-    <div class="col-md-4 box-me" id="tubingpressuresetpoint">
+    <div class="col-md-6 box-me" id="tubingpressuresetpoint">
         <div class="pad15">
-            <h3>Tubing Pressure Setpoint</h3>
-            <div class="input-group">
-                <input class="form-control val_box"
-                    data-channelId='<%= channels["advvfdipp.tubingpressuresetpoint"].channelId %>'
-                    data-techName='<%=channels["advvfdipp.tubingpressuresetpoint"].techName %>'
-                    data-name='<%= channels["advvfdipp.tubingpressuresetpoint"].name %>'
-                    data-val="<%=channels["advvfdipp.tubingpressuresetpoint"].value %>"
-                    type="number" step="any"
-                    value="<%=channels["advvfdipp.tubingpressuresetpoint"].value %>">
-                <span class="input-group-btn hidden sendbutton">
-                    <button href="#"
-                        type="button"
-                        data-refreshpause="3"
-                        data-command=""
-                        data-staticsend="[{'com':'1','values':[ ['cfg_PID_TubingPressureSP',<%=channels["advvfdipp.tubingpressuresetpoint"].value %>] ] }]"
-                        data-channelId="<%= channels["advvfdipp.modbuswrite"].channelId %>"
-                        data-techname="<%=channels["advvfdipp.modbuswrite"].techName %>"
-                        data-name="<%= channels["advvfdipp.modbuswrite"].name%>"
-                        data-nodechannelcurrentId="<%= channels["advvfdipp.modbuswrite"].nodechannelcurrentId %>"
-                        class="btn btn-theme animated confirmstatic setstatic mbusbutton">
-                        <i class="material-icons">send</i></button>
-                </span>
-            </div>
+            <h2>Tubing Pressure Setpoint
+                <% if (channels["advvfdipp.pidcontrolmode"].value == "Tubing Pressure"){ %>
+                    <span class="label label-success">ACTIVE</span>
+                <% } %>
+            </h2>
+            <form class="form-inline">
+                <div class="form-group">
+                    <input class="form-control val_box"
+                        type="number" 
+                        step="any"
+                        value="<%=channels['advvfdipp.tubingpressuresetpoint'].value %>">
+                </div>
+                <a href="#"
+                    data-refreshpause="3"
+                    data-command=""
+                    data-staticsend="[{'com':'1','values':[ ['cfg_PID_TubingPressureSP',<%=channels['advvfdipp.tubingpressuresetpoint'].value %>] ] }]"
+                    data-channelId="<%= channels['advvfdipp.modbuswrite'].channelId %>"
+                    data-techname="<%=channels['advvfdipp.modbuswrite'].techName %>"
+                    data-name="<%= channels['advvfdipp.modbuswrite'].name%>"
+                    data-nodechannelcurrentId="<%= channels['advvfdipp.modbuswrite'].nodechannelcurrentId %>"
+                    id="<%= channels['advvfdipp.modbuswrite'].channelId %>"
+                    class="btn btn-large btn-theme animated confirmstatic">
+                    <i class="material-icons">send</i></a>
+            </form>
+            <a href="#"
+                style="width:95%"
+                data-confirm-message="Are you sure you want to activate Tubing Pressure Control Mode?"
+                data-refreshpause="3"
+                data-command=""
+                data-staticsend="[{'com':'1','values':[ ['cfg_PID_TubingPressure',1] ] }]"
+                data-channelId="<%= channels['advvfdipp.modbuswrite'].channelId %>"
+                data-techname="<%=channels['advvfdipp.modbuswrite'].techName %>"
+                data-name="<%= channels['advvfdipp.modbuswrite'].name%>"
+                data-nodechannelcurrentId="<%= channels['advvfdipp.modbuswrite'].nodechannelcurrentId %>"
+                id="<%= channels['advvfdipp.modbuswrite'].channelId %>"
+                class="btn btn-large btn-theme animated confirmstatic pad15">
+                Activate Tubing Pressure Control</a>
+        </div>
+    </div>
+
+    <div class="col-md-6 box-me" id="manualfrequencysetpoint">
+        <div class="pad15">
+            <h2>Manual Frequency Setpoint
+                <% if (channels["advvfdipp.pidcontrolmode"].value == "Manual"){ %>
+                    <span class="label label-success">ACTIVE</span>
+                <% } %>
+            </h2>
+            <form class="form-inline">
+                <div class="form-group">
+                    <input class="form-control val_box"
+                        type="number" 
+                        step="any"
+                        value="<%=channels['advvfdipp.manualfrequencysetpoint'].value %>">
+                </div>
+                <a href="#"
+                    data-refreshpause="3"
+                    data-command=""
+                    data-staticsend="[{'com':'1','values':[ ['cfg_PID_ManualFrequencySP',<%=channels['advvfdipp.manualfrequencysetpoint'].value %>] ] }]"
+                    data-channelId="<%= channels['advvfdipp.modbuswrite'].channelId %>"
+                    data-techname="<%=channels['advvfdipp.modbuswrite'].techName %>"
+                    data-name="<%= channels['advvfdipp.modbuswrite'].name%>"
+                    data-nodechannelcurrentId="<%= channels['advvfdipp.modbuswrite'].nodechannelcurrentId %>"
+                    id="<%= channels['advvfdipp.modbuswrite'].channelId %>"
+                    class="btn btn-large btn-theme animated confirmstatic">
+                    <i class="material-icons">send</i></a>
+            </form>
+            <a href="#"
+                style="width:95%"
+                data-confirm-message="Are you sure you want to activate Manual Control Mode?"
+                data-refreshpause="3"
+                data-command=""
+                data-staticsend="[{'com':'1','values':[ ['cfg_PID_Manual',1] ] }]"
+                data-channelId="<%= channels['advvfdipp.modbuswrite'].channelId %>"
+                data-techname="<%=channels['advvfdipp.modbuswrite'].techName %>"
+                data-name="<%= channels['advvfdipp.modbuswrite'].name%>"
+                data-nodechannelcurrentId="<%= channels['advvfdipp.modbuswrite'].nodechannelcurrentId %>"
+                id="<%= channels['advvfdipp.modbuswrite'].channelId %>"
+                class="btn btn-large btn-theme animated confirmstatic pad15">
+                Activate Manual Control</a>
         </div>
     </div>
 </div>
 
+<div class="row row-flex">
+    <div class="col-xs-12 text-center">
+        <h1>PID Settings</h1>
+    </div>
+
+
+
+</div>
+
 <script>
     $('#flowsetpoint .val_box').change(function(){
-        $('#flowsetpoint .mbusbutton').attr('data-staticsend', "[{'com':'1','values':[ ['cfg_PID_FlowSP'," + $('#flowsetpoint .val_box').val() + "] ] }]");
-        $("#flowsetpoint .sendbutton").removeClass('hidden');
+        console.log(typeof $('#flowsetpoint .val_box').val());
+        $('#flowsetpoint .mbusbutton').attr('data-staticsend', "[{'com':'1','values':[ ['cfg_PID_FlowSP'," + parseFloat($('#flowsetpoint .val_box').val()).toFixed(10) + "] ] }]");
+        $("#flowsetpoint .mbusbutton").removeClass('hidden');
         console.log("New value for data-staticsend: " + "[{'com':'1','values':[ ['cfg_PID_FlowSP'," + $('#flowsetpoint .val_box').val() + "] ] }]");
     });
 
     $('#intakepressuresetpoint .val_box').change(function(){
-        $('#intakepressuresetpoint .mbusbutton').attr('data-staticsend', "[{'com':'1','values':[ ['cfg_PID_IntakePressureSP'," + $('#intakepressuresetpoint .val_box').val() + "] ] }]");
-        $("#intakepressuresetpoint .sendbutton").removeClass('hidden');
+        $('#intakepressuresetpoint .mbusbutton').attr('data-staticsend', "[{'com':'1','values':[ ['cfg_PID_IntakePressureSP'," + $('#intakepressuresetpoint .val_box').val().toString() + "] ] }]");
+        $("#intakepressuresetpoint .mbusbutton").removeClass('hidden');
         console.log("New value for data-staticsend: " + "[{'com':'1','values':[ ['cfg_PID_IntakePressureSP'," + $('#intakepressuresetpoint .val_box').val() + "] ] }]");
     });
 
     $('#tubingpressuresetpoint .val_box').change(function(){
-        $('#tubingpressuresetpoint .mbusbutton').attr('data-staticsend', "[{'com':'1','values':[ ['cfg_PID_TubingPressureSP'," + $('#tubingpressuresetpoint .val_box').val() + "] ] }]");
-        $("#tubingpressuresetpoint .sendbutton").removeClass('hidden');
+        $('#tubingpressuresetpoint .mbusbutton').attr('data-staticsend', "[{'com':'1','values':[ ['cfg_PID_TubingPressureSP'," + $('#tubingpressuresetpoint .val_box').val().toString() + "] ] }]");
+        $("#tubingpressuresetpoint .mbusbutton").removeClass('hidden');
         console.log("New value for data-staticsend: " + "[{'com':'1','values':[ ['cfg_PID_TubingPressureSP'," + $('#tubingpressuresetpoint .val_box').val() + "] ] }]");
     });
+
+    $('#manualfrequencysetpoint .val_box').change(function(){
+        $('#manualfrequencysetpoint .mbusbutton').attr('data-staticsend', "[{'com':'1','values':[ ['cfg_PID_ManualSP'," + $('#manualfrequencysetpoint .val_box').val().toString() + "] ] }]");
+        $("#manualfrequencysetpoint .mbusbutton").removeClass('hidden');
+        console.log("New value for data-staticsend: " + "[{'com':'1','values':[ ['cfg_PID_ManualSP'," + $('#manualfrequencysetpoint .val_box').val() + "] ] }]");
+    });
 </script>
 
 <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;
-}
+    .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;
-}
+    .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;
-}
+    .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;
-}
+    .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;
-}
 </style>