client-main-screen.component.ts

client-main-screen.component.ts

import {
  Component,
  OnInit,
  ChangeDetectionStrategy,
  ViewChild,
  DoCheck,
  Inject,
  ChangeDetectorRef,
  NgZone
} from '@angular/core';
import {ComponentInstruction} from 'angular2/router';
import {AsyncPipe, NgIf, COMMON_DIRECTIVES} from '@angular/common';
import {CanActivate, RouteConfig, Router, RouteParams} from '@angular/router-deprecated';
import {Reducer, Action, Store} from '@ngrx/store';
import {Observable} from 'rxjs/Observable';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';
import {Map} from 'immutable';
import {includes} from 'lodash';

import {MenuPanelComponent} from '../menu-panel';
import {ClientMapComponent} from '../client-map';
import {TourTnx} from '../tour-tnx';
import {ClientMainScreenViewModel} from './client-main-screen.viewmodel';
import {ProxiesActions} from '../../proxies/proxies.actions';
import {ProxyInfoPopupComponent} from '../proxy-info-popup';
import {UserActions} from '../../users/users.actions';
import {RequestsActions} from '../../requests/requests.actions';
import {RequestsRtManager} from '../../requests/requests-rt-manager';
import {RequestsStore} from '../../requests/requests.store';
import {IUser, ICreateRequestResponse, IGetRequestResponse} from '../../api';
import {canActivateMainScreen, shouldActivate} from '../../common/helpers';
import {SearchLocationComponent} from '../search-location';
import {CreateRequestPopupComponent} from '../create-request-popop';

@Component({
  selector: 'client-main-screen',
  template: require('./client-main-screen.html'),
  styles: [require('./client-main-screen.css')],
  directives: [
    COMMON_DIRECTIVES,
    MenuPanelComponent,
    ClientMapComponent,
    ProxyInfoPopupComponent,
    TourTnx,
    SearchLocationComponent,
    CreateRequestPopupComponent
  ],
  providers: [ClientMainScreenViewModel],
  pipes: [AsyncPipe],
  changeDetection: ChangeDetectionStrategy.OnPush
})
@CanActivate(canActivateMainScreen)
export class ClientMainScreenComponent implements OnInit {
  @ViewChild(ProxyInfoPopupComponent) proxyPopup: ProxyInfoPopupComponent;

  slideUp: any = { 'page__wrapper__slideup': false };
  showTourCompletedOverlay = false;
  showSearch = false;
  createRequestVisible = false;

  private _timeoutId: any = false;
  private _countUpdateInterval;

  constructor(
    private _proxiesActions: ProxiesActions,
    private _usersActions: UserActions,
    private _requestsManager: RequestsRtManager,
    private _requestActions: RequestsActions,
    private _requestsStore: RequestsStore,
    private _store: Store<any>,
    private _router: Router,
    private _routeParams: RouteParams,
    private _changeDetectorRef: ChangeDetectorRef,
    zone: NgZone,
    public vm: ClientMainScreenViewModel) {
    this._proxiesActions.getProxiesCount();
    this._proxiesActions.getOnlineProxies();
    this._countUpdateInterval = setInterval(() =>
      this._proxiesActions.getProxiesCount(), 60000);
  }

  routerOnActivate(next: ComponentInstruction, prev: ComponentInstruction) {
    let prevUrl = prev ? prev.urlPath : null;
    if (prevUrl === '') {
      this.slideUp['page__wrapper__slideup'] = true; // tslint:disable-line
    }
  }

  showProxyPopup(userId: number) {
    this._usersActions.getUser({ id: userId }).subscribe(user => {
      this.proxyPopup.show(user);
    });
  }

  onCreateRequestClick(userId) {
    this._requestActions.create({ proxy_id: userId })
      .subscribe((request) => {
        this._requestsManager.subscribeToStatusChange(request.request_id);
        this.proxyPopup.startTimer(59);
      },
      (err) => {
        let message = '';
        try {
          message = err.json().proxy_id[0];
        } catch (e) {
          message = 'Unexpected error.';
        }
        this.proxyPopup.statusMessage = message;
      });
  }

  ngOnInit() { }

  ngAfterViewInit() {
    this._requestsManager.on(['new'], (request, proxy) => {
      this.proxyPopup.show(proxy);
      this.proxyPopup.startTimer(59);
    });
    this._requestsManager.on(['accepted'], (request, proxy) => {
      this.proxyPopup.statusMessage = 'Request was accepted.';
      this.proxyPopup.show(proxy);
    });
    this._requestsManager.on(['halted', 'declined'], (request, proxy) => {
      this.proxyPopup.statusMessage = request.status === 'declined'
        ? 'Request was declined.'
        : 'Proxy did not respond.';
      this.proxyPopup.show(proxy);
    });
    this._requestsManager.on(['online'], (request, proxy) => {
      this._router.navigate(['Tour', { requestId: request.request_id }]);
    });
    this._requestsStore.currentRequest$.subscribe(request => {
      if (request && request.status === 'completed') {
        this.showTourCompletedOverlay = true;
      }
    });
    this._requestsManager.restoreSubscription();
  }

  hideTourCompletedOverlay() {
    this.showTourCompletedOverlay = false;
  }

  showCreateRequestPopup() {
    this.createRequestVisible = true;
  }

  closeCreateRequestPopup() {
    this.createRequestVisible = false;
  }

  ngOnChanges() {
    console.log('main screen changed');
  }

  ngOnDestroy() {
    clearInterval(this._countUpdateInterval);
    clearTimeout(this._timeoutId);
  }

  onCommonRequestSubmit() {
    this.createRequestVisible = false;
    this.showSearch = true;
  }

  onSearch() {
    this.showSearch = true;
  }

  onSearchCancel() {
    this.showSearch = false;
  }

  onLogout() {
    this._usersActions.logout();
  }
}