www-POC/sails/assets/templates/dashboard.html

<div class="container">
	<div class="row">
		<div google-chart chart="timelineData"></div>
	</div>
	<div class="row">
		<div class="col-sm-2">
			<div ng-if="dateListLoading" class="well"><img src="/img/loading.gif" /></div>
			<div ng-if="!dateListLoading">
				<!-- <pagination total-items="totalFiles" ng-model="currentPage" max-size="maxSize" items-per-page="numPerPage" class="pagination-sm" boundary-links="false" rotate="false" num-pages="numPages"></pagination> -->
				<ul class="list-group">
					<li class="list-group-item active animate">Dashboard</li>
					<li class="list-group-item animate" ng-repeat="date in dates">
						<a href="/#/files/{{date | date: 'yyyy-MM-dd'}}">{{date | date: 'mediumDate'}}</a>
					</li>
				</ul>
			</div>
		</div>
		<div class="col-sm-10">
			<ul class="nav nav-tabs" role="tablist">
				<li class="active"><a href="/">Last Stroke</a></li>
				<li><a href="/#/totals">Today's Totals</a></li>
			</ul>

			<h1 style="text-align:center;">Dashboard - Stroke {{card_id}}</h1>

			<div style="text-align:center;"><button class="btn btn-primary active" id="refreshButton" ng-click="dashboard()">Refresh Data</button></div>

			<div class="row row-flex">
				<div class="col-sm-4">
					<div id="Status" class="gauge well" style="width:95%; text-align:center; margin:10px;"><h4>Status:</h4><h3>{{status}}</h3><h6>Last Changed: {{status_datetime | 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>{{tagValues['Fill Percentage'].val | number:3}} %</h3>
						<h6>Last Changed: {{tagValues['Fill Percentage'].dtime | 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>{{tagValues['Fluid Level'].val  | number:3}} ft.</h3>
						<h6>Last Changed: {{tagValues['Fluid Level'].dtime | date: "medium"}}</h6>
					</div>
				</div>
			</div>
			<div class="row row-flex">
				<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>{{tagValues['Polished Rod HP'].val | number:3}} HP</h3>
						<h6>Last Changed: {{tagValues['Polished Rod HP'].dtime | 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>{{tagValues['Pump HP'].val | number:3}} HP</h3>
						<h6>Last Changed: {{tagValues['Pump HP'].dtime | 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>{{tagValues['SPM'].val | number:3}} SPM</h3>
						<h6>Last Changed: {{tagValues['SPM'].dtime | date: "medium"}}</h6>
					</div>
				</div>
			</div>
			<div class="row row-flex">
				<div class="col-sm-4">
					<div id="FluidLoadGauge" class="gauge well" style="width:95%; text-align:center; margin:10px;">
						<h4>Fluid Load:</h4>
						<h3>{{tagValues['Downhole Fluid Load'].val | number:3}} lbs.</h3>
						<h6>Last Changed: {{tagValues['Downhole Fluid Load'].dtime | 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>Last Stroke:</h4>
						<h5>{{last_stroke | date: "medium"}}</h5>
					</div>
				</div>
			</div>
			<div class="row row-flex">
				<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="{{ tagValues['Surface Stroke Length'].val }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ tagValues['Surface Stroke Length'].val }}%;">
					    Surface Stroke Length: {{ tagValues['Surface Stroke Length'].val }} 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="{{ tagValues['Downhole Gross Stroke'].val }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ tagValues['Downhole Gross Stroke'].val }}%;">
					    Downhole Gross Stroke: {{ tagValues['Downhole Gross Stroke'].val }} 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="{{ tagValues['Downhole Adjusted Gross Stroke'].val }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ tagValues['Downhole Adjusted Gross Stroke'].val }}%;">
					    Downhole Adjusted Gross Stroke: {{ tagValues['Downhole Adjusted Gross Stroke'].val }} 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="{{ tagValues['Downhole Net Stroke'].val }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ tagValues['Downhole Net Stroke'].val }}%;">
					    Downhole Net Stroke: {{ tagValues['Downhole Net Stroke'].val }} 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>