Added Deploy button

lib/client/deploy.js

@@ -116,7 +116,6 @@ Deployment.prototype.publish = function (url, tar, key, callback) {
       }
     }, function (err, res, body) {
       if(err) {
-        console.log("error from post", err);
         return callback(err);
       }
 
@@ -200,7 +199,6 @@ Deployment.prototype.authenticate = function (credentials, fn) {
     var user = deployment.getConfig('user');
     deployment.sid = sid;
     deployment.user = user;
-    console.log(sid, user);
     if(sid) {
       fn(true);
     } else {
@@ -213,7 +211,6 @@ Deployment.prototype.getOnlineDeployments = function(fn) {
   var deployment = this;
 
   var sid = deployment.getConfig('sid');
-  console.log('sid', sid);
   request.cookie('sid=' + sid);
 
   var meIdQ = q.fcall(function() {
@@ -229,7 +226,6 @@ Deployment.prototype.getOnlineDeployments = function(fn) {
 
       jar: false
     }, function(err, res, user) {
-      console.log("GET /online", err, user, res.statusCode);
       if (err) return d.reject(err);
       if (!user) return d.reject(new Error("Not logged in"));
       d.resolve(user.id);

lib/resources/dashboard/deployments.html

@@ -6,12 +6,10 @@
     </h3>
 
     <div id="deployments-empty" class="hide">
-      <div class="well">
-        <p>A <strong>Deployment</strong> is an instance of your app hosted on <a href="http://deploydapp.com">deploydapp.com</a>.</p>
-      </div>
-      <div class="alert alert-info">
-        You do not have any deployments. Add one now:
-      </div>
+      <p>
+        A <strong>Deployment</strong> is an instance of your app hosted on <a href="http://deploydapp.com">deploydapp.com</a>.
+      </p>
+      <hr />
     </div>
 
     <div id="deployment-list-container">
@@ -68,7 +66,7 @@
       </div>
       <div class="span2 register-column">
         <p>Or create a free account if you haven't already.</p>
-        <a href="http://deploydapp.com" class="btn">Register</a>
+        <a href="http://deploydapp.com" target="_blank" class="btn">Register</a>
       </div>
     </div>
     

lib/resources/dashboard/index.ejs

@@ -22,14 +22,19 @@
         <{= context.appName }>
       </h1>
       <div class="seperator">&nbsp;</div>
+      <div class="btn-group dropdown" id="deploy-btn-group">
+        <a href="#" class="btn dropdown-toggle" id="deploy-btn"><i class="icon-upload"></i> Deploy <span class="caret hide"></span></a>
+        <ul class="dropdown-menu" role="menu" aria-labelledby="deploy-btn">
+          <!-- <li><a href="#">Push to <strong>myapp-production</strong></a></li> -->
+          <!-- <li><a href="#">Push to <strong>myapp-staging</strong></a></li> -->
+          <li class="divider"></li>
+          <li><a href="/dashboard/deployments">Add new deployment...</a></li>
+        </ul>
+      </div>
       <div class="btn-group" id="open-btn-group">
-        <a class="btn" href="#" id="open-btn" target="_blank"><i class="icon-eye-open"></i> Open</a>
+        <a class="btn" href="#" id="open-btn" target="_blank"><i class="icon-eye-open"></i> Open </a>
         <!-- <button class="btn dropdown-toggle"><span class="caret"></span></button> -->
       </div>
-      <!-- <div class="btn-group" id="deploy-btn-group">
-        <button class="btn"><i class="icon-upload"></i> Deploy</button>
-        <button class="btn dropdown-toggle"><span class="caret"></span></button>
-      </div> -->
     </div>
     <div id="body-container">
       <div id="resource-sidebar-container"> 

lib/resources/dashboard/js/deployments.js

@@ -1,3 +1,5 @@
+/* globals refreshHeaderDeployments:true */
+
 (function() {
 
   var scope = {
@@ -15,6 +17,8 @@
     show: false
   });
 
+
+
   $('#deploy-new-form .deployment-name').attr('placeholder', Context.appName);
 
   loadDeployments();
@@ -93,6 +97,7 @@
         });
       }
 
+      refreshHeaderDeployments();
       renderDeployments();
 
     });
@@ -106,6 +111,7 @@
       scope.deployments.splice(index, 1);
 
       renderDeployments();
+      refreshHeaderDeployments();
     });
   }
 
