414 lines
15 KiB
HTML
414 lines
15 KiB
HTML
<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["abbflow.notes"].channelId %>'
|
|
data-techName='<%=channels["abbflow.notes"].techName %>'
|
|
data-name='<%= channels["abbflow.notes"].name %>'
|
|
data-val="<%=channels["abbflow.notes"].value %>"
|
|
type="text"
|
|
id="<%= channels["abbflow.notes"].channelId %>"
|
|
value="<%=channels["abbflow.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-8'>
|
|
<div class="text-center">
|
|
<h2>Last Note</h2>
|
|
<p class="note-text"><%= channels['abbflow.notes'].value %></p>
|
|
<p> at <%= channels["abbflow.notes"].timestamp %></p>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-4">
|
|
<div class="text-center">
|
|
<button href="#" data-channelId="<%= channels['abbflow.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>
|
|
</div>
|
|
|
|
<div class='row row-flex box-me'>
|
|
<div class='col-xs-4 text-center'>
|
|
<h2>Volume Flow</h2>
|
|
<div class="gauge-box">
|
|
<div data-labelheight="10"
|
|
style="height: 170px; background: transparent; margin: 0 auto;"
|
|
id="gauge-volume_flow"
|
|
data-chart="solidgauge"
|
|
data-nodename="abbflow.volume_flow"
|
|
data-units="MCF/Day"
|
|
data-min="0"
|
|
data-max="1000"
|
|
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['abbflow.volume_flow'].channelId %>" class="data-table" title="Download Channel History">
|
|
<i class="fa fa-download"></i>
|
|
</a>
|
|
</div>
|
|
<span data-timeupdate="volume_flow">
|
|
<%= channels["abbflow.volume_flow"].timestamp %>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class='col-xs-8'>
|
|
<div style="height:300px" id="chart-volume_flow" data-chart="chart" data-nodename1="abbflow.volume_flow" data-datalabel1="Volume Flow" data-daysofhistory="2" data-chartlabel="Volume Flow" data-ylabel="" data-xlabel="Date" data-units=" MCF/Day"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class='row row-flex box-me'>
|
|
<div class='col-xs-4 text-center'>
|
|
<h2>Today Volume</h2>
|
|
<div class="gauge-box">
|
|
<div data-labelheight="10"
|
|
style="height: 170px; background: transparent; margin: 0 auto;"
|
|
id="gauge-today_volume"
|
|
data-chart="solidgauge"
|
|
data-nodename="abbflow.today_volume"
|
|
data-units="MCF"
|
|
data-min="0"
|
|
data-max="1000"
|
|
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['abbflow.today_volume'].channelId %>" class="data-table" title="Download Channel History">
|
|
<i class="fa fa-download"></i>
|
|
</a>
|
|
</div>
|
|
<span data-timeupdate="today_volume">
|
|
<%= channels["abbflow.today_volume"].timestamp %>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class='col-xs-8'>
|
|
<div style="height:300px" id="chart-today_volume" data-chart="chart" data-nodename1="abbflow.today_volume" data-datalabel1="Today Volume" data-daysofhistory="2" data-chartlabel="Today Volume" data-ylabel="" data-xlabel="Date" data-units=" MCF"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class='row row-flex box-me'>
|
|
<div class='col-xs-4 text-center'>
|
|
<h2>Differential Pressure</h2>
|
|
<div class="gauge-box">
|
|
<div data-labelheight="10"
|
|
style="height: 170px; background: transparent; margin: 0 auto;"
|
|
id="gauge-differential_pressure"
|
|
data-chart="solidgauge"
|
|
data-nodename="abbflow.differential_pressure"
|
|
data-units="PSIA"
|
|
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['abbflow.differential_pressure'].channelId %>" class="data-table" title="Download Channel History">
|
|
<i class="fa fa-download"></i>
|
|
</a>
|
|
</div>
|
|
<span data-timeupdate="differential_pressure">
|
|
<%= channels["abbflow.differential_pressure"].timestamp %>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class='col-xs-8'>
|
|
<div style="height:300px" id="chart-differential_pressure" data-chart="chart" data-nodename1="abbflow.differential_pressure" data-datalabel1="Differential Pressure" data-daysofhistory="2" data-chartlabel="Differential Pressure" data-ylabel="" data-xlabel="Date" data-units=" inH2O"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class='row row-flex box-me'>
|
|
<div class='col-xs-4 text-center'>
|
|
<h2>Static Pressure</h2>
|
|
<div class="gauge-box">
|
|
<div data-labelheight="10"
|
|
style="height: 170px; background: transparent; margin: 0 auto;"
|
|
id="gauge-static_pressure"
|
|
data-chart="solidgauge"
|
|
data-nodename="abbflow.static_pressure"
|
|
data-units="PSIA"
|
|
data-min="0"
|
|
data-max="150"
|
|
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['abbflow.static_pressure'].channelId %>" class="data-table" title="Download Channel History">
|
|
<i class="fa fa-download"></i>
|
|
</a>
|
|
</div>
|
|
<span data-timeupdate="static_pressure">
|
|
<%= channels["abbflow.static_pressure"].timestamp %>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class='col-xs-8'>
|
|
<div style="height:300px" id="chart-static_pressure" data-chart="chart" data-nodename1="abbflow.static_pressure" data-datalabel1="Static Pressure" data-daysofhistory="2" data-chartlabel="Static Pressure" data-ylabel="" data-xlabel="Date" data-units=" PSIA"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class='row row-flex box-me'>
|
|
<div class='col-xs-4 text-center'>
|
|
<h2>Temperature</h2>
|
|
<div class="gauge-box">
|
|
<div data-labelheight="10"
|
|
style="height: 170px; background: transparent; margin: 0 auto;"
|
|
id="gauge-temperature"
|
|
data-chart="solidgauge"
|
|
data-nodename="abbflow.temperature"
|
|
data-units="deg F"
|
|
data-min="0"
|
|
data-max="150"
|
|
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['abbflow.temperature'].channelId %>" class="data-table" title="Download Channel History">
|
|
<i class="fa fa-download"></i>
|
|
</a>
|
|
</div>
|
|
<span data-timeupdate="temperature">
|
|
<%= channels["abbflow.temperature"].timestamp %>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class='col-xs-8'>
|
|
<div style="height:300px" id="chart-temperature" data-chart="chart" data-nodename1="abbflow.temperature" data-datalabel1="Temperature" data-daysofhistory="2" data-chartlabel="Temperature" data-ylabel="" data-xlabel="Date" data-units=" deg F"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class='row row-flex box-me'>
|
|
<div class='col-xs-4 text-center'>
|
|
<h2>Battery Voltage</h2>
|
|
<div class="gauge-box">
|
|
<div data-labelheight="10"
|
|
style="height: 170px; background: transparent; margin: 0 auto;"
|
|
id="gauge-battery_voltage"
|
|
data-chart="solidgauge"
|
|
data-nodename="abbflow.battery_voltage"
|
|
data-units="V"
|
|
data-min="0"
|
|
data-max="25"
|
|
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['abbflow.battery_voltage'].channelId %>" class="data-table" title="Download Channel History">
|
|
<i class="fa fa-download"></i>
|
|
</a>
|
|
</div>
|
|
<span data-timeupdate="battery_voltage">
|
|
<%= channels["abbflow.battery_voltage"].timestamp %>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class='col-xs-8'>
|
|
<div style="height:300px" id="chart-battery_voltage" data-chart="chart" data-nodename1="abbflow.battery_voltage" data-datalabel1="Battery Voltage" data-daysofhistory="2" data-chartlabel="Battery Voltage" data-ylabel="" data-xlabel="Date" data-units=" V"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class='row row-flex box-me'>
|
|
<div class='col-xs-4 text-center'>
|
|
<h2>Charger Voltage</h2>
|
|
<div class="gauge-box">
|
|
<div data-labelheight="10"
|
|
style="height: 170px; background: transparent; margin: 0 auto;"
|
|
id="gauge-charger_voltage"
|
|
data-chart="solidgauge"
|
|
data-nodename="abbflow.charger_voltage"
|
|
data-units="V"
|
|
data-min="0"
|
|
data-max="25"
|
|
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['abbflow.charger_voltage'].channelId %>" class="data-table" title="Download Channel History">
|
|
<i class="fa fa-download"></i>
|
|
</a>
|
|
</div>
|
|
<span data-timeupdate="charger_voltage">
|
|
<%= channels["abbflow.charger_voltage"].timestamp %>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class='col-xs-8'>
|
|
<div style="height:300px" id="chart-charger_voltage" data-chart="chart" data-nodename1="abbflow.charger_voltage" data-datalabel1="Battery Voltage" data-daysofhistory="2" data-chartlabel="Charger Voltage" data-ylabel="" data-xlabel="Date" data-units=" V"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class='row row-flex box-me'>
|
|
<div class='col-xs-4 text-center box-me'>
|
|
<h2>Yesterday Volume</h2>
|
|
<div class="gauge-box">
|
|
<div data-labelheight="10"
|
|
style="height: 170px; background: transparent; margin: 0 auto;"
|
|
id="gauge-yesterday_volume"
|
|
data-chart="solidgauge"
|
|
data-nodename="abbflow.yesterday_volume"
|
|
data-units="MCF"
|
|
data-min="0"
|
|
data-max="1000"
|
|
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['abbflow.yesterday_volume'].channelId %>" class="data-table" title="Download Channel History">
|
|
<i class="fa fa-download"></i>
|
|
</a>
|
|
</div>
|
|
<span data-timeupdate="yesterday_volume">
|
|
<%= channels["abbflow.yesterday_volume"].timestamp %>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class='col-xs-4 text-center box-me'>
|
|
<h2>Last Calc. Period Volume</h2>
|
|
<div class="gauge-box">
|
|
<div data-labelheight="10"
|
|
style="height: 170px; background: transparent; margin: 0 auto;"
|
|
id="gauge-last_calculation_period_volume"
|
|
data-chart="solidgauge"
|
|
data-nodename="abbflow.last_calculation_period_volume"
|
|
data-units="SCF"
|
|
data-min="0"
|
|
data-max="1000"
|
|
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['abbflow.last_calculation_period_volume'].channelId %>" class="data-table" title="Download Channel History">
|
|
<i class="fa fa-download"></i>
|
|
</a>
|
|
</div>
|
|
<span data-timeupdate="last_calculation_period_volume">
|
|
<%= channels["abbflow.last_calculation_period_volume"].timestamp %>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class='col-xs-4 text-center box-me'>
|
|
<h2>Accumulated Volume</h2>
|
|
<div class="gauge-box">
|
|
<div data-labelheight="10"
|
|
style="height: 170px; background: transparent; margin: 0 auto;"
|
|
id="gauge-accumulated_volume"
|
|
data-chart="solidgauge"
|
|
data-nodename="abbflow.accumulated_volume"
|
|
data-units="MCF"
|
|
data-min="0"
|
|
data-max="1000000"
|
|
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['abbflow.accumulated_volume'].channelId %>" class="data-table" title="Download Channel History">
|
|
<i class="fa fa-download"></i>
|
|
</a>
|
|
</div>
|
|
<span data-timeupdate="accumulated_volume">
|
|
<%= channels["abbflow.accumulated_volume"].timestamp %>
|
|
</span>
|
|
</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;
|
|
}
|
|
|
|
#note-modal{
|
|
position: absolute;
|
|
}
|
|
|
|
.modal-backdrop {
|
|
position: relative;
|
|
}
|
|
.modal-dialog {
|
|
top:5%;
|
|
}
|
|
.note-btn {
|
|
margin-top: 10px;
|
|
width: 75%;
|
|
}
|
|
.note-text {
|
|
font-size: 1.5em;
|
|
font-style: italic;
|
|
}
|
|
</style>
|