Files
deployd/index.html
Ritchie Martori 88f68303fe updated dashboard
2012-04-21 13:03:06 -07:00

625 lines
24 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html>
<head>
<title>Deployd Dashboard</title>
<link rel='stylesheet' type="text/css" href='stylesheets/style.css' />
<link href='http://fonts.googleapis.com/css?family=Bitter:400,700,400italic' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header" class="subnav clearfix"></div>
<div id="body"></div>
<div class="modal" id="authModal" style="display: none">
<div class="modal-header">
<h3>Deployd Dashboard</h3>
</div>
<div class="modal-body">
<p>Authenticate with your deployd app:</p>
<form>
<label>Authentication key: <textarea name="key"></textarea></label>
</form>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-primary save">Authenticate</a>
</div>
</div>
<script type="x-ejs-template" id="header-template" >
<div class="full-width-container">
<ul class="nav nav-pills pull-left">
<li <%= (typeof resourceName === 'undefined' || !resourceName) ? 'class="active"' : '' %>><a href="#">Resources</a></li>
<li><a href="<%- appUrl %>" target="_blank"><%- appUrl %></a></li>
<% if (typeof resourceName !== 'undefined' && resourceName) { %>
<li class="active">
<a href="#<%= resourceId %>" class="resourceName"><%= resourceName %></a>
</li>
<% } %>
<li><a href="<%= documentation %>" target="_blank">
<% if (resourceType) { %>
<%= resourceType %> Resource
<% } else { %>
Documentation
<% } %>
</a></li>
</ul>
<div class="pull-right">
<span id="save-status"></span>
<button id="undo-btn" class="btn btn-warning"><i class="icon-exclamation-sign icon-white"></i> Undo <span class="action-label"></span></button>
</div>
</div>
</script>
<script type="x-ejs-template" id="resources-template" >
<div id="resource-editor">
<div class="container">
<div class="header-offset well">
<div class="clearfix">
<h3 class="pull-left">Resources</h3>
<div class="btn-group pull-right">
<a class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="#">
<i class="icon-white icon-plus"></i> Add New Resource
<span class="caret"></span>
</a>
<ul id="property-types" class="dropdown-menu">
</ul>
</div>
</div>
<ul id="resource-list" class="component-list" style="display: none;">
</ul>
<div id="resource-list-empty" class="component-list-empty" style="display: none;">
<div class="alert alert-info">
<p>This app is empty. Add a resource to get started.<p>
<p>If you're new to Deployd, check out our tutorial to quickly build your first app.</p>
<a href="http://www.deployd.com/tutorial/step1" target="_blank" class="btn btn-primary">Go to Tutorial</a>
</div>
</div>
</div>
</div>
</div>
</script>
<script type="x-ejs-template" id="collection-template" >
<div id="model-editor">
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">&nbsp;</div>
<div class="fixed2">
<div class="well sidebar-nav">
<ul id="page-nav" class="nav nav-pills nav-stacked">
<li class="active"><a href="#properties" data-toggle="tab">Properties</a></li>
<li><a href="#data" data-toggle="tab">Data</a></li>
<li><a href="#api" data-toggle="tab">API</a></li>
<li><a href="#events" data-toggle="tab">Events</a></li>
</ul>
</div>
</div>
<div class="span10">
<div class="tab-content">
<div id="properties" class="tab-pane active">
<div class="panel well stacked">
<h3>
Properties
</h3>
<div id="property-list">
</div>
</div>
<div id="property-now-what" class="alert alert-info hide">
When you're done adding properties, you should <a href="#data" class="cta-link">add some data</a> to this collection.
</div>
</div>
<div id="data" class="tab-pane">
<div class="well stacked">
<h3>Data</h3>
<div id="current-data">
<div class="table-container">
<table class="table table-bordered table-striped">
</table>
</div>
<input id="current-data-querystring" type="text" placeholder="Query string" />
</div>
</div>
</div>
<div id="api" class="tab-pane well stacked">
</div>
<div id="events" class="tab-pane">
<div class="row-fluid">
<div class="span9">
<div id="events-panel" class="well stacked">
</div>
</div>
<div class="span3">
<div id="property-reference" class="well">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</script>
<script type="x-ejs-template" id="static-template" >
<div id="resource-editor">
<div class="container">
<div class="header-offset well">
<div class="clearfix">
<h3 class="pull-left">Files</h3>
<div id="file-upload" class="pull-right">
<a href="#sync-info-modal" data-toggle="modal" class="btn"><i class="icon-resize-vertical"></i> Setup Local Sync</a>
<a href="#" class="new-file-btn btn btn-success"><i class="icon-plus icon-white"></i> New File</a>
<span class="btn btn-success fileinput-button">
<i class="icon-upload icon-white"></i>
<span>Quick Upload Files</span>
<input type="file" multiple="multiple" />
</span>
</div>
</div>
<div id="files-empty" class="hide alert alert-info">
This resource does not have any files.
</div>
<table id="files" class="table table-bordered table-striped">
<thead>
<th>Filename</th>
</thead>
<tbody></tbody>
</table>
<div id="currentUploads">
</div>
</div>
</div>
</div>
</div>
<div id="sync-info-modal" class="hide modal" style="margin-top: -280px">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Setup Local Sync</h3>
</div>
<div class="modal-body">
<p>To download your app's files, first install the <code>dpd</code> command line utility. <em>It requires <a href="http://nodejs.org/#download">Node.js</a>.</em></p>
<p>Run the following commands from the command line to install the utility and setup your app.</p>
<pre><code>npm install deployd -g</code></pre>
<p>In the directory where you want to keep your app files, run the following command.
It will grant local access to your app and tell <code>dpd</code> to store the files in that directory.</p>
<pre><code>dpd init http://<%= window.location.host %> '<%= $.cookie('DPDAuthKey') %>'</code></pre>
<p id="scroll_to_here" >Now you can push and pull the entire contents of the directory with the following commands.</p>
<pre><code>dpd push</code></pre>
<p>Running <code>dpd push</code> will upload the contents of your current directory to your app.</p>
<pre><code>dpd pull</code></pre>
<p>Running <code>dpd pull</code> will download all of your app's files into the current directory.</p>
</div>
<div class="modal-footer">
</div>
</div>
</script>
<script type="x-ejs-template" id="file-template" >
<tr class="component-item">
<td>
<i class="icon-file"></i>
<a href="<%= path %>" target="_blank"><%= filename %></a>
</td>
<td>
<a class="edit" href="#edit<%= path %>" filename="<%= filename %>"><i class="icon-edit"></i></a>
<a class="delete" href="#" filename="<%= filename %>"><i class="icon-remove"></i></a>
</td>
</tr>
</script>
<script type="x-ejs-template" id="file-editor-template" >
<div class="container">
<div class="well">
<div id="file-nav" class="clearfix">
<button class="pull-left btn back">Back</button>
<div class="pull-left" id="file-status"></div>
<button id="save-btn" class="pull-right btn btn-success">Save</button>
</div>
<div class="editor-container">
<div id="editor"></div>
</div>
</div>
</div>
</script>
<script type="x-ejs-template" id="resource-types-template" >
<% types.each(function(typeModel) { var type = typeModel.toJSON() %>
<li class="type-icons" data-cid="<%- typeModel.cid %>" rel="popover" data-content="<%= type.tooltip %>" data-original-title="<%- type.tooltipTitle %>">
<a href="#">
<i class="<%= type.label.toLowerCase().replace(' ', '-') %> icon-hack"></i>
<%- type.label %>
</a>
</li>
<% }); %>
</script>
<script type="x-ejs-template" id="resource-template" >
<div class="component-item-header">
<i title="<%= resource.typeLabel %>" class="icon-white <%= resource.typeLabel.toLowerCase().replace(' ', '-') %>"></i>
<% if (resource.c_active) { %>
<input type="text" class="code" name="path" value="<%- resource.path %>" />
<a href="#" class="btn btn-primary save-btn">save</a>
<a href="#" class="btn cancel-btn">cancel</a>
<% } else { %>
<span class="code path"><%- resource.path %></span>
<% } %>
<div class="pull-right">
<i class="icon-white icon-remove delete-btn"></i>
</div>
<div class="tags pull-right">
<!-- <span class="label label-info type"><%- resource.typeLabel %></span> -->
</div>
</div>
</script>
<script type="x-ejs-template" id="collection-routes-template" >
<h3>API</h3>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Task</th>
<th>Method</th>
<th>Route</th>
<th>Accepts</th>
<th>Returns</th>
</tr>
<tbody>
<tr>
<td><a href="http://deployd.github.com/deployd/#Listing-data" target="_blank">Listing data</a></td>
<td>GET</td>
<td><a href="<%- path %>" target="_blank"><%- path %></a></td>
<td><em>Nothing</em></td>
<td>An array of objects</td>
</tr>
<tr>
<td><a href="http://deployd.github.com/deployd/#Saving-data" target="_blank">Creating an object</a></td>
<td>POST</td>
<td><%- path %></td>
<td>A single object</td>
<td>The saved object (or errors)</td>
</tr>
<tr>
<td><a href="http://deployd.github.com/deployd/#Retrieving-a-specific-object" target="_blank">Getting an object</a></td>
<td>GET</td>
<td><%- path %>/&lt;_id&gt;</td>
<td><em>Nothing</em></td>
<td>A single object</td>
</tr>
<tr>
<td><a href="http://deployd.github.com/deployd/#Updating-an-object" target="_blank">Updating an object</a></td>
<td>PUT</td>
<td><%- path %>/&lt;_id&gt;</td>
<td>A single object</td>
<td>The saved object (or errors)</td>
</tr>
<tr>
<td><a href="http://deployd.github.com/deployd/#Deleting-an-object" target="_blank">Deleting an object</a></td>
<td>DELETE</td>
<td><%- path %>/&lt;_id&gt;</td>
<td>A single object</td>
<td><em>Nothing</em></td>
</tr>
<% if (type === 'UserCollection') { %>
<tr>
<td><a href="http://deployd.github.com/deployd/#Authenticating-a-user" target="_blank">Logging in</a></td>
<td>POST</td>
<td><%- path %>/login</td>
<td><code>email</code> and <code>password</code> of user</td>
<td>The user, plus session cookie (or error)</td>
</tr>
<tr>
<td><a href="http://deployd.github.com/deployd/#Logging-out" target="_blank">Logging out</a></td>
<td>POST</td>
<td><%- path %>/logout</td>
<td><em>Nothing</em></td>
<td><em>Nothing</em></td>
</tr>
<tr>
<td><a href="http://deployd.github.com/deployd/#Current-user" target="_blank">Getting the current user</a></td>
<td>GET</td>
<td><a href="<%- path %>/me" target="_blank"><%- path %>/me</a></td>
<td><em>Nothing</em></td>
<td>A single object</td>
</tr>
<% } %>
</tbody>
</thead>
</table>
</script>
<script type="x-ejs-template" id="property-list-template" >
<ul class="component-list">
<li class="component-item locked"><div class="component-item-header">
<i class="icon-white string" data-bind="tooltip: {placement: 'left', title: 'string'}"></i>
<span class="code name">_id</span>
<div class="pull-right">
<i class="icon-white icon-lock" title="Locked"></i>
</div>
</div></li>
<% if (typeof resourceTypeId !== 'undefined' && resourceTypeId === 'UserCollection') { %>
<li class="component-item locked"><div class="component-item-header">
<i class="icon-white string" data-bind="tooltip: {placement: 'left', title: 'string'}"></i>
<span class="code name">email</span>
<div class="pull-right">
<i class="icon-white icon-lock" title="Locked"></i>
</div>
</div></li>
<li class="component-item"><div class="component-item-header">
<i class="icon-white string" data-bind="tooltip: {placement: 'left', title: 'string'}"></i>
<span class="code name">password</span>
<div class="pull-right">
<i class="icon-white icon-lock" title="Locked"></i>
</div>
</div></li>
<% } %>
<!-- ko foreach: properties -->
<li class="component-item" data-bind="css: {active: editing}"><div class="component-item-header clearfix" data-bind="click: onClickHeader">
<div data-bind="template: 'property-single-template', visible: editing"></div>
<div data-bind="visible: !editing()">
<i class="icon-white" data-bind="tooltip: {placement: 'left', title: typeLabel}, cssNamed: type"></i>
<span class="code name" data-bind="text: name, click: toggleEditing"></span>
<div class="pull-right">
<span class="label" data-bind="visible: optional">Optional</span>
<a href="#" data-bind="click: $root.removeProperty"><i class="icon-white icon-remove"></i></a>
</div>
</div>
</div></li>
<!-- /ko -->
<div class="placeholder component-item-header">
<div class="alert alert-info" data-bind="visible: !properties().length">Add properties to describe the data you want to store.</div>
<div data-bind="template: {name: 'property-single-template', data: newProperty}"></div>
</div>
</ul>
<script type="text/html" id="property-single-template">
<div class="btn-group pull-left type-selector">
<a class="btn dropdown-toggle" href="#" data-bind="tooltip: {placement: 'left', title: typeLabel()}" data-toggle="dropdown">
<i class="icon-hack" data-bind="cssNamed: type()"></i>
<span class="caret"></span>
</a>
<ul class="dropdown-menu" data-bind="foreach: $root.propertyTypes">
<li data-bind="css: {active: $parent.type() == _id()}, popover: {placement: 'right', title: label, content: tooltip}">
<a href="#" data-bind="click: $parent.setType">
<i class="icon-hack" data-bind="cssNamed: _id"></i>&nbsp;
<span data-bind="text:label"></span></a>
</li>
</ul>
</div>
<input type="text" data-bind="value: name, hasfocus: nameFocus, event: { keypress: onNameKeypress }" />
<div class="pull-right">
<label data-bind="if: type() !== 'boolean'" class="checkbox pull-left"><input type="checkbox" data-bind="checked: optional" />Optional</label>
<a href="#" class="delete-btn" data-bind="click: $root.removeProperty, visible: !isNew"><i class="icon-white icon-remove"></i></a>
<button class="btn btn-success" data-bind="click: $root.addProperty, visible: isNew"><i class="icon-white icon-plus"></i>&nbsp;add</button>
</div>
</script>
</script>
<script type="x-ejs-template" id="property-reference-template" >
<h3>Properties</h3>
<ul class="component-list">
<li class="component-item locked">
<div class="component-item-header">
<i class="icon-white string" title="string"></i>&nbsp;
<span class="code">_id</span>
</div>
</li>
<% if (model.get('type') == 'UserCollction') { %>
<li class="component-item locked">
<div class="component-item-header">
<i class="icon-white string" title="string"></i>&nbsp;
<span class="code">email</span>
</div>
</li>
<li class="component-item locked">
<div class="component-item-header">
<i class="icon-white string" title="string"></i>&nbsp;
<span class="code">password</span>
</div>
</li>
<% } %>
<% model.get('properties').forEach(function(propModel) { var prop = propModel.toJSON(); %>
<li class="component-item locked">
<div class="component-item-header">
<i class="icon-white <%- prop.type %>" title="<%- prop.typeLabel %>"></i>&nbsp;
<span class="code"><%- prop.name %></span>
</div>
</li>
<% }) %>
</ul>
</script>
<script type="x-ejs-template" id="property-template" >
<div class="header <%= property.c_active ? 'active' : '' %>">
<i class="<%- property.typeLabel %> icon-white"></i>
<% if (property.c_active) { %>
<input type="text" class="code" name="name" value="<%- property.name %>" />
<% } else { %>
<span class="code name"><%- property.name %></span>
<% } %>
<a href="#" class="pull-right delete-btn"><i class="icon-remove icon-white"></i></a>
<div class="tags pull-right">
<% if (property.optional) { %>
<span class="label optional">Optional</span>
<% } %>
</div>
</div>
<% if (property.c_active) { %>
<div class="detail form-inline">
<% if (property.type !== 'boolean') { %>
<label>Optional <input type="checkbox" name='optional' <%= property.optional ? 'checked="checked"' : '' %> /></label>
<% } %>
</div>
<% } %>
</script>
<script type="x-ejs-template" id="events-template" >
<h3 class="clearfix">
Events
<a class="pull-right header-link" target="_blank" href="http://deployd.github.com/deployd/#Collection-Event-Handlers">Documentation</a>
</h3>
<ul class="nav nav-tabs">
<li><a href="#get-panel" data-toggle='tab'>On GET</a></li>
<li class="active"><a href="#post-panel" data-toggle='tab'>On POST</a></li>
<li><a href="#put-panel" data-toggle='tab'>On PUT</a></li>
<li><a href="#delete-panel" data-toggle='tab'>On DELETE</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="get-panel">
<div class="editor-container">
<div id="onGet"><%= onGet %></div>
</div>
</div>
<div class="tab-pane active" id="post-panel">
<div class="editor-container">
<div id="onPost"><%= onPost %></div>
</div>
</div>
<div class="tab-pane" id="put-panel">
<div class="editor-container">
<div id="onPut"><%= onPut %></div>
</div>
</div>
<div class="tab-pane" id="delete-panel">
<div class="editor-container">
<div id="onDelete"><%= onDelete %></div>
</div>
</div>
</div>
</script>
<script type="x-ejs-template" id="model-table-template" >
<thead class="type-icons">
<tr>
<th class="code"><i class="icon-hack string" title="string"></i> _id</th>
<% if (resourceType == "UserCollection") { %>
<th class="code"><i class="icon-hack string" title="string"></i> email</th>
<th class="code"><i class="icon-hack string" title="string"></i> password</th>
<% } %>
<% _.each(properties, function(property) { %>
<th class="code"><i class="icon-hack <%- property.type %>" title=" <%- property.typeLabel %>"></i> <%- property.name %></th>
<% }); %>
<th></th>
</tr>
</thead>
<tbody>
<% collectionModel.each(function(rowModel) { if (!rowModel.get('c_delete')) { %>
<% var row = rowModel.toJSON(); %>
<tr data-cid="<%= rowModel.cid %>">
<td class='id'>
<%- row._id || '...' %>
</td>
<% if (resourceType == "UserCollection") { %>
<td data-prop="email">
<% if (row.c_errors && row.c_errors.email) { %>
<a class="error-tooltip" rel="tooltip" title="<%- row.c_errors.email %>">
<i class="icon-warning-sign"></i>
</a>
<% } %>
<% if (row.c_active) { %>
<input type="text" name="email" value="<%- row.email || '' %>" />
<% } else { %>
<%- row.email || '...' %>
<% } %>
</td>
<td data-prop="password">
<% if (row.c_errors && row.c_errors.password) { %>
<a class="error-tooltip" rel="tooltip" title="<%- row.c_errors.password %>">
<i class="icon-warning-sign"></i>
</a>
<% } %>
<% if (row.c_active) { %>
<input type="password" name="password" placeholder="*******" />
<% } else { %>
...
<% } %>
</td>
<% } %>
<% _.each(properties, function(property) { %>
<% var val = row[property.name]; %>
<% if (typeof val === 'undefined') { val = row[property.$renameFrom]; } %>
<td data-prop="<%- property.name %>">
<% if (row.c_errors && row.c_errors[property.name]) { %>
<a class="error-tooltip" rel="tooltip" title="<%- row.c_errors[property.name] %>">
<i class="icon-warning-sign"></i>
</a>
<% }
if (row.c_active) { %>
<% if (typeof val === 'undefined') { val = '' } %>
<% if (property.type == 'number') { %>
<input type="number" name="<%- property.name %>" value="<%- val %>" />
<% } else if (property.type == 'boolean') { %>
<input type="checkbox" name="<%- property.name %>" <% val ? 'checked="checked"' : ''%> />
<% } else if (property.type == 'date') { %>
<input type="datetime" name="<%- property.name %>" value="<%- val %>" />
<% } else { %>
<input type="text" name="<%- property.name %>" value="<%- val %>" />
<% } %>
<% } else { %>
<% if (typeof val === 'undefined') { val = '...' } %>
<%- val %>
<% } %>
</td>
<% }); %>
<td>
<% if (row.c_active) { %>
<a href="#" class="done-btn btn btn-primary"><i class="icon-ok-sign icon-white"></i> save</a>
<a href="#" class="cancel-btn btn">cancel</a>
<% } else { %>
<a href="#" class="edit-btn btn"><i class="icon-edit"></i> edit</a>
<a href="#" class="delete-btn btn"><i class="icon-remove-sign"></i> delete</a>
<% } %>
</td>
</tr>
<% }}); %>
</tbody>
<tfoot>
<tr>
<td colspan="<%= properties.length + (resourceType == "UserCollection" ? 4 : 2) %>">
<% if (!collectionModel.length) { %>
<div class="alert alert-info">This collection is empty. Add an object to start storing data.</div>
<% } %>
<button class="btn btn-success add-btn"><i class="icon-white icon-plus"></i> add</a>
</td>
</tr>
</tfoot>
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/lib/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/lib/jquery.plugins.js"></script>
<script type="text/javascript" src="js/lib/bootstrap.js"></script>
<script type="text/javascript" src="js/lib/underscore.js"></script>
<script type="text/javascript" src="js/lib/underscore.string.min.js"></script>
<script type="text/javascript" src="js/lib/backbone.js"></script>
<script type="text/javascript" src="js/lib/knockout-2.0.0.js"></script>
<script type="text/javascript" src="js/lib/knockout.mapping.js"></script>
<script type="text/javascript" src="js/lib/ace-noconflict.js"></script>
<script type="text/javascript" src="js/lib/ace-mode-javascript-noconflict.js"></script>
<script type="text/javascript" src="js/lib/ace-mode-css-noconflict.js"></script>
<script type="text/javascript" src="js/lib/ace-mode-html-noconflict.js"></script>
<script src="js/lib/require.js" data-main="js/app/entry.js"></script>
</body>
</html>