Replace trace page with bottom sheet on rank and decoration overviews
parent
51b11cb2a1
commit
0ef9a6aac2
|
|
@ -22,7 +22,7 @@ h1, h3 {
|
|||
}
|
||||
|
||||
.fraction-global > h3 {
|
||||
color: #666666;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.fraction-left {
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@ import {CSSHelpers} from '../../utils/global.helpers';
|
|||
import {RouteConfig} from '../../app.config';
|
||||
import {Decoration} from '../../models/model-interfaces';
|
||||
import {DecorationService} from '../../services/army-management/decoration.service';
|
||||
import {MatBottomSheet} from '@angular/material';
|
||||
import {UserListSheetComponent} from '../user-list-sheet/user-list-sheet.component';
|
||||
|
||||
|
||||
@Component({
|
||||
|
|
@ -29,6 +31,7 @@ export class DecorationOverviewComponent implements OnInit, OnDestroy {
|
|||
constructor(private router: Router,
|
||||
private route: ActivatedRoute,
|
||||
private decorationService: DecorationService,
|
||||
private bottomSheet: MatBottomSheet,
|
||||
@Inject(DOCUMENT) private document) {
|
||||
}
|
||||
|
||||
|
|
@ -46,7 +49,7 @@ export class DecorationOverviewComponent implements OnInit, OnDestroy {
|
|||
};
|
||||
|
||||
select(decoration: Decoration) {
|
||||
this.router.navigate(['../find/award', decoration._id], {relativeTo: this.route});
|
||||
this.bottomSheet.open(UserListSheetComponent, {data: { decoration: decoration }});
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
|
|
|
|||
|
|
@ -6,10 +6,15 @@ import {pubRouterModule, pubRoutingComponents} from './public.routing';
|
|||
import {DecorationService} from '../services/army-management/decoration.service';
|
||||
import {MatTableModule} from '@angular/material/table';
|
||||
import {MatCardModule} from '@angular/material/card';
|
||||
import {MatBottomSheetModule} from '@angular/material/bottom-sheet';
|
||||
import {MatListModule} from '@angular/material/list';
|
||||
import {UserListSheetComponent} from './user-list-sheet/user-list-sheet.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: pubRoutingComponents,
|
||||
imports: [CommonModule, SharedModule, MatTableModule, MatCardModule, pubRouterModule],
|
||||
entryComponents: [UserListSheetComponent],
|
||||
imports: [CommonModule, SharedModule, MatTableModule, MatCardModule, MatBottomSheetModule, MatListModule,
|
||||
pubRouterModule],
|
||||
providers: [DecorationService, RankService]
|
||||
})
|
||||
export class PublicModule {
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@ 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';
|
||||
import {TraceOverviewComponent} from './trace-overview/trace-overview.component';
|
||||
import {RankPanelComponent} from './rank-overview/rank-panel/rank-panel.component';
|
||||
import {UserListSheetComponent} from './user-list-sheet/user-list-sheet.component';
|
||||
|
||||
export const publicRoutes: Routes = [
|
||||
{
|
||||
|
|
@ -18,20 +18,10 @@ export const publicRoutes: Routes = [
|
|||
component: DecorationOverviewComponent,
|
||||
outlet: 'right'
|
||||
},
|
||||
{
|
||||
path: 'find/rank/:id',
|
||||
component: TraceOverviewComponent,
|
||||
outlet: 'right'
|
||||
},
|
||||
{
|
||||
path: 'find/award/:id',
|
||||
component: TraceOverviewComponent,
|
||||
outlet: 'right'
|
||||
},
|
||||
];
|
||||
|
||||
export const pubRouterModule: ModuleWithProviders = RouterModule.forChild(publicRoutes);
|
||||
|
||||
export const pubRoutingComponents = [PublicComponent, RankOverviewComponent, DecorationOverviewComponent,
|
||||
DecorationPanelComponent, TraceOverviewComponent, RankPanelComponent];
|
||||
DecorationPanelComponent, RankPanelComponent, UserListSheetComponent];
|
||||
|
||||
|
|
|
|||
|
|
@ -16,7 +16,6 @@
|
|||
<td mat-cell *matCellDef="let element"> {{element.name}}</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selectRow(row)"></tr>
|
||||
</table>
|
||||
</div>
|
||||
|
|
@ -36,7 +35,6 @@
|
|||
<td mat-cell *matCellDef="let element">{{element.name}}</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selectRow(row)"></tr>
|
||||
</table>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,8 @@ import {CSSHelpers} from '../../utils/global.helpers';
|
|||
import {RouteConfig} from '../../app.config';
|
||||
import {Rank} from '../../models/model-interfaces';
|
||||
import {RankService} from '../../services/army-management/rank.service';
|
||||
import {MatBottomSheet} from '@angular/material';
|
||||
import {UserListSheetComponent} from '../user-list-sheet/user-list-sheet.component';
|
||||
|
||||
|
||||
@Component({
|
||||
|
|
@ -26,6 +28,7 @@ export class RankOverviewComponent implements OnInit, OnDestroy {
|
|||
constructor(private router: Router,
|
||||
private route: ActivatedRoute,
|
||||
private rankService: RankService,
|
||||
private bottomSheet: MatBottomSheet,
|
||||
@Inject(DOCUMENT) private document) {
|
||||
}
|
||||
|
||||
|
|
@ -42,10 +45,9 @@ export class RankOverviewComponent implements OnInit, OnDestroy {
|
|||
};
|
||||
|
||||
selectRow(rank: Rank) {
|
||||
this.router.navigate(['../find/rank', rank._id], {relativeTo: this.route});
|
||||
this.bottomSheet.open(UserListSheetComponent, {data: { rank: rank }});
|
||||
}
|
||||
|
||||
|
||||
ngOnDestroy() {
|
||||
if (!this.router.url.includes(RouteConfig.overviewPath)) {
|
||||
this.document.getElementById('right').setAttribute('style', '');
|
||||
|
|
|
|||
|
|
@ -1,47 +0,0 @@
|
|||
.tracer-container {
|
||||
text-align: center;
|
||||
max-width: 1100px;
|
||||
min-width: 800px;
|
||||
position: relative;
|
||||
margin: auto auto 25px;
|
||||
min-height: calc(100vh - 95px);
|
||||
}
|
||||
|
||||
.return-button {
|
||||
display: block;
|
||||
width: auto;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.show-panel {
|
||||
display: inline-block;
|
||||
margin: inherit;
|
||||
}
|
||||
|
||||
:host /deep/ .show-panel mat-card {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.decoration-show-panel {
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.user-table-container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
table.mat-table {
|
||||
width: 50%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
table.mat-table:hover {
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
:host /deep/ tr.mat-row:hover {
|
||||
background: #ffffff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
<div class="tracer-container">
|
||||
<h1>Alle aktiven Teilnehmer mit {{isRank ? 'Rang' : 'Auszeichnung'}}</h1>
|
||||
|
||||
<div class="return-button" style="position:absolute;">
|
||||
<button mat-raised-button (click)="navigateBack()">
|
||||
<mat-icon svgIcon="chevron-left"></mat-icon>Zurück
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="show-panel"
|
||||
*ngIf="isRank">
|
||||
<cc-rank-panel [rank]="traceItem">
|
||||
</cc-rank-panel>
|
||||
</div>
|
||||
<div class="show-panel decoration-show-panel"
|
||||
*ngIf="!isRank">
|
||||
<cc-decoration-panel [decoration]="traceItem">
|
||||
</cc-decoration-panel>
|
||||
</div>
|
||||
|
||||
<div class="user-table-container">
|
||||
<table mat-table [dataSource]="users" class="mat-elevation-z8">
|
||||
|
||||
<ng-container matColumnDef="name">
|
||||
<th mat-header-cell *matHeaderCellDef>Name</th>
|
||||
<td mat-cell *matCellDef="let element">{{element.username}}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="fraction">
|
||||
<th mat-header-cell *matHeaderCellDef>Fraktion</th>
|
||||
<td mat-cell *matCellDef="let element"
|
||||
[style.color]="element.squadId.fraction === 'BLUFOR' ? fraction.COLOR_BLUFOR :fraction.COLOR_OPFOR">
|
||||
{{element.squadId.fraction === 'BLUFOR' ? fraction.BLUFOR : fraction.OPFOR}}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="squadName">
|
||||
<th mat-header-cell *matHeaderCellDef>Squad</th>
|
||||
<td mat-cell *matCellDef="let element">{{element.squadId.name}}</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selectUser(row)"></tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,80 +0,0 @@
|
|||
import {Component, Inject, OnDestroy, OnInit} from '@angular/core';
|
||||
import {ActivatedRoute, Router} from '@angular/router';
|
||||
import {DOCUMENT, Location} from '@angular/common';
|
||||
import {Fraction} from '../../utils/fraction.enum';
|
||||
import {CSSHelpers} from '../../utils/global.helpers';
|
||||
import {RouteConfig} from '../../app.config';
|
||||
import {Decoration, Rank, User} from '../../models/model-interfaces';
|
||||
import {UserService} from '../../services/army-management/user.service';
|
||||
import {RankService} from '../../services/army-management/rank.service';
|
||||
import {DecorationService} from '../../services/army-management/decoration.service';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'cc-trace-overview',
|
||||
templateUrl: './trace-overview.component.html',
|
||||
styleUrls: ['./trace-overview.component.css']
|
||||
})
|
||||
export class TraceOverviewComponent implements OnInit, OnDestroy {
|
||||
|
||||
traceItem: Rank | Decoration = {};
|
||||
|
||||
users: User[];
|
||||
|
||||
isRank = true;
|
||||
|
||||
displayedColumns: string[] = ['name', 'fraction', 'squadName'];
|
||||
|
||||
readonly fraction = Fraction;
|
||||
|
||||
constructor(private router: Router,
|
||||
private route: ActivatedRoute,
|
||||
private location: Location,
|
||||
private userService: UserService,
|
||||
private rankService: RankService,
|
||||
private decorationService: DecorationService,
|
||||
@Inject(DOCUMENT) private document) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
// set background image css
|
||||
this.document.getElementById('right').setAttribute('style', CSSHelpers.getBackgroundCSS('../assets/bg.jpg'));
|
||||
this.route.params.subscribe(params => {
|
||||
const itemId = params.id;
|
||||
|
||||
if (this.router.url.includes('find/award/')) {
|
||||
// Award
|
||||
this.isRank = false;
|
||||
this.decorationService.getDecoration(itemId).subscribe(decoration => {
|
||||
this.traceItem = decoration;
|
||||
this.userService.findUsers({decorationId: decoration._id}).subscribe(users => {
|
||||
this.users = users.filter(user => user.squadId != null);
|
||||
});
|
||||
});
|
||||
} else if (this.router.url.includes('find/rank/')) {
|
||||
// Rank
|
||||
this.isRank = true;
|
||||
this.rankService.getRank(itemId).subscribe(rank => {
|
||||
this.traceItem = rank;
|
||||
this.userService.findUsers({fraction: rank.fraction}).subscribe(users => {
|
||||
this.users = users.filter(user => user.squadId != null && user.rankLvl === rank.level);
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
selectUser(user) {
|
||||
this.router.navigate(['overview', {outlets: {'right': ['member', user._id]}}]);
|
||||
}
|
||||
|
||||
navigateBack() {
|
||||
this.location.back();
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
if (!this.router.url.includes(RouteConfig.overviewPath)) {
|
||||
this.document.getElementById('right').setAttribute('style', '');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<div *ngIf="data.rank">
|
||||
<img src="resource/rank/{{data.rank._id}}.png" height="65" style="float:left;">
|
||||
<h4 style="text-align: center;height: 65px; padding-top: 20px;">
|
||||
Aktive Teilnehmer mit Rang: {{data.rank.name}}
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
<div *ngIf="data.decoration">
|
||||
<img src="resource/decoration/{{data.decoration._id}}.png"
|
||||
height="{{data.decoration.isMedal ? 65 : 32}}"
|
||||
style="float:left;">
|
||||
<h4 style="text-align: center;"
|
||||
[style.height]="data.decoration.isMedal ? '65px' : 'inherit'"
|
||||
[style.padding-top]="data.decoration.isMedal ? '20px' : 'inherit'">
|
||||
Aktive Teilnehmer mit {{data.decoration.isMedal ? 'Orden' : 'Ordensband'}}: {{data.decoration.name}}
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
<mat-nav-list *ngFor="let user of users">
|
||||
<a mat-list-item (click)="selectUser(user)">
|
||||
<span mat-line>
|
||||
{{user.username}}
|
||||
</span>
|
||||
<span mat-line [style.color]="user.squadId.fraction === 'BLUFOR' ? fraction.COLOR_BLUFOR :fraction.COLOR_OPFOR">
|
||||
{{user.squadId.fraction === 'BLUFOR' ? fraction.BLUFOR : fraction.OPFOR}} - {{user.squadId.name}}
|
||||
</span>
|
||||
</a>
|
||||
</mat-nav-list>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
import {Component, Inject, OnInit} from '@angular/core';
|
||||
import {MAT_BOTTOM_SHEET_DATA, MatBottomSheetRef} from '@angular/material';
|
||||
import {RankOverviewComponent} from '../rank-overview/rank-overview.component';
|
||||
import {ActivatedRoute, Router} from '@angular/router';
|
||||
import {RankService} from '../../services/army-management/rank.service';
|
||||
import {DecorationService} from '../../services/army-management/decoration.service';
|
||||
import {UserService} from '../../services/army-management/user.service';
|
||||
import {User} from '../../models/model-interfaces';
|
||||
import {Fraction} from '../../utils/fraction.enum';
|
||||
|
||||
@Component({
|
||||
selector: 'cc-user-list-sheet',
|
||||
templateUrl: 'user-list-sheet.component.html',
|
||||
})
|
||||
export class UserListSheetComponent implements OnInit {
|
||||
|
||||
users: User[];
|
||||
|
||||
readonly fraction = Fraction;
|
||||
|
||||
constructor(private router: Router,
|
||||
private route: ActivatedRoute,
|
||||
private userService: UserService,
|
||||
private rankService: RankService,
|
||||
private decorationService: DecorationService,
|
||||
private bottomSheetRef: MatBottomSheetRef<RankOverviewComponent>,
|
||||
@Inject(MAT_BOTTOM_SHEET_DATA) public data: any) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
if (this.data.decoration) {
|
||||
const itemId = this.data.decoration._id;
|
||||
this.decorationService.getDecoration(itemId).subscribe(decoration => {
|
||||
this.userService.findUsers({decorationId: decoration._id}).subscribe(users => {
|
||||
this.users = users.filter(user => user.squadId != null);
|
||||
});
|
||||
});
|
||||
} else if (this.data.rank) {
|
||||
// Rank
|
||||
const itemId = this.data.rank._id;
|
||||
this.rankService.getRank(itemId).subscribe(rank => {
|
||||
this.userService.findUsers({fraction: rank.fraction}).subscribe(users => {
|
||||
this.users = users.filter(user => user.squadId != null && user.rankLvl === rank.level);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
selectUser(user) {
|
||||
this.bottomSheetRef.dismiss();
|
||||
event.preventDefault();
|
||||
this.router.navigate(['overview', {outlets: {'right': ['member', user._id]}}]);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue