wip

src/app/app.routes.ts

@@ -1,7 +1,7 @@
 import { Routes } from '@angular/router';
 import {HotelsComponent} from "./hotel/hotels.component";
 import {HotelComponent} from "./hotel/hotel.component";
-import {CreateHotelComponent} from "./hotel/create-hotel.component";
+import {EditHotelComponent} from "./hotel/edit-hotel.component";
 
 export const routes: Routes = [
   {
@@ -11,7 +11,7 @@ export const routes: Routes = [
   },
   {
     path: 'hotels/new',
-    component: CreateHotelComponent,
+    component: EditHotelComponent,
     title: 'New Hotel'
   },
   {

src/app/hotel/create-hotel.component.ts

@@ -1,35 +1,21 @@
-import { Component } from '@angular/core';
-import {FormsModule} from "@angular/forms";
+import {Component} from "@angular/core";
+import {Hotel} from "./hotel";
+import {HotelService} from "../service/hotel.service";
+
 
 @Component({
-  selector: 'app-create-hotel',
+  selector: "app-create-hotel",
   standalone: true,
-  imports: [
-    FormsModule
-  ],
   template: `
-    <ng-form>
-      <label for="name">Name</label>
-      <br>
-      <input id="name" type="text">
-      <br>
-      <label for="description">Description</label>
-      <br>
-      <input id="description" type="text">
-      <br>
-      <label for="price">Price</label>
-      <br>
-      <input id="price" type="number">
-      <br>
-      <label for="rating">Rating</label>
-      <br>
-      <input id="rating" type="number">
-      <br>
-      <br>
-      <button type="submit">Submit</button>
-    </ng-form>
-  `,
+    <app-create-hotel (updateHotel)="create($event)" />
+  `
 })
 export class CreateHotelComponent {
 
+  protected hotelService: HotelService;
+
+  create(hotel: Hotel) {
+    console.log(hotel)
+    this.hotelService.createHotel(hotel).subscribe(console.log)
+  }
 }

src/app/hotel/edit-hotel.component.ts

@@ -0,0 +1,86 @@
+import {Component, EventEmitter, inject, Input, OnInit, Output} from '@angular/core';
+import {
+  AbstractControl,
+  FormControl,
+  FormGroup,
+  FormsModule,
+  ReactiveFormsModule,
+  ValidationErrors, Validators
+} from "@angular/forms";
+import {Hotel} from "./hotel";
+import {HotelService} from "../service/hotel.service";
+import {RouterLink} from "@angular/router";
+import {HotelsComponent} from "./hotels.component";
+
+@Component({
+  selector: 'app-create-hotel',
+  standalone: true,
+  imports: [
+    FormsModule,
+    ReactiveFormsModule,
+    RouterLink
+  ],
+  template: `
+    <ng-form [formGroup]="form" (ngSubmit)="submit()">
+      <label for="name">Name</label>
+      <br>
+      <input id="name" type="text" formControlName="name">
+      <br>
+      <label for="description">Description</label>
+      <br>
+      <input id="description" type="text" formControlName="description">
+      <br>
+      <label for="price">Price</label>
+      <br>
+      <input id="price" type="number" formControlName="price">
+      <br>
+      <label for="rating">Rating</label>
+      <br>
+      <input id="rating" type="number" formControlName="rating" min="0" max="5">
+      <br>
+      <br>
+      <button type="submit" (click)="submit()">Submit</button>
+    </ng-form>
+
+    <button routerLink="/hotels">back</button>
+  `,
+})
+export class EditHotelComponent implements OnInit {
+  @Input()
+  hotel: Hotel | null = null;
+
+  @Output()
+  updateHotel: EventEmitter<Hotel> = new EventEmitter
+
+  form!: FormGroup
+
+  ngOnInit(): void {
+    this.form = new FormGroup({
+      name: new FormControl(this.hotel?.hotelName, [Validators.required]),
+      description: new FormControl(this.hotel?.description, [Validators.required]),
+      price: new FormControl(this.hotel?.price, [Validators.required]),
+      rating: new FormControl(this.hotel?.rating, [Validators.required, Validators.min(0), Validators.max(5)]),
+    })
+  }
+
+  submit() {
+    if (!this.form.valid) {
+      console.error('Form invalid');
+
+      return;
+    }
+
+    const hotel: Hotel = {
+      imageUrl: this.hotel?.imageUrl ?? "",
+      hotelName: this.form.value.name,
+      description: this.form.value.description,
+      price: this.form.value.price,
+      rating: this.form.value.rating,
+      id: this.hotel?.id ?? 0,
+    };
+
+    this.updateHotel.emit(hotel)
+
+    this.hotel = hotel;
+  }
+}

src/app/hotel/hotel.component.ts

@@ -1,11 +1,12 @@
-import {Component, inject, Input, OnInit} from "@angular/core";
+import {Component, inject, OnInit} from "@angular/core";
 import {Hotel} from "./hotel"
 import {CurrencyPipe, NgOptimizedImage} from "@angular/common";
 import {Lang} from "../idek/lang";
 import {StarComponent} from "../star/star.component";
 import {ActivatedRoute} from "@angular/router";
 import {HotelService} from "../service/hotel.service";
-import {catchError, EMPTY, throwError} from "rxjs";
+import {catchError, EMPTY} from "rxjs";
+import {EditHotelComponent} from "./edit-hotel.component";
 
 
 @Component({
@@ -14,18 +15,13 @@ import {catchError, EMPTY, throwError} from "rxjs";
   imports: [
     CurrencyPipe,
     StarComponent,
-    NgOptimizedImage
+    NgOptimizedImage,
+    EditHotelComponent
   ],
   template: `
     <div style="border: white 2px; border-radius: 2px">
       @if (hotel && !alert) {
-        <p class="name">Name: {{ hotel.hotelName }}</p>
-        <p>Beschreibung: {{ hotel.description }}</p>
-        <p>Preis: {{ hotel.price | currency: currency.currency : 'symbol' : '2.2-2' : currency.code }}/nacht</p>
-        <p>Sterne:
-          <app-star [rating]="hotel.rating"></app-star>
-        </p>
-        <img width="64" height="64" src="{{hotel.imageUrl}}">
+        <app-create-hotel [hotel]="hotel" (updateHotel)="update($event)" />
       } @else if(alert) {
         <h2>{{alert}}</h2>
       } @else {
@@ -55,4 +51,8 @@ export class HotelComponent implements OnInit {
     }))
       .subscribe({next: (hotel: Hotel) => {this.hotel = hotel}})
   }
+
+  update(hotel: Hotel): void {
+    this.hotelService.updateHotelById(hotel).subscribe()
+  }
 }

src/app/service/hotel.service.ts

@@ -16,4 +16,12 @@ export class HotelService {
   public getHotelById(id: number): Observable<Hotel> {
     return this.httpClient.get<Hotel>(`/api/hotels/${id}`);
   }
+
+  public updateHotelById(hotel: Hotel): Observable<Object> {
+    return this.httpClient.put<Hotel>(`/api/hotels/${hotel.id}`, hotel)
+  }
+
+  public createHotel(hotel: Hotel): Observable<Hotel> {
+    return this.httpClient.post<Hotel>(`/api/hotels`, hotel)
+  }
 }