Allow to filter for my scores #33

src/app/changelog/changelog.component.ts

@@ -7,7 +7,8 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ChangelogComponent implements OnInit {
   changes = [
-    "1.0.49;Highscores können nun nach Zeiteinheiten gefiltert werden. Standardmäßig werden nur die Highscores der letzten Woche angezeigt.",
+    "1.0.51;Highscores können nun nach 'meinen' Highscores gefiltert werden.",
+    "1.0.50;Highscores können nun nach Zeiteinheiten gefiltert werden. Standardmäßig werden nur die Highscores der letzten Woche angezeigt.",
     "1.0.48;Eigene Highscores werden markiert, wenn ein Name eingetragen wurde.",
     "1.0.47;Ladebalken wird nun angezeigt, wenn Highscores noch nicht geladen wurden",
     "1.0.46;Die Eingabe von Namen wurde auf 20 Zeichen beschränkt;Highscorese können nicht mehr mehrfach abgesendet werden;Leere Namen können nicht mehr eingetragen werden",

src/app/highscores/highscores.component.html

@@ -1,6 +1,8 @@
 <h1>HighScores {{filterName}}</h1>
 <button mat-raised-button color="primary" [routerLink]="['/spiel']" class="start-button">Spielen!</button>
 <br/>
+<mat-slide-toggle [checked]="onlyMyScores" color="primary" (change)="showOnlyMyScores()">Nur meine Scores anzeigen</mat-slide-toggle>
+<br/>
 <mat-button-toggle-group name="filter" aria-label="Filter" [ngModel]="filter" (ngModelChange)="setFilter($event)">
   <mat-button-toggle value="all">Alle</mat-button-toggle>
   <mat-button-toggle value="year">Jahr</mat-button-toggle>

src/app/highscores/highscores.component.scss

@@ -50,6 +50,7 @@ em {
 .my-score {
   background-color: #f57f0b;
 }
-mat-button-toggle-group {
+mat-button-toggle-group,
+mat-slide-toggle {
   margin: 10px;
 }

src/app/highscores/highscores.component.ts

@@ -17,6 +17,7 @@ export class HighscoresComponent implements OnInit {
   name: string = '';
   filter: String = 'week';
   filterName: String = 'der Woche';
+  onlyMyScores: boolean = false;
   constructor(
     private backend: BackendService,
     private highscoreService: HighscoreService,
@@ -40,6 +41,15 @@ export class HighscoresComponent implements OnInit {
     });
   }
 
+  showOnlyMyScores() {
+    this.onlyMyScores = !this.onlyMyScores;
+    if (this.onlyMyScores) {
+      this.highscores = this.highscores.filter(score => score.username === this.name);
+    } else {
+      this.loadHighscores(this.filter);
+    }
+  }
+
   ngOnInit(): void {
     this.bgm.theme();
   }