diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 241fbe9..2ec86e5 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -3,7 +3,7 @@ import {NgModule} from '@angular/core'; import {AppComponent} from './app.component'; import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; -import {MatButtonModule, MatCardModule, MatCheckboxModule, MatDialogModule, MatListModule} from '@angular/material'; +import {MatButtonModule, MatCardModule, MatCheckboxModule, MatDialogModule, MatIconModule, MatListModule} from '@angular/material'; import {TopmenuComponent} from './topmenu/topmenu.component'; import {ReclamespinnerComponent} from './reclamespinner/reclamespinner.component'; import {PouleComponent} from './content/poule/poule.component'; @@ -30,6 +30,7 @@ import { ChampionshipselectordialogComponent } from './championshipselectordialo BrowserAnimationsModule, HttpClientModule, MatButtonModule, + MatIconModule, MatCheckboxModule, MatListModule, MatCardModule, diff --git a/src/app/content/poule/poule.component.html b/src/app/content/poule/poule.component.html index 9675993..c2d630a 100644 --- a/src/app/content/poule/poule.component.html +++ b/src/app/content/poule/poule.component.html @@ -1,28 +1,25 @@ - - - - Poule {{poule}} - - - - - - - - - - - - - - - - - - -
TeamRace {{x+1}}Gem. beste 2
{{team.name}} -

{{time/1000| number:'1.2-2'}}s

-

{{getRaceTime(x, team.idteam)/1000 | number:'1.2-2'}}s

- 		{{getAvgOfBestTwo(team.idteam)/1000 | number:'1.2-2'}}s
- - +
+
+ Poule {{poule}} +
+ + + + + + + + + + + + + + + +
TeamRace {{x+1}}Gem. beste 2
{{team.name}} +

{{time/1000| number:'1.2-2'}}s

+

{{getRaceTime(x, team.idteam)/1000 | number:'1.2-2'}}s

+ 		{{getAvgOfBestTwo(team.idteam)/1000 | number:'1.2-2'}}s
+
+ diff --git a/src/app/content/poule/poule.component.scss b/src/app/content/poule/poule.component.scss index c6b5463..56c1758 100644 --- a/src/app/content/poule/poule.component.scss +++ b/src/app/content/poule/poule.component.scss @@ -15,3 +15,14 @@ border-top: 1px solid black; margin: 2px; } + +.poule-title { + text-align: center; + border-bottom: darkgray 1px solid; + padding-bottom: 10px; + padding-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); +} diff --git a/src/app/topmenu/topmenu.component.html b/src/app/topmenu/topmenu.component.html index 28855f2..18ee639 100644 --- a/src/app/topmenu/topmenu.component.html +++ b/src/app/topmenu/topmenu.component.html @@ -1,5 +1,10 @@
- - + +
diff --git a/src/app/topmenu/topmenu.component.ts b/src/app/topmenu/topmenu.component.ts index d36f4bc..d2372a2 100644 --- a/src/app/topmenu/topmenu.component.ts +++ b/src/app/topmenu/topmenu.component.ts @@ -2,7 +2,8 @@ import {Component, OnInit} from '@angular/core'; import {ChampionshipService} from '../championship.service'; import {ActivatedRoute, Router} from '@angular/router'; import {ChampionshipselectordialogComponent} from '../championshipselectordialog/championshipselectordialog.component'; -import {MatDialog} from '@angular/material'; +import {MatDialog, MatIconRegistry} from '@angular/material'; +import {DomSanitizer} from '@angular/platform-browser'; @Component({ selector: 'app-topmenu', @@ -16,7 +17,14 @@ export class TopmenuComponent implements OnInit { constructor(private championshipService: ChampionshipService, private route: ActivatedRoute, - private router: Router,public dialog: MatDialog) { + private router: Router, + public dialog: MatDialog, + private matIconRegistry: MatIconRegistry, + private domSanitizer: DomSanitizer) { + this.matIconRegistry.addSvgIcon(`stroller`, this.domSanitizer.bypassSecurityTrustResourceUrl('assets/stroller.svg')); + this.matIconRegistry.addSvgIcon(`car-color`, this.domSanitizer.bypassSecurityTrustResourceUrl('assets/car-color.svg')); + this.matIconRegistry.addSvgIcon(`delivery-bike`, this.domSanitizer.bypassSecurityTrustResourceUrl('assets/deliverybike.svg')); + this.matIconRegistry.addSvgIcon(`speed-car`, this.domSanitizer.bypassSecurityTrustResourceUrl('assets/speed-car.svg')); } ngOnInit() { @@ -45,4 +53,18 @@ export class TopmenuComponent implements OnInit { console.log(result); }); } + + getTierIcon(tier: number) { + if (tier === 1) { + return 'stroller'; + } else if (tier === 2) { + return 'delivery-bike'; + } else if (tier === 3) { + return 'car-color'; + } else if (tier === 4) { + return 'speed-car'; + } else { + return ''; + } + } } diff --git a/src/assets/car-color.svg b/src/assets/car-color.svg new file mode 100644 index 0000000..eec4b1e --- /dev/null +++ b/src/assets/car-color.svg @@ -0,0 +1,1371 @@ + + + + diff --git a/src/assets/deliverybike.svg b/src/assets/deliverybike.svg new file mode 100644 index 0000000..af9ce94 --- /dev/null +++ b/src/assets/deliverybike.svg @@ -0,0 +1,398 @@ + + + + diff --git a/src/assets/speed-car.svg b/src/assets/speed-car.svg new file mode 100644 index 0000000..81554d1 --- /dev/null +++ b/src/assets/speed-car.svg @@ -0,0 +1,910 @@ + + + + diff --git a/src/assets/stroller.svg b/src/assets/stroller.svg new file mode 100644 index 0000000..d3e1c37 --- /dev/null +++ b/src/assets/stroller.svg @@ -0,0 +1,80 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +