Completes POCONSOLE-67. Users can now compare multiple cards.

app/static/js/cards.controller.js

@@ -1,9 +1,10 @@
-poconsole.controller('cardListCtrl', function($scope, $routeParams, Card, Page) {
+poconsole.controller('cardListCtrl', function($scope, $window, $routeParams, Card, Page) {
     Page.setTitle('Card List');
     Page.setPage('cards');
+    var multipleCardList = [];
+    $scope.checkStatus = false;
     var getDateList = Card.getCardDates();
     getDateList.then(function(dates) {
-        console.log(dates);
         $scope.dates = dates;
 
         var date_param;
@@ -39,6 +40,22 @@ poconsole.controller('cardListCtrl', function($scope, $routeParams, Card, Page)
             $scope.date_param = date_p;
         });
     };
+
+    $scope.addCardToMultiple = function(card_id){
+        var mcl_index = multipleCardList.indexOf(parseInt(card_id));
+        var inMultiple = mcl_index != -1;
+        if (!inMultiple){
+            multipleCardList.push(parseInt(card_id));
+        } else {
+            multipleCardList.splice(mcl_index, 1);
+        }
+    };
+
+    $scope.compareMultipleCards = function(){
+        if (multipleCardList.length > 1){
+            $window.location.href = '/#/multiplecards/' + multipleCardList.join(',');
+        }
+    };
 });
 
 poconsole.controller('cardDataCtrl', function($scope, $routeParams, Card, Page, Tag) {
@@ -48,22 +65,6 @@ poconsole.controller('cardDataCtrl', function($scope, $routeParams, Card, Page,
     var getDateList = Card.getCardDates();
     getDateList.then(function(dates) {
         $scope.dates = dates;
-        //TODO: ADD CURRENT DATE DETECTION
-        // $scope.currentDate = $scope.dates[0];
-
-        var date_param;
-        if (!$routeParams.date_param){
-            date_param = dates[dates.length - 1].ind;
-        } else {
-            date_param = $routeParams.date_param;
-        }
-
-        var page;
-        if (!$routeParams.page){
-            page = 1;
-        } else {
-            page = $routeParams.page;
-        }
     });
 
 
@@ -113,3 +114,54 @@ poconsole.controller('cardDataCtrl', function($scope, $routeParams, Card, Page,
         });
     });
 });
+
+
+poconsole.controller('multipleCardDataCtrl', function($scope, $routeParams, Card, Page, Tag) {
+    Page.setTitle('Card Data');
+    Page.setPage('cards');
+
+    var getDateList = Card.getCardDates();
+    getDateList.then(function(dates) {
+        $scope.dates = dates;
+    });
+
+    var makeCard = function(position_array, load_array){
+        /**
+         * [makes makes an array of {load:x, position:y} objects]
+         * @position_array {[array]}
+         * @load_array {{array}}
+         */
+        return position_array.map(function(a, i){
+            return {position:position_array[i], load:load_array[i]};
+        });
+    };
+
+    var getCards = Card.getMultipleCards($routeParams.cardIDs.split(','));
+    getCards.then(function(cData){
+        $scope.card_graph_data = {};
+        $scope.cards = [];
+        for(var i = 0; i < cData.length; i++){
+            var card = {};
+            card.stroke_time = new Date(cData[i].created_on);
+            card.stroke_number = cData[i].stroke_number;
+            card._id = cData[i]._id;
+            card.stroke_type = cData[i].stroke_type;
+            var surf_pos = JSON.parse(cData[i].surf_pos);
+            var surf_lod = JSON.parse(cData[i].surf_lod);
+            var down_pos = JSON.parse(cData[i].down_pos);
+            var down_lod = JSON.parse(cData[i].down_lod);
+            var surface_card = makeCard(surf_pos, surf_lod);
+            var downhole_card = makeCard(down_pos, down_lod);
+            $scope.cards.push(card);
+
+            $scope.card_graph_data['surface_' + cData[i]._id] = surface_card;
+            $scope.card_graph_data['downhole_' + cData[i]._id] = downhole_card;
+
+        }
+        console.log($scope.cards);
+        var graphOptions = Card.getCardGraphOptionsMultiple($scope.card_graph_data);
+        $scope.surfaceOptions = graphOptions.surf;
+        $scope.downholeOptions = graphOptions.down;
+
+    });
+});

app/static/js/cards.factory.js

@@ -27,6 +27,15 @@ poconsole.factory('Card', function($q, $http, $log){
         return deferred.promise;
     };
 
+    service.getMultipleCards = function(card_list){
+        var url = '/api/cards?q={"filters":[{"name":"_id","op":"in","val":"' + card_list.join(',') + '"}]}';
+        var deferred = $q.defer();
+        $http.get(url).success(function(data){
+            deferred.resolve(data.objects);
+        });
+        return deferred.promise;
+    };
+
     service.getLatestCard = function(){
         var deferred = $q.defer();
         $http.get('/api/cards?q={"order_by":[{"field":"created_on","direction":"desc"}], "limit":1}').success(function(data) {
@@ -66,14 +75,14 @@ poconsole.factory('Card', function($q, $http, $log){
             },
             series: [
                 {
-                  axis:"y",
+                    axis:"y",
-                  key: 'load',
+                    key: 'load',
-                  dataset: 'surface',
+                    dataset: 'surface',
-                  color: 'steelblue',
+                    color: 'steelblue',
-                  type: ['line', 'area'],
+                    type: ['line', 'area'],
-                  striped: true,
+                    striped: true,
-                  label: 'Surface Card',
+                    label: 'Surface Card',
-                  id: "surfaceCard"
+                    id: "surfaceCard"
                 }
             ],
             grid: {
@@ -94,10 +103,10 @@ poconsole.factory('Card', function($q, $http, $log){
                     ticks: 7
                 },
                 y: {
-                type: 'linear',
+                    type: 'linear',
-                min: limits.dMinLoad,
+                    min: limits.dMinLoad,
-                max: limits.dMaxLoad,
+                    max: limits.dMaxLoad,
-                ticks: 5
+                    ticks: 5
                 }
             },
             series: [
@@ -119,6 +128,111 @@ poconsole.factory('Card', function($q, $http, $log){
         return({surf: surfaceOptions, down: downholeOptions});
     };
 
+    service.getCardGraphOptionsMultiple = function(graph_data){
+        var colors = ['#d7191c','#fdae61','#abdda4','#2b83ba'];
+        var surfaceData = [];
+        var downholeData = [];
+        var allSurface = [];
+        var allDownhole = [];
+        Object.keys(graph_data).forEach(function(card_part){
+            var card_params = card_part.split("_");
+            if (card_params[0] == "surface"){
+                surfaceData[parseInt(card_params[1])] = graph_data[card_part];
+                Array.prototype.push.apply(allSurface, graph_data[card_part]);
+            } else if (card_params[0] == "downhole") {
+                downholeData[parseInt(card_params[1])] = graph_data[card_part];
+                Array.prototype.push.apply(allDownhole, graph_data[card_part]);
+            }
+        });
+
+        var limits = {
+            sMaxPos: allSurface.map(function(x){return x.position;}).reduce(function(y,z){return Math.max(y,z);})+ 20,
+            sMinPos: allSurface.map(function(x){return x.position;}).reduce(function(y,z){return Math.min(y,z);})- 20,
+            sMaxLoad: allSurface.map(function(x){return x.load;}).reduce(function(y,z){return Math.max(y,z);})+ 2000,
+            sMinLoad: allSurface.map(function(x){return x.load;}).reduce(function(y,z){return Math.min(y,z);})- 2000,
+            dMaxLoad: allDownhole.map(function(x){return x.load;}).reduce(function(y,z){return Math.max(y,z);})+ 2000,
+            dMinLoad: allDownhole.map(function(x){return x.load;}).reduce(function(y,z){return Math.min(y,z);})- 2000,
+        };
+
+        var surfaceOptions = {
+            axes: {
+                x: {
+                    key: 'position',
+                    labelFunction: function(value) {
+                        return value;
+                    },
+                    type: 'linear',
+                    min: limits.sMinPos,
+                    max: limits.sMaxPos,
+                    ticks: 7
+                },
+                y: {
+                    type: 'linear',
+                    min: limits.sMinLoad,
+                    max: limits.sMaxLoad,
+                    ticks: 5
+                }
+            },
+            series: [],
+            grid: {
+                x: true,
+                y: true
+            }
+        };
+
+        Object.keys(surfaceData).forEach(function(s_card){
+            var s_ser = {
+                axis:"y",
+                key: 'load',
+                dataset: 'surface_' + s_card.toString(),
+                color: colors[ parseInt(s_card) % colors.length],
+                type: ['line'],
+                label: "Stroke "  + s_card.toString(),
+                id: "surfaceCard" + s_card.toString()
+            };
+            surfaceOptions.series.push(s_ser);
+        });
+
+        var downholeOptions = {
+            axes: {
+                x: {
+                    key: 'position',
+                    labelFunction: function(value) {
+                        return value;
+                    },
+                    type: 'linear',
+                    min: limits.sMinPos,
+                    max: limits.sMaxPos,
+                    ticks: 7
+                },
+                y: {
+                    type: 'linear',
+                    min: limits.dMinLoad,
+                    max: limits.dMaxLoad,
+                    ticks: 5
+                }
+            },
+            series: [],
+            grid: {
+                x: true,
+                y: true
+            }
+        };
+
+        Object.keys(downholeData).forEach(function(d_card){
+            var d_ser = {
+                axis:"y",
+                key: 'load',
+                dataset: 'downhole_' + d_card.toString(),
+                color: colors[ parseInt(d_card) % colors.length],
+                type: ['line'],
+                label: "Stroke " + d_card.toString(),
+                id: "downholeCard" + d_card.toString()
+            };
+            downholeOptions.series.push(d_ser);
+        });
+        return {surf: surfaceOptions, down: downholeOptions};
+    };
 
     return service;
 });

app/static/js/router.js

@@ -43,6 +43,9 @@ tagserver.config([
         }).when('/latest_stroke', {
             templateUrl: '/templates/latestcard.html',
             controller: 'latestStrokeCtrl'
+        }).when('/multiplecards/:cardIDs', {
+            templateUrl: '/templates/multiplecards.html',
+            controller: 'multipleCardDataCtrl'
         }).when('/', {
             templateUrl: '/templates/dashboard.html',
             controller: 'dashboardCtrl'

app/static/templates/cardlist.html

@@ -14,7 +14,7 @@
 			</div>
 
 			<div class="row">
-				<button class="btn btn-primary" ng-click="selectcards()">Compare Multiple Cards</button>
+				<button class="btn btn-primary" ng-click="compareMultipleCards()">Compare Multiple Cards</button>
 			</div>
 			<div ng-if="loading" class="well">
 				<h1>Loading Cards...</h1>
@@ -33,8 +33,8 @@
 
 					<tbody>
 						<tr dir-paginate="card in cards | itemsPerPage:per_page" total-items="total" current-page="page_num">
-							<td style="vertical-align: middle;text-align:center;"><input type="checkbox" ng-model="card.selected"></a></td>
+							<td style="vertical-align: middle;text-align:center;"><input type="checkbox" ng-change="addCardToMultiple(card._id)" ng-model="checkStatus"></td>
-							<td style="vertical-align: middle;text-align:center;"><a href="/#/cards/{{card._id}}">{{card.created_on | date: "medium"}}</a></td>
+							<td style="vertical-align: middle;text-align:center;"><a href="/#/cards/{{card._id}}">{{card.created_on | date: "medium"}}</td>
 							<!-- <td style="vertical-align: middle;text-align:center;">{{card.Fillage_Percent | number: 2}} %</td> -->
 							<td style="vertical-align: middle;text-align:center;"><h5><span class="label" ng-class="{'label-success':card.stroke_type=='Normal', 'label-primary': card.stroke_type=='Shutdown', 'label-danger': card.stroke_type=='Alarm', 'label-warning':card.stroke_type=='Low Fillage'}">{{card.stroke_type}}</span></h5></td>
 							<td style="vertical-align: middle;text-align:center;"><a href="/api/csv_stroke/{{card._id}}" class="btn btn-primary active">Download CSV</a></td>

app/static/templates/multiplecards.html

@@ -0,0 +1,53 @@
+<div class="container">
+	<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 class="row">
+                    <div class="col-sm-12">
+                        <h1>Surface Card</h1>
+						<div class="surfaceCard tagChart" 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 tagChart" style="height:500px">
+                        	<linechart data="card_graph_data" options="downholeOptions"></linechart>
+						</div>
+                    </div>
+
+					<div class="col-sm-12">
+						<div class="table-responsive">
+							<table class="table">
+								<thead>
+									<tr>
+										<th>Date & Time</th>
+										<th>Stroke Type</th>
+										<th></th>
+									</tr>
+								</thead>
+
+								<tbody>
+									<tr ng-repeat="card in cards">
+										<td>{{card.stroke_time | date: 'medium'}}</td>
+										<td>{{card.stroke_type}}</td>
+										<td><a href="/#/cards/{{card._id}}" class="btn btn-primary">View Card</a></td>
+									</tr>
+								</tbody>
+							</table>
+						</div>
+                </div>
+            </div>
+        </div>
+	</div>
+</div>