feat: add hotel form and test components with routing

src/app/HotelItem/HotelItem.component.ts

@@ -1,7 +1,7 @@
 import { Component, Injectable, Input } from "@angular/core";
 import { ChildComponent } from "../Child/child.component";
 import { Hotel } from "./hotel";
-import { CurrencyPipe, NgIf } from "@angular/common";
+import { CurrencyPipe, NgFor, NgIf } from "@angular/common";
 import { FormsModule } from "@angular/forms";
 import { StarRatingComponent } from "../star-rating/star-rating.component";
 import { HttpClient } from "@angular/common/http";
@@ -11,7 +11,7 @@ import { RouterLink } from "@angular/router";
   selector: 'app-hotel-item',
   standalone: true,
   templateUrl: './HotelItem.component.html',
-  imports: [ChildComponent, CurrencyPipe, FormsModule, StarRatingComponent, NgIf, RouterLink],
+  imports: [ChildComponent, CurrencyPipe, FormsModule, StarRatingComponent, NgIf, RouterLink, NgFor],
 })
 export class HotelItem {
 

src/app/app.routes.ts

@@ -1,6 +1,7 @@
 import { Routes } from '@angular/router';
 import { HotelDetailsComponent } from './hotel-details/hotel-details.component';
 import { HotelListComponent } from './hotel-list/hotel-list.component';
+import { TestComponent } from './test/test.component';
 
 export const routes: Routes = [
   {
@@ -11,4 +12,8 @@ export const routes: Routes = [
     path: "hotels/:id",
     component: HotelDetailsComponent,
   },
+  {
+    path: "testing",
+    component: TestComponent,
+  }
 ];

src/app/hotel-details/hotel-details.component.html

@@ -1 +1,4 @@
-<app-hotel-item [hotel]="hotel" [isDetail]="true"></app-hotel-item>
+@if (hotel != null) {
+  <app-hotel-item [hotel]="hotel" [isDetail]="true"></app-hotel-item>
+  <app-hotel-form [hotel]="hotel"></app-hotel-form>
+}

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

@@ -2,15 +2,16 @@ import { HttpClient } from '@angular/common/http';
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Hotel } from '../HotelItem/hotel';
-import { CurrencyPipe } from '@angular/common';
+import { CurrencyPipe, NgFor, NgForOf, NgIf } from '@angular/common';
 import { StarRatingComponent } from '../star-rating/star-rating.component';
 import { HotelItem } from '../HotelItem/HotelItem.component';
 import { catchError, EMPTY } from 'rxjs';
+import { HotelFormComponent } from '../hotel-form/hotel-form.component';
 
 @Component({
   selector: 'app-hotel-details',
   standalone: true,
-  imports: [CurrencyPipe, StarRatingComponent, HotelItem],
+  imports: [CurrencyPipe, StarRatingComponent, HotelItem, HotelFormComponent, NgIf, NgForOf],
   templateUrl: './hotel-details.component.html',
   styleUrl: './hotel-details.component.css'
 })

src/app/hotel-form/hotel-form.component.html

@@ -0,0 +1,12 @@
+<p>hotel-form works!</p>
+
+<form [formGroup]="hotelForm">
+  <label for="name">Name</label>
+  <input type="text" class="border-red-500" [class.border-8]='hotelForm.get("name")?.invalid' id="name" formControlName="name">
+  <label for="description">Description</label>
+  <input type="text" class="border-red-500" [class.border-8]='hotelForm.get("description")?.invalid' id="description" formControlName="description">
+  <label for="price">Price</label>
+  <input type="price" class="border-red-500" [class.border-8]='hotelForm.get("price")?.invalid' id="price" formControlName="price">
+  <button (click)="submit()" [disabled]="!hotelForm.valid" type="submit">Update</button>
+  <a routerLink="/">Cancel</a>
+</form>

src/app/hotel-form/hotel-form.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HotelFormComponent } from './hotel-form.component';
+
+describe('HotelFormComponent', () => {
+  let component: HotelFormComponent;
+  let fixture: ComponentFixture<HotelFormComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HotelFormComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(HotelFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,39 @@
+import { Component, Input } from '@angular/core';
+import { Hotel } from '../HotelItem/hotel';
+import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { NgFor, NgIf } from '@angular/common';
+import { HttpClient } from '@angular/common/http';
+import { Router, RouterLink } from '@angular/router';
+
+@Component({
+  selector: 'app-hotel-form',
+  standalone: true,
+  imports: [ReactiveFormsModule, NgIf, NgFor, RouterLink],
+  templateUrl: './hotel-form.component.html',
+  styleUrl: './hotel-form.component.css'
+})
+export class HotelFormComponent {
+  @Input() public hotel!: Hotel;
+  public hotelForm!: FormGroup
+
+  constructor(public http: HttpClient, public router: Router) {
+
+  }
+
+  ngOnInit(): void {
+    this.hotelForm = 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),
+    })
+  }
+
+  submit(): void {
+    this.hotel.hotelName = this.hotelForm.get("name")?.value;
+    this.hotel.description = this.hotelForm.get("description")?.value;
+    this.hotel.price = this.hotelForm.get("price")?.value;
+    console.log(this.hotelForm.value);
+    this.http.put("/api/hotels/" + this.hotel.id, this.hotel).subscribe();
+    this.router.navigate(["/"]);
+  }
+}

src/app/test/test.component.html

@@ -0,0 +1,10 @@
+<p>test works!</p>
+
+<form [formGroup]="loginForm">
+  <label for="username">Username</label>
+  <input type="text" id="username" autocomplete="username" formControlName="username">
+  <label for="password">Password</label>
+  <input type="password" id="password" formControlName="password">
+  <button (click)="submit()" type="submit">Login</button>
+  <button type="reset" (click)="reset()">Reset</button>
+</form>

src/app/test/test.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TestComponent } from './test.component';
+
+describe('TestComponent', () => {
+  let component: TestComponent;
+  let fixture: ComponentFixture<TestComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TestComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(TestComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/test/test.component.ts

@@ -0,0 +1,34 @@
+import { Component } from '@angular/core';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-test',
+  standalone: true,
+  imports: [ReactiveFormsModule],
+  templateUrl: './test.component.html',
+  styleUrl: './test.component.css'
+})
+export class TestComponent {
+  public loginForm!: FormGroup;
+
+  public ngOnInit(): void {
+    this.loginForm = this.setUpLoginForm();
+
+    console.log(this.loginForm);
+  }
+
+  setUpLoginForm(): FormGroup {
+    return new FormGroup({
+      username: new FormControl("Jan"),
+      password: new FormControl('')
+    });
+  }
+
+  reset(): void {
+    this.loginForm = this.setUpLoginForm();
+  }
+
+  submit(): void {
+    console.log(this.loginForm.value);
+  }
+}