mirror of
https://github.com/zhigang1992/deployd.git
synced 2026-05-30 18:43:23 +08:00
480 lines
19 KiB
HTML
480 lines
19 KiB
HTML
<!doctype html>
|
|
<html xmlns:fb="http://ogp.me/ns/fb#">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Deployd :: Dashboard</title>
|
|
<link rel="stylesheet" media="all" href="css/dashboard.css" />
|
|
</head>
|
|
|
|
<body>
|
|
<div id="nav">
|
|
<div class="row">
|
|
<div class="three columns">
|
|
<h1>Deployd</h1>
|
|
</div>
|
|
<div class="nine columns">
|
|
<strong class="right">
|
|
<a href="">Settings</a>
|
|
<a href="">Your Account</a>
|
|
<a href="">Your Apps</a>
|
|
<a href="">Docs</a>
|
|
<a href="">Plugins</a>
|
|
<a href="" class="small radius nice blue button">New App</a>
|
|
</strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- container -->
|
|
<div class="container">
|
|
|
|
<div id="bread" class="row">
|
|
<h4></h4>
|
|
<hr />
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div id="menu" class="three columns">
|
|
<div class="panel">
|
|
<h5>Plugins</h5>
|
|
<div class="links">
|
|
<em>No Plugins Loaded</em>
|
|
</div>
|
|
<hr />
|
|
<a href="/terminal">Terminal</a>
|
|
<hr />
|
|
<p>Browse the <a href="">plugin library</a> for useful add-ons or use our plugin generator to quickly build your own.</p>
|
|
<a href="" class="small radius nice blue button">Create New Plugin</a>
|
|
</div>
|
|
</div>
|
|
<div class="nine columns">
|
|
<dl class="tabs" id="plugin-tabs-nav">
|
|
|
|
</dl>
|
|
<ul class="tabs-content twelve columns" id="content">
|
|
|
|
</ul>
|
|
<div class="reveal-modal">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- 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) { %>
|
|
<fieldset>
|
|
<label for="item-val-<%= key %>"><%= key %></label><% if (val.type === 'object') print('requires valid JSON'); %>
|
|
<% if (val.formType === 'textarea' || val.formType === 'multi-select') { %>
|
|
<textarea
|
|
id="item-val-<%= key %>"
|
|
name="<%= key %>"><% print(values ? values[key] : ''); %></textarea>
|
|
<% }
|
|
else if (val.formType === 'checkbox') {%>
|
|
<input
|
|
type="checkbox"
|
|
id="item-val-<%= key %>"
|
|
name="<%= key %>"
|
|
<% print(val.required ? 'required="true"' : '');
|
|
print(values[key] === 'true' ? 'checked' : ''); %> />
|
|
<% }
|
|
else { %>
|
|
<input
|
|
type="<% print(val.formType || 'text'); %>"
|
|
id="item-val-<%= key %>"
|
|
name="<%= key %>"
|
|
value="<% print(values && typeof values[key] !== 'undefined' ? values[key] : ''); %>"
|
|
<% if (val.required) print('required="true"'); %> />
|
|
<% } %>
|
|
</fieldset>
|
|
<% }); %>
|
|
</form>
|
|
<div class="alert-box" style="display:none"></div>
|
|
<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 collection-view">
|
|
<div class="panel">
|
|
<h2><%= name %> Collection</h2>
|
|
<p>This is the <%= name %> collection in your database. You and your users (with proper permissions) can interact with this collection with these HTTP verbs and routes:</p>
|
|
<ul>
|
|
<li>
|
|
<abbr title="Get a specific item in the collection by id."><strong>GET: /<%= plugin %>/<%= name %>/:id </strong></abbr>
|
|
</li>
|
|
<li>
|
|
<abbr title="Load models in a collection."><strong>GET: /search/<%= name %> </strong></abbr>
|
|
</li>
|
|
<li>
|
|
<abbr title="Load models, matching query. Can be queried by adding ?find={}, and including matching parameters in the object, such as ?find={email:'user@email'}"><strong>POST: /search/<%= name %></strong></abbr>
|
|
</li>
|
|
<li>
|
|
<abbr title="Add a new object to the <%= name %> collection."><strong>POST: /<%= plugin %>/<%= name %></strong></abbr>
|
|
</li>
|
|
<li>
|
|
<abbr title="Update a specific object by id in the collection. POST at this route is also supported, or alternatively attaching method=put to the querystring."><strong>PUT: /<%= plugin %>/<%= name %>/:id </strong></abbr>
|
|
</li>
|
|
<li>
|
|
<abbr title="Delete an object in a collection. Alternatively, POST is supported as long as ?method=delete is attached to the querystring."><strong>DELETE: /<%= plugin %>/<%= name %>/:id </strong></abbr>
|
|
</li>
|
|
</ul>
|
|
<hr />
|
|
<% if (results.length > 0) { %>
|
|
<!--<input class="input-text" placeholder="Search" />-->
|
|
<table style="table-layout:fixed;">
|
|
<thead>
|
|
<% _.each(description, 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(description, function (val, key, obj) { %>
|
|
<td style="overflow: hidden;" width="<% print(Math.floor(100 / (numFields + 2))); %>%" ><% print(typeof list[index][key] === 'object' ? JSON.stringify(list[index][key]) : list[index][key]); %></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 id="remove-item-<% print(element._id); %>" class="remove-item">remove</a>
|
|
|
|
</tr>
|
|
<%});%>
|
|
</tbody>
|
|
</table>
|
|
<% } else {%>
|
|
<p class="no-items"><em>No items in collection.</em></p>
|
|
<% } %>
|
|
<div class="alert-box" style="display:none;"></div>
|
|
<a class="medium 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>
|
|
</div>
|
|
</script>
|
|
<script id="one-dimensional-list" type="html/template">
|
|
//TODO: Wire this up and add option to delete.
|
|
//Good generic way to handle collections with single property
|
|
<div class="six columns">
|
|
<div class="panel">
|
|
<h6>User Groups</h6>
|
|
<hr />
|
|
<form class="roles nice custom">
|
|
<fieldset>
|
|
<input class="input-text" type="text" placeholder="Group Name" value="Authors">
|
|
<input class="input-text" type="text" placeholder="Group Name" value="Editors">
|
|
<input class="input-text" type="text" placeholder="Group Name" value="Banned">
|
|
<input class="input-text" type="text" placeholder="New Group Name">
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</script>
|
|
<script id="new-schema-property-template" type="html/template">
|
|
<fieldset>
|
|
<input class="input-text" type="text" />
|
|
<span>is a</span>
|
|
<select style="display: inline-block;">
|
|
<option <% if (type === "string") { print("SELECTED"); }%>>string</option>
|
|
<option <% if (type === "object") { print("SELECTED"); }%>>object</option>
|
|
<option <% if (type === "boolean") { print("SELECTED"); }%>>boolean</option>
|
|
<option <% if (type === "binary") { print("SELECTED"); }%>>binary</option>
|
|
<option <% if (type === "number") { print("SELECTED"); }%>>number</option>
|
|
<option <% if (type === "long") { print("SELECTED"); }%>>long</option>
|
|
<option <% if (type === "email") { print("SELECTED"); }%>>email</option>
|
|
<option <% if (type === "password") { print("SELECTED"); }%>>password</option>
|
|
<option <% if (type === "function") { print("SELECTED"); }%>>function</option>
|
|
</select>
|
|
<label for="unique<%= key %>" style="display:inline-block; padding: 0 10px;" />
|
|
<input type="checkbox" class='unique-checkbox' id="unique<%= key %>" <% if (typeof unique !== 'undefined' && unique === true) { print("checked"); } %> /> unique
|
|
<label for="required-<%= key %>" style="display:inline-block; padding: 0 10px;" />
|
|
<input type="checkbox" class='required-checkbox' id="required-<%= key %>" <% if (typeof required !== 'undefined' && required === true) { print("checked"); } %> /> required
|
|
<a class="delete-property" style="float: right; margin-top: 7px; cursor: pointer;">Remove</a>
|
|
</fieldset>
|
|
</script>
|
|
<script id="schema-view-template" type="html/template">
|
|
<div class="twelve columns">
|
|
<div class="panel">
|
|
<h2><%= name %> Schema</h2>
|
|
<p>Define the allowed properties of the <%= name %> schema, and who is allowed to read and manipulate objects in the <%= name %> collection.</p>
|
|
<hr />
|
|
<h4><%= name %> Schema Description</h4>
|
|
<p>
|
|
Create and edit properties below to control the validation of objects added to the <%= name %> collection.
|
|
</p>
|
|
<form class="description nice custom">
|
|
<input type="hidden" name="_id" value="<%= _id %>" />
|
|
<% if (description && _.keys(description).length <= 0) { %>
|
|
<strong><em>This model does not have any properties yet. Create some below to start adding models to your collection.</em></strong>
|
|
<% }%>
|
|
<% _.each(description, function (value, key, list){%>
|
|
<fieldset>
|
|
<input class="input-text" type="text" value="<%= key %>">
|
|
<span>is a</span>
|
|
|
|
<select style="display: inline-block;">
|
|
<option <% if (value === "string" || value.type === "string") { print("SELECTED"); }%>>string</option>
|
|
<option <% if (value === "object" || value.type === "object") { print("SELECTED"); }%>>object</option>
|
|
<option <% if (value === "boolean" || value.type === "boolean") { print("SELECTED"); }%>>boolean</option>
|
|
<option <% if (value === "binary" || value.type === "binary") { print("SELECTED"); }%>>binary</option>
|
|
<option <% if (value === "number" || value.type === "number") { print("SELECTED"); }%>>number</option>
|
|
<option <% if (value === "long" || value.type === "long") { print("SELECTED"); }%>>long</option>
|
|
<option <% if (value === "email" || value.type === "email") { print("SELECTED"); }%>>email</option>
|
|
<option <% if (value === "password" || value.type === "password") { print("SELECTED"); }%>>password</option>
|
|
<option <% if (value === "function" || value.type === "function") { print("SELECTED"); }%>>function</option>
|
|
</select>
|
|
<label for="unique<%= key %>" style="display:inline-block; padding: 0 10px;" />
|
|
<input type="checkbox" class='unique-checkbox' id="unique<%= key%>" <% if (value.unique) { print("checked"); } %> /> unique
|
|
<label for="required-<%= key %>" style="display:inline-block; padding: 0 10px;" />
|
|
<input type="checkbox" class='required-checkbox' id="required-<%= key %>" <% if (value.required) { print("checked"); } %> /> required
|
|
<a class="delete-property" style="float: right; margin-top: 7px; cursor: pointer;">Remove</a>
|
|
</fieldset>
|
|
<%});%>
|
|
|
|
</form>
|
|
<a class="nice small radius white button add-new-property">+ Add New Property</a><br /><br />
|
|
<h4>Group Permissions</h4>
|
|
<p>Set who can do what to this model.</p>
|
|
<form class="allowed nice custom">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Group</th>
|
|
<th>Create</th>
|
|
<th>Read</th>
|
|
<th>Update</th>
|
|
<th>Delete</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
<% _.each(groups.results, function (val, key, obj) { %>
|
|
<tr>
|
|
<td><strong><%= val.name %></strong></td>
|
|
<td align="center"><input type="radio" name="create" value="<%= val.name %>" <% if(allowed.create === val.name) print('checked'); %> /></td>
|
|
<td align="center"><input type="radio" name="read" value="<%= val.name %>" <% if(allowed.read === val.name) print('checked'); %> /></td>
|
|
<td align="center"><input type="radio" name="write" value="<%= val.name %>" <% if(allowed.write === val.name) print('checked'); %> /></td>
|
|
<td align="center"><input type="radio" name="remove" value="<%= val.name %>" <% if(allowed.remove === val.name) print('checked'); %> /></td>
|
|
</tr>
|
|
<% }); %>
|
|
</tbody>
|
|
</table>
|
|
</form>
|
|
<div class="alert-box" style="display:none"></div>
|
|
<a class="nice medium radius blue button save-changes">Save All Schema Changes</a>
|
|
</div>
|
|
</div>
|
|
</script>
|
|
<script id="breadcrumb-template" type="html/template">
|
|
//TODO: Wire up this template
|
|
<div class="twelve columns">
|
|
<h4>
|
|
<a href="" id="app-name">My App</a>
|
|
>
|
|
<a href="" id="current-page">Users</a>
|
|
</h4>
|
|
<hr />
|
|
</div>
|
|
</script>
|
|
<script id="search-template" type="html/template">
|
|
//TODO: Wire up this template
|
|
<form class="nice">
|
|
<input class="large input-text search" type="text" placeholder="Search" />
|
|
</form>
|
|
</script>
|
|
<script id="tabs-nav-template" type="html/template">
|
|
//Expects model: {baseHref: "/dashboard/#/plugins/graph?section=", navItems: [{name: "linkone", active: true}, {name: "linktwo"}]}
|
|
<dl class="tabs">
|
|
<% _.each(navItems, function (val, key, list) {
|
|
%> <dd><a href="<%= baseHref %><%= val.name %>" <% if (val.active) { %> class="active" <% } %>><%= val.name %></a></dd> <%
|
|
});%>
|
|
</dl>
|
|
</script>
|
|
<script id="pagination-template" type="html/template">
|
|
//Untested template
|
|
//Implement with model like so: {numPages: Int, currPage: Int, pageUrl: "/dashboard/#/plugins/id/context?page="}
|
|
<ul class="pagination">
|
|
<%
|
|
var i = 1;
|
|
if (currPage == 1) {
|
|
%> <li class="unavailable">«</li> <%
|
|
}
|
|
else {
|
|
%> <li><a href="<%= pageUrl %>1">«</a></li> <%
|
|
}
|
|
_(numPages).times(function () {
|
|
//TODO: Add an elipsis if it's beyond a certain number of pages
|
|
if (i === currPage) {
|
|
%> <li class="current"><%= i %></li> <%
|
|
}
|
|
else {
|
|
%> <li><a href="<%= pageUrl %><%= i %>"><%= i %></a></li> <%
|
|
}
|
|
});
|
|
if (numPages == currPage) { %>
|
|
<li class="unavailable">»</li>
|
|
<% }
|
|
else { %>
|
|
<li><a href="<%= pageUrl %><%= numPages %>">»</a></li>
|
|
<% }
|
|
</ul>
|
|
|
|
</script>
|
|
<script id="nav-item-template" type="html/template">
|
|
<% _.each(plugins, function (value, key, list) { %>
|
|
<a href="/dashboard/#/plugins/<%= key %>"> <%= key %> </a>
|
|
<%}); %>
|
|
</script>
|
|
|
|
|
|
<script id="app-detail-template" type="html/template">
|
|
<div>App Name: <%= name %></div>
|
|
</script>
|
|
|
|
<script id="app-nav-template" type="html/template">
|
|
<ul>
|
|
<% _.each(plugins.models, function (plugin) { %>
|
|
<li><a href="#/plugins/<%= plugin.attributes.name %>"><%= plugin.attributes.name %></a></li>
|
|
<% }); %>
|
|
</ul>
|
|
</script>
|
|
<script id="model-detail-template" type="html/template">
|
|
<div><%= name %></div>
|
|
</script>
|
|
<script id="plugin-form-template" type="html/template">
|
|
|
|
<form action="<%= action %>" method="<%= method %>" onsubmit="return false;">
|
|
<% _.each(fields, function (form_field) { %>
|
|
<div class="form-row">
|
|
<label for="<%= form_field.name %>"><%= form_field.label %></label>
|
|
<input name="<%= form_field.name %>" type="<%= form_field.type %>" <% if (form_field.required) { %> required="true" <%; } %> />
|
|
</div>
|
|
<% }); %>
|
|
<input type="submit" value="Submit" />
|
|
</form>
|
|
|
|
</script>
|
|
<script id="plugin-datalist-template" type="html/template">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<% _.each(dataItems[0].attributes, function (value, key, list) {
|
|
%> <th><%= key %></th> <%
|
|
});%>
|
|
|
|
</tr>
|
|
</thead>
|
|
<% _.each(dataItems, function (dataItem) { %>
|
|
<tr>
|
|
<% _.each(dataItem.attributes, function(value, key, list){
|
|
%><td><%= value %></td><%
|
|
});%>
|
|
|
|
|
|
</tr>
|
|
<% });%>
|
|
</table>
|
|
|
|
</script>
|
|
<script id="plugin-model-template" type="html/template">
|
|
<h2>Model Permissions</h2>
|
|
<p>Set what permissions different groups will have on instances of this model.</p>
|
|
<table class="role-permissions-grid">
|
|
<thead>
|
|
<th width="20%"><em>Group</em></th>
|
|
<th width="20%">Create</th>
|
|
<th width="20%">Read</th>
|
|
<th width="20%">Update</th>
|
|
<th width="20%">Delete</th>
|
|
</thead>
|
|
<tbody>
|
|
<% _.each(groupPermissions, function (group) { %>
|
|
<tr>
|
|
<td><%= group.groupName %></td>
|
|
<td><input name="group[<%= group.groupID %>]" type="checkbox" value="create" <% if (group.create === true) {%> checked <%}%> /></td>
|
|
<td><input name="group[<%= group.groupID %>]" type="checkbox" value="read" <% if (group.read === true) {%> checked <%}%> /></td>
|
|
<td><input name="group[<%= group.groupID %>]" type="checkbox" value="update" <% if (group.update === true) {%> checked <%}%> /></td>
|
|
<td><input name="group[<%= group.groupID %>]" type="checkbox" value="del" <% if (group.del === true) {%> checked <%}%> /></td>
|
|
</tr>
|
|
<% }); %>
|
|
</tbody>
|
|
</table>
|
|
</script>
|
|
<script id="plugin-detail-template" type="html/template">
|
|
<header>
|
|
<h2>
|
|
<em><%= name %></em> Plugin
|
|
</h2>
|
|
<ul class="plugin-nav">
|
|
<li class="active"><a href="<%= url %>">Overview</a></li>
|
|
<% _.each(configurable_objects, function (navItem) { %>
|
|
<li class="<%
|
|
var className = 'context' + navItem.id;
|
|
while (className.indexOf(' ') > -1) {
|
|
className = className.replace(' ', '');
|
|
}
|
|
%><%= className %>"><a href="<%= url %>/<%= navItem.id %>"><%= navItem.name %></a></li>
|
|
<% }); %>
|
|
</ul>
|
|
</header>
|
|
|
|
<div class="substance"><%= overview_html %></div>
|
|
</script>
|
|
|
|
<script id="model-item-template" type="html/template">
|
|
<%= name %> Model
|
|
</script>
|
|
<script id="plugin-item-template" type="html/template">
|
|
<%= name %> Plugin
|
|
</script>
|
|
|
|
<!-- END PARTIAL TEMPLATES -->
|
|
|
|
<script src="js/libs/LAB.js"></script>
|
|
<script>
|
|
(function() {
|
|
var l = 'js/libs/', m = 'js/model/', v = 'js/view/', p = 'js/view/partial/';
|
|
// dependencies
|
|
$LAB
|
|
.setOptions({
|
|
AlwaysPreserveOrder: true,
|
|
CacheBust: true
|
|
})
|
|
.script(l + 'underscore-min.js')
|
|
.script(l + 'jquery-1.6.2.js')
|
|
.script('/deployd.js')
|
|
.wait()
|
|
.script(l + 'backbone.js')
|
|
.script(l + 'json.min.js')
|
|
.script(l + 'jquery.cookie.js')
|
|
.script(l + 'foundation.js')
|
|
// model
|
|
.script(m + 'app.js')
|
|
.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
|
|
.script('js/router.js');
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|