From 2d512f71c4fb7ffa54899790168f02f3c434e11a Mon Sep 17 00:00:00 2001 From: l3limp Date: Tue, 6 Aug 2024 13:21:31 +0530 Subject: [PATCH] added require.js and search item by name --- directives/categoriesColumn.htm | 25 +- directives/homeNavbar.htm | 35 +- index.htm | 17 +- ng/app.js | 4 +- ng/controllers/bodyController.js | 18 +- ng/controllers/buyNowModalController.js | 72 ++--- .../buyNowModalInstanceController.js | 20 ++ ng/controllers/homeController.js | 303 ++++++++++-------- ng/controllers/itemDetailsController.js | 117 ++++--- ng/directives.js | 188 +++++------ ng/main.js | 45 +++ ng/routes.js | 9 +- ng/services.js | 224 ++++++------- pages/home.htm | 9 +- styles.css | 29 +- 15 files changed, 632 insertions(+), 483 deletions(-) create mode 100644 ng/controllers/buyNowModalInstanceController.js create mode 100644 ng/main.js diff --git a/directives/categoriesColumn.htm b/directives/categoriesColumn.htm index e977174..fc95263 100644 --- a/directives/categoriesColumn.htm +++ b/directives/categoriesColumn.htm @@ -1,13 +1,14 @@ +
+

Categories

