blacklist management UI
Justin Richer
parent
d576df4b31
commit
4e18fb4525
|
|
@ -24,44 +24,46 @@
|
|||
* }
|
||||
*
|
||||
*/
|
||||
var ListWidgetChildView = Backbone.View.extend({
|
||||
|
||||
tagName: 'tr',
|
||||
|
||||
events:{
|
||||
"click .btn-delete":function (e) {
|
||||
e.preventDefault();
|
||||
//this.$el.tooltip('delete');
|
||||
this.model.destroy();
|
||||
}
|
||||
},
|
||||
|
||||
initialize:function () {
|
||||
|
||||
if (!this.template) {
|
||||
this.template = _.template($('#tmpl-list-widget-child').html());
|
||||
}
|
||||
|
||||
this.model.bind('destroy', this.remove, this);
|
||||
|
||||
},
|
||||
|
||||
render:function () {
|
||||
this.$el.html(this.template(this.model.toJSON()));
|
||||
|
||||
if (this.model.get('item').length > 30) {
|
||||
this.$el.tooltip({title:this.model.get('item')});
|
||||
}
|
||||
return this;
|
||||
}
|
||||
});
|
||||
|
||||
var ListWidgetView = Backbone.View.extend({
|
||||
|
||||
tagName: "table",
|
||||
|
||||
childView: Backbone.View.extend({
|
||||
|
||||
tagName: 'tr',
|
||||
|
||||
events:{
|
||||
"click .btn":function (e) {
|
||||
e.preventDefault();
|
||||
this.$el.tooltip('delete');
|
||||
this.model.destroy();
|
||||
}
|
||||
},
|
||||
|
||||
initialize:function () {
|
||||
|
||||
if (!this.template) {
|
||||
this.template = _.template($('#tmpl-list-widget-child').html());
|
||||
}
|
||||
|
||||
this.model.bind('destroy', this.remove, this);
|
||||
|
||||
},
|
||||
|
||||
render:function () {
|
||||
this.$el.html(this.template(this.model.toJSON()));
|
||||
|
||||
if (this.model.get('item').length > 30) {
|
||||
this.$el.tooltip({title:this.model.get('item')});
|
||||
}
|
||||
return this;
|
||||
}
|
||||
}),
|
||||
childView:ListWidgetChildView,
|
||||
|
||||
events:{
|
||||
"click .btn":"addItem",
|
||||
"click .btn-add":"addItem",
|
||||
"keypress input":function (e) {
|
||||
// trap the enter key
|
||||
if (e.which == 13) {
|
||||
|
|
@ -124,9 +126,20 @@
|
|||
|
||||
return this;
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
|
||||
var BlackListModel = Backbone.Model.extend({
|
||||
idAttribute: 'id',
|
||||
|
||||
urlRoot: 'api/blacklist'
|
||||
});
|
||||
|
||||
var BlackListCollection = Backbone.Collection.extend({
|
||||
initialize: function() { },
|
||||
|
||||
url: "api/blacklist"
|
||||
});
|
||||
|
||||
var WhiteListModel = Backbone.Model.extend({
|
||||
|
||||
|
|
@ -897,7 +910,81 @@
|
|||
}
|
||||
|
||||
});
|
||||
|
||||
var BlackListListView = Backbone.View.extend({
|
||||
tagName: 'span',
|
||||
|
||||
initialize:function() {
|
||||
if (!this.template) {
|
||||
this.template = _.template($('#tmpl-blacklist-form').html());
|
||||
}
|
||||
},
|
||||
|
||||
events: {
|
||||
"click .refresh-table":"refreshTable"
|
||||
},
|
||||
|
||||
refreshTable:function() {
|
||||
var _self = this;
|
||||
this.model.fetch({
|
||||
success: function() {
|
||||
_self.render();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
render:function (eventName) {
|
||||
|
||||
$(this.el).html(this.template(this.model.toJSON()));
|
||||
|
||||
$('#blacklist .controls', this.el).html(new BlackListWidgetView({
|
||||
placeholder: 'http://',
|
||||
collection: this.model
|
||||
}).render().el);
|
||||
|
||||
return this;
|
||||
}
|
||||
});
|
||||
|
||||
var BlackListWidgetView = ListWidgetView.extend({
|
||||
|
||||
childView: ListWidgetChildView.extend({
|
||||
render:function() {
|
||||
var uri = this.model.get('uri');
|
||||
|
||||
this.$el.html(this.template({item: uri}));
|
||||
|
||||
if (uri.length > 30) {
|
||||
this.$el.tooltip({title:uri});
|
||||
}
|
||||
return this;
|
||||
|
||||
}
|
||||
}),
|
||||
|
||||
addItem:function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
var input_value = $("input", this.el).val().trim();
|
||||
|
||||
// TODO: URI/pattern validation, check against existing clients
|
||||
|
||||
var item = new BlackListModel({
|
||||
uri: input_value
|
||||
});
|
||||
|
||||
var _self = this; // closures...
|
||||
|
||||
item.save(item, {
|
||||
success:function() {
|
||||
_self.collection.add(item);
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
// Router
|
||||
var AppRouter = Backbone.Router.extend({
|
||||
|
||||
|
|
@ -910,6 +997,8 @@
|
|||
"admin/whitelist/new/:cid":"newWhitelist",
|
||||
"admin/whitelist/:id":"editWhitelist",
|
||||
|
||||
"admin/blacklist":"blackList",
|
||||
|
||||
"user/approved":"approvedSites"
|
||||
|
||||
},
|
||||
|
|
@ -918,11 +1007,13 @@
|
|||
|
||||
this.clientList = new ClientCollection();
|
||||
this.whiteListList = new WhiteListCollection();
|
||||
this.blackListList = new BlackListCollection();
|
||||
this.approvedSiteList = new ApprovedSiteCollection();
|
||||
|
||||
this.clientListView = new ClientListView({model:this.clientList});
|
||||
this.whiteListListView = new WhiteListListView({model:this.whiteListList});
|
||||
this.approvedSiteListView = new ApprovedSiteListView({model:this.approvedSiteList});
|
||||
this.blackListListView = new BlackListListView({model:this.blackListList});
|
||||
|
||||
this.breadCrumbView = new BreadCrumbView({
|
||||
collection:new Backbone.Collection()
|
||||
|
|
@ -1091,9 +1182,23 @@
|
|||
}
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
blackList:function() {
|
||||
this.breadCrumbView.collection.reset();
|
||||
this.breadCrumbView.collection.add([
|
||||
{text:"Home", href:""},
|
||||
{text:"Manage Blacklisted Sites", href:"manage/#admin/blacklists"}
|
||||
]);
|
||||
|
||||
var view = this.blackListListView;
|
||||
|
||||
this.blackListList.fetch({success:
|
||||
function(collection, response, options) {
|
||||
$('#content').html(view.render().el);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -254,7 +254,7 @@
|
|||
|
||||
<script type="text/html" id="tmpl-list-widget-child">
|
||||
<td><%=(item.length > 30) ? item.substr(0,27) + '...' : item %></td>
|
||||
<td><a class="btn btn-small" href="#"><i class="icon-minus-sign icon-gray"></i></a></td>
|
||||
<td><a class="btn btn-small btn-delete" href="#"><i class="icon-minus-sign icon-gray"></i></a></td>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="tmpl-list-widget">
|
||||
|
|
@ -262,7 +262,7 @@
|
|||
<tr>
|
||||
<th class="control-group">
|
||||
<input type="text" value="" placeholder="<%=(placeholder) ? placeholder : ''%>"></th>
|
||||
<th><a class="btn btn-small" href="#"><i class="icon-plus-sign icon-gray"></i></a></th>
|
||||
<th><a class="btn btn-small btn-add" href="#"><i class="icon-plus-sign icon-gray"></i></a></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
|
@ -426,7 +426,7 @@
|
|||
<form class="form-horizontal">
|
||||
<fieldset>
|
||||
<div class="well">
|
||||
<button class="btn btn-small btn-primary">Save</button> <button class="btn btn-small btn-cancel">Cancel</button>
|
||||
<button class="btn btn-small refresh-table"><i class="icon-refresh"></i></button>
|
||||
</div>
|
||||
|
||||
<div class="control-group" id="blacklist">
|
||||
|
|
@ -436,10 +436,10 @@
|
|||
</div>
|
||||
|
||||
<div class="well">
|
||||
<button class="btn btn-small btn-primary">Save</button> <button class="btn btn-small btn-cancel">Cancel</button>
|
||||
<button class="btn btn-small refresh-table"><i class="icon-refresh"></i></button>
|
||||
</div>
|
||||
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
</script>
|
||||
</script>
|
||||
Loading…
Reference in New Issue