import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';
import { MatTableDataSource, MatSort } from '@angular/material';
import { AfterContentInit } from '@angular/core/src/metadata/lifecycle_hooks';


export interface Probe {
  id: string;
  name: string;
  ip: string;
  os: string;
  cidr: string;
  targetCnt: number;
  date: string;
  authBy: string;
}

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

export class DashboardPageComponent implements OnInit, AfterContentInit {

  displayedColumns = ['name', 'ip', 'os', 'cidr', 'targetCnt', 'date', 'authBy'];
  dataSource: MatTableDataSource<Probe>;
  @ViewChild(MatSort) sort: MatSort;

  constructor() { }

  ngAfterContentInit() {
    // temporary data
    const data: Probe[] = new Array();
    for (let i = 0; i < 10; i++) {
      const p: Probe = {
        id: String('id' + i),
        name: String('name' + i),
        ip: String('ip' + i),
        os: String('os' + i),
        cidr: String('cidr' + i),
        targetCnt: i,
        date: String('date' + i),
        authBy: String('insanity')
      };
      data.push(p);
    }

    this.dataSource = new MatTableDataSource(data);
    this.dataSource.sort = this.sort;
  }

  handleRowClick(obj: Probe) {
    // this.router.navigate(['probe', obj.id]);
  }

  ngOnInit() {
  }

}