@@ -167,6 +173,7 @@
     if (scope.isAuthenticated) {
       $modal.modal('hide');
       $('#deployments').show();
+      $('#deploy-new-form .deployment-name').focus();
     } else {
       $modal.modal('show');
       $('#deployments').hide();

lib/resources/dashboard/js/header.js

@@ -6,4 +6,50 @@ $(document).ready(function() {
 
   $('#header #open-btn').attr('href', 'http://' + window.location.host);
 
+  $('#deploy-btn-group').on('click', '.deployment', function(e) {
+    var subdomain = $(e.currentTarget).attr('data-deployment');
+    var dialog = new ui.Dialog({title: subdomain, message: "Deploying..."}).show();
+    $(dialog.el).addClass('deploying');
+    dpd('__deployments').post({
+      subdomain: subdomain
+    }, function(deployment, err) {
+      dialog.hide();
+      if (err) { 
+        dialog = new ui.Dialog({title: "Error deploying " + subdomain, message: err.message});
+      } else {
+        var url = deployment.name + "." + deployment.remote;
+        dialog = ui.dialog(subdomain, $('<span>Deployed to <a target="_blank" href="http://' + url + '">' + url + '</a>!</span>'));
+      }
+
+      dialog.show().closable()//.hide(2000);
+    });
+    e.preventDefault();
+  });
+
+  function refreshDeployments() {
+    dpd('__deployments').get(function(deployments) {
+      $('#deploy-btn-group .btn').attr('href', '#');
+      $('#deploy-btn-group ul .deployment').remove();
+      if (deployments && deployments.length) {
+        $('#deploy-btn-group .btn')
+          .find('.caret').removeClass('hide').end()
+          .dropdown();
+
+        deployments.forEach(function(d) {
+          var $item = $('<li class="deployment"><a href="#">Push to <strong>' + d.name + '</strong></a></li>');
+          $item.attr('data-deployment', d.name);
+          $item.insertBefore('#deploy-btn-group ul .divider');
+        });
+      } else {
+
+        $('#deploy-btn-group .btn').attr('href', '/dashboard/deployments')
+          .find('.caret').addClass('hide');
+      }
+    });
+  }
+  refreshDeployments();
+
+  window.refreshHeaderDeployments = refreshDeployments;
+  
+
 });

lib/resources/dashboard/stylesheets/deployments.less

@@ -11,6 +11,11 @@
   }
 }
 
+#dialog.deploying {
+  box-shadow: inset 0 0 10px 0px @linkColor;
+  .animation(deploying 0.5s infinite alternate);
+}
+
 #deployments {
   width: 585px;
   max-width: 585px;
@@ -21,9 +26,13 @@
     border-top-color: #555 
   }
 
-  .empty {
-    margin-top: 20px;
-    font-style: italic;
+  #deployments-empty {
+
+    .well {
+      padding: 20px;
+      color: #fff;
+    }
+
   }
 
   .component-item.deploying .component-item-header {

lib/resources/dashboard/stylesheets/style.css

@@ -4231,6 +4231,12 @@ body {
     box-shadow: inset 0 0 20px 0px #429e96;
   }
 }
+#dialog.deploying {
+  box-shadow: inset 0 0 10px 0px #429e96;
+  animation: deploying 0.5s infinite alternate;
+  -webkit-animation: deploying 0.5s infinite alternate;
+  -moz-animation: deploying 0.5s infinite alternate;
+}
 #deployments {
   width: 585px;
   max-width: 585px;
@@ -4240,9 +4246,9 @@ body {
   border-width: 1px;
   border-top-color: #555555;
 }
-#deployments .empty {
-  margin-top: 20px;
-  font-style: italic;
+#deployments #deployments-empty .well {
+  padding: 20px;
+  color: #fff;
 }
 #deployments .component-item.deploying .component-item-header {
   box-shadow: inset 0 0 10px 0px #429e96;
@@ -4535,12 +4541,13 @@ li.L9 {
   top: 150px;
   max-width: 600px;
   min-width: 250px;
-  border: 1px solid #eee;
-  background: white;
+  border: solid 1px rgba(0, 0, 0, 0.5);
   z-index: 1000;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
+  background: rgba(50, 50, 50, 0.97);
+  color: white;
 }
 #dialog .content {
   padding: 15px 20px;
@@ -4548,6 +4555,7 @@ li.L9 {
 #dialog h1 {
   margin: 0 0 5px 0;
   font-size: 20px;
+  color: white;
   padding-left: 0;
   padding-top: 0;
 }

lib/resources/dashboard/stylesheets/ui.less

@@ -4,10 +4,11 @@
   top: 150px;
   max-width: 600px;
   min-width: 250px;
-  border: 1px solid #eee;
-  background: white;
+  border: solid 1px rgba(0,0,0,.5);
   z-index: 1000;
   .border-radius(5px);
+  background: rgba(50, 50, 50, 0.97);
+  color: white;
 }
 
 #dialog .content {
@@ -17,6 +18,7 @@
 #dialog h1 {
   margin: 0 0 5px 0;
   font-size: 20px;
+  color: white;
   padding-left: 0;
   padding-top: 0;
 }