-{{#each line in currentLog}}
-{{logPrefix}}{{line}}
-{{/each}}
+
{{logs}}
diff --git a/website/source/assets/javascripts/demo/controllers/crud.js b/website/source/assets/javascripts/demo/controllers/crud.js
index 0df0098261..7dedc3afcd 100644
--- a/website/source/assets/javascripts/demo/controllers/crud.js
+++ b/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();
diff --git a/website/source/assets/javascripts/demo/controllers/demo.js b/website/source/assets/javascripts/demo/controllers/demo.js
index da477026e6..8cc4117071 100644
--- a/website/source/assets/javascripts/demo/controllers/demo.js
+++ b/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');
diff --git a/website/source/assets/javascripts/demo/routes/demo.js b/website/source/assets/javascripts/demo/routes/demo.js
new file mode 100644
index 0000000000..34b1d37316
--- /dev/null
+++ b/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);
+ }
+});
diff --git a/website/source/assets/javascripts/demo/views/demo.js b/website/source/assets/javascripts/demo/views/demo.js
index f7d9655d1f..8ce3763e30 100644
--- a/website/source/assets/javascripts/demo/views/demo.js
+++ b/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')
});
diff --git a/website/source/assets/stylesheets/_demo.scss b/website/source/assets/stylesheets/_demo.scss
index 72ef843c47..05d3b9a4ec 100644
--- a/website/source/assets/stylesheets/_demo.scss
+++ b/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));
}