Building Teslas battery range calculator with Angular 2 reactive forms

/*
 * app.module.ts
 */
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

// our feature module
import { TeslaBatteryModule } from './tesla-battery/tesla-battery.module';

// our app component
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    // include our TeslaBatteryModule
    TeslaBatteryModule
  ],
  providers: [],
  // bootstrap the AppComponent
  bootstrap: [AppComponent]
})
export class AppModule {}

/*
 * tesla-battery.module.ts
 */
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';

// services
import { BatteryService } from './tesla-battery.service';

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    ReactiveFormsModule
  ],
  providers: [
    // add the service to our sub-module
    BatteryService
  ],
  exports: []
})
export class TeslaBatteryModule {}

/*
 * tesla-battery.service.ts
 */
import { Injectable } from '@angular/core';

@Injectable()
export class BatteryService {
  constructor() {}
  getModelData(): Object {
    return {...};
  }
}

/*
 * tesla-battery.component.ts
 */
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'tesla-battery',
  template: `
    <form class="tesla-battery" [formGroup]="tesla">
      <h1>{{ title }}</h1>
      <div class="tesla-battery__notice">
        <p>
          The actual amount of range that you experience will vary based
          on your particular use conditions. See how particular use conditions
          may affect your range in our simulation model.
        </p>
        <p>
          Vehicle range may vary depending on the vehicle configuration,
          battery age and condition, driving style and operating, environmental
          and climate conditions.
        </p>
      </div>
    </form>
  `,
  styleUrls: ['./tesla-battery.component.scss']
})
export class TeslaBatteryComponent implements OnInit {

  title: string = 'Range Per Charge';
  tesla: FormGroup;

  constructor(public fb: FormBuilder) {}

  ngOnInit() {
    this.tesla = this.fb.group({
      config: this.fb.group({
        speed: 55,
        temperature: 20,
        climate: true,
        wheels: 19
      })
    });
  }

}

// containers
import { TeslaBatteryComponent } from './containers/tesla-battery/tesla-battery.component';

@NgModule({
  declarations: [
    // registering our container component
    TeslaBatteryComponent
  ],
  imports: [
    CommonModule,
    ReactiveFormsModule
  ],
  providers: [
    // add the service to our sub-module
    BatteryService
  ],
  exports: [
    // exporting so our root module can access
    TeslaBatteryComponent
  ]
})
export class TeslaBatteryModule {}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
   <header class="header">
      <img [src]="logo">
    </header>
    <div class="wrapper">
      <tesla-battery></tesla-battery>
    </div>
  `,
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  logo: string = 'assets/logo.svg';
}

/*
 * tesla-car.component.ts
 */
import { Component, Input, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'tesla-car',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div class="tesla-car">
      <div class="tesla-wheels">
        <div class="tesla-wheel tesla-wheel--front tesla-wheel--{{ wheelsize }}"></div>
        <div class="tesla-wheel tesla-wheel--rear tesla-wheel--{{ wheelsize }}"></div>
      </div>
    </div>
  `,
  styleUrls: ['./tesla-car.component.scss']
})
export class TeslaCarComponent {
  @Input() wheelsize: number;
  constructor() {}
}

...
/* put this code below the // containers piece */
// components
import { TeslaCarComponent } from './components/tesla-car/tesla-car.component';

...

@NgModule({
  declarations: [
    TeslaBatteryComponent,
    // new addition
    TeslaCarComponent
  ],
  ...
})
...

...
@Component({
  selector: 'tesla-battery',
  template: `
    <form class="tesla-battery" [formGroup]="tesla">
      <h1>{{ title }}</h1>
      <tesla-car [wheelsize]="tesla.get('config.wheels').value"></tesla-car>
      ...
      ...
    </form>
  `
})
...

// src/app/tesla-battery/models/stat.interface.ts
export interface Stat {
  model: string,
  miles: number
}

/*
 * tesla-stats.component.ts
 */
import { Component, Input, ChangeDetectionStrategy } from '@angular/core';

import { Stat } from '../../models/stat.interface';

