From 99da20abc011737695db506c3403b5f77b4ced6f Mon Sep 17 00:00:00 2001
From: Jordan Wright <jmwright798@gmail.com>
Date: Tue, 2 Feb 2016 22:49:30 -0600
Subject: [PATCH] Added table for displaying submitted data.

---
 static/css/main.css               |  3 ++
 static/js/app/campaign_results.js | 66 ++++++++++++++++++++-----------
 2 files changed, 45 insertions(+), 24 deletions(-)

diff --git a/static/css/main.css b/static/css/main.css
index 89abd3af..64c02f39 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -445,3 +445,6 @@ table.dataTable thead .sorting_desc:after {
 	margin-top: 10px;
 	margin-bottom: 10px;
 }
+.timeline-event-table{
+	display:none;
+}
diff --git a/static/js/app/campaign_results.js b/static/js/app/campaign_results.js
index a5249855..5330fb93 100644
--- a/static/js/app/campaign_results.js
+++ b/static/js/app/campaign_results.js
@@ -38,7 +38,7 @@ var statuses = {
         label: "label-default",
         icon: "fa-times"
     },
-    "Submitted Data":{
+    "Submitted Data": {
         slice: "ct-slice-donut-clicked",
         legend: "ct-legend-clicked",
         label: "label-danger",
@@ -83,14 +83,16 @@ function exportAsCSV(scope) {
     exportHTML = $("#exportButton").html()
     var csvScope = null
     switch (scope) {
-    	case "results":
-		csvScope = campaign.results
-		break;
-	case "events":
-		csvScope = campaign.timeline
-		break;
+        case "results":
+            csvScope = campaign.results
+            break;
+        case "events":
+            csvScope = campaign.timeline
+            break;
+    }
+    if (!csvScope) {
+        return
     }
-    if (!csvScope){return}
     $("#exportButton").html('<i class="fa fa-spinner fa-spin"></i>')
     var csvString = Papa.unparse(csvScope, {})
     var csvData = new Blob([csvString], {
@@ -129,22 +131,24 @@ function renderTimeline(data) {
                 '    <i class="fa ' + statuses[event.message].icon + '"></i></div>' +
                 '    <div class="timeline-message">' + event.message +
                 '    <span class="timeline-date">' + moment(event.time).format('MMMM Do YYYY h:mm') + '</span>'
-	    if (event.details) {
-	    	results += '<div class="timeline-event-details"><i class="fa fa-caret-right"></i> View Details</div>'
-	    	results += '<div class="timeline-event-table">'
-	    	results += '    <table class="table table-condensed table-bordered table-striped">'
-	    	results += '        <thead><tr><th>Parameter</th><th>Value(s)</tr></thead><tbody>'
-	        details = JSON.parse(event.details)
-	        $.each(Object.keys(details.payload), function(i, param){
-			if (param == "rid") { return true; }
-			results += '    <tr>'
-			results += '        <td>' + param + '</td>'
-			results += '        <td>' + details.payload[param] + '</td>'
-			results += '    </tr>'
-		})
-    		results += '       </tbody></table>'
-		results += '</div>'
-	    }
+            if (event.details) {
+                results += '<div class="timeline-event-details"><i class="fa fa-caret-right"></i> View Details</div>'
+                results += '<div class="timeline-event-table">'
+                results += '    <table class="table table-condensed table-bordered table-striped">'
+                results += '        <thead><tr><th>Parameter</th><th>Value(s)</tr></thead><tbody>'
+                details = JSON.parse(event.details)
+                $.each(Object.keys(details.payload), function(i, param) {
+                    if (param == "rid") {
+                        return true;
+                    }
+                    results += '    <tr>'
+                    results += '        <td>' + param + '</td>'
+                    results += '        <td>' + details.payload[param] + '</td>'
+                    results += '    </tr>'
+                })
+                results += '       </tbody></table>'
+                results += '</div>'
+            }
             results += '</div></div>'
         }
     })
@@ -161,6 +165,20 @@ $(document).ready(function() {
                 $("#page-title").text("Results for " + c.name)
                     // Setup tooltips
                 $('[data-toggle="tooltip"]').tooltip()
+                    // Setup viewing the details of a result
+                $("#resultsTable").on("click", ".timeline-event-details", function() {
+                        // Show the parameters
+                        payloadTable = $(this).parent().find(".timeline-event-table")
+                        if (payloadTable.is(":visible")) {
+                            $(this).find("i").removeClass("fa-caret-down")
+                            $(this).find("i").addClass("fa-caret-right")
+                            payloadTable.hide()
+                        } else {
+                            $(this).find("i").removeClass("fa-caret-right")
+                            $(this).find("i").addClass("fa-caret-down")
+                            payloadTable.show()
+                        }
+                    })
                     // Setup our graphs
                 var timeline_data = {
                     series: [{