created remote console page

Change-Id: I72026e5ea64c9fba3089b68dfd2b8198255dabb8
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
diff --git a/app/index.html b/app/index.html
index 62d0744..43240a8 100644
--- a/app/index.html
+++ b/app/index.html
@@ -23,6 +23,8 @@
 	<script src="../bower_components/angular-route/angular-route.min.js"></script>
 	<script src="../bower_components/angular-clipboard/angular-clipboard.min.js"></script>
     <script src="../bower_components/angularUtils-pagination/dirPagination.min.js"></script>
+    <script src="../bower_components/hterm/js/hterm.js"></script>
+
 	<!-- endbuild -->
 
 	<!-- build:js scripts/app.min.js -->
diff --git a/app/server-control/controllers/remote-console-controller.html b/app/server-control/controllers/remote-console-controller.html
index 5b456d4..d08882a 100644
--- a/app/server-control/controllers/remote-console-controller.html
+++ b/app/server-control/controllers/remote-console-controller.html
@@ -1,5 +1,18 @@
 <div id="server-control-remote-console">
-    <div class="row column">
-        <h1>Remote Console</h1>
-    </div>
+	<div class="row column">
+		<h1>Serial over LAN console</h1>
+	</div>
+	<section class="row column">
+		<!--<div class="column small-12 page-header">-->
+			<!--<h2 class="h4">SoL console</h2>-->
+		<!--</div>-->
+		<p class="serial-lan__copy">The Serial over LAN (SoL) console redirects the output of the server’s serial port to a browser window on your workstation.</p>
+		<div class="serial-lan__wrapper">
+			<div id="terminal" class="serial-lan__terminal"></div>
+			<div class="serial-lan__actions">
+				<a href="#" class="inline bold btn-pop-out" target="_blank">Open in new tab</a>
+				<a href="#" class="inline btn-export" download="{{export_name}}">Export console data</a>
+			</div>
+		</div>
+	</section>
 </div>
\ No newline at end of file
diff --git a/app/server-control/controllers/remote-console-controller.js b/app/server-control/controllers/remote-console-controller.js
index 2f3376e..dadb406 100644
--- a/app/server-control/controllers/remote-console-controller.js
+++ b/app/server-control/controllers/remote-console-controller.js
@@ -19,6 +19,38 @@
             'dataService',
             function($scope, $window, APIUtils, dataService){
                 $scope.dataService = dataService;
+
+                // See https://github.com/macton/hterm for available hterm options
+                
+                //Storage
+                hterm.defaultStorage = new lib.Storage.Local();
+
+                var term = new hterm.Terminal("foo");
+                term.onTerminalReady = function() {
+                    var io = term.io.push();
+                    io.onVTKeystroke = function(str) {
+                        console.log(str)
+                        term.io.print(str);
+                    };
+                    io.sendString = function(str) {
+                        console.log(str)
+                    };
+                };
+                term.decorate(document.querySelector('#terminal'));
+
+                //Set cursor color
+                term.prefs_.set('cursor-color', 'rgba(83, 146, 255, .5)');
+
+                //Set background color
+                term.prefs_.set('background-color', '#19273c');
+
+                //Print to console window
+                term.io.println('OpenBMC ver.00');
+                term.io.println('This is not an actual live connection.');
+                term.io.print('root@IBM:');
+                
+                //Allows keyboard input
+                term.installKeyboard();
             }
         ]
     );
diff --git a/app/server-control/styles/remote-console.scss b/app/server-control/styles/remote-console.scss
index e69de29..dd8778d 100644
--- a/app/server-control/styles/remote-console.scss
+++ b/app/server-control/styles/remote-console.scss
@@ -0,0 +1,28 @@
+
+.serial-lan__wrapper {
+  background: $lightgrey;
+  border: 1px solid $medgrey;
+  padding: 2.5em 2.5em 5em 2.5em;
+  .btn-export {
+    margin: 1.8em 0 1.8em 2em;
+  }
+}
+
+.serial-lan__terminal {
+  position: relative;
+  width: 101%; //extra 1% to fix redraw issue with terminal window
+  height: 400px;
+  border: 1em solid #19273c;
+  overflow: scroll;
+}
+
+.serial-lan__copy {
+  padding: 2.5em 2.5em 1em;
+}
+
+.serial-lan__actions {
+  float: right;
+  a {
+    text-decoration: none;
+  }
+}
\ No newline at end of file