State params wired for training and solutions page.

Author: Steven-Nagie

src/components/app.js

@@ -35,15 +35,15 @@ $stateProvider
     controller: 'profileCtrl'
 })
 .state('menu.solutions',{
-    url: 'solutions',
+    url: 'solutions/:kataid',
     templateUrl:'./components/solutions/solutions.html',
     controller: 'solutionsCtrl'
 })
 .state('menu.training',{
-    url: 'training',
+    url: 'training/:kataid',
     templateUrl:'./components/training/training.html',
     controller: 'trainingCtrl'
 });
-  
+
 $urlRouterProvider.otherwise('/login');
 });

src/components/kata_list/kata_list.scss

@@ -83,6 +83,17 @@ $grey-color: #C0C0C0;
   width: 15vw;
 }
 
+.kata-sort {
+  display: flex;
+  flex-direction: column;
+}
+
+.kata-sort-div {
+  display: flex;
+  flex-direction: row;
+  
+}
+
 .kata-list-right {
   width: 85vw;
   background-color: blue;

src/components/kata_list/library.html

@@ -4,6 +4,26 @@
     <div class="kata-search">
       <input id='kata-search' ng-model="searchText" placeholder="Search">
     </div>
+
+    <div class="kata-sort">
+      <div class="kata-sort-div">
+        <p>Sort by: </p>
+        <p>Here's where the sort goes</p>
+      </div>
+      <div class="kata-sort-div">
+        <p>Language: </p>
+        <p>Here's where the language goes</p>
+      </div>
+      <div class="kata-sort-div">
+        <p>Status: </p>
+        <p>Here's where the Status goes</p>
+      </div>
+      <div class="kata-sort-div">
+        <p>Progress: </p>
+        <p>Here's where the Progress goes</p>
+      </div>
+    </div>
+
   </div>
 
   <div class="kata-list-right">

src/components/mainService.js

@@ -88,7 +88,7 @@ angular.module('app').service('mainService', function($http, $q, $sce) {
   this.getKatasByKyu = (kyu) => {
     return $http({
       method: 'GET',
-      url: `/api/katas-by-kyu/` + kyu 
+      url: `/api/katas-by-kyu/` + kyu
     });
   };
 

src/components/solutions/solutionsCtrl.js

@@ -1,7 +1,9 @@
-
+/************ SOLUTIONS CONTROLLER *********/
 // each Ctrl should call  - mainService.user - for access to the user object
 
-angular.module('app').controller('solutionsCtrl', function($scope, $state, mainService) {
+angular.module('app').controller('solutionsCtrl', function($scope, $state, mainService, $stateParams) {
+
+  $scope.kataid = $stateParams.kataid;
 
     // $scope.getKataById to be at the top of the page and the solutions will go below
 
@@ -15,7 +17,7 @@ angular.module('app').controller('solutionsCtrl', function($scope, $state, mainS
     $scope.init = () => {
         $scope.getKataSolutions(1 /* replace 1 with kataid when set up */);
     }
-    
 
 
-});
+
+});

src/components/training/trainingCtrl.js

@@ -2,7 +2,9 @@
 
 // each Ctrl should call  - mainService.user - for access to the user object
 
-angular.module('app').controller('trainingCtrl', function($scope, $state, mainService) {
+angular.module('app').controller('trainingCtrl', function($scope, $state, mainService, $stateParams) {
+
+  $scope.kataid = $stateParams.kataid;
 
   /** Create text areas **/
   var textarea1 = document.getElementById('solution-input');
@@ -49,7 +51,7 @@ angular.module('app').controller('trainingCtrl', function($scope, $state, mainSe
     });
   }
 
-  $scope.getKataById(2);
+  $scope.getKataById($scope.kataid);