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

dashboard updates

Browse Source
This commit is contained in:
Ritchie Martori
2012-04-24 20:49:13 -07:00
parent f0f02a7d61
commit 962fca1033
3 changed files with 118 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
dashboard/index.html
View File

@@ -30,9 +30,13 @@
<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>
<ul class="nav nav-pills pull-left" style="margin-left: 19px;">
<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>
@@ -55,14 +59,16 @@
</script>
<script type="x-ejs-template" id="resources-template" >
<div id="resource-editor">
<div id="resource-editor" class="resource-list">
<div class="container">
<div class="header-offset well">
<div class="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="#">
<a class="btn btn-success" data-toggle="dropdown" href="#">
<i class="icon-white icon-plus"></i> Add New Resource
</a>
<a class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="#">
<span class="caret"></span>
</a>
<ul id="property-types" class="dropdown-menu">
@@ -72,10 +78,26 @@
<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 class="alert alert-info" style="text-align: center;"><strong>This app is empty.</strong> Add a resource to get started.</div>
<div class="get-started">
<p>
<strong><i class="icon-th-large icon-white"></i> Resources</strong> - Give your JavaScript direct access to a powerful database, user management and more by adding resources.
</p>
<p>
<strong><i class="icon-folder-close icon-white"></i> Files</strong> - Add a <i>files resource</i> to upload and serve your html, css, JavaScript, and other assets.
</p>
<p>
<strong><i class="icon-th-list icon-white"></i> Collection</strong> - Add a <i>collection resource</i> to save and query data over a simple http api.
</p>
<p>
<strong><i class="icon-user icon-white"></i> Users Collection</strong> - Add a <i>users collection</i> resource to create and authenticate users over http.
</p>
</div>
<div class="tutorial-help">
<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"><i class="icon-question-sign icon-white"></i> Go to Tutorial</a>
</div>
</div>
</div>
</div>
@@ -142,9 +164,9 @@
</script>
<script type="x-ejs-template" id="static-template" >
<div id="resource-editor">
<div id="resource-editor" class="file-list">
<div class="container">
<div class="header-offset well">
<div class="well">
<div class="clearfix">
<h3 class="pull-left">Files</h3>
<div id="file-upload" class="pull-right">
@@ -158,8 +180,19 @@
</span>
</div>
</div>
<div id="files-empty" class="hide alert alert-info">
This resource does not have any files.
<div id="files-empty" class="hide">
<div class="alert alert-info"><strong>This folder is empty.</strong> Create or upload some files to get started.</div>
<div class="get-started" style="margin-bottom: 0;">
<p>
<strong><i class="icon-upload icon-white"></i> Uploading</strong> - There are a couple of ways to upload files. The easiest way is to use the "Quick Upload Files" button.
</p>
<p>
<strong><i class="icon-pencil icon-white"></i> Editing</strong> - Once you have uploaded files, you can click on a filename to edit with deployd's built in text editor.
</p>
<p>
<strong><i class="icon-download-alt icon-white"></i> Working Locally</strong> - Setup the <a href="#sync-info-modal" data-toggle="modal">deployd command line tool</a> to easily sync your local files with deployd.
</p>
</div>
</div>
<table id="files" class="table table-bordered table-striped">
<thead>
@@ -180,7 +213,7 @@
<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>To sync your app's files with your local filesystem, 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>
@@ -212,25 +245,24 @@
<i class="icon-file"></i>
<a href="#edit<%= path %>"><%= filename %></a>
</td>
<td>
<a class="view" href="<%= path %>" target="_blank"><i class="icon-eye-open"></i></a>
<a class="delete" href="#" filename="<%= filename %>"><i class="icon-remove"></i></a>
<td style="width: 149px;">
<a class="view btn" href="<%= path %>" target="_blank"><i class="icon-eye-open"></i> View</a>
<a class="delete btn" href="#" filename="<%= filename %>"><i class="icon-remove"></i> Delete</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 class="well" style="margin: 20px;">
<div id="file-nav" class="clearfix">
<button class="pull-left btn back"><i class="icon-folder-open"></i> 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>
</script>
<script type="x-ejs-template" id="resource-types-template" >
@@ -247,15 +279,15 @@
<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>
<input style="margin-left: 3px; width: 225px;" type="text" class="code" name="path" value="<%- resource.path %>" />
<a style="margin-right: 3px;" 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="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>
@@ -264,70 +296,72 @@
<script type="x-ejs-template" id="collection-routes-template" >
<h3>API</h3>
<div class="alert alert-info" style="width: 456px; padding-right: 15px;">Use these routes in your app to save and load data from this Collection.</div>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Task</th>
<th>Method</th>
<th>Route</th>
<th>Task</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><a href="http://deployd.github.com/deployd/#Listing-data" target="_blank">Listing data</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 href="http://deployd.github.com/deployd/#Saving-data" target="_blank">Creating an object</a></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><a href="http://deployd.github.com/deployd/#Retrieving-a-specific-object" target="_blank">Getting an object</a></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 href="http://deployd.github.com/deployd/#Updating-an-object" target="_blank">Updating an object</a></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 href="http://deployd.github.com/deployd/#Deleting-an-object" target="_blank">Deleting an object</a></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><a href="http://deployd.github.com/deployd/#Authenticating-a-user" target="_blank">Logging in</a></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><a href="http://deployd.github.com/deployd/#Logging-out" target="_blank">Logging out</a></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><a href="http://deployd.github.com/deployd/#Current-user" target="_blank">Getting the current user</a></td>
<td><em>Nothing</em></td>
<td>A single object</td>
</tr>
@@ -335,7 +369,6 @@
</tbody>
</thead>
</table>
<div class="alert alert-info">Use these routes in your app code to save and load data from this Collection.</div>
</script>
<script type="x-ejs-template" id="collection-data-template" >
<h3>Data</h3>
@@ -377,7 +410,7 @@
<tfoot>
<tr data-bind="visible: !collection().length">
<td data-bind="attr: {colspan: properties().length + 2}">
<div class="alert alert-info">This collection is empty. Add an object to start storing data.</div>
<div class="alert alert-info" style="margin: 40px auto; width: 120px;">This collection is empty.</div>
</td>
</tr>
@@ -389,7 +422,7 @@
</td>
<!-- /ko -->
<td>
<a href="#" class="btn btn-success" data-bind="click: $root.saveRow"><i class="icon-white icon-plus"></i> add</a>
<a href="#" class="btn btn-success" data-bind="click: $root.saveRow"><i class="icon-white icon-plus"></i> Add</a>
</td>
</tr>
</tfoot>
@@ -409,6 +442,7 @@
</script>
<script type="x-ejs-template" id="property-list-template" >
<% isUsers = typeof resourceTypeId !== 'undefined' && resourceTypeId === 'UserCollection'; %>
<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>
@@ -417,7 +451,7 @@
<i class="icon-white icon-lock" title="Locked"></i>
</div>
</div></li>
<% if (typeof resourceTypeId !== 'undefined' && resourceTypeId === 'UserCollection') { %>
<% if(isUsers) { %>
<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>
@@ -439,15 +473,33 @@
<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>
<span class="label" data-bind="visible: optional">optional</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="visible: !properties().length">
<div class="get-started" style="margin-top: 0;">
<% if(isUsers) { %>
<p>
<strong><i class="icon-user icon-white"></i> Users</strong> - Add properties unique to the users you want to store in this collection. Users have email and password properties by default. These are required to login a user.
</p>
<% } else { %>
<p>
<strong><i class="icon-list icon-white"></i> Properties</strong> - Describe the JSON objects you want to store in your collection by adding properties and setting their type.
</p>
<% } %>
<p>
<strong><i class="icon-ban-circle icon-white"></i> Validation</strong> - By describing the data you expect in your collection you enable deployd to automatically validate new objects.
</p>
</div>
<div class="alert alert-info">
<strong>Get started</strong> by adding properties to describe the <strong><%= isUsers ? 'users' : 'data' %></strong> you want to store in this collection.
</div>
</div>
<div data-bind="template: {name: 'property-single-template', data: newProperty}"></div>
</div>
</ul>
@@ -466,12 +518,12 @@
</li>
</ul>
</div>
<input type="text" data-bind="value: name, hasfocus: nameFocus, event: { keypress: onNameKeypress }" />
<input type="text" placeholder="myPropertyName" data-bind="value: name, hasfocus: nameFocus, event: { keypress: onNameKeypress }" />
<button class="btn" data-bind="click: toggleEditing, clickBubble: false, visible: !isNew">done</button>
<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>
<button class="btn btn-success" data-bind="click: $root.addProperty, visible: isNew"><i class="icon-white icon-plus"></i>&nbsp;Add</button>
</div>
</script>

2
dashboard/js/app/entry.js
View File

File diff suppressed because one or more lines are too long

21
dashboard/stylesheets/style.css
View File

@@ -697,6 +697,7 @@ p a{text-decoration:underline;}
.well{margin-bottom:0;}
.well.stacked{margin-bottom:20px;}
.span10{overflow-x:auto;}
.resource-list .container{width:443px;}
.right-sidebar .well{position:absolute;top:0;width:195px;}
.right-sidebar .well input{width:185px;}
.right-sidebar .well+.well{margin-top:10px;top:165px;bottom:0;min-height:100px;}
@@ -718,7 +719,7 @@ p a{text-decoration:underline;}
.ide-container .component-type-sidebar .component-type-list li.component-type-item i.number{background-position:0 -96px;}
.ide-container .component-type-sidebar .component-type-list li.component-type-item i.date{background-position:-48px -24px;}
.ide-container .component-type-sidebar .component-type-list li.component-type-item i.password{background-position:-456px -96px;}
.ide-container .component-type-sidebar .component-type-list li.component-type-item i.files{background-position:-24px -24px;}
.ide-container .component-type-sidebar .component-type-list li.component-type-item i.files{background-position:-384px -120px;}
.ide-container .component-type-sidebar .component-type-list li.component-type-item i.collection{background-position:-264px 0;}
.ide-container .component-type-sidebar .component-type-list li.component-type-item i.users-collection{background-position:-168px 0;}
.ide-container .component-type-sidebar .component-type-list li.component-type-item i{margin-right:3px;cursor:pointer;}
@@ -728,7 +729,7 @@ p a{text-decoration:underline;}
.type-icons i.number{background-position:0 -96px;}
.type-icons i.date{background-position:-48px -24px;}
.type-icons i.password{background-position:-456px -96px;}
.type-icons i.files{background-position:-24px -24px;}
.type-icons i.files{background-position:-384px -120px;}
.type-icons i.collection{background-position:-264px 0;}
.type-icons i.users-collection{background-position:-168px 0;}
li.component-type-item{list-style:none;padding:10px;height:19px;width:180px;color:#fffff7;background:#363535;margin-bottom:4px;border-radius:3px;cursor:pointer;}
@@ -751,20 +752,20 @@ li.component-type-item{list-style:none;padding:10px;height:19px;width:180px;colo
.component-item-header i.number{background-position:0 -96px;}
.component-item-header i.date{background-position:-48px -24px;}
.component-item-header i.password{background-position:-456px -96px;}
.component-item-header i.files{background-position:-24px -24px;}
.component-item-header i.files{background-position:-384px -120px;}
.component-item-header i.collection{background-position:-264px 0;}
.component-item-header i.users-collection{background-position:-168px 0;}
.component-item-header .delete-btn{cursor:pointer;}
.component-item-header input,.component-item-header select,.component-item-header label{margin-bottom:0;margin-right:4px;}
.component-item-header .checkbox{margin-top:6px;}
li.component-item{list-style:none;margin-bottom:4px;background:#363535;color:#fffff7;border-radius:3px;}li.component-item.active .component-item-header{background:#337a74;}li.component-item.active .component-item-header .checkbox{color:#ffffff;}
li.component-item.active .component-item-header .delete-btn i{margin-top:6px;}
li.component-item.active .component-item-header .delete-btn{margin-top:6px;}
li.component-item.unsaved{border:dashed 1px #fffff7;}
li.component-item .name,li.component-item .path{cursor:text;margin-left:6px;}
li.component-item:hover .name,li.component-item:hover .path{border:dashed 1px #363535;background:#fffff7;color:#363535;margin-left:0;padding:5px;}
li.component-item.locked:hover .name{border:none;margin-left:0;padding:5px;}
li.component-item.locked .component-item-header{background:#363535 !important;cursor:normal !important;}
li.component-item .component-item-header{border-radius:inherit;padding:10px;min-height:19px;cursor:pointer;}li.component-item .component-item-header:hover{background:#429e96;}
li.component-item .component-item-header{border-radius:inherit;padding:10px;min-height:19px;cursor:pointer;}li.component-item .component-item-header:hover{background:#696868;}
li.component-item .detail{-webkit-border-radius:0px 0px 3px 3px;-moz-border-radius:0px 0px 3px 3px;border-radius:0px 0px 3px 3px;padding:10px;color:#fffff7;}
li.component-item .detail label{color:#fffff7;}
li.component-item i.boolean{background-position:-72px -96px;}
@@ -772,7 +773,7 @@ li.component-item i.string{background-position:-144px -48px;}
li.component-item i.number{background-position:0 -96px;}
li.component-item i.date{background-position:-48px -24px;}
li.component-item i.password{background-position:-456px -96px;}
li.component-item i.files{background-position:-24px -24px;}
li.component-item i.files{background-position:-384px -120px;}
li.component-item i.collection{background-position:-264px 0;}
li.component-item i.users-collection{background-position:-168px 0;}
.editor-container{position:relative;height:400px;width:100%;background:#ffffff;}.editor-container .ace_editor{left:0;right:0;top:0;bottom:0;}
@@ -785,4 +786,12 @@ table input{margin:0;width:150px;}table input[type=number]{width:75px;}
.fixed2{position:fixed;width:16%;}
#file-status{margin-left:10px;margin-top:6px;}
#file-nav{margin-bottom:20px;}
.file-list .container{width:507px;}.file-list .container table{margin-bottom:0;}.file-list .container table td{vertical-align:middle;}
.cta-link{text-decoration:underline;}
.get-started{min-height:20px;padding:19px;margin-bottom:20px;background-color:#fffff7;border:1px solid #eee;border:1px solid rgba(0, 0, 0, 0.05);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 20px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 20px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 20px rgba(0, 0, 0, 0.05);margin-bottom:0;background:#363535;color:#fffff7;margin:20px 0;padding:19px 19px 9px 19px;}.get-started blockquote{border-color:#555557;border-color:rgba(0, 0, 0, 0.15);}
.tutorial-help{text-align:center;width:250px;margin:auto;}
#properties{width:485px;margin:auto;}#properties label{margin-right:12px;}
#properties .label{margin-left:10px;}
#properties input[type=text]{width:201px;margin-left:5px;}
.sidebar-nav{margin-right:20px;height:133px;}
#property-now-what{display:block;width:242px;padding-right:14px;margin:20px auto;}