-
-
- - {{category}} - -
-
\ No newline at end of file +
+ + {{category}} + +
+
diff --git a/directives/homeNavbar.htm b/directives/homeNavbar.htm index 574dc01..62beeff 100644 --- a/directives/homeNavbar.htm +++ b/directives/homeNavbar.htm @@ -1,7 +1,32 @@
-
-
Categories
-
    +
    +
      +
    • + +
      + +
      + + +
      + +
      +
    • @@ -28,7 +53,7 @@ style="color: slategrey" ng-click="toggleFilterModalVisibility()" > - + > - + OldMenu @@ -23,10 +23,6 @@ } - - - -
      @@ -47,14 +43,7 @@ >
    - - - - - - - - - + + diff --git a/ng/app.js b/ng/app.js index bfe1d27..5915b5b 100644 --- a/ng/app.js +++ b/ng/app.js @@ -1 +1,3 @@ -var oldMenu = angular.module("oldMenu", ["ngRoute", 'ui.bootstrap']); +define(["angular", "angular-route", "ui-bootstrap"], function (angular) { + return angular.module("oldMenu", ["ngRoute", "ui.bootstrap"]); +}); diff --git a/ng/controllers/bodyController.js b/ng/controllers/bodyController.js index 6f8c719..9c88d36 100644 --- a/ng/controllers/bodyController.js +++ b/ng/controllers/bodyController.js @@ -1,4 +1,5 @@ -oldMenu.controller("bodyController", [ +define(["app"], function (oldMenu) { + oldMenu.controller("bodyController", [ "$scope", "cartService", "cacheService", @@ -6,18 +7,23 @@ oldMenu.controller("bodyController", [ $scope.isCartOpen = false; $scope.cart = cartService.cart; - $scope.$watch('cart', function(newValue) { - cacheService.setData('cart', newValue); - }, true); + $scope.$watch( + "cart", + function (newValue) { + cacheService.setData("cart", newValue); + }, + true + ); $scope.toggleCartVisibility = function () { $scope.isCartOpen = !$scope.isCartOpen; }; - + $scope.getCartQuantity = cartService.getCartQuantity; $scope.changeItemQuantityInCart = cartService.changeItemQuantityInCart; $scope.getCartSubtotal = cartService.getCartSubtotal; $scope.getCartSubtotalWithoutDiscount = cartService.getCartSubtotalWithoutDiscount; }, - ]); \ No newline at end of file + ]); +}); diff --git a/ng/controllers/buyNowModalController.js b/ng/controllers/buyNowModalController.js index a842733..4fabb48 100644 --- a/ng/controllers/buyNowModalController.js +++ b/ng/controllers/buyNowModalController.js @@ -1,46 +1,28 @@ -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, - }, - }); +define(["app"], function (oldMenu) { + 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"); - }; - }, -]); + modalInstance.result.then( + function (selectedItem) { + $scope.selected = selectedItem; + }, + function () { + console.log("Modal dismissed"); + } + ); + }; + }, + ]); +}); diff --git a/ng/controllers/buyNowModalInstanceController.js b/ng/controllers/buyNowModalInstanceController.js new file mode 100644 index 0000000..36cc266 --- /dev/null +++ b/ng/controllers/buyNowModalInstanceController.js @@ -0,0 +1,20 @@ +define(["app"], function (oldMenu) { + oldMenu.controller("ModalInstanceController", [ + "$scope", + "$uibModalInstance", + "cartService", + function ($scope, $uibModalInstance, cartService) { + $scope.cart = cartService.cart; + + $scope.getCartSubtotal = cartService.getCartSubtotal; + + $scope.ok = function () { + $uibModalInstance.close("Some result"); + }; + + $scope.cancel = function () { + $uibModalInstance.dismiss("cancel"); + }; + }, + ]); +}); diff --git a/ng/controllers/homeController.js b/ng/controllers/homeController.js index 2b00f92..eddd22d 100644 --- a/ng/controllers/homeController.js +++ b/ng/controllers/homeController.js @@ -1,133 +1,178 @@ -oldMenu.controller("homeController", [ - "$scope", - "$location", - "$http", - "$anchorScroll", - "itemService", - "cartService", - "filtersService", - "categoryService", - "cacheService", - "$log", - function ( - $scope, - $location, - $http, - $anchorScroll, - itemService, - cartService, - filtersService, - categoryService, - cacheService, - $log - ) { - $scope.types = ["Veg", "Non Veg", "Contains Egg"]; - - // known bug: clicking on one category redirects you to that, but doesnt show on the categories list until clicked again, I do not know the cause - $scope.currentCategory = categoryService.currentCategory; - - $scope.categoriesMap = {}; - $scope.cart = cartService.cart; - $scope.showFilterModal = false; - - $scope.$watch('cart', function(newValue) { - cacheService.setData('cart', newValue); - }, true); - - $scope.loadData = async function () { - try { - const [itemsResponse, categoriesResponse, cuisineResponse] = - await Promise.all([ - $http.get("http://localhost:3000/items"), - $http.get("http://localhost:3000/categories"), - $http.get("http://localhost:3000/cuisines"), - ]); - - const items = itemsResponse.data.items; - const categories = categoriesResponse.data.categories; - const cuisines = cuisineResponse.data.cuisines; - - $log.log(items); - $log.log(categories); - $log.log(cuisines); - - $scope.$apply(function () { - $scope.items = items; - $scope.categories = categories; - $scope.cuisines = cuisines; - - $scope.categories.forEach(function (category) { - $scope.categoriesMap[category] = []; +define(["app"], function (oldMenu) { + oldMenu.controller("homeController", [ + "$scope", + "$location", + "$http", + "$anchorScroll", + "itemService", + "cartService", + "filtersService", + "categoryService", + "cacheService", + "$log", + function ( + $scope, + $location, + $http, + $anchorScroll, + itemService, + cartService, + filtersService, + categoryService, + cacheService, + $log + ) { + $scope.types = ["Veg", "Non Veg", "Contains Egg"]; + + // known bug: clicking on one category redirects you to that, but doesnt show on the categories list until clicked again, I do not know the cause + $scope.currentCategory = categoryService.currentCategory; + + $scope.categoriesMap = {}; + $scope.cart = cartService.cart; + $scope.showFilterModal = false; + + $scope.$watch( + "cart", + function (newValue) { + cacheService.setData("cart", newValue); + }, + true + ); + + $scope.loadData = async function () { + try { + const [itemsResponse, categoriesResponse, cuisineResponse] = + await Promise.all([ + $http.get("http://localhost:3000/items"), + $http.get("http://localhost:3000/categories"), + $http.get("http://localhost:3000/cuisines"), + ]); + + const items = itemsResponse.data.items; + const categories = categoriesResponse.data.categories; + const cuisines = cuisineResponse.data.cuisines; + + $log.log(items); + $log.log(categories); + $log.log(cuisines); + + $scope.$apply(function () { + $scope.items = items; + $scope.categories = categories; + $scope.cuisines = cuisines; + + $scope.categories.forEach(function (category) { + $scope.categoriesMap[category] = []; + }); + + $scope.items.forEach(function (item) { + var category = item.category; + $scope.categoriesMap[category].push(item); + }); }); - $scope.items.forEach(function (item) { - var category = item.category; - $scope.categoriesMap[category].push(item); + itemService.items = items; + } catch (error) { + console.error("Error:", error); + } + }; + + $scope.searchQuery = ""; + $scope.loadSearchedItems = async function (searchQuery) { + if (searchQuery == "") { + $scope.searchQuery = ""; + } + try { + var config = { + params: { + q: searchQuery, + }, + }; + const itemsResponse = await $http.get( + "http://localhost:3000/items", + config + ); + + const items = itemsResponse.data.items; + + $log.log(items); + + $scope.$apply(function () { + $scope.items = items; + + $scope.categories.forEach(function (category) { + $scope.categoriesMap[category] = []; + }); + + $scope.items.forEach(function (item) { + var category = item.category; + $scope.categoriesMap[category].push(item); + }); }); - }); - - itemService.items = items; - } catch (error) { - console.error("Error:", error); - } - }; - - $scope.loadData(); - - $scope.toggleFilterModalVisibility = function () { - $scope.showFilterModal = !$scope.showFilterModal; - }; - - $scope.getDiscountPercentage = function (price, discountedPrice) { - return Math.round((100 * (price - discountedPrice)) / price); - }; - - var scrollTo = function (elementId) { - //some bug - // $location.hash(elementId); - // $anchorScroll(); - }; - - $scope.changeCategory = function (newCategory) { - categoryService.currentCategory = newCategory; - scrollTo(newCategory); - }; - - $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; - var isCuisineValid = false; - - if ($scope.typeFilter[type] === true) { - isTypeValid = true; - } - if ($scope.cuisineFilter[cuisine] === true) { - isCuisineValid = true; - } - - if (Object.keys($scope.typeFilter).length === 0) { - isTypeValid = true; - } - if (Object.keys($scope.cuisineFilter).length === 0) { - isCuisineValid = true; - } - - return isTypeValid && isCuisineValid; - }; - - $scope.sortItemsPriceAscending = function() { - for(category in $scope.categoriesMap) { - $scope.categoriesMap[category].sort((a,b)=>a.discountedPrice - b.discountedPrice); - } - }; - }, -]); - + itemService.items = items; + } catch (error) { + console.error("Error:", error); + } + }; + + $scope.loadData(); + + $scope.toggleFilterModalVisibility = function () { + $scope.showFilterModal = !$scope.showFilterModal; + }; + + $scope.getDiscountPercentage = function (price, discountedPrice) { + return Math.round((100 * (price - discountedPrice)) / price); + }; + + var scrollTo = function (elementId) { + //some bug + // $location.hash(elementId); + // $anchorScroll(); + }; + + $scope.changeCategory = function (newCategory) { + categoryService.currentCategory = newCategory; + scrollTo(newCategory); + }; + + $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; + var isCuisineValid = false; + + if ($scope.typeFilter[type] === true) { + isTypeValid = true; + } + if ($scope.cuisineFilter[cuisine] === true) { + isCuisineValid = true; + } + + if (Object.keys($scope.typeFilter).length === 0) { + isTypeValid = true; + } + if (Object.keys($scope.cuisineFilter).length === 0) { + isCuisineValid = true; + } + + return isTypeValid && isCuisineValid; + }; + + $scope.sortItemsPriceAscending = function () { + for (category in $scope.categoriesMap) { + $scope.categoriesMap[category].sort( + (a, b) => a.discountedPrice - b.discountedPrice + ); + } + }; + }, + ]); +}); diff --git a/ng/controllers/itemDetailsController.js b/ng/controllers/itemDetailsController.js index f112538..28e5fac 100644 --- a/ng/controllers/itemDetailsController.js +++ b/ng/controllers/itemDetailsController.js @@ -1,58 +1,71 @@ -oldMenu.controller("itemDetailsController", [ - "$scope", - "$routeParams", - "$http", - "itemDetailsService", - "cartService", - "cacheService", - function ($scope, $routeParams, $http, itemDetailsService, cartService, cacheService) { - $scope.itemId = $routeParams.itemId; +define(["app"], function (oldMenu) { + oldMenu.controller("itemDetailsController", [ + "$scope", + "$routeParams", + "$http", + "itemDetailsService", + "cartService", + "cacheService", + function ( + $scope, + $routeParams, + $http, + itemDetailsService, + cartService, + cacheService + ) { + $scope.itemId = $routeParams.itemId; - $scope.loadData = async function () { - try { - const response = await $http.get( - "http://localhost:3000/items/" + $scope.itemId - ); - const item = response.data; - $scope.$apply(function () { - $scope.item = item; - }); - itemDetailsService.item = item; - console.log($scope.item); - } catch (error) { - console.error("Error:", error); - } - }; + $scope.loadData = async function () { + try { + const response = await $http.get( + "http://localhost:3000/items/" + $scope.itemId + ); + const item = response.data; + $scope.$apply(function () { + $scope.item = item; + }); + itemDetailsService.item = item; + console.log($scope.item); + } catch (error) { + console.error("Error:", error); + } + }; - $scope.loadData(); - $scope.cart = cartService.cart; - $scope.$watch('cart', function(newValue) { - cacheService.setData('cart', newValue); - }, true); + $scope.loadData(); + $scope.cart = cartService.cart; + $scope.$watch( + "cart", + function (newValue) { + cacheService.setData("cart", newValue); + }, + true + ); - $scope.getDiscountPercentage = function (price, discountedPrice) { - return Math.round((100 * (price - discountedPrice)) / price); - }; + $scope.getDiscountPercentage = function (price, discountedPrice) { + return Math.round((100 * (price - discountedPrice)) / price); + }; - $scope.getCartQuantity = function (itemId) { - if ($scope.cart[itemId] != null) { - return $scope.cart[itemId].quantity; - } - return 0; - }; + $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.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.changeItemQuantityInCart = function (action, itemId) { + $scope.cart[itemId].quantity += action; + if ($scope.cart[itemId].quantity === 0) { + delete $scope.cart[itemId]; + } + cartService.cart = $scope.cart; + }; + }, + ]); +}); diff --git a/ng/directives.js b/ng/directives.js index 3276cf7..e81dcf4 100644 --- a/ng/directives.js +++ b/ng/directives.js @@ -1,123 +1,113 @@ - -oldMenu.directive('cartSidebar', function() { +define(["app"], function (oldMenu) { + oldMenu.directive("cartSidebar", function () { return { - templateUrl: 'directives/cartSidebar.htm', - replace: true, - scope: { - isCartOpen: '=', - cart: '=', - toggleCartVisibility: '&', - changeItemQuantityInCart: '&', - getCartQuantity: '&', - getCartSubtotal: '&', - getCartSubtotalWithoutDiscout: '&', - } + templateUrl: "directives/cartSidebar.htm", + replace: true, + scope: { + isCartOpen: "=", + cart: "=", + toggleCartVisibility: "&", + changeItemQuantityInCart: "&", + getCartQuantity: "&", + getCartSubtotal: "&", + getCartSubtotalWithoutDiscout: "&", + }, }; - -}); + }); -oldMenu.directive('filtersModal', function() { + oldMenu.directive("filtersModal", function () { return { - templateUrl: 'directives/filtersModal.htm', - replace: true, - scope: { - types: '=', - cuisines: '=', - showFilterModal:'=', - toggleFilter: '&', - isFilterSelected: '&', - toggleFilterModalVisibility: '&', - } + templateUrl: "directives/filtersModal.htm", + replace: true, + scope: { + types: "=", + cuisines: "=", + showFilterModal: "=", + toggleFilter: "&", + isFilterSelected: "&", + toggleFilterModalVisibility: "&", + }, }; - -}); + }); -oldMenu.directive('itemCard', function() { + oldMenu.directive("itemCard", function () { return { - templateUrl: 'directives/itemCard.htm', - replace: true, - scope: { - item: '=', - isDishToBeShown: '&', - getDiscountPercentage: '&', - getCartQuantity: '&', - addItemToCart: '&', - changeItemQuantityInCart: '&', - - } + templateUrl: "directives/itemCard.htm", + replace: true, + scope: { + item: "=", + isDishToBeShown: "&", + getDiscountPercentage: "&", + getCartQuantity: "&", + addItemToCart: "&", + changeItemQuantityInCart: "&", + }, }; - -}); + }); -oldMenu.directive('cartItemCard', function() { + oldMenu.directive("cartItemCard", function () { return { - templateUrl: 'directives/cartItemCard.htm', - replace: true, - scope: { - item: '=', - getCartQuantity: '&', - changeItemQuantityInCart: '&', - - } + templateUrl: "directives/cartItemCard.htm", + replace: true, + scope: { + item: "=", + getCartQuantity: "&", + changeItemQuantityInCart: "&", + }, }; - -}); + }); -oldMenu.directive('categoriesColumn', function() { + oldMenu.directive("categoriesColumn", function () { return { - templateUrl: 'directives/categoriesColumn.htm', - replace: true, - scope: { - currentCategory: '=', - categories: '=', - changeCategory: '&', - } + templateUrl: "directives/categoriesColumn.htm", + replace: true, + scope: { + currentCategory: "=", + categories: "=", + changeCategory: "&", + }, }; - -}); + }); -oldMenu.directive('filterSection', function() { + oldMenu.directive("filterSection", function () { return { - templateUrl: 'directives/filterSection.htm', - replace: true, - scope: { - list: '=', - title:'@', - filterSectionType:'@', - toggleFilter: '&', - isFilterSelected: '&', - - } + templateUrl: "directives/filterSection.htm", + replace: true, + scope: { + list: "=", + title: "@", + filterSectionType: "@", + toggleFilter: "&", + isFilterSelected: "&", + }, }; - -}); + }); -oldMenu.directive('homeNavbar', function() { + oldMenu.directive("homeNavbar", function () { return { - templateUrl: 'directives/homeNavbar.htm', - replace: true, - scope: { - types: '=', - cuisines: '=', - showFilterModal:'=', - toggleFilter: '&', - isFilterSelected: '&', - toggleFilterModalVisibility: '&', - sortItemsPriceAscending: '&', - } + templateUrl: "directives/homeNavbar.htm", + replace: true, + scope: { + types: "=", + cuisines: "=", + showFilterModal: "=", + toggleFilter: "&", + isFilterSelected: "&", + toggleFilterModalVisibility: "&", + sortItemsPriceAscending: "&", + loadSearchedItems: "&", + searchQuery: "=", + }, }; - -}); - + }); -oldMenu.directive('navbar', function() { + oldMenu.directive("navbar", function () { return { - templateUrl: 'directives/navbar.htm', - replace: true, - scope: { - toggleCartVisibility: '&', - } + templateUrl: "directives/navbar.htm", + replace: true, + scope: { + toggleCartVisibility: "&", + }, }; - + }); }); - diff --git a/ng/main.js b/ng/main.js new file mode 100644 index 0000000..8441c33 --- /dev/null +++ b/ng/main.js @@ -0,0 +1,45 @@ +require.config({ + paths: { + angular: "//code.angularjs.org/1.3.0-rc.1/angular.min", + "angular-route": "//code.angularjs.org/1.3.0-rc.1/angular-route.min", + "ui-bootstrap": + "//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min", + app: "app", + routes: "routes", + services: "services", + directives: "directives", + bodyController: "controllers/bodyController", + buyNowModalController: "controllers/buyNowModalController", + buyNowModalInstanceController: "controllers/buyNowModalInstanceController", + homeController: "controllers/homeController", + itemDetailsController: "controllers/itemDetailsController", + }, + shim: { + angular: { exports: "angular" }, + "angular-route": { deps: ["angular"] }, + "ui-bootstrap": { deps: ["angular"] }, + app: { deps: ["angular", "angular-route", "ui-bootstrap"] }, + routes: { deps: ["app"] }, + services: { deps: ["app"] }, + directives: { deps: ["app"] }, + bodyController: { deps: ["app"] }, + buyNowModalController: { deps: ["app"] }, + buyNowModalInstanceController: { deps: ["app"] }, + homeController: { deps: ["app"] }, + itemDetailsController: { deps: ["app"] }, + }, +}); + +require([ + "app", + "routes", + "services", + "directives", + "bodyController", + "buyNowModalController", + "buyNowModalInstanceController", + "homeController", + "itemDetailsController", +], function (app) { + angular.bootstrap(document, ["oldMenu"]); +}); diff --git a/ng/routes.js b/ng/routes.js index d6c50e2..3d05853 100644 --- a/ng/routes.js +++ b/ng/routes.js @@ -1,12 +1,13 @@ - -oldMenu.config(function ($routeProvider) { +define(["app"], function (oldMenu) { + oldMenu.config(function ($routeProvider) { $routeProvider .when("/", { templateUrl: "pages/home.htm", controller: "homeController", - }).when("/items/:itemId", { + }) + .when("/items/:itemId", { templateUrl: "pages/item_details.htm", controller: "itemDetailsController", }); }); - \ No newline at end of file +}); diff --git a/ng/services.js b/ng/services.js index 20cb22c..3de058b 100644 --- a/ng/services.js +++ b/ng/services.js @@ -1,125 +1,131 @@ -oldMenu.service("itemService", [ - function () { - this.items = []; - }, -]); - -// take this back to itemdetailscontroller when integrating with backend/db -// plan is to call an api to get description, ingredients and nutrition -oldMenu.service("itemDetailsService", [ - function () { - this.item = {}; - }, -]); +define(["app"], function (oldMenu) { + oldMenu.service("itemService", [ + function () { + this.items = []; + }, + ]); -oldMenu.service("cartService", [ "cacheService", + // take this back to itemdetailscontroller when integrating with backend/db + // plan is to call an api to get description, ingredients and nutrition + oldMenu.service("itemDetailsService", [ + function () { + this.item = {}; + }, + ]); - function (cacheService) { - this.cart = cacheService.getData('cart') || {}; + oldMenu.service("cartService", [ + "cacheService", - this.getCartSubtotal = function () { - var subtotal = 0; + function (cacheService) { + this.cart = cacheService.getData("cart") || {}; - for (key in this.cart) { - subtotal += this.cart[key].quantity * this.cart[key].discountedPrice; - } - return subtotal; - }; + this.getCartSubtotal = function () { + var subtotal = 0; - this.getCartSubtotalWithoutDiscount = function () { - var subtotalWithoutDiscount = 0; + for (key in this.cart) { + subtotal += this.cart[key].quantity * this.cart[key].discountedPrice; + } + return subtotal; + }; - for (key in this.cart) { - subtotalWithoutDiscount += - this.cart[key].quantity * this.cart[key].price; - } - return subtotalWithoutDiscount; - }; + this.getCartSubtotalWithoutDiscount = function () { + var subtotalWithoutDiscount = 0; - this.changeItemQuantityInCart = function (action, itemId) { - this.cart[itemId].quantity += action; - if (this.cart[itemId].quantity === 0) { - delete this.cart[itemId]; - } - }; + for (key in this.cart) { + subtotalWithoutDiscount += + this.cart[key].quantity * this.cart[key].price; + } + return subtotalWithoutDiscount; + }; - this.getCartQuantity = function (itemId) { - if (this.cart[itemId] != null) { - return this.cart[itemId].quantity; - } - return 0; - }; + this.changeItemQuantityInCart = function (action, itemId) { + this.cart[itemId].quantity += action; + if (this.cart[itemId].quantity === 0) { + delete this.cart[itemId]; + } + }; - this.addItemToCart = function (item) { - this.cart[item.id] = item; - this.cart[item.id].quantity = 1; - }; - }, -]); + this.getCartQuantity = function (itemId) { + if (this.cart[itemId] != null) { + return this.cart[itemId].quantity; + } + return 0; + }; -oldMenu.service("filtersService", [ - function () { - this.typeFilter = {}; - this.cuisineFilter = {}; + this.addItemToCart = function (item) { + this.cart[item.id] = item; + this.cart[item.id].quantity = 1; + }; + }, + ]); - this.isFilterSelected = function (filterType, property) { - switch (filterType) { - case "type": - if (this.typeFilter[property] === true) { - return true; - } - break; - case "cuisine": - if (this.cuisineFilter[property] === true) { - return true; - } - break; - default: - break; - } - return false; - }; + oldMenu.service("filtersService", [ + function () { + this.typeFilter = {}; + this.cuisineFilter = {}; - this.toggleFilter = function (filterType, property) { - switch (filterType) { - case "type": - if (this.typeFilter[property] === true) { - delete this.typeFilter[property]; - } else { - this.typeFilter[property] = true; - } - break; - case "cuisine": - if (this.cuisineFilter[property] === true) { - delete this.cuisineFilter[property]; - } else { - this.cuisineFilter[property] = true; - } - break; - default: - break; - } - }; - }, -]); + this.isFilterSelected = function (filterType, property) { + switch (filterType) { + case "type": + if (this.typeFilter[property] === true) { + return true; + } + break; + case "cuisine": + if (this.cuisineFilter[property] === true) { + return true; + } + break; + default: + break; + } + return false; + }; -// had to make this service as the url kept changing on selecting a category, which reinitialised the controller and thus, currentCategory to 'bowl' -oldMenu.service("categoryService", [ - function () { - this.currentCategory = "Bowl"; - }, -]); + this.toggleFilter = function (filterType, property) { + switch (filterType) { + case "type": + if (this.typeFilter[property] === true) { + delete this.typeFilter[property]; + } else { + this.typeFilter[property] = true; + } + break; + case "cuisine": + if (this.cuisineFilter[property] === true) { + delete this.cuisineFilter[property]; + } else { + this.cuisineFilter[property] = true; + } + break; + default: + break; + } + }; + }, + ]); -angular.module('oldMenu').service('cacheService', function($window) { - return { - setData: function(key, data) { - $window.localStorage.setItem(key, angular.toJson(data)); + // had to make this service as the url kept changing on selecting a category, which reinitialised the controller and thus, currentCategory to 'bowl' + oldMenu.service("categoryService", [ + function () { + this.currentCategory = "Bowls"; }, - getData: function(key) { - return angular.fromJson($window.localStorage.getItem(key)); + ]); + + oldMenu.service("cacheService", [ + "$window", + function ($window) { + return { + setData: function (key, data) { + $window.localStorage.setItem(key, angular.toJson(data)); + }, + getData: function (key) { + return angular.fromJson($window.localStorage.getItem(key)); + }, + removeData: function (key) { + $window.localStorage.removeItem(key); + }, + }; }, - removeData: function(key) { - $window.localStorage.removeItem(key); - } - }; -}); \ No newline at end of file + ]); +}); diff --git a/pages/home.htm b/pages/home.htm index 7969d76..7ffcd83 100644 --- a/pages/home.htm +++ b/pages/home.htm @@ -6,17 +6,18 @@ toggle-filter-modal-visibility="toggleFilterModalVisibility()" is-filter-selected="isFilterSelected(filterType, property)" sort-items-price-ascending="sortItemsPriceAscending()" + load-searched-items="loadSearchedItems(searchQuery)" + search-query="searchQuery" > - - -
    - +

    {{category}}

    diff --git a/styles.css b/styles.css index e20c530..33e14c5 100644 --- a/styles.css +++ b/styles.css @@ -41,6 +41,29 @@ } } +.input-wrapper { + position: relative; +} + +.input-wrapper .form-control { + padding-right: 30px; /* Adjust as needed */ +} + +.input-wrapper .search-icon { + position: absolute; + top: 50%; + right: 24px; + transform: translateY(-50%); + /* Allows clicks to pass through to the input */ +} + +.clear-icon { + position: absolute; + top: 50%; + right: 0px; + transform: translateY(-50%); +} + .vertical-margin { margin-top: 12px; margin-bottom: 12px; @@ -92,7 +115,7 @@ height: 72%; width: 164px; position: fixed; - top: 188px; + top: 156px; } /* for testing */ @@ -128,11 +151,11 @@ .apply-filter-button { background-color: steelblue; - position: absolute; + position:sticky; width: 100%; text-align: center; height: 10%; - bottom: 0; + bottom: 0%; color: white; border-radius: 0px; align-content: center;