US10: Make it possible for horse information to be displayed on the view page, add a get image method to the API

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

@@ -6,12 +6,40 @@
 </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>
+  <h1>Horse Info for {{ horse.name }}</h1>
+  <hr>
+  <div class="row">
+    <img class="img-thumbnail float-left col-md-6" src="http://localhost:8080/horses/image/{{ horse.imagePath }}" *ngIf="horse.imagePath">
+    <table class="table table-striped float-right col-md-6">
+      <tbody>
+        <tr>
+          <th scope="row">Name</th>
+          <td>{{ horse.name }}</td>
+        </tr>
+        <tr>
+          <th scope="row">Owner</th>
+          <td>
+            <a href="owner/{{ horse.owner }}" *ngIf="horse.owner; else noOwner">{{ ownerName }}</a>
+            <ng-template #noOwner> {{ ownerName }} </ng-template>
+          </td>
+        </tr>
+        <tr>
+          <th scope="row">Birthday</th>
+          <td>{{ horse.birthday }}</td>
+        </tr>
+        <tr>
+          <th scope="row">Race</th>
+          <td>{{ horse.race }}</td>
+        </tr>
+        <tr>
+          <th scope="row">Score</th>
+          <td>{{ horse.score }}</td>
+        </tr>
+        <tr>
+          <th scope="row">Description</th>
+          <td>{{ horse.description }}</td>
+        </tr>
+      </tbody>
+    </table>
   </div>
 </div>

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

@@ -2,6 +2,8 @@ import { Component, OnInit } from '@angular/core';
 import { HorseService } from '../../service/horse.service';
 import { Horse } from '../../dto/horse';
 import { ActivatedRoute } from '@angular/router';
+import { OwnerService } from 'src/app/service/owner.service';
+import { Owner } from 'src/app/dto/owner';
 
 @Component({
   selector: 'app-horse',
@@ -13,8 +15,9 @@ export class HorseComponent implements OnInit {
   error = false;
   errorMessage = '';
   horse: Horse;
+  ownerName: string;
 
-  constructor(private horseService: HorseService, private route: ActivatedRoute) { }
+  constructor(private horseService: HorseService, private route: ActivatedRoute, private ownerService: OwnerService) { }
 
   ngOnInit(): void {
     // Extract id from url
@@ -37,6 +40,7 @@ export class HorseComponent implements OnInit {
     this.horseService.getHorseById(id).subscribe(
       (horse: Horse) => {
         this.horse = horse;
+        this.loadOwnerNameForHorse(horse.owner);
       },
       error => {
         this.defaultServiceErrorHandling(error);
@@ -44,6 +48,23 @@ export class HorseComponent implements OnInit {
     );
   }
 
+  /**
+   * Loads the name of the owner of a horse
+   * @param id of the owner to get
+   */
+  private loadOwnerNameForHorse(id: number) {
+    this.ownerService.getOwnerById(id).subscribe(
+      (owner: Owner) => {
+        console.log(owner.name)
+        this.ownerName = owner.name;
+        console.log(this.ownerName);
+      },
+      error => {
+        this.ownerName = "N/A";
+      }
+    )
+  }
+
   private defaultServiceErrorHandling(error: any) {
     console.log(error);
     this.error = true;