Merge pull request CodewarsClone#26 from CodewarsClone/training

Training

Author: Jon Myrick

src/assets/scss/styles.scss

@@ -98,6 +98,14 @@ main {
   font-weight: 400;
 }
 
+.font12-reg-black {
+  color: #131414;
+  font-family: $font;
+  font-size: 12px;
+  line-height: 12px;
+  font-weight: 400;
+}
+
 .side-menu {
     background-color: $sidebar-color;
     height: 100vh;
@@ -171,4 +179,4 @@ padding: 75px 75px 10px 75px;
 
 a {
     text-decoration: none;
-}
+}

src/components/mainService.js

@@ -2,10 +2,21 @@ angular.module('app').service('mainService', function($http, $q, $sce) {
 
   // $sce.trustAsResourceUrl('/s');
 
-  this.getTest = function(solution, examples) {
+  this.testExamples = function(solution, examples) {
     return $http({
       method: 'POST',
-      url: '/solution',
+      url: `http://192.168.0.186:3030/test/examples`,
+      data: {
+        script: solution,
+        examples: examples
+      }
+    });
+  };
+
+  this.testSuite = function(solution, kataid) {
+    return $http({
+      method: 'POST',
+      url: `/test/suite/${kataid}`,
       data: {
         script: solution
       }

src/components/training/output.html

@@ -0,0 +1,14 @@
+
+  <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>
+    <div ng-repeat="test in output">
+        <p>{{test.test}}</p>
+        <p>{{test.result}}</p>
+    </div>
+  </div>

src/components/training/outputDirective.js

@@ -0,0 +1,5 @@
+angular.module('app').directive('showOutput', function() {
+  return {
+    templateUrl: './output.html',
+  }
+});

src/components/training/training.html

@@ -40,7 +40,7 @@ <h3 class="font16-reg" id="kata-name">
 
     <div class="kata">
 
-      <div class="instructions">
+      <!-- <div class="instructions">
         <div class="instructions-head">
           <button class="instructions-selector font13-reg-gray">Instructions</button>
           <button class="instructions-selector font13-reg-gray">Output</button>
@@ -49,23 +49,31 @@ <h3 class="font16-reg" id="kata-name">
         <h2 class="font20-reg">Name of Kata</h2>
         <div>
           <p>Here's where the instructions go. We have to think about how to present code samples.</p>
+          <div ng-repeat="test in output">
+              <p>{{test.test}}</p>
+              <p>{{test.result}}</p>
+          </div>
         </div>
+      </div> -->
+
+      <div class="instructions" showOutput>
       </div>
 
       <div class="kata-right">
 
         <div class="solution-div">
           <p>Solution:</p>
           <form>
-            Function: <textarea name="solution" cols="40" rows="5" id="solution-input" ng-model="solutionInput"></textarea>
+            Function: <textarea name="solution" cols="40" rows="5" id="solution-input" ng-init="solutionInput = 'var a = 1;'"ng-model="solutionInput"></textarea>
           </form>
         </div>
 
         <div class="example-tests-div">
           <p>Example Tests:</p>
           <form>
-            <textarea name="examples" cols="40" rows="5" id="example-tests-input" ng-model="examplesInput"></textarea>
-            <button ng-click="sendSolution(solutionInput, examplesInput)" class="run-examples-button font12-reg-blue">RUN EXAMPLES</button>
+            <textarea name="examples" cols="40" rows="5" ng-init="examplesInput = 'Test.assertEquals(a, 1);'" id="example-tests-input" ng-model="examplesInput"></textarea>
+            <button ng-click="testExamples(solutionInput, examplesInput)" class="test-examples-button font12-reg-blue">RUN EXAMPLES</button>
+            <button ng-click="testSuite(solutionInput)" class="test-suite-button font12-reg-black" style=""><i class="fa fa-caret-right fa-lg" style="margin-right: 2px" aria-hidden="true"></i>ATTEMPT</button>
           </form>
         </div>
 

src/components/training/training.scss

@@ -96,14 +96,22 @@ hr {
   width: 40vw;
 }
 
-.run-examples-button {
+.test-examples-button {
   border: 1px solid #91b2e7;
   border-radius: 4%;
   width: 113px;
   height: 30px;
   background-color: #3C3C3C;
 }
 
+.test-suite-button {
+  border: 1px solid #91b2e7;
+  border-radius: 4%;
+  width: 113px;
+  height: 30px;
+  background-color: #91b2e7;
+}
+
 .training-body {
   background-color: red;
 }

src/components/training/trainingCtrl.js

@@ -4,12 +4,22 @@ angular.module('app').controller('trainingCtrl', function($scope, $state, mainSe
 
   $scope.languages = ['JavaScript', 'Python'];
   $scope.versions = ['Node v0.10.33', 'Node v6.6.0'];
+  $scope.output = [];
 
-  $scope.sendSolution = function(solutions, examples) {
+
+  //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) {
+    solutions = solutions.replace(/\n/g, " ");
+    let examplesArr = [];
+    examples = examples.split(/\n/);
+    examples.forEach(example => examplesArr.push({test: example}));
+    mainService.testExamples(solutions, examplesArr).then((response) => $scope.output.push(response.data[0]));
+  }
+
+
+  $scope.testSuite = function(solutions) {
     solutions = solutions.replace(/\n/g, " ");
-    examples = examples.replace(/\n/g, " ");
-    console.log(solutions, examples);
-    // mainService.getTest(solutionsInput, examples).then((response) => console.log(response));
+    // mainService.testSuite(solutions, kataid).then((response) => console.log(response));
   }
 
 

src/index.html

@@ -23,6 +23,7 @@
 </body>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
+<script src="https://use.fontawesome.com/b3416c175c.js"></script>
 <script type='text/javascript' src='./bundle.js'></script>
 
 </html>