From c8088013966dcd8c61308b955b537ef9c15383c9 Mon Sep 17 00:00:00 2001 From: kj1352 Date: Mon, 14 Dec 2020 18:27:20 +0530 Subject: [PATCH] Added loaders for better UX --- .../forgot-password/forgot-password.page.ts | 27 +++++++++++++- src/app/login/login.page.ts | 23 +++++++++++- src/app/malls/malls.page.ts | 18 ++++++++- src/app/onboarding/onboarding.page.ts | 37 ++++++++++++++++--- src/app/orders/orders.component.ts | 34 +++++++++++------ 5 files changed, 117 insertions(+), 22 deletions(-) diff --git a/src/app/forgot-password/forgot-password.page.ts b/src/app/forgot-password/forgot-password.page.ts index 0fada57..7948267 100644 --- a/src/app/forgot-password/forgot-password.page.ts +++ b/src/app/forgot-password/forgot-password.page.ts @@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core'; import { AuthService } from '../services/auth.service'; import { ToastService } from '../services/toast.service'; import { Router } from '@angular/router'; +import { LoadingController } from '@ionic/angular'; @Component({ selector: 'app-forgot-password', @@ -13,35 +14,55 @@ export class ForgotPasswordPage implements OnInit { otp: string | number = ''; newPassword: string = ''; + loader: any; + stepType: 'EMAIL' | 'OTP' | 'RESET' = 'EMAIL'; constructor( private authService: AuthService, private toastService: ToastService, - private router: Router + private router: Router, + public loadingController: LoadingController ) { } ngOnInit() { } + async presentLoading() { + this.loader = await this.loadingController.create({ + message: 'Please wait...', + spinner: 'dots', + mode: 'ios' + }); + await this.loader.present(); + } + ionViewDidEnter() { document.querySelector('.menu-icon-holder').classList.add('hide'); } getOtp() { + this.presentLoading(); + this.authService.forgotPassword(this.email).then(() => { + this.loader.dismiss(); this.toastService.presentToast("OTP Sent to your Email ID", "success"); this.stepType = 'OTP'; }, () => { + this.loader.dismiss(); this.toastService.presentToast("Failed to send OTP, Please check your credentials", "danger"); }); } verifyOtp() { + this.presentLoading(); + this.authService.validateOtpForForgotPassword({ email: this.email, otp: this.otp }).then(() => { this.toastService.presentToast("Verified", "success"); this.stepType = 'RESET'; + this.loader.dismiss(); }, () => { + this.loader.dismiss(); this.toastService.presentToast("Verification failed, please try again", "danger"); }); } @@ -54,11 +75,15 @@ export class ForgotPasswordPage implements OnInit { reEnteredPassword: this.newPassword }; + this.presentLoading(); + this.authService.resetPasswordForEmail(credentials).then(() => { + this.loader.dismiss(); this.toastService.presentToast("Password Reset Complete", "success"); this.router.navigate(['/login']); this.stepType = 'EMAIL'; }, () => { + this.loader.dismiss(); this.toastService.presentToast("Please check your password", "danger"); }); } diff --git a/src/app/login/login.page.ts b/src/app/login/login.page.ts index c4e1357..0b3bcaf 100644 --- a/src/app/login/login.page.ts +++ b/src/app/login/login.page.ts @@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; import { AuthService } from '../services/auth.service'; import { ToastService } from '../services/toast.service'; +import { LoadingController } from '@ionic/angular'; @Component({ selector: 'app-login', @@ -17,16 +18,28 @@ export class LoginPage implements OnInit { show_password = false; + loader: any; + constructor( private router: Router, private authService: AuthService, - public toastService: ToastService + public toastService: ToastService, + public loadingController: LoadingController ) { } ionViewDidEnter() { document.querySelector('.menu-icon-holder').classList.add('hide'); } + async presentLoading() { + this.loader = await this.loadingController.create({ + message: 'Please wait...', + spinner: 'dots', + mode: 'ios' + }); + await this.loader.present(); + } + ngOnInit() { } @@ -35,13 +48,19 @@ export class LoginPage implements OnInit { } login() { + this.presentLoading(); + this.authService.authenticateUser(this.credentials).then((data: any) => { localStorage.userInfo = JSON.stringify(data); localStorage.access_Token = data.access_Token; + + this.loader.dismiss(); + this.router.navigate(['/malls']); document.querySelector('.menu-icon-holder').classList.remove('hide'); }, (err) => { - console.log(err); + this.loader.dismiss(); + this.toastService.presentToast('Please check your credentials', 'danger'); }) } diff --git a/src/app/malls/malls.page.ts b/src/app/malls/malls.page.ts index 75ab682..aa29866 100644 --- a/src/app/malls/malls.page.ts +++ b/src/app/malls/malls.page.ts @@ -2,6 +2,7 @@ import { Component, OnInit, ViewChild,ElementRef } from '@angular/core'; import { MallService } from '../services/mall.service'; import { ToastService } from '../services/toast.service'; import { Router } from '@angular/router'; +import { LoadingController } from '@ionic/angular'; @Component({ selector: 'app-malls', @@ -18,13 +19,23 @@ export class MallsPage implements OnInit { selected_sort: string = null; searchTerm: string = ''; selectedFoodType: string = ''; + loader: any; constructor( private mallService: MallService, private router: Router, - private toastService: ToastService + private toastService: ToastService, + public loadingController: LoadingController ) { } + async presentLoading() { + this.loader = await this.loadingController.create({ + message: 'Please wait...', + spinner: 'dots', + mode: 'ios' + }); + await this.loader.present(); + } getMallsByFoodType(type: string) { this.selectedFoodType = type; @@ -103,16 +114,19 @@ export class MallsPage implements OnInit { getMallsByLocation() { if (navigator.geolocation) { this.toastService.presentToast("Getting malls based on your location...", "dark"); + this.presentLoading(); navigator.geolocation.getCurrentPosition((position) => { this.mallService.mallsByLocation(position.coords.latitude, position.coords.longitude).then((response: any) => { if (response.length > 0) { this.allMalls = response; this.tempMalls = response; + this.loader.dismiss(); } else { this.toastService.presentToast("No malls near you your location, Getting all the malls...", "warning"); this.getAllMalls(); } }, () => { + this.loader.dismiss(); this.toastService.presentToast("Failed to fetch malls for your location", "danger"); }); }); @@ -125,7 +139,9 @@ export class MallsPage implements OnInit { this.mallService.allMalls().then((response) => { this.allMalls = response; this.tempMalls = response; + this.loader.dismiss(); }, (error) => { + this.loader.dismiss(); console.log(error); }); } diff --git a/src/app/onboarding/onboarding.page.ts b/src/app/onboarding/onboarding.page.ts index a4f1fc1..b8f427e 100644 --- a/src/app/onboarding/onboarding.page.ts +++ b/src/app/onboarding/onboarding.page.ts @@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; import { AuthService } from '../services/auth.service'; import { ToastService } from '../services/toast.service'; +import { LoadingController } from '@ionic/angular'; @Component({ selector: 'app-onboarding', @@ -27,11 +28,23 @@ export class OnboardingPage implements OnInit { has_special = false; otp: string = ''; + loader: any; + constructor( private router: Router, private authService: AuthService, - public toastService: ToastService - ) { } + public toastService: ToastService, + public loadingController: LoadingController + ) { } + + async presentLoading() { + this.loader = await this.loadingController.create({ + message: 'Please wait...', + spinner: 'dots', + mode: 'ios' + }); + await this.loader.present(); + } ionViewDidEnter() { document.querySelector('.menu-icon-holder').classList.add('hide'); @@ -83,27 +96,35 @@ export class OnboardingPage implements OnInit { } validateUser() { - this.authService.validateOtpForEmail({ email: this.credentials.email, otp: this.otp }).then((data) => { - console.log(data); + this.presentLoading(); + + this.authService.validateOtpForEmail({ email: this.credentials.email, otp: this.otp }).then(() => { + this.loader.dismiss(); this.toastService.presentToast("Verified!", "success"); this.nextPage(); }, (err) => { + this.loader.dismiss(); console.log(err); this.toastService.presentToast("Failed to verify, try again", "danger"); }) } registerUser() { - this.authService.signupUser(this.credentials).then((data) => { - console.log(data); + this.presentLoading(); + + this.authService.signupUser(this.credentials).then(() => { + this.loader.dismiss(); this.nextPage(); }, (err) => { console.log(err); + this.loader.dismiss(); this.toastService.presentToast("Failed to create user", "danger"); }); } autoLogin() { + this.presentLoading(); + this.authService.authenticateUser({ username: this.credentials.username, password: this.credentials.password, @@ -111,9 +132,13 @@ export class OnboardingPage implements OnInit { }).then((data: any) => { localStorage.userInfo = JSON.stringify(data); localStorage.access_Token = data.access_Token; + + this.loader.dismiss(); + this.router.navigate(['/malls']); document.querySelector('.menu-icon-holder').classList.remove('hide'); }, (err) => { + this.loader.dismiss(); console.log(err); this.toastService.presentToast('Please check your credentials', 'danger'); }) diff --git a/src/app/orders/orders.component.ts b/src/app/orders/orders.component.ts index aacb237..d861603 100644 --- a/src/app/orders/orders.component.ts +++ b/src/app/orders/orders.component.ts @@ -4,6 +4,7 @@ import * as moment from 'moment'; import { ICart } from '../cart/cart.page'; import { Router } from '@angular/router'; import { ToastService } from '../services/toast.service'; +import { LoadingController } from '@ionic/angular'; @Component({ selector: 'app-orders', @@ -30,12 +31,24 @@ export class OrdersComponent implements OnInit { rating: null, }; + loader: any; + constructor( private orderService: OrderService, private router: Router, - private toastService: ToastService + private toastService: ToastService, + public loadingController: LoadingController ) { } + async presentLoading() { + this.loader = await this.loadingController.create({ + message: 'Please wait...', + spinner: 'dots', + mode: 'ios' + }); + await this.loader.present(); + } + submitFeedbackForOrder() { this.tempReview.app_user.user_id = this.userInfo.id; @@ -64,16 +77,7 @@ export class OrdersComponent implements OnInit { }, () => { this.toastService.presentToast("Failed to send review", "danger"); - }); - - // this.selectedOrder = null; - // this.tempReview = { - // app_user: { - // user_id: null - // }, - // comment: '', - // rating: null, - // }; + }); } getOrderInUsercardFormat(orderedlist: any) { @@ -99,11 +103,17 @@ export class OrdersComponent implements OnInit { ngOnInit() { this.userInfo = JSON.parse(localStorage.userInfo)['User Info']; + this.presentLoading(); + this.orderService.getOrders(this.userInfo.id).then((resp: any)=> { - this.userOrders = resp.reverse(); + this.userOrders = resp.reverse(); + + this.loader ? this.loader.dismiss() : null; }, (err) => { console.log(err); this.toastService.presentToast("Failed to get orders"); + + this.loader ? this.loader.dismiss() : null; }); this.orderService.getAllOrderStatus().then((data) => {