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

Add url state representation for decoration overview

pull/38/head
HardiReady 2018-08-11 18:43:41 +02:00
parent ba987e1b67
commit 15ea13e225
2 changed files with 35 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,7 +7,7 @@
<div [ngClass]="{active: active === 'GLOBAL'}" (click)="switchFraction('GLOBAL')">GLOBAL</div>
</div>
<mat-tab-group>
<mat-tab-group [selectedIndex]="selectedType" (selectedIndexChange)="switchTab($event)">
<mat-tab label="Orden">
<ng-template matTabContent>
<cc-decoration-panel *ngFor="let decoration of medals"

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

@ -6,6 +6,7 @@ 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';
import {Location} from '@angular/common';
@Component({
@ -23,10 +24,13 @@ export class DecorationOverviewComponent implements OnInit {
active: string;
selectedType = 0;
readonly fraction = Fraction;
constructor(private router: Router,
private route: ActivatedRoute,
private location: Location,
private decorationService: DecorationService,
private bottomSheet: MatBottomSheet) {
}
@ -36,17 +40,45 @@ export class DecorationOverviewComponent implements OnInit {
this.decorationService.findDecorations()
.subscribe(decorations => {
this.decorations = decorations;
const queryParams = this.route.snapshot.queryParams;
if (queryParams.type < 2) {
this.selectedType = queryParams.type;
}
const fract = queryParams.fraction;
if (fract && (fract === 'BLUFOR' || fract === 'OPFOR' || fract === 'GLOBAL')) {
this.switchFraction(queryParams.fraction);
} else {
this.switchFraction('BLUFOR');
}
});
};
switchFraction(value: string) {
switchFraction(value: any) {
this.medals = this.decorations.filter(d => d.fraction === value && d.isMedal);
this.ribbons = this.decorations.filter(d => d.fraction === value && !d.isMedal);
this.active = value;
this.adjustBrowserUrl(value)
}
switchTab(tabIndex) {
this.selectedType = tabIndex;
this.adjustBrowserUrl(this.active)
}
select(decoration: Decoration) {
this.bottomSheet.open(UserListSheetComponent, {data: {decoration: decoration}});
}
adjustBrowserUrl(fractionKey = '') {
const absoluteUrl = this.location.path().split('?')[0];
if (fractionKey === 'BLUFOR' && this.selectedType === 0) {
this.location.replaceState(absoluteUrl);
return;
}
const queryPart = fractionKey !== '' ? 'fraction='.concat(fractionKey)
.concat('&type=' + this.selectedType) : 'type=0';
this.location.replaceState(absoluteUrl, queryPart);
}
}