Added some loading gifs to make things seem smoother.

Working on fixing up campaign_results.html endpoint to have the graphs, results table, etc.
pull/24/head
unknown 2015-07-29 22:31:39 -05:00
parent 67b28094db
commit 9df97d9d05
5 changed files with 74 additions and 87 deletions

View File

@ -1,90 +1,73 @@
// labels is a map of campaign statuses to
// CSS classes
var labels = {
"In progress" : "label-primary",
"Queued" : "label-info",
"Completed" : "label-success",
"Email Sent" : "label-primary",
"Email Opened" : "label-info",
"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){
// Clear the bloodhound instance
bh.clear();
if (campaign == "new") {
api.groups.get()
.success(function(groups){
if (groups.length == 0){
modalError("No groups found!")
return false;
}
else {
bh.add(groups)
}
// Deletes a campaign after prompting the user
function deleteCampaign(){
if (confirm("Are you sure you want to delete: " + campaign.name + "?")){
api.campaignId.delete(campaign.id)
.success(function(msg){
console.log(msg)
})
.error(function(e){
$("#modal\\.flashes").empty().append("<div style=\"text-align:center\" class=\"alert alert-danger\">\
<i class=\"fa fa-exclamation-circle\"></i> " + data.responseJSON.message + "</div>")
})
}
}
$(document).ready(function(){
var id = window.location.pathname.split('/').slice(-1)[0]
api.campaignId.get(id)
campaign.id = window.location.pathname.split('/').slice(-1)[0]
api.campaignId.get(campaign.id)
.success(function(c){
campaign = c
if (campaign){
$("#emptyMessage").hide()
$("#campaignTable").show()
campaignTable = $("#campaignTable").DataTable();
$.each(campaigns, function(i, campaign){
label = labels[campaign.status] || "label-default";
campaignTable.row.add([
campaign.name,
moment(campaign.created_date).format('MMMM Do YYYY, h:mm:ss a'),
"<span class=\"label " + label + "\">" + campaign.status + "</span>",
"<div class='pull-right'><button class='btn btn-primary' 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>"
// Setup our graphs
var timeline_chart = {labels:[],series:[[]]}
var email_chart = {series:[]}
var timeline_opts = {
axisX: {
showGrid: false
},
showArea: true,
plugins: []
}
var email_opts = {
donut : true,
donutWidth: 40,
chartPadding: 0,
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!")
})
})

View File

@ -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(){

View File

@ -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 ng-show="campaign">
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<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">
<tbody>
<tr ng-repeat="result in $data" class="editable-row">
<td data-title="'Email'" class="col-sm-1">result.email</td>
<td data-title="'Status'" class="col-sm-2">result.status</td>
<table id="resultsTable" class="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Position</th>
<th>Status</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="alert alert-danger">
<i class="fa fa-exclamation-circle"></i> Campaign not found!
</div>
</div>
<div id="flashes" class="row"></div>
</div>
{{end}}
{{define "scripts"}}
<script src="/js/hogan.js"></script>
<script src="/js/typeahead.min.js"></script>
<script src="/js/jquery.ui.widget.js"></script>
<script src="/js/app/campaign_results.js"></script>
{{end}}

View File

@ -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>

View File

@ -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>