From 7355cbf6305956fe3df667db6c770075870d90b9 Mon Sep 17 00:00:00 2001 From: Phan Huy Tran Date: Wed, 13 Nov 2024 10:04:49 +0100 Subject: [PATCH] Service --- src/app/app.component.html | 6 +- src/app/details/details.component.css | 0 src/app/details/details.component.html | 1 + src/app/details/details.component.spec.ts | 23 ++++ src/app/details/details.component.ts | 12 ++ src/app/home/home.component.html | 12 +- src/app/home/home.component.ts | 9 +- src/app/housing-location.ts | 10 ++ .../housing-location.component.html | 16 ++- .../housing-location.component.ts | 5 +- src/app/housing.service.ts | 108 ++++++++++++++++++ 11 files changed, 193 insertions(+), 9 deletions(-) create mode 100644 src/app/details/details.component.css create mode 100644 src/app/details/details.component.html create mode 100644 src/app/details/details.component.spec.ts create mode 100644 src/app/details/details.component.ts create mode 100644 src/app/housing-location.ts create mode 100644 src/app/housing.service.ts diff --git a/src/app/app.component.html b/src/app/app.component.html index 2934ad1..abed03f 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1 +1,5 @@ - +
+

Homes

+ + +
diff --git a/src/app/details/details.component.css b/src/app/details/details.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/details/details.component.html b/src/app/details/details.component.html new file mode 100644 index 0000000..29525a6 --- /dev/null +++ b/src/app/details/details.component.html @@ -0,0 +1 @@ +

details works!

