s473561/horoscope_app
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

added error handling with AlerifyJs

Browse Source
This commit is contained in:
s473561 2023-06-11 15:41:16 +02:00
parent 4a7771dc6a
commit dcefad1c9e
12 changed files with 63 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package-lock.json generated
View File

@ -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",

1
package.json
View File

@ -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"

1
src/app/alertifyjs.d.ts vendored Normal file
View File

@ -0,0 +1 @@
declare module 'alertifyjs';

1
src/app/app.module.ts
View File

@ -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,

2
src/app/horoscope-data-container/horoscope-data-container.component.html
View File

@ -1,6 +1,6 @@
<body>
<div class="search">
<div class="search" *ngIf="!errormessage">
<form #form="ngForm" (submit)="onSubmit()">
<input type="text" placeholder="search sunsign" name="sunsign" [(ngModel)]="sunSign">
</form>

3
src/app/horoscope-data-container/horoscope-data-container.component.ts
View File

@ -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;
}
});

2
src/app/numerology/numerology.component.html
View File

@ -1,5 +1,5 @@
<body>
<div class="search">
<div class="search" *ngIf="!errormessage">
<form #form="ngForm" (submit)="onSubmitNumber()">
<input type="text" placeholder="number" name="number" [(ngModel)]="number">
</form>

4
src/app/numerology/numerology.component.ts
View File

@ -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;
}
});
}

24
src/app/open-horoscope/open-horoscope.service.ts
View File

@ -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<HoroscopeData>(url, {headers, params});
return this.http.get<HoroscopeData>(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));
}
}

21
src/app/open-numerology/open-numerology.service.ts
View File

@ -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<NumerologyData>(url, {headers, params});
return this.http.get<NumerologyData>(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));
}
}

4
src/styles.css
View File

@ -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;

3
tsconfig.json
View File

@ -22,7 +22,8 @@
"lib": [
"ES2022",
"dom"
]
],
"typeRoots": ["srs/alertifyjs.s.ts", "node_modules/@types"]
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,