// Players
import { ApiService } from './ApiService';
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Response, Http } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/map';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    providers: [ApiService]
})

export class PlayersComponent{

    constructor(private _http: HttpClient, private service: ApiService) { }
    data: any[] = [];
    ngOnInit() {
        this.service.getPlayers()
            .subscribe((res: any[]) => {
                this.data = res;
                console.log('PLAYERS: res is', res);
            });
    }
    getPlayer() {

    }
    addPlayer(value: any) {

        this._http.post('/api/players/',
            {
                firstName: value.firstName,
                lastName: value.lastName,
                city: value.city,
                userlogin: 'lxkn95',
                number: value.number,
                redcards: 1,
                yellowcards: 0

            })
            .subscribe((data: any) => {
                console.log("SUCCESS");
            })

    }
}

//players.html
<div class="col-md-6 offset-md-3">
    <form #form="ngForm" (ngSubmit)="addPlayer(form.value)">
      <label>firstName</label>
      <input class="form-control" type="text" name="firstName" ngModel />
      <label>lastName</label>
      <input class="form-control" type="text" name="lastName" ngModel />
      <label>city</label>
      <input class="form-control" type="text" name="city" ngModel />
      <label>number</label>
      <input class="form-control" type="number" name="number" ngModel />
      <label>ycards</label>
      <input class="form-control" type="number" name="yellowCards" ngModel />
      <label>rcards</label>
      <input class="form-control" type="number" name="redCards" ngModel />
      <input class="btn btn-success form-control" type="submit" value="Submit" />
    </form>
  </div>
  <div class="col-md-6 offset-md-3">
    <table class="table-hover">
      <tr>
        <th>FirstName</th>
        <th>LastName</th>
        <th>Number</th>
        <th>City</th>
      </tr>
      <tr *ngFor="let item of data">
        <td>
          {{item.firstName}}
        </td>
        <td>
          {{item.lastName}}
        </td>
        <td>
          {{item.number}}
        </td>
        <td>
          {{item.city}}
        </td>
      </tr>
    </table>
  </div>
  <div class="row">
    <div class="col-md-6 md-offset-3">
      <form #form="ngForm" (ngSubmit)="login(form.value)">
        <div class="form-group">
          <label>Login</label>
          <input type="text" class="form-control" id="username" name="username" ngModel />
        </div>
        <div class="form-group">
          <label>Password</label>
          <input type="text" class="form-control" id="password" name="password" ngModel />
        </div>
        <div class="form-group">
          <input type="submit" class="btn btn-success form-control" value="Zaloguj" />
        </div>
      </form>
    </div>
</div>



//login.ts
import { Component } from '@angular/core';
import { ApiService } from './ApiService';
//import { Md5 } from './md5';
import { Router } from '@angular/router';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    providers: [ApiService]
})
export class LoginComponent {
    constructor(private service: ApiService, private router: Router) { }

    users: any[] = [];

    ngOnInit() {
        this.service.getUsers().subscribe((res: any[]) => {
            console.log("LOGIN");
            this.users = res;
        })
    }

    login(value: any) {
        //for (var i = 0; i < this.users.length; i++) {
        //    //if (this.users[i].username == value.username && this.users[i].password == Md5(value.password)) {

        //    //}
        //    //this.router.navigate(['/players']);
        //}

    }
}

//login html
<!--<div class="col-md-6 md-offset-3">
    <form #form="ngForm" (ngSubmit)="login(form.value)">
      <div class="form-group">
        <label>Login</label>
        <input type="text" class="form-control" id="username" name="username" ngModel/>
      </div>
      <div class="form-group">
        <label>Password</label>
        <input type="text" class="form-control" id="password" name="password" ngModel/>
      </div>
      <div class="form-group">
        <input type="submit" class="btn btn-success form-control" value="Zaloguj" />
      </div>
    </form>
</div>-->
<div>
  <h2>ASD</h2>
</div>