Merge pull request CodewarsClone#97 from CodewarsClone/output

Output

Author: Jon Myrick

src/assets/scss/styles.scss

@@ -108,6 +108,13 @@ a {
   font-weight: 400;
 }
 
+.font14-reg-nw {
+  font-family: $font;
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: 400;
+}
+
 .searchBar-font {
   color: #efefef;
   font-size: 14px;

src/components/training/instructions.html

@@ -1,5 +1,6 @@
-
+<div class='instructions-text'>
   <h2 class="font20-reg">Instructions</h2>
   <div>
     <p class="font14-reg pre-line">{{instructions}}</p>
   </div>
+</div>

src/components/training/output.html

@@ -1,13 +1,23 @@
-<div>
-  <p class="font14-reg">Time: {{time}} <span class='pass'> Passed: </span>{{testPass}} <span class='fail'> Failed: </span>{{testFail}} </p>
-  <div class="font14-reg" ng-repeat='val in answer'>
-    <hr>
-    <u>Test Results:</u> <br><br>
-     {{val.value}}
-    <div class='val1'ng-repeat='val1 in val.nest'>
+<div class='output'>
+  <div class="font14-reg val output-header">
+    <div class='output-items'>
+      Time: <span class='white'>{{time}}</span>
+    </div>
+    <div class='pass output-items'>
+      Passed:<span class='white'>{{testPass}}</span>
+    </div>
+    <div class='fail output-items'>
+      Failed: <span class='white'>{{testFail}}</span>
+    </div>
+  </div>
+  <hr>
+  <span class='font14-reg val'><u>Test Results:</u></span> <br><br>
+  <div class="font14-reg-nw val" ng-repeat='val in answer' ng-class="val.passed != undefined ? (val.passed ? 'pass' : 'fail') : 'white'">
+    {{val.value}}
+    <div class='val1' ng-repeat='val1 in val.nest' ng-class="val1.passed != undefined ? (val1.passed ? 'pass' : 'fail') : 'white'">
       <span>{{val1.value}}</span>
       <div class='val2' ng-repeat='val2 in val1.nest'>
-        <span ng-class="val2.passed ? 'pass' : 'fail'">{{val2.value}}</span>
+        <span ng-class="val2.passed != undefined ? (val2.passed ? 'pass' : 'fail') : 'white'">{{val2.value}}</span>
       </div>
     </div>
   </div>

src/components/training/training.html

@@ -44,8 +44,8 @@ <h2 class="font20-reg">Name of Kata</h2>
       </div> -->
       <div class="instructions" ng-style="instructionStyle">
         <div class="instructions-head">
-          <div class='instructions-selector font14-lit-gray' ng-click='showInstructions()'>Instructions</div>
-          <div class='output-selector font14-lit-gray' ng-click='showOutput()'>Output</div>
+          <div class='instructions-selector font14-lit-gray' ng-click='showInstructions()'><div class='button-text'>Instructions</div></div>
+          <div class='output-selector font14-lit-gray' ng-click='showOutput()'><div class='button-text'>Output</div></div>
           <!--<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>
@@ -57,10 +57,10 @@ <h2 class="font20-reg">Name of Kata</h2>
         <div class="solution-div font14-lit-gray">
           <div class="solutions-header">
             <p>Solution:</p>
-            <button value='small' ng-click="kataStyle={'width':'40vw'}; instructionStyle={'width':'60vw'}; allGone={'height':'100px'}">small</button>
+            <!--<button value='small' ng-click="kataStyle={'width':'40vw'}; instructionStyle={'width':'60vw'}; allGone={'height':'100px'}">small</button>
             <button value='medium' ng-click="kataStyle={'width':'60vw'}; instructionStyle={'width':'40vw'}; allGone={'height':'100px'}">medium</button>
             <button value='large' ng-click="kataStyle={'width':'100vw','margin':'15px'}; instructionStyle={'display':'none'}; allGone={'height':'100px'}">large</button>
-            <button value='full-screen' ng-click="kataStyle={'width':'100vw','margin':'15px'}; instructionStyle={'display':'none'}; allGone={'display':'none'}; exampleGone={'display':'none'}">full screen</button>
+            <button value='full-screen' ng-click="kataStyle={'width':'100vw','margin':'15px'}; instructionStyle={'display':'none'}; allGone={'display':'none'}; exampleGone={'display':'none'}">full screen</button>-->
           </div>
           <div ng-style="exampleGone" class='example'>
             <textarea name="solution" id="solution-input" ng-init="solutionInput = 'var a = 1;'" ng-model="solutionInput"></textarea>

src/components/training/training.scss

@@ -19,6 +19,8 @@ $green-color: #5F8120;
 $grey-color2: #3B3C3E;
 $pass: #7C9A44;
 $fail: #C05C40;
+$output: #151718;
+$white: white;
 
 // STUFF ALONG THE TOP
 .training-top {
@@ -100,12 +102,11 @@ $fail: #C05C40;
 }
 
 .instructions {
-  // height: calc(100vh - 150px);
   width: 40vw;
   overflow: scroll;
   margin: 15px;
   background-color: $container1;
-  padding: 10px;
+  // padding: 10px;
   height: 105vh;
 }
 
@@ -121,9 +122,8 @@ $fail: #C05C40;
   height: 40px;
   text-align: center;
   cursor: pointer;
-  vertical-align: center;
-  padding: 5px;
   background-color: $grey-color2;
+  display:flex;
 }
 
 .output-selector {
@@ -132,7 +132,16 @@ $fail: #C05C40;
   text-align: center;
   cursor: pointer;
   line-height: 40px;
-  padding: 5px;
+  display:flex;
+}
+
+.button-text {
+margin:auto;
+align-self: center;
+}
+
+.instructions-text {
+  padding: 5px 0 0 10px;
 }
 
 hr {
@@ -183,6 +192,24 @@ hr {
   white-space: pre-line;
 }
 
+.output {
+  background-color: $output;
+  width: 100%;
+  height: 93%;
+  margin: 0 0 0 10px;
+  overflow: auto;
+}
+
+.output-header {
+  display:flex;
+  flex-direction: row;
+  align-content: left;
+}
+
+.output-items {
+  justify-content: space-between;
+}
+
 .pass {
   color: $pass;
 }
@@ -191,6 +218,13 @@ hr {
   color: $fail;
 }
 
+.white {
+  color: $white;
+}
+
+.val {
+  padding: 5px 0 0 5px;
+}
 .val1 {
   padding: 0 0 0 15px;
 }

src/components/training/trainingCtrl.js

@@ -60,6 +60,7 @@ angular.module('app').controller('trainingCtrl', function ($scope, $state, mainS
 		var solutions = solutionsCode.getValue();
 		var examples = examplesCode.getValue();
 		$scope.showOutput();
+		var t0 = performance.now();
 		solutions = solutions
 			.replace(/\s*\n*\r*\/\/.*\n*\r*/g, '')
 			.replace(/\n\s*\./g, `.`)
@@ -73,7 +74,12 @@ angular.module('app').controller('trainingCtrl', function ($scope, $state, mainS
 			.replace(/\s+/g, ` `);
 		console.log(examples);
 		mainService.testExamples(solutions, examples).then((response) => {
-			console.log(response.data);
+			var t1 = performance.now();
+			$scope.answer = response.data.nest;
+			console.log(response.data.nest[0]);
+			$scope.time = Math.round(t1 - t0) + " ms";
+			$scope.testPass = response.data.passCount;
+			$scope.testFail = response.data.testCount - response.data.passCount;
 		});
 	};
 
@@ -90,7 +96,6 @@ angular.module('app').controller('trainingCtrl', function ($scope, $state, mainS
 			var t1 = performance.now();
 			$scope.answer = response.data.nest;
 			console.log(response.data.nest[0]);
-			
 			$scope.time = Math.round(t1 - t0) + " ms";
 			$scope.testPass = response.data.passCount;
 			$scope.testFail = response.data.testCount - response.data.passCount;