diff --git a/package-lock.json b/package-lock.json index ac6bd7b..0aa586e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,6 +21,7 @@ "@fortawesome/free-brands-svg-icons": "^6.4.0", "@fortawesome/free-regular-svg-icons": "^6.4.0", "@fortawesome/free-solid-svg-icons": "^6.4.0", + "alertifyjs": "^1.13.1", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.13.0" @@ -3979,6 +3980,11 @@ "ajv": "^8.8.2" } }, + "node_modules/alertifyjs": { + "version": "1.13.1", + "resolved": "https://registry.npmjs.org/alertifyjs/-/alertifyjs-1.13.1.tgz", + "integrity": "sha512-CckZE2dZDsEEXglOXKxT00vUDV5A6udZom+bn1XHdIWlbSFZgYq7UXCBlwkShhIH3Li/1VxLmr55GOQFQ12WSg==" + }, "node_modules/ansi-colors": { "version": "4.1.3", "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz", diff --git a/package.json b/package.json index ade85ed..5bc993e 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "@fortawesome/free-brands-svg-icons": "^6.4.0", "@fortawesome/free-regular-svg-icons": "^6.4.0", "@fortawesome/free-solid-svg-icons": "^6.4.0", + "alertifyjs": "^1.13.1", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.13.0" diff --git a/src/app/alertifyjs.d.ts b/src/app/alertifyjs.d.ts new file mode 100644 index 0000000..1f08337 --- /dev/null +++ b/src/app/alertifyjs.d.ts @@ -0,0 +1 @@ +declare module 'alertifyjs'; \ No newline at end of file diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 11db1f2..cc864fb 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -11,6 +11,7 @@ import { HoroscopeDataContainerComponent } from './horoscope-data-container/horo import { NavBarComponent } from './nav-bar/nav-bar.component'; import { NumerologyComponent } from './numerology/numerology.component'; + @NgModule({ declarations: [ AppComponent, diff --git a/src/app/horoscope-data-container/horoscope-data-container.component.html b/src/app/horoscope-data-container/horoscope-data-container.component.html index d0b5b18..ba76e82 100644 --- a/src/app/horoscope-data-container/horoscope-data-container.component.html +++ b/src/app/horoscope-data-container/horoscope-data-container.component.html @@ -1,6 +1,6 @@ -
+
diff --git a/src/app/horoscope-data-container/horoscope-data-container.component.ts b/src/app/horoscope-data-container/horoscope-data-container.component.ts index 61742f3..e0fdb84 100644 --- a/src/app/horoscope-data-container/horoscope-data-container.component.ts +++ b/src/app/horoscope-data-container/horoscope-data-container.component.ts @@ -17,6 +17,7 @@ export class HoroscopeDataContainerComponent implements OnInit { public sunSign: string = 'Libra' public horoscopeData1?: HoroscopeData; public gender: string = 'woman'; + errormessage: any constructor (private openHoroscopeService: OpenHoroscopeService) { @@ -40,7 +41,7 @@ export class HoroscopeDataContainerComponent implements OnInit { console.log(response); }, error: (error) => { - console.log(error); + this.errormessage = error; } }); diff --git a/src/app/numerology/numerology.component.html b/src/app/numerology/numerology.component.html index ed192e6..98edc48 100644 --- a/src/app/numerology/numerology.component.html +++ b/src/app/numerology/numerology.component.html @@ -1,5 +1,5 @@ -
+
diff --git a/src/app/numerology/numerology.component.ts b/src/app/numerology/numerology.component.ts index dbb7870..0707642 100644 --- a/src/app/numerology/numerology.component.ts +++ b/src/app/numerology/numerology.component.ts @@ -12,6 +12,7 @@ export class NumerologyComponent implements OnInit{ public number: string = '7' public numerologyData?: NumerologyData + errormessage: any constructor (private openNumerologyService: OpenNumerologyService) {} @@ -31,6 +32,9 @@ export class NumerologyComponent implements OnInit{ next: (response) => { this.numerologyData = response; console.log(response); + }, + error: (error) => { + this.errormessage = error; } }); } diff --git a/src/app/open-horoscope/open-horoscope.service.ts b/src/app/open-horoscope/open-horoscope.service.ts index 3cc5b83..6492d84 100644 --- a/src/app/open-horoscope/open-horoscope.service.ts +++ b/src/app/open-horoscope/open-horoscope.service.ts @@ -1,7 +1,8 @@ import { Injectable } from '@angular/core'; -import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http'; -import { Observable } from 'rxjs'; +import { HttpClient, HttpErrorResponse, HttpHeaders, HttpParams } from '@angular/common/http'; +import { Observable, catchError, throwError } from 'rxjs'; import { HoroscopeData } from '../models/horoscope.model'; +import * as alertifyjs from 'alertifyjs'; @Injectable({ providedIn: 'root' @@ -20,7 +21,24 @@ export class OpenHoroscopeService { const params = new HttpParams() .set('s', location.toLowerCase()); - return this.http.get(url, {headers, params}); + return this.http.get(url, {headers, params}) + .pipe( + catchError(this.handleError) + ); + } + + private handleError(error: HttpErrorResponse) { + let errormessage = ''; + if (error.status === 0) { + console.error('An error occurred:', error.error); + } else { + console.error( + `Backend returned code ${error.status}, body was: `, error.error); + errormessage = `Backend returned code ${error.status},\n`, error.error; + } + errormessage += 'Something bad happened; please try again later.'; + alertifyjs.error(errormessage); + return throwError(() => new Error(errormessage)); } } diff --git a/src/app/open-numerology/open-numerology.service.ts b/src/app/open-numerology/open-numerology.service.ts index a4a9fdf..1836c9f 100644 --- a/src/app/open-numerology/open-numerology.service.ts +++ b/src/app/open-numerology/open-numerology.service.ts @@ -1,7 +1,9 @@ -import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http'; +import { HttpClient, HttpErrorResponse, HttpHeaders, HttpParams, HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http'; import { Injectable } from '@angular/core'; import { NumerologyData } from '../models/numerology.model'; import { Observable } from 'rxjs/internal/Observable'; +import { catchError, throwError } from 'rxjs'; +import * as alertifyjs from 'alertifyjs'; @Injectable({ providedIn: 'root' @@ -20,7 +22,22 @@ export class OpenNumerologyService { const params = new HttpParams() .set('n', number.toLowerCase()); - return this.http.get(url, {headers, params}); + return this.http.get(url, {headers, params}) + .pipe(catchError(this.handleError)); + } + private handleError(error: HttpErrorResponse) { + let errormessage = ''; + if (error.status === 0) { + console.error('An error occurred:', error.error); + } else { + console.error( + `Backend returned code ${error.status}, body was: `, error.error); + errormessage = `Backend returned code ${error.status},\n`, error.error; + } + errormessage += 'Something bad happened; please try again later.'; + alertifyjs.error(errormessage); + return throwError(() => new Error(errormessage)); + } } diff --git a/src/styles.css b/src/styles.css index 08fc66b..a0281ce 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1,3 +1,7 @@ +@import '../node_modules/alertifyjs/build/css/alertify.min.css'; +@import '../node_modules/alertifyjs/build/css/themes/bootstrap.min.css'; + + :root{ --green-1: #728c5d; --green-2: #364d23; diff --git a/tsconfig.json b/tsconfig.json index ed966d4..cf877a6 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -22,7 +22,8 @@ "lib": [ "ES2022", "dom" - ] + ], + "typeRoots": ["srs/alertifyjs.s.ts", "node_modules/@types"] }, "angularCompilerOptions": { "enableI18nLegacyMessageIdFormat": false,