@Component({
  selector: 'app-root',
  template: `<router-outlet></router-outlet>`
})
export class AppComponent {
  title = 'bi-angular';
}

import { NgModule } from '@angular/core';
import {VotesComponent} from './votes/votes.component';
import {RouterModule, Routes} from '@angular/router';


const routes: Routes = [
  {path: '', redirectTo: '/votes', pathMatch: 'full'},
  {path: 'votes', component: VotesComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

  isCollapsed = true;

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

...

imports:[
...
    BrowserAnimationsModule,
]

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { VotesComponent } from './votes/votes.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';


@NgModule({
  declarations: [
    AppComponent,
    VotesComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgbModule,
    BrowserAnimationsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

export interface QuestionOption {
  label: string;
}

import {QuestionOption} from './QuestionOption';

export interface Question {
  photoUrl?: string;
  question: string;
  description?: string;
  created: number;
  options: QuestionOption[];
}

export interface QuestionEntity extends Question {
  id: string;
}

export interface Vote {
  option: string;
  timeStamp: number;
}

import {Injectable} from '@angular/core';
import {BehaviorSubject, Observable} from 'rxjs';
import {Question, QuestionEntity} from './model/Question';
import {Vote} from './model/Vote';

@Injectable()
export class VotesService {

  questions: Observable<QuestionEntity[]>;

  constructor() {
    this.questions = this.getDummyQuestions();
  }

  getDummyQuestions(): Observable<QuestionEntity[]> {
    return new BehaviorSubject([
      {
        id: '1',
        photoUrl: '',
        question: 'How are you?',
        description: 'I\'m good too..',
        created: Date.now(),
        options: [{label: 'good'}, {label: 'ehh'}]
      },
      {
        id: '2',
        photoUrl: '',
        question: 'How are you again?',
        description: 'Just cheking...',
        created: Date.now(),
        options: [{label: 'good again'}, {label: 'still ehh'}]
      }
    ]);
  }

  async addQuestion(q: Question) {
    // TODO: implement
  }

  async vote(questionId: string, optionLabel: string) {
    // TODO: implement
  }

  async delete(questionId: string) {
    // TODO: implement
  }

  getVotes(questionId: string): Observable<Vote[]> {
    // TODO: implement
    return null;
  }
}

import {VotesService} from './votes.service';
...
providers:[
...
VotesService
]

export class VotesComponent {
  constructor(public votesService: VotesService) {
  }
}

import {Component, Input, OnInit} from '@angular/core';
import {QuestionEntity} from '../../model/Question';
import {VotesService} from '../../votes.service';

@Component({
  selector: 'app-question',
  templateUrl: './question.component.html',
  styleUrls: ['./question.component.css']
})
export class QuestionComponent {

  selected: string;
  @Input() question: QuestionEntity;

  constructor(private votesService: VotesService) {
  }

  async vote() {
    if (!this.selected) {
      return;
    }
    await this.votesService.vote(this.question.id, this.selected);
    // TODO: add toast
  }

  async deleteQuestion() {
    // TODO: implement
  }

}

import {FormsModule} from '@angular/forms';
...
import:[
...
FormsModule
...
]

import {Pipe, PipeTransform} from '@angular/core';

@Pipe({
  name: 'timeAgo',
  pure: false
})
export class TimeAgoPipe implements PipeTransform {


  public transform(time: number): string {
    const delta = (Date.now() - time) / 1000;

    // format string
    if (delta < 60) { // sent in last minute
      return `${Math.floor(delta)}s ago`;
    } else if (delta < 3600) { // sent in last hour
      return `${Math.floor(delta / 60)}m ago`;
    } else if (delta < 86400) { // sent on last day
      return `${Math.floor(delta / 3600)}h ago`;
    } else { // sent more than one day ago
      return `${Math.floor(delta / 86400)}d ago`;
    }
  }

}

import {TimeAgoPipe} from './pipes/TimeAgoPipe';
...
declarations:[
TimeAgoPipe
]

import {Component, TemplateRef} from '@angular/core';
import {VotesService} from '../votes.service';
import {NgbModal, NgbModalRef} from '@ng-bootstrap/ng-bootstrap';
import {Question} from '../model/Question';

@Component({
  selector: 'app-votes',
  templateUrl: './votes.component.html',
  styleUrls: ['./votes.component.css']
})
export class VotesComponent {

  modalRef: NgbModalRef;
  question: Question;
  isCollapsed = true;

  constructor(public votesService: VotesService,
              private modalService: NgbModal) {
  }

  openModal(template: TemplateRef<any>) {

    this.question = {
      question: '',
      created: Date.now(),
      photoUrl: '',
      description: '',
      options: []
    };
    this.addOption();
    this.addOption();
    this.modalRef = this.modalService.open(template);
  }

  async addQuestion() {
    this.modalRef.close();
    await this.votesService.addQuestion(this.question);
  }

  addOption() {
    this.question.options.push({label: ''});
  }
}

export const environment = {
  production: false,
  firebase: {
    apiKey: "AIzaSyD0qWw7YgMqGd-ELV0a8ea8O0w2u29wR4M",
    authDomain: "bi-labor-angular2.firebaseapp.com",
    databaseURL: "https://bi-labor-angular2.firebaseio.com",
    projectId: "bi-labor-angular2",
    storageBucket: "bi-labor-angular2.appspot.com",
    messagingSenderId: "1009646526609"
  }
};

import {AngularFireModule} from '@angular/fire';
import {AngularFirestoreModule} from '@angular/fire/firestore';
import {environment} from '../environments/environment';
...
imports: [
...
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule
]

import {Injectable} from '@angular/core';
import {BehaviorSubject, Observable} from 'rxjs';
import {Question, QuestionEntity} from './model/Question';
import {Vote} from './model/Vote';
import {AngularFirestore, AngularFirestoreCollection, DocumentChangeAction} from '@angular/fire/firestore';
import {map} from 'rxjs/operators';

@Injectable()
export class VotesService {

  questions: Observable<QuestionEntity[]>;

  private questionCollection: AngularFirestoreCollection<Question>;

  constructor(private afs: AngularFirestore) {
    this.questionCollection = afs.collection<Question>('questions',
      ref => ref.orderBy('created', 'desc').limit(50));

    this.questions = <any>this.questionCollection.snapshotChanges().pipe(
      map((actions: DocumentChangeAction<Question>[]) => {
        return actions.map(a => {
          const data = a.payload.doc.data() as Question;
          const id = a.payload.doc.id;
          return {id, ...data};
        });
      }));
  }


  getDummyQuestions(): Observable<QuestionEntity[]> {
    return new BehaviorSubject([
      {
        id: '1',
        photoUrl: '',
        question: 'How are you?',
        description: 'I\'m good too..',
        created: Date.now(),
        options: [{label: 'good'}, {label: 'ehh'}]
      },
      {
        id: '2',
        photoUrl: '',
        question: 'How are you again?',
        description: 'Just cheking...',
        created: Date.now(),
        options: [{label: 'good again'}, {label: 'still ehh'}]
      }
    ]);
  }

  async addQuestion(q: Question) {
    await this.questionCollection.add(q);
  }

  async vote(questionId: string, optionLabel: string) {
    await this.questionCollection.doc(questionId)
      .collection<Vote>('votes').add({timeStamp: Date.now(), option: optionLabel});
  }

  async delete(questionId: string) {
    // TODO: implement
    // do not forget to delete the votes subcollection manually
  }


  getVotes(questionId: string): Observable<Vote[]> {
    return this.questionCollection.doc(questionId).collection<Vote>('votes').valueChanges();
  }

}

const routes: Routes = [
  { path: '', redirectTo: '/votes', pathMatch: 'full' },
  { path: 'votes', component: VotesComponent },
  { path: 'statistic/:id', component: StatisticComponent }
];