VFD-IPP/POCloud_Driver/HTML/Configuration.html

<form class='set_channel'>
  <br />
  <button class='btn btn-theme btn-block set_channel_btn' value='Save'>APPLY CHANGES</button>
  <br />
  <div class="text-center"><h1>VFD CONFIGURATION</h1></div>

  <div class="text-center"><h1>DOWNHOLE CONFIGURATION</h1></div>
  <div class="row overview">
      <div class='col-xs-12 text-center'>
        <h2>Downhole Sensor Enabled</h2>
        <input type="toggle" data-checkedValue="1" data-uncheckedValue="0" data-valueupdate="downholetoolenabled" data-channelId='<%= channels["vfdipp.downholetoolenabled"].channelId %>' data-techName='<%=channels["vfdipp.downholetoolenabled"].techName %>' data-name='vfdipp.downholetoolenabled' id="<%= channels["vfdipp.downholetoolenabled"].channelId %>" name="<%= channels["vfdipp.downholetoolenabled"].channelId %>">
      </div>
      <div class='col-xs-6 text-center'>
          <h2>Pressure Trip</h2>
          <div class="gauge-box">
              <table class="table">
                  <tbody>
                      <tr>
                          <td>Pressure Shutdown Enabled</td>
                          <td>
                              <input type="toggle" data-checkedValue="1" data-uncheckedValue="0" data-valueupdate="dhpressureshutdownenabled" data-channelId='<%= channels["vfdipp.dhpressureshutdownenabled"].channelId %>' data-techName='<%=channels["vfdipp.dhpressureshutdownenabled"].techName %>' data-name='vfdipp.dhpressureshutdownenabled' id="<%= channels["vfdipp.dhpressureshutdownenabled"].channelId %>" name="<%= channels["vfdipp.dhpressureshutdownenabled"].channelId %>">
                          </td>
                      </tr>

                      <tr>
                          <td>Pressure Shutdown Limit</td>
                          <td>
                            <div class="input-box">
                                <div class="form-item">
                                    <div class="info">
                                        <input data-channelId='<%= channels["vfdipp.dhpressureshutdownlimit"].channelId %>'
                                            data-techName='<%=channels["vfdipp.dhpressureshutdownlimit"].techName %>'
                                            data-name='<%= channels["vfdipp.dhpressureshutdownlimit"].name %>'
                                            data-val="<%=channels["vfdipp.dhpressureshutdownlimit"].value %>"
                                            type="number" step="any"
                                            id="<%= channels["vfdipp.dhpressureshutdownlimit"].channelId %>"
                                            value="<%=channels["vfdipp.dhpressureshutdownlimit"].value %>">
                                    </div>
                                </div>
                            </div>
                        </td>
                      </tr>

                      <tr>
                          <td>Pressure Restart Enabled</td>
                          <td>
                              <input type="toggle" data-checkedValue="1" data-uncheckedValue="0" data-valueupdate="dhpressurestartupenabled" data-channelId='<%= channels["vfdipp.dhpressurestartupenabled"].channelId %>' data-techName='<%=channels["vfdipp.dhpressurestartupenabled"].techName %>' data-name='vfdipp.dhpressurestartupenabled' id="<%= channels["vfdipp.dhpressurestartupenabled"].channelId %>" name="<%= channels["vfdipp.dhpressurestartupenabled"].channelId %>">
                          </td>
                      </tr>

                      <tr>
                          <td>Pressure Startup Limit</td>
                          <td>
                            <div class="input-box">
                                <div class="form-item">
                                    <div class="info">
                                        <input data-channelId='<%= channels["vfdipp.dhpressurestartup"].channelId %>'
                                            data-techName='<%=channels["vfdipp.dhpressurestartup"].techName %>'
                                            data-name='<%= channels["vfdipp.dhpressurestartup"].name %>'
                                            data-val="<%=channels["vfdipp.dhpressurestartup"].value %>"
                                            type="number" step="any"
                                            id="<%= channels["vfdipp.dhpressurestartup"].channelId %>"
                                            value="<%=channels["vfdipp.dhpressurestartup"].value %>">
                                    </div>
                                </div>
                            </div>
                          </td>
                      </tr>

                  </tbody>
              </table>
          </div>
      </div>

      <div class='col-xs-6 text-center'>
          <h2>Temperature Trip</h2>
          <div class="gauge-box">
              <table class="table">
                  <tbody>
                      <tr>
                          <td>Temperature Shutdown Enabled</td>
                          <td>
                              <input type="toggle" data-checkedValue="1" data-uncheckedValue="0" data-valueupdate="dhtempshutdownenabled" data-channelId='<%= channels["vfdipp.dhtempshutdownenabled"].channelId %>' data-techName='<%=channels["vfdipp.dhtempshutdownenabled"].techName %>' data-name='vfdipp.dhtempshutdownenabled' id="<%= channels["vfdipp.dhtempshutdownenabled"].channelId %>" name="<%= channels["vfdipp.dhtempshutdownenabled"].channelId %>">
                          </td>
                      </tr>

                      <tr>
                          <td>Temperature Shutdown Limit</td>
                          <td>
                            <div class="input-box">
                                <div class="form-item">
                                    <div class="info">
                                        <input data-channelId='<%= channels["vfdipp.dhtempshutdown"].channelId %>'
                                            data-techName='<%=channels["vfdipp.dhtempshutdown"].techName %>'
                                            data-name='<%= channels["vfdipp.dhtempshutdown"].name %>'
                                            data-val="<%=channels["vfdipp.dhtempshutdown"].value %>"
                                            type="number" step="any"
                                            id="<%= channels["vfdipp.dhtempshutdown"].channelId %>"
                                            value="<%=channels["vfdipp.dhtempshutdown"].value %>">
                                    </div>
                                </div>
                            </div>
                        </td>
                      </tr>

                      <tr>
                          <td>Temperature Restart Enabled</td>
                          <td>
                              <input type="toggle" data-checkedValue="1" data-uncheckedValue="0" data-valueupdate="dhtempstartupenabled" data-channelId='<%= channels["vfdipp.dhtempstartupenabled"].channelId %>' data-techName='<%=channels["vfdipp.dhtempstartupenabled"].techName %>' data-name='vfdipp.dhtempstartupenabled' id="<%= channels["vfdipp.dhtempstartupenabled"].channelId %>" name="<%= channels["vfdipp.dhtempstartupenabled"].channelId %>">
                          </td>
                      </tr>

                      <tr>
                          <td>Temperature Startup Limit</td>
                          <td>
                            <div class="input-box">
                                <div class="form-item">
                                    <div class="info">
                                        <input data-channelId='<%= channels["vfdipp.dhtempstartuplimit"].channelId %>'
                                            data-techName='<%=channels["vfdipp.dhtempstartuplimit"].techName %>'
                                            data-name='<%= channels["vfdipp.dhtempstartuplimit"].name %>'
                                            data-val="<%=channels["vfdipp.dhtempstartuplimit"].value %>"
                                            type="number" step="any"
                                            id="<%= channels["vfdipp.dhtempstartuplimit"].channelId %>"
                                            value="<%=channels["vfdipp.dhtempstartuplimit"].value %>">
                                    </div>
                                </div>
                            </div>
                          </td>
                      </tr>

                  </tbody>
              </table>
          </div>
      </div>
  </div>
  <button class='btn btn-theme btn-block set_channel_btn' value='Save'>APPLY CHANGES</button>
</form>

<style>
  .overview .col-xs-4 {
    position: relative;
    padding: 0.5em;
    padding-bottom: 1.5em;
    border: 1px solid #eee;
    /*margin: 1em 0;*/
  }
  .overview .gauge-box {
    margin-top: -0.25em;
  }
  .overview 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;
  }

  .fill-vertically {
      height:261px;
  }

  #systemStatusTimelineContainer h2 {
  text-transform: uppercase;
  font-size: 14px;
  color: #666;
  font-weight: 400;
  letter-spacing: 1px;
  z-index: 100;
  }
</style>