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

reworked the poule tables... my god.

Browse Source
This commit is contained in:
Joachim 2018-09-01 21:37:40 +02:00
parent 8f8a1906bd
commit 9e8f3f8c71
4 changed files with 119 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,25 +1,85 @@
<div class="poule-card">
<div class="poule-title">
Poule {{poule}}
</div>
<table>
<tr>
<td>Team</td>
<ng-container *ngFor="let y of ' '.repeat(maxRaces).split(''), let x = index">
<td>Race {{x+1}}</td>
<!--<div class="poule-card">-->
<!--<div class="poule-title">-->
<!--Poule {{poule}}-->
<!--</div>-->
<!--<table>-->
<!--&lt;!&ndash;headers &ndash;&gt;-->
<!--<tr>-->
<!--<td>Team</td>-->
<!--<ng-container *ngFor="let y of ' '.repeat(maxRaces).split(''), let x = index">-->
<!--<td>Race {{x+1}}</td>-->
<!--</ng-container>-->
<!--<td>Gem. beste 2</td>-->
<!--</tr>-->
<!--<tr *ngFor="let team of teams">-->
<!--<td>{{team.name}}</td>-->
<!--&lt;!&ndash;cheap trick to iterate from 0 to maxraces&ndash;&gt;-->
<!--<ng-container *ngFor="let y of ' '.repeat(maxRaces).split(''), let x = index">-->
<!--<td class="timetd">-->
<!--<p class="time" *ngFor="let time of getLapTimes(x, team.idteam)">{{time/1000| number:'1.2-2'}}s</p>-->
<!--<p class="penaltyrow">{{getPenaltySum(x, team.idteam)}}</p>-->
<!--<p class="racetimetotal">{{getRaceTime(x, team.idteam)/1000 | number:'1.2-2'}}s</p>-->
<!--</td>-->
<!--</ng-container>-->
<!--<td>{{getAvgOfBestTwo(team.idteam)/1000 | number:'1.2-2'}}s</td>-->
<!--</tr>-->
<!--</table>-->
<!--</div>-->
<div class="poule-header">Poule {{poule}}</div>
<div class="total-poule" style="display: grid">
<!--top level header: race + race 1 + race 2 + ... + penalty + total + result-->
<div class="toplevelheader" style="grid-column: 1; grid-row : 1">race</div>
<ng-container *ngFor="let y of ' '.repeat(maxLaps).split(''), let lapindex = index">
<div class="toplevelheader" [ngStyle]="{'grid-column': (1+lapindex+1), 'grid-row' : 1}">lap {{lapindex+1}}</div>
</ng-container>
<div class="toplevelheader" [ngStyle]="{'grid-column': maxLaps+2, 'grid-row' : 1}">penalty</div>
<div class="toplevelheader" [ngStyle]="{'grid-column': maxLaps+3, 'grid-row' : 1}">total</div>
<div class="toplevelheader" [ngStyle]="{'grid-column': maxLaps+4, 'grid-row' : 1}">result</div>
<!--start looping over teams, make a block for each-->
<ng-container *ngFor="let team of teams; let teamindex = index">
<!--first multi row spanning cell: the team name -->
<div class="teamname"
[ngStyle]="{'grid-row':2+(teamindex*(maxRaces+1)), 'grid-column-start':2, 'grid-column-end': 2+maxRaces+1}">
{{team.name}}
</div>
<!--all the team contents: for each race a line -->
<ng-container *ngFor="let y of ' '.repeat(maxRaces).split(''), let raceindex = index">
<!--also loop over laps: then we're in the right cell-->
<ng-container *ngFor="let z of ' '.repeat(maxLaps).split(''), let lapindex = index">
<!--add the time -->
<div [ngStyle]="{'grid-column':lapindex+2, 'grid-row':2+(teamindex*(maxRaces+1))+raceindex+1}">
<span class="timecell">{{getLapTime(team.idteam, raceindex, lapindex)/1000 | number:'1.2-2'}}</span>
</div>
</ng-container>
<td>Gem. beste 2</td>
</tr>
<tr *ngFor="let team of teams">
<td>{{team.name}}</td>
<ng-container *ngFor="let y of ' '.repeat(maxRaces).split(''), let x = index">
<td class="timetd">
<p class="time" *ngFor="let time of getLapTimes(x, team.idteam)">{{time/1000| number:'1.2-2'}}s</p>
<p class="racetimetotal">{{getRaceTime(x, team.idteam)/1000 | number:'1.2-2'}}s</p>
</td>
</ng-container>
<td>{{getAvgOfBestTwo(team.idteam)/1000 | number:'1.2-2'}}s</td>
</tr>
</table>
<!--add a race header-->
<div class="lapheader" [ngStyle]="{'grid-column':1, 'grid-row':2+(teamindex*(maxRaces+1))+raceindex+1}">
<span class="timecell">Race {{raceindex+1}}</span>
</div>
<!--do a penalty for this race/team combo-->
<div class="penaltycell" [ngStyle]="{'grid-column':maxLaps+2, 'grid-row':2+(teamindex*(maxRaces+1))+raceindex+1}">
<span class="timecell">{{getPenaltySum(raceindex, team.idteam)/1000 | number:'1.2-2'}}</span>
</div>
<div class="totalcell" [ngStyle]="{'grid-column':maxLaps+3, 'grid-row':2+(teamindex*(maxRaces+1))+raceindex+1}">
<span class="timecell">{{getRaceTime(raceindex, team.idteam)/1000 | number:'1.2-2'}}</span>
</div>
</ng-container>
<!--this only has to be added once for each team...-->
<div class="resultcell" [ngStyle]="{'grid-column':maxLaps+4,
'grid-row-start':2+(teamindex*(maxRaces+1))+1,
'grid-row-end': 2+(teamindex*(maxRaces+1))+1+maxRaces}">
<span class="timecell">{{getAvgOfBestTwo(team.idteam)/1000 | number:'1.2-2'}}</span>
</div>
</ng-container>
</div>

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

