holiday house!

README.md

@@ -1,21 +1,11 @@
-# Fairhouse (Step One)
-Welcome to step one of building the application. You'll find the base application here.
+# Introduction to Angular Codelab
 
+\In this codelab, you'll build a housing app with Angular. The completed app will feature the ability to view home listings based on user search, and view details of a housing location.
 
-## This step covers
-lorem ipsum and all that jazz.
-## Local Setup
-*  Clone this repository
-*  change into `fairhouse` directory
-*  run `npm install`
+You'll build everything with Angular using Angular's powerful tooling and great browser integration.
 
-After the dependencies have been installed:
+Here's a preview of the finished application:
 
-* Run `ng serve` for a dev server. 
-* Navigate to `http://localhost:4200/`. 
+![Completed application - one column search results, second column search details](9yB5AM9sBgVwfTR.png)
 
-_The app will automatically reload if you change any of the source files._
-
-
-_______
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.0.4.
+The step-by-step guide can be found at [https://codelabs.developers.google.com/introduction-to-angular](https://codelabs.developers.google.com/introduction-to-angular)

angular.json

@@ -1,5 +1,8 @@
 {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "cli": {
+    "analytics": "015557eb-5b54-4a06-bc89-8e23a9ff1ff7"
+  },
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {

src/app/app.component.css

@@ -0,0 +1,49 @@
+header {
+    margin-bottom: 50px;
+    font-weight: bold;
+    font-size: 24pt;
+    border-bottom: solid .5px rgb(223, 223, 223);
+    color: #050e2e;
+}
+header {
+    padding-left: 50px;
+}
+header > img {
+    width: 28pt;
+    height: 29pt
+}
+section {
+    margin-left: 50px;
+    margin-right: 50px;
+}
+section {
+    display: flex;
+    justify-content: space-between;
+}
+
+article {
+    margin-left: 50px;
+    padding-top: 20px;
+    width: 50%
+}
+
+article, p {
+    color: #202845;
+}
+img {
+    border-radius: 5px;
+    width: 100%;
+}
+article > p:nth-child(n+2) {
+    font-size: 15pt;
+}
+
+article > p:first-of-type {
+    font-size: 40pt;
+    font-weight: bold;
+}
+
+article > p:nth-of-type(2) {
+    font-size: 30pt;
+    margin-bottom: 15px;
+}

src/app/app.component.html

@@ -1,3 +1,22 @@
-<section class="content">
-  <span>{{title}} app is running!</span>
-</section>
+<main>
+  <header><img src="../assets/logo.svg" alt="holiday house" />holidayhouse</header>
+  <section>
+    <app-housing-list
+      [locationList]="housingLocationList"
+      (locationSelectedEvent)="updateSelectedLocation($event)"
+    ></app-housing-list>
+  </section>
+
+  <article>
+    <ng-container *ngIf="selectedLocation">
+      <img [src]="selectedLocation.photo" />
+      <p>{{ selectedLocation.name }}</p>
+      <p>{{ selectedLocation.city }}, {{ selectedLocation.state }}</p>
+      <p>Unidades Disponíveis: {{ selectedLocation.availableUnits }}</p>
+      <p>
+        {{ selectedLocation.laundry ? "Tem lavanderia" : "Não tem lavanderia" }}
+      </p>
+      <p>{{ selectedLocation.wifi ? "Tem wifi" : "Não tem wifi" }}</p>
+    </ng-container>
+  </article>
+</main>

src/app/app.component.ts

@@ -1,10 +1,48 @@
 import { Component } from '@angular/core';
+import { HousingLocation } from 'src/housing-location';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.css'],
 })
 export class AppComponent {
-  title = 'fairhouse';
+  title = 'holidayhouse';
+  selectedLocation: HousingLocation | undefined;
+
+  updateSelectedLocation(location: HousingLocation) {
+    this.selectedLocation = location;
+  }
+
+  searchHousingLocations() {}
+
+  housingLocationList: HousingLocation[] = [
+    {
+      name: 'Acme Fresh Start Housing',
+      city: 'Chicago',
+      state: 'IL',
+      photo: '../assets/housing-1.jpg',
+      availableUnits: 4,
+      wifi: true,
+      laundry: true,
+    },
+    {
+      name: 'A113 Transitional Housing',
+      city: 'Santa Monica',
+      state: 'CA',
+      photo: '../assets/housing-2.jpg',
+      availableUnits: 0,
+      wifi: false,
+      laundry: true,
+    },
+    {
+      name: 'Warm Beds Housing Support',
+      city: 'Juneau',
+      state: 'AK',
+      photo: '../assets/housing-3.jpg',
+      availableUnits: 1,
+      wifi: false,
+      laundry: false,
+    },
+  ];
 }

src/app/app.module.ts

@@ -2,15 +2,12 @@ import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
 import { AppComponent } from './app.component';
+import { HousingListComponent } from './housing-list/housing-list.component';
 
 @NgModule({
-  declarations: [
-    AppComponent
-  ],
-  imports: [
-    BrowserModule
-  ],
+  declarations: [AppComponent, HousingListComponent],
+  imports: [BrowserModule],
   providers: [],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {}

src/app/housing-list/housing-list.component.css

@@ -0,0 +1,48 @@
+input,
+button {
+  border: solid 1px #555b6e;
+  border-radius: 2px;
+  display: inline-block;
+  padding: 0;
+}
+input {
+  width: 400px;
+  height: 40px;
+  border-radius: 2px 0 0 2px;
+  color: #888c9c;
+  border: solid 1px #888c9c;
+  padding: 0 5px 0 10px;
+}
+
+button {
+  width: 70px;
+  height: 42px;
+  background-color: #4468e8;
+  color: white;
+  border: solid 1px #4468e8;
+  border-radius: 0 2px 2px 0;
+}
+
+article {
+  margin: 40px 0 10px 0;
+  color: #202845;
+}
+article,
+article > p {
+  color: #202845;
+}
+
+article > p:first-of-type {
+  font-weight: bold;
+  font-size: 22pt;
+}
+
+img {
+  width: 490px;
+  border-radius: 5pt;
+}
+
+label {
+  display: block;
+  color: #888c9c;
+}

src/app/housing-list/housing-list.component.html

@@ -0,0 +1,17 @@
+<label for="location-search">Search for a new place</label>
+<input
+  id="location-search"
+  #search
+  (input)="searchHousingLocations($event)"
+  placeholder="Ex: Chicago"
+/>
+
+<article
+  *ngFor="let location of results"
+  (click)="selectHousingLocation(location)"
+>
+  <img [src]="location.photo" [alt]="location.name" />
+  <p>{{ location.name }}</p>
+  <p>{{ location.city }}, {{ location.state }}</p>
+  <button (click)="selectHousingLocation(location)">View</button>
+</article>

src/app/housing-list/housing-list.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HousingListComponent } from './housing-list.component';
+
+describe('HousingListComponent', () => {
+  let component: HousingListComponent;
+  let fixture: ComponentFixture<HousingListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ HousingListComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HousingListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/housing-list/housing-list.component.ts

@@ -0,0 +1,39 @@
+import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
+import { HousingLocation } from 'src/housing-location';
+
+@Component({
+  selector: 'app-housing-list',
+  templateUrl: './housing-list.component.html',
+  styleUrls: ['./housing-list.component.css'],
+})
+export class HousingListComponent implements OnInit {
+  @Input() locationList: HousingLocation[] = [];
+  @Output() locationSelectedEvent = new EventEmitter<HousingLocation>();
+
+  results: HousingLocation[] = [];
+
+  constructor() {}
+
+  searchHousingLocations(searchText: Event) {
+    let inputText = (searchText.target as HTMLInputElement).value;
+
+    if (!inputText) return;
+    this.results = this.locationList.filter((location) => {
+      return location.city.toLowerCase().includes(inputText.toLowerCase());
+    });
+
+    return this.results;
+  }
+
+  selectHousingLocation(location: HousingLocation) {
+    this.locationSelectedEvent.emit(location);
+  }
+
+  apertarEnter(event: any) {
+    if (event.keyCode === 13) {
+      console.log(this.searchHousingLocations(event.target.value));
+    }
+  }
+
+  ngOnInit(): void {}
+}