@Component({
  selector: 'tesla-stats',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div class="tesla-stats">
      <ul>
        <li *ngFor="let stat of stats">
          <div class="tesla-stats-icon tesla-stats-icon--{{ stat.model | lowercase }}"></div>
          <p>{{ stat.miles }}</p>
        </li>
      </ul>
    </div>
  `,
  styleUrls: ['./tesla-stats.component.scss']
})
export class TeslaStatsComponent {
  @Input() stats: Stat[];
}

...
import { TeslaStatsComponent } from './components/tesla-stats/tesla-stats.component';

@NgModule({
  declarations: [
    TeslaBatteryComponent,
    TeslaCarComponent,
    // new addition
    TeslaStatsComponent
  ],
  ...
})
...

import { Stat } from '../../models/stat.interface';
import { BatteryService } from '../../tesla-battery.service';

// tesla-battery.component.ts
@Component({...})
export class TeslaBatteryComponent implements OnInit {

  title: string = 'Range Per Charge';
  models: any;
  stats: Stat[];
  tesla: FormGroup;

  private results: Array = ['60', '60D', '75', '75D', '90D', 'P100D'];

  constructor(public fb: FormBuilder, private batteryService: BatteryService) {}
  ...
  ...
}

// tesla-battery.component.ts
private calculateStats(models, value): Stat[]  {
  return models.map(model => {
    const { speed, temperature, climate, wheels } = value;
    const miles = this.models[model][wheels][climate ? 'on' : 'off'].speed[speed][temperature];
    return {
      model,
      miles
    };
  });
}

// tesla-battery.component.ts
ngOnInit() {

  this.models = this.batteryService.getModelData();

  this.tesla = this.fb.group({
    config: this.fb.group({
      speed: 55,
      temperature: 20,
      climate: true,
      wheels: 19
    })
  });

  this.stats = this.calculateStats(this.results, this.tesla.controls['config'].value);

}

...
@Component({
  selector: 'tesla-battery',
  template: `
    <form class="tesla-battery" [formGroup]="tesla">
      <h1>{{ title }}</h1>
      <tesla-car [wheelsize]="tesla.get('config.wheels').value"></tesla-car>
      <tesla-stats [stats]="stats"></tesla-stats>
      ...
      ...
    </form>
  `
})
...

// importing forwardRef as an extra here
import { Component, Input, ChangeDetectionStrategy, forwardRef } from '@angular/core';
// importing necessary accessors
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

// NUMBER_CONTROL_ACCESSOR constant to allow us to use the "TeslaCounterComponent" as
// a custom provider to the component and enforce the ControlValueAccessor interface
const NUMBER_CONTROL_ACCESSOR = {
  provide: NG_VALUE_ACCESSOR,
  // forwardRef allows us to grab the TypeScript class
  // at a later (safer) point as classes aren't hoisted
  useExisting: forwardRef(() => TeslaCounterComponent),
  multi: true
};

@Component({
  selector: 'tesla-counter',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div class="tesla-counter">
      <p class="tesla-counter__title">{{ title }}</p>
      <div class="tesla-counter__container cf">
        <div
          class="tesla-counter__item"
          (keydown)="onKeyUp($event)"
          (blur)="onBlur($event)"
          (focus)="onFocus($event)"
          tabindex="0">
          <p class="tesla-counter__number">
            {{ value }}
            <span>{{ unit }}</span>
          </p>
          <div class="tesla-counter__controls" tabindex="-1">
            <button tabindex="-1" (click)="increment()" [disabled]="value === max"></button>
            <button tabindex="-1" (click)="decrement()" [disabled]="value === min"></button>
          </div>
        </div>
      </div>
    </div>
  `,
  // set the custom accessor as a provider
  providers: [NUMBER_CONTROL_ACCESSOR],
  styleUrls: ['./tesla-counter.component.scss']
})
export class TeslaCounterComponent implements ControlValueAccessor {
  // step count, default of 1
  @Input() step: number = 1;
  // minimum number allowed before disabling buttons
  @Input() min: number;
  // maximum number allowed before disabling buttons
  @Input() max: number;

  // title to be passed to the control
  @Input() title: string = '';
  // unit to be used alongside the title (mph/degrees/anything)
  @Input() unit: string = '';

  value: number;
  focused: boolean;

  // internal functions to call when ControlValueAccessor
  // gets called
  private onTouch: Function;
  private onModelChange: Function;

  // our custom onChange method
  private onChange(value: number) {
    this.value = value;
    this.onModelChange(value);
  }

  // called by the reactive form control
  registerOnChange(fn: Function) {
    // assigns to our internal model change method
    this.onModelChange = fn;
  }

  // called by the reactive form control
  registerOnTouched(fn: Function) {
    // assigns our own "touched" method
    this.onTouch = fn;
  }

  // writes the value to the local component
  // that binds to the "value"
  writeValue(value: number) {
    this.value = value;
  }

