US01: Add an initial Angular component, dto and service for the horses

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({

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,

frontend/wendys-friends/src/app/component/header/header.component.html

@@ -7,7 +7,7 @@
   <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
     <div class="navbar-nav">
       <a class="nav-item nav-link" routerLink="/owner">Horse Owner <span class="sr-only">(current)</span></a>
-      <a class="nav-item nav-link" href="#">Horses</a>
+      <a class="nav-item nav-link" href="/horse">Horses</a>
     </div>
   </div>
 </nav>

frontend/wendys-friends/src/app/component/horse/horse.component.html

@@ -0,0 +1,17 @@
+<div *ngIf="error" class="alert alert-danger alert-dismissible fade show" role="alert">
+  <strong>Error! </strong> {{ errorMessage }}
+  <button type="button" (click)="vanishError()" class="close" data-dismiss="alert" aria-label="Close">
+    <span aria-hidden="true">&times;</span>
+  </button>
+</div>
+
+<div class="container mt-3" *ngIf="horse">
+  <div class="alert alert-success" role="alert">
+    <h4 class="alert-heading">Well done!</h4>
+    <p>Your application is up and running</p>
+    <hr>
+    <p>This is the name of the horse with id 1 from your backend system:
+      <span class="font-weight-bold">{{horse.name}}</span>
+    </p>
+  </div>
+</div>

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;
+    }
+  }
+}

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) {
+  }
+}

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<Horse> {
+    console.log('Load horse details for ' + id);
+    return this.httpClient.get<Horse>(this.messageBaseUri + '/' + id);
+  }
+
+  /**
+   * Adds a specific horse to the backend and loads it if successful
+   * @param horse
+   */
+  addHorse(horse: Horse): Observable<Horse> {
+    console.log('Add new horse ' + horse);
+    return this.httpClient.post<Horse>(this.messageBaseUri, horse);
+  }
+}