Cleaned up sidebar nav links

Moved JS api structure to api.*.get(), etc.
Working on /groups now
pull/24/head
unknown 2015-06-16 23:09:27 -05:00
parent 22a4d3f923
commit cf8c8c4534
9 changed files with 293 additions and 156 deletions

View File

@ -1,3 +1,4 @@
// Save attempts to POST to /campaigns/
function save(){
var campaign = {
name: $("#name").val(),
@ -13,32 +14,44 @@ function save(){
groups: [{name : "Morning catch employees"}]
}
// Submit the campaign
campaigns.post(campaign)
api.campaigns.post(campaign)
.success(function(data){
successFlash("submitted!")
console.log(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 groupAdd(name){
groups.append({
name: name
})
}
function load(){
api.campaigns.get()
.success(function(campaigns){
if (campaigns.length > 0){
$("#emptyMessage").hide()
$("#campaignTable").show()
campaignTable = $("#campaignTable").DataTable();
$.each(campaigns, function(i, campaign){
campaignTable.row.add([
campaign.created_date,
campaign.name,
campaign.status
]).draw()
})
}
})
.error(function(){
errorFlash("Error fetching campaigns")
})
}
$(document).ready(function(){
var campaignData = {}
campaigns.get()
.success(function(data){
successFlash("worked!")
campaignData = data
})
.error(function(data){
errorFlash("No work")
})
campaignTable = $("#campaignTable").DataTable();
$.each(campaignData, function(i, campaign){
campaignTable.row.add([
campaign.created_date,
campaign.name,
campaign.status
]).draw()
})
load()
})

49
static/js/app/users.js Normal file
View File

@ -0,0 +1,49 @@
// Save attempts to POST to /campaigns/
function save(){
var targets = {}
var group = {
name: $("#name").val(),
targets: targets
}
// Submit the campaign
api.groups.post(group)
.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 groupAdd(name){
groups.append({
name: name
})
}
function load(){
api.groups.get()
.success(function(groups){
if (groups.length > 0){
$("#emptyMessage").hide()
$("#groupTable").show()
groupTable = $("#groupTable").DataTable();
$.each(groups, function(i, group){
groupTable.row.add([
group.Name,
group.targets,
group.modified_date
]).draw()
})
}
})
.error(function(){
errorFlash("Error fetching groups")
})
}
$(document).ready(function(){
load()
})

View File

@ -10,7 +10,7 @@ function successFlash(message) {
)
}
function api(endpoint, method, data) {
function query(endpoint, method, data) {
return $.ajax({
url: "/api" + endpoint + "?api_key=" + user.api_key,
async: false,
@ -24,98 +24,96 @@ function api(endpoint, method, data) {
/*
Define our API Endpoints
*/
// campaigns contains the endpoints for /campaigns
var campaigns = {
// get() - Queries the API for GET /campaigns
get: function(){
return api("/campaigns/", "GET", {})
var api = {
// campaigns contains the endpoints for /campaigns
campaigns : {
// get() - Queries the API for GET /campaigns
get: function(){
return query("/campaigns/", "GET", {})
},
// post() - Posts a campaign to POST /campaigns
post: function(data){
return query("/campaigns/", "POST", data)
}
},
// post() - Posts a campaign to POST /campaigns
post: function(data){
return api("/campaigns/", "POST", data)
// campaignId contains the endpoints for /campaigns/:id
campaignId : {
// get() - Queries the API for GET /campaigns/:id
get: function(id){
return query("/campaigns/" + id, "GET", {})
},
// post() - Posts a campaign to POST /campaigns/:id
post: function(campaign){
return query("/campaigns/" + campaign.id, "POST", data)
},
// put() - Puts a campaign to PUT /campaigns/:id
put: function (campaign){
return query("/campaigns/" + campaign.id, "PUT", data)
},
// delete() - Deletes a campaign at DELETE /campaigns/:id
delete: function(id){
return query("/campaigns/" + id, "DELETE", data)
}
},
// groups contains the endpoints for /groups
groups : {
// get() - Queries the API for GET /groups
get: function(){
return query("/groups/", "GET", {})
},
// post() - Posts a campaign to POST /groups
post: function(group){
return query("/groups/", "POST", group)
}
},
// groupId contains the endpoints for /groups/:id
groupId : {
// get() - Queries the API for GET /groups/:id
get: function(id){
return query("/groups/" + id, "GET", {})
},
// post() - Posts a campaign to POST /groups/:id
post: function(group){
return query("/groups/" + group.id, "POST", data)
},
// put() - Puts a campaign to PUT /groups/:id
put: function (group){
return query("/groups/" + group.id, "PUT", data)
},
// delete() - Deletes a campaign at DELETE /groups/:id
delete: function(id){
return query("/groups/" + id, "DELETE", data)
}
},
// templates contains the endpoints for /templates
templates : {
// get() - Queries the API for GET /templates
get: function(){
return query("/templates/", "GET", {})
},
// post() - Posts a campaign to POST /templates
post: function(template){
return query("/templates/", "POST", template)
}
},
// templateId contains the endpoints for /templates/:id
templateId : {
// get() - Queries the API for GET /templates/:id
get: function(id){
return query("/templates/" + id, "GET", {})
},
// post() - Posts a campaign to POST /templates/:id
post: function(template){
return query("/templates/" + template.id, "POST", data)
},
// put() - Puts a campaign to PUT /templates/:id
put: function (template){
return query("/templates/" + template.id, "PUT", data)
},
// delete() - Deletes a campaign at DELETE /templates/:id
delete: function(id){
return query("/templates/" + id, "DELETE", data)
}
}
}
// campaignId contains the endpoints for /campaigns/:id
var campaignId = {
// get() - Queries the API for GET /campaigns/:id
get: function(id){
return api("/campaigns/" + id, "GET", {})
},
// post() - Posts a campaign to POST /campaigns/:id
post: function(campaign){
return api("/campaigns/" + campaign.id, "POST", data)
},
// put() - Puts a campaign to PUT /campaigns/:id
put: function (campaign){
return api("/campaigns/" + campaign.id, "PUT", data)
},
// delete() - Deletes a campaign at DELETE /campaigns/:id
delete: function(id){
return api("/campaigns/" + id, "DELETE", data)
}
}
// groups contains the endpoints for /groups
var groups = {
// get() - Queries the API for GET /groups
get: function(){
return api("/groups/", "GET", {})
},
// post() - Posts a campaign to POST /groups
post: function(group){
return api("/groups/", "POST", group)
}
}
// groupId contains the endpoints for /groups/:id
var groupId = {
// get() - Queries the API for GET /groups/:id
get: function(id){
return api("/groups/" + id, "GET", {})
},
// post() - Posts a campaign to POST /groups/:id
post: function(group){
return api("/groups/" + group.id, "POST", data)
},
// put() - Puts a campaign to PUT /groups/:id
put: function (group){
return api("/groups/" + group.id, "PUT", data)
},
// delete() - Deletes a campaign at DELETE /groups/:id
delete: function(id){
return api("/groups/" + id, "DELETE", data)
}
}
// templates contains the endpoints for /templates
var templates = {
// get() - Queries the API for GET /templates
get: function(){
return api("/templates/", "GET", {})
},
// post() - Posts a campaign to POST /templates
post: function(template){
return api("/templates/", "POST", template)
}
}
// templateId contains the endpoints for /templates/:id
var templateId = {
// get() - Queries the API for GET /templates/:id
get: function(id){
return api("/templates/" + id, "GET", {})
},
// post() - Posts a campaign to POST /templates/:id
post: function(template){
return api("/templates/" + template.id, "POST", data)
},
// put() - Puts a campaign to PUT /templates/:id
put: function (template){
return api("/templates/" + template.id, "PUT", data)
},
// delete() - Deletes a campaign at DELETE /templates/:id
delete: function(id){
return api("/templates/" + id, "DELETE", data)
}
}

View File

@ -7,13 +7,13 @@
</li>
<li class="active"><a href="#/campaigns">Campaigns</a>
</li>
<li><a href="#/users">Users &amp; Groups</a>
<li><a href="/users">Users &amp; Groups</a>
</li>
<li><a href="#/templates">Email Templates</a>
<li><a href="/templates">Email Templates</a>
</li>
<li><a href="#/landing_pages">Landing Pages</a>
<li><a href="/landing_pages">Landing Pages</a>
</li>
<li><a href="#/settings">Settings</a>
<li><a href="/settings">Settings</a>
</li>
<li><a href="/api/">API Documentation</a>
</li>

View File

@ -7,13 +7,13 @@
</li>
<li class="active"><a href="#/campaigns">Campaigns</a>
</li>
<li><a href="#/users">Users &amp; Groups</a>
<li><a href="/users">Users &amp; Groups</a>
</li>
<li><a href="#/templates">Email Templates</a>
<li><a href="/templates">Email Templates</a>
</li>
<li><a href="#/landing_pages">Landing Pages</a>
<li><a href="/landing_pages">Landing Pages</a>
</li>
<li><a href="#/settings">Settings</a>
<li><a href="/settings">Settings</a>
</li>
<li><a href="/api/">API Documentation</a>
</li>
@ -27,15 +27,15 @@
</h1>
<div id="flashes" class="row"></div>
<div class="row">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"><i class="fa fa-plus"></i> New Campaign</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#campaignModal"><i class="fa fa-plus"></i> New Campaign</button>
</div>
&nbsp;
<div class="row">
<div id="emptyMessage" class="row">
<div class="alert alert-info">
No campaigns created yet. Let's create one!
</div>
</div>
<table id="campaignTable" class="table">
<table id="campaignTable" class="table" style="display:none;">
<thead>
<tr>
<th>Created Date</th>
@ -74,7 +74,7 @@
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal fade" id="campaignModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">

View File

@ -5,15 +5,15 @@
<ul class="nav nav-sidebar">
<li class="active"><a href="#">Dashboard</a>
</li>
<li><a href="#/campaigns">Campaigns</a>
<li><a href="/campaigns">Campaigns</a>
</li>
<li><a href="#/users">Users &amp; Groups</a>
<li><a href="/users">Users &amp; Groups</a>
</li>
<li><a href="#/templates">Email Templates</a>
<li><a href="/templates">Email Templates</a>
</li>
<li><a href="#/landing_pages">Landing Pages</a>
<li><a href="/landing_pages">Landing Pages</a>
</li>
<li><a href="#/settings">Settings</a>
<li><a href="/settings">Settings</a>
</li>
<li><a href="/api/">API Documentation</a>
</li>

View File

@ -4,15 +4,15 @@
<ul class="nav nav-sidebar">
<li><a href="#">Dashboard</a>
</li>
<li><a href="#/campaigns">Campaigns</a>
<li><a href="/campaigns">Campaigns</a>
</li>
<li><a href="#/users">Users &amp; Groups</a>
<li><a href="/users">Users &amp; Groups</a>
</li>
<li><a href="#/templates">Email Templates</a>
<li><a href="/templates">Email Templates</a>
</li>
<li class="active"><a href="#/landing_pages">Landing Pages</a>
</li>
<li><a href="#/settings">Settings</a>
<li><a href="/settings">Settings</a>
</li>
<li><a href="/api/">API Documentation</a>
</li>

View File

@ -5,15 +5,15 @@
<ul class="nav nav-sidebar">
<li><a href="#">Dashboard</a>
</li>
<li><a href="#/campaigns">Campaigns</a>
<li><a href="/campaigns">Campaigns</a>
</li>
<li><a href="#/users">Users &amp; Groups</a>
<li><a href="/users">Users &amp; Groups</a>
</li>
<li class="active"><a href="#/templates">Email Templates</a>
</li>
<li><a href="#/landing_pages">Landing Pages</a>
<li><a href="/landing_pages">Landing Pages</a>
</li>
<li><a href="#/settings">Settings</a>
<li><a href="/settings">Settings</a>
</li>
<li><a href="/api/">API Documentation</a>
</li>

View File

@ -5,15 +5,15 @@
<ul class="nav nav-sidebar">
<li><a href="#">Dashboard</a>
</li>
<li><a href="#/campaigns">Campaigns</a>
<li><a href="/campaigns">Campaigns</a>
</li>
<li class="active"><a href="#/users">Users &amp; Groups</a>
</li>
<li><a href="#/templates">Email Templates</a>
<li><a href="/templates">Email Templates</a>
</li>
<li><a href="#/landing_pages">Landing Pages</a>
<li><a href="/landing_pages">Landing Pages</a>
</li>
<li><a href="#/settings">Settings</a>
<li><a href="/settings">Settings</a>
</li>
<li><a href="/api/">API Documentation</a>
</li>
@ -25,30 +25,35 @@
<h1 class="page-header">
Users &amp; Groups
</h1>
<div id="flashes" class="row"></div>
<div class="row">
<div ng-repeat="flash in flashes.main" style="text-align:center" class="alert alert-{{flash.type}}">
<i class="fa {{flash.icon}}"></i> {{flash.message}}
</div>
</div>
<div class="row">
<button type="button" class="btn btn-primary" ng-click="editGroup('new')" data-toggle="modal" data-target="#newGroupModal"><i class="fa fa-plus"></i> New Group</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#groupModal"><i class="fa fa-plus"></i> New Campaign</button>
</div>
&nbsp;
<div ng-show="!groups.length">
<div class="row">
<div class="alert alert-info">
No groups created yet. Let's create one!
</div>
<div id="emptyMessage" class="row">
<div class="alert alert-info">
No groups created yet. Let's create one!
</div>
</div>
<div ng-show="groups.length" class="row">
<table id="groupTable" class="table" style="display:none;">
<thead>
<tr>
<th>Name</th>
<th>Members</th>
<th>Modified Date</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<!-- <div ng-show="groups.length" class="row">
<table ng-table="mainTableParams" class="table table-hover table-striped table-bordered">
<tbody>
<tr ng-repeat="group in $data | orderBy: '-modified_date'" class="editable-row">
<td data-title="'Name'" sortable="'name'" class="col-sm-1">{{group.name}}</td>
<td data-title="'Name'" sortable="'name'" class="col-sm-1">group.name</td>
<td data-title="'Members'" class="col-sm-2">
<span ng-repeat="target in group.targets | cut:5 track by $index ">
{{target}}{{$last ? '' : ', '}}
target$last ? '' : ', '
</span>
<div class="btn-group" style="float: right;">
<button type="button" class="btn btn-primary dropdown-toggle edit-button" data-toggle="dropdown">
@ -64,10 +69,82 @@
</ul>
</div>
</td>
<td data-title="'Modified Date'" class="col-sm-1">{{group.modified_date | date:'medium'}}</td>
<td data-title="'Modified Date'" class="col-sm-1">group.modified_date | date:'medium'</td>
</tr>
</tbody>
</table>
</div> -->
</div>
<!-- Modal -->
<div class="modal fade" id="groupModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="groupModalLabel">New Group</h4>
</div>
<div class="modal-body">
<div class="row" id="modal.flashes"></div>
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" placeholder="Campaign name" autofocus>
<br />
<label class="control-label" for="template">Template:</label>
<input type="text" class="form-control" placeholder="Template Name" id="template" typeahead="template.name for template in templates | filter:{name:$viewValue}" typeahead-editable="false" ng-model="campaign.template.name" />
<br />
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<a role="button" class="collapsed" data-toggle="collapse" href="#smtpPanel" aria-expanded="false" aria-controls="#smtpPanel">
SMTP Options <i class="pull-right glyphicon"></i>
</a>
</div>
<div class="panel-collapse collapse" id="smtpPanel" role="tabpanel">
<div class="panel-body">
<label class="control-label" for="from">From:</label>
<input type="text" class="form-control" placeholder="First Last <test@example.com>" value="" name="from">
<br />
<label class="control-label" for="smtp_server">Host:</label>
<input type="text" class="form-control" placeholder="smtp.example.com:25" value="" name="host">
<br />
<label class="control-label" for="smtp_server">Username:</label>
<input type="text" class="form-control" placeholder="Username" value="" name="username">
<br />
<label class="control-label" for="smtp_server">Password:</label>
<input type="password" class="form-control" placeholder="Password" value="" name="password">
<br />
</div>
</div>
</div>
<label class="control-label" for="users">Groups:</label>
<form>
<div class="input-group">
<input type="text" class="form-control" placeholder="Group Name" id="users" typeahead="group.name for group in groups | filter:{name:$viewValue}" typeahead-editable="false" ng-model="group.name" />
<span class="input-group-btn">
<button class="btn btn-primary"><i class="fa fa-plus"></i> Add</button>
</span>
</div>
</form>
<br />
<table ng-table="editGroupTableParams" class="table table-hover table-striped table-condensed">
<tbody>
<tr ng-repeat="group in $data" class="editable-row">
<td>group.name
<span ng-click="removeGroup(group)" class="remove-row"><i class="fa fa-trash-o"></i>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" onclick="save()">Save changes</button>
</div>
</div>
</div>
</div>
{{end}}
{{define "scripts"}}
<script src="/js/app/users.js"></script>
{{end}}