import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { VehicleComponent } from './vehicle.component';

@NgModule({
  imports: [BrowserModule, FormsModule, HttpModule, ReactiveFormsModule],
  declarations: [VehicleComponent],
  bootstrap: [VehicleComponent]
})
export class AppModule { }

export interface User {
    username: string;
    password: string;
}

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Md5 } from 'ts-md5/dist/md5';

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

@Injectable()
export class VehicleService {
    private defUrl = 'foo-bar.url';

    constructor(private http: Http) { }
    getVehicle(username?: string, password?: string) {
        const url = (!username || !password) ? this.defUrl : 'foo-bar.url' + username + '/' + Md5.hashStr(password);
        return this.http.get(url)
            .map(res => res.json());
    }
}

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(user) {
    this.vehicleService
      .getVehicle(user.value.username, user.value.password)
      .subscribe(vehicles => {
        this.vehicles = vehicles;
        this.user.reset();
      });
  }
}

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

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

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

<form class="form-inline" novalidate (ngSubmit)="onSubmit(user)" [formGroup]="user" id="log1">
    <div class="form-group">
        <label>Username:</label>
        <input class="form-control" formControlName="username" type="text" placeholder="Your username">
    </div>
    <div class="form-group">
        <label>Password:</label>
        <input class="form-control" formControlName="password" type="password" placeholder="Your password">
    </div>
    <button class="btn btn-default" type="submit">Login</button>
</form>
<div *ngIf="vehicles">
    <b>Status: {{vehicles?.status}} Account: {{user.value.username}}</b>
    <div class="list-group" *ngFor="let vehicle of vehicles.dallases" id="d1">
        <a class="list-group-item">
            <h4 class="list-group-item-heading" id="l1">Vehicle ID: {{vehicle.vehicle_id}}</h4>
        </a>
        <a class="list-group-item">
            <h4 class="list-group-item-heading">Dallas settings: {{vehicle.dallassettings}}</h4>
        </a>
        <a class="list-group-item">
            <h4 class="list-group-item-heading">Dallas updated: {{vehicle.dallasupdated}}</h4>
        </a>
        <a class="list-group-item">
            <h4 class="list-group-item-heading">Dallas list:</h4>
            <p class="list-group-item-text" *ngFor="let d of vehicle.dallas_list">
                <b>Number:</b> {{d.number}}<br>
                <b>Auth:</b> {{d.auth}}</p>
        </a>
    </div>