126 lines
7.5 KiB
HTML
126 lines
7.5 KiB
HTML
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<ul class="nav nav-tabs" role="tablist">
|
|
<li><a href="/#/">Current Tag Values</a></li>
|
|
<li class="active"><a href="/#/latest_stroke">Last Stroke</a></li>
|
|
<li><a href="/#/totals">Daily Totals</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-2">
|
|
<ul class="list-group">
|
|
<li class="list-group-item animate" ng-repeat="date in dates" ng-class="{'active':date.ind==current_date}">
|
|
<a ng-if="date.ind!=current_date" href="/#/cards/{{date.ind}}">{{date.dtime | date: 'EEE. MMM. d yyyy'}}</a>
|
|
<span ng-if="date.ind==current_date">{{date.dtime | date: 'EEE. MMM. d yyyy'}}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-sm-10 pull-right">
|
|
<div ng-if="loading" class="well"><img src="/img/loading.gif" style="display: table-cell; vertical-align: middle"/></div>
|
|
<div ng-if="!loading">
|
|
<div ng-if="error" class="well"><h2>Error: {{error}}</h2></div>
|
|
<div ng-if="!error">
|
|
<h5><a href="/#/cards/{{_id - 1}}" class="pull-left"><< Prev. Card</a></h5>
|
|
<h1 style="text-align:center;">{{stroke_time | date: 'medium'}}</h1>
|
|
|
|
|
|
<div class="row">
|
|
<div class="col-sm-4">
|
|
<div id="Status" class="gauge well" style="width:95%; text-align:center; margin:10px;"><h4>Status:</h4><h3>{{stroke_type}}</h3><h6>at {{stroke_time | date: "medium"}}</h6></div>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<div id="FillageGauge" class="gauge well" style="width:95%; text-align:center; margin:10px;"><h4>Pump Fillage:</h4><h3>{{tagData['Pump Fill Percent'].value | number:3}} %</h3><h6>at {{tagData['Pump Fill Percent'].created_on | date: "medium"}}</h6></div>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<div id="FAPGauge" class="gauge well" style="width:95%; text-align:center; margin:10px;"><h4>Fluid Above Pump:</h4><h3>{{tagData['Fluid Level'].value | number:3}} ft.</h3><h6>at {{tagData['Fluid Level'].created_on | date: "medium"}}</h6></div>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<div id="PRHPGauge" class="gauge well" style="width:95%; text-align:center; margin:10px;"><h4>Polished Rod HP:</h4><h3>{{tagData['Polished Rod HP'].value | number:3}} HP</h3><h6>at {{tagData['Polished Rod HP'].created_on | date: "medium"}}</h6></div>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<div id="PMPHPGauge" class="gauge well" style="width:95%; text-align:center; margin:10px;"><h4>Pump HP:</h4><h3>{{tagData['Downhole Pump HP'].value | number:3}} HP</h3><h6>at {{tagData['Downhole Pump HP'].created_on | date: "medium"}}</h6></div>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<div id="SpeedGauge" class="gauge well" style="width:95%; text-align:center; margin:10px;"><h4>Speed:</h4><h3>{{tagData['Stroke Speed'].value | number:3}} SPM</h3><h6>at {{tagData['Stroke Speed'].created_on | date: "medium"}}</h6></div>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<div id="FluidLoadGauge" class="gauge well" style="width:95%; text-align:center; margin:10px;"><h4>Fluid Load:</h4><h3>{{tagData['Fluid Load'].value | number:3}} lbs.</h3><h6>at {{tagData['Fluid Load'].created_on | date: "medium"}}</h6></div>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<div id="LastUpdated" class="gauge well" style="width:95%; text-align:center; margin:10px;"><h4>Current Stroke:</h4><h3>{{stroke_time | date: "medium"}}</h3></div>
|
|
</div>
|
|
|
|
<div class="col-sm-12">
|
|
<div class="progress" style="margin:10px;">
|
|
<div class="progress-bar progress-bar-striped active"
|
|
id="surface_stroke_length"
|
|
role="progressbar"
|
|
aria-valuenow="{{ tagData['Surface Stroke Length'].value }}"
|
|
aria-valuemin="{{ tagData['Surface Stroke Length'].min_expected }}"
|
|
aria-valuemax="{{ tagData['Surface Stroke Length'].max_expected }}"
|
|
style="width: {{ tagData['Surface Stroke Length'].percentage }}%;">
|
|
Surface Stroke Length: {{ tagData['Surface Stroke Length'].value | number:3 }} in.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="progress" style="margin:10px;">
|
|
<div class="progress-bar progress-bar-striped active"
|
|
id="downhole_gross_stroke"
|
|
role="progressbar"
|
|
aria-valuenow="{{ tagData['Downhole Gross Stroke'].value }}"
|
|
aria-valuemin="{{ tagData['Downhole Gross Stroke'].min_expected }}"
|
|
aria-valuemax="{{ tagData['Downhole Gross Stroke'].max_expected }}"
|
|
style="width: {{ tagData['Downhole Gross Stroke'].percentage }}%;">
|
|
Downhole Gross Stroke: {{ tagData['Downhole Gross Stroke'].value | number:3 }} in.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="progress" style="margin:10px;">
|
|
<div class="progress-bar progress-bar-striped active"
|
|
id="downhole_adjusted_gross_stroke"
|
|
role="progressbar"
|
|
aria-valuenow="{{ tagData['Downhole Adjusted Gross Stroke'].value }}"
|
|
aria-valuemin="{{ tagData['Downhole Adjusted Gross Stroke'].min_expected }}"
|
|
aria-valuemax="{{ tagData['Downhole Adjusted Gross Stroke'].max_expected }}"
|
|
style="width: {{ tagData['Downhole Adjusted Gross Stroke'].percentage }}%;">
|
|
Downhole Adjusted Gross Stroke: {{ tagData['Downhole Adjusted Gross Stroke'].value | number:3 }} in.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="progress" style="margin:10px;">
|
|
<div class="progress-bar progress-bar-striped active"
|
|
id="downhole_net_stroke"
|
|
role="progressbar"
|
|
aria-valuenow="{{ tagData['Downhole Net Stroke'].value }}"
|
|
aria-valuemin="{{ tagData['Downhole Net Stroke'].min_expected }}"
|
|
aria-valuemax="{{ tagData['Downhole Net Stroke'].max_expected }}"
|
|
style="width: {{ tagData['Downhole Net Stroke'].percentage }}%;">
|
|
Downhole Net Stroke: {{ tagData['Downhole Net Stroke'].value | number:3 }} in.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<h1>Surface Card</h1>
|
|
<div class="surfaceCard" style="height:500px">
|
|
<linechart data="card_graph_data" options="surfaceOptions"></linechart>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-12">
|
|
<h1>Downhole Card</h1>
|
|
<div class="downholeCard" style="height:500px">
|
|
<linechart data="card_graph_data" options="downholeOptions"></linechart>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!--col-sm-10-->
|
|
</div>
|