Update Overview screen to add and show notes
This commit is contained in:
Patrick McDonagh
@@ -1,153 +1,372 @@
|
||||
<div class="modal fade" id="note-modal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<form class='set_channel'>
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||||
<h4 class="modal-title">Note Entry</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
|
||||
<input class="form-control" data-channelId='<%= channels["advvfdipp.notes"].channelId %>'
|
||||
data-techName='<%=channels["advvfdipp.notes"].techName %>'
|
||||
data-name='<%= channels["advvfdipp.notes"].name %>'
|
||||
data-val="<%=channels["advvfdipp.notes"].value %>"
|
||||
type="text"
|
||||
id="<%= channels["advvfdipp.notes"].channelId %>"
|
||||
value="<%=channels["advvfdipp.notes"].value %>">
|
||||
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
||||
<button class="btn btn-primary set_channel_btn" value='Save'>Save Note</button>
|
||||
</div>
|
||||
</form>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
|
||||
|
||||
<div class="row row-flex box-me">
|
||||
<div class='col-xs-12' id="systemStatusTimelineContainer">
|
||||
<h2>Well Status</h2>
|
||||
<div id="statusTimeline" data-chart="timeline" data-nodename="advvfdipp.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 class='col-xs-8 box-me' id="systemStatusTimelineContainer">
|
||||
<div class="text-center">
|
||||
<h2>Well Status</h2>
|
||||
</div>
|
||||
<div id="statusTimeline"
|
||||
data-chart="timeline"
|
||||
data-nodename="advvfdipp.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>
|
||||
|
||||
<div class='row row-flex box-me'>
|
||||
<div class='col-xs-4 text-center'>
|
||||
<div class='col-xs-4 box-me'>
|
||||
<div class="text-center">
|
||||
<h2>Last Note</h2>
|
||||
<p class="note-text"><%= channels['advvfdipp.notes'].value %></p>
|
||||
<p> at <%= channels["advvfdipp.notes"].timestamp %></p>
|
||||
<button href="#" data-channelId="<%= channels['advvfdipp.notes'].channelId %>" class="data-table btn btn-theme note-btn" title="Note History"><i style='margin-left: 0.5em; cursor: pointer' class="fa fa-th-list icon-theme"></i> All Notes</button>
|
||||
<br />
|
||||
<button type="button" class="btn btn-theme note-btn" data-toggle="modal" data-target="#note-modal"><i style='margin-left: 0.5em; cursor: pointer' class="fa fa-pencil icon-theme"></i> New Note</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class='col-xs-4 text-center box-me'>
|
||||
<h2>Fluid Level</h2>
|
||||
<div class="gauge-box" data-valueupdate="fluidlevel">
|
||||
<gauge type="angular" channel="fluidlevel" max="600" label="ft." classes="extra" height="250" />
|
||||
<span data-timeupdate="fluidlevel"><%= channels["advvfdipp.fluidlevel"].timestamp %></span>
|
||||
<div class="gauge-box">
|
||||
<div data-labelheight="10"
|
||||
style="height: 170px; background: transparent; margin: 0 auto;"
|
||||
id="gauge-fluidlevel"
|
||||
data-chart="solidgauge"
|
||||
data-nodename="advvfdipp.fluidlevel"
|
||||
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['advvfdipp.fluidlevel'].channelId %>" class="data-table" title="Download Channel History">
|
||||
<i class="fa fa-download"></i>
|
||||
</a>
|
||||
</div>
|
||||
<span data-timeupdate="fluidlevel">
|
||||
<%= channels["advvfdipp.fluidlevel"].timestamp %>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class='col-xs-8'>
|
||||
<div style="height:300px" id="chart-fluidlevel" data-chart="chart" data-nodename1="advvfdipp.fluidlevel" data-datalabel1="Fluid Level" data-daysofhistory="2" data-chartlabel="Fluid Level" data-ylabel="" data-xlabel="Date" data-units=" ft"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='row row-flex box-me'>
|
||||
<div class='col-xs-4 text-center'>
|
||||
|
||||
<div class='col-xs-4 text-center box-me'>
|
||||
<h2>Flow Rate</h2>
|
||||
<div class="gauge-box" data-valueupdate="flowrate">
|
||||
<gauge type="angular" channel="flowrate" max="400" label="GPM" classes="extra" height="250" />
|
||||
<span data-timeupdate="flowrate"><%= channels["advvfdipp.flowrate"].timestamp %></span>
|
||||
<div class="gauge-box">
|
||||
<div data-labelheight="10"
|
||||
style="height: 170px; background: transparent; margin: 0 auto;"
|
||||
id="gauge-flowrate"
|
||||
data-chart="solidgauge"
|
||||
data-nodename="advvfdipp.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['advvfdipp.flowrate'].channelId %>" class="data-table" title="Download Channel History">
|
||||
<i class="fa fa-download"></i>
|
||||
</a>
|
||||
</div>
|
||||
<span data-timeupdate="flowrate">
|
||||
<%= channels["advvfdipp.flowrate"].timestamp %>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class='col-xs-8'>
|
||||
<div style="height:300px" id="chart-flowrate" data-chart="chart" data-nodename1="advvfdipp.flowrate" data-datalabel1="Flow Rate" data-daysofhistory="2" data-chartlabel="Flow Rate" data-ylabel="" data-xlabel="Date" data-units=" GPM"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='row row-flex box-me'>
|
||||
<div class='col-xs-4 text-center'>
|
||||
<h2>Downhole Pressure</h2>
|
||||
<div class="gauge-box" data-valueupdate="intakepressure">
|
||||
<gauge type="angular" channel="intakepressure" max="400" label="PSI" classes="extra" height="250" data-valueupdate="intakepressure" />
|
||||
<span data-timeupdate="intakepressure"><%= channels["advvfdipp.intakepressure"].timestamp %></span>
|
||||
<div class='col-xs-4 text-center box-me'>
|
||||
<h2>Intake Pressure</h2>
|
||||
<div class="gauge-box">
|
||||
<div data-labelheight="10"
|
||||
style="height: 170px; background: transparent; margin: 0 auto;"
|
||||
id="gauge-intakepressure"
|
||||
data-chart="solidgauge"
|
||||
data-nodename="advvfdipp.intakepressure"
|
||||
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['advvfdipp.intakepressure'].channelId %>" class="data-table" title="Download Channel History">
|
||||
<i class="fa fa-download"></i>
|
||||
</a>
|
||||
</div>
|
||||
<span data-timeupdate="intakepressure">
|
||||
<%= channels["advvfdipp.intakepressure"].timestamp %>
|
||||
</span>
|
||||
</div>
|
||||
<div class='col-xs-8'>
|
||||
<div style="height:300px" id="chart-intakepressure" data-chart="chart" data-nodename1="advvfdipp.intakepressure" data-datalabel1="Downhole Pressure" data-daysofhistory="2" data-chartlabel="Intake Pressure" data-ylabel="" data-xlabel="Date" data-units=" PSI"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='row row-flex box-me'>
|
||||
<div class='col-xs-4 text-center'>
|
||||
<div class='col-xs-4 text-center box-me'>
|
||||
<h2>Motor Frequency</h2>
|
||||
<div class="gauge-box" data-valueupdate="vfdfrequency">
|
||||
<gauge type="angular" channel="vfdfrequency" max="300" label="Hz" classes="extra" height="250" />
|
||||
<span data-timeupdate="vfdfrequency"><%= channels["advvfdipp.vfdfrequency"].timestamp %></span>
|
||||
<div class="gauge-box">
|
||||
<div data-labelheight="10"
|
||||
style="height: 170px; background: transparent; margin: 0 auto;"
|
||||
id="gauge-vfdfrequency"
|
||||
data-chart="solidgauge"
|
||||
data-nodename="advvfdipp.vfdfrequency"
|
||||
data-units="Hz"
|
||||
data-min="0"
|
||||
data-max="75"
|
||||
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['advvfdipp.vfdfrequency'].channelId %>" class="data-table" title="Download Channel History">
|
||||
<i class="fa fa-download"></i>
|
||||
</a>
|
||||
</div>
|
||||
<span data-timeupdate="vfdfrequency">
|
||||
<%= channels["advvfdipp.vfdfrequency"].timestamp %>
|
||||
</span>
|
||||
</div>
|
||||
<div class='col-xs-8'>
|
||||
<div style="height:300px" id="chart-vfdfrequency" data-chart="chart" data-nodename1="advvfdipp.vfdfrequency" data-datalabel1="Downhole Temperature" data-daysofhistory="2" data-chartlabel="VFD Frequency" data-ylabel="" data-xlabel="Date" data-units=" Hz"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class='row row-flex box-me'>
|
||||
<div class='col-xs-4 text-center'>
|
||||
<div class='col-xs-4 text-center box-me'>
|
||||
<h2>Motor Current</h2>
|
||||
<div class="gauge-box" data-valueupdate="vfdcurrent">
|
||||
<gauge type="angular" channel="vfdcurrent" max="150" label="A" classes="extra" height="250" />
|
||||
<span data-timeupdate="vfdcurrent"><%= channels["advvfdipp.vfdcurrent"].timestamp %></span>
|
||||
<div class="gauge-box">
|
||||
<div data-labelheight="10"
|
||||
style="height: 170px; background: transparent; margin: 0 auto;"
|
||||
id="gauge-vfdcurrent"
|
||||
data-chart="solidgauge"
|
||||
data-nodename="advvfdipp.vfdcurrent"
|
||||
data-units="A"
|
||||
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['advvfdipp.vfdcurrent'].channelId %>" class="data-table" title="Download Channel History">
|
||||
<i class="fa fa-download"></i>
|
||||
</a>
|
||||
</div>
|
||||
<span data-timeupdate="vfdcurrent">
|
||||
<%= channels["advvfdipp.vfdcurrent"].timestamp %>
|
||||
</span>
|
||||
</div>
|
||||
<div class='col-xs-8'>
|
||||
<div style="height:300px" id="chart-vfdcurrent" data-chart="chart" data-nodename1="advvfdipp.vfdcurrent" data-datalabel1="Motor Current" data-daysofhistory="2" data-chartlabel="Motor Current" data-ylabel="" data-xlabel="Date" data-units=" A"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='row row-flex box-me'>
|
||||
<div class='col-xs-4 text-center'>
|
||||
<div class='col-xs-4 text-center box-me'>
|
||||
<h2>Tubing Pressure</h2>
|
||||
<div class="gauge-box" data-valueupdate="tubingpressure">
|
||||
<gauge type="angular" channel="tubingpressure" max="400" label="PSI" classes="extra" height="250" />
|
||||
<span data-timeupdate="tubingpressure"><%= channels["advvfdipp.tubingpressure"].timestamp %></span>
|
||||
<div class="gauge-box">
|
||||
<div data-labelheight="10"
|
||||
style="height: 170px; background: transparent; margin: 0 auto;"
|
||||
id="gauge-tubingpressure"
|
||||
data-chart="solidgauge"
|
||||
data-nodename="advvfdipp.tubingpressure"
|
||||
data-units="PSI"
|
||||
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['advvfdipp.tubingpressure'].channelId %>" class="data-table" title="Download Channel History">
|
||||
<i class="fa fa-download"></i>
|
||||
</a>
|
||||
</div>
|
||||
<span data-timeupdate="tubingpressure">
|
||||
<%= channels["advvfdipp.tubingpressure"].timestamp %>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class='col-xs-8'>
|
||||
<div style="height:300px" id="chart-tubingpressure" data-chart="chart" data-nodename1="advvfdipp.tubingpressure" data-datalabel1="Tubing Pressure" data-daysofhistory="2" data-chartlabel="Tubing Pressure" data-ylabel="" data-xlabel="Date" data-units=" PSI"></div>
|
||||
|
||||
<div class='col-xs-4 text-center box-me'>
|
||||
<h2>Intake Temperature</h2>
|
||||
<div class="gauge-box">
|
||||
<div data-labelheight="10"
|
||||
style="height: 170px; background: transparent; margin: 0 auto;"
|
||||
id="gauge-intaketemperature"
|
||||
data-chart="solidgauge"
|
||||
data-nodename="advvfdipp.intaketemperature"
|
||||
data-units="° F"
|
||||
data-min="0"
|
||||
data-max="200"
|
||||
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['advvfdipp.intaketemperature'].channelId %>" class="data-table" title="Download Channel History">
|
||||
<i class="fa fa-download"></i>
|
||||
</a>
|
||||
</div>
|
||||
<span data-timeupdate="intaketemperature">
|
||||
<%= channels["advvfdipp.intaketemperature"].timestamp %>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='col-xs-4 text-center box-me'>
|
||||
<h2>Flow Today</h2>
|
||||
<div class="gauge-box">
|
||||
<div data-labelheight="10"
|
||||
style="height: 170px; background: transparent; margin: 0 auto;"
|
||||
id="gauge-flowtotal"
|
||||
data-chart="solidgauge"
|
||||
data-nodename="advvfdipp.flowtotal"
|
||||
data-units="BBL"
|
||||
data-min="0"
|
||||
data-max="5000"
|
||||
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['advvfdipp.flowtotal'].channelId %>" class="data-table" title="Download Channel History">
|
||||
<i class="fa fa-download"></i>
|
||||
</a>
|
||||
</div>
|
||||
<span data-timeupdate="flowtotal">
|
||||
<%= channels["advvfdipp.flowtotal"].timestamp %>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='col-xs-4 text-center box-me'>
|
||||
<h2>Energy Today</h2>
|
||||
<div class="gauge-box">
|
||||
<div data-labelheight="10"
|
||||
style="height: 170px; background: transparent; margin: 0 auto;"
|
||||
id="gauge-energytotal"
|
||||
data-chart="solidgauge"
|
||||
data-nodename="advvfdipp.energytotal"
|
||||
data-units="kWh"
|
||||
data-min="0"
|
||||
data-max="2000"
|
||||
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['advvfdipp.energytotal'].channelId %>" class="data-table" title="Download Channel History">
|
||||
<i class="fa fa-download"></i>
|
||||
</a>
|
||||
</div>
|
||||
<span data-timeupdate="energytotal">
|
||||
<%= channels["advvfdipp.energytotal"].timestamp %>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row box-me">
|
||||
<div class='col-xs-12'>
|
||||
<div style="height:300px"
|
||||
id="chart-overview"
|
||||
data-chart="chart"
|
||||
data-nodename1="advvfdipp.fluidlevel"
|
||||
data-datalabel1="Fluid Level"
|
||||
data-nodename2="advvfdipp.flowrate"
|
||||
data-datalabel2="Flow Rate"
|
||||
data-nodename3="advvfdipp.vfdcurrent"
|
||||
data-datalabel3="Motor Current"
|
||||
data-nodename4="advvfdipp.vfdfrequency"
|
||||
data-datalabel4="Motor Frequency"
|
||||
data-daysofhistory="2"
|
||||
data-chartlabel="Last 48 Hours"
|
||||
data-ylabel=""
|
||||
data-xlabel="Date"
|
||||
data-units=""></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='row row-flex box-me'>
|
||||
<div class='col-xs-4 text-center'>
|
||||
<h2>Downhole Temperature</h2>
|
||||
<div class="gauge-box" data-valueupdate="intaketemperature">
|
||||
<gauge type="angular" channel="intaketemperature" max="300" label="deg F" classes="extra" height="250" />
|
||||
<span data-timeupdate="intaketemperature"><%= channels["advvfdipp.intaketemperature"].timestamp %></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class='col-xs-8'>
|
||||
<div style="height:300px" id="chart-intaketemperature" data-chart="chart" data-nodename1="advvfdipp.intaketemperature" data-datalabel1="Downhole Temperature" data-daysofhistory="2" data-chartlabel="Intake Temperature" data-ylabel="" data-xlabel="Date" data-units=" ° F"></div>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
.modal-backdrop {position: relative;}
|
||||
.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;
|
||||
}
|
||||
|
||||
<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 h2 {
|
||||
text-transform: uppercase;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
font-weight: 400;
|
||||
letter-spacing: 1px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.pad15 {
|
||||
margin: 15px 15px;
|
||||
}
|
||||
.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 {
|
||||
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 > [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>
|
||||
#systemStatusTimelineContainer h2 {
|
||||
text-transform: uppercase;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
font-weight: 400;
|
||||
letter-spacing: 1px;
|
||||
z-index: 100;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,331 +0,0 @@
|
||||
<div class="row row-flex box-me">
|
||||
<div class='col-xs-9 box-me' id="systemStatusTimelineContainer">
|
||||
<h2>Well Status</h2>
|
||||
<div id="statusTimeline"
|
||||
data-chart="timeline"
|
||||
data-nodename="advvfdipp.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-3 box-me'>
|
||||
<div class="text-center">
|
||||
<h2>Last Note</h2>
|
||||
<p><%= channels['advvfdipp.notes'].value %></p>
|
||||
<p> at <%= channels["advvfdipp.notes"].timestamp %></p>
|
||||
<button href="#" data-channelId="<%= channels['advvfdipp.notes'].channelId %>" class="data-table btn btn-theme" title="Note History"><i style='margin-left: 0.5em; cursor: pointer' class="fa fa-th-list icon-theme"></i> All Notes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='row row-flex box-me'>
|
||||
<div class='col-xs-4 text-center box-me'>
|
||||
<h2>Fluid Level</h2>
|
||||
<div class="gauge-box">
|
||||
<div data-labelheight="10"
|
||||
style="height: 170px; background: transparent; margin: 0 auto;"
|
||||
id="gauge-fluidlevel"
|
||||
data-chart="solidgauge"
|
||||
data-nodename="advvfdipp.fluidlevel"
|
||||
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['advvfdipp.fluidlevel'].channelId %>" class="data-table" title="Download Channel History">
|
||||
<i class="fa fa-download"></i>
|
||||
</a>
|
||||
</div>
|
||||
<span data-timeupdate="fluidlevel">
|
||||
<%= channels["advvfdipp.fluidlevel"].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="advvfdipp.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['advvfdipp.flowrate'].channelId %>" class="data-table" title="Download Channel History">
|
||||
<i class="fa fa-download"></i>
|
||||
</a>
|
||||
</div>
|
||||
<span data-timeupdate="flowrate">
|
||||
<%= channels["advvfdipp.flowrate"].timestamp %>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='col-xs-4 text-center box-me'>
|
||||
<h2>Intake Pressure</h2>
|
||||
<div class="gauge-box">
|
||||
<div data-labelheight="10"
|
||||
style="height: 170px; background: transparent; margin: 0 auto;"
|
||||
id="gauge-intakepressure"
|
||||
data-chart="solidgauge"
|
||||
data-nodename="advvfdipp.intakepressure"
|
||||
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['advvfdipp.intakepressure'].channelId %>" class="data-table" title="Download Channel History">
|
||||
<i class="fa fa-download"></i>
|
||||
</a>
|
||||
</div>
|
||||
<span data-timeupdate="intakepressure">
|
||||
<%= channels["advvfdipp.intakepressure"].timestamp %>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='col-xs-4 text-center box-me'>
|
||||
<h2>Motor Frequency</h2>
|
||||
<div class="gauge-box">
|
||||
<div data-labelheight="10"
|
||||
style="height: 170px; background: transparent; margin: 0 auto;"
|
||||
id="gauge-vfdfrequency"
|
||||
data-chart="solidgauge"
|
||||
data-nodename="advvfdipp.vfdfrequency"
|
||||
data-units="Hz"
|
||||
data-min="0"
|
||||
data-max="75"
|
||||
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['advvfdipp.vfdfrequency'].channelId %>" class="data-table" title="Download Channel History">
|
||||
<i class="fa fa-download"></i>
|
||||
</a>
|
||||
</div>
|
||||
<span data-timeupdate="vfdfrequency">
|
||||
<%= channels["advvfdipp.vfdfrequency"].timestamp %>
|
||||
</span>
|
||||
</div>
|
||||
</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-vfdcurrent"
|
||||
data-chart="solidgauge"
|
||||
data-nodename="advvfdipp.vfdcurrent"
|
||||
data-units="A"
|
||||
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['advvfdipp.vfdcurrent'].channelId %>" class="data-table" title="Download Channel History">
|
||||
<i class="fa fa-download"></i>
|
||||
</a>
|
||||
</div>
|
||||
<span data-timeupdate="vfdcurrent">
|
||||
<%= channels["advvfdipp.vfdcurrent"].timestamp %>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='col-xs-4 text-center box-me'>
|
||||
<h2>Tubing Pressure</h2>
|
||||
<div class="gauge-box">
|
||||
<div data-labelheight="10"
|
||||
style="height: 170px; background: transparent; margin: 0 auto;"
|
||||
id="gauge-tubingpressure"
|
||||
data-chart="solidgauge"
|
||||
data-nodename="advvfdipp.tubingpressure"
|
||||
data-units="PSI"
|
||||
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['advvfdipp.tubingpressure'].channelId %>" class="data-table" title="Download Channel History">
|
||||
<i class="fa fa-download"></i>
|
||||
</a>
|
||||
</div>
|
||||
<span data-timeupdate="tubingpressure">
|
||||
<%= channels["advvfdipp.tubingpressure"].timestamp %>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='col-xs-4 text-center box-me'>
|
||||
<h2>Intake Temperature</h2>
|
||||
<div class="gauge-box">
|
||||
<div data-labelheight="10"
|
||||
style="height: 170px; background: transparent; margin: 0 auto;"
|
||||
id="gauge-intaketemperature"
|
||||
data-chart="solidgauge"
|
||||
data-nodename="advvfdipp.intaketemperature"
|
||||
data-units="° F"
|
||||
data-min="0"
|
||||
data-max="200"
|
||||
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['advvfdipp.intaketemperature'].channelId %>" class="data-table" title="Download Channel History">
|
||||
<i class="fa fa-download"></i>
|
||||
</a>
|
||||
</div>
|
||||
<span data-timeupdate="intaketemperature">
|
||||
<%= channels["advvfdipp.intaketemperature"].timestamp %>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='col-xs-4 text-center box-me'>
|
||||
<h2>Flow Today</h2>
|
||||
<div class="gauge-box">
|
||||
<div data-labelheight="10"
|
||||
style="height: 170px; background: transparent; margin: 0 auto;"
|
||||
id="gauge-flowtotal"
|
||||
data-chart="solidgauge"
|
||||
data-nodename="advvfdipp.flowtotal"
|
||||
data-units="BBL"
|
||||
data-min="0"
|
||||
data-max="5000"
|
||||
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['advvfdipp.flowtotal'].channelId %>" class="data-table" title="Download Channel History">
|
||||
<i class="fa fa-download"></i>
|
||||
</a>
|
||||
</div>
|
||||
<span data-timeupdate="flowtotal">
|
||||
<%= channels["advvfdipp.flowtotal"].timestamp %>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='col-xs-4 text-center box-me'>
|
||||
<h2>Energy Today</h2>
|
||||
<div class="gauge-box">
|
||||
<div data-labelheight="10"
|
||||
style="height: 170px; background: transparent; margin: 0 auto;"
|
||||
id="gauge-energytotal"
|
||||
data-chart="solidgauge"
|
||||
data-nodename="advvfdipp.energytotal"
|
||||
data-units="kWh"
|
||||
data-min="0"
|
||||
data-max="2000"
|
||||
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['advvfdipp.energytotal'].channelId %>" class="data-table" title="Download Channel History">
|
||||
<i class="fa fa-download"></i>
|
||||
</a>
|
||||
</div>
|
||||
<span data-timeupdate="energytotal">
|
||||
<%= channels["advvfdipp.energytotal"].timestamp %>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row box-me">
|
||||
<div class='col-xs-12'>
|
||||
<div style="height:300px"
|
||||
id="chart-overview"
|
||||
data-chart="chart"
|
||||
data-nodename1="advvfdipp.fluidlevel"
|
||||
data-datalabel1="Fluid Level"
|
||||
data-nodename2="advvfdipp.flowrate"
|
||||
data-datalabel2="Flow Rate"
|
||||
data-nodename3="advvfdipp.vfdcurrent"
|
||||
data-datalabel3="Motor Current"
|
||||
data-nodename4="advvfdipp.vfdfrequency"
|
||||
data-datalabel4="Motor Frequency"
|
||||
data-daysofhistory="2"
|
||||
data-chartlabel="Last 48 Hours"
|
||||
data-ylabel=""
|
||||
data-xlabel="Date"
|
||||
data-units=""></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
153
POCloud/HTML/oldOverview.html
Normal file
153
POCloud/HTML/oldOverview.html
Normal file
@@ -0,0 +1,153 @@
|
||||
<div class="row row-flex box-me">
|
||||
<div class='col-xs-12' id="systemStatusTimelineContainer">
|
||||
<h2>Well Status</h2>
|
||||
<div id="statusTimeline" data-chart="timeline" data-nodename="advvfdipp.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>
|
||||
|
||||
<div class='row row-flex box-me'>
|
||||
<div class='col-xs-4 text-center'>
|
||||
<h2>Fluid Level</h2>
|
||||
<div class="gauge-box" data-valueupdate="fluidlevel">
|
||||
<gauge type="angular" channel="fluidlevel" max="600" label="ft." classes="extra" height="250" />
|
||||
<span data-timeupdate="fluidlevel"><%= channels["advvfdipp.fluidlevel"].timestamp %></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class='col-xs-8'>
|
||||
<div style="height:300px" id="chart-fluidlevel" data-chart="chart" data-nodename1="advvfdipp.fluidlevel" data-datalabel1="Fluid Level" data-daysofhistory="2" data-chartlabel="Fluid Level" data-ylabel="" data-xlabel="Date" data-units=" ft"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='row row-flex box-me'>
|
||||
<div class='col-xs-4 text-center'>
|
||||
<h2>Flow Rate</h2>
|
||||
<div class="gauge-box" data-valueupdate="flowrate">
|
||||
<gauge type="angular" channel="flowrate" max="400" label="GPM" classes="extra" height="250" />
|
||||
<span data-timeupdate="flowrate"><%= channels["advvfdipp.flowrate"].timestamp %></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class='col-xs-8'>
|
||||
<div style="height:300px" id="chart-flowrate" data-chart="chart" data-nodename1="advvfdipp.flowrate" data-datalabel1="Flow Rate" data-daysofhistory="2" data-chartlabel="Flow Rate" data-ylabel="" data-xlabel="Date" data-units=" GPM"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='row row-flex box-me'>
|
||||
<div class='col-xs-4 text-center'>
|
||||
<h2>Downhole Pressure</h2>
|
||||
<div class="gauge-box" data-valueupdate="intakepressure">
|
||||
<gauge type="angular" channel="intakepressure" max="400" label="PSI" classes="extra" height="250" data-valueupdate="intakepressure" />
|
||||
<span data-timeupdate="intakepressure"><%= channels["advvfdipp.intakepressure"].timestamp %></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class='col-xs-8'>
|
||||
<div style="height:300px" id="chart-intakepressure" data-chart="chart" data-nodename1="advvfdipp.intakepressure" data-datalabel1="Downhole Pressure" data-daysofhistory="2" data-chartlabel="Intake Pressure" data-ylabel="" data-xlabel="Date" data-units=" PSI"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='row row-flex box-me'>
|
||||
<div class='col-xs-4 text-center'>
|
||||
<h2>Motor Frequency</h2>
|
||||
<div class="gauge-box" data-valueupdate="vfdfrequency">
|
||||
<gauge type="angular" channel="vfdfrequency" max="300" label="Hz" classes="extra" height="250" />
|
||||
<span data-timeupdate="vfdfrequency"><%= channels["advvfdipp.vfdfrequency"].timestamp %></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class='col-xs-8'>
|
||||
<div style="height:300px" id="chart-vfdfrequency" data-chart="chart" data-nodename1="advvfdipp.vfdfrequency" data-datalabel1="Downhole Temperature" data-daysofhistory="2" data-chartlabel="VFD Frequency" data-ylabel="" data-xlabel="Date" data-units=" Hz"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class='row row-flex box-me'>
|
||||
<div class='col-xs-4 text-center'>
|
||||
<h2>Motor Current</h2>
|
||||
<div class="gauge-box" data-valueupdate="vfdcurrent">
|
||||
<gauge type="angular" channel="vfdcurrent" max="150" label="A" classes="extra" height="250" />
|
||||
<span data-timeupdate="vfdcurrent"><%= channels["advvfdipp.vfdcurrent"].timestamp %></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class='col-xs-8'>
|
||||
<div style="height:300px" id="chart-vfdcurrent" data-chart="chart" data-nodename1="advvfdipp.vfdcurrent" data-datalabel1="Motor Current" data-daysofhistory="2" data-chartlabel="Motor Current" data-ylabel="" data-xlabel="Date" data-units=" A"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='row row-flex box-me'>
|
||||
<div class='col-xs-4 text-center'>
|
||||
<h2>Tubing Pressure</h2>
|
||||
<div class="gauge-box" data-valueupdate="tubingpressure">
|
||||
<gauge type="angular" channel="tubingpressure" max="400" label="PSI" classes="extra" height="250" />
|
||||
<span data-timeupdate="tubingpressure"><%= channels["advvfdipp.tubingpressure"].timestamp %></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class='col-xs-8'>
|
||||
<div style="height:300px" id="chart-tubingpressure" data-chart="chart" data-nodename1="advvfdipp.tubingpressure" data-datalabel1="Tubing Pressure" data-daysofhistory="2" data-chartlabel="Tubing Pressure" data-ylabel="" data-xlabel="Date" data-units=" PSI"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='row row-flex box-me'>
|
||||
<div class='col-xs-4 text-center'>
|
||||
<h2>Downhole Temperature</h2>
|
||||
<div class="gauge-box" data-valueupdate="intaketemperature">
|
||||
<gauge type="angular" channel="intaketemperature" max="300" label="deg F" classes="extra" height="250" />
|
||||
<span data-timeupdate="intaketemperature"><%= channels["advvfdipp.intaketemperature"].timestamp %></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class='col-xs-8'>
|
||||
<div style="height:300px" id="chart-intaketemperature" data-chart="chart" data-nodename1="advvfdipp.intaketemperature" data-datalabel1="Downhole Temperature" data-daysofhistory="2" data-chartlabel="Intake Temperature" data-ylabel="" data-xlabel="Date" data-units=" ° F"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user