import { Component, enableProdMode, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

import { VehicleService } from './vehicle.service';
import { User } from './user';

enableProdMode();

@Component({
  selector: 'vehicle-json',
  templateUrl: './vehicle.html',
  providers: [VehicleService]
})
export class VehicleComponent implements OnInit {
  public vehicles: GeneralVehicle[];
  public user: FormGroup;

  ngOnInit() {
    this.user = new FormGroup({
      username: new FormControl('', Validators.required),
      password: new FormControl('', Validators.required)
    });
  }

  constructor(private vehicleService: VehicleService) {
    this.vehicleService.getVehicle().subscribe(vehicle => {
      this.vehicles = vehicle;
    });
  }

  onSubmit({ username, password }: { username: User, password: User }) {
    console.log("test");
  }
}

interface GeneralVehicle {
  status: number;
  dallases: Vehicle[];
}

interface Vehicle {
  vehicle_id: number;
  dallassettings: string;
  dallasupdated: string;
  dallas_list: DallasList[];
}

interface DallasList {
  number: number;
  auth: number;
}

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

import { User } from './user';
import 'rxjs/add/operator/map';

@Injectable()
export class VehicleService {
    //used predefined username and password to check if my connection to the website is fine
    private defusername = 'defaultUSERNAME'
    private defpassword = 'defaultPASSWORD'
    private url = 'mywebsite.com/' + this.defusername + '/' + this.defpassword;

    constructor(private http: Http) { }
    getVehicle() {
        return this.http.get(this.url)
            .map(res => res.json());
    }
}

<form novalidate (ngSubmit)="onSubmit(user)" [formGroup]="user">
    <label>Username:
        <input formControlName="username" type="text" placeholder="Your username">
    </label>
    <label>Password:
        <input formControlName="password" type="password" placeholder="Your password">
    </label>
    <button type="submit">Login</button>
</form>

<div *ngIf="vehicles">
    <b>Status: {{vehicles?.status}}</b>
    <div *ngFor="let vehicle of vehicles.dallases">
        <ul>
            <li>Vehicle ID: {{vehicle.vehicle_id}}</li>
            <li>Dallas settings: {{vehicle.dallassettings}}</li>
            <li>Dallas updated: {{vehicle.dallasupdated}}</li>
            <li>Dallas list:</li>
            <div *ngFor="let d of vehicle.dallas_list">
                <ul>
                    <li>Number: {{d.number}}</li>
                    <li>Auth: {{d.auth}}</li>
                </ul>
            </div>
        </ul>
    </div>
</div>