  // increment function
  increment() {
    if (this.value  this.min) {
      this.onChange(this.value - this.step);
    }
    this.onTouch();
  }

  // our onBlur event, has effect on template
  private onBlur(event: FocusEvent) {
    this.focused = false;
    event.preventDefault();
    event.stopPropagation();
  }

  // our onKeyup event, will respond to user
  // ArrowDown and ArrowUp keys and call
  // the relevant functions we need
  private onKeyUp(event: KeyboardEvent) {
    let handlers = {
      ArrowDown: () =&gt; this.decrement(),
      ArrowUp: () =&gt; this.increment()
    };
    // events here stop the browser scrolling up
    // when using the keys, as well as preventing
    // event bubbling
    if (handlers[event.code]) {
      handlers[event.code]();
      event.preventDefault();
      event.stopPropagation();
    }
  }

  // when we focus on our counter control
  private onFocus(event: FocusEvent) {
    this.focused = true;
    event.preventDefault();
    event.stopPropagation();
  }

}

...
import { TeslaCounterComponent } from './components/tesla-counter/tesla-counter.component';

@NgModule({
  declarations: [
    TeslaBatteryComponent,
    TeslaCarComponent,
    TeslaStatsComponent,
    // new addition
    TeslaCounterComponent
  ],
  ...
})
...

...
@Component({
  selector: 'tesla-battery',
  template: `
    <form class="tesla-battery" [formGroup]="tesla">
      <h1>{{ title }}</h1>
      <tesla-car [wheelsize]="tesla.get('config.wheels').value"></tesla-car>
      <tesla-stats [stats]="stats"></tesla-stats>
      <div class="tesla-controls cf" formGroupName="config">
        <tesla-counter
          [title]="'Speed'"
          [unit]="'mph'"
          [step]="5"
          [min]="45"
          [max]="70"
          formControlName="speed">
        </tesla-counter>
        <div class="tesla-climate cf">
          <tesla-counter
            [title]="'Outside Temperature'"
            [unit]="'°'"
            [step]="10"
            [min]="-10"
            [max]="40"
            formControlName="temperature">
          </tesla-counter>
        </div>
      </div>
      ...
      ...
    </form>
  `
})
...

import { Component, Input, ChangeDetectionStrategy, forwardRef } from '@angular/core';
import { FormControl, ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

const CHECKBOX_VALUE_ACCESSOR = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => TeslaClimateComponent),
  multi: true
};

@Component({
  selector: 'tesla-climate',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div class="tesla-climate">
      <label
        class="tesla-climate__item"
        [class.tesla-heat]="!limit"
        [class.tesla-climate__item--active]="value"
        [class.tesla-climate__item--focused]="focused === value">
        <p>{{ (limit ? 'ac' : 'heat') }} {{ value ? 'on' : 'off' }}</p>
        <i class="tesla-climate__icon"></i>
      <input
        type="checkbox"
        name="climate"
        [checked]="value"
        (change)="onChange(value)"
        (blur)="onBlur($event)"
        (focus)="onFocus($event)">
    </label>
  </div>
  `,
  providers: [CHECKBOX_VALUE_ACCESSOR],
  styleUrls: ['./tesla-climate.component.scss']
})
export class TeslaClimateComponent implements ControlValueAccessor {

  @Input() limit: boolean;

  value: boolean;
  focused: boolean;

  private onTouch: Function;
  private onModelChange: Function;

  private onChange(value: boolean) {
    this.value = !value;
    this.onModelChange(this.value);
  }

  registerOnChange(fn: Function) {
    this.onModelChange = fn;
  }

  registerOnTouched(fn: Function) {
    this.onTouch = fn;
  }

  writeValue(value: boolean) {
    this.value = value;
  }

  private onBlur(value: boolean) {
    this.focused = false;
  }

  private onFocus(value: boolean) {
    this.focused = value;
    this.onTouch();
  }

}

...
import { TeslaClimateComponent } from './components/tesla-climate/tesla-climate.component';

@NgModule({
  declarations: [
    TeslaBatteryComponent,
    TeslaCarComponent,
    TeslaStatsComponent,
    TeslaCounterComponent,
    // new addition
    TeslaClimateComponent
  ],
  ...
})
...

...
@Component({
  selector: 'tesla-battery',
  template: `
    <form class="tesla-battery" [formGroup]="tesla">
      <h1>{{ title }}</h1>
      <tesla-car [wheelsize]="tesla.get('config.wheels').value"></tesla-car>
      <tesla-stats [stats]="stats"></tesla-stats>
      <div class="tesla-controls cf" formGroupName="config">
        <tesla-counter
          [title]="'Speed'"
          [unit]="'mph'"
          [step]="5"
          [min]="45"
          [max]="70"
          formControlName="speed">
        </tesla-counter>
        <div class="tesla-climate cf">
          <tesla-counter
            [title]="'Outside Temperature'"
            [unit]="'°'"
            [step]="10"
            [min]="-10"
            [max]="40"
            formControlName="temperature">
          </tesla-counter>
          <tesla-climate
            [limit]="tesla.get('config.temperature').value > 10"
            formControlName="climate">
          </tesla-climate>
        </div>
      </div>
      ...
      ...
    </form>
  `
})
...

import { Component, Input, ChangeDetectionStrategy, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

const RADIO_CONTROL_ACCESSOR = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => TeslaWheelsComponent),
  multi: true
};

@Component({
  selector: 'tesla-wheels',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div class="tesla-wheels">
      <p class="tesla-wheels__title">Wheels</p>
      <div class="tesla-wheels__container cf">
        <label
          *ngFor="let size of sizes;"
          class="tesla-wheels__item tesla-wheels__item--{{ size }}"
          [class.tesla-wheels__item--active]="value === size"
          [class.tesla-wheels__item--focused]="focused === size">
          <input
            type="radio"
            name="wheelsize"
            [attr.value]="size"
            (blur)="onBlur(size)"
            (change)="onChange(size)"
            (focus)="onFocus(size)"
            [checked]="value === size">
          <p>
            {{ size }}
          </p>
        </label>
      </div>
    </div>
  `,
  providers: [RADIO_CONTROL_ACCESSOR],
  styleUrls: ['./tesla-wheels.component.scss']
})
export class TeslaWheelsComponent implements ControlValueAccessor {
  constructor() {}
  private onModelChange: Function;
  private onTouch: Function;
  private value: string;
  private focused: string;
  private sizes: number[] = [19, 21];

