Backbone JS support for creating a new client.
Michael Jett
parent
c02bac8c38
commit
ba56c00318
|
|
@ -13,7 +13,7 @@
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<o:breadcrumbs crumb="Manage Clients"/>
|
<o:breadcrumbs crumb="Manage Clients"/>
|
||||||
|
|
||||||
|
<span id="content"></span>
|
||||||
<o:copyright/>
|
<o:copyright/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -63,7 +63,7 @@
|
||||||
|
|
||||||
var ClientListView = Backbone.View.extend({
|
var ClientListView = Backbone.View.extend({
|
||||||
|
|
||||||
el: $(".content"),
|
tagName: 'span',
|
||||||
|
|
||||||
initialize:function () {
|
initialize:function () {
|
||||||
this.model.bind("reset", this.render, this);
|
this.model.bind("reset", this.render, this);
|
||||||
|
|
@ -74,12 +74,14 @@
|
||||||
},
|
},
|
||||||
|
|
||||||
newClient:function () {
|
newClient:function () {
|
||||||
alert('new client');
|
this.remove();
|
||||||
|
document.location.hash = 'new_client';
|
||||||
},
|
},
|
||||||
|
|
||||||
render:function (eventName) {
|
render:function (eventName) {
|
||||||
|
|
||||||
$(this.el).find(".breadcrumb").after($('#tmpl-client-table').html());
|
// append and render table structure
|
||||||
|
$(this.el).html($('#tmpl-client-table').html());
|
||||||
|
|
||||||
_.each(this.model.models, function (client) {
|
_.each(this.model.models, function (client) {
|
||||||
$("#client-table").append(new ClientView({model:client}).render().el);
|
$("#client-table").append(new ClientView({model:client}).render().el);
|
||||||
|
|
@ -89,31 +91,54 @@
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
var ClientFormView = Backbone.View.extend({
|
||||||
|
|
||||||
|
tagName:"span",
|
||||||
|
|
||||||
|
initialize:function () {
|
||||||
|
|
||||||
|
if (!this.template) {
|
||||||
|
this.template = _.template($('#tmpl-client-form').html());
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
render:function (eventName) {
|
||||||
|
|
||||||
|
var action = "Edit";
|
||||||
|
|
||||||
|
if (!this.model) {
|
||||||
|
action = "New";
|
||||||
|
}
|
||||||
|
|
||||||
|
$(this.el).html(this.template({action: action}));
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
// Router
|
// Router
|
||||||
var AppRouter = Backbone.Router.extend({
|
var AppRouter = Backbone.Router.extend({
|
||||||
|
|
||||||
routes:{
|
routes:{
|
||||||
"":"list"
|
"":"list",
|
||||||
|
"new_client":"newClient"
|
||||||
},
|
},
|
||||||
|
|
||||||
initialize:function () {
|
initialize:function () {
|
||||||
//$('#header').html(new HeaderView().render().el);
|
|
||||||
},
|
},
|
||||||
|
|
||||||
list:function () {
|
list:function () {
|
||||||
|
|
||||||
this.clientList = new ClientCollection();
|
this.clientList = new ClientCollection();
|
||||||
this.clientListView = new ClientListView({model:this.clientList});
|
this.clientListView = new ClientListView({model:this.clientList});
|
||||||
this.clientList.fetch({
|
this.clientList.fetch();
|
||||||
dataType:"json",
|
|
||||||
success:function (collection, response) {
|
|
||||||
//console.dir(response);
|
|
||||||
},
|
|
||||||
error:function (collection, response) {
|
|
||||||
//console.dir(response);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
//debugger;
|
$('#content').html(this.clientListView.render().el);
|
||||||
|
},
|
||||||
|
|
||||||
|
newClient:function() {
|
||||||
|
this.clientFormView = new ClientFormView();
|
||||||
|
$('#content').html(this.clientFormView.render().el);
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -69,4 +69,144 @@
|
||||||
<div class="well">
|
<div class="well">
|
||||||
<button class="btn btn-small btn-primary">New Client</button>
|
<button class="btn btn-small btn-primary">New Client</button>
|
||||||
</div>
|
</div>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<script type="text/html" id="tmpl-client-form">
|
||||||
|
|
||||||
|
<h1><%=action%> Client</h1>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="">
|
||||||
|
<form>
|
||||||
|
<fieldset>
|
||||||
|
<legend>Details</legend>
|
||||||
|
|
||||||
|
<div class="well">
|
||||||
|
|
||||||
|
<div class="row-fluid">
|
||||||
|
<div class="span6">
|
||||||
|
<label>Client name</label>
|
||||||
|
<input type="text" class="span3" placeholder="Type something"> <span class="help-inline">Associated help text!</span>
|
||||||
|
|
||||||
|
<label>Refresh URL</label>
|
||||||
|
<input type="text" class="span3" placeholder="http://"><span class="help-inline">Associated help text!</span>
|
||||||
|
</div>
|
||||||
|
<div class="span6">
|
||||||
|
<label>Description</label>
|
||||||
|
<textarea class="input-xlarge" id="textarea" placeholder="Type a description"
|
||||||
|
rows="3"></textarea> <span class="help-inline">Associated help text!</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<div class="">
|
||||||
|
<p class="help-block">Refresh tokens allow clients to request another authorization
|
||||||
|
token after it
|
||||||
|
expires.</p>
|
||||||
|
<label class="checkbox">
|
||||||
|
<input type="checkbox"> Allow refresh tokens?
|
||||||
|
</label>
|
||||||
|
<button type="submit" class="btn btn-primary">Submit</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
<fieldset>
|
||||||
|
<legend>Additional Options</legend>
|
||||||
|
|
||||||
|
<div class="row-fluid">
|
||||||
|
|
||||||
|
<div class="span4 control-group">
|
||||||
|
|
||||||
|
<label class="control-label">Grant Types</label>
|
||||||
|
|
||||||
|
<div class="controls">
|
||||||
|
<label class="checkbox">
|
||||||
|
<input type="checkbox" name="grant-type-checkbox-list1" value="option1">
|
||||||
|
Option one
|
||||||
|
</label>
|
||||||
|
<label class="checkbox">
|
||||||
|
<input type="checkbox" name="grant-type-checkbox-list2" value="option2">
|
||||||
|
Option two
|
||||||
|
</label>
|
||||||
|
<label class="checkbox">
|
||||||
|
<input type="checkbox" name="grant-type-checkbox-list3" value="option3">
|
||||||
|
Option three
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<p class="help-block"><strong>Note:</strong> Labels surround all the options for
|
||||||
|
much larger click areas and a more usable form.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="span4 control-group">
|
||||||
|
|
||||||
|
<label class="control-label">Auth Types</label>
|
||||||
|
|
||||||
|
<div class="controls">
|
||||||
|
<label class="checkbox">
|
||||||
|
<input type="checkbox" name="auth-type-checkbox-list1" value="option1">
|
||||||
|
Option one
|
||||||
|
</label>
|
||||||
|
<label class="checkbox">
|
||||||
|
<input type="checkbox" name="auth-type-checkbox-list2" value="option2">
|
||||||
|
Option two
|
||||||
|
</label>
|
||||||
|
<label class="checkbox">
|
||||||
|
<input type="checkbox" name="auth-type-checkbox-list3" value="option3">
|
||||||
|
Option three
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<p class="help-block"><strong>Note:</strong> Labels surround all the options for
|
||||||
|
much larger click areas and a more usable form.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="span4 control-group">
|
||||||
|
<label class="control-label" for="access-token-timeout-seconds" style="">Access Token
|
||||||
|
Timeout</label>
|
||||||
|
|
||||||
|
<div class="controls form-horizontal" style="">
|
||||||
|
<div class="input-append">
|
||||||
|
<input type="text" class="span2" id="access-token-timeout-seconds" size="16"><span
|
||||||
|
class="add-on">seconds</span>
|
||||||
|
</div>
|
||||||
|
<span class="help-inline">Here's more help text</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<label class="control-label" for="refresh-token-timeout-seconds" style="">Refresh Token
|
||||||
|
Timeout</label>
|
||||||
|
|
||||||
|
<div class="controls form-horizontal" style="">
|
||||||
|
<div class="input-append">
|
||||||
|
<input type="text" class="span2" id="refresh-token-timeout-seconds" size="16"><span
|
||||||
|
class="add-on">seconds</span>
|
||||||
|
</div>
|
||||||
|
<span class="help-inline">Here's more help text</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="span12 control-group">
|
||||||
|
<label for="textarea2">Scope</label>
|
||||||
|
|
||||||
|
<div class="input">
|
||||||
|
<textarea rows="3" class="xlarge span10" placeholder="email,first name, last name"
|
||||||
|
id="textarea2" name="textarea2"></textarea>
|
||||||
|
<span class="help-block">
|
||||||
|
Please enter scopes separated by commas
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
Loading…
Reference in New Issue