hardi
/
opt-cc
1
0
Fork 0
Code Pull Requests Releases 47 Activity

Basic introduction mat-table for army meber view; Improved scoreboard mobile display

pull/59/head
HardiReady 2019-03-03 00:42:37 +01:00
parent 8ce3f10ee8
commit 4cf2e62755
8 changed files with 187 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
static/src/app/app.module.ts
View File

@ -22,7 +22,7 @@ import {HttpClientModule} from '@angular/common/http';
import {SpinnerService} from './services/user-interface/spinner/spinner.service'; import {SpinnerService} from './services/user-interface/spinner/spinner.service';
import {SettingsService} from './services/settings.service'; import {SettingsService} from './services/settings.service';
import {HttpGateway} from './services/http-gateway'; import {HttpGateway} from './services/http-gateway';
import {MatListModule, MatMenuModule, MatSidenavModule, MatToolbarModule} from '@angular/material'; import {MatListModule, MatMenuModule, MatSidenavModule, MatTableModule, MatToolbarModule} from '@angular/material';
import {FlexLayoutModule} from '@angular/flex-layout'; import {FlexLayoutModule} from '@angular/flex-layout';
@NgModule({ @NgModule({
@ -38,6 +38,7 @@ import {FlexLayoutModule} from '@angular/flex-layout';
MatToolbarModule, MatToolbarModule,
MatListModule, MatListModule,
MatMenuModule, MatMenuModule,
MatTableModule,
FlexLayoutModule, FlexLayoutModule,
], ],

63
static/src/app/army/army-member/army-member.component.html
View File

@ -25,40 +25,35 @@
</span> </span>
</div> </div>
<div class="pull-left" style="margin-top:20px;"> <div class="pull-left" class="table-container">
<div class="table-container" style="min-width: 500px"> <mat-table [dataSource]="awards" class="mat-elevation-z8">
<table class="table"> <ng-container matColumnDef="award-graphics">
<thead> <mat-header-cell *matHeaderCellDef></mat-header-cell>
<tr class="table-head"> <mat-cell *matCellDef="let element">
<th class="col-sm-1" style="border-radius: 10px 0 0 0;"></th> <img src="resource/decoration/{{element.decorationId._id}}.png">
<th class="col-sm-2">{{'public.army.member.awards.title' | translate}}</th> </mat-cell>
<th class="col-sm-2">{{'public.army.member.awards.reason' | translate}}</th> </ng-container>
<th class="col-sm-1 text-right" style="border-radius: 0 10px 0 0;">
{{'public.army.member.awards.date' | translate}} <ng-container matColumnDef="title">
</th> <mat-header-cell *matHeaderCellDef>{{'public.army.member.awards.title' | translate}}</mat-header-cell>
</tr> <mat-cell *matCellDef="let element">{{element.decorationId.name}}</mat-cell>
</thead> </ng-container>
<tbody *ngFor="let award of awards">
<tr *ngIf="award.confirmed === 1" class="cell-outline"> <ng-container matColumnDef="reason">
<td class="text-center" *ngIf="award.decorationId.isMedal"> <mat-header-cell *matHeaderCellDef>{{'public.army.member.awards.reason' | translate}}</mat-header-cell>
<img height="90px" src="resource/decoration/{{award.decorationId._id}}.png"> <mat-cell *matCellDef="let element">{{element.reason}}</mat-cell>
</td> </ng-container>
<td class="text-center" *ngIf="!award.decorationId.isMedal">
<img width="100px" src="resource/decoration/{{award.decorationId._id}}.png"> <ng-container matColumnDef="date">
</td> <mat-header-cell *matHeaderCellDef>{{'public.army.member.awards.date' | translate}}</mat-header-cell>
<td style="font-weight: bold"> <mat-cell *matCellDef="let element">
{{award.decorationId.name}} <span class="small text-nowrap">{{element.date | date: 'dd.MM.yyyy'}}</span>
</td> </mat-cell>
<td> </ng-container>
{{award.reason}}
</td> <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<td class="text-right"> <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
<span class="small text-nowrap">{{award.date | date: 'dd.MM.yyyy'}}</span> </mat-table>
</td>
</tr>
</tbody>
</table>
</div>
</div> </div>
</div> </div>
</div> </div>

13
static/src/app/army/army-member/army-member.component.scss
View File

@ -23,10 +23,11 @@
table-layout: fixed; table-layout: fixed;
} }
.table-container { div.table-container {
margin-top: 10px; margin-top:20px;
padding: 5px; padding: 5px;
overflow-x: auto; overflow-x: auto;
min-width: 500px;
} }
.table-head { .table-head {
@ -34,8 +35,12 @@
color: white; color: white;
} }
tbody { mat-table.mat-table {
background: rgba(255, 255, 255, 0.88); background: rgba(255, 255, 255, 0.70);
}
mat-row.mat-row {
@extend mat-table.mat-table;
} }
.cell-outline { .cell-outline {

27
static/src/app/army/army-member/army-member.component.ts
View File

@ -2,7 +2,6 @@ import {Component, OnInit} from '@angular/core';
import {Award, User} from '../../models/model-interfaces'; import {Award, User} from '../../models/model-interfaces';
import {ActivatedRoute, Router} from '@angular/router'; import {ActivatedRoute, Router} from '@angular/router';
import {UserService} from '../../services/army-management/user.service'; import {UserService} from '../../services/army-management/user.service';
import {Subscription} from 'rxjs/Subscription';
import {AwardingService} from '../../services/army-management/awarding.service'; import {AwardingService} from '../../services/army-management/awarding.service';
import {Fraction} from '../../utils/fraction.enum'; import {Fraction} from '../../utils/fraction.enum';
import {Location} from '@angular/common'; import {Location} from '@angular/common';
@ -14,8 +13,6 @@ import {Location} from '@angular/common';
}) })
export class ArmyMemberComponent implements OnInit { export class ArmyMemberComponent implements OnInit {
subscription: Subscription;
user: User = {}; user: User = {};
awards: Award[] = []; awards: Award[] = [];
@ -26,6 +23,8 @@ export class ArmyMemberComponent implements OnInit {
readonly fraction = Fraction; readonly fraction = Fraction;
readonly displayedColumns = ['award-graphics', 'title', 'reason', 'date'];
constructor(private router: Router, constructor(private router: Router,
private route: ActivatedRoute, private route: ActivatedRoute,
private userService: UserService, private userService: UserService,
@ -34,17 +33,17 @@ export class ArmyMemberComponent implements OnInit {
} }
ngOnInit() { ngOnInit() {
this.subscription = this.route.params this.route.params
.map(params => params['id']) .map(params => params['id'])
.filter(id => id !== undefined) .filter(id => id !== undefined)
.flatMap(id => this.userService.getUser(id)) .flatMap(id => this.userService.getUser(id))
.subscribe(user => { .subscribe(user => {
this.user = user; this.user = user;
this.signatureUrl = window.location.origin + '/resource/signature/' + user._id + '.png'; this.signatureUrl = window.location.origin + '/resource/signature/' + user._id + '.png';
this.awardingService.getUserAwardings(user._id).subscribe((awards => { this.awardingService.getUserAwardings(user._id).subscribe((awards => {
this.awards = awards; this.awards = awards;
})); }));
}); });
}; };
backToOverview() { backToOverview() {

81
static/src/app/statistic/war/scoreboard/scoreboard.component.html
View File

@ -1,48 +1,45 @@
<div class="fade-in scoreboard-table"> <mat-table matSort
[dataSource]="sortedRows"
matSortActive="{{tableHead[2].prop}}" matSortDirection="asc" matSortDisableClear
(matSortChange)="sortScoreboardData($event)"
class="mat-elevation-z8 fade-in">
<mat-table matSort <ng-container matColumnDef="{{tableHead[0].prop}}" sticky>
[dataSource]="sortedRows" <mat-header-cell *matHeaderCellDef
matSortActive="{{tableHead[2].prop}}" matSortDirection="asc" matSortDisableClear mat-sort-header="{{tableHead[0].prop}}">{{tableHead[0].head | translate}}</mat-header-cell>
(matSortChange)="sortScoreboardData($event)" <mat-cell *matCellDef="let element"
class="mat-elevation-z8"> [style.color]="element['fraction'] === 'BLUFOR' ? fraction.COLOR_BLUFOR : fraction.COLOR_OPFOR">
{{element.name}}
</mat-cell>
</ng-container>
<ng-container matColumnDef="{{tableHead[0].prop}}"> <ng-container matColumnDef="{{tableHead[1].prop}}">
<mat-header-cell *matHeaderCellDef <mat-header-cell *matHeaderCellDef
mat-sort-header="{{tableHead[0].prop}}">{{tableHead[0].head | translate}}</mat-header-cell> mat-sort-header="{{tableHead[1].prop}}">{{tableHead[1].head | translate}}</mat-header-cell>
<mat-cell *matCellDef="let element" <mat-cell *matCellDef="let element">{{element.fraction ===
[style.color]="element['fraction'] === 'BLUFOR' ? fraction.COLOR_BLUFOR : fraction.COLOR_OPFOR"> 'BLUFOR' ? fraction.BLUFOR : fraction.OPFOR}}</mat-cell>
{{element.name}} </ng-container>
</mat-cell>
</ng-container>
<ng-container matColumnDef="{{tableHead[1].prop}}"> <ng-container *ngFor="let column of tableHead.slice(2, tableHead.length)" matColumnDef="{{column.prop}}">
<mat-header-cell *matHeaderCellDef <mat-header-cell *matHeaderCellDef mat-sort-header="{{column.prop}}" matTooltip="{{column.head | translate}}">
mat-sort-header="{{tableHead[1].prop}}">{{tableHead[1].head | translate}}</mat-header-cell> <mat-icon svgIcon="{{column.prop}}">
<mat-cell *matCellDef="let element">{{element.fraction === </mat-icon>
'BLUFOR' ? fraction.BLUFOR : fraction.OPFOR}}</mat-cell> </mat-header-cell>
</ng-container> <mat-cell *matCellDef="let element">{{element[column.prop]}}</mat-cell>
</ng-container>
<ng-container *ngFor="let column of tableHead.slice(2, tableHead.length)" matColumnDef="{{column.prop}}"> <ng-container matColumnDef="interact">
<mat-header-cell *matHeaderCellDef mat-sort-header="{{column.prop}}" matTooltip="{{column.head | translate}}"> <mat-header-cell *matHeaderCellDef></mat-header-cell>
<mat-icon svgIcon="{{column.prop}}"> <mat-cell *matCellDef="let element">
</mat-icon> <button mat-icon-button
</mat-header-cell> matTooltip="{{ 'stats.scoreboard.button.detail' | translate:{name: element.name} }}"
<mat-cell *matCellDef="let element">{{element[column.prop]}}</mat-cell> (click)="selectPlayerDetail(1, isSteamUUID(element['steamUUID']) ?
</ng-container>
<ng-container matColumnDef="interact">
<mat-header-cell *matHeaderCellDef></mat-header-cell>
<mat-cell *matCellDef="let element">
<button mat-icon-button
matTooltip="{{ 'stats.scoreboard.button.detail' | translate:{name: element.name} }}"
(click)="selectPlayerDetail(1, isSteamUUID(element['steamUUID']) ?
element['steamUUID'] : element['name'])"> element['steamUUID'] : element['name'])">
<mat-icon svgIcon="stats-detail"></mat-icon> <mat-icon svgIcon="stats-detail"></mat-icon>
</button> </button>
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row> <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row> <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table> </mat-table>
</div>

40
static/src/app/statistic/war/scoreboard/scoreboard.component.scss
View File

@ -1,24 +1,12 @@
@import url('../../../style/list-entry.scss'); @import url('../../../style/list-entry.scss');
@import url('../../../style/hide-scrollbar.scss'); @import url('../../../style/hide-scrollbar.scss');
.scoreboard-table { mat-table.mat-table {
width: 1058px; width: 1058px;
margin: auto;
height: 68vh;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12); margin: auto;
border-bottom: 1px solid #dadada; height: 70vh;
}
.mat-header-row {
width: 1058px;
position: absolute;
z-index: 100;
}
.mat-table > mat-row:first-of-type {
padding-top: 56px;
} }
.mat-column-name { .mat-column-name {
@ -50,7 +38,27 @@
white-space: pre-wrap; white-space: pre-wrap;
} }
.mat-header-row, .scoreboard-table { .mat-header-row, mat-table.mat-table {
width: 768px; width: 768px;
} }
} }
@media all and (max-width: 599px) {
.mat-column-name {
flex: 0 0 130px;
padding-left: 1vw;
word-wrap: break-word;
white-space: pre-wrap;
}
.mat-header-row {
width: 755px;
}
mat-table.mat-table {
width: 100%;
overflow-x: auto;
display: grid;
}
}

2
static/src/app/statistic/war/war-header/war-header.component.html
View File

@ -1,6 +1,6 @@
<div *ngIf="war" class="war-header fade-in" xmlns="http://www.w3.org/1999/html"> <div *ngIf="war" class="war-header fade-in" xmlns="http://www.w3.org/1999/html">
<div class="war-header-container"> <div class="war-header-container">
<div class="pull-left head-field" style="width: 250px"> <div class="pull-left head-field">
<h4>{{'stats.scoreboard.standings' | translate}}</h4> <h4>{{'stats.scoreboard.standings' | translate}}</h4>
<span [style.color]="fraction.COLOR_BLUFOR" <span [style.color]="fraction.COLOR_BLUFOR"
style="font-weight: bold; margin-right: 10px">{{fraction.BLUFOR}} {{war.ptBlufor}}</span> style="font-weight: bold; margin-right: 10px">{{fraction.BLUFOR}} {{war.ptBlufor}}</span>

71
static/src/app/statistic/war/war-header/war-header.component.scss
View File

@ -16,10 +16,13 @@
font-size: 22px; font-size: 22px;
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
width: 250px;
} }
.head-field-pie-chart { .head-field-pie-chart {
@extend .head-field; font-size: 22px;
margin-top: 10px;
margin-bottom: 10px;
padding-left: 100px; padding-left: 100px;
} }
@ -119,3 +122,69 @@ span.tab-control {
padding-left: 57px; padding-left: 57px;
} }
} }
@media all and (max-width: 599px) {
.war-header {
position: relative;
overflow: auto;
margin-bottom: 34px; /*do not cover anything with back to top bar*/
}
.nav-tabs {
width: 100%;
padding-top: 0;
}
.war-header-container {
width: 100%;
padding-top: 0;
h4 {
font-size: 16px;
margin-bottom: 0;
}
div.btn-clean-log {
padding-left: 0;
padding-top: 38px;
& > a {
margin: 0 !important;
}
}
}
.head-field {
width: calc(100% - 1.5vw);
text-align: center;
margin-top: 1vh;
margin-bottom: 0;
& > span {
font-size: 16px;
}
}
.head-field-pie-chart {
width: calc(54% - 1.5vw);
padding-left: 10%;
margin-bottom: -8px;
}
.nav-tabs > li {
width: 25%;
font-size: 12px;
mat-icon {
display: block;
}
}
/* radio box fraction select */
.nav-tabs > li:last-child {
width: fit-content;
position: absolute;
margin-top: -48px;
margin-left: 46%;
}
}