Added some loading gifs to make things seem smoother.

Working on fixing up campaign_results.html endpoint to have the graphs, results table, etc.

static/js/app/campaign_results.js

@@ -1,90 +1,73 @@
 // labels is a map of campaign statuses to
 // CSS classes
 var labels = {
-    "In progress" : "label-primary",
+    "Email Sent" : "label-primary",
-    "Queued" : "label-info",
+    "Email Opened" : "label-info",
-	"Completed" : "label-success",
+	"Success" : "label-success",
+    "Clicked Link" : "label-success",
 	"Error" : "label-danger"
 }
 
 var campaign = {}
 
-// Save attempts to POST to /campaigns/
-function save(){
-    var campaign = {
-        name: $("#name").val(),
-        template:{
-            name: $("#template").val()
-        },
-        smtp: {
-            from_address: $("input[name=from]").val(),
-            host: $("input[name=host]").val(),
-            username: $("input[name=username]").val(),
-            password: $("input[name=password]").val(),
-        },
-        groups: [{name : "Test group"}]
-    }
-    // Submit the campaign
-    api.campaigns.post(campaign)
-    .success(function(data){
-        successFlash("Campaign successfully launched!")
-        load()
-    })
-    .error(function(data){
-        $("#modal\\.flashes").empty().append("<div style=\"text-align:center\" class=\"alert alert-danger\">\
-            <i class=\"fa fa-exclamation-circle\"></i> " + data.responseJSON.message + "</div>")
-    })
-}
-
 function dismiss(){
     $("#modal\\.flashes").empty()
     $("#modal").modal('hide')
-    $("#groupTable").dataTable().DataTable().clear().draw()
+    $("#resultsTable").dataTable().DataTable().clear().draw()
 }
 
-function edit(campaign){
+// Deletes a campaign after prompting the user
-    // Clear the bloodhound instance
+function deleteCampaign(){
-    bh.clear();
+    if (confirm("Are you sure you want to delete: " + campaign.name + "?")){
-    if (campaign == "new") {
+        api.campaignId.delete(campaign.id)
-        api.groups.get()
+        .success(function(msg){
-        .success(function(groups){
+            console.log(msg)
-            if (groups.length == 0){
+        })
-                modalError("No groups found!")
+        .error(function(e){
-                return false;
+            $("#modal\\.flashes").empty().append("<div style=\"text-align:center\" class=\"alert alert-danger\">\
-            }
+                <i class=\"fa fa-exclamation-circle\"></i> " + data.responseJSON.message + "</div>")
-            else {
-                bh.add(groups)
-            }
         })
     }
 }
 
 $(document).ready(function(){
-    var id = window.location.pathname.split('/').slice(-1)[0]
+    campaign.id = window.location.pathname.split('/').slice(-1)[0]
-    api.campaignId.get(id)
+    api.campaignId.get(campaign.id)
     .success(function(c){
         campaign = c
         if (campaign){
-            $("#emptyMessage").hide()
+            // Setup our graphs
-            $("#campaignTable").show()
+            var timeline_chart = {labels:[],series:[[]]}
-            campaignTable = $("#campaignTable").DataTable();
+            var email_chart = {series:[]}
-            $.each(campaigns, function(i, campaign){
+            var timeline_opts = {
-                label = labels[campaign.status] || "label-default";
+                axisX: {
-                campaignTable.row.add([
+                    showGrid: false
-                    campaign.name,
+                },
-                    moment(campaign.created_date).format('MMMM Do YYYY, h:mm:ss a'),
+                showArea: true,
-                    "<span class=\"label " + label + "\">" + campaign.status + "</span>",
+                plugins: []
-                    "<div class='pull-right'><button class='btn btn-primary' onclick='alert(\"test\")'>\
+            }
-                    <i class='fa fa-bar-chart'></i>\
+            var email_opts = {
-                    </button>\
+                donut : true,
-                    <button class='btn btn-danger' onclick='alert(\"test\")'>\
+                donutWidth: 40,
-                    <i class='fa fa-trash-o'></i>\
+                chartPadding: 0,
-                    </button></div>"
+                showLabel: false
+            }
+            $("#loading").hide()
+            $("#campaignResults").show()
+            resultsTable = $("#resultsTable").DataTable();
+            $.each(campaign.results, function(i, result){
+                label = labels[result.status] || "label-default";
+                resultsTable.row.add([
+                    result.first_name || "",
+                    result.last_name || "",
+                    result.email || "",
+                    result.position || "",
+                    "<span class=\"label " + label + "\">" + result.status + "</span>"
                 ]).draw()
             })
         }
     })
     .error(function(){
-        errorFlash("Error fetching campaign")
+        errorFlash(" Campaign not found!")
     })
 })

static/js/app/campaigns.js

@@ -60,8 +60,8 @@ function edit(campaign){
 $(document).ready(function(){
     api.campaigns.get()
     .success(function(campaigns){
+        $("#loading").hide()
         if (campaigns.length > 0){
-            $("#emptyMessage").hide()
             $("#campaignTable").show()
             campaignTable = $("#campaignTable").DataTable();
             $.each(campaigns, function(i, campaign){
@@ -78,9 +78,12 @@ $(document).ready(function(){
                     </button></div>"
                 ]).draw()
             })
+        } else {
+            $("#emptyMessage").show()
         }
     })
     .error(function(){
+        $("#loading").hide()
         errorFlash("Error fetching campaigns")
     })
     $("#groupForm").submit(function(){

templates/campaign_results.html

@@ -21,8 +21,11 @@
         </div>
     </div>
 </div>
-<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" ng-controller="CampaignResultsCtrl">
+<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
-    <div ng-show="campaign">
+    <div id="loading">
+        <i class="fa fa-spinner fa-spin fa-4x"></i>
+    </div>
+    <div style="display:none;" id="campaignResults">
         <div class="row">
             <h1 class="page-header" id="page-title">Results for campaign.name</h1>
         </div>
@@ -39,7 +42,8 @@
                     </li>
                 </ul>
             </div>
-            <button type="button" class="btn btn-danger" tooltip="Delete Campaign" tooltip-placement="right" ng-click="delete(campaign)" ng-href="/dashboard"><i class="fa fa-times fa-lg"></i>
+            <button type="button" class="btn btn-danger" data-toggle="tooltip" data-placement="right" title="Delete Campaign" onclick="deleteCampaign()">
+                <i class="fa fa-times fa-lg"></i>
             </button>
         </div>
         <br />
@@ -49,10 +53,10 @@
                     <br/>
                     <div class="row">
                         <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
-                            <highchart config="timeline_chart"></highchart>
+                            <div id="timeline_chart"></div>
                         </div>
                         <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
-                            <highchart config="email_chart"></highchart>
+                            <div id="email_chart"></div>
                         </div>
                     </div>
                 </tab>
@@ -62,25 +66,25 @@
         </div>
         <div class="row">
             <h2>Details</h2>
-            <table ng-table="mainTableParams" class="table table-hover table-striped table-bordered">
+            <table id="resultsTable" class="table">
-                <tbody>
+                <thead>
-                    <tr ng-repeat="result in $data" class="editable-row">
+                    <tr>
-                        <td data-title="'Email'" class="col-sm-1">result.email</td>
+                        <th>First Name</th>
-                        <td data-title="'Status'" class="col-sm-2">result.status</td>
+                        <th>Last Name</th>
+                        <th>Email</th>
+                        <th>Position</th>
+                        <th>Status</th>
                     </tr>
+                </thead>
+                <tbody>
                 </tbody>
             </table>
         </div>
     </div>
-    <div class="row">
+    <div id="flashes" class="row"></div>
-        <div class="alert alert-danger">
-            <i class="fa fa-exclamation-circle"></i> Campaign not found!
-        </div>
-    </div>
 </div>
 {{end}}
 {{define "scripts"}}
-<script src="/js/hogan.js"></script>
+<script src="/js/jquery.ui.widget.js"></script>
-<script src="/js/typeahead.min.js"></script>
 <script src="/js/app/campaign_results.js"></script>
 {{end}}

templates/campaigns.html

@@ -32,7 +32,10 @@
         <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal" onclick="edit('new')"><i class="fa fa-plus"></i> New Campaign</button>
     </div>
     &nbsp;
-    <div id="emptyMessage" class="row">
+    <div id="loading">
+        <i class="fa fa-spinner fa-spin fa-4x"></i>
+    </div>
+    <div id="emptyMessage" class="row" style="display:none;">
         <div class="alert alert-info">
             No campaigns created yet. Let's create one!
         </div>

templates/users.html

@@ -128,12 +128,6 @@
                       <th>Position</th>
                       <th></th>
               <tbody>
-                  <!-- <tr ng-repeat="target in $data" class="editable-row">
-                      <td>target.email
-                          <span onclick="removeTarget()" class="remove-row"><i class="fa fa-trash-o"></i>
-                          </span>
-                      </td>
-                  </tr> -->
               </tbody>
           </table>
       </div>