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

Switch to basic card layout for decorations

pull/43/head
HardiReady 2018-07-19 22:10:32 +02:00
parent 783d30e91e
commit 1a59724dbc
8 changed files with 74 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,42 +1,11 @@
table {
width: 100%;
margin-bottom: 20px;
}
:host /deep/ table.mat-table {
background: rgba(255, 255, 255, 0.6);
}
h1 {
text-align: center;
margin-bottom: 30px;
}
td > img {
margin: 5px 2px;
h3 {
font-weight: bolder;
}
.mat-column-image {
width: 160px;
}
.mat-column-fraction {
width: 90px;
text-indent: 10px;
}
.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;
h1, h3 {
text-align: center;
}

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

@ -1,44 +1,24 @@
<div style="width: 1100px; margin:auto; position: relative;">
<h1>Übersicht über alle Auszeichnungen</h1>
<table mat-table
[dataSource]="rows"
[class.fixed-header-table]="hasFixedTableHeader"
class="mat-elevation-z8">
<div style="float:left;">
<h3 [style.color]="fraction.COLOR_BLUFOR">{{fraction.BLUFOR}}</h3>
<cc-decoration-panel *ngFor="let decoration of decorationsBlufor"
[decoration]="decoration">
</cc-decoration-panel>
</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 style="float:left; margin-left: 2.5%;">
<h3 style="color: #666666">Global</h3>
<cc-decoration-panel *ngFor="let decoration of decorationsGlobal"
[decoration]="decoration">
</cc-decoration-panel>
</div>
<div style="float:right;">
<h3 [style.color]="fraction.COLOR_OPFOR">{{fraction.OPFOR}}</h3>
<cc-decoration-panel *ngFor="let decoration of decorationsOpfor"
[decoration]="decoration">
</cc-decoration-panel>
</div>
</div>

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

@ -1,4 +1,4 @@
import {Component, HostListener, Inject, OnDestroy, OnInit} from '@angular/core';
import {Component, Inject, OnDestroy, OnInit} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {DOCUMENT} from '@angular/common';
@ -16,18 +16,11 @@ import {DecorationService} from '../../services/army-management/decoration.servi
})
export class DecorationOverviewComponent implements OnInit, OnDestroy {
rows: Decoration[];
decorationsBlufor: Decoration[];
columnMap = [
{prop: 'image', head: 'Abbildung'},
{prop: 'name', head: 'Bezeichnung'},
{prop: 'fraction', head: 'Fraktion'},
{prop: 'description', head: 'Beschreibung'}
];
decorationsGlobal: Decoration[];
displayedColumns = this.columnMap.map(col => col.prop);
tableHeaderFixedVal = 100;
decorationsOpfor: Decoration[];
hasFixedTableHeader = false;
@ -46,16 +39,12 @@ export class DecorationOverviewComponent implements OnInit, OnDestroy {
// init decoration data
this.decorationService.findDecorations()
.subscribe(decorations => {
this.rows = decorations;
this.decorationsBlufor = decorations.filter(d => d.fraction === 'BLUFOR');
this.decorationsGlobal = decorations.filter(d => d.fraction === 'GLOBAL');
this.decorationsOpfor = decorations.filter(d => d.fraction === 'OPFOR');
});
};
@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', '');

4
static/src/app/pub/decoration-overview/decoration-panel/decoration-panel.component.css Normal file
View File

@ -0,0 +1,4 @@
.decoration-card {
max-width: 338px;
margin: 6px;
}

16
static/src/app/pub/decoration-overview/decoration-panel/decoration-panel.component.html Normal file
View File

@ -0,0 +1,16 @@
<mat-card class="decoration-card">
<mat-card-header>
<mat-card-title>{{decoration.name}}</mat-card-title>
<mat-card-subtitle
[style.color]="decoration.fraction === 'BLUFOR' ? fraction.COLOR_BLUFOR : decoration.fraction === 'OPFOR' ? fraction.COLOR_OPFOR : '#666666'">
{{decoration.fraction === 'BLUFOR'? fraction.BLUFOR : decoration.fraction === 'OPFOR' ? fraction.OPFOR : 'GLOBAL'}}
</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<img src="resource/decoration/{{decoration._id}}.png"
alt="{{decoration.name}}">
<p>
{{decoration.description}}
</p>
</mat-card-content>
</mat-card>

20
static/src/app/pub/decoration-overview/decoration-panel/decoration-panel.component.ts Normal file
View File

@ -0,0 +1,20 @@
import {Component, Input} from '@angular/core';
import {Decoration} from '../../../models/model-interfaces';
import {Fraction} from '../../../utils/fraction.enum';
@Component({
selector: 'cc-decoration-panel',
templateUrl: './decoration-panel.component.html',
styleUrls: ['./decoration-panel.component.css']
})
export class DecorationPanelComponent {
@Input() decoration: Decoration;
readonly fraction = Fraction;
constructor() {
}
}

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

@ -5,12 +5,11 @@ 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';
import {MatCardModule} from '@angular/material/card';
@NgModule({
declarations: pubRoutingComponents,
imports: [CommonModule, SharedModule, MatTableModule, pubRouterModule],
imports: [CommonModule, SharedModule, MatTableModule, MatCardModule, pubRouterModule],
providers: [DecorationService, RankService]
})
export class PublicModule {

4
static/src/app/pub/public.routing.ts
View File

@ -3,6 +3,7 @@ import {RankOverviewComponent} from './rank-overview/rank-overview.component';
import {ModuleWithProviders} from '@angular/core';
import {DecorationOverviewComponent} from './decoration-overview/decoration-overview.component';
import {PublicComponent} from './public.component';
import {DecorationPanelComponent} from './decoration-overview/decoration-panel/decoration-panel.component';
export const publicRoutes: Routes = [
{
@ -19,5 +20,6 @@ export const publicRoutes: Routes = [
export const pubRouterModule: ModuleWithProviders = RouterModule.forChild(publicRoutes);
export const pubRoutingComponents = [PublicComponent, RankOverviewComponent, DecorationOverviewComponent];
export const pubRoutingComponents = [PublicComponent, RankOverviewComponent, DecorationOverviewComponent,
DecorationPanelComponent];