Restaurant Sass Mobile App

Components

  • Home
  • All restaurant list
  • Restaurant details
  • Product details
  • Cart
  • Confirm order
  • Payment
  • Thank you
  • Menu
  • Location Changer

Home

  • Location: The folder can be found under
    src/pages/home/
    containing following files
    src/pages/home/home.html
    src/pages/home/home.ts
    src/pages/home/home.service.ts
    src/pages/home/home.module.ts

  • Home.html contains images slider to display offers with images and three section to show categories based on Near By restaurants, Newly arrived restaurants and Top rated restaurants.

  • Home.ts loads restaurants list 1) based on location taken from current location of customer 2) based on rating submitted by customers 3) based on newly created restaurants. (limited to 10 restaurants)

  • Home.service.ts calls backend via GET and POST methods to get restaurants info according to rating, location and newly added restaurants. one backend call accepts longitude and latitude based on customers current location.

  • Home.module.ts declares different modules required on home page plus it provides various service injections for home page.

All Restaurant List

  • Location: The folder can be found under
    src/pages/all-restaurant-list/
    containing following files
    src/pages/all-restaurant-list/all-restaurant-list.html
    src/pages/all-restaurant-list/all-restaurant-list.ts
    src/pages/all-restaurant-list/all-restaurant-list.service.ts
    src/pages/all-restaurant-list/all-restaurant-list.module.ts

  • All-restaurant-list.html serves list of all available restaurants based on category choosen from home page.

  • All-restaurant-list.ts loads restaurants list 1) based on location taken from current location of customer 2) based on rating submitted by customers 3) based on newly created restaurants here it shows all restaurant list but one category at a time based on sorting techniques provided by backend.

  • All-restaurant-list.service.ts calls backend via GET and POST methods to get restaurants info according to rating, location and newly added restaurants. one backend call accepts longitude and latitude based on customer's current location.

  • All-restaurant-list.module.ts declares different modules required on all-restaurant-list page plus it provides various service injections for all-restaurant-list page.

Restaurant Details

  • Location: The folder can be found under
    src/pages/home/restaurant-details/
    containing following files
    src/pages/restaurant-details/restaurant-details.html
    src/pages/restaurant-details/restaurant-details.ts
    src/pages/restaurant-details/restaurant-details.service.ts
    src/pages/restaurant-details/restaurant-details.module.ts

  • restaurant-details.html renders categorized product list of selected restaurant with product image in addition to eye catching information about restaurant i.e, 1) Real time info about restaurant is open or not at a time of viewing restaurant 2) Delivery charges of selected restaurants 3) Rating of restaurant 4) Delivery time 5) customer can initialize direct chat with manager of selected restaurant.

  • restaurant-details.ts contains logic 1) To calculate opening/closing timing from received data. 2) To get list of products from backend side. 3) calculates cart items if somethings is there it will show button to go ahead for checkout via cart page.

  • restaurant-details.service.ts calls backend via GET methods to get restaurant timing information, product information, category information and contact information

  • restaurant-details.module.ts declares different modules required on restaurant-details page plus it provides various service injections for restaurant-details page.

Product Details

  • Location: The folder can be found under
    src/pages/product-details/
    containing following files
    src/pages/product-details/product-details.html
    src/pages/product-details/product-details.ts
    src/pages/product-details/product-details.service.ts
    src/pages/product-details/product-details.module.ts

  • product-details.html renders detailed infromation of products incuding price, discount, avilable sizes. one can increment/decrement number of quantity to be added in cart. plus user can add/remove product on favourite list.

  • product-details.ts calls service to favourite/unfavourite information from backend. It contains logic to add item on cart with related price based on selected quantity and size.

  • product-details.service.ts calls backend via GET and POST methods to add or remove items from favourite list.

  • product-details.module.ts declares different modules required on product-details page plus it provides various service injections for product details page.

Cart

  • Location: The folder can be found under
    src/pages/cart/
    containing following files
    src/pages/cart/cart.html
    src/pages/cart/cart.ts
    src/pages/cart/cart.service.ts
    src/pages/cart/cart.module.ts

  • cart.html shows list of products added on cart by customer with number of quantity that will also be adujstable from this page. and It also shows loyalty points and promo codes if available.

  • cart.ts fetches user data to get user's loyalty information and restaurant's promo codes. It calcutes prices according to changes made by user on changing number of quantity. customer can remove product(s) if later on customer change their mind.

  • cart.service.ts calls backend via GET methods to get loyalty point information of logged in user.

  • cart.module.ts declares different modules required on cart page plus it provides various service injections for cart page.

Confirm order

  • Location: The folder can be found under
    src/pages/confirm-order/
    containing following files
    src/pages/confirm-order/confirm-order.html
    src/pages/confirm-order/confirm-order.ts
    src/pages/confirm-order/confirm-order.service.ts
    src/pages/confirm-order/confirm-order.module.ts

  • confirm-order.html displays final confirmation including tax, delivery charges and grand total that user need to pay before checkout. and allow user's to select address to which delivery will happen.

  • confirm-order.ts contains logic to check that delivery is posible on selected address based on pincode list provided by restaurant manager. It will not allow to go ahead without selection of address.

  • confirm-order.service.ts calls backend via GET and DELETE methods to get address list and delete selected address respectively.

  • confirm-order.module.ts declares different modules required on confirm-order page plus it provides various service injections for confirm-order page.

Payment

  • Location: The folder can be found under
    src/pages/payment/
    containing following files
    src/pages/payment/payment.html
    src/pages/payment/payment.ts
    src/pages/payment/payment.service.ts
    src/pages/payment/payment.module.ts

  • payment.html contails UI to show list of payment methods to choose from. available payment methods are 1) PayPal 2) Stripe 3) Cash on Delivery. need to choose anyone to make payment.

  • payment.ts will place order based on selected payment method and it will send order information to backend.

  • payment.service.ts calls PUT and POST methods to make connection with restaurant backend as well as stripe or PayPal backend based on choosen payment method.

  • payment.module.ts declares different modules required on payment page plus it provides various service injections for payment page.

Thank you

  • Location: The folder can be found under
    src/pages/thankyou/
    containing following files
    src/pages/thankyou/thankyou.html
    src/pages/thankyou/thankyou.ts

  • thankyou.html shows confirmation after order gets placed.

  • thankyou.ts contains method to route user back to homepage.

Menu

  • Location: The folder can be found under
    src/app/
    containing following files
    src/app/app.html
    src/app/app.component.ts
    src/app/app.module.ts
    src/app/constant.service.ts

  • app.html shows Menu containing list of buttons to goto that page. i.e, 1) Home 2) Cart 3) Order History 4) Favourites 5) Chat 6) Profile 7) Settings 8) Supports 9) About 10) login/logout

  • app.component.ts contains logic to set homepage as root page or location-changer page as root page based on distance between previous location and current location.

  • app.module.ts contains declarations, imports, entrycomponents and providers used throughout app.

  • constant.service.ts contains constant varibles for changing backend's base urls.

Location changer

  • Location: The folder can be found under
    src/pages/location-changer/
    containing following files
    src/pages/location-changer/location-changer.html
    src/pages/location-changer/location-changer.ts

  • location-changer.html provides view containing 1) button to choose current location 2) input to search location 3) list to choose from previously used locations.

  • location-changer.ts fetches current user location and previously used location before page load and removes related entries before leaving page if needed. It also seaches location based on user's entries on search input.

results matching ""

    No results matching ""