src/app/bosses/composition-detail/composition-detail.component.ts
Composition detail component
| selector | app-composition-detail |
| styleUrls | composition-detail.component.css |
| templateUrl | ./composition-detail.component.html |
Properties |
|
Methods |
Inputs |
constructor()
|
|
Create a composition detail component |
boss
|
Input boss data
Type: |
| getClasses | ||||||||
getClasses(char: Character)
|
||||||||
|
Get the css class for given character
Parameters :
Returns :
any
|
| ngOnChanges |
ngOnChanges()
|
|
Todo on input change
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Todo on init
Returns :
void
|
| onSelect | ||||||||
onSelect(char: Character)
|
||||||||
|
On select character event
Parameters :
Returns :
void
|
| Private selectedChar |
selectedChar:
|
Type : Character
|
Default value : null
|
|
Selectect character |
import { Component, OnInit, Input, OnChanges } from '@angular/core';
import { Character } from '../../helpers/character';
import { Boss } from '../../helpers/boss';
/**
* Composition detail component
*/
@Component({
selector: 'app-composition-detail',
templateUrl: './composition-detail.component.html',
styleUrls: ['./composition-detail.component.css']
})
export class CompositionDetailComponent implements OnInit, OnChanges {
/**
* Selectect character
*/
private selectedChar: Character = null;
/**
* Input boss data
*/
@Input() boss: Boss;
/**
* Create a composition detail component
*/
constructor() {
}
/**
* Todo on init
*/
ngOnInit() {
}
/**
* Get the css class for given character
* @param char Character to get the css class for
*/
getClasses(char: Character): any {
const res: any = {};
res.selectable = true;
res[char.getProfessionName()] = true;
return res;
}
/**
* Todo on input change
*/
ngOnChanges() {
this.selectedChar = null;
for (const key in localStorage) {
if (localStorage.hasOwnProperty(key)) {
if (key.includes('GW2A') && key.includes('DATA')) {
localStorage.removeItem(key);
}
}
}
}
/**
* On select character event
* @param char Selected character
*/
onSelect(char: Character): void {
this.selectedChar = char;
}
}
<div *ngIf="boss">
<ul class="my-composition">
<div class='uk-margin-large-left uk-margin-large-right'>
<div class='uk-flex uk-flex-row uk-flex-between uk-margin-right'>
<div class='uk-flex uk-flex-row uk-margin-large-top'>
<table *ngIf="boss.composition.t1.length > 0" class=''>
<thead>
<tr>
<th>
<span class="uk-text-large uk-text-bold">Groupe 1</span>
</th>
</tr>
</thead>
<tbody class="uk-flex uk-flex-column">
<tr *ngFor="let character of boss.composition.t1" (click)="onSelect(character)" [ngClass]="getClasses(character)" [class.selected]="character === selectedChar">
<td>
<img [src]='character.getIcon(boss.shortName)'>
<span class='uk-text-middle uk-text-large uk-text-bold'>{{character.name}}</span>
</td>
</tr>
</tbody>
</table>
<table *ngIf="boss.composition.t2.length > 0" class=''>
<thead>
<tr>
<th>
<span class="uk-text-large uk-text-bold">Groupe 2</span>
</th>
</tr>
</thead>
<tbody class="uk-flex uk-flex-column">
<tr *ngFor="let character of boss.composition.t2" (click)="onSelect(character)" [ngClass]="getClasses(character)" [class.selected]="character === selectedChar">
<td>
<img [src]='character.getIcon(boss.shortName)'>
<span class='uk-text-middle uk-text-large uk-text-bold'>{{character.name}}</span>
</td>
</tr>
</tbody>
</table>
<table *ngIf="boss.composition.t3.length > 0" class=''>
<thead>
<tr>
<th>
<span class="uk-text-large uk-text-bold">Groupe 3</span>
</th>
</tr>
</thead>
<tbody class="uk-flex uk-flex-column">
<tr *ngFor="let character of boss.composition.t3" (click)="onSelect(character)" [ngClass]="getClasses(character)" [class.selected]="character === selectedChar">
<td>
<img [src]='character.getIcon(boss.shortName)'>
<span class='uk-text-middle uk-text-large uk-text-bold'>{{character.name}}</span>
</td>
</tr>
</tbody>
</table>
</div>
<app-spec-detail [character]="selectedChar" class="uk-margin-top my-build-display"></app-spec-detail>
</div>
</div>
</ul>
</div>