Mobile Time Tracker Sep 2016

Angular 2 is out for a few days now (Angular 2). With Angular 2 TypeScript is coming, a compiler with static typing ("Javascript which scales!”). As a java developer, mostly working in the back end, I kind of like compilers and therefore decided to give it a try.

So I did a small time tracker front end, which I can use on my mobile for tracking my time spent in projects.

As already said I like types:

export class AppModel {

  loadedDate: Date;
  times: Array<Time>
  categories: Array<string>

  getTotalHours(): number {
    var result = 0.0;
    if (this.times != null) for (let time of this.times) {
      const diff = ...
      result = result + diff;
    }
    return result / 60.0;
  }
}

export class Time {
  id: number;
  from: string;
  to: string;
}

The concept of modularity looks very promising and might scale well for bigger projects. HTML and javascript, which belong to each other make up a component:

import {Component} from '@angular/core';
import {Router} from '@angular/router';
import {AppModel} from './model';

@Component({
  selector: 'categories',
  template: `
     <label>categories:</label>
     <table>
        <tr *ngFor="let cat of model.categories">
          <td><input type="checkbox" [checked]="isChecked(cat)" (change)="change(cat)" /></td>
          <td>{{cat}}</td>
        </tr>
    </table>
    <div>
        <button (click)="set()" class="actionBtn">set</button>
    <button (click)="cancel()" class="actionBtn">cancel</button>
    </div>
  `
})
export class CategoriesComponent {

  private selectedCats: Array<string>

  constructor(private model: AppModel, private router: Router) {
    this.selectedCats = model.getTimeRow().cats.slice();
  }

  isChecked(cat: string): boolean {
    return this.selectedCats.indexOf(cat) != -1;
  }

  change(cat: string): void {
    this.selectedCats.push(cat);
  }

  set(): void {
    this.model.getTimeRow().cats = this.selectedCats;
    this.router.navigateByUrl("day");
  }

  cancel(): void {
    this.router.navigateByUrl("day");
  }
}

In the html template syntax you can see

For modularity dependencies have to be defined: The CategoriesComponent does import the AppModel class

import {AppModel} from './model';
and the AppModel is also injected into the constructor:
constructor(private model: AppModel, private router: Router) { ... 

Setup

The project setup has been surprisingly simple after I started to use the angular cli. The cli can

Final thoughts

With the angular 2 support in IntelliJ nice code completion as well as navigating is possible. The typescript compiler does catch some errors early while developing. Although IDE and compiler support are not as good as a java developer might be used to, from my perspective the javascript universe is clearly moving in the right direction.

Souces available on GitHub: https://github.com/micgn/ttng2