Merge pull request #27 from gaveshalabs/dev

Fixes to Kite Dashboard styles

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

@@ -1,23 +1,26 @@
 <div class="kite-leaderboard-container">
   <div class="leaderboard-upper-part">
-      <div class="leaderboard-header">
-        <h2>Leaderboard</h2>
+    <div class="leaderboard-header">
+      <h2>Leaderboard</h2>
+    </div>
+    <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>
       </div>
-      <div class="leaderboard-top-3">
-        <div class="second-div">
-            <ngx-top-players *ngIf="topPlayers.length >= 2" [topPlayer]="topPlayers[1]"></ngx-top-players>
-        </div>
-        <div class="first-div">
-          <ngx-best-player *ngIf="bestPlayer" [bestPlayer]="bestPlayer"></ngx-best-player>
-        </div>
-        <div class="third-div">
-           <ngx-top-players *ngIf="topPlayers.length >= 2" [topPlayer]="topPlayers[2]"></ngx-top-players>
-        </div>
+      <div class="first-div">
+        <ngx-best-player *ngIf="bestPlayer" [bestPlayer]="bestPlayer"
+          (click)="selectTopPlayer(bestPlayer)"></ngx-best-player>
       </div>
-      <div *ngIf="topPlayers.length == 0" class="no-players-text">
-        <p>Leaderboard එකට එකතු වෙන පලවෙනි කෙනා ඔයා වෙන්න!</p>
-        <p>දැන්ම තරඟ කරන්න.</p>
+      <div class="third-div">
+        <ngx-top-players *ngIf="topPlayers.length >= 3" [topPlayer]="topPlayers[2]"
+          (click)="selectTopPlayer(topPlayers[2])"></ngx-top-players>
       </div>
+    </div>
+    <div *ngIf="topPlayers.length == 0" class="no-players-text">
+      <p>Leaderboard එකට එකතු වෙන පලවෙනි කෙනා ඔයා වෙන්න!</p>
+      <p>දැන්ම තරඟ කරන්න.</p>
+    </div>
   </div>
 
   <div class="leaderboard-below-part">
@@ -27,4 +30,4 @@ <h2>Leaderboard</h2>
       <p>දැන්ම තරඟ කරන්න.</p>
     </div>
   </div>
-</div>
+</div>

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

