diff --git a/frontend/wendys-friends/src/app/app-routing.module.ts b/frontend/wendys-friends/src/app/app-routing.module.ts
index 13ab9beec83368841fc94a7f6e47e0631fffcd68..c39cb3d60d31b3b479e99f5efb4026eacd871882 100644
--- a/frontend/wendys-friends/src/app/app-routing.module.ts
+++ b/frontend/wendys-friends/src/app/app-routing.module.ts
@@ -1,11 +1,13 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {OwnerComponent} from './component/owner/owner.component';
+import { HorseComponent } from './component/horse/horse.component';
const routes: Routes = [
{path: '', redirectTo: 'owner', pathMatch: 'full'},
- {path: 'owner', component: OwnerComponent}
+ {path: 'owner', component: OwnerComponent},
+ {path: 'horse', component: HorseComponent},
];
@NgModule({
diff --git a/frontend/wendys-friends/src/app/app.module.ts b/frontend/wendys-friends/src/app/app.module.ts
index ef1aba5286a814d236a4aecb6a1ca2a5f63593f3..028f53dd0c9a992573590d5546430958b525897a 100644
--- a/frontend/wendys-friends/src/app/app.module.ts
+++ b/frontend/wendys-friends/src/app/app.module.ts
@@ -6,12 +6,14 @@ import {AppComponent} from './app.component';
import {HeaderComponent} from './component/header/header.component';
import {OwnerComponent} from './component/owner/owner.component';
import {HttpClientModule} from '@angular/common/http';
+import { HorseComponent } from './component/horse/horse.component';
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
- OwnerComponent
+ OwnerComponent,
+ HorseComponent
],
imports: [
BrowserModule,
diff --git a/frontend/wendys-friends/src/app/component/header/header.component.html b/frontend/wendys-friends/src/app/component/header/header.component.html
index a91de3fcd5cc934aa7089653185be74450ce988f..3190e402c2fdaed1b90f81bfa6d87984e7eb9582 100644
--- a/frontend/wendys-friends/src/app/component/header/header.component.html
+++ b/frontend/wendys-friends/src/app/component/header/header.component.html
@@ -7,7 +7,7 @@
diff --git a/frontend/wendys-friends/src/app/component/horse/horse.component.html b/frontend/wendys-friends/src/app/component/horse/horse.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..866e86737974458578530b5642aa9c545969b0ff
--- /dev/null
+++ b/frontend/wendys-friends/src/app/component/horse/horse.component.html
@@ -0,0 +1,17 @@
+
+ Error! {{ errorMessage }}
+
+
+
+
+
+
Well done!
+
Your application is up and running
+
+
This is the name of the horse with id 1 from your backend system:
+ {{horse.name}}
+
+
+
diff --git a/frontend/wendys-friends/src/app/component/horse/horse.component.scss b/frontend/wendys-friends/src/app/component/horse/horse.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/frontend/wendys-friends/src/app/component/horse/horse.component.ts b/frontend/wendys-friends/src/app/component/horse/horse.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..da82d7f11e7320cfe6d48f43b40e0a6b0bccc9f8
--- /dev/null
+++ b/frontend/wendys-friends/src/app/component/horse/horse.component.ts
@@ -0,0 +1,72 @@
+import { Component, OnInit } from '@angular/core';
+import { HorseService } from '../../service/horse.service';
+import { Horse } from '../../dto/horse';
+
+@Component({
+ selector: 'app-horse',
+ templateUrl: './horse.component.html',
+ styleUrls: ['./horse.component.scss']
+})
+export class HorseComponent implements OnInit {
+
+ error = false;
+ errorMessage = '';
+ horse: Horse;
+
+ constructor(private horseService: HorseService) { }
+
+ ngOnInit(): void {
+ this.loadHorse(1);
+ }
+
+ /**
+ * Error flag will be deactivated, which clears the error message
+ */
+ vanishError() {
+ this.error = false;
+ }
+
+ /**
+ * Loads the horse for the specified id
+ * @param id the id of the horse
+ */
+ private loadHorse(id: number) {
+ this.horseService.getHorseById(id).subscribe(
+ (horse: Horse) => {
+ this.horse = horse;
+ },
+ error => {
+ this.defaultServiceErrorHandling(error);
+ }
+ );
+ }
+
+ /**
+ * Creates a new horse and loads it
+ * @param horse
+ */
+ private addHorse(horse: Horse) {
+ this.horseService.addHorse(horse).subscribe(
+ (horse: Horse) => {
+ this.horse = horse;
+ },
+ error => {
+ this.defaultServiceErrorHandling(error);
+ }
+ );
+ }
+
+ private defaultServiceErrorHandling(error: any) {
+ console.log(error);
+ this.error = true;
+ if (error.status === 0) {
+ // If status is 0, the backend is probably down
+ this.errorMessage = 'The backend seems not to be reachable';
+ } else if (error.error.message === 'No message available') {
+ // If no detailed error message is provided, fall back to the simple error name
+ this.errorMessage = error.error.error;
+ } else {
+ this.errorMessage = error.error.message;
+ }
+ }
+}
diff --git a/frontend/wendys-friends/src/app/dto/horse.ts b/frontend/wendys-friends/src/app/dto/horse.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7caa2cc97604ffc223c29341727fef24da072d88
--- /dev/null
+++ b/frontend/wendys-friends/src/app/dto/horse.ts
@@ -0,0 +1,10 @@
+export class Horse {
+ constructor(
+ public id: number,
+ public name: string,
+ public description: string,
+ public score: number,
+ public birthday: Date,
+ public owner: number) {
+ }
+}
diff --git a/frontend/wendys-friends/src/app/service/horse.service.ts b/frontend/wendys-friends/src/app/service/horse.service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1f0871c0040fb52ddc253c1116e572b19d3c43bc
--- /dev/null
+++ b/frontend/wendys-friends/src/app/service/horse.service.ts
@@ -0,0 +1,33 @@
+import { Injectable } from '@angular/core';
+import { Horse } from '../dto/horse';
+import { HttpClient } from '@angular/common/http';
+import { Globals } from '../global/globals';
+import { Observable } from 'rxjs';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class HorseService {
+ private messageBaseUri: string = this.globals.backendUri + '/horses';
+
+ constructor(private httpClient: HttpClient, private globals: Globals) {
+ }
+
+ /**
+ * Loads specific horse from the backend
+ * @param id of horse to load
+ */
+ getHorseById(id: number): Observable {
+ console.log('Load horse details for ' + id);
+ return this.httpClient.get(this.messageBaseUri + '/' + id);
+ }
+
+ /**
+ * Adds a specific horse to the backend and loads it if successful
+ * @param horse
+ */
+ addHorse(horse: Horse): Observable {
+ console.log('Add new horse ' + horse);
+ return this.httpClient.post(this.messageBaseUri, horse);
+ }
+}