joachim/koersepublicfrontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fixed the routing bug

Browse Source
This commit is contained in:
Joachim 2018-09-08 17:28:27 +02:00
parent 012bf1c6ef
commit 03256d7b64
11 changed files with 98 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/app/app-routing.module.ts
View File

@ -11,13 +11,12 @@ const routes: Routes = [
component: ChampionshipComponent,
children: [
{
path: 'tier/:tier', component: TierComponent, children: [
{path: 'poule/:poule', component: PouleComponent}
]
path: 'tier/:tier', component: TierComponent
},
{path: 'tier/:tier/poule/:poule', component: PouleComponent}
]
},
];
}];
@NgModule({
imports: [

7
src/app/championship/championship.component.ts
View File

@ -1,6 +1,7 @@
import { Component, OnInit } from '@angular/core';
import {ChampionshipService} from '../championship.service';
import {ActivatedRoute} from '@angular/router';
import {TopmenuService} from '../topmenu.service';
@Component({
selector: 'app-championship',
@ -9,13 +10,15 @@ import {ActivatedRoute} from '@angular/router';
})
export class ChampionshipComponent implements OnInit {
constructor(private route: ActivatedRoute, private championshipService: ChampionshipService) { }
constructor(private route: ActivatedRoute, private championshipService: ChampionshipService, private topmenuService: TopmenuService) { }
ngOnInit() {
// mark the championservice to set the right championship
this.route.paramMap.subscribe(val => {
console.log(val);
this.championshipService.setChampionship(+val.get('idchampionship'));
let idChampionship = +val.get('idchampionship');
this.championshipService.setChampionship(idChampionship);
this.topmenuService.setChampionship(idChampionship);
});
}

14
src/app/content/poule/poule.component.html
View File

@ -35,13 +35,11 @@
<!--do a penalty for this race/team combo-->
<div class="penaltycell" [ngStyle]="{'grid-column':2, 'grid-row':2+(teamindex*(maxRaces+1))+raceindex+1}">
<span class="timecell">{{getPenaltySum(raceindex, team.idteam) | number:'1.0-0'}}<span class="timeletter">s</span></span>
<span class="timecell seconds">{{getPenaltySum(raceindex, team.idteam) | number:'1.0-0'}}</span>
</div>
<div class="totalcell" [ngStyle]="{'grid-column':3, 'grid-row':2+(teamindex*(maxRaces+1))+raceindex+1}">
<span class="timecell">{{getRaceTime(raceindex, team.idteam) | minutes}}</span>
<span class="timeletter">m</span>
<span class="timecell">{{getRaceTimeSeconds(raceindex, team.idteam)}}</span>
<span class="timeletter">s</span>
<span class="timecell minutes">{{getRaceTime(raceindex, team.idteam) | minutes}}</span>
<span class="timecell seconds">{{getRaceTimeSeconds(raceindex, team.idteam)}}</span>
</div>
@ -51,10 +49,8 @@
<div class="resultcell" [ngStyle]="{'grid-column':4,
'grid-row-start':2+(teamindex*(maxRaces+1))+1,
'grid-row-end': 2+(teamindex*(maxRaces+1))+1+maxRaces}">
<span class="timecell">{{getAvgOfBestTwo(team.idteam) | minutes}}</span>
<span class="timeletter">m</span>
<span class="timecell">{{((getAvgOfBestTwo(team.idteam)/1000)%60).toFixed(2)}}</span>
<span class="timeletter">s</span>
<span class="timecell minutes">{{getAvgOfBestTwo(team.idteam) | minutes}}</span>
<span class="timecell seconds">{{((getAvgOfBestTwo(team.idteam)/1000)%60).toFixed(2)}}</span>
</div>
</ng-container>

10
src/app/content/poule/poule.component.scss
View File

@ -24,3 +24,13 @@
font-size: 60%;
}
.timecell.seconds:after {
content: 's';
font-size: 60%;
}
.timecell.minutes:after {
content: 'm';
font-size: 60%;
}

57
src/app/content/poule/poule.component.ts
View File

@ -1,8 +1,9 @@
import {Component, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core';
import {ChampionshipService} from '../../championship.service';
import {ActivatedRoute} from '@angular/router';
import {map} from 'rxjs/operators';
import {distinct, distinctUntilChanged, map} from 'rxjs/operators';
import {combineLatest} from 'rxjs';
import {TopmenuService} from '../../topmenu.service';
@Component({
selector: 'app-poule',
@ -11,52 +12,60 @@ import {combineLatest} from 'rxjs';
})
export class PouleComponent implements OnInit {
poule: number;
idChampionship: number;
tier: number;
protected teams: any[] = [];
protected times: any[] = [];
protected maxRaces = 0;
private timesIndexed: {};
protected maxLaps = 0;
constructor(private championshipService: ChampionshipService, private route: ActivatedRoute) {
constructor(private championshipService: ChampionshipService, private route: ActivatedRoute, private topmenuService: TopmenuService) {
}
ngOnInit() {
const tier$ = this.route.parent.params.pipe(map(v => v['tier']));
const poule$ = this.route.params.pipe(map(v => v['poule']));
const championship$ = this.route.parent.parent.params.pipe(map(v => v['idchampionship']));
const tier$ = this.route.params.pipe(map(v => v['tier']), distinctUntilChanged());
const poule$ = this.route.params.pipe(map(v => v['poule']), distinctUntilChanged());
const championship$ = this.route.parent.params.pipe(map(v => v['idchampionship']), distinctUntilChanged());
combineLatest(tier$, poule$, championship$).subscribe(([tier, poule, championship]) => {
console.log('tier/poule/champ changed');
console.log(tier);
console.log(poule);
console.log(championship);
this.tier = tier;
this.poule = poule;
this.idChampionship = championship;
this.championshipService.getPoules(tier, championship).subscribe(poules => {
this.topmenuService.setPoules(poules);
});
this.topmenuService.setPoule(poule);
this.topmenuService.setTier(tier);
this.loadData();
});
}
private loadData() {
// fetch the poule data
this.championshipService.getTeamsInPoule(this.idChampionship, this.tier, this.poule).subscribe(val => {
this.teams = val;
this.teams = [];
this.times = [];
// calculate the maximum of the racecounts... this influences the amount of columns in the table
let maxRaces = 0;
this.teams.forEach(t => {
if (t.racecount > maxRaces) {
maxRaces = t.racecount;
}
console.log('loading data.');
// fetch the poule data
this.championshipService.getTeamsInPoule(this.topmenuService.championship$.value, this.topmenuService.tier$.value, this.topmenuService.poule$.value)
.subscribe(val => {
this.teams = val;
// calculate the maximum of the racecounts... this influences the amount of columns in the table
let maxRaces = 0;
this.teams.forEach(t => {
if (t.racecount > maxRaces) {
maxRaces = t.racecount;
}
});
this.maxRaces = maxRaces;
});
this.maxRaces = maxRaces;
});
this.championshipService.getTimesInPoule(this.idChampionship, this.tier, this.poule).subscribe(val => {
this.championshipService.getTimesInPoule(this.topmenuService.championship$.value, this.topmenuService.tier$.value, this.topmenuService.poule$.value).subscribe(val => {
this.times = val;
// preprocess this array -> map idteam on the laptime array so we can index it using 0..n-1

10
src/app/content/tier/tier.component.html
View File

@ -1,9 +1 @@
<div class="button-row">
<!--pick a year-->
<button mat-raised-button *ngFor="let poule of poules" routerLink="./poule/{{poule}}" routerLinkActive="active">
Poule {{poule}}
</button>
</div>
<router-outlet></router-outlet>
TIER TEST

7
src/app/content/tier/tier.component.scss
View File

@ -9,10 +9,3 @@ app-poule {
display: grid;
}
button.active {
background-color: #1dd21d;
}
.button-row {
text-align: center;
margin-top: 10px;
}

6
src/app/content/tier/tier.component.ts
View File

@ -3,6 +3,7 @@ import {ActivatedRoute, ParamMap} from '@angular/router';
import {ChampionshipService} from '../../championship.service';
import {combineLatest} from 'rxjs';
import {map} from 'rxjs/operators';
import {TopmenuService} from '../../topmenu.service';
@Component({
selector: 'app-tier',
@ -15,7 +16,7 @@ export class TierComponent implements OnInit {
protected poules: number[] = [];
protected idChampionship: number;
constructor(private route: ActivatedRoute, private championshipService: ChampionshipService) {
constructor(private route: ActivatedRoute, private championshipService: ChampionshipService, private topmenuService: TopmenuService) {
// we need the current championship and we need the current tier... combine them
combineLatest(
@ -25,11 +26,14 @@ export class TierComponent implements OnInit {
// now we have both, or one of them changed...
if (tier && idChampionship) {
this.tier = tier;
this.topmenuService.setTier(tier);
this.topmenuService.setPoule(null);
this.idChampionship = idChampionship;
console.log('refreshing tier/championship combo: '+this.tier+' '+this.idChampionship);
// ... load the corresponding poules
this.championshipService.getPoules(tier, idChampionship).subscribe(poules => {
this.poules = poules;
this.topmenuService.setPoules(poules);
console.log(this.poules);
});
}

9
src/app/topmenu/topmenu.component.html
View File

@ -3,8 +3,15 @@
<button mat-raised-button (click)="openDialog()">
{{currentChampionship()}}
</button>
<button mat-raised-button color="primary" *ngFor="let tier of tiers" routerLink="/championship/20/tier/{{tier}}">
<button mat-raised-button color="primary" *ngFor="let tier of tiers" routerLink="/championship/{{currentChampionshipId()}}/tier/{{tier}}">
<mat-icon svgIcon="{{getTierIcon(tier)}}"></mat-icon>
{{getTierName(tier)}}
</button>
</div>
<div class="button-row">
<!--pick a year-->
<button mat-raised-button *ngFor="let poule of (poules|async)" routerLink="/championship/{{currentChampionshipId()}}/tier/{{tier | async}}/poule/{{poule}}"
[ngClass]="{'active': pouleActive(poule)}">
Poule {{poule}}
</button>
</div>

3
src/app/topmenu/topmenu.component.scss
View File

@ -2,3 +2,6 @@
text-align: center;
margin-top: 10px;
}
button.active {
background-color: #1dd21d;
}

25
src/app/topmenu/topmenu.component.ts
View File

@ -4,6 +4,7 @@ import {ActivatedRoute, Router} from '@angular/router';
import {ChampionshipselectordialogComponent} from '../championshipselectordialog/championshipselectordialog.component';
import {MatDialog, MatIconRegistry} from '@angular/material';
import {DomSanitizer} from '@angular/platform-browser';
import {TopmenuService} from '../topmenu.service';
@Component({
selector: 'app-topmenu',
@ -20,7 +21,8 @@ export class TopmenuComponent implements OnInit {
private router: Router,
public dialog: MatDialog,
private matIconRegistry: MatIconRegistry,
private domSanitizer: DomSanitizer) {
private domSanitizer: DomSanitizer,
private topmenuService: TopmenuService) {
this.matIconRegistry.addSvgIcon(`stroller`, this.domSanitizer.bypassSecurityTrustResourceUrl('assets/svg/stroller.svg'));
this.matIconRegistry.addSvgIcon(`car-color`, this.domSanitizer.bypassSecurityTrustResourceUrl('assets/svg/car-color.svg'));
this.matIconRegistry.addSvgIcon(`delivery-bike`, this.domSanitizer.bypassSecurityTrustResourceUrl('assets/svg/deliverybike.svg'));
@ -33,6 +35,14 @@ export class TopmenuComponent implements OnInit {
});
}
get poules() {
return this.topmenuService.poules$;
}
get tier() {
return this.topmenuService.tier$;
}
currentChampionship(): string {
const currentChampionship = this.championshipService.getCurrentChampionship();
if (currentChampionship) {
@ -42,6 +52,15 @@ export class TopmenuComponent implements OnInit {
}
}
currentChampionshipId(): number {
const currentChampionship = this.championshipService.getCurrentChampionship();
if (currentChampionship) {
return currentChampionship.idchampionship;
} else {
return -1;
}
}
openDialog(): void {
const dialogRef = this.dialog.open(ChampionshipselectordialogComponent, {
width: '500px',
@ -87,4 +106,8 @@ export class TopmenuComponent implements OnInit {
return 'tier' + tier;
}
}
pouleActive(poule): boolean {
return this.topmenuService.poule$.value == poule;
}
}