diff --git a/src/app/app.module.ts b/src/app/app.module.ts index b84bd67..9ac77c7 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,5 +1,6 @@ import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; +import { HttpClientModule } from '@angular/common/http'; import { NgParticlesModule } from "ng-particles"; import { AppRoutingModule } from './app-routing.module'; @@ -30,7 +31,8 @@ import { WorkshopsComponent } from './workshops/workshops.component'; imports: [ BrowserModule, AppRoutingModule, - NgParticlesModule + NgParticlesModule, + HttpClientModule ], providers: [], bootstrap: [AppComponent] diff --git a/src/app/portfolio/portfolio.component.html b/src/app/portfolio/portfolio.component.html index 616f657..24db7e7 100644 --- a/src/app/portfolio/portfolio.component.html +++ b/src/app/portfolio/portfolio.component.html @@ -1,43 +1,9 @@ -

portfolio works!

-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+ {{portfolioItems.title}} +
+
+
+
diff --git a/src/app/portfolio/portfolio.component.scss b/src/app/portfolio/portfolio.component.scss index e69de29..5ae1eae 100644 --- a/src/app/portfolio/portfolio.component.scss +++ b/src/app/portfolio/portfolio.component.scss @@ -0,0 +1,7 @@ +@import "../../assets/scss/variables"; + +.component-portfolio { + .box { + + } +} diff --git a/src/app/portfolio/portfolio.component.ts b/src/app/portfolio/portfolio.component.ts index f11071c..95cbf2b 100644 --- a/src/app/portfolio/portfolio.component.ts +++ b/src/app/portfolio/portfolio.component.ts @@ -1,4 +1,5 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit } from '@angular/core' +import { ApisService } from '../services/apis.service' @Component({ selector: 'app-portfolio', @@ -7,9 +8,19 @@ import { Component, OnInit } from '@angular/core'; }) export class PortfolioComponent implements OnInit { - constructor() { } + public portfolioItems: any = [] + + constructor(private apisService: ApisService) { } ngOnInit(): void { + this.apisService.getPortfolio('portfolio').toPromise().then((response) => { + this.portfolioItems = response.items + },(error) => { + console.error('getPortfolio ERROR', error) + }).catch((e) => { + console.error('getPortfolio CATCH', e) + }) } + } diff --git a/src/app/services/apis.service.spec.ts b/src/app/services/apis.service.spec.ts new file mode 100644 index 0000000..a952a5c --- /dev/null +++ b/src/app/services/apis.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { ApisService } from './apis.service'; + +describe('ApisService', () => { + let service: ApisService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(ApisService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/services/apis.service.ts b/src/app/services/apis.service.ts new file mode 100644 index 0000000..48124b9 --- /dev/null +++ b/src/app/services/apis.service.ts @@ -0,0 +1,26 @@ +import { Injectable } from '@angular/core' +import { HttpClient, HttpHeaders, HttpParams, HttpRequest } from '@angular/common/http' +import { Observable, Subject, throwError } from 'rxjs' +import { catchError } from 'rxjs/operators' +import { BaseService } from './base-service' +import { environment } from '../../environments/environment' + +@Injectable({ + providedIn: 'root' +}) +export class ApisService extends BaseService { + + private restApi = `${environment.API_URL}` + + constructor(private http: HttpClient) { + super() + } + + getPortfolio(section): Observable { + let urlApi = `${this.restApi}?query=${section}` + return this.http.get(urlApi).pipe( + catchError(this.handleError) + ) + } + +} diff --git a/src/app/services/base-service.ts b/src/app/services/base-service.ts new file mode 100644 index 0000000..50813ce --- /dev/null +++ b/src/app/services/base-service.ts @@ -0,0 +1,16 @@ +import { HttpErrorResponse } from "@angular/common/http" +import { throwError } from "rxjs" +import { ParseXML } from "./parse-xml" + +export class BaseService { + + constructor() { } + + protected handleError(error: HttpErrorResponse) { + if(error.error instanceof ErrorEvent) { + console.error('An error occurred:', error.error.message) + } + + return throwError( ParseXML.getXMLResponseMessage(error.error) ) + } +} diff --git a/src/app/services/parse-xml.ts b/src/app/services/parse-xml.ts new file mode 100644 index 0000000..781bd33 --- /dev/null +++ b/src/app/services/parse-xml.ts @@ -0,0 +1,13 @@ +export class ParseXML { + constructor() {} + + public sanitize(str: string): string { + let sanitizeString = encodeURIComponent(str).replace(/%0A/g, '') + return decodeURIComponent(sanitizeString) + } + + public static getXMLResponseMessage(responseBody: string): string { + let parseXMLClass = new ParseXML() + return parseXMLClass.sanitize(responseBody).match(/(.*?)<\/Message>/g)[0].replace(/<[^>]+>/g, '') + } +} diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts index 3612073..a646658 100644 --- a/src/environments/environment.prod.ts +++ b/src/environments/environment.prod.ts @@ -1,3 +1,5 @@ export const environment = { - production: true -}; + production: true, + + API_URL: `https://apis.dslak.it/` +} diff --git a/src/environments/environment.ts b/src/environments/environment.ts index 7b4f817..2128c6d 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -1,16 +1,5 @@ -// This file can be replaced during build by using the `fileReplacements` array. -// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. -// The list of file replacements can be found in `angular.json`. - export const environment = { - production: false -}; + production: false, -/* - * For easier debugging in development mode, you can import the following file - * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. - * - * This import should be commented out in production mode because it will have a negative impact - * on performance if an error is thrown. - */ -// import 'zone.js/dist/zone-error'; // Included with Angular CLI. + API_URL: `http://localhost/dslak_website/apis/` +}