184 lines
8.4 KiB
HTML
184 lines
8.4 KiB
HTML
<% if (channels["flowmonitor.start_stop_enabled"].value == "True"){ %>
|
|
<div class="row row-flex box-me">
|
|
<div class="col-md-6 text-center">
|
|
<a href="#"
|
|
data-confirm-message="Are you sure you want to do this?"
|
|
data-refreshpause="1"
|
|
data-command=""
|
|
data-staticsend=1
|
|
data-channelId="<%= channels["flowmonitor.startcmd"].channelId %>"
|
|
data-techname="<%=channels["flowmonitor.startcmd"].techName %>"
|
|
data-name="<%= channels["flowmonitor.startcmd"].name%>"
|
|
data-nodechannelcurrentId="<%= channels["flowmonitor.startcmd"].nodechannelcurrentId %>"
|
|
id="<%= channels["flowmonitor.startcmd"].channelId %>"
|
|
class="btn btn-large btn-theme animated setstatic">Start</a>
|
|
</div>
|
|
|
|
<div class="col-md-6 text-center">
|
|
<a href="#"
|
|
data-confirm-message="Are you sure you want to do this?"
|
|
data-refreshpause="1"
|
|
data-command=""
|
|
data-staticsend=1
|
|
data-channelId="<%= channels["flowmonitor.stopcmd"].channelId %>"
|
|
data-techname="<%=channels["flowmonitor.stopcmd"].techName %>"
|
|
data-name="<%= channels["flowmonitor.stopcmd"].name%>"
|
|
data-nodechannelcurrentId="<%= channels["flowmonitor.stopcmd"].nodechannelcurrentId %>"
|
|
id="<%= channels["flowmonitor.stopcmd"].channelId %>"
|
|
class="btn btn-large btn-theme animated setstatic">Stop</a>
|
|
</div>
|
|
</div>
|
|
<% } %>
|
|
|
|
<div class="row row-flex box-me">
|
|
<div class='col-xs-6 text-center box-me'>
|
|
<h2>GPM Flow</h2>
|
|
<div class="gauge-box">
|
|
<div data-labelheight="10"
|
|
style="height: 170px; background: transparent; margin: 0 auto;"
|
|
id="gauge-gpm_flow"
|
|
data-chart="solidgauge"
|
|
data-nodename="flowmonitor.gpm_flow"
|
|
data-units="GPM"
|
|
data-min="0"
|
|
data-max="100"
|
|
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['flowmonitor.gpm_flow'].channelId %>" class="data-table" title="Download Channel History">
|
|
<i class="fa fa-download"></i>
|
|
</a>
|
|
</div>
|
|
<span data-timeupdate="gpm_flow">
|
|
<%= channels["flowmonitor.gpm_flow"].timestamp %>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class='col-xs-6 text-center box-me'>
|
|
<h2>BPD Flow</h2>
|
|
<div class="gauge-box">
|
|
<div data-labelheight="10"
|
|
style="height: 170px; background: transparent; margin: 0 auto;"
|
|
id="gauge-bpd_flow"
|
|
data-chart="solidgauge"
|
|
data-nodename="flowmonitor.bpd_flow"
|
|
data-units="BPD"
|
|
data-min="0"
|
|
data-max="5000"
|
|
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['flowmonitor.bpd_flow'].channelId %>" class="data-table" title="Download Channel History">
|
|
<i class="fa fa-download"></i>
|
|
</a>
|
|
</div>
|
|
<span data-timeupdate="bpd_flow">
|
|
<%= channels["flowmonitor.bpd_flow"].timestamp %>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<% if (channels["flowmonitor.psi_pressure_enabled"].value == "True") { %>
|
|
|
|
<div class='col-xs-6 col-offset-xs-3 text-center box-me'>
|
|
<h2>Pressure Transmitter</h2>
|
|
<div class="gauge-box">
|
|
<div data-labelheight="10"
|
|
style="height: 170px; background: transparent; margin: 0 auto;"
|
|
id="gauge-psi_pressure"
|
|
data-chart="solidgauge"
|
|
data-nodename="flowmonitor.psi_pressure"
|
|
data-units="PSI"
|
|
data-min="0"
|
|
data-max="600"
|
|
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['flowmonitor.psi_pressure'].channelId %>" class="data-table" title="Download Channel History">
|
|
<i class="fa fa-download"></i>
|
|
</a>
|
|
</div>
|
|
<span data-timeupdate="psi_pressure">
|
|
<%= channels["flowmonitor.psi_pressure"].timestamp %>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<% } %>
|
|
</div>
|
|
|
|
<div class="row box-me">
|
|
<div class="col-md-12">
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th></th>
|
|
<th>Today</th>
|
|
<th>Yesterday</th>
|
|
<th>This Month</th>
|
|
<th>Last Month</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Gallon Total</td>
|
|
<td data-valueupdate="gal_total" data-refreshonupdate=true><%= Math.round(channels["flowmonitor.gal_total"].value * 100) / 100 %></td>
|
|
<td data-valueupdate="gal_total_yesterday" data-refreshonupdate=true><%= Math.round(channels["flowmonitor.gal_total_yesterday"].value * 100) / 100 %> Gal.</td>
|
|
<td data-valueupdate="gal_total_thismonth" data-refreshonupdate=true><%= Math.round(channels["flowmonitor.gal_total_thismonth"].value * 100) / 100 %> Gal.</td>
|
|
<td data-valueupdate="gal_total_lastmonth" data-refreshonupdate=true><%= Math.round(channels["flowmonitor.gal_total_lastmonth"].value * 100) / 100 %> Gal.</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>BBL Total</td>
|
|
<td data-valueupdate="bbl_total" data-refreshonupdate=true><%= Math.round(channels["flowmonitor.bbl_total"].value * 100) / 100 %></td>
|
|
<td data-valueupdate="bbl_total_yesterday" data-refreshonupdate=true><%= Math.round(channels["flowmonitor.bbl_total_yesterday"].value * 100) / 100 %> BBL</td>
|
|
<td data-valueupdate="bbl_total_thismonth" data-refreshonupdate=true><%= Math.round(channels["flowmonitor.bbl_total_thismonth"].value * 100) / 100 %> BBL</td>
|
|
<td data-valueupdate="bbl_total_lastmonth" data-refreshonupdate=true><%= Math.round(channels["flowmonitor.bbl_total_lastmonth"].value * 100) / 100 %> BBL</td>
|
|
</tr>
|
|
<% if (channels["flowmonitor.cost_per_bbl"].value > 0.0){ %>
|
|
<tr>
|
|
<td>Cost ($<%= channels["flowmonitor.cost_per_bbl"].value %> / BBL)</td>
|
|
<td data-valueupdate="bbl_total" data-refreshonupdate=true>$<%= Math.round(channels["flowmonitor.gal_total"].value * channels["flowmonitor.cost_per_bbl"].value * 100) / 100 %></td>
|
|
<td data-valueupdate="bbl_total_yesterday" data-refreshonupdate=true>$<%= Math.round(channels["flowmonitor.gal_total_yesterday"].value * channels["flowmonitor.cost_per_bbl"].value * 100) / 100 %></td>
|
|
<td data-valueupdate="bbl_total_thismonth" data-refreshonupdate=true>$<%= Math.round(channels["flowmonitor.cost_thismonth"].value * 100) / 100 %></td>
|
|
<td data-valueupdate="bbl_total_lastmonth" data-refreshonupdate=true>$<%= Math.round(channels["flowmonitor.cost_lastmonth"].value * 100) / 100 %></td>
|
|
</tr>
|
|
<% } %>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row box-me">
|
|
<div class='col-xs-12'>
|
|
<div style="height:300px"
|
|
id="chart-overview"
|
|
data-chart="chart"
|
|
data-nodename1="flowmonitor.bpd_flow"
|
|
data-datalabel1="Flow Rate (BPD)"
|
|
<% if (channels["flowmonitor.psi_pressure_enabled"].value === "True") { %>
|
|
data-nodename2="flowmonitor.psi_pressure"
|
|
data-datalabel2="Pressure (PSI)"
|
|
<% } %>
|
|
data-daysofhistory="2"
|
|
data-chartlabel="Last 48 Hours"
|
|
data-ylabel=""
|
|
data-xlabel="Date"
|
|
data-units=""></div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
|
|
.text-center {
|
|
text-align: center;
|
|
}
|
|
|
|
</style>
|