@ -1,28 +1,21 @@
.time {
background-color: aquamarine;
margin: 2px;
}
.penaltycell {
transform: rotate(-90deg);
}
.penaltycell:after {
content: " s";
font-size: 80%;
}
.racetimetotal {
border-top: 1px solid black;
margin: 2px;
}
.poule-title {
.poule-header {
text-align: center;
border-bottom: darkgray 1px solid;
padding-bottom: 10px;
padding-top: 10px;
border-bottom: 1px solid darkgray;
margin-bottom: 10px;
margin-top: 10px;
}
.poule-card {
box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
.teamname {
margin-top: 15px;
margin-bottom: 5px;
font-size: 120%;
}
.toplevelheader {
font-size: 80%;
font-style: italic;
}
.timecell {
font-family: monospace;
}

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

@ -21,6 +21,7 @@ export class PouleComponent implements OnInit, OnChanges {
protected times: any[] = [];
protected maxRaces = 0;
private timesIndexed: {};
protected maxLaps = 0;
constructor(private championshipService: ChampionshipService) {
}
@ -48,24 +49,28 @@ export class PouleComponent implements OnInit, OnChanges {
// preprocess this array -> map idteam on the laptime array so we can index it using 0..n-1
this.timesIndexed = {};
this.maxLaps = 0;
this.times.forEach(t => {
if (!this.timesIndexed[t.idteam]) {
this.timesIndexed[t.idteam] = [];
}
this.timesIndexed[t.idteam].push({laptimesms: t.laptimesms, penaltysum: t.penaltysum});
if (t.laptimesms.length > this.maxLaps) {
this.maxLaps = t.laptimesms.length;
}
});
});
}
getPenaltySum(lapNr: number, idTeam: number) {
getPenaltySum(raceNr: number, idTeam: number) {
if (!this.timesIndexed
|| !this.timesIndexed[idTeam]
|| !this.timesIndexed[idTeam][lapNr]
|| !this.timesIndexed[idTeam][lapNr].penaltysum) {
return null;
|| !this.timesIndexed[idTeam][raceNr]
|| !this.timesIndexed[idTeam][raceNr].penaltysum) {
return 0;
}
const penaltysum = this.timesIndexed[idTeam][lapNr].penaltysum;
const penaltysum = this.timesIndexed[idTeam][raceNr].penaltysum;
if (!penaltysum) {
return 0;
}
@ -132,6 +137,15 @@ export class PouleComponent implements OnInit, OnChanges {
return this.timesIndexed[idTeam][raceNr].laptimesms;
}
getLapTime(idTeam: number, raceNr: number, lapNr: number) {
const lapTime = this.getLapTimes(raceNr, idTeam);
if (lapTime) {
return lapTime[lapNr];
} else {
return null;
}
}
ngOnChanges(changes: SimpleChanges): void {
this.loadData();
}

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

@ -2,6 +2,7 @@ app-poule {
margin: 10px;
grid-row: 1;
min-width: 470px;
box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
}
#poulecontainer {