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

Add public decoration table (CC-38)

pull/43/head
HardiReady 2018-07-18 21:15:42 +02:00
parent 14901883e6
commit 783d30e91e
4 changed files with 89 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
static/src/app/pub/decoration-overview/decoration-overview.component.css
View File

@ -1,75 +1,42 @@
.squad-layout {
overflow: hidden;
padding: 5px 15px 5px 15px;
table {
width: 100%;
margin-bottom: 20px;
}
.row {
clear: both;
}
.squad-cell {
display: table-cell;
padding: 5px;
}
.colored-row {
background: rgb(34, 34, 34);
}
.title-row {
border-radius: 12px 12px 0 0;
}
.footer-row {
border-radius: 0 0 12px 12px;
}
.middle-row {
min-height: 120px;
border: rgb(34, 34, 34);
background-color: rgba(255, 255, 255, 0.88);
border-left-style: solid;
border-right-style: solid;
}
.title {
color: whitesmoke;
font-weight: bold;
font-size: 14px;
}
.name-cell {
display: inherit;
margin-left: 200px;
:host /deep/ table.mat-table {
background: rgba(255, 255, 255, 0.6);
}
h1 {
text-align: center;
margin-bottom: 30px;
}
img {
position: absolute;
margin-top: 8px;
margin-left: 25px;
td > img {
margin: 5px 2px;
}
.member-link {
cursor: pointer;
text-decoration: underline;
.mat-column-image {
width: 160px;
}
.army-head {
font-weight: bolder;
text-align: center
.mat-column-fraction {
width: 90px;
text-indent: 10px;
}
.member-count {
margin-top: 15px;
padding: 8px;
text-align: center;
font-weight: bold;
color: whitesmoke;
background: #222222;
border-radius: 12px;
.mat-column-description {
width: 55%;
}
tr.mat-row:hover {
background: rgba(231, 231, 231, 0.6);
}
:host /deep/ table.fixed-header-table > thead {
position: fixed;
display: inherit;
width: 1100px;
background: white;
top: 50px;
}

52
static/src/app/pub/decoration-overview/decoration-overview.component.html
View File

@ -1,18 +1,44 @@
<div style="width: 1100px; margin:auto; position: relative;">
<h1>Übersicht über alle Ränge</h1>
<h1>Übersicht über alle Auszeichnungen</h1>
<div class="pull-left" style="width: 45%;">
<h3 class="army-head" [style.color]="fraction.COLOR_BLUFOR">{{fraction.BLUFOR}}</h3>
<div class="squad-layout" *ngFor="let decoration of decorations">
{{decoration.name}}
</div>
</div>
<table mat-table
[dataSource]="rows"
[class.fixed-header-table]="hasFixedTableHeader"
class="mat-elevation-z8">
<div class="pull-right" style="width: 45%;">
<h3 class="army-head" [style.color]="fraction.COLOR_OPFOR">{{fraction.OPFOR}}</h3>
<div class="squad-layout" *ngFor="let decoration of decorations">
{{decoration.name}}
</div>
</div>
<ng-container matColumnDef="{{columnMap[0].prop}}">
<th mat-header-cell *matHeaderCellDef>{{columnMap[0].head}}</th>
<td mat-cell *matCellDef="let element">
<img src="resource/decoration/{{element._id}}.png"
matTooltip="{{element.name}}"
alt="{{element.name}}">
</td>
</ng-container>
<ng-container matColumnDef="{{columnMap[1].prop}}">
<th mat-header-cell *matHeaderCellDef>{{columnMap[1].head}}</th>
<td mat-cell *matCellDef="let element">{{element[columnMap[1].prop]}}</td>
</ng-container>
<ng-container matColumnDef="{{columnMap[2].prop}}">
<th mat-header-cell *matHeaderCellDef>{{columnMap[2].head}}</th>
<td mat-cell *matCellDef="let element"
[style.color]="element['fraction'] === 'BLUFOR' ?
fraction.COLOR_BLUFOR :
element['fraction'] === 'OPFOR' ? fraction.COLOR_OPFOR : '#666666'">
{{element[columnMap[2].prop] === 'BLUFOR'?
'NATO' :
element[columnMap[2].prop] === 'OPFOR' ? 'CSAT' : 'GLOBAL'}}
</td>
</ng-container>
<ng-container matColumnDef="{{columnMap[3].prop}}">
<th mat-header-cell *matHeaderCellDef>{{columnMap[3].head}}</th>
<td mat-cell *matCellDef="let element">{{element[columnMap[3].prop]}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>

27
static/src/app/pub/decoration-overview/decoration-overview.component.ts
View File

@ -1,4 +1,4 @@
import {Component, Inject, OnDestroy, OnInit} from '@angular/core';
import {Component, HostListener, Inject, OnDestroy, OnInit} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {DOCUMENT} from '@angular/common';
@ -16,7 +16,20 @@ import {DecorationService} from '../../services/army-management/decoration.servi
})
export class DecorationOverviewComponent implements OnInit, OnDestroy {
decorations: Decoration[];
rows: Decoration[];
columnMap = [
{prop: 'image', head: 'Abbildung'},
{prop: 'name', head: 'Bezeichnung'},
{prop: 'fraction', head: 'Fraktion'},
{prop: 'description', head: 'Beschreibung'}
];
displayedColumns = this.columnMap.map(col => col.prop);
tableHeaderFixedVal = 100;
hasFixedTableHeader = false;
readonly fraction = Fraction;
@ -30,13 +43,19 @@ export class DecorationOverviewComponent implements OnInit, OnDestroy {
// set background image css
this.document.getElementById('right').setAttribute('style', CSSHelpers.getBackgroundCSS('../assets/bg.jpg'));
// init rank data
// init decoration data
this.decorationService.findDecorations()
.subscribe(decorations => {
this.decorations = decorations;
this.rows = decorations;
});
};
@HostListener('window:scroll', [])
onWindowScroll() {
this.hasFixedTableHeader = document.body.scrollTop > this.tableHeaderFixedVal
|| document.documentElement.scrollTop > this.tableHeaderFixedVal;
}
ngOnDestroy() {
if (!this.router.url.includes(RouteConfig.overviewPath)) {
this.document.getElementById('right').setAttribute('style', '');

1
static/src/app/pub/public.module.ts
View File

@ -5,6 +5,7 @@ import {RankService} from '../services/army-management/rank.service';
import {pubRouterModule, pubRoutingComponents} from './public.routing';
import {DecorationService} from '../services/army-management/decoration.service';
import {MatTableModule} from '@angular/material/table';
import {MatSortModule} from '@angular/material';
@NgModule({