add clear button

app/templates/team-management.html

@@ -1,8 +1,5 @@
 <div class="container">
-  <div *ngFor="#team of teams" class="team">
-    <span class="team_name">{{ team.name }}</span>
-    <button class="team_remove" (click)="remove(team)">X</button>
-  </div>
+  <team [team]="team" *ngFor="#team of teams"></team>
 
   <team-form></team-form>
 
@@ -13,7 +10,10 @@
            [class.--error]="!isFilled()">{{ isFilled() ? 'check' : 'close' }}</i>
       Currently {{ teams.length }} teams
     </span>
-    <a class="button" [routerLink]="['TreeComponent']">Generate</a>
+    <span>
+      <a class="button" [routerLink]="['TreeComponent']">Generate</a>
+      <a class="button" (click)="clear()">Clear</a>
+    </span>
   </div>
 </div>
 

app/templates/team.html

@@ -0,0 +1,4 @@
+<div class="team">
+  <span class="team_name">{{ team.name }}</span>
+  <button class="team_remove" (click)="remove(team)">X</button>
+</div>

app/ts/Components/TeamComponent.ts

@@ -0,0 +1,16 @@
+import {Component} from "angular2/core";
+import {Input} from "angular2/core";
+import {TeamModel} from "../Models/TeamModel";
+import {TeamHolderService} from "../Services/TeamHolderService";
+
+@Component({
+  selector: 'team',
+  templateUrl: 'app/templates/team.html'
+})
+export class TeamComponent {
+  @Input() team: TeamModel;
+
+  static remove(team: TeamModel) {
+    TeamHolderService.removeTeam(team);
+  }
+}

app/ts/Directives/TooltipDirective.ts

@@ -14,7 +14,7 @@ export class TooltipDirective {
 
   @Input('tooltip') text: string;
 
-  private _tooltip: HTMLElement;
+  private _tooltip: any; // Fuck firstChild returns Node in doc and HTMLElement in real
 
   constructor(
     private _element: ElementRef
@@ -38,7 +38,7 @@ export class TooltipDirective {
     this._element.nativeElement.removeChild(this._tooltip);
   }
 
-  private getTooltipDom(): HTMLElement {
+  private getTooltipDom(): any {
     let string: string = '<div class="tooltip">' + this.text + '</div>';
     let div: HTMLElement = document.createElement('div');
 

app/ts/Services/TeamHolderService.ts

@@ -105,4 +105,10 @@ export class TeamHolderService {
     this._tree = null;
     return true;
   }
+
+  static clear():void {
+    TreeManager.clear();
+    this._tree = null;
+    this._teamList.length = 0;
+  }
 }

app/ts/Services/TreeManager.ts

@@ -63,4 +63,8 @@ export class TreeManager {
       callback(node);
     }
   }
+
+  static clear():void {
+    this._nodes.length = 0;
+  }
 }

app/ts/Views/TeamManagementView.ts

@@ -3,11 +3,12 @@ import {RouterLink} from "angular2/router";
 import {TeamFormComponent} from "../Components/TeamFormComponent";
 import {TeamModel} from "../Models/TeamModel";
 import {TeamHolderService} from "../Services/TeamHolderService";
+import {TeamComponent} from "../Components/TeamComponent";
 
 @Component({
   selector: 'team-management-view',
   templateUrl: 'app/templates/team-management.html',
-  directives: [RouterLink, TeamFormComponent]
+  directives: [RouterLink, TeamFormComponent, TeamComponent]
 })
 
 export class TeamManagementView {
@@ -18,10 +19,10 @@ export class TeamManagementView {
   }
 
   isFilled() {
-    return TeamHolderService.isFilled()
+    TeamHolderService.isFilled()
   }
 
-  remove(team: TeamModel) {
-    TeamHolderService.removeTeam(team);
+  clear() {
+    TeamHolderService.clear()
   }
 }