  registerOnChange(fn: Function) {
    this.onModelChange = fn;
  }

  registerOnTouched(fn: Function) {
    this.onTouch = fn;
  }

  writeValue(value: string) {
    this.value = value;
  }

  private onChange(value: string) {
    this.value = value;
    this.onModelChange(value);
  }

  private onBlur(value: string) {
    this.focused = '';
  }

  private onFocus(value: string) {
    this.focused = value;
    this.onTouch();
  }
}

...
import { TeslaWheelsComponent } from './components/tesla-wheels/tesla-wheels.component';

@NgModule({
  declarations: [
    TeslaBatteryComponent,
    TeslaCarComponent,
    TeslaStatsComponent,
    TeslaCounterComponent,
    TeslaClimateComponent,
    // new addition
    TeslaWheelsComponent
  ],
  ...
})
...

...
@Component({
  selector: 'tesla-battery',
  template: `
    <form class="tesla-battery" [formGroup]="tesla">
      <h1>{{ title }}</h1>
      <tesla-car [wheelsize]="tesla.get('config.wheels').value"></tesla-car>
      <tesla-stats [stats]="stats"></tesla-stats>
      <div class="tesla-controls cf" formGroupName="config">
        <tesla-counter
          [title]="'Speed'"
          [unit]="'mph'"
          [step]="5"
          [min]="45"
          [max]="70"
          formControlName="speed">
        </tesla-counter>
        <div class="tesla-climate cf">
          <tesla-counter
            [title]="'Outside Temperature'"
            [unit]="'°'"
            [step]="10"
            [min]="-10"
            [max]="40"
            formControlName="temperature">
          </tesla-counter>
          <tesla-climate
            [limit]="tesla.get('config.temperature').value > 10"
            formControlName="climate">
          </tesla-climate>
        </div>
        <tesla-wheels formControlName="wheels"></tesla-wheels>
      </div>
      ...
      ...
    </form>
  `
})
...

this.tesla.controls['config'].valueChanges.subscribe(data => {
  this.stats = this.calculateStats(this.results, data);
});

ngOnInit() {
  this.models = this.batteryService.getModelData();
  this.tesla = this.fb.group({
    config: this.fb.group({
      speed: 55,
      temperature: 20,
      climate: true,
      wheels: 19
    })
  });
  this.stats = this.calculateStats(this.results, this.tesla.controls['config'].value);
  this.tesla.controls['config'].valueChanges.subscribe(data => {
    this.stats = this.calculateStats(this.results, data);
  });
}