65 lines
2.8 KiB
TypeScript
65 lines
2.8 KiB
TypeScript
import {Component, inject} from '@angular/core';
|
|
import {ActivatedRoute} from '@angular/router';
|
|
import {HousingService} from '../housing';
|
|
import {HousingLocationInfo} from '../housinglocation';
|
|
import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
|
|
@Component({
|
|
selector: 'app-details',
|
|
imports: [ReactiveFormsModule],
|
|
template: `
|
|
<article>
|
|
<img
|
|
class="listing-photo"
|
|
[src]="housingLocation?.photo"
|
|
alt="Exterior photo of {{ housingLocation?.name }}"
|
|
crossorigin
|
|
/>
|
|
<section class="listing-description">
|
|
<h2 class="listing-heading">{{ housingLocation?.name }}</h2>
|
|
<p class="listing-location">{{ housingLocation?.city }}, {{ housingLocation?.state }}</p>
|
|
</section>
|
|
<section class="listing-features">
|
|
<h2 class="section-heading">About this housing location</h2>
|
|
<ul>
|
|
<li>Units available: {{ housingLocation?.availableUnits }}</li>
|
|
<li>Does this location have wifi: {{ housingLocation?.wifi }}</li>
|
|
<li>Does this location have laundry: {{ housingLocation?.laundry }}</li>
|
|
</ul>
|
|
</section>
|
|
<section class="listing-apply">
|
|
<h2 class="section-heading">Apply now to live here</h2>
|
|
<form [formGroup]="applyForm" (submit)="submitApplication()">
|
|
<label for="first-name">First Name</label>
|
|
<input id="first-name" type="text" formControlName="firstName" />
|
|
<label for="last-name">Last Name</label>
|
|
<input id="last-name" type="text" formControlName="lastName" />
|
|
<label for="email">Email</label>
|
|
<input id="email" type="email" formControlName="email" />
|
|
<button type="submit" class="primary">Apply now</button>
|
|
</form>
|
|
</section>
|
|
</article>
|
|
`,
|
|
styleUrls: ['./details.css'],
|
|
})
|
|
export class Details {
|
|
route: ActivatedRoute = inject(ActivatedRoute);
|
|
housingService = inject(HousingService);
|
|
housingLocation: HousingLocationInfo | undefined;
|
|
applyForm = new FormGroup({
|
|
firstName: new FormControl(''),
|
|
lastName: new FormControl(''),
|
|
email: new FormControl(''),
|
|
});
|
|
constructor() {
|
|
const housingLocationId = parseInt(this.route.snapshot.params['id'], 10);
|
|
this.housingLocation = this.housingService.getHousingLocationById(housingLocationId);
|
|
}
|
|
submitApplication() {
|
|
this.housingService.submitApplication(
|
|
this.applyForm.value.firstName ?? '',
|
|
this.applyForm.value.lastName ?? '',
|
|
this.applyForm.value.email ?? '',
|
|
);
|
|
}
|
|
} |