Merge pull request #29 from gaveshalabs/updated-new-dark-theme-dashboard

Updated new dark theme dashboard

src/app/@components/leaderboard/leaderboard.interface.ts

@@ -14,6 +14,7 @@ export interface TotalKiteData {
         rank: number;
         img_url: string;
         user_id: string;
+        id: string;
     };
     stat: { all_time: {
         max_height: number;

src/app/@components/leaderboard/leaderboard/leaderboard.component.html

@@ -7,15 +7,15 @@ <h2>Leaderboard</h2>
     <div class="leaderboard-top-3">
       <div class="second-div">
         <ngx-top-players *ngIf="topPlayers.length >= 2" [topPlayer]="topPlayers[1]"
-          (click)="selectTopPlayer(topPlayers[1])"></ngx-top-players>
+          (click)="selectTopPlayer(topPlayers[1]);$event.stopPropagation()"></ngx-top-players>
       </div>
       <div class="first-div">
         <ngx-best-player *ngIf="bestPlayer" [bestPlayer]="bestPlayer"
-          (click)="selectTopPlayer(bestPlayer)"></ngx-best-player>
+          (click)="selectTopPlayer(bestPlayer);$event.stopPropagation()"></ngx-best-player>
       </div>
       <div class="third-div">
         <ngx-top-players *ngIf="topPlayers.length >= 3" [topPlayer]="topPlayers[2]"
-          (click)="selectTopPlayer(topPlayers[2])"></ngx-top-players>
+          (click)="selectTopPlayer(topPlayers[2]);$event.stopPropagation()"></ngx-top-players>
       </div>
     </div>
     <div *ngIf="topPlayers.length == 0" class="no-players-text">

src/app/@components/leaderboard/leaderboard/leaderboard.component.ts

@@ -4,6 +4,7 @@ import { Player } from '../leaderboard.interface';
 import { KiteApiService } from '../../../pages/kite-competition/kite/kite-api.service';
 import { SharedDataService } from '../../../services/shared-data.service';
 import { PlayersComponent } from '../players/players.component';
+import { LoaderService } from '../../../@theme/components/loader/loader.service';
 
 
 @Component({
@@ -19,17 +20,19 @@ export class KiteLeaderboardComponent implements OnInit {
     remainingPlayers: Player[] = [];
     combinedPlayers: Player[] = []; // Combined list of top and remaining players
 
-    constructor(private router: Router,
+    constructor(
+        private router: Router,
         private kiteApiService: KiteApiService,
         private sharedDataService: SharedDataService,
-
-    ) { }
+        private loaderService: LoaderService,
+    ) {}
 
     ngOnInit(): void {
         this.loadLeaderboard();
     }
 
     loadLeaderboard() {
+        this.loaderService.show();
         this.kiteApiService.getPlayersLeaderboard().subscribe(
             (data) => {
                 // Sort players by kite height in descending order
@@ -64,38 +67,42 @@ export class KiteLeaderboardComponent implements OnInit {
             },
             (error) => {
                 console.error('Error fetching leaderboard:', error);
+            },
+            () => {
+                this.loaderService.hide();
             }
         );
     }
     navigateToAllPlayers() {
         this.router.navigate(['/kite/player/all']);
     }
 
-    // selectTopPlayer(player: Player) {
-    //     if (this.playersComponent) {
-    //         this.playersComponent.clearHoverAndActiveState();
-    //     }
-    //     this.router.navigate(['/kite/player', player.id], {
-    //         state: {
-    //             player,
-    //         },
-    //     });
-    // }
-
     selectTopPlayer(player: Player) {
         if (this.playersComponent) {
             this.playersComponent.clearHoverAndActiveState();
         }
-
-        // Clear the activePlayerId from local storage
-        localStorage.removeItem('activePlayerId');
-
         this.router.navigate(['/kite/player', player.id], {
             state: {
                 player,
             },
         });
     }
 
+    // selectTopPlayer(player: Player) {
+    //     if (this.playersComponent) {
+    //         this.playersComponent.clearHoverAndActiveState();
+    //     }
+
+    //     // Clear the activePlayerId from local storage
+    //     localStorage.removeItem('activePlayerId');
+
+    //     this.router.navigate(['/kite/player', player.id], {
+    //         state: {
+    //             player,
+    //         },
+    //     });
+    // }
+
 }
 
+

src/app/@components/leaderboard/my-records/my-records.component.ts

@@ -1,10 +1,11 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { KiteApiService } from '../../../pages/kite-competition/kite/kite-api.service';
 import { Router } from '@angular/router';
-import { KitePlayer } from '../leaderboard.interface';
+import { TotalKiteData } from '../leaderboard.interface';
 import { OAuth2Service } from '../../../modules/oauth2/oauth2.service';
 import { UserProfile } from '../../../common/interfaces/user.interface';
 import { Subscription } from 'rxjs';
+import { LoaderService } from '../../../@theme/components/loader/loader.service';
 
 @Component({
     selector: 'ngx-myrecords',
@@ -13,29 +14,27 @@ import { Subscription } from 'rxjs';
 })
 export class MyRecordsComponent implements OnInit, OnDestroy {
 
-    playerData: any; // Adjust to your specific type
+    playerData: TotalKiteData | null = null;
     errorMessage: string | null = null;
     userSubscription: Subscription | null = null;
 
     constructor(
         private kiteApiService: KiteApiService,
         private router: Router,
         private oAuth2Service: OAuth2Service,
+        private loaderService: LoaderService
     ) {}
 
     ngOnInit(): void {
         // Subscribe to user changes
         this.userSubscription = this.oAuth2Service.getUser().subscribe(userProfile => {
             if (userProfile && userProfile._id) {
-                this.fetchUserData(userProfile._id);
+                this.checkLocalStorageAndFetchData(userProfile._id);
             } else {
                 this.errorMessage = 'ඔයාගේ විස්තර බලන්න මුලින්ම Sign In වෙන්න';
                 this.playerData = null;
             }
         });
-
-        // Initial check in case the user is already logged in when the component is initialized
-        this.checkLocalStorageAndFetchData();
     }
 
     private getUserIdFromLocalStorage(): string | null {
@@ -47,16 +46,17 @@ export class MyRecordsComponent implements OnInit, OnDestroy {
         return null;
     }
 
-    checkLocalStorageAndFetchData(): void {
-        const userId = this.getUserIdFromLocalStorage();
-        if (userId) {
-            this.fetchUserData(userId);
+    checkLocalStorageAndFetchData(userId?: string): void {
+        const storedUserId = userId || this.getUserIdFromLocalStorage();
+        if (storedUserId) {
+            this.fetchUserData(storedUserId);
         } else {
             this.errorMessage = 'ඔයාගේ විස්තර බලන්න මුලින්ම Sign In වෙන්න';
         }
     }
 
     fetchUserData(userId: string): void {
+        this.loaderService.show();
         this.kiteApiService.getLatestUserData(userId).subscribe(
             (data) => {
                 this.playerData = data;
@@ -71,28 +71,19 @@ export class MyRecordsComponent implements OnInit, OnDestroy {
                 console.error('Error fetching user data', error);
                 this.errorMessage = 'සරුංගල් මේනියා සමඟ ලියාපදිංචි වී \
                     නෙළුම් කුළුණට වඩා උඩින් සරුංගල් යවන්න ඔයත් එකතු වෙන්න';
+            },
+            () => {
+                this.loaderService.hide();
             }
         );
     }
 
     onCardClick(): void {
-        const userId = this.getUserIdFromLocalStorage();
-        if (userId) {
-            this.kiteApiService.getKitePlayerByUserId(userId).subscribe(
-                (playerData: KitePlayer) => {
-                    if (playerData && playerData._id) {
-                        const playerId = playerData._id;
-                        this.router.navigate([`/kite/player/${playerId}`]);
-                    } else {
-                        console.log('No player ID found. Not navigating.');
-                    }
-                },
-                (error) => {
-                    console.error('Error fetching player data by user ID', error);
-                }
-            );
+        if (this.playerData && this.playerData.player && this.playerData.player.id) {
+            const playerId = this.playerData.player.id;
+            this.router.navigate([`/kite/player/${playerId}`]);
         } else {
-            console.log('No user ID found in local storage. Not navigating.');
+            console.log('Player data not found or player ID missing. Not navigating.');
         }
     }
 
@@ -103,3 +94,5 @@ export class MyRecordsComponent implements OnInit, OnDestroy {
         }
     }
 }
+
+

src/app/@theme/components/loader/loader.component.html

@@ -1,6 +1,5 @@
-<div class="progress-loader" *ngIf="loading">
-  <mat-progress-spinner [mode]="'indeterminate'">
-  </mat-progress-spinner>
+<div class="progress-loader" *ngIf="loading" [ngClass]="{'loader-dark': isDarkTheme, 'loader-light': !isDarkTheme}">
+  <mat-spinner ></mat-spinner>
 </div>
 
 

src/app/@theme/components/loader/loader.component.scss

@@ -1,17 +1,19 @@
 .progress-loader{
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
   display: flex;
   justify-content: center;
-  position: fixed;
-  inset: 0;
   align-items: center;
-  z-index: 999;
-  background-color: rgba(0,0,0,0.3);
+  z-index: 1000;
+ }
+
+ .loader-dark {
+  background-color: rgb(34, 43, 69); 
 }
 
-.mat-mdc-progress-spinner circle {
-  stroke: #665b7d;
+.loader-light {
+  background-color:#bbdefb; 
 }
-
-
-
-

src/app/@theme/components/loader/loader.component.ts

@@ -1,6 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { LoaderService, LoaderState } from './loader.service';
+import { Router, NavigationEnd } from '@angular/router';
+import { filter } from 'rxjs/operators';
 
 @Component({
     selector: 'ngx-loader',
@@ -10,15 +12,30 @@ import { LoaderService, LoaderState } from './loader.service';
 export class LoaderComponent implements OnInit {
     loading = false;
     private subscription: Subscription;
+    isDarkTheme: boolean = false;
 
-    constructor(loaderService: LoaderService) {
+
+    private checkRoute(): void {
+        const currentRoute = this.router.url;
+        this.isDarkTheme = currentRoute.startsWith('/kite');
+    }
+
+    constructor(loaderService: LoaderService,
+        private router: Router,
+    ) {
         this.subscription = loaderService.loaderState
             .subscribe((state: LoaderState) => {
                 this.loading = state.show;
             });
     }
 
     ngOnInit(): void {
+        this.router.events.pipe(
+            filter(event => event instanceof NavigationEnd)
+        ).subscribe(() => {
+            this.checkRoute();
+        });
+        this.checkRoute();
     }
 
 }

src/app/@theme/theme.module.ts

@@ -37,7 +37,6 @@ import { FormsModule } from '@angular/forms';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatInputModule } from '@angular/material/input';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import { LoadingSpinnerComponent } from './components/loading-spinner/loading-spinner.component';
 
 
 const palette = {
@@ -114,7 +113,6 @@ const COMPONENTS = [
     WeatherPortalLayoutComponent,
     LoaderComponent,
     KiteSearchComponent,
-    LoadingSpinnerComponent,
 ];
 const PIPES = [
     CapitalizePipe,