kylefang/deployd
1
0
Fork 0
mirror of https://github.com/zhigang1992/deployd.git synced 2026-05-24 22:17:07 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' of github.com:Deployd/Deployd

Browse Source
This commit is contained in:
Ritchie
2011-11-26 10:26:20 -07:00
parent b1534c69d2 f1a1c16ced
commit 55ee56e8c2
9 changed files with 206 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
public/dashboard/index.html
View File

@@ -46,10 +46,14 @@
</div>
</div>
<div class="nine columns">
<!--tabs-nav-template goes here-->
<div class="row" id="content">
<dl class="tabs" id="plugin-tabs-nav">
</dl>
<ul class="tabs-content twelve columns" id="content">
</div>
</ul>
<div class="reveal-modal">
</div>
</div>
</div>
@@ -57,6 +61,27 @@
<!-- container -->
<!-- PARTIAL TEMPLATES -->
<script id="item-edit-modal-template" type="html/template">
<a class="close-reveal-modal">x</a>
<h6><%= name %></h6>
<p>Fill out the fields below to create/edit an object in the <%= name %> collection.</p>
<form class="item-edit-form nice">
<% _.each(description, function (val, key, obj) {
var type = 'text'; %>
<fieldset>
<label for="item-val-<%= key %>"><%= key %></label>
<input
id="item-val-<%= key %>"
name="<%= key %>"
type="<%= type %>"
<% if (val.required) print('required="true"');
if (typeof values !== "undefined" && typeof values[key] !== "undefined") print('value='+values[key]); %> />
</fieldset>
<% }); %>
</form>
<a class="nice medium radius blue button save-item">Save Changes</a>
<a class="nice medium radius white button discard-changes">Discard Changes</a>
</script>
<script id="collection-view-template" type="html/template">
<div class="twelve columns">
<div class="panel">
@@ -67,32 +92,36 @@
<li><strong>List</strong>: GET /<%= name %></li>
<li><strong>Search</strong>: GET /search/<%= name %></li>
</ul>
<!--<input class="input-text" placeholder="Search" />-->
<table style="table-layout:fixed;">
<thead>
<% _.each(results[0], function (val, key, list) {%>
<th style="overflow:hidden;" width="<% print(Math.floor(100 / (numFields + 2))); %>%"><%= key %></th>
<% }); %>
<th width="<% print(Math.floor(100 / (numFields + 2))); %>%">edit</th>
<th width="<% print(Math.floor(100 / (numFields + 2))); %>%">remove</th>
</thead>
<tbody>
<% _.each(results, function (element, index, list) {%>
<tr>
<% _.each(element, function (val, key, obj) { %>
<td style="overflow: hidden;" width="<% print(Math.floor(100 / (numFields + 2))); %>%" ><%= val %></td>
<%});%>
<td width="<% print(Math.floor(100 / (numFields + 2))); %>%">
<a class="edit-item">edit</a>
</td>
<td width="<% print(Math.floor(100 / (numFields + 2))); %>%">
<a class="remove-item">remove</a>
<% if (results.length > 0) { %>
<!--<input class="input-text" placeholder="Search" />-->
<table style="table-layout:fixed;">
<thead>
<% _.each(results[0], function (val, key, list) {%>
<th style="overflow:hidden;" width="<% print(Math.floor(100 / (numFields + 2))); %>%"><%= key %></th>
<% }); %>
<th width="<% print(Math.floor(100 / (numFields + 2))); %>%">edit</th>
<th width="<% print(Math.floor(100 / (numFields + 2))); %>%">remove</th>
</thead>
<tbody>
<% _.each(results, function (element, index, list) {%>
<tr>
<% _.each(element, function (val, key, obj) { %>
<td style="overflow: hidden;" width="<% print(Math.floor(100 / (numFields + 2))); %>%" ><%= val %></td>
<%});%>
<td width="<% print(Math.floor(100 / (numFields + 2))); %>%">
<a id="edit-item-<% print(element._id); %>" class="edit-item">edit</a>
</td>
<td width="<% print(Math.floor(100 / (numFields + 2))); %>%">
<a class="remove-item">remove</a>
</tr>
<%});%>
</tbody>
</table>
<a class="small radius nice blue button">Create New <%= name %></a>
</tr>
<%});%>
</tbody>
</table>
<% } else {%>
<p><em>No items in collection.</em></p>
<% } %>
<a class="small radius nice blue button create-collection-item">Create New <%= name %></a>
<a class="small radius nice white button">Export <%= name %></a>
<a class="small radius nice white button">Upload <%= name %></a>
</div>
@@ -158,11 +187,13 @@
<option <% if (value === "boolean" || value.type === "boolean") { print("SELECTED"); }%>>boolean</option>
<option <% if (value === "binary" || value.type === "binary") { print("SELECTED"); }%>>binary</option>
</select>
<label for="unique<%= key %>" style="display:inline-block; padding: 0 10px;">
<input type="checkbox" id="unique<%= key%>" style="display: none;">
<span class="custom checkbox <% if (value.unique) { print("checked"); } %>"></span> unique in this collection
</label>
<a class="nice small radius red button delete-property" style="float: right;">Remove</a>
<label for="unique<%= key %>" style="display:inline-block; padding: 0 10px;" />
<input type="checkbox" id="unique<%= key%>" style="display: none;">
<span class="custom checkbox <% if (value.unique) { print("checked"); } %>"></span> unique
<label for="required-<%= key %>" style="display:inline-block; padding: 0 10px;" />
<input type="checkbox" id="required-<%= key %>" style="display: none;">
<span class="custom checkbox <% if (value.required) { print("checked"); } %>"></span> required
<a class="delete-property" style="float: right; margin-top: 7px; cursor: pointer;">Remove</a>
</fieldset>
<%});%>
@@ -408,8 +439,8 @@
// dependencies
$LAB
.setOptions({
AlwaysPreserveOrder: true,
CacheBust: true
AlwaysPreserveOrder: true
// CacheBust: true
})
.script(l + 'underscore-min.js')
.script(l + 'jquery-1.6.2.js')
@@ -424,11 +455,13 @@
.script(m + 'plugin.js')
.script(m + 'form.js')
.script(m + 'schema-model.js')
.script(m + 'item-edit-model.js')
.script(m + 'collection-model.js')
// partials
.script(p + 'plugin-view.js')
.script(p + 'schema-view.js')
.script(p + 'collection-view.js')
.script(p + 'item-edit-view.js')
// views
.script(v + 'app-nav-view.js')
// router

