restructure

app/templates/node.html

@@ -6,7 +6,6 @@
           '--highlighted': node.highlighted,
           '--winner': node.last && node.team
         }"
-        tooltip="Hello"
         [overlay]="node"
         (click)="node.win()">
   {{ node.team ? node.team.name : '-' }}</button>

app/templates/team-form.html

@@ -1,6 +1,7 @@
 <form (submit)="addTeam()"
       class="team-form">
   <input type="text"
+         placeholder="Add a team here"
          [(ngModel)]="model"
          class="team-form_input">
   <button class="team-form_submit"

app/templates/team-management.html

@@ -4,7 +4,8 @@
   <team-form></team-form>
 
   <div class="button-bar">
-    <span class="message">
+    <span class="message"
+          tooltip="You must register 2, 4, 8, 16 or 32 teams">
         <i class="message_status material-icons"
            [class.--success]="isFilled()"
            [class.--error]="!isFilled()">{{ isFilled() ? 'check' : 'close' }}</i>

app/ts/Components/NodeComponent.ts

@@ -2,12 +2,11 @@ import {Component} from "angular2/core";
 import {Input} from "angular2/core";
 import {NodeModel} from "../Models/NodeModel";
 import {OverlayDirective} from "../Directives/OverlayDirective";
-import {TooltipDirective} from "../Directives/TooltipDirective";
 
 @Component({
   selector: 'node',
   templateUrl: 'app/templates/node.html',
-  directives: [NodeComponent, OverlayDirective, TooltipDirective]
+  directives: [NodeComponent, OverlayDirective]
 })
 
 export class NodeComponent {

app/ts/Services/FlashService.ts

@@ -4,7 +4,7 @@ export class FlashService {
 
   private static _list: FlashMessageModel[] = [];
 
-  public static push(message: string, type: string = null): this {
+  public static push(message: string, type: string = null): FlashService {
     this._list.push(new FlashMessageModel(message, type));
 
     setTimeout(() => {

app/ts/Services/TeamHolderService.ts

@@ -16,20 +16,10 @@ export class TeamHolderService {
     new TeamModel('Monkeys'),
   ];
 
-  private static _tree: NodeModel;
-
   static get teams():TeamModel[] {
     return this._teamList;
   }
 
-  static get tree():NodeModel {
-    if (!this.hasTree()) {
-      this._tree = TreeManager.buildTree(this._teamList);
-    }
-
-    return this._tree;
-  }
-
   static addTeam(name: string): TeamHolderService {
     if (!this.hasConfirmed()) {
       return;
@@ -57,6 +47,12 @@ export class TeamHolderService {
     return TeamHolderService;
   }
 
+  static clear():void {
+    TreeManager.clear();
+    // @TODO Clear tree
+    this._teamList.length = 0;
+  }
+
   static win(node: NodeModel): boolean {
     let wonPlace: NodeModel|boolean = TreeManager.findParentOf(node);
 
@@ -90,25 +86,17 @@ export class TeamHolderService {
     return l && (l & (l - 1)) === 0;
   }
 
-  private static hasTree(): boolean {
-    return this._tree instanceof NodeModel;
-  }
-
   private static hasConfirmed(): boolean {
-    if (!this.hasTree()) {
+    if (!TreeManager.hasTree()) {
       return true;
     }
 
     if (!confirm('Cette action aura pour effet de supprimer l\'arbre existant')) {
       return false;
     }
-    this._tree = null;
-    return true;
-  }
 
-  static clear():void {
     TreeManager.clear();
-    this._tree = null;
-    this._teamList.length = 0;
+
+    return true;
   }
 }

app/ts/Services/TreeManager.ts

@@ -1,41 +1,22 @@
 import {NodeModel} from "../Models/NodeModel";
 import {TeamModel} from "../Models/TeamModel";
+import {TeamHolderService} from "./TeamHolderService";
 
 export class TreeManager {
 
   private static _nodes: NodeModel[] = [];
+  private static _tree: NodeModel;
 
-  static buildTree(teamList: TeamModel[]): NodeModel {
-
-    let countOf = {
-      teams: teamList.length,
-      nodes: (teamList.length * 2) - 1,
-    };
-
-    let nodes: NodeModel[] = [];
-
-    for (let i:number = 0; i < countOf.nodes; i++) {
-      let node = new NodeModel();
-      nodes.push(node);
-
-      if (nodes.length > 1) {
-        let positionOfParent: number = Math.floor(nodes.length/2) - 1;
-        let parent: NodeModel = nodes[positionOfParent];
-        parent.addChild(node);
-      }
-
-      if (countOf.nodes - i <= countOf.teams) {
-        node.setTeam(teamList[i+1 - countOf.teams]);
-      }
+  static get tree():NodeModel {
+    if (!this.hasTree()) {
+      this.buildTree();
     }
 
-    nodes[0].last = true;
-
-    this._nodes = this._nodes.concat(nodes);
-
-    console.log(nodes);
+    return this._tree;
+  }
 
-    return nodes[0];
+  static hasTree(): boolean {
+    return (this._tree instanceof NodeModel);
   }
 
   static findParentOf(nodeToFind: NodeModel): NodeModel|boolean {
@@ -66,7 +47,40 @@ export class TreeManager {
     }
   }
 
-  static clear():void {
+  static clear(): void {
     this._nodes.length = 0;
+    this._tree = null;
+  }
+
+  private static buildTree(): void {
+
+    let teams: TeamModel[] = TeamHolderService.teams;
+
+    let countOf = {
+      teams: teams.length,
+      nodes: (teams.length * 2) - 1,
+    };
+
+    let nodes: NodeModel[] = [];
+
+    for (let i:number = 0; i < countOf.nodes; i++) {
+      let node = new NodeModel();
+      nodes.push(node);
+
+      if (nodes.length > 1) {
+        let positionOfParent: number = Math.floor(nodes.length/2) - 1;
+        let parent: NodeModel = nodes[positionOfParent];
+        parent.addChild(node);
+      }
+
+      if (countOf.nodes - i <= countOf.teams) {
+        node.setTeam(teams[i+1 - countOf.teams]);
+      }
+    }
+
+    nodes[0].last = true;
+
+    this._nodes = this._nodes.concat(nodes);
+    this._tree = nodes[0];
   }
 }

app/ts/Views/TeamManagementView.ts

@@ -4,11 +4,12 @@ import {TeamFormComponent} from "../Components/TeamFormComponent";
 import {TeamModel} from "../Models/TeamModel";
 import {TeamHolderService} from "../Services/TeamHolderService";
 import {TeamComponent} from "../Components/TeamComponent";
+import {TooltipDirective} from "../Directives/TooltipDirective";
 
 @Component({
   selector: 'team-management-view',
   templateUrl: 'app/templates/team-management.html',
-  directives: [RouterLink, TeamFormComponent, TeamComponent]
+  directives: [RouterLink, TeamFormComponent, TeamComponent, TooltipDirective]
 })
 
 export class TeamManagementView {

app/ts/Views/TreeView.ts

@@ -4,6 +4,7 @@ import {TeamModel} from "../Models/TeamModel";
 import {FlashService} from "../Services/FlashService";
 import {TeamHolderService} from "../Services/TeamHolderService";
 import {NodeComponent} from "../Components/NodeComponent";
+import {TreeManager} from "../Services/TreeManager";
 
 @Component({
   selector: 'tree-view',
@@ -20,12 +21,14 @@ export class TreeView {
 
   ngOnInit() {
     if (!TeamHolderService.isFilled()) {
-      FlashService.push('Vous devez renseigner 2, 4, 8, 16 ou 32 équipes');
+      FlashService.push('You must register 2, 4, 8, 16 or 32 teams');
       this._router.navigate(['TeamManagement']);
 
       return;
     }
 
-    this.tree = TeamHolderService.tree;
+    this.tree = TreeManager.tree;
+
+    console.log(TreeManager.tree);
   }
 }