chore(deps): update devdependencies (non-major)

package.json

@@ -29,7 +29,7 @@
     "@angular/compiler-cli": "^18.2.3",
     "@types/jasmine": "~5.1.0",
     "autoprefixer": "^10.4.20",
-    "jasmine-core": "~5.1.0",
+    "jasmine-core": "~5.4.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.0",
@@ -37,6 +37,6 @@
     "karma-jasmine-html-reporter": "~2.1.0",
     "postcss": "^8.4.41",
     "tailwindcss": "^3.4.10",
-    "typescript": "~5.5.2"
+    "typescript": "~5.6.0"
   }
 }

src/app/Button/button.component.html

@@ -1 +1 @@
-<button type="button" class="px-6 py-2 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">{{ text }}</button>
+<button type="button">{{ text }}</button>

src/app/Child/child.component.html

@@ -1,4 +1,4 @@
-<h1 class="text-2xl font-bold mb-4">Child</h1>
-<p class="text-lg mb-2">Balance: {{balance}}</p>
-<p [class.hidden]="!isBroke" class="text-red-500 mb-4">I'm broke. Now I'm about as poor as Jan-Marlon.</p>
-<button type="button" (click)="takeMoney()" class="px-6 py-2 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">Take Money</button>
+<h1>Child</h1>
+<p>Balance: {{balance}}</p>
+<p [class.hidden]="!isBroke">Im broke. Now im about as poor as Jan-Marlon.</p>
+<button type="button" (click)=takeMoney() class="button">Take Money</button>

src/app/HotelItem/HotelItem.component.html

@@ -1,8 +1,11 @@
-<p class="text-2xl font-bold text-gray-800 mb-2">Name: {{hotel.hotelName}}</p>
-<p class="text-base text-gray-600 mb-4">Description: {{hotel.description}}</p>
-<p class="text-lg font-medium text-green-600 mb-4">Price: {{hotel.price | currency : getCurrencyCode(selectedLanguage) : "symbol" : "2.2-2" : selectedLanguage}}</p>
-<select [ngModel]="selectedLanguage" (ngModelChange)="languageChange($event)" class="block w-full p-2 border border-gray-300 rounded-md mb-4 focus:border-blue-500 focus:ring focus:ring-blue-200">
-  <option *ngFor="let lang of langs" [value]="lang.code" [selected]="lang.lang == 'de'">{{lang.lang}}</option>
+<p>Name: {{hotel.hotelName}}</p>
+<p>Description: {{hotel.description}}</p>
+<p>Price: {{hotel.price | currency : getCurrencyCode(selectedLanguage) : "symbol" : "2.2-2" : selectedLanguage}}</p>
+<select [ngModel]="selectedLanguage" (ngModelChange)="languageChange($event)">
+  @for (lang of langs; track lang.lang) {
+    <option value="{{lang.code}}" [selected]="lang.lang == 'de'">{{lang.lang}}</option>
+  }
 </select>
-<img src="{{hotel.imageUrl}}" alt="Hotel" class="w-full h-auto rounded-lg shadow-lg mb-4">
-<a *ngIf="!isDetail" routerLink="/hotels/{{hotel.id}}" class="text-blue-600 hover:text-blue-800 hover:underline mb-4 block">Details</a>
+<img src="{{hotel.imageUrl}}" alt="Hotel">
+<a *ngIf="!isDetail" routerLink="/hotels/{{hotel.id}}">Details</a>
+<app-star-rating [rating]="hotel.rating"></app-star-rating>

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, NgFor, NgIf } from "@angular/common";
+import { CurrencyPipe, 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, NgFor],
+  imports: [ChildComponent, CurrencyPipe, FormsModule, StarRatingComponent, NgIf, RouterLink],
 })
 export class HotelItem {
 

src/app/Search/search.component.html

@@ -1 +1 @@
-<input [(ngModel)]="input" (ngModelChange)="update($event)" class="border border-gray-300 rounded-md p-2 w-full focus:border-blue-500 focus:ring focus:ring-blue-200" type="search">
+<input [(ngModel)]="input" (ngModelChange)="update($event)" class="border border-black" type="search">

src/app/app.routes.ts

@@ -1,7 +1,6 @@
 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 = [
   {
@@ -12,8 +11,4 @@ export const routes: Routes = [
     path: "hotels/:id",
     component: HotelDetailsComponent,
   },
-  {
-    path: "testing",
-    component: TestComponent,
-  }
 ];

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

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

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

@@ -2,16 +2,15 @@ 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, NgFor, NgForOf, NgIf } from '@angular/common';
+import { CurrencyPipe } 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, HotelFormComponent, NgIf, NgForOf],
+  imports: [CurrencyPipe, StarRatingComponent, HotelItem],
   templateUrl: './hotel-details.component.html',
   styleUrl: './hotel-details.component.css'
 })

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

@@ -1,12 +0,0 @@
-<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

@@ -1,23 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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/hotel-list/hotel-list.component.html

@@ -1,9 +1,7 @@
-<div class="container p-4 mx-auto max-w-4xl">
-  <h1>{{'hello' | uppercase | text}}</h1>
-  <app-search [(input)]="search"></app-search>
-  @if (hotels[0].hotelName) {
-    <div *ngFor="let hotel of hotels">
-      <app-hotel-item *ngIf="hotel.hotelName.toLowerCase().includes(search.toLowerCase())" [hotel]="hotel"></app-hotel-item>
-    </div>
-  }
+<h1>{{'hello' | uppercase | text}}</h1>
+<app-search [(input)]="search"></app-search>
+@if (hotels[0].hotelName) {
+<div *ngFor="let hotel of hotels">
+  <app-hotel-item *ngIf="hotel.hotelName.includes(search)" [hotel]="hotel"></app-hotel-item>
 </div>
+}

src/app/test/test.component.html

@@ -1,10 +0,0 @@
-<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

@@ -1,23 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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);
-  }
-}