18
public/dashboard/js/model/collection-model.js
View File

@@ -1,8 +1,22 @@
window.CollectionModel = Backbone.Model.extend({
url: function () {
return '/' + this.get("name");
console.log('/search/'+this.get('name')+'?find={}');
return '/search/' + this.get("name") + '?find={}';
},
getItemById: function (id) {
var _items = this.get('results');
console.log('_items');
console.log(_items);
var _item;
_.each(this.get('results'), function (item, index, list){
if (item._id === id) {
_item = item;
return;
}
});
return _item || false;
},
parse: function (response) {
return {results: response};
return {results: response.results};
}
});

12
public/dashboard/js/model/item-edit-model.js Normal file
View File

@@ -0,0 +1,12 @@
window.ItemEditModel = Backbone.Model.extend({
url: function () {
return '/' + this.get('plugin');
},
onSync: function (response) {
console.log('onSync() in ItemEditModel');
console.log(response);
},
sync: function (method, model, options) {
d(this.url(), this.get('values'), this.onSync);
}
});

3
public/dashboard/js/model/plugin.js
View File

@@ -14,13 +14,14 @@ window.Plugin = Backbone.Model.extend({
window.Plugins = Backbone.Collection.extend({
model: Plugin,
getByPluginName: function (name) {
var _plugin = {};
var _plugin;
this.each(function (plugin){
if (plugin.get("name") === name) {
_plugin = plugin;
return;
}
});
return _plugin;
}
});

8
public/dashboard/js/router.js
View File

@@ -1,7 +1,7 @@
var Router = Backbone.Router.extend({
initialize: function() {
// prevent caching
$.ajaxSetup({ cache: false });
// $.ajaxSetup({ cache: false });
// allows to send restful calls over AJAX
Backbone.emulateHTTP = true;
window.app = new App();
@@ -19,14 +19,16 @@ var Router = Backbone.Router.extend({
routes: {
'/plugins': 'plugin',
'/plugins/:name': 'plugin'
'/plugins/:name': 'plugin',
'/plugins/:name/:tab': 'plugin'
},
plugin: function(name) {
plugin: function(name, tabId) {
var model = app.get("plugins").getByPluginName(name);
var view = new PluginView({
model: model
});
if (typeof tabId !== "undefined" && tabId !== '') view.tabId = tabId;
view.render();
}
});

42
public/dashboard/js/view/partial/collection-view.js
View File

@@ -1,5 +1,44 @@
window.CollectionView = Backbone.View.extend({
template: _.template($("#collection-view-template").html()),
events : {
"click .create-collection-item" : "createItem",
"click .edit-item" : "editItem",
"click .remove-item" : "deleteItem"
},
editItem: function (e) {
console.log('editItem:'+$(e.currentTarget).attr("id"));
//TODO: Implement auto-saving model.
var values = this.model.getItemById($(e.currentTarget).attr("id").replace('edit-item-',''));
console.log(values);
var _itemModel = new ItemEditModel({
description: this.model.get('description'), //schema definition
name: this.model.get('name'),
plugin: this.model.get('plugin'),
values: values
});
this._openItemEditModal(_itemModel);
},
deleteItem: function (e) {
console.log('deleteItem');
},
_openItemEditModal: function (model) {
var _newItemView = new ItemEditView({
model: model,
el: '.reveal-modal'
});
_newItemView.render();
},
createItem: function () {
//TODO: Dynamically create a form.
var _newItemModel = new ItemEditModel({
description: this.model.get('description'), //schema definition
name: this.model.get('name'),
plugin: this.model.get('plugin'),
values: {}
});
this._openItemEditModal(_newItemModel);
},
schemaChange: function (msg) {
// $(".save-changes", this.el).html("Save Changes").removeClass("white").addClass("blue");
if (msg.get("errors")) {
@@ -13,12 +52,9 @@ window.CollectionView = Backbone.View.extend({
}
},
initialize: function () {
console.log('initialize() in CollectionView');
console.log(this.model);
this.model.bind("all", this.render, this);
},
render: function () {
console.log('render() in CollectionView');
$(this.el).html(this.template(this.model.toJSON()));
}
});

27
public/dashboard/js/view/partial/item-edit-view.js Normal file
View File

@@ -0,0 +1,27 @@
window.ItemEditView = Backbone.View.extend({
template: _.template($('#item-edit-modal-template').html()),
events: {
'click .save-item' : 'save',
'click .discard-changes' : 'discard'
},
discard : function (e) {
this._closeModal();
},
_closeModal : function () {
$('.close-reveal-modal').click();
},
_formObjectFromArray: function (formArray) {
var _formObject = {};
_.each(formArray, function (item, index, list) {
_formObject[item.name] = item.value;
});
return _formObject;
},
save: function (e) {
var _values = this._formObjectFromArray($('form', this.el).serializeArray());
this.model.save({values: _values});
},
render: function () {
$(this.el).empty().append(this.template(this.model.toJSON())).reveal();
}
});

46
public/dashboard/js/view/partial/plugin-view.js
View File

@@ -1,17 +1,21 @@
window.PluginView = Backbone.View.extend({
el: '#content',
tabsEl: '#plugin-tabs-nav',
item: 'plugin-item-template',
template: 'plugin-detail-template',
render: function () {
var _self = this;
$(this.el).empty();
$(this.el).empty();
$(this.tabsEl).empty();
this.model.get("objects").each(function(obj){
var tabContent = _self.addTab(obj.get("name"), obj.get("_id"));
if (obj.get("description")) {
//TODO: Plug this in to a view/model/template
var _schemaModel = new SchemaModel(obj);
var _schemaEl = $("<div />").attr("id", "id-"+obj.get('_id'));
$(_self.el).append(_schemaEl);
$(tabContent).append(_schemaEl);
var _schemaView = new SchemaView({
el: _schemaEl,
model: _schemaModel
@@ -19,24 +23,44 @@ window.PluginView = Backbone.View.extend({
_schemaView.render();
}
if (obj.get("collection")) {
console.log(obj.toJSON());
var _collectionModel = new CollectionModel({
name: obj.get('collection'),
numFields: _.size(obj.get('decsription')),
description: obj.get('decsription'),
plugin: obj.get('plugin'),
numFields: _.size(obj.get('description')),
description: obj.get('description'),
results: []
});
console.log(obj.get('collection'));
console.log(_collectionModel.url());
var _collectionEl = $("<div />").attr("id", "id-PLACEHOLDER");
$(_self.el).append(_collectionEl);
var _collectionEl = $("<div />").attr("id", "collection-"+obj.get('collection'));
$(tabContent).append(_collectionEl);
var _collectionView = new CollectionView({
el: _collectionEl,
model: _collectionModel
});
_collectionModel.fetch();
// _collectionView.render();
_collectionView.render();
}
});
if (typeof this.tabId !== "undefined") {
$('#tab-content-'+this.tabId).addClass('active').show();
$('#tab-link-'+this.tabId+' > a').addClass('active');
}
else {
$('#plugin-tabs-nav > dd > a').addClass('active');
$('.tabs-content > li').show();
}
},
addTab: function (tabName, id) {
//Create a new li to add to the tabs nav
var _navItem = $("<dd />").attr('id','tab-link-'+id);
$(_navItem).append($('<a />').attr('href','/dashboard/#/plugins/'+this.model.get('name')+'/'+id).html(tabName));
$(this.tabsEl).append(_navItem);
//Create a new container to add to the content area
var _contentArea = $("<li />").attr('id', 'tab-content-'+id).css('display','none');
$(this.el).append(_contentArea);
return _contentArea;
}
});

2
public/dashboard/js/view/partial/schema-view.js
View File

@@ -25,7 +25,9 @@ window.SchemaView = Backbone.View.extend({
var _newDesc = {};
$("fieldset", this.el).each(function () {
var type = $(this).find("select").val();
//TODO: Account for required as well
_newDesc[$(this).find("input[type=text]").val()] = $(this).find("span.checkbox").hasClass("checked") ? { type: type, unique: true} : type;
});
return _newDesc;
},