Use checkboxes for "toggle"

Architizer · May 20, 2016 · d0484a8 · d0484a8
1 parent cdc104c
commit d0484a8
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 37 deletions.
diff --git a/mendel/angular/src/app/main/main.controller.js b/mendel/angular/src/app/main/main.controller.js
@@ -9,9 +9,6 @@
   function MainController(Category, Context, Review, toastr) {
     var vm = this;
 
-    vm.selected = {};
-    vm.selected = [];
-
     // Get Context
     Context.get({
       id: 1
@@ -30,40 +27,29 @@
       vm.categories = categories;
     });
 
-    // Toggle Category
-    vm.toggleCategory = function toggleCategory(event, category) {
-
-      var element = angular.element(event.target);
-
-      // Get index of category in selected array
-      var index = vm.selected.indexOf(category);
-
-      if (index !== -1) {
-
-        vm.selected.splice(index, 1);
-        element.addClass('hollow');
-      }
-      else {
-
-        vm.selected.push(category);
-        element.removeClass('hollow');
-      }
-    };
-
-    // Create Review
-    vm.saveReview = function saveReview(category, context) {
-
-      Review.save({
-        category: category.id,
-        context: context.id,
-        keyword: context.keyword.id,
-        user: 1,
-      }, function (review) {
-        toastr.success('Category <strong>' + category.name + '</strong> added to Keyword <strong>' + context.keyword.name + '</strong>');
-      }, function (error) {
-        toastr.error('There was an error: ' + JSON.stringify(error), {timeOut: 5000});
+    // Submit Reviews
+    vm.getNextContext = function getNextContext (context) {
+
+      angular.forEach(vm.categories, function(category) {
+
+        if (category.selected) {
+
+          Review.save({
+            category: category.id,
+            context: context.id,
+            keyword: context.keyword.id,
+            user: 1
+          }, function saveReviewSuccess (review) {
+            // Show Toastr Success
+            toastr.success('Category <strong>' + review.category + '</strong> added to Keyword <strong>' + review.keyword + '</strong>');
+            // Unselect the category
+            category.selected = false;
+          }, function saveReviewError (error) {
+            // Show Toastr Error
+            toastr.error('There was an error: ' + JSON.stringify(error), {timeOut: 5000});
+          });
+        }
       });
     };
-
   }
 })();
diff --git a/mendel/angular/src/app/main/main.html b/mendel/angular/src/app/main/main.html
@@ -14,7 +14,7 @@
         </div>
         <!-- Next -->
         <div class="small-3 columns">
-          <p class="text-right"><a>Next <i class="material-icons">arrow_forward</i></a></p>
+          <p class="text-right"><a ng-click="main.getNextContext(main.context)">Next <i class="material-icons">arrow_forward</i></a></p>
         </div>
       </div>
 
@@ -111,6 +111,12 @@ <h4 class="subheader">Categories</h4>
 
             <!-- Main Categories -->
             <div class="column" ng-repeat="category in main.categories">
+              <div class="switch">
+                <input class="switch-input" ng-model="category.selected" id="category-switch-{{ category.id }}" type="checkbox" name="category-switch-{{ category.id }}">
+                <label class="switch-paddle" for="category-switch-{{ category.id }}">
+                  <span class="show-for-sr">{{ category.name }}</span>
+                </label>
+              </div>
               <a class="medium expanded category hollow button" ng-click="main.toggleCategory($event, category)">{{ category.name }}</a>
             </div>