@@ -27,6 +27,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  height: auto;
 }
 
 .leaderboard-header {

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

@@ -1,14 +1,17 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { Router } from '@angular/router';
 import { Player } from '../leaderboard.interface';
 import { KiteApiService } from '../../../pages/kite-competition/kite/kite-api.service';
+import { PlayersComponent } from '../players/players.component';
 
 @Component({
     selector: 'ngx-kite-leaderboard',
     templateUrl: './leaderboard.component.html',
     styleUrls: ['./leaderboard.component.scss'],
 })
 export class KiteLeaderboardComponent implements OnInit {
+    @ViewChild(PlayersComponent) playersComponent: PlayersComponent; // Access PlayersComponent
+
     topPlayers: Player[] = [];
     bestPlayer: Player;
     remainingPlayers: Player[] = [];
@@ -22,22 +25,8 @@ export class KiteLeaderboardComponent implements OnInit {
     loadLeaderboard() {
         this.kiteApiService.getPlayersLeaderboard().subscribe(
             (data) => {
-                // data=[],
-                // Sort players by kite height in descending order
                 data.sort((a, b) => parseInt(b.kite_height, 10) - parseInt(a.kite_height, 10));
 
-                // const topTenPlayers = data.slice(0, 10);
-
-                // topTenPlayers.forEach((player, index) => {
-                //     if (index === 1) {
-                //         player.rank = '2nd';
-                //     } else if (index === 2) {
-                //         player.rank = '3rd';
-                //     } else {
-                //         player.rank = `${index + 1}`;
-                //     }
-                // });
-
                 data.forEach((player, index) => {
                     if (index === 1) {
                         player.rank = '2nd';
@@ -59,12 +48,18 @@ export class KiteLeaderboardComponent implements OnInit {
             },
             (error) => {
                 console.error('Error fetching leaderboard:', error);
-                // Handle error as needed, e.g., show error message
             }
         );
     }
 
-
+    selectTopPlayer(player: Player) {
+        if (this.playersComponent) {
+            this.playersComponent.clearHoverAndActiveState();
+        }
+        this.router.navigate(['/kite/player', player.id], {
+            state: {
+                player,
+            },
+        });
+    }
 }
-
-

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

@@ -1,8 +1,8 @@
- <mat-list>
+<mat-list>
   <div class="players-container" *ngFor="let player of players"
-       [class.active]="isActivePlayer(player)"
+       [class.active]="isActivePlayer(player) || hoverPlayer?.id === player.id"
        (mouseenter)="hoverPlayer = player"
-       (mouseleave)="hoverPlayer = activePlayerId === player.id ? player : null"
+       (mouseleave)="hoverPlayer = isActivePlayer(player) ? player : null"
        (click)="goToPlayerIntroduction(player)">
     <div class="rank-txt-div">
       <span>{{ player.rank }}</span>
@@ -19,4 +19,3 @@
     </mat-list-item>
   </div>
 </mat-list>
-

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

@@ -1,34 +1,80 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { Router, ActivatedRoute } from '@angular/router';
+import { Component, Input, OnInit, OnDestroy } from '@angular/core';
+import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
 import { Player } from '../leaderboard.interface';
+import { Subscription } from 'rxjs';
+import { filter } from 'rxjs/operators';
 
 @Component({
     selector: 'ngx-players',
     templateUrl: './players.component.html',
     styleUrls: ['./players.component.scss'],
 })
-export class PlayersComponent implements OnInit {
+export class PlayersComponent implements OnInit, OnDestroy {
     @Input() players: Player[] = [];
     hoverPlayer: Player | null = null;
     activePlayerId: string | null = null;
+    private routeSub: Subscription;
+    private routerSub: Subscription;
 
     constructor(private router: Router, private route: ActivatedRoute) {}
 
     ngOnInit() {
-        this.route.params.subscribe(params => {
-            this.activePlayerId = params['playerId'] || null;
-            this.setActivePlayerHover();
+        // Retrieve the activePlayerId from localStorage
+        this.activePlayerId = localStorage.getItem('activePlayerId');
+        this.setActivePlayerHover();
+
+        // Subscribe to route parameters
+        this.routeSub = this.route.params.subscribe(params => {
+            const playerId = params['playerId'];
+            if (playerId) {
+                this.activePlayerId = playerId;
+                localStorage.setItem('activePlayerId', playerId);
+                this.setActivePlayerHover();
+            }
         });
+
+        // Listen to router events to clear hover on navigation
+        this.routerSub = this.router.events
+            .pipe(filter(event => event instanceof NavigationEnd))
+            .subscribe(() => {
+                // If navigated to '/kite/player/all', clear activePlayerId
+                if (this.router.url === '/kite/player/all') {
+                    this.clearHoverState();
+                }
+            });
+    }
+
+    ngOnDestroy() {
+        // Unsubscribe to prevent memory leaks
+        if (this.routeSub) {
+            this.routeSub.unsubscribe();
+        }
+        if (this.routerSub) {
+            this.routerSub.unsubscribe();
+        }
     }
 
     setActivePlayerHover() {
         if (this.activePlayerId) {
             this.hoverPlayer = this.players.find(player => player.id === this.activePlayerId) || null;
+        } else {
+            this.hoverPlayer = null;
         }
     }
 
+    clearHoverState() {
+        this.activePlayerId = null;
+        this.hoverPlayer = null;
+        localStorage.removeItem('activePlayerId');
+    }
+
+    clearHoverAndActiveState() {
+        this.clearHoverState();
+    }
+
     activePlayer(player: Player) {
         this.activePlayerId = player.id;
+        localStorage.setItem('activePlayerId', player.id);
         // Clear hoverPlayer to ensure no lingering hover effects
         this.hoverPlayer = null;
     }
@@ -60,3 +106,7 @@ export class PlayersComponent implements OnInit {
     }
 }
 
+
+
+
+

src/app/pages/kite-competition/airtime-record/airtime-record.component.html

@@ -1,6 +1,6 @@
 <nb-card>
   <nb-card-body>
-    <h5>මුළු පියාසර  කාලය</h5>
+    <h6>මුළු පියාසර  කාලය</h6>
     <div class="today">
       <span class="today-temperature h1">{{ totalFlyingTime }}</span>
     </div>

src/app/pages/kite-competition/height-comparison/height-comparison.component.html

@@ -1,22 +1,32 @@
+
 <nb-card>
   <nb-card-body>
-    <h5>මුළු උස එකතුව</h5>
-    <div class="hvalue"><span>{{ accumulatedHeight }}</span></div>
+    <!-- Use Angular's ngIf directive to conditionally render the text -->
+    <h6>
+      <span *ngIf="isAllPlayersUrl; else youText">හැමෝම</span>
+      <ng-template #youText><span>ඔයා</span></ng-template> 
+      යවපු සරුංගල් වල මුළු උස <span class="mountword">පිදුරුතලාගල</span> පහු කරයිද?
+    </h6>
+
+    <span class="container">
+      <div class="hvalue">
+        <span class="danata-text">දැනට</span>{{ accumulatedHeight }}
+      </div>
+    </span>
+
     <div>
       <div class="compare-container">
-        <!-- <div class="compare-text">Compared to Everest</div> -->
-        <div class="compare-text">Compared to Lotus Tower</div>
         <span class="everest-height">{{ everestHeight }} m</span>
       </div>
     </div>
+
     <div class="bottom-content">
       <div class="left-half">
-        <img src="assets/images/kite-competition/nelum.png" alt="Mount Everest Image" class="everest-image">
+        <img src="assets/images/kite-competition/Everest.png" alt="Mount Everest Image" class="everest-image">
       </div>
       <div class="right-half">
         <div class="progress-container">
-          <div class="progress-bar" title="Lotus tower height is {{ everestHeight }} m">
-          <!-- <div class="progress-bar" title="Mount Everest height is {{ everestHeight }} m"> -->
+          <div class="progress-bar" title="Piduruthalagala Mountain height is {{ everestHeight }} m">
             <div class="progress" title="Total accumulated height is {{ kiteHeight }} m"></div>
           </div>
           <img src="assets/images/kite-competition/kite-marker-2.png" alt="Kite Image" class="kite-image">
@@ -25,3 +35,4 @@ <h5>මුළු උස එකතුව</h5>
     </div>
   </nb-card-body>
 </nb-card>
+