Dark theme kite dashboard (#28)

* styles : Change the kite dashboard theme to dark theme

* feat: Create my record card in leaderboard

* feat: Create search bar for kite  dashboard

* chore: remove unwanted  cards in dashboard

* feat: create new dashboard cards

* styles: updated dashboard cards and theme and add new fonts

* styles: add new font

* chore: remove unwanted  dashboard cards

* feat: create new loading screen and shared service

* styles: updated dashboard components

* fix: change  the  displyed message in my-record card

angular.json

@@ -36,7 +36,10 @@
               "node_modules/nebular-icons/scss/nebular-icons.scss",
               "node_modules/pace-js/templates/pace-theme-flash.tmpl.css",
               "node_modules/leaflet/dist/leaflet.css",
-              "src/app/@theme/styles/styles.scss"
+              "src/app/@theme/styles/styles.scss",
+              "node_modules/@angular/material/prebuilt-themes/purple-green.css"
+
+
             ],
             "scripts": [
               "node_modules/pace-js/pace.min.js"

package.json

@@ -72,8 +72,10 @@
     "pace-js": "1.0.2",
     "roboto-fontface": "0.8.0",
     "rxjs": "^6.6.7",
+    "sass-loader": "^16.0.0",
     "socicon": "3.0.5",
     "style-loader": "^1.3.0",
+    "swiper": "9.4.x",
     "tslib": "^2.3.1",
     "typeface-exo": "0.0.22",
     "web-animations-js": "^2.3.2",

src/app/@components/leaderboard/best-player/best-player.component.html

@@ -1,6 +1,6 @@
 <div class="best-player-container">
   <div class="best-place-div">
-    <h2><i class="fas fa-crown" style="color: rgb(188, 196, 27);"></i></h2>
+    <h2><i class="fas fa-crown" style="color: gold;"></i></h2>
   </div>
   <div (click)="goToPlayerIntroduction(bestPlayer)" style="cursor: pointer;">
     <div class="best-img-circle">

src/app/@components/leaderboard/best-player/best-player.component.scss

@@ -14,11 +14,11 @@
 .best-img-circle {
   width: 120px;
   height: 120px;
-  border: 5px solid rgb(188, 196, 27);
+  border: 5px solid #FFD54F;
   border-radius: 50%;
   overflow: hidden;
   display: flex;
-  background-color:rgb(188, 196, 27) ;
+  background-color:#FFD54F ;
 
   // background:radial-gradient(var(rgb(188, 196, 27)),transparent,transparent);
   // background:radial-gradient(var(rgb(188, 196, 27)),transparent,transparent);
@@ -70,7 +70,7 @@
   flex-direction: column;
   font-size: 16px;
   font-weight: bolder;
-  color: rgb(219, 156, 11);
+  color: #FFD54F ;
 
 }
 

src/app/@components/leaderboard/best-player/best-player.component.ts

@@ -13,13 +13,7 @@ export class BestPlayerComponent {
     constructor(private router: Router) {}
 
     goToPlayerIntroduction(player: Player) {
-        this.router.navigate(['/kite/player', player.id ,
-            {
-                state: {
-                    player,
-                },
-            },
-        ]);
+        this.router.navigate(['/kite/player', player.id ]);
     }
 
     getImageUrl(imgUrl: string): string {

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

@@ -8,7 +8,15 @@ export interface Player {
 }
 
 export interface TotalKiteData {
-    all_time: {
+    player: {
+        name: string;
+        city: string;
+        rank: number;
+        img_url: string;
+        user_id: string;
+    };
+    stat: { all_time: {
+        max_height: number;
         total_height: number;
         total_attempts: number;
         total_flying_mins: number;
@@ -20,5 +28,56 @@ export interface TotalKiteData {
         max_height: number;
         min_height: number;
     };
+    };
+}
+
+export interface AgeGroupData{
+    total_kite_players: number;
+    total_attempts: number;
+    age_group: string;
+}
+
+export interface DistrictData{
+    total_players: number;
+    total_attempts: number;
+    nearest_district: string;
+}
+
+
+
+export interface KitePlayer {
+    _id: string;
+    name: string;
+    birthday: string;
+    user_id: string;
+    coordinates: {
+        latitude: number;
+        longitude: number;
+    };
+    city: string;
+    nearest_city: string;
+    nearest_district: string;
+    img_url: string;
+    isBot: boolean;
+    createdAt: string;
+    updatedAt: string;
+    __v: number;
+}
+
+export interface Attempt {
+    attempt_timestamp: string;
+    height: number;
+}
+
+export interface PlayerData {
+    kitePlayer: KitePlayer;
+    attempts: Attempt[];
+}
+
+export interface AttemptData {
+    data: {
+        timestamp: string;
+        height: number;
+    }[];
 }