diff --git a/src/app/details/details.component.spec.ts b/src/app/details/details.component.spec.ts new file mode 100644 index 0000000..82e1a05 --- /dev/null +++ b/src/app/details/details.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DetailsComponent } from './details.component'; + +describe('DetailsComponent', () => { + let component: DetailsComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [DetailsComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(DetailsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/details/details.component.ts b/src/app/details/details.component.ts new file mode 100644 index 0000000..d818ab2 --- /dev/null +++ b/src/app/details/details.component.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-details', + standalone: true, + imports: [], + templateUrl: './details.component.html', + styleUrl: './details.component.css' +}) +export class DetailsComponent { + +} diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index 9c37226..3d862b6 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -1,10 +1,14 @@ -
+
-
- -
+
+ @for (housingLocation of housingLocationList; track housingLocation.id) { +
+ +
+ } +
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index d963fe1..9bb1a30 100644 --- a/src/app/home/home.component.ts +++ b/src/app/home/home.component.ts @@ -1,5 +1,7 @@ -import { Component } from '@angular/core'; +import {Component, inject} from '@angular/core'; import {HousingLocationComponent} from '../housing-location/housing-location.component'; +import {HousingLocation} from '../housing-location'; +import {HousingService} from '../housing.service'; @Component({ selector: 'app-home', @@ -11,5 +13,10 @@ import {HousingLocationComponent} from '../housing-location/housing-location.com styleUrl: './home.component.css' }) export class HomeComponent { + housingLocationList: HousingLocation[] = []; + housingService: HousingService = inject(HousingService); + constructor() { + this.housingLocationList = this.housingService.getAllHousingLocations(); + } } diff --git a/src/app/housing-location.ts b/src/app/housing-location.ts new file mode 100644 index 0000000..8303b67 --- /dev/null +++ b/src/app/housing-location.ts @@ -0,0 +1,10 @@ +export interface HousingLocation { + id: number; + name: string; + city: string; + state: string; + photo: string; + availableUnits: number; + wifi: boolean; + laundry: boolean; +} diff --git a/src/app/housing-location/housing-location.component.html b/src/app/housing-location/housing-location.component.html index 7fd3e26..49d26ae 100644 --- a/src/app/housing-location/housing-location.component.html +++ b/src/app/housing-location/housing-location.component.html @@ -1 +1,15 @@ -

housing-location works!

+
+
+ Exterior photo of {{ housingLocation.name }} +
+
+

{{ housingLocation.name }}

+

{{ housingLocation.city }}, {{ housingLocation.state }}

+
+
diff --git a/src/app/housing-location/housing-location.component.ts b/src/app/housing-location/housing-location.component.ts index f0d1e94..9c62703 100644 --- a/src/app/housing-location/housing-location.component.ts +++ b/src/app/housing-location/housing-location.component.ts @@ -1,4 +1,5 @@ -import { Component } from '@angular/core'; +import {Component, Input} from '@angular/core'; +import {HousingLocation} from '../housing-location'; @Component({ selector: 'app-housing-location', @@ -8,5 +9,5 @@ import { Component } from '@angular/core'; styleUrl: './housing-location.component.css' }) export class HousingLocationComponent { - + @Input() housingLocation!: HousingLocation; } diff --git a/src/app/housing.service.ts b/src/app/housing.service.ts new file mode 100644 index 0000000..9b1cee2 --- /dev/null +++ b/src/app/housing.service.ts @@ -0,0 +1,108 @@ +import {Injectable} from '@angular/core'; +import {HousingLocation} from './housing-location'; + +@Injectable({ + providedIn: 'root' +}) +export class HousingService { + readonly baseUrl = 'https://angular.dev/assets/images/tutorials/common'; + protected housingLocationList: HousingLocation[] = [{ + id: 0, + name: 'Acme Fresh Start Housing', + city: 'Chicago', + state: 'IL', + photo: `${this.baseUrl}/bernard-hermant-CLKGGwIBTaY-unsplash.jpg`, + availableUnits: 4, + wifi: true, + laundry: true, + }, { + id: 1, + name: 'A113 Transitional Housing', + city: 'Santa Monica', + state: 'CA', + photo: `${this.baseUrl}/brandon-griggs-wR11KBaB86U-unsplash.jpg`, + availableUnits: 0, + wifi: false, + laundry: true, + }, { + id: 2, + name: 'Warm Beds Housing Support', + city: 'Juneau', + state: 'AK', + photo: `${this.baseUrl}/i-do-nothing-but-love-lAyXdl1-Wmc-unsplash.jpg`, + availableUnits: 1, + wifi: false, + laundry: false, + }, { + id: 3, + name: 'Homesteady Housing', + city: 'Chicago', + state: 'IL', + photo: `${this.baseUrl}/ian-macdonald-W8z6aiwfi1E-unsplash.jpg`, + availableUnits: 1, + wifi: true, + laundry: false, + }, { + id: 4, + name: 'Happy Homes Group', + city: 'Gary', + state: 'IN', + photo: `${this.baseUrl}/krzysztof-hepner-978RAXoXnH4-unsplash.jpg`, + availableUnits: 1, + wifi: true, + laundry: false, + }, { + id: 5, + name: 'Hopeful Apartment Group', + city: 'Oakland', + state: 'CA', + photo: `${this.baseUrl}/r-architecture-JvQ0Q5IkeMM-unsplash.jpg`, + availableUnits: 2, + wifi: true, + laundry: true, + }, { + id: 6, + name: 'Seriously Safe Towns', + city: 'Oakland', + state: 'CA', + photo: `${this.baseUrl}/phil-hearing-IYfp2Ixe9nM-unsplash.jpg`, + availableUnits: 5, + wifi: true, + laundry: true, + }, { + id: 7, + name: 'Hopeful Housing Solutions', + city: 'Oakland', + state: 'CA', + photo: `${this.baseUrl}/r-architecture-GGupkreKwxA-unsplash.jpg`, + availableUnits: 2, + wifi: true, + laundry: true, + }, { + id: 8, + name: 'Seriously Safe Towns', + city: 'Oakland', + state: 'CA', + photo: `${this.baseUrl}/saru-robert-9rP3mxf8qWI-unsplash.jpg`, + availableUnits: 10, + wifi: false, + laundry: false, + }, { + id: 9, + name: 'Capital Safe Towns', + city: 'Portland', + state: 'OR', + photo: `${this.baseUrl}/webaliser-_TPTXZd9mOo-unsplash.jpg`, + availableUnits: 6, + wifi: true, + laundry: true, + },]; + + getAllHousingLocations(): HousingLocation[] { + return this.housingLocationList; + } + + getHousingLocationById(id: number): HousingLocation | undefined { + return this.housingLocationList.find((housingLocation) => housingLocation.id === id); + } +}