<file_sep>import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-amenities',
  templateUrl: './amenities.component.html',
  styleUrls: ['./amenities.component.css']
})
export class AmenitiesComponent implements OnInit {

  @Input() amenitie: string[];

  splitElementeImage: string[];


  amenitieImage: any = '';

  constructor() { }

  ngOnInit() {

    this.amenitieImage = `${this.amenitie.toString()},`;

    this.amenitieImage = this.amenitieImage.replace(/,/g, '.svg,');

    this.splitElementeImage = this.amenitieImage.substring(0, this.amenitieImage.length - 1).split(',');

  }

}
<file_sep># Almundo ui

Almundo-ui is an application developed in Angular adaptable to mobile devices, which allows to list and filter hotels.

This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.6.5.

### Installation and requirements

- download and execute following step by step the instructions of the readme file the [Almundo-api](https://github.com/xiomarapulido/almundo-api.git) project that is the backend of the application.
- Clone this repository locally.
- Install the node modules with the command:
    ```sh
        $ npm install
    ```
- Run the application with the command: 
    ```sh
        $ ng serve
    ```
- Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
<file_sep>export interface Hotel {
    id: Number,
    name: String,
    stars: Array<Number>,
    price: Number,
    image: String,
    amenities: {}
}<file_sep>import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';


import { AppComponent } from './app.component';
import { HotelsComponent } from './components/hotels/hotels.component';
import { HeaderComponent } from './components/header/header.component';
import { FiltersComponent } from './components/filters/filters.component';
import { BodyComponent } from './components/body/body.component';
import { HotelsService } from './services/hotels.service';
import { HttpClientModule } from '@angular/common/http';
import { StarsRatingComponent } from './components/stars-rating/stars-rating.component';
import { AmenitiesComponent } from './components/amenities/amenities.component';
import { ViewHotelComponent } from './components/view-hotel/view-hotel.component';
import { CommunicationService } from './services/communications.service';


@NgModule({
  declarations: [
    AppComponent,
    HotelsComponent,
    HeaderComponent,
    FiltersComponent,
    BodyComponent,
    StarsRatingComponent,
    AmenitiesComponent,
    ViewHotelComponent
  ],
  imports: [
    FormsModule,
    BrowserModule,
    HttpClientModule
  ],
  providers: [
    HotelsService,
    CommunicationService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
<file_sep>import { Injectable } from '@angular/core';


import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';

import { environment as ENV } from '../../environments/environment';
import { Hotel } from '../models/Hotel';

@Injectable()
export class HotelsService {

  public servicesUrl = `${ENV.hotels_api}/hotel`;

  constructor(private http: HttpClient) { }

  public getHotelsFilter(name?: string, stars?: Array<number>, id?: string) {
    let url = `${this.servicesUrl}?hotels=almundo`;
    url += `${name ? `&name=${name}` : ''}`;
    url += `${id ? `&id=${id}` : ''}`;
    url += `${stars && stars.length ? `&stars=[${stars}]` : ''}`;

    return this.http.get(url);
  }

}
<file_sep>import { Component, OnInit, Input } from '@angular/core';

import { HotelsService } from '../../services/hotels.service';
import { Hotel } from '../../models/Hotel';
import { AfterViewInit } from '@angular/core/src/metadata/lifecycle_hooks';

@Component({
  selector: 'app-view-hotel',
  templateUrl: './view-hotel.component.html',
  styleUrls: ['./view-hotel.component.css']
})
export class ViewHotelComponent implements OnInit, AfterViewInit {


  @Input() id: string;

  hotel: any;

  constructor(private hotelsService: HotelsService) { }

  ngOnInit() {
    this.filterHotelsById();
  }

  ngAfterViewInit() {
    document.getElementById('div-click-modal').click();
  }

  filterHotelsById() {
    this.hotelsService.getHotelsFilter(null, [], this.id)
      .subscribe((res) => {
        const [hotel] = res['data'];
        this.hotel = hotel;
      });
  }



}
<file_sep>import { Component, OnInit, ViewChild, ViewContainerRef, ComponentRef, ComponentFactoryResolver, ComponentFactory } from '@angular/core';

import { HotelsService } from '../../services/hotels.service';
import { Hotel } from '../../models/Hotel';
import { CommunicationService } from '../../services/communications.service';
import { OnDestroy } from '@angular/core/src/metadata/lifecycle_hooks';
import { ViewHotelComponent } from '../view-hotel/view-hotel.component';

@Component({
  selector: 'app-hotels',
  templateUrl: './hotels.component.html',
  entryComponents: [ViewHotelComponent]
})
export class HotelsComponent implements OnInit, OnDestroy {

  @ViewChild('modalContainer', { read: ViewContainerRef }) modalContainer;
  componentRef: ComponentRef<any>;
  
  hotels: Array<Hotel>;
  subscription: any;

  constructor(private hotelsService: HotelsService,
    private communicationService: CommunicationService,
    private resolver: ComponentFactoryResolver) {
    this.hotels = [];
  }

  ngOnInit() {
    this.getHotels();
    this.subscription = this.communicationService.$loadHotels.subscribe(({ id, name, stars }) => {
      this.getHotels(name, stars, id);
    });
  }

  ngOnDestroy(): void {
    if (this.subscription)
      this.subscription.unsubscribe();
  }

  viewHotel(id: string) {
    this.modalContainer.clear();
    const factory: ComponentFactory<any> = this.resolver.resolveComponentFactory(ViewHotelComponent);
    this.componentRef = this.modalContainer.createComponent(factory);
    this.componentRef.instance.id = id;
  }

  getHotels(name?, stars?, id?) {

    this.hotelsService.getHotelsFilter(name, stars, id)
      .subscribe((res) => { this.hotels = res['data']; });

  }

}
<file_sep>import { Component, OnInit } from '@angular/core';

import { HotelsService } from '../../services/hotels.service';
import { CommunicationService } from '../../services/communications.service';


@Component({
  selector: 'app-filters',
  templateUrl: './filters.component.html',
  styleUrls: ['./filters.component.css']
})
export class FiltersComponent implements OnInit {

  public stars = {};

  starsFilter: Array<number>;
  indexArray: any;
  nameHotel: string;

  constructor(private hotelsService: HotelsService,
    private communicationService: CommunicationService) {

    this.starsFilter = [];
    this.stars = {
      one: false,
      two: false,
      three: false,
      four: false,
      five: false,
      all: false
    }
  }

  ngOnInit() {
  }

  public filterStarsHotels($event: any, stars: any) {

    if (Array.isArray(stars) && $event) {
      this.starsFilter = stars;
      Object.keys(this.stars).map((key) => this.stars[key] = true)
    } else if (Array.isArray(stars) && !$event) {
      this.starsFilter = [];
      Object.keys(this.stars).map((key) => this.stars[key] = false)
    } else if ($event && !this.starsFilter.includes(stars)) {
      this.starsFilter.push(stars);
    } else {
      this.stars['all'] = false;
      this.starsFilter = this.starsFilter.filter(star => star !== stars)
    }
    this.filterHotels();
  }

  public filterHotels() {
    this.communicationService.getHotelsWithParams(null, this.nameHotel, this.starsFilter)
  }

}
<file_sep>import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-stars-rating',
  templateUrl: './stars-rating.component.html',
  styleUrls: ['./stars-rating.component.css']
})
export class StarsRatingComponent implements OnInit {

  @Input() stars: number = 0;

  public starsFixed: Array<number> = [1, 2, 3, 4, 5];

  constructor() { }

  ngOnInit() {
  }

}
