Compare commits
2 Commits
be3b2fbf7f
...
c34f7214b3
Author | SHA1 | Date |
---|---|---|
|
c34f7214b3 | |
|
0a43fe9af7 |
|
@ -2,9 +2,11 @@ import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZonelessC
|
||||||
import { provideRouter } from '@angular/router';
|
import { provideRouter } from '@angular/router';
|
||||||
|
|
||||||
import { routes } from './app.routes';
|
import { routes } from './app.routes';
|
||||||
|
import { provideProtractorTestingSupport } from '@angular/platform-browser';
|
||||||
|
|
||||||
export const appConfig: ApplicationConfig = {
|
export const appConfig: ApplicationConfig = {
|
||||||
providers: [
|
providers: [
|
||||||
|
provideProtractorTestingSupport(),
|
||||||
provideBrowserGlobalErrorListeners(),
|
provideBrowserGlobalErrorListeners(),
|
||||||
provideZonelessChangeDetection(),
|
provideZonelessChangeDetection(),
|
||||||
provideRouter(routes)
|
provideRouter(routes)
|
||||||
|
|
|
@ -1,3 +1,16 @@
|
||||||
import { Routes } from '@angular/router';
|
import { Routes } from '@angular/router';
|
||||||
|
import { Home } from './home/home';
|
||||||
|
import { Details } from './details/details';
|
||||||
|
|
||||||
export const routes: Routes = [];
|
export const routes: Routes = [
|
||||||
|
{
|
||||||
|
path: '',
|
||||||
|
component: Home,
|
||||||
|
title: 'Home page'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'details/:id',
|
||||||
|
component: Details,
|
||||||
|
title: 'Home details'
|
||||||
|
}
|
||||||
|
];
|
|
@ -1,21 +1,24 @@
|
||||||
import { Component } from '@angular/core';
|
import { Component } from '@angular/core';
|
||||||
import { RouterOutlet } from '@angular/router';
|
import { RouterOutlet } from '@angular/router';
|
||||||
import { Home } from './home/home';
|
import { Home } from './home/home';
|
||||||
|
import { RouterModule } from '@angular/router';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-root',
|
selector: 'app-root',
|
||||||
//imports: [RouterOutlet],
|
//imports: [RouterOutlet],
|
||||||
imports: [
|
imports: [
|
||||||
Home,
|
RouterModule
|
||||||
],
|
],
|
||||||
// templateUrl: './app.html',
|
// templateUrl: './app.html',
|
||||||
template: `
|
template: `
|
||||||
<main>
|
<main>
|
||||||
<header class="brand-name">
|
<a [routerLink]="['/']">
|
||||||
<img class="brand-logo" src="/assets/logo.svg" alt="logo" aria-hidden="true">
|
<header class="brand-name">
|
||||||
</header>
|
<img class="brand-logo" src="/assets/logo.svg" alt="logo" aria-hidden="true">
|
||||||
|
</header>
|
||||||
|
</a>
|
||||||
<section class="content">
|
<section class="content">
|
||||||
<app-home></app-home>
|
<router-outlet></router-outlet>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
`,
|
`,
|
||||||
|
|
|
@ -0,0 +1,71 @@
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,41 @@
|
||||||
|
import { Component, inject } from '@angular/core';
|
||||||
|
import { CommonModule } from '@angular/common';
|
||||||
|
import { ActivatedRoute } from '@angular/router';
|
||||||
|
import { Housing } from '../housing';
|
||||||
|
import { HousingLocation } from '../housing-location/housing-location';
|
||||||
|
import { HousingLocationInterface } from '../housinglocation.interface';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-details',
|
||||||
|
imports: [],
|
||||||
|
template: `
|
||||||
|
<article>
|
||||||
|
<img class="listing-photo" [src]="housingLocation?.photo"
|
||||||
|
alt="Exterior photo of {{housingLocation?.name}}"/>
|
||||||
|
<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>
|
||||||
|
`,
|
||||||
|
styleUrl: './details.scss'
|
||||||
|
})
|
||||||
|
export class Details {
|
||||||
|
route: ActivatedRoute = inject(ActivatedRoute);
|
||||||
|
housingService = inject(Housing);
|
||||||
|
housingLocation: HousingLocationInterface | undefined;
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
const housingLocationId = Number(this.route.snapshot.params['id']);
|
||||||
|
this.housingLocation = this.housingService.getHousingLocationById(housingLocationId);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -1,15 +1,19 @@
|
||||||
import { Component, Input } from '@angular/core';
|
import { Component, Input } from '@angular/core';
|
||||||
import { CommonModule } from '@angular/common';
|
import { CommonModule } from '@angular/common';
|
||||||
import { HousingLocationInterface } from '../housinglocation.interface';
|
import { HousingLocationInterface } from '../housinglocation.interface';
|
||||||
|
import { RouterLink } from '@angular/router';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-housing-location',
|
selector: 'app-housing-location',
|
||||||
imports: [],
|
imports: [
|
||||||
|
RouterLink
|
||||||
|
],
|
||||||
template: `
|
template: `
|
||||||
<section class="listing">
|
<section class="listing">
|
||||||
<img class="listing-photo" [src]="housingLocation.photo" alt="Exterior photo of {{housingLocation.name}}">
|
<img class="listing-photo" [src]="housingLocation.photo" alt="Exterior photo of {{housingLocation.name}}">
|
||||||
<h2 class="listing-heading">{{ housingLocation.name }}</h2>
|
<h2 class="listing-heading">{{ housingLocation.name }}</h2>
|
||||||
<p class="listing-location">{{ housingLocation.city}}, {{housingLocation.state }}</p>
|
<p class="listing-location">{{ housingLocation.city}}, {{housingLocation.state }}</p>
|
||||||
|
<a [routerLink]="['/details', housingLocation.id]">Learn More</a>
|
||||||
</section>
|
</section>
|
||||||
`,
|
`,
|
||||||
styleUrl: './housing-location.scss'
|
styleUrl: './housing-location.scss'
|
||||||
|
|
Loading…
Reference in New Issue