Skip to content

Commit

Permalink
I passed the hotel object from the form to the hotel page by router u…
Browse files Browse the repository at this point in the history 
…sing state
  • Loading branch information
@aline-borges
aline-borges committed Oct 18, 2020
1 parent e3d4e90 commit f5d2379
Show file tree
Hide file tree
Showing 7 changed files with 954 additions and 488 deletions.
3 changes: 2 additions & 1 deletion src/app/app-routing.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@ import { HotelsComponent } from './pages/hotels/hotels.component';
const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'hotels', component: HotelsComponent }
{ path: 'hotels', component: HotelsComponent },
{ path: '**', component: HomeComponent }
];

@NgModule({
Expand Down
1 change: 0 additions & 1 deletion src/app/app.module.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@

import { BrowserModule, Title } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
Expand Down
240 changes: 1 addition & 239 deletions src/app/components/form/form.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,242 +30,4 @@ <h1 class="page-title">
<i class="fas fa-mouse-pointer"></i>
</button>
</main>
</div>

<div class="container-hotel" id="hotel-page">
<app-header (sendTypeSearchHotel)="onSendTypeSearch($event)"></app-header>
<div id="form-hotel-page" class="search-form">
<div class="header-form ">
<i class="fas fa-map-marker-alt"></i>
<input
id="input-hotel"
(change)="getLocationHotelPage($event)"
(keyup.enter)="getHotels()"
class="search-input"
placeholder="Vai pra onde?"
#campoInput
>
</div>

<button class="button" (click)="getHotels()">
Pesquisar
<i class="fas fa-search"></i>
</button>
</div>
<div class="show-filters-buttons">
<button id="show-search-button" (click)="showForm()">
Mostrar Pesquisa
<i class="fas fa-plus"></i>
</button>
<button id="filter-button" (click)="showFilters()">
Filtrar
<i class="fas fa-filter"></i>
</button>
</div>
<div *ngIf="hotels" class="header-hotel-bar">
<p class="hotels-result"><span class="quantity-result">{{ this.quantity }}</span> {{ this.quantity == '1' ? 'hotel' : 'hotéis' }} para <span class="place-result">{{ this.place }}</span></p>
<div class="ordenation-aside">
<select class="ordenation-options" id="selectOrder" (change)="orderBy()">
<option disabled="disabled">Ordenar por:</option>
<option value="moreRelevance">Mais Relevância</option>
<option value="lowPrice">Menor Preço</option>
<option value="highPrice">Maior Preço</option>
</select>
</div>
</div>
<div class="body-hotel" id="hotel-container">
<div *ngIf="hotels" class="ordenation" id="ordenation">
<div class="slider" id="slider">
<p class="rangeText">Valor até: R$ {{ this.value ? this.value : '1500' }}</p>
<input type="range" id="range" [min]="minPrice" [max]="1500" [value]="1500" (click)="limitedByPrice()" (change)="rangeValue()">
</div>
<ul class="ordenation-stars" id="ordenation-stars">
<li class="ordenation-star-item">
<label class="checkbox path">
<input id="five-stars" type="checkbox" value="stars_5|2" (click)="getHotelsByStars()">
<svg viewBox="0 0 21 21">
<path d="M5,10.75 L8.5,14.25 L19.4,2.3 C18.8333333,1.43333333 18.0333333,1 17,1 L4,1 C2.35,1 1,2.35 1,4 L1,17 C1,18.65 2.35,20 4,20 L17,20 C18.65,20 20,18.65 20,17 L20,7.99769186"></path>
</svg>
</label>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</li>
<li class="ordenation-star-item">
<label class="checkbox path">
<input type="checkbox" id="four-stars" value="stars_4|2" (click)="getHotelsByStars()">
<svg viewBox="0 0 21 21">
<path d="M5,10.75 L8.5,14.25 L19.4,2.3 C18.8333333,1.43333333 18.0333333,1 17,1 L4,1 C2.35,1 1,2.35 1,4 L1,17 C1,18.65 2.35,20 4,20 L17,20 C18.65,20 20,18.65 20,17 L20,7.99769186"></path>
</svg>
</label>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</li>
<li class="ordenation-star-item">
<label class="checkbox path">
<input type="checkbox" id="three-stars" value="stars_3|2" (click)="getHotelsByStars()">
<svg viewBox="0 0 21 21">
<path d="M5,10.75 L8.5,14.25 L19.4,2.3 C18.8333333,1.43333333 18.0333333,1 17,1 L4,1 C2.35,1 1,2.35 1,4 L1,17 C1,18.65 2.35,20 4,20 L17,20 C18.65,20 20,18.65 20,17 L20,7.99769186"></path>
</svg>
</label>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</li>
<li class="ordenation-star-item">
<label class="checkbox path">
<input type="checkbox" id="two-stars" value="stars_2|2" (click)="getHotelsByStars()">
<svg viewBox="0 0 21 21">
<path d="M5,10.75 L8.5,14.25 L19.4,2.3 C18.8333333,1.43333333 18.0333333,1 17,1 L4,1 C2.35,1 1,2.35 1,4 L1,17 C1,18.65 2.35,20 4,20 L17,20 C18.65,20 20,18.65 20,17 L20,7.99769186"></path>
</svg>
</label>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</li>
<li class="ordenation-star-item">
<label class="checkbox path">
<input type="checkbox" id="one-star" value="stars_1|2" (click)="getHotelsByStars()">
<svg viewBox="0 0 21 21">
<path d="M5,10.75 L8.5,14.25 L19.4,2.3 C18.8333333,1.43333333 18.0333333,1 17,1 L4,1 C2.35,1 1,2.35 1,4 L1,17 C1,18.65 2.35,20 4,20 L17,20 C18.65,20 20,18.65 20,17 L20,7.99769186"></path>
</svg>
</label>
<i class="fas fa-star"></i>
</li>
</ul>
</div>
<div class="hotel-list">
<img *ngIf="!hotels" id="loading" src="../../../assets/images/loading.gif">
<ul class="hotel-cards">
<li class="hotel-item" *ngFor="let hotel of hotels">
<img class="hotel-photo" src="{{ hotel.image }}" alt="{{ hotel.name }}" >
<div class="hotel-information">
<div class="header-information">
<p class="hotel-name">{{ hotel.name }}</p>
<p class="hotel-rating">
<i *ngFor="let star of showStars(hotel.stars)" class="fas fa-star"></i>
</p>
</div>

<p class="hotel-location">
<i class="fas fa-map-marker"></i>
{{ hotel.address.city }}, {{ hotel.address.state }}
</p>
<ul class="hotel-amenities">
<li class="amenities-item" *ngFor="let amenity of showAmenities(hotel.featuredItem.amenities)">
<p class="amenity-title" *ngIf=" hotel.featuredItem.amenities == '' ? false : true">
{{ amenity }}
<i class="fas fa-check-circle"></i>
</p>
</li>
</ul>
<div class="footer-information">
<div class="tags-container">
<p class="hotel-tags specials-tags" *ngIf=" hotel.tags.length === 0 ? false : true">
{{ hotel.tags[0] }}
<i class="fas fa-fire-alt"></i>
</p>
<p class="hotel-tags hotel-free-cancelation" *ngIf=" hotel.hu_free_cancellation === false ? false : true">
{{ hotel.hu_free_cancellation === true ? 'Cancelamento Grátis' : ''}}
<i class="fas fa-info-circle"></i>
</p>
</div>
<div class="hotel-price-information">
<p>Diárias a partir de <span class="old-price">{{ hotel.price.old_price > hotel.price.amountPerDay ? hotel.price.old_price : '' }}</span></p>
<p class="price-taxes-container">
<span class="new-price price-container">
<span class="currency">R$</span>
{{ hotel.price.amountPerDay.toFixed(0) }}
</span> + Taxas
</p>
<button class="button" id="hotel-button"><a target="_blank" href="{{hotel.url}}">Visualizar Hotel</a></button>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="body-hotel" id="package-container">
<div *ngIf="hotels" class="ordenation" id="ordenation">
<div class="slider" id="slider">
<p class="rangeText">Valor até: R$ {{ this.value ? this.value : '1500' }}</p>
<input type="range" id="range" [min]="minPrice" [max]="1500" [value]="this.value" (click)="limitedByPrice()" (change)="rangeValue()">
</div>
</div>
<div class="hotel-list">
<img *ngIf="!hotels" id="loading" src="../../../assets/images/loading.gif">
<ul class="hotel-cards">
<li class="hotel-item" *ngFor="let hotel of hotels">
<div class="hotel-information">
<div class="header-information">
<p class="hotel-name">{{ hotel.name }}</p>
</div>

<p class="hotel-location">
<i class="fas fa-map-marker"></i>
{{ hotel.address.city }}, {{ hotel.address.state }}
</p>
<ul class="hotel-amenities">
<li class="amenities-item" *ngFor="let amenity of showAmenities(hotel.amenities)">
<p class="amenity-title" *ngIf=" hotel.amenities == '' ? false : true">
{{ amenity }}
<i class="fas fa-check-circle"></i>
</p>
</li>
</ul>
<div class="footer-information">
<div class="tags">
<p class="hotel-tags" *ngIf=" hotel.tags.length === 0 ? false : true">
{{ hotel.tags[0] }}
<i class="fas fa-fire-alt"></i>
</p>
</div>
<div class="hotel-price-information">
<p>Diárias a partir de <span class="old-price">{{ hotel.price.old_price > hotel.price.amountPerDay ? hotel.price.old_price : '' }}</span></p>
<p><span class="new-price"><span class="currency">R$</span>{{ hotel.price.amountPerDay.toFixed(0) }}</span> + Taxas</p>
<button class="button" id="hotel-button"><a target="_blank" href="{{hotel.url}}">Visualizar Hotel</a></button>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>

<ul class="buttons-page" *ngIf="hotels">
<li>
<button id="first-page" class="button-page" (click)="getHotels(1)" *ngIf="pagination.previousPage">
<i class="fas fa-angle-double-left"></i>
Primeira Página
</button>
</li>
<li>
<button id="previous-page" class="button-page" (click)="getHotels(currentPage - 1)" *ngIf="pagination.previousPage">
<i class="fas fa-angle-left"></i>
Página Anterior
</button>
</li>
<li>
<button id="next-page" class="button-page" (click)="getHotels(currentPage + 1)" *ngIf="pagination.nextPage">
Próxima Página
<i class="fas fa-angle-right"></i>
</button>
</li>
<li>
<button id="last-page" class="button-page" (click)="getHotels(pagination.count)" *ngIf="pagination.nextPage">
Última Página
<i class="fas fa-angle-double-right"></i>
</button>
</li>
<li>
<button id="back-to-top-page" class="button-page" (click)="backToTop()">
Voltar ao Topo
<i class="fas fa-angle-up"></i>
</button>
</li>
</ul>
</div>
</div>
Loading

0 comments on commit f5d2379

Please sign in to comment.