Feature: add command line to run app and environment variables settings

client/projects.controller.js

@@ -6,30 +6,54 @@ Template.projects.helpers({
 
 Template.projectForm.onRendered(function() {
    new Clipboard('.btn.clipboard');
+   Session.set('vars', []);
+   $('.variables input').val('');
 });
 
 Template.projectForm.events({
   'submit .new-project': function (event) {
       event.preventDefault();
-      var form = event.target;
+      var form = event.target,
+          variables = Session.get('vars'),
+          callback = function(errors, result) {
+            
+            if( errors ) {
+              
+            } else {
+              Session.set('projectToEdit', undefined);
+              Session.set('vars', []);
+              $('.new-project input').val('');
+              $('.new-project textarea').val('');
+            }
+          };
       if( form.id.value ) {
-        Meteor.call('editProject',form.id.value, form.label.value, form.git_url.value, form.public_url.value, form.commands.value);
-        form.id.value = '';
+        Meteor.call('editProject',
+            form.id.value, 
+            form.label.value, 
+            form.git_url.value, 
+            form.public_url.value, 
+            form.commands.value, 
+            form.run.value, 
+            variables,
+            callback);
       } else {
-        Meteor.call('addProject', form.label.value, form.git_url.value, form.public_url.value, form.commands.value);
+        Meteor.call('addProject', 
+            form.label.value, 
+            form.git_url.value, 
+            form.public_url.value, 
+            form.commands.value, 
+            form.run.value, 
+            variables,
+            callback);
       }
-      
-      Session.set('projectToEdit', undefined);
-      form.label.value = '';
-      form.git_url.value = '';
-      form.public_url.value = '';
-      form.commands.value = '';
   },
   
   'click .cancel': function(event) {
     event.preventDefault();
     
     Session.set('projectToEdit', undefined);
+    Session.set('vars', []);
+    $('.variables input').val('');
   },
   
   'click .trash': function(event) {
@@ -37,7 +61,9 @@ Template.projectForm.events({
     
     Meteor.call('deleteProject', Session.get('projectToEdit')._id);
     Session.set('projectToEdit', undefined);
+    Session.set('vars', []);
   }
+  
 });
 
 Template.projectForm.helpers({
@@ -51,6 +77,69 @@ Template.projectForm.helpers({
   
   deployLink: function() {
     return Meteor.absoluteUrl('deploy?token=XXXX&project_id=' + Session.get('projectToEdit')._id);
+  },
+  
+  vars: function() {
+    return Session.get('vars');
+  }
+});
+
+Template.variables.events({
+  'click .remove': function(event) {
+    event.preventDefault();
+    var variable = Template.currentData().name
+        vars = Session.get('vars');
+        
+    vars = _.filter(vars, function(object) {
+      return object.name !== variable;
+    });
+    
+    Session.set('vars', vars);
+  },
+  
+  'click .add': function(event) {
+    event.preventDefault();
+    var instance = Template.instance(),
+        name = instance.$('.name').val(),
+        value = instance.$('.value').val();
+        
+    var variables = Session.get('vars');
+    variables.push({name: name, value: value});
+    Session.set('vars', variables);
+    Session.set('variables.active', undefined);
+    instance.$('.name').val(undefined);
+    instance.$('.value').val(undefined);
+  }
+});
+
+Template.variables.helpers({
+  action: function() {
+    return Template.currentData() ? 'remove' : 'add';
+  },
+  
+  logo: function() {
+    return Template.currentData() ? 'minus' : 'plus';
+  },
+  
+  active: function() {
+    var data = Template.currentData(),  
+        active = data && data.name && data.value;
+        
+    return active || Session.get('variables.active') ? '' : 'disabled';
+  },
+  
+  readonly: function() {
+    return Template.currentData() ? 'readonly' : '';
+  }
+});
+
+Template.variables.events({
+  'keyup .name, keyup .value': function(event) {
+    var instance = Template.instance(),
+        name = instance.$('.name').val(),
+        value = instance.$('.value').val();
+
+    Session.set('variables.active', name && value);
   }
 });
 
@@ -59,6 +148,7 @@ Template.project.events({
     event.preventDefault();
     return Meteor.call('getProject', this._id, function(error, result) {
       Session.set('projectToEdit', result);
+      Session.set('vars', result.variables || []);
     });
   },
 });

client/projects.view.html

@@ -47,17 +47,36 @@
         <input type="url" class="form-control" name="public_url" placeholder="Public URL" value="{{project.public_url}}" required/>
       </div>
     </div>
+    <div class="form-group">
+        <label for="variables" class="col-sm-2 control-label">
+          <i class="fa fa-fw fa-cogs fa-2x" title="Environment variables"></i>
+        </label>
+        <div class="col-sm-10">
+          {{#each vars}}
+            {{> variables}}
+          {{/each}}
+          {{> variables }}
+        </div>
+    </div>
     <div class="form-group">
         <label for="commands" class="col-sm-2 control-label">
           <i class="fa fa-fw fa-terminal fa-2x" title="Commands"></i>
         </label>
       <div class="col-sm-10">
-        <textarea class="form-control" cols="25" rows="5" placeholder="Commands" value="{{project.commands}}" name="commands"></textarea>
+        <textarea class="form-control" cols="25" rows="5" placeholder="Installation commands" value="{{project.commands}}" name="commands"></textarea>
+      </div>
+    </div>
+    <div class="form-group">
+        <label for="run" class="col-sm-2 control-label">
+          <i class="fa fa-fw fa-play-circle-o fa-2x" title="Run"></i>
+        </label>
+      <div class="col-sm-10">
+        <input type="text" class="form-control" placeholder="Run commands" value="{{project.run}}" name="run" required />
       </div>
     </div>
     <div class="form-group">
       <div class="col-sm-offset-2 col-sm-10">
-        <button type="submit" class="btn btn-primary">
+        <button type="submit" class="btn btn-primary save">
           <i class="fa fa-fw fa-floppy-o"></i>
         </button>
         <a href="#" class="btn btn-default cancel">
@@ -107,3 +126,18 @@
   </li>
 </template>
 
+<template name="variables">
+  <div class="row variables">
+    <div class="col-sm-5">
+      <input type="text" class="form-control name" name="name" value="{{name}}" placeholder="Name" {{readonly}}/>
+    </div>
+    <div class="col-sm-5">
+      <input type="text" class="form-control value" name="value" value="{{value}}" placeholder="Value" {{readonly}}/>
+    </div>
+    <div class="col-sm-1">
+      <button class="btn btn-default {{action}}" {{active}}>
+        <i class="fa fa-fw fa-{{logo}}"></i>
+      </button>
+    </div>
+  </div>
+</template>