dito-front/src/app/timeline/timeline.service.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import * as moment from 'moment';
import { CurrencyPipe } from '@angular/common';

export class Transaction {
  itens = [];
  custom_data = {}
  header: { value: string, icon: string }[] = [];
  time: moment.Moment;
};

@Injectable({
  providedIn: 'root'
})
export class ApiEventsService {

  // public apiURL = 'https://storage.googleapis.com/dito-questions/events.json';
  public apiURL = 'https://dito-questions.storage.googleapis.com/events.json';
  public _events: any;

  constructor(
    protected $http: HttpClient
  ) {
    this._events = [
      {
        "event": "comprou-produto", "timestamp": "2016-09-22T13:57:33.2311892-03:00", "custom_data": [{ "key": "product_price", "value": 150 }, { "key": "transaction_id", "value": "3029384" }, { "key": "product_name", "value": "Calça Rosa" }]
      },
      {
        "event": "comprou-produto", "timestamp": "2016-10-02T11:37:35.2300892-03:00", "custom_data": [{ "key": "transaction_id", "value": "3409340" }, { "key": "product_name", "value": "Tenis Preto" }, { "key": "product_price", "value": 120 }]
      },
      {
        "event": "comprou", "timestamp": "2016-10-02T11:37:31.2300892-03:00", "revenue": 120, "custom_data": [{ "key": "transaction_id", "value": "3409340" }, { "key": "store_name", "value": "BH Shopping" }]
      },
      {
        "event": "comprou-produto", "timestamp": "2016-09-22T13:57:32.2311892-03:00", "custom_data": [{ "key": "product_name", "value": "Camisa Azul" }, { "key": "transaction_id", "value": "3029384" }, { "key": "product_price", "value": 100 }]
      },
      {
        "event": "comprou", "timestamp": "2016-09-22T13:57:31.2311892-03:00", "revenue": 250, "custom_data": [{ "key": "store_name", "value": "Patio Savassi" }, { "key": "transaction_id", "value": "3029384" }]
      }
    ]
    console.log(this._events)

  }

  public transactions() {

    return new Observable<any>(ob => {
      // this.$http.get(this.apiURL).subscribe(results => {
      // const transations = this.parseEventResults(results);
      setTimeout(() => {
        ob.next(this.parseEventResults(this._events))
      })
      //   console.log(results)
      // })
    })
  }
  protected parseEventResults(events) {
    let currencyPipe = new CurrencyPipe('pt-BR')
      , transactions = []
      , transactionsMap = new Map<string, Transaction>();

    events.map(event => {
      let id;
      const found = event.custom_data.find(data => {
        if (data.key === 'transaction_id') {
          id = data.value;
          return true;
        }
      })

      if (!found) {
        return;
      }

      if (!transactionsMap.has(id)) {
        transactionsMap.set(id, new Transaction());
      }

      let trans = transactionsMap.get(id);

      switch (event.event) {
        case "comprou-produto":
          let add = { name: "", value: "" }
          // Atribui os valores do nome do produto e o preço para o objeto da listagem
          event.custom_data.find(item => {
            if (item.key === "product_name") {
              add.name = item.value;
            } else if (item.key === "product_price") {
              // Formata o valor com a moeda brasileira
              add.value = currencyPipe.transform(item.value, 'BRL', true, '1.2-2');
            }
          })
          trans.itens.push(add)
          break;
        case "comprou":
          // Converte o timestamp para um moment object
          trans.time = moment(event.timestamp);
          let place = "";

          trans.custom_data = event;
          // Busca o nome do estabelecimento
          event.custom_data.find(item => {
            if (item.key === "store_name") {
              place = item.value;
              return true;
            }
          })
          // Cria  um array contendo os elementos do header de cada evento
          // Cada elemento é mapeado para um item do array
          trans.header = [
            { icon: "icon-calendar", value: trans.time.format("DD/MM/YYYY") },
            { icon: "icon-clock", value: trans.time.format("HH:mm") },
            { icon: "icon-place", value: place },
            { icon: "icon-money", value: currencyPipe.transform(event.revenue, 'BRL', true, '1.2-2') },
          ];

          break;
      }
    })
    // Converte o map 
    transactionsMap.forEach(t => transactions.push(t))

    // Ordena as transações pela data
    transactions.sort((t1, t2) => {
      // if (t1) return 1;
      // if ( ) return -1;
      return (t1.time - t2.time);
    });
    console.log('transactions', transactions)
    return transactions;
  }

}