Merge pull request CodewarsClone#27 from CodewarsClone/training

Training

Author: Jon Myrick

src/components/training/instructions.html

@@ -0,0 +1,5 @@
+
+  <h2 class="font20-reg">Instructions</h2>
+  <div>
+    <p>These are the instructions.</p><p>Moreinfor</p>
+  </div>

src/components/training/instructionsDirective.js

@@ -0,0 +1,7 @@
+/********** INSTRUCTIONS DIRECTIVE **********/
+
+angular.module('app').directive('showInstructions', function() {
+  return {
+    templateUrl: './components/training/instructions.html'
+  }
+});

src/components/training/output.html

@@ -1,9 +1,4 @@
 
-  <div class="instructions-head">
-    <button class="instructions-selector font13-reg-gray">Instructions</button>
-    <button class="instructions-selector font13-reg-gray">Output</button>
-  </div>
-  <hr>
   <h2 class="font20-reg">Output</h2>
   <div>
     <p>This is the goddamn output.</p>

src/components/training/outputDirective.js

@@ -1,5 +1,7 @@
+/************* OUTPUT DIRECTIVE *************/
+
 angular.module('app').directive('showOutput', function() {
   return {
-    templateUrl: './output.html',
+    templateUrl: './components/training/output.html'
   }
 });

src/components/training/training.html

@@ -56,7 +56,14 @@ <h2 class="font20-reg">Name of Kata</h2>
         </div>
       </div> -->
 
-      <div class="instructions" showOutput>
+      <div class="instructions">
+          <div class="instructions-head">
+            <button class="instructions-selector font13-reg-gray" ng-click="showInstructions()">Instructions</button>
+            <button class="instructions-selector font13-reg-gray" ng-click="showOutput()">Output</button>
+          </div>
+          <hr>
+          <show-output ng-hide="showOutputShow"></show-output>
+          <show-instructions ng-hide="showInstructionsShow"></show-instructions>
       </div>
 
       <div class="kata-right">

src/components/training/trainingCtrl.js

@@ -6,9 +6,22 @@ angular.module('app').controller('trainingCtrl', function($scope, $state, mainSe
   $scope.versions = ['Node v0.10.33', 'Node v6.6.0'];
   $scope.output = [];
 
+  //NG-SHOWS
+  $scope.showOutputShow = true;
+  $scope.showInstructionsShow = false;
+  $scope.showOutput = function() {
+    $scope.showOutputShow = false;
+    $scope.showInstructionsShow = true;
+  }
+  $scope.showInstructions = function() {
+    $scope.showOutputShow = true;
+    $scope.showInstructionsShow = false;
+  }
+
 
   //Examples should be an array of objects. Returned results will be an array with the different tests and their results.
   $scope.testExamples = function(solutions, examples) {
+    $scope.showOutput();
     solutions = solutions.replace(/\n/g, " ");
     let examplesArr = [];
     examples = examples.split(/\n/);
@@ -18,6 +31,7 @@ angular.module('app').controller('trainingCtrl', function($scope, $state, mainSe
 
 
   $scope.testSuite = function(solutions) {
+    $scope.showOutput();
     solutions = solutions.replace(/\n/g, " ");
     // mainService.testSuite(solutions, kataid).then((response) => console.log(response));
   }