added checkout modal, cleaned cart,filter functions

l3limp · Jul 31, 2024 · 670825f · 670825f
1 parent ad97363
commit 670825f
Show file tree

Hide file tree

Showing 7 changed files with 269 additions and 207 deletions.
diff --git a/checkoutModal.htm b/checkoutModal.htm
@@ -0,0 +1,26 @@
+<div>
+  <div class="modal-header">
+    <h3 class="modal-title">Checkout</h3>
+  </div>
+  <div class="modal-body">
+    <div ng-repeat="item in cart">
+      <div class="my-row spaced-content vertical-margin">
+        <div>{{item.name}}</div>
+        <div class="my-row">
+          <div class="horizontal-margin">{{item.quantity}}x</div>
+          <div>₹{{item.discountedPrice}}</div>
+        </div>
+      </div>
+    </div>
+<div class="my-row spaced-content vertical-margin">
+  <div>
+  </div>
+    <div><u>Subtotal:</u> ₹{{getCartSubtotal()}}</div>
+  </div>
+
+
+    <div class="modal-footer">
+        <button class="btn btn-primary" ng-click="ok()">Checkout</button>
+      </div>
+  </div>
+</div>
diff --git a/directives/itemCard.htm b/directives/itemCard.htm
@@ -22,11 +22,11 @@ <h5 class="card-title">{{item.name}}</h5>
         <div class="my-row spaced-content">
           <div>
             <div>
-              <b>₹{{item.price}}</b>
+              <b>₹{{item.discountedPrice}}</b>
               <small
                 ng-if="item.discountedPrice !== item.price"
                 style="color: grey"
-                ><s>₹{{item.discountedPrice}}</s></small
+                ><s>₹{{item.price}}</s></small
               >
             </div>
             <div>

diff --git a/index.htm b/index.htm
@@ -24,6 +24,8 @@
     <!-- load angular via CDN -->
     <script src="//code.angularjs.org/1.3.0-rc.1/angular.min.js"></script>
     <script src="//code.angularjs.org/1.3.0-rc.1/angular-route.min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"></script>
+
   </head>
   <body class="body" id="main" ng-controller="bodyController">
     <header>
@@ -53,6 +55,7 @@
       </nav>
     </header>
     <div class="container">
+
       <div ng-view></div>
 
         <cart-sidebar
@@ -64,8 +67,9 @@
           get-cart-subtotal="getCartSubtotal()"
           get-cart-subtotal-without-discount = "getCartSubtotalWithoutDiscount()"
         ></cart-sidebar>
-
+        
     </div>
+
     <script src="ng/app.js"></script>
     <script src="ng/routes.js"></script>
     <script src="ng/controllers.js"></script>

diff --git a/ng/app.js b/ng/app.js
@@ -1 +1 @@
-var oldMenu = angular.module("oldMenu", ["ngRoute"]);
+var oldMenu = angular.module("oldMenu", ["ngRoute", 'ui.bootstrap']);
diff --git a/ng/controllers.js b/ng/controllers.js
@@ -3,45 +3,17 @@ oldMenu.controller("bodyController", [
   "cartService",
   function ($scope, cartService) {
     $scope.isCartOpen = false;
+
     $scope.toggleCartVisibility = function () {
       $scope.cart = cartService.cart;
       $scope.isCartOpen = !$scope.isCartOpen;
-
-      $scope.getCartQuantity = function (itemID) {
-        if ($scope.cart[itemID] != null) {
-          return $scope.cart[itemID].quantity;
-        }
-        return 0;
-      };
-
-      $scope.changeItemQuantityInCart = function (action, itemID) {
-        $scope.cart[itemID].quantity += action;
-        if ($scope.cart[itemID].quantity === 0) {
-          delete $scope.cart[itemID];
-        }
-        cartService.cart = $scope.cart;
-      };
-
-      $scope.getCartSubtotal = function () {
-        var subtotal = 0;
-
-        for (key in $scope.cart) {
-          subtotal +=
-            $scope.cart[key].quantity * $scope.cart[key].discountedPrice;
-        }
-        return subtotal;
-      };
-
-      $scope.getCartSubtotalWithoutDiscount = function () {
-        var subtotalWithoutDiscount = 0;
-
-        for (key in $scope.cart) {
-          subtotalWithoutDiscount +=
-            $scope.cart[key].quantity * $scope.cart[key].price;
-        }
-        return subtotalWithoutDiscount;
-      };
     };
+
+    $scope.getCartQuantity = cartService.getCartQuantity;
+    $scope.changeItemQuantityInCart = cartService.changeItemQuantityInCart;
+    $scope.getCartSubtotal = cartService.getCartSubtotal;
+    $scope.getCartSubtotalWithoutDiscount =
+      cartService.getCartSubtotalWithoutDiscount;
   },
 ]);
 
@@ -64,11 +36,16 @@ oldMenu.controller("homeController", [
     $scope.categories.forEach(function (category) {
       $scope.categoriesMap[category] = [];
     });
+
     $scope.items.forEach(function (item) {
       var category = item.category;
       $scope.categoriesMap[category].push(item);
     });
 
+    $scope.toggleFilterModalVisibility = function () {
+      $scope.showFilterModal = !$scope.showFilterModal;
+    };
+
     $scope.getDiscountPercentage = function (price, discountedPrice) {
       return Math.round((100 * (price - discountedPrice)) / price);
     };
@@ -77,29 +54,13 @@ oldMenu.controller("homeController", [
       $scope.currentCategory = newCategory;
     };
 
-    $scope.getCartQuantity = function (itemID) {
-      if ($scope.cart[itemID] != null) {
-        return $scope.cart[itemID].quantity;
-      }
-      return 0;
-    };
-
-    $scope.addItemToCart = function (item) {
-      $scope.cart[item.id] = item;
-      $scope.cart[item.id].quantity = 1;
-      cartService.cart = $scope.cart;
-    };
-
-    $scope.changeItemQuantityInCart = function (action, itemID) {
-      $scope.cart[itemID].quantity += action;
-      if ($scope.cart[itemID].quantity === 0) {
-        delete $scope.cart[itemID];
-      }
-      cartService.cart = $scope.cart;
-    };
-
+    $scope.getCartQuantity = cartService.getCartQuantity;
+    $scope.changeItemQuantityInCart = cartService.changeItemQuantityInCart;
+    $scope.addItemToCart = cartService.addItemToCart;
     $scope.typeFilter = filtersService.typeFilter;
     $scope.cuisineFilter = filtersService.cuisineFilter;
+    $scope.isFilterSelected = filtersService.isFilterSelected;
+    $scope.toggleFilter = filtersService.toggleFilter;
 
     $scope.isDishToBeShown = function (type, cuisine) {
       var isTypeValid = false;
@@ -121,51 +82,6 @@ oldMenu.controller("homeController", [
 
       return isTypeValid && isCuisineValid;
     };
-
-    $scope.isFilterSelected = function (filterType, property) {
-      switch (filterType) {
-        case "type":
-          if ($scope.typeFilter[property] === true) {
-            return true;
-          }
-          break;
-        case "cuisine":
-          if ($scope.cuisineFilter[property] === true) {
-            return true;
-          }
-          break;
-        default:
-          break;
-      }
-      return false;
-    };
-
-    $scope.toggleFilter = function (filterType, property) {
-      switch (filterType) {
-        case "type":
-          if ($scope.typeFilter[property] === true) {
-            delete $scope.typeFilter[property];
-          } else {
-            $scope.typeFilter[property] = true;
-          }
-          filtersService.typeFilter = $scope.typeFilter;
-          break;
-        case "cuisine":
-          if ($scope.cuisineFilter[property] === true) {
-            delete $scope.cuisineFilter[property];
-          } else {
-            $scope.cuisineFilter[property] = true;
-          }
-          filtersService.cuisineFilter = $scope.cuisineFilter;
-          break;
-        default:
-          break;
-      }
-    };
-
-    $scope.toggleFilterModalVisibility = function () {
-      $scope.showFilterModal = !$scope.showFilterModal;
-    };
   },
 ]);
 
@@ -179,7 +95,6 @@ oldMenu.controller("itemDetailsController", [
     $scope.itemID = $routeParams.itemID;
     $scope.cart = cartService.cart;
 
-
     $scope.getDiscountPercentage = function (price, discountedPrice) {
       return Math.round((100 * (price - discountedPrice)) / price);
     };
@@ -206,3 +121,50 @@ oldMenu.controller("itemDetailsController", [
     };
   },
 ]);
+
+oldMenu.controller("ModalController", [
+  "$scope",
+  "$uibModal",
+  "cartService",
+  function ($scope, $uibModal, cartService) {
+    $scope.openModal = function () {
+      var modalInstance = $uibModal.open({
+        templateUrl: "checkoutModal.htm",
+        controller: "ModalInstanceController",
+        size: "lg",
+        resolve: {
+          cartService: cartService,
+        },
+      });
+
+      modalInstance.result.then(
+        function (selectedItem) {
+          $scope.selected = selectedItem;
+        },
+        function () {
+          console.log("Modal dismissed");
+        }
+      );
+    };
+  },
+]);
+
+oldMenu.controller("ModalInstanceController", [
+  "$scope",
+  "$uibModalInstance",
+  "cartService",
+  function ($scope, $uibModalInstance, cartService) {
+    $scope.cart = cartService.cart;
+
+    $scope.getCartSubtotal = cartService.getCartSubtotal;
+    console.log($scope.getCartSubtotal);
+
+    $scope.ok = function () {
+      $uibModalInstance.close("Some result");
+    };
+
+    $scope.cancel = function () {
+      $uibModalInstance.dismiss("cancel");
+    };
+  },
+]);
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		var oldMenu = angular.module("oldMenu", ["ngRoute"]);
		var oldMenu = angular.module("oldMenu", ["ngRoute", 'ui.bootstrap']);