Attaching components to the tutorial

Change-Id: Ic24ec04872864421dc2b503f2e1c0cfed2852b0b
diff --git a/views/ngXosViews/UITutorial/src/js/main.js b/views/ngXosViews/UITutorial/src/js/main.js
index 627a560..a686fe6 100644
--- a/views/ngXosViews/UITutorial/src/js/main.js
+++ b/views/ngXosViews/UITutorial/src/js/main.js
@@ -4,7 +4,8 @@
   'ngResource',
   'ngCookies',
   'ui.router',
-  'xos.helpers'
+  'xos.helpers',
+  'ui.ace'
 ])
 .config(($stateProvider) => {
   $stateProvider
@@ -16,14 +17,14 @@
 .config(function($httpProvider){
   $httpProvider.interceptors.push('NoHyperlinks');
 })
-.directive('jsShell', function(TemplateHandler){
+.directive('jsShell', function($rootScope, TemplateHandler, codeToString){
   return {
     restrict: 'E',
     scope: {},
     bindToController: true,
     controllerAs: 'vm',
     templateUrl: 'templates/js-shell.tpl.html',
-    controller: function(ExploreCmd,LearnCmd){
+    controller: function(ExploreCmd, PlayCmd, LearnCmd){
       var history = new Josh.History({ key: 'jsshell.history'});
       this.shell = Josh.Shell({history: history});
 
@@ -58,8 +59,43 @@
           }));
         }
       });
+      
+      this.shell.setCommandHandler('play', {
+        exec: (cmd, args, done) => {
+          PlayCmd.setup(this.shell);
+          done(TemplateHandler.instructions({
+            title: `You can now play with UI components!`,
+            messages: [
+              `Use <code>component list</code> to list all the available component and <code>component {componentName}</code> to startusing it.`,
+              `An example command is <code>component xosTable</code>`
+            ]
+          }));
+        }
+      });
 
       this.shell.activate();
+
+      this.componentScope = null;
+
+      $rootScope.$on('uiTutorial.attachScope', (e, scope) => {
+        this.componentScope = {
+          config: JSON.stringify(codeToString.toString(scope.config), null, 2),
+          data: JSON.stringify(codeToString.toString(scope.data), null, 2)
+        };
+      });
+
+      this.applyScope = (scope) => {
+        
+        // let a = codeToString.toCode(scope.config);
+        // console.log(a);
+        const newScope = {
+          config: codeToString.toCode(scope.config),
+          data: eval(`(${scope.data})`)
+        };
+
+        $rootScope.$emit('uiTutorial.applyScope', newScope);
+      }
+
     }
   };
 });
\ No newline at end of file