opt-cc/static/src/app/statistic/war/war-list/war-list.component.html

80 lines
3.0 KiB
HTML

<div *ngIf="!isSmallLayout">
<div class="war-list-header" *ngIf="!collapsed && loginService.hasPermission(3)">
<button mat-stroked-button (click)="selectNewCampaign()">
{{'stats.sidebar.campaign.add' | translate}}
</button>
<button mat-stroked-button (click)="selectNewWar()">
{{'stats.sidebar.battle.add' | translate}}
</button>
</div>
<div class="list-header"
[ngClass]="{selected : selectedWarId == campaign._id}" (click)="selectOverview(campaign._id)">
<div class="select-indicator-container">
<div class="select-indicator"></div>
</div>
<mat-icon [matTooltip]="collapsed ? toolTipTranslation['stats.sidebar.overview'] : ''"
matTooltipPosition="right"
svgIcon="stats-chart"></mat-icon>
<span *ngIf="!collapsed">{{'stats.sidebar.overview' | translate}}</span>
</div>
<div class="list-header"
[ngClass]="{selected : selectedWarId == campaign._id + highscore}" (click)="selectHighscore(campaign._id)">
<div class="select-indicator-container">
<div class="select-indicator"></div>
</div>
<mat-icon [matTooltip]="collapsed ? toolTipTranslation['stats.sidebar.highscore'] : ''"
matTooltipPosition="right"
svgIcon="highscore"></mat-icon>
<span *ngIf="!collapsed">{{'stats.sidebar.highscore' | translate}}</span>
</div>
<div class="list-header-battles">
<mat-icon [matTooltip]="collapsed ? toolTipTranslation['stats.sidebar.battles'] : ''"
matTooltipPosition="right"
svgIcon="battle"></mat-icon>
<span *ngIf="!collapsed">{{'stats.sidebar.battles' | translate}}</span>
</div>
<div class="battle-list">
<div *ngFor="let war of campaign.wars$ | async">
<cc-war-item
[war]="war"
(warEdit)="editWar($event)"
(warDelete)="deleteWar(war)"
(warSelected)="selectWar($event)"
[collapsed]="collapsed"
[selected]="war._id == selectedWarId">
</cc-war-item>
</div>
<div class="fill-vertical-border"
[ngClass]="{collapsed: collapsed}">
</div>
</div>
</div>
<div class="war-select-small" *ngIf="isSmallLayout">
<mat-list-item [matMenuTriggerFor]="menuWars">
<div matline class="select-menu-text">
<span *ngIf="selectedWarId === (campaign._id + highscore)">{{'stats.sidebar.highscore' | translate}}</span>
<span *ngIf="selectedWarId === campaign._id">{{'stats.sidebar.overview' | translate}}</span>
<span *ngIf="selectedWar">{{selectedWar.title}}</span>
<span class="caret"></span>
</div>
</mat-list-item>
<mat-menu #menuWars="matMenu">
<button mat-menu-item (click)="selectOverview(campaign._id)">
{{'stats.sidebar.overview' | translate}}
</button>
<button mat-menu-item (click)="selectHighscore(campaign._id)">
{{'stats.sidebar.highscore' | translate}}
</button>
<mat-divider></mat-divider>
<button mat-menu-item *ngFor="let war of campaign.wars$ | async"
(click)="selectWar(war._id)">
{{war.title}}
</button>
</mat-menu>
</div>