From fee943cf36c0d721e9c2ab47aed70d6cf29a96b4 Mon Sep 17 00:00:00 2001
From: Jordan <jmwright798@gmail.com>
Date: Mon, 7 Jul 2014 23:02:40 -0500
Subject: [PATCH] Working on campaign results page (added tabs) Added timeline
 graph to campaign results

---
 static/css/main.css                          |  4 +-
 static/js/app/controllers.js                 | 79 ++++++++++++++++++--
 static/js/app/partials/campaign_results.html | 20 ++++-
 templates/base.html                          |  7 ++
 4 files changed, 100 insertions(+), 10 deletions(-)

diff --git a/static/css/main.css b/static/css/main.css
index 37b7a85b..4ef2abcd 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -1,4 +1,6 @@
-  
+.nav-tabs {
+  cursor:pointer;
+}  
   .navbar-logo {
       margin: 4px 0px;
       float: left;
diff --git a/static/js/app/controllers.js b/static/js/app/controllers.js
index a0d66c19..01631099 100644
--- a/static/js/app/controllers.js
+++ b/static/js/app/controllers.js
@@ -104,16 +104,14 @@ 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
+                            y: 100 - avg
                         }]
                     }],
                     title: {
@@ -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()));
             })
diff --git a/static/js/app/partials/campaign_results.html b/static/js/app/partials/campaign_results.html
index 78652449..316ecf24 100644
--- a/static/js/app/partials/campaign_results.html
+++ b/static/js/app/partials/campaign_results.html
@@ -38,10 +38,24 @@
         <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">
-        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
-            <highchart config="email_chart"></highchart>
-        </div>
+        <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>
diff --git a/templates/base.html b/templates/base.html
index 8453bd38..2a1a993e 100644
--- a/templates/base.html
+++ b/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>