Adding initial structure of timeline

static/css/main.css

@@ -374,3 +374,58 @@ table.dataTable thead .sorting_desc:after {
   content: "\f0dd" !important;
   opacity: .8 !important;
 }
+.timeline{
+	text-align:left;
+	background-color:#ffffff;
+}
+.timeline-graph{
+	margin-left:30px;
+}
+.timeline>h6{
+	margin-top:0px;
+	margin-bottom:5px;
+}
+.timeline>.subtitle{
+	color: #999999;
+	font-style: italic;
+	margin-bottom:15px;
+	display:block;
+}
+.timeline-entry{
+	position:relative;
+	padding-bottom:36px;
+}
+.timeline-bar {
+	display:block;
+	content:"";
+	position:absolute;
+	top:5px;
+	bottom:0;
+	width:1px;
+	left:-6px;
+	background:#aaaaaa;
+}
+.timeline-entry:last-child .timeline-bar{
+	display:none;
+}
+.timeline-entry:last-child {
+	padding-bottom:0px;
+}
+.timeline-icon{
+	position:relative;
+	float:left;
+	margin-left:-24px;
+	width:36px;
+	top:-5px;
+	height:36px;
+	text-align:center;
+	border-radius:50%;
+	background-color:#f05b4f;
+}
+.timeline-icon>i{
+	margin-top:8px;
+	color:#ffffff;
+}
+.timeline-message {
+	padding-left:30px;
+}

static/js/app/campaign_results.js

@@ -76,6 +76,37 @@ function exportAsCSV() {
     $("#exportButton").html(exportHTML)
 }
 
+/*function eventToHtml(e, r) {
+    if !(event.email) {
+
+    }
+}*/
+
+function renderTimeline(data) {
+    record = {
+            "first_name": data[1],
+            "last_name": data[2],
+            "email": data[3],
+            "position": data[4]
+        }
+        //the Email is index 3
+    results = '<div class="timeline well well-lg">' +
+        '<h6>Timeline for ' + record.first_name + ' ' + record.last_name +
+        '</h6><span class="subtitle">Email: ' + record.email + '</span>' +
+        '<div class="timeline-graph">'
+    $.each(campaign.timeline, function(i, event) {
+        if (!event.email || event.email == record.email) {
+            results += '<div class="timeline-entry">' +
+                '    <div class="timeline-bar"></div>' +
+                '    <div class="timeline-icon"><i class="fa fa-envelope"></i></div>' +
+                '    <div class="timeline-message">' + event.message + '</div>'
+	    results += '</div>'
+                //results += eventToHtml(event, record)
+        }
+    })
+    results += '</div></div>'
+    return results
+}
 $(document).ready(function() {
     campaign.id = window.location.pathname.split('/').slice(-1)[0]
     api.campaignId.get(campaign.id)
@@ -123,10 +154,24 @@ $(document).ready(function() {
                         showLabel: false
                     }
                     // Setup the results table
-                resultsTable = $("#resultsTable").DataTable();
+                resultsTable = $("#resultsTable").DataTable({
+                    destroy: true,
+                    destroy: true,
+                    "order": [
+                        [1, "asc"]
+                    ],
+                    columnDefs: [{
+                        orderable: false,
+                        targets: "no-sort"
+                    }, {
+                        className: "details-control",
+                        "targets": [0]
+                    }]
+                });
                 $.each(campaign.results, function(i, result) {
                         label = statuses[result.status].label || "label-default";
                         resultsTable.row.add([
+                            "<i class=\"fa fa-caret-right\"></i>",
                             result.first_name || "",
                             result.last_name || "",
                             result.email || "",
@@ -139,6 +184,21 @@ $(document).ready(function() {
                             email_series_data[result.status]++;
                         }
                     })
+                    // Setup the individual timelines
+                $('#resultsTable tbody').on('click', 'td.details-control', function() {
+                    var tr = $(this).closest('tr');
+                    var row = resultsTable.row(tr);
+
+                    if (row.child.isShown()) {
+                        // This row is already open - close it
+                        row.child.hide();
+                        tr.removeClass('shown');
+                    } else {
+                        // Open this row
+                        row.child(renderTimeline(row.data())).show();
+                        tr.addClass('shown');
+                    }
+                });
                 // Setup the graphs
                 $.each(campaign.timeline, function(i, event) {
                     timeline_data.series[0].data.push({

templates/campaign_results.html

@@ -85,6 +85,7 @@
             <table id="resultsTable" class="table">
                 <thead>
                     <tr>
+                       <th class="no-sort"></th>
                         <th>First Name</th>
                         <th>Last Name</th>
                         <th>Email</th>