step 12

first-app/src/app/details/details.css

@@ -0,0 +1,62 @@
+.listing-photo {
+    height: 600px;
+    width: 50%;
+    object-fit: cover;
+    border-radius: 30px;
+    float: right;
+}
+.listing-heading {
+    font-size: 48pt;
+    font-weight: bold;
+    margin-bottom: 15px;
+}
+.listing-location::before {
+    content: url('/assets/location-pin.svg') / '';
+}
+.listing-location {
+    font-size: 24pt;
+    margin-bottom: 15px;
+}
+.listing-features > .section-heading {
+    color: var(--secondary-color);
+    font-size: 24pt;
+    margin-bottom: 15px;
+}
+.listing-features {
+    margin-bottom: 20px;
+}
+.listing-features li {
+    font-size: 14pt;
+}
+li {
+    list-style-type: none;
+}
+.listing-apply .section-heading {
+    font-size: 18pt;
+    margin-bottom: 15px;
+}
+label, input {
+    display: block;
+}
+label {
+    color: var(--secondary-color);
+    font-weight: bold;
+    text-transform: uppercase;
+    font-size: 12pt;
+}
+input {
+    font-size: 16pt;
+    margin-bottom: 15px;
+    padding: 10px;
+    width: 400px;
+    border-top: none;
+    border-right: none;
+    border-left: none;
+    border-bottom: solid .3px;
+}
+@media (max-width: 1024px) {
+    .listing-photo {
+        width: 100%;
+        height: 400px;
+    }
+}

first-app/src/app/details/details.html

@@ -0,0 +1,13 @@
+<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>
+</article>

first-app/src/app/details/details.ts

@@ -1,15 +1,65 @@
-import { Component } from '@angular/core';
+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',
+    selector: 'app-details',
-  imports: [],
+    imports: [ReactiveFormsModule],
-  template: `
+    template: `
-    <p>
+        <article>
-      details works!
+            <img
-    </p>
+                    class="listing-photo"
-  `,
+                    [src]="housingLocation?.photo"
-  styles: ``
+                    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 ?? '',
+        );
+    }
 }

first-app/src/app/housing-location/housing-location.html

@@ -3,4 +3,5 @@
          alt="Exterior photo of {{ housingLocation().name }}" crossorigin/>
     <h2 class="listing-heading">{{ housingLocation().name }}</h2>
     <p class="listing-location">{{ housingLocation().city }}, {{ housingLocation().state }}</p>
+    <a [routerLink]="['/details', housingLocation().id]">Learn More</a>
 </section>

first-app/src/app/housing-location/housing-location.ts

@@ -1,8 +1,10 @@
 import {Component, input} from '@angular/core'; // Importation de la fonction input() et des components
 import {HousingLocationInfo} from '../housinglocation'; // Interface
+
+import {RouterModule} from '@angular/router'; // Importation du router
 @Component({
     selector: 'app-housing-location',
-    imports: [],
+    imports: [RouterModule],
     templateUrl: './housing-location.html',
     styleUrls: ['./housing-location.css'],
 })

first-app/src/app/housing.ts

@@ -113,4 +113,9 @@ export class HousingService {
     getHousingLocationById(id: number): HousingLocationInfo | undefined {
         return this.housingLocationList.find((housingLocation) => housingLocation.id === id);
     }
+    submitApplication(firstName: string, lastName: string, email: string) {
+        console.log(
+            `Homes application received: firstName: ${firstName}, lastName: ${lastName}, email: ${email}.`,
+        );
+    }
 }