website: send and receive message on websockets

website/source/_ember_templates.html.erb

@@ -23,13 +23,10 @@
     </div>
 {{/if}}
 
-<div class="log">
-{{#each line in currentLog}}
-{{logPrefix}}{{line}}
-{{/each}}
+<div class="log">{{logs}}
 </div>
 
 <form {{action "submitText" on="submit"}}>
-    {{logPrefix}} {{input value=currentText class="shell" spellcheck="false"}}
+    $ {{input value=currentText class="shell" spellcheck="false"}}
 </form>
 </script>

website/source/assets/javascripts/demo/controllers/crud.js

@@ -1,43 +1,39 @@
 Demo.DemoCrudController = Ember.ObjectController.extend({
-  needs: ['demo'],
+  needs: ['demo', 'application'],
   isLoading: Ember.computed.alias('controllers.demo.isLoading'),
   currentText: Ember.computed.alias('controllers.demo.currentText'),
-  currentLog: Ember.computed.alias('controllers.demo.currentLog'),
+  logs: Ember.computed.alias('controllers.demo.logs'),
   logPrefix: Ember.computed.alias('controllers.demo.logPrefix'),
   currentMarker: Ember.computed.alias('controllers.demo.currentMarker'),
   notCleared: Ember.computed.alias('controllers.demo.notCleared'),
+  socket: Ember.computed.alias('controllers.application.socket'),
 
   sendCommand: function() {
-    // Request
-    Ember.run.later(this, function() {
+      this.set('isLoading', true);
+
+      var demoController = this.get('controllers.demo');
       var command = this.getWithDefault('currentText', '');
-      var currentLogs = this.get('currentLog').toArray();
+      var log = this.get('log');
 
-      // Add the last log item
-      currentLogs.push(command);
-
-      // Clean the state
       this.set('currentText', '');
-
-      // Push the new logs
-      this.set('currentLog', currentLogs);
+      demoController.logCommand(command);
+      demoController.appendLog(command, true);
 
       switch(command) {
         case "clear":
-          this.set('currentLog', []);
+          this.set('logs', "");
           this.set('notCleared', false);
           break;
         default:
-          console.log("Submitting: ", command);
+          var data = JSON.stringify({type: "cli", data: {command: command}});
+          console.log("Sending: ", data);
+          this.get('socket').send(data);
       }
-
-      this.set('isLoading', false);
-    }, 1000);
   },
 
   actions: {
     submitText: function() {
-      this.set('isLoading', true);
+      this.set('controllers.demo.isLoading', true);
 
       // Send the actual request (fake for now)
       this.sendCommand();

website/source/assets/javascripts/demo/controllers/demo.js

@@ -1,17 +1,34 @@
 Demo.DemoController = Ember.ObjectController.extend({
   currentText: "vault help",
-  currentLog: [],
-  logPrefix: "$ ",
+  commandLog: [],
+  logs: "",
   cursor: 0,
   notCleared: true,
   isLoading: false,
 
   setFromHistory: function() {
-    var index = this.get('currentLog.length') + this.get('cursor');
+    var index = this.get('commandLog.length') + this.get('cursor');
+    var previousMessage = this.get('commandLog')[index];
 
-    this.set('currentText', this.get('currentLog')[index]);
+    this.set('currentText', previousMessage);
   }.observes('cursor'),
 
+  appendLog: function(data, prefix) {
+    if (prefix) {
+      data = '$ ' + data;
+    }
+
+    this.set('logs', this.get('logs')+'\n'+data);
+  },
+
+  logCommand: function(command) {
+    var commandLog = this.get('commandLog');
+
+    commandLog.push(command);
+
+    this.set('commandLog', commandLog);
+  },
+
   actions: {
     close: function() {
       this.transitionTo('index');

website/source/assets/javascripts/demo/routes/demo.js

@@ -0,0 +1,25 @@
+Demo.DemoRoute = Ember.Route.extend({
+  activate: function() {
+    // connect to the websocket once we enter the application route
+    // var socket = window.io.connect('http://localhost:8080');
+    var socket = new WebSocket("ws://vault-demo-server.herokuapp.com/socket");
+
+    this.controllerFor('application').set('socket', socket);
+
+    socket.onmessage = function(message) {
+      var data = JSON.parse(message.data),
+          controller = this.controllerFor('demo');
+
+      // Add the item
+      if (data.stdout) {
+        controller.appendLog(data.stdout);
+      }
+
+      if (data.stderr) {
+        controller.appendLog(data.stderr);
+      }
+
+      controller.set('isLoading', false);
+    }.bind(this);
+  }
+});

website/source/assets/javascripts/demo/views/demo.js

@@ -63,15 +63,20 @@ Demo.DemoView = Ember.View.extend({
     $('body').unbind('DOMMouseScroll mousewheel');
   },
 
-  click: function() {
-    var element  = this.$();
-    // Focus
-    element.find('input.shell')[0].focus();
-  },
+  // click: function() {
+  //   var element  = this.$();
+
+  //   // Record scoll position
+  //   var x = element.scrollX, y = element.scrollY;
+  //   // Focus
+  //   element.find('input.shell')[0].focus();
+  //   // Scroll back to where you were
+  //   element.scrollTo(x, y);
+  // },
 
   keyDown: function(ev) {
     var cursor = this.get('controller.cursor'),
-        currentLength = this.get('controller.currentLog.length');
+        currentLength = this.get('controller.commandLog.length');
 
     switch(ev.keyCode) {
       // Down arrow
@@ -95,7 +100,7 @@ Demo.DemoView = Ember.View.extend({
       // command + k
       case 75:
         if (ev.metaKey) {
-          this.set('controller.currentLog', []);
+          this.set('controller.logs', '');
           this.set('controller.notCleared', false);
         }
         break;
@@ -117,14 +122,21 @@ Demo.DemoView = Ember.View.extend({
 
   }.observes('controller.isLoading'),
 
+  focus: function() {
+    var element = this.$().find('input.shell');
+    element.focus()
+  }.observes('controller.cursor'),
+
   submitted: function() {
     var element  = this.$();
 
+    console.log("submitted");
+
     // Focus the input
     element.find('input.shell')[0].focus();
 
     // Scroll to the bottom of the element
     element.scrollTop(element[0].scrollHeight);
 
-  }.observes('controller.currentLog')
+  }.observes('controller.logs.length')
 });

website/source/assets/stylesheets/_demo.scss

@@ -5,11 +5,12 @@
     width: 100%;
     height: 80%;
     max-height: 80%;
+    line-height: 1.3;
     position: fixed;
     background-color: black;
     color: #DDDDDD;
     overflow: scroll;
-    font-size: 18px;
+    font-size: 15px;
     font-family: 'Ubuntu Mono', 'Monaco', monospace;
     @include box-shadow(0px -2px 30px 0px rgba(0, 0, 0, 0.40));
 }