Savemeals (#72)

* user can press a button to see a new set of meals * commit * updated refresh functionality * meals page doesn't bug out on refresh * fixed other pages with refresh problem
johannaperez · Oct 10, 2016 · 92bbbe4 · 92bbbe4
1 parent d354aa3
commit 92bbbe4
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 25 deletions.
diff --git a/browser/js/groceries/groceries.js b/browser/js/groceries/groceries.js
@@ -2,19 +2,27 @@ app.config(function ($stateProvider) {
     $stateProvider.state('groceries', {
         url: '/groceries',
         templateUrl: 'js/groceries/groceries.html',
-        controller: 'ListCtrl'
+        controller: 'ListCtrl',
+        resolve: {
+            currentUser: function(AuthService){
+                return AuthService.getLoggedInUser();
+            }
+        },
+        data: {
+            authenticate: true
+        }
     });
 });
 
-app.controller('ListCtrl', function($scope, ListFactory, Session) {
+app.controller('ListCtrl', function($scope, ListFactory, currentUser) {
 
   $scope.sections = {};
 
 
-  ListFactory.getGroceryList(Session.user.id)
+  ListFactory.getGroceryList(currentUser.id)
   .then(function(groceryList){
     $scope.sections = groceryList;
-    $scope.headers = Object.keys(groceryList); 
+    $scope.headers = Object.keys(groceryList);
   });
 
   $scope.round = function(number){

diff --git a/browser/js/meals/meals.html b/browser/js/meals/meals.html
@@ -3,6 +3,7 @@
     <div id="meals">
     <div class="heading" flex layout="row">
         <h1>Dish'ng Up This Week</h1>
+        <md-button flex class="md-raised" layout="row" ng-click="refreshMeals()"><div>Get Fresh Meals</div></md-button>
         </div>
         <section class="mealsMain" layout="row" flex>
             <md-button class="md-fab" aria-label="Previous" ng-click="slickConfig.method.slickPrev()">
@@ -51,9 +52,6 @@ <h1>Dish'ng Up This Week</h1>
         </section>
                     </section>
         </section>
-        <!-- <section>
-            <md-button flex layout="row" ui-sref="groceries"><div>SAVE MEALS</div><i class="material-icons s">shopping_basket</i></md-button>
-        </section> -->
 
     </div>
 </md-content>
diff --git a/browser/js/meals/meals.js b/browser/js/meals/meals.js
@@ -2,26 +2,50 @@ app.config(function($stateProvider) {
     $stateProvider.state('meals', {
         url: '/meals',
         templateUrl: 'js/meals/meals.html',
-        controller: 'MealsCtrl'
+        controller: 'MealsCtrl',
+        resolve: {
+            currentUser: function(AuthService){
+                return AuthService.getLoggedInUser();
+            }
+        },
+        data: {
+            authenticate: true
+        }
     });
 });
 
-app.controller('MealsCtrl', function($scope, MealFactory, Session, $mdDialog, $log, $state) {
+app.controller('MealsCtrl', function($scope, MealFactory, $mdDialog, $log, $state, currentUser) {
 
+    console.log(currentUser.id);
     $scope.meals = [];
     $scope.selectedMeals = [];
 
-    //fetch meals to display
-    MealFactory.getMealPlan(Session.user.id)
+    //fetch meals to display on page load
+    MealFactory.getMealPlan(currentUser.id)
+    .then(function(meals) {
+        $scope.meals = meals;
+        if (meals.length < 10) $scope.selectedMeals = meals;
+    })
+    .then(function() {
+        $scope.mealsLoaded = true;
+    })
+    .catch($log.error);
+
+    //Fetch a fresh set of meals
+    $scope.refreshMeals = function(){
+        //prevent slick jankyness
+        $scope.mealsLoaded = false;
+        $scope.selectedMeals = [];
+         MealFactory.refreshMeals(currentUser.id)
         .then(function(meals) {
             $scope.meals = meals;
+            console.log(meals);
         })
         .then(function() {
             $scope.mealsLoaded = true;
         })
         .catch($log.error);
-
-
+    }
 
     //slick functionality
     $scope.slickConfig = {
@@ -50,8 +74,8 @@ app.controller('MealsCtrl', function($scope, MealFactory, Session, $mdDialog, $l
     }
 
     $scope.addGroceries = function() {
-        console.log(Session.user.id)
-        MealFactory.addMealPlan(Session.user.id, $scope.selectedMeals)
+        console.log(currentUser.id)
+        MealFactory.addMealPlan(currentUser.id, $scope.selectedMeals)
             .then(function() {
                 $state.go('groceries');
             })
@@ -111,6 +135,13 @@ app.factory('MealFactory', function($http) {
         return $http.post(`api/users/${userId}/meals`, { mealPlan: mealIds });
     }
 
+    MealFactory.refreshMeals = function(userId) {
+        return $http.put(`api/users/${userId}/meals`)
+        .then(function(response) {
+                return response.data;
+        });
+    }
+
 
     return MealFactory;
 });
diff --git a/browser/js/my-account/my-account.js b/browser/js/my-account/my-account.js
@@ -3,24 +3,22 @@ app.config(function ($stateProvider) {
     $stateProvider.state('myAccount', {
         url: '/my-account',
         templateUrl: 'js/my-account/my-account.html',
-        // controller: function ($scope, SecretStash) {
-        //     SecretStash.getStash().then(function (stash) {
-        //         $scope.stash = stash;
-        //     });
-        // },
-        // The following data.authenticate is read by an event listener
-        // that controls access to this state. Refer to app.js.
         data: {
             authenticate: true
         },
-        controller: 'MyAccountCtrl'
+        controller: 'MyAccountCtrl',
+        resolve: {
+            currentUser: function(AuthService){
+                return AuthService.getLoggedInUser();
+            }
+        }
     });
 
 });
 
-app.controller('MyAccountCtrl', function($scope, Session){
+app.controller('MyAccountCtrl', function($scope, currentUser){
 
-    $scope.userId = Session.user.id;
+    $scope.userId = currentUser.id;
 })
 
 app.factory('SecretStash', function ($http) {