From e8683dad063c079b93af1d6428b338de57354757 Mon Sep 17 00:00:00 2001 From: Jan Klattenhoff Date: Tue, 24 Sep 2024 07:19:19 +0200 Subject: [PATCH] feat: add star rating component and integrate it in HotelItem --- src/app/HotelItem/HotelItem.component.html | 2 +- src/app/HotelItem/HotelItem.component.ts | 3 +- src/app/star-rating/star-rating.component.css | 0 .../star-rating/star-rating.component.html | 139 ++++++++++++++++++ .../star-rating/star-rating.component.spec.ts | 23 +++ src/app/star-rating/star-rating.component.ts | 19 +++ 6 files changed, 184 insertions(+), 2 deletions(-) create mode 100644 src/app/star-rating/star-rating.component.css create mode 100644 src/app/star-rating/star-rating.component.html create mode 100644 src/app/star-rating/star-rating.component.spec.ts create mode 100644 src/app/star-rating/star-rating.component.ts diff --git a/src/app/HotelItem/HotelItem.component.html b/src/app/HotelItem/HotelItem.component.html index 78a0521..1a874b2 100644 --- a/src/app/HotelItem/HotelItem.component.html +++ b/src/app/HotelItem/HotelItem.component.html @@ -7,4 +7,4 @@ } Hotel -

{{hotel.rating}}

+ diff --git a/src/app/HotelItem/HotelItem.component.ts b/src/app/HotelItem/HotelItem.component.ts index a0f14a7..875fdbb 100644 --- a/src/app/HotelItem/HotelItem.component.ts +++ b/src/app/HotelItem/HotelItem.component.ts @@ -4,12 +4,13 @@ import { Input } from "@angular/core"; import { Hotel } from "./hotel"; import { CurrencyPipe } from "@angular/common"; import { FormsModule } from "@angular/forms"; +import { StarRatingComponent } from "../star-rating/star-rating.component"; @Component({ selector: 'app-hotel-item', standalone: true, templateUrl: './HotelItem.component.html', - imports: [ChildComponent, CurrencyPipe, FormsModule], + imports: [ChildComponent, CurrencyPipe, FormsModule, StarRatingComponent], }) export class HotelItem { @Input() public hotel!: Hotel; diff --git a/src/app/star-rating/star-rating.component.css b/src/app/star-rating/star-rating.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/star-rating/star-rating.component.html b/src/app/star-rating/star-rating.component.html new file mode 100644 index 0000000..b1737ca --- /dev/null +++ b/src/app/star-rating/star-rating.component.html @@ -0,0 +1,139 @@ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+

+ {{ rating }} +

+

+ out of +

+

5

+
diff --git a/src/app/star-rating/star-rating.component.spec.ts b/src/app/star-rating/star-rating.component.spec.ts new file mode 100644 index 0000000..f9778b3 --- /dev/null +++ b/src/app/star-rating/star-rating.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { StarRatingComponent } from './star-rating.component'; + +describe('StarRatingComponent', () => { + let component: StarRatingComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [StarRatingComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(StarRatingComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/star-rating/star-rating.component.ts b/src/app/star-rating/star-rating.component.ts new file mode 100644 index 0000000..30d6475 --- /dev/null +++ b/src/app/star-rating/star-rating.component.ts @@ -0,0 +1,19 @@ +import { NgClass } from '@angular/common'; +import { Component, Input } from '@angular/core'; + +@Component({ + selector: 'app-star-rating', + standalone: true, + imports: [NgClass], + templateUrl: './star-rating.component.html', + styleUrl: './star-rating.component.css' +}) +export class StarRatingComponent { + @Input() public rating: number = 0; + public stars: number[] = []; + + public setRating(rating: number) { + this.rating = rating; + this.stars = Array(rating).fill(0); + } +}