Merge pull request CodewarsClone#91 from CodewarsClone/output

Output

Author: Jon Myrick

gulpfile.js

@@ -21,10 +21,9 @@ var cachebust = new CacheBuster();
 const paths = {
   jsSource: ['./src/components/**/*.js', './src/components/*.js'],
   cssFiles: './src/**/*.css',
-  // indexFiles: './src/index.html',
+  indexFile: './src/index.html',
   scssFiles: './src/**/**/*.scss',
-  // index: './src/index.html',
-  // htmlFiles: './src/**/*.html',
+  htmlFiles: './src/**/*.html',
   dist: './src/dist',
 };
 

src/components/mainService.js

@@ -12,18 +12,20 @@ angular.module('app').service('mainService', function($http, $q, $sce) {
   this.testExamples = (solution, examples) => {
     return $http({
       method: 'POST',
-      url: `/api/test/examples`,
+      url: `http://192.168.0.186:3030/api/test/examples`,
       data: {
         script: solution,
         examples: examples
       }
     });
   };
 
+  // 192.168.0.186:3030
+
   this.testSuite = (solution, kataid) => {
     return $http({
       method: 'POST',
-      url: `/api/test/suite/${kataid}`,
+      url: `http://192.168.0.186:3030/api/test/suite/${kataid}`,
       data: {
         script: solution
       }

src/components/menus/menu.html

@@ -37,22 +37,20 @@
 				<br>
 			</ul>
 		</div>
-		<div class="top-menu">
-			<ul class='ul-top'>
-				<li>
-					<div class='li65'><img src='./assets/imgs/asset_30.png' class='li65-img'></div>
-				</li>
-				<li>
-					<div class='li65'><img src='./assets/imgs/asset_31.png' class='li65-img'></div>
-				</li>
-				<li class='li170'>
-				<li>{{userPic}}</li>
-				<li>kyu</li>
-				<li>lvl</li>
-				</li>
-			</ul>
-		</div>
-		<main>
-			<ui-view class='main-div'></ui-view>
-		</main>
-	</div>
+    <!--~~~~~~~~~~~~ TOP MENU ~~~~~~~~~~~~~~~~~-->
+    <div class="top-menu">
+      <div class='ul-top'>
+        <div class='li65'><img src='./assets/imgs/asset_30.png' class='li65-img'></div>
+        <div class='li65'><img src='./assets/imgs/asset_31.png' class='li65-img'></div>
+        <div class='li170'>
+          <img src='{{userPic}}' class='li170-img'>
+          <div>{{userKyu}}</div>
+          <div>{{userPoints}}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <main>
+    <ui-view class='main-div'></ui-view>
+  </main>
+</div>

src/components/menus/menu.scss

@@ -41,6 +41,7 @@ $grey-color: #C0C0C0;
   background-color: $sidebar-color;
   height: 100vh;
   width: 55px;
+  padding: 5px 0 0 0;
   float: left;
   position: fixed;
   left: 0;
@@ -109,30 +110,39 @@ $grey-color: #C0C0C0;
 
 
 .li65 {
-  width: 65px;
+    width: 65px;
+    margin:auto;
+    display: flex;
+    justify-content: center;
 }
 
 
 
 .li65-img {
-  margin: auto;
-  vertical-align: center;
-  height: 25px;
+    margin:auto;
+    vertical-align: center;
+    height: 25px;
+    align-self:center;
 }
 
 
 
 .li170 {
-  width: 170px;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-around;
+    width: 170px;
+    display: flex;
+    flex-direction: row;
+    margin: auto;
+    justify-content: center;
 }
 
 
 
 .li170-img {
-  vertical-align: center;
+    vertical-align: center;
+    height: 40px;
+    border-radius: 10px;
+    margin:  5px auto;
+    align-self: center;
 }
 
 

src/components/menus/menuCtrl.js

@@ -1,2 +1,5 @@
 angular.module('app').controller('menuCtrl', function($scope, $state, mainService, $stateParams){
+    $scope.userPic = mainService.user.picture_url;
+    $scope.userKyu = mainService.user.kyu_level;
+    // $scope.userPoints = mainService.user.points;
 });

src/components/training/output.html

@@ -1,11 +1,14 @@
-
-  <h2 class="font20-reg">Output</h2><br>
-    <p class="font14-reg">Time: {{time}}</p>
-  <div>
-    <div class='font20-reg' ng-repeat="test in output">
-    <p>This is the output.</p><br>
-
-        <p class="font14-lit-gray">{{test.test}}</p>
-        <p class="font14-lit-gray">{{test.result}}</p>
+<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'>
+      <span>{{val1.value}}</span>
+      <div class='val2' ng-repeat='val2 in val1.nest'>
+        <span ng-class="val2.passed ? 'pass' : 'fail'">{{val2.value}}</span>
+      </div>
     </div>
   </div>
+</div>

src/components/training/training.html

@@ -23,9 +23,6 @@
         </select>
         </div>
       <div class="assorted-options">
-        <div class="view-options">Here's where view options go</div>
-        <div class="view-options">Here's where view options go</div>
-        <div class="view-options">Here's where view options go</div>
       </div>
       </div>
     </div>

src/components/training/training.scss

@@ -17,6 +17,8 @@ $clone-wars-color: rgb(217, 217, 217);
 $grey-color: #C0C0C0;
 $green-color: #5F8120;
 $grey-color2: #3B3C3E;
+$pass: #7C9A44;
+$fail: #C05C40;
 
 // STUFF ALONG THE TOP
 .training-top {
@@ -179,4 +181,20 @@ hr {
 
 .pre-line {
   white-space: pre-line;
+}
+
+.pass {
+  color: $pass;
+}
+
+.fail {
+  color: $fail;
+}
+
+.val1 {
+  padding: 0 0 0 15px;
+}
+
+.val2 {
+  padding: 0 0 0 30px;
 }

src/components/training/trainingCtrl.js

@@ -79,13 +79,21 @@ angular.module('app').controller('trainingCtrl', function ($scope, $state, mainS
 	$scope.testSuite = function () {
 		var solutions = solutionsCode.getValue();
 		$scope.showOutput();
+		var t0 = performance.now();
 		solutions = solutions
 			.replace(/\s*\n*\r*\/\/.*\n*\r*/g, '')
 			.replace(/\n\s*\./g, `.`)
 			.replace(/\\n/g, " ")
 			.replace(/\s+/g, " ");
 		mainService.testSuite(solutions, $scope.kataid).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;
+
 		});
 	};