/* Subcomponent */

import { Component, ElementRef, HostListener, Input } from '@angular/core';


@Component({
    selector: 'charts-filter',
    templateUrl: './filter.component.html'
})
export class ChartFilterComponent {
    constructor(private el: ElementRef) {}

    @Input() public dateRange: any;

    @Input() public users: Array<any> = [];
    @Input() public userTyped: Function;

    @Input() public clientTypes: Array<any> = [];
    @Input() public clientTypeTyped: Function;

    @Input() public clients: Array<any> = [];
    @Input() public clientTyped: Function;

    @Input() public selected: any = {};


    public userChanged(event) {
        this.selected['user'] = event;
        console.log(this.selected);
    }
    public userTyped_(event) {
        if(this.userTyped) {
            this.userTyped(event);
        }
    }
    public clientTypeChanged(event) {
        this.selected['clientType'] = event;
        console.log(this.selected);
    }
    public clientTypeTyped_(event) {
        if(this.clientTypeTyped) {
            this.clientTypeTyped(event);
        }
    }
    public clientChanged(event) {
        this.selected['client'] = event;
        console.log(this.selected);
    }
    public clientTyped_(event) {
        if(this.clientTyped) {
            this.clientTyped(event);
        }
    }

}


/* Component */

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

import { APIService } from '../api.service';

declare var $:any;

@Component({
    selector: 'app-charts',
    templateUrl: './charts.component.html',
    styleUrls: ['./charts.component.scss'],
})


export class ChartsComponent implements OnInit {
    public dateRange: any;

    public users: any = [{text: 'Asdf', id: 1}, {text: 'Lol', id: 2}];
    public clientTypes: any = [];
    public clients: any = [];

    public leftSelected: any = {};
    public rightSelected: any = {};

    constructor (private api: APIService) { }

    ngOnInit() { }

    userTyped(event) {
        console.log(event);
    }

    clientTypeTypes(even) {
        console.log(event);
    }

    clientTypedd(event) {
        console.log(this);
        this.api.getCars(event).subscribe(res => {
            this.clients = [];
            for(const car in res) {
                this.clients.push({id: car['id'], text: `${car['license_plate']} | ${car['phone_number]}']}`});
            }
        });
        console.log(event);
    }
}


/* HTML */

<h1> Statistici </h1>

<div class="container-fluid">

  <div class="row">
    <div class="col-md-6">
      <charts-filter
        [dateRange]="dateRange"
        [users]="users"
        [userTyped]="userTyped"
        [clientTypes]="clientTypes"
        [clients]="clients"
        [clientTyped]="clientTypedd"
        [selected]="leftSelected"></charts-filter>

    </div>

    <div class="col-md-6">
      <charts-filter></charts-filter>
    </div>
</div>