Updated font-awesome to 4.3.0

Added buttons for editing/viewing/deleting objects in the tables (actual functionality to follow)

static/js/app/campaigns.js

@@ -11,7 +11,7 @@ function save(){
             username: $("input[name=username]").val(),
             password: $("input[name=password]").val(),
         },
-        groups: [{name : "Morning catch employees"}]
+        groups: [{name : "Test group"}]
     }
     // Submit the campaign
     api.campaigns.post(campaign)
@@ -28,9 +28,12 @@ function save(){
 function dismiss(){
     $("#modal\\.flashes").empty()
     $("#modal").modal('hide')
+    $("#groupTable").dataTable().DataTable().clear().draw()
 }
 
 function edit(campaign){
+    // Clear the bloodhound instance
+    bh.clear();
     if (campaign == "new") {
         api.groups.get()
         .success(function(groups){
@@ -39,42 +42,13 @@ function edit(campaign){
                 return false;
             }
             else {
-                // Create the group typeahead objects
+                bh.add(groups)
-                var groupTable = $("#groupTable").DataTable()
-                var suggestion_template = Hogan.compile('<div>{{name}}</div>')
-                var bh = new Bloodhound({
-                    datumTokenizer: function(g) { return Bloodhound.tokenizers.whitespace(g.name) },
-                    queryTokenizer: Bloodhound.tokenizers.whitespace,
-                    local: groups
-                })
-                bh.initialize()
-                $("#groups.typeahead.form-control").typeahead({
-                    hint: true,
-                    highlight: true,
-                    minLength: 1
-                },
-                {
-                    name: "groups",
-                    source: bh,
-                    templates: {
-                        empty: function(data) {return '<div class="tt-suggestion">No groups matched that query</div>' },
-                        suggestion: function(data){ return '<div>' + data.name + '</div>' }
-                    }
-                })
-                .bind('typeahead:select', function(ev, group){
-                    groupTable.row.add([
-                        group.name,
-                        '<span style="cursor:pointer;"><i class="fa fa-trash-o"></i></span>'
-                    ]).draw()
-                });
-                //<span ng-click="removeGroup(group)" class="remove-row"><i class="fa fa-trash-o"></i>
-                //</span>
             }
         })
     }
 }
 
-function load(){
+$(document).ready(function(){
     api.campaigns.get()
     .success(function(campaigns){
         if (campaigns.length > 0){
@@ -83,9 +57,15 @@ function load(){
             campaignTable = $("#campaignTable").DataTable();
             $.each(campaigns, function(i, campaign){
                 campaignTable.row.add([
-                    campaign.created_date,
+                    moment(campaign.created_date).format('MMMM Do YYYY, h:mm:ss a'),
                     campaign.name,
-                    campaign.status
+                    campaign.status,
+                    "<div class='pull-right'><button class='btn btn-success' onclick='alert(\"test\")'>\
+                    <i class='fa fa-bar-chart'></i>\
+                    </button>\
+                    <button class='btn btn-danger' onclick='alert(\"test\")'>\
+                    <i class='fa fa-trash-o'></i>\
+                    </button></div>"
                 ]).draw()
             })
         }
@@ -93,8 +73,41 @@ function load(){
     .error(function(){
         errorFlash("Error fetching campaigns")
     })
-}
+    $("#groupForm").submit(function(){
-
+        groupTable.row.add([
-$(document).ready(function(){
+            $("#groupSelect").val(),
-    load()
+            '<span style="cursor:pointer;"><i class="fa fa-trash-o"></i></span>'
+        ]).draw()
+        $("#groupTable").on("click", "span>i.fa-trash-o", function(){
+            groupTable.row( $(this).parents('tr') )
+            .remove()
+            .draw();
+        })
+        return false;
+    })
+    // Create the group typeahead objects
+    groupTable = $("#groupTable").DataTable()
+    suggestion_template = Hogan.compile('<div>{{name}}</div>')
+    bh = new Bloodhound({
+        datumTokenizer: function(g) { return Bloodhound.tokenizers.whitespace(g.name) },
+        queryTokenizer: Bloodhound.tokenizers.whitespace,
+        local: []
+    })
+    bh.initialize()
+    $("#groupSelect.typeahead.form-control").typeahead({
+        hint: true,
+        highlight: true,
+        minLength: 1
+    },
+    {
+        name: "groups",
+        source: bh,
+        templates: {
+            empty: function(data) {return '<div class="tt-suggestion">No groups matched that query</div>' },
+            suggestion: function(data){ return '<div>' + data.name + '</div>' }
+        }
+    })
+    .bind('typeahead:select', function(ev, group){
+        $("#groupSelect").typeahead('val', group.name)
+    });
 })

static/js/app/dashboard.js

@@ -1,5 +1,8 @@
 var overview_chart_options = {
-    animationEasing:"linear"
+    animationEasing:"linear",
+    customTooltips: function(tooltip) {
+        console.log(tooltip)
+    }
 }
 
 function load(){
@@ -8,20 +11,22 @@ function load(){
         if (campaigns.length > 0){
             var overview_ctx = $("#overview_chart").get(0).getContext("2d");
             // Create the overview chart data
-            var overview_data = {labels:[],data:[]}
+            var overview_data = {labels:[],datasets:[{data:[]}]}
             var average = 0
             $("#emptyMessage").hide()
             $("#campaignTable").show()
             campaignTable = $("#campaignTable").DataTable();
             $.each(campaigns, function(i, campaign){
+                var campaign_date = moment(campaign.created_date).format('MMMM Do YYYY, h:mm:ss a')
                 // Add it to the table
                 campaignTable.row.add([
-                    campaign.created_date,
                     campaign.name,
+                    campaign_date,
                     campaign.status
                 ]).draw()
                 // Add it to the chart data
-                overview_data.labels.push(camaign.created_date)
+                overview_data.labels.push(campaign_date)
+                campaign.y = 0
                 $.each(campaign.results, function(j, result){
                     if (result.status == "Success"){
                         campaign.y++;
@@ -29,10 +34,10 @@ function load(){
                 })
                 campaign.y = Math.floor((campaign.y / campaign.results.length) * 100)
                 average += campaign.y
-                overview_data.data.push(campaign.y)
+                overview_data.datasets[0].data.push({y:campaign.y, test: "test"})
             })
             average = Math.floor(average / campaigns.length);
-            var overview_chart = new Chart(overview_ctx).Line(campaigns, overview_chart_options);
+            var overview_chart = new Chart(overview_ctx).Line(overview_data, overview_chart_options);
         }
     })
     .error(function(){

static/js/app/templates.js

@@ -92,7 +92,13 @@ function load(){
             $.each(templates, function(i, template){
                 templateTable.row.add([
                     template.name,
-                    moment(template.modified_date).format('MMMM Do YYYY, h:mm:ss a')
+                    moment(template.modified_date).format('MMMM Do YYYY, h:mm:ss a'),
+                    "<div class='pull-right'><button class='btn btn-success' onclick='alert(\"test\")'>\
+                    <i class='fa fa-pencil'></i>\
+                    </button>\
+                    <button class='btn btn-danger' onclick='alert(\"test\")'>\
+                    <i class='fa fa-trash-o'></i>\
+                    </button></div>"
                 ]).draw()
             })
         }

static/js/app/users.js

@@ -107,7 +107,13 @@ function load(){
                 groupTable.row.add([
                     group.name,
                     targets,
-                    moment(group.modified_date).format('MMMM Do YYYY, h:mm:ss a')
+                    moment(group.modified_date).format('MMMM Do YYYY, h:mm:ss a'),
+                    "<div class='pull-right'><button class='btn btn-success' onclick='alert(\"test\")'>\
+                    <i class='fa fa-pencil'></i>\
+                    </button>\
+                    <button class='btn btn-danger' onclick='alert(\"test\")'>\
+                    <i class='fa fa-trash-o'></i>\
+                    </button></div>"
                 ]).draw()
             })
         }

templates/campaigns.html

@@ -44,6 +44,7 @@
                     <th>Created Date</th>
                     <th>Name</th>
                     <th>Status</th>
+                    <th class="col-md-2"></th>
                 </tr>
             </thead>
             <tbody>
@@ -118,9 +119,9 @@
                  </div>
               </div>
               <label class="control-label" for="users">Groups:</label>
-              <form>
+              <form id="groupForm">
                   <div class="input-group">
-                      <input type="text" class="typeahead form-control" placeholder="Group Name" id="groups" />
+                      <input type="text" class="typeahead form-control" placeholder="Group Name" id="groupSelect" />
                       <span class="input-group-btn">
                           <button class="btn btn-primary typeahead-button"><i class="fa fa-plus"></i> Add</button>
                       </span>

templates/dashboard.html

@@ -25,11 +25,9 @@
     <h1 class="page-header">
         Dashboard
     </h1>
-    <div ng-show="!campaigns.length">
+    <div id="emptyMessage" class="row">
-        <div class="row">
+        <div class="alert alert-info">
-            <div class="alert alert-info">
+            No campaigns created yet. Let's create one!
-                No campaigns yet.
-            </div>
         </div>
     </div>
     <div>
@@ -41,11 +39,11 @@
             <h2>Recent Campaigns</h2>
         </div>
         <div class="row">
-            <a href="#/campaigns"><button type="button" class="btn btn-primary">View All</button></a>
+            <a href="/campaigns"><button type="button" class="btn btn-primary">View All</button></a>
         </div>
         &nbsp;&nbsp;
         <div class="row">
-            <table ng-table="mainTableParams" class="table table-hover table-striped table-bordered">
+            <!-- <table ng-table="mainTableParams" class="table table-hover table-striped table-bordered">
                 <tbody>
                     <tr ng-repeat="campaign in $data" class="editable-row">
                         <td data-title="'Created Date'" class="col-sm-1">campaign.created_date | date:'medium'</td>
@@ -69,6 +67,17 @@
                         <td data-title="'Status'" class="col-sm-1">campaign.status</td>
                     </tr>
                 </tbody>
+            </table> -->
+            <table id="campaignTable" class="table" style="display:none;">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Created Date</th>
+                        <th>Status</th>
+                    </tr>
+                </thead>
+                <tbody>
+                </tbody>
             </table>
         </div>
     </div>

templates/templates.html

@@ -43,6 +43,7 @@
                 <tr>
                     <th>Name</th>
                     <th>Modified Date</th>
+                    <th class="col-md-2"></th>
                 </tr>
             </thead>
             <tbody>

templates/users.html

@@ -44,6 +44,7 @@
                     <th>Name</th>
                     <th>Members</th>
                     <th>Modified Date</th>
+                    <th class="col-md-2"></th>
                 </tr>
             </thead>
             <tbody>