diff --git a/frontend/wendys-friends/src/app/app-routing.module.ts b/frontend/wendys-friends/src/app/app-routing.module.ts
index a742756128492000f577a09b192afa8442c7d82e..ac49a94be1cc737dc7e6dad4210a6a4a161a3ae5 100644
--- a/frontend/wendys-friends/src/app/app-routing.module.ts
+++ b/frontend/wendys-friends/src/app/app-routing.module.ts
@@ -1,8 +1,9 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
-import {OwnerComponent} from './component/owner/owner.component';
+import { OwnerComponent } from './component/owner/owner.component';
import { HorseComponent } from './component/horse/horse.component';
import { AddHorseComponent } from './component/add-horse/add-horse.component';
+import { UpdateHorseComponent } from './component/update-horse/update-horse.component';
const routes: Routes = [
@@ -10,6 +11,7 @@ const routes: Routes = [
{path: 'owner', component: OwnerComponent},
{path: 'horse', component: HorseComponent},
{path: 'horse/add', component: AddHorseComponent},
+ {path: 'horse/:id/edit', component: UpdateHorseComponent},
];
@NgModule({
diff --git a/frontend/wendys-friends/src/app/app.module.ts b/frontend/wendys-friends/src/app/app.module.ts
index 7de480ef39f8a0e3915897b9983a9deccde3ac1d..47b5bafd50326b1b54363f9de7c66ce6ad68af90 100644
--- a/frontend/wendys-friends/src/app/app.module.ts
+++ b/frontend/wendys-friends/src/app/app.module.ts
@@ -9,6 +9,7 @@ import {HeaderComponent} from './component/header/header.component';
import {OwnerComponent} from './component/owner/owner.component';
import { HorseComponent } from './component/horse/horse.component';
import { AddHorseComponent } from './component/add-horse/add-horse.component';
+import { UpdateHorseComponent } from './component/update-horse/update-horse.component';
@NgModule({
declarations: [
@@ -16,7 +17,8 @@ import { AddHorseComponent } from './component/add-horse/add-horse.component';
HeaderComponent,
OwnerComponent,
HorseComponent,
- AddHorseComponent
+ AddHorseComponent,
+ UpdateHorseComponent
],
imports: [
BrowserModule,
diff --git a/frontend/wendys-friends/src/app/component/update-horse/update-horse.component.html b/frontend/wendys-friends/src/app/component/update-horse/update-horse.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..5daabebdf2221f603ee240bca9017cec33b2356c
--- /dev/null
+++ b/frontend/wendys-friends/src/app/component/update-horse/update-horse.component.html
@@ -0,0 +1,61 @@
+
+ Error! {{ errorMessage }}
+
+
+
+
+
Success! Horse {{ success }} has been successfully added.
+
+
+
+
\ No newline at end of file
diff --git a/frontend/wendys-friends/src/app/component/update-horse/update-horse.component.scss b/frontend/wendys-friends/src/app/component/update-horse/update-horse.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/frontend/wendys-friends/src/app/component/update-horse/update-horse.component.ts b/frontend/wendys-friends/src/app/component/update-horse/update-horse.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..420366a89b90ffbf43539a6107227297e8fd4c34
--- /dev/null
+++ b/frontend/wendys-friends/src/app/component/update-horse/update-horse.component.ts
@@ -0,0 +1,132 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Params} from '@angular/router';
+import { Horse } from '../../dto/horse';
+import { HorseService } from '../../service/horse.service';
+
+@Component({
+ selector: 'app-update-horse',
+ templateUrl: './update-horse.component.html',
+ styleUrls: ['./update-horse.component.scss']
+})
+export class UpdateHorseComponent implements OnInit {
+ error = false;
+ success: string;
+ errorMessage = '';
+ horse: Horse = new Horse(null, null, null, null, null, null, null, null);
+ imageToUpload: File = null;
+
+ constructor(private horseService: HorseService, private route: ActivatedRoute) { }
+
+ ngOnInit(): void {
+ // Extract id from url
+ const horseId: string = this.route.snapshot.paramMap.get('id');
+
+ // Get current value of the horse and save it
+ this.horseService.getHorseById(parseInt(horseId, 10)).subscribe(
+ (horse: Horse) => {
+ this.horse = horse;
+ },
+ error => {
+ this.defaultServiceErrorHandling(error);
+ }
+ );
+ }
+
+ /**
+ * Will be called on a click on the success alert close button
+ */
+ public vanishAlert() {
+ this.success = null;
+ }
+
+ /**
+ * Will be called on a click on the error alert close button
+ */
+ public vanishError() {
+ this.errorMessage = null;
+ }
+
+ /**
+ * Handles the input on the image input.
+ * Inspired from:
+ * https://stackoverflow.com/questions/47936183/angular-file-upload
+ * @param files
+ */
+ public handleImageInput(files: FileList) {
+ var imageFile: File = files.item(0);
+
+ // Generate a random bytes name to avoid conflicts
+ var fileExt: string = imageFile.name.split('.').pop();
+ var newFileName: string = this.generateHex(20) + '.' + fileExt;
+ this.horse.imagePath = newFileName;
+
+ // Upload the file
+ this.uploadFile(imageFile, newFileName)
+ }
+
+ /**
+ * Updates a horse and loads it
+ * @param horse
+ */
+ public updateHorse() {
+ console.log("PUT horse to API")
+ console.log(this.horse);
+ // TODO: Make it possible for the horse to be added with an owner
+ this.horseService.updateHorse(this.horse).subscribe(
+ (result: Horse) => {
+ this.success = result.name;
+ },
+ error => {
+ this.defaultServiceErrorHandling(error);
+ }
+ );
+ }
+
+ /**
+ * Uploads the file to the backend with the specified file name
+ * @param file
+ * @param newFileName
+ */
+ private uploadFile(file: File, newFileName: string){
+ this.horseService.postFile(file, newFileName).subscribe(
+ () => {
+ console.log("Image successfully uploaded");
+ }, error => {
+ this.defaultServiceErrorHandling(error)
+ });
+ }
+
+ /**
+ * Generates a random hex with the specified length
+ * Inspired from:
+ * https://stackoverflow.com/a/27747377
+ * @param len
+ */
+ private generateHex(len: number): string {
+ var arr = new Uint8Array((len) / 2)
+ window.crypto.getRandomValues(arr)
+ return Array.from(arr, this.dec2hex).join('')
+ }
+
+ /**
+ * Converts a decimal to its hex value
+ * @param dec
+ */
+ private dec2hex(dec: number): string {
+ return ('0' + dec.toString(16)).substr(-2)
+ }
+
+ 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/service/horse.service.ts b/frontend/wendys-friends/src/app/service/horse.service.ts
index 3774b24c7a66b95bae5fe69d681314195ccc39e6..299046f75b28d49dd83ff397a4ed011bff2a81f2 100644
--- a/frontend/wendys-friends/src/app/service/horse.service.ts
+++ b/frontend/wendys-friends/src/app/service/horse.service.ts
@@ -31,6 +31,11 @@ export class HorseService {
return this.httpClient.post(this.messageBaseUri, horse);
}
+ updateHorse(horse: Horse): Observable {
+ console.log('Update horse with id ' + horse.id + ': '+ JSON.stringify(horse));
+ return this.httpClient.put(this.messageBaseUri + '/' + horse.id, horse);
+ }
+
/**
*
*/