Working on campaign results page (added tabs)

Added timeline graph to campaign results

static/css/main.css

@@ -1,4 +1,6 @@
-  
+.nav-tabs {
+  cursor:pointer;
+}  
   .navbar-logo {
       margin: 4px 0px;
       float: left;

static/js/app/controllers.js

@@ -104,13 +104,11 @@ app.controller('DashboardCtrl', function($scope, $filter, $location, CampaignSer
                         },
                     },
                     series: [{
-                        data: [
+                        data: [{
-                        {
                             name: "Successful Phishes",
                             color: "#e74c3c",
                             y: avg
-                        },
+                        }, {
-                        {
                             name: "Unsuccessful Phishes",
                             color: "#7cb5ec",
                             y: 100 - avg
@@ -265,7 +263,7 @@ var CampaignModalCtrl = function($scope, $modalInstance) {
     }
 };
 
-app.controller('CampaignResultsCtrl', function($scope, CampaignService, GroupService, ngTableParams, $http, $window) {
+app.controller('CampaignResultsCtrl', function($scope, $filter, CampaignService, GroupService, ngTableParams, $http, $window) {
     id = $window.location.hash.split('/')[2];
     $scope.flashes = []
     $scope.mainTableParams = new ngTableParams({
@@ -298,6 +296,10 @@ app.controller('CampaignResultsCtrl', function($scope, CampaignService, GroupSer
                         })
                     }
                 });
+                angular.forEach(campaign.timeline, function(e, key) {
+                    e.x = new Date(e.time);
+                    e.y = 0;
+                });
                 $scope.email_chart = {
                     options: {
                         chart: {
@@ -337,6 +339,71 @@ app.controller('CampaignResultsCtrl', function($scope, CampaignService, GroupSer
                     },
                     loading: false,
                 }
+                $scope.timeline_chart = {
+                    options: {
+                        global: {
+                            useUTC: false
+                        },
+                        chart: {
+                            type: 'scatter',
+                            zoomType: "x"
+                        },
+                        tooltip: {
+                            formatter: function() {
+                                var label = "Event: " + this.point.message + "<br/>";
+                                if (this.point.email) {
+                                    label += "Email: " + this.point.email + "<br/>";
+                                }
+                                label += "Date: " + $filter("date")(this.point.x, "medium");
+                                return label
+                            },
+                            style: {
+                                padding: 10,
+                                fontWeight: 'bold'
+                            }
+                        },
+                        plotOptions: {
+                            series: {
+                                cursor: 'pointer',
+                            }
+                        },
+                        yAxis: {
+                            labels: {
+                                enabled: false
+                            },
+                            title: {
+                                text: "Events"
+                            }
+                        },
+                        xAxis: {
+                            type: 'datetime',
+                            dateTimeLabelFormats: { // don't display the dummy year
+                                day: "%e of %b",
+                                hour: "%l:%M",
+                                second: '%l:%M:%S',
+                                minute: '%l:%M'
+                            },
+                            max: Date.now(),
+                            title: {
+                                text: 'Date'
+                            }
+                        },
+                    },
+                    series: [{
+                        name: "Events",
+                        data: $scope.campaign.timeline
+                    }],
+                    title: {
+                        text: 'Campaign Timeline'
+                    },
+                    size: {
+                        height: 300
+                    },
+                    credits: {
+                        enabled: false
+                    },
+                    loading: false,
+                }
                 params.total(campaign.results.length)
                 $defer.resolve(campaign.results.slice((params.page() - 1) * params.count(), params.page() * params.count()));
             })

static/js/app/partials/campaign_results.html

@@ -38,11 +38,25 @@
         <button type="button" class="btn btn-danger" tooltip="Delete Campaign" tooltip-placement="right"><i class="fa fa-times fa-lg"></i>
         </button>
     </div>
+    <br />
     <div class="row">
+        <tabset>
+            <tab heading="Overview">
+                <br/>
+                <div class="row">
+                    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+                        <highchart config="timeline_chart"></highchart>
+                    </div>
                     <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                         <highchart config="email_chart"></highchart>
                     </div>
                 </div>
+            </tab>
+            <tab heading="Timeline">Timeline here</tab>
+            <tab heading="Plugins">Plugins here</tab>
+            <tab heading="Demographics">Demographics here</tab>
+        </tabset>
+    </div>
     <div class="row">
         <h2>Details</h2>
         <table ng-table="mainTableParams" class="table table-hover table-striped table-bordered">

templates/base.html

@@ -103,6 +103,13 @@
     <script src="/js/app/app.js"></script>
     <script src="/js/app/controllers.js"></script>
     <script src="/js/app/factories.js"></script>
+    <script>
+    Highcharts.setOptions({
+        global: {
+            timezoneOffset: 5 * 60
+        }
+    });
+    </script>
 </body>
 
 </html>