Merge branch 'new-db-structure-convertion' of https://sinistea.pkmn.cloud/Quildra/OriginDex-FrontEnd into new-db-structure-convertion

src/app/app.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router';
+import { Router, RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatButtonModule } from '@angular/material/button';
 import { MatTabsModule } from '@angular/material/tabs';
@@ -24,42 +24,88 @@ import { PokemonService } from './core/services/pokemon.service';
     MatListModule
   ],
   template: `
-    <mat-toolbar color="primary">
-      <span>OriginDex</span>
-      <span class="spacer"></span>
-      <ng-container *ngIf="auth.isAuthenticated$ | async; else loginButtons">
+    <mat-toolbar color="primary" class="top-bar">
+      <div class="toolbar-left">
+        <span>OriginDex</span>
+      </div>
+
+      <div class="image-container">
+        <img
+          [src]="isRouteSelected('/storage-carousel') ? 'assets/images/poke_box_selected.png' : 'assets/images/poke_box.png'"
+          [routerLink]="['/storage-carousel']"
+          (mouseover)="hoveredRoute = '/storage-carousel'"
+          (mouseout)="hoveredRoute = ''"
+          class="top-bar-icon"
+        >
+        <img
+          [src]="isRouteSelected('/efficiency') ? 'assets/images/map_selected.png' : 'assets/images/map.png'"
+          [routerLink]="['/efficiency']"
+          (mouseover)="hoveredRoute = '/efficiency'"
+          (mouseout)="hoveredRoute = ''"
+          class="top-bar-icon"
+        >
+      </div>
+
+      <div class="toolbar-right" *ngIf="auth.isAuthenticated$ | async; else loginButtons">
         <span>Welcome, {{ auth.currentUser?.username }}!</span>
         <button mat-button (click)="auth.logout()">Logout</button>
-      </ng-container>
+      </div>
+
       <ng-template #loginButtons>
-        <button mat-button routerLink="/auth/login">Login</button>
-        <button mat-button routerLink="/auth/register">Register</button>
+        <div class="toolbar-right">
+          <button mat-button routerLink="/auth/login">Login</button>
+          <button mat-button routerLink="/auth/register">Register</button>
+        </div>
       </ng-template>
     </mat-toolbar>
 
-    <mat-sidenav-container class="content-container">
-      <mat-sidenav mode="side" opened>
-        <mat-nav-list>
-          <a mat-list-item routerLink="/storage-carousel" routerLinkActive="active">
-            Storage Carousel
-          </a>
-          <a mat-list-item routerLink="/efficiency" routerLinkActive="active">
-            Efficiency Plan
-          </a>
-        </mat-nav-list>
-      </mat-sidenav>
-      <mat-sidenav-content>
-        <div class="content">
-          <router-outlet></router-outlet>
-        </div>
-      </mat-sidenav-content>
-    </mat-sidenav-container>
+
+    <div class="content">
+      <router-outlet></router-outlet>
+    </div>
   `,
   styles: [`
-    .spacer {
-      flex: 1 1 auto;
+    .top-bar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+    }
+
+    .toolbar-left {
+      display: flex;
+      align-items: center;
+      flex: 1;
+    }
+
+    .image-container {
+      display: flex;
+      align-items: center;
+      gap: 16px; /* Space between images */
+      flex: 0;   /* Do not grow or shrink */
     }
 
+    .toolbar-right {
+      display: flex;
+      align-items: center;
+      gap: 8px;  /* Space between the welcome message and buttons */
+      flex: 1;
+      justify-content: flex-end;
+    }
+
+    .top-bar-icon {
+      cursor: pointer;
+      height: 48px; /* Adjust as needed */
+      width: auto;   /* Maintain aspect ratio */
+      transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth transition effect */
+    }
+
+    .top-bar-icon:hover {
+      transform: scale(1.1); /* Slightly enlarge the image on hover */
+    }
+
+
+
     mat-toolbar {
       margin-bottom: 0;
     }
@@ -75,7 +121,7 @@ import { PokemonService } from './core/services/pokemon.service';
     }
 
     .content {
-      height: 100%;
+      //height: 100%;
       overflow: auto;
     }
 
@@ -94,10 +140,16 @@ import { PokemonService } from './core/services/pokemon.service';
   `]
 })
 export class AppComponent {
+  hoveredRoute: string = '';
   constructor(
     public auth: AuthService,
-    public pokemonService: PokemonService
+    public pokemonService: PokemonService,
+    private router: Router
   ) {
     this.pokemonService.initializeCaughtPokemon();
   }
+
+  isRouteSelected(route: string): boolean {
+    return this.router.url === route || this.hoveredRoute === route;
+  }
 }

src/app/features/plan/plan-pokemon/plan-pokemon.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, Output, EventEmitter, ChangeDetectorRef } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ChangeDetectorRef, SimpleChanges } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatIconModule } from '@angular/material/icon';
@@ -45,8 +45,16 @@ interface PokemonStatusEvent {
           <div class="pokemon-info">
             <div class="pokemon-name">
               {{ this.representative_pokemon?.Name }}
-              <span *ngIf="this.representative_pokemon?.Form" class="form-name">
-                ({{ this.representative_pokemon?.Form }})
+              <span class="form-name">
+                <span *ngIf="this.pokemon_family?.Male">
+                  <img src="assets/images/Male_symbol_(fixed_width).svg" >: {{ this.pokemon_family.Male }}
+                </span>
+                <span *ngIf="this.pokemon_family?.Female">
+                <img src="assets/images/Venus_symbol_(fixed_width).svg" >: {{ this.pokemon_family.Female }}
+                </span>
+                <span *ngIf="this.pokemon_family?.Any">
+                <img src="assets/images/Male_and_female_sign.svg" >: {{ this.pokemon_family.Any }}
+                </span>
               </span>
             </div>
             
@@ -87,7 +95,6 @@ interface PokemonStatusEvent {
                   </div>
                   <mat-chip-listbox>
                     <mat-chip>Method _PLACEDHOLDER_</mat-chip>
-                    <mat-chip color="primary" selected>Need: {{ 1 }}</mat-chip>
                   </mat-chip-listbox>
                 </div>
               </div>
@@ -118,7 +125,6 @@ interface PokemonStatusEvent {
                   </div>
                   <mat-chip-listbox>
                     <mat-chip>Breed</mat-chip>
-                    <mat-chip color="primary" selected>Need: {{ 1 }}</mat-chip>
                   </mat-chip-listbox>
                 </div>
               </div>
@@ -266,6 +272,11 @@ export class PlanPokemonComponent {
   ) {}
 
   ngOnInit() {
+    this.representative_pokemon = null;
+    this.evolve_to = []
+    this.breed_for = []
+    this.cdr.detectChanges();
+
     this.pokemonService.getPokemonFromPFIC(this.pokemon_family.representative).subscribe({
       next: (pokemon) => {
         this.representative_pokemon = pokemon
@@ -303,7 +314,68 @@ export class PlanPokemonComponent {
         }
       });
     }
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['pokemon_family']) {
+      const currentFamily = changes['pokemon_family'].currentValue;
+      const previousFamily = changes['pokemon_family'].previousValue;
+
+      // Check if there's a meaningful change
+      if (currentFamily && currentFamily !== previousFamily) {
+        // Your logic here, e.g., re-fetch data or reset states
+        this.handlePokemonFamilyChange(currentFamily);
+      }
+    }
+  }
+
+  private handlePokemonFamilyChange(newFamily: PokemonFamilyEntry) {
+    // This function contains logic to handle the input change.
+    // For example, resetting component states or fetching additional data.
+    console.log('Pokemon family has changed:', newFamily);
+
+    this.representative_pokemon = null;
+    this.evolve_to = []
+    this.breed_for = []
+    this.cdr.detectChanges();
+
+    this.pokemonService.getPokemonFromPFIC(this.pokemon_family.representative).subscribe({
+      next: (pokemon) => {
+        this.representative_pokemon = pokemon
+      },
+      error: (error) => {
+        console.error('Error loading Pokemon:', error);
+        this.cdr.markForCheck();
+      }
+    });
+
+    for(const target of this.pokemon_family.evolve_to) {
+      this.pokemonService.getPokemonFromPFIC(target).subscribe({
+        next: (pokemon) => {
+          if(pokemon) {
+            this.evolve_to.push(pokemon)
+          }
+        },
+        error: (error) => {
+          console.error('Error loading Pokemon:', error);
+          this.cdr.markForCheck();
+        }
+      });
+    }
 
+    for(const target of this.pokemon_family.breed_for) {
+      this.pokemonService.getPokemonFromPFIC(target).subscribe({
+        next: (pokemon) => {
+          if(pokemon) {
+            this.breed_for.push(pokemon)
+          }
+        },
+        error: (error) => {
+          console.error('Error loading Pokemon:', error);
+          this.cdr.markForCheck();
+        }
+      });
+    }
   }
 
   get hasTargets(): boolean {

src/app/features/plan/plan.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatCardModule } from '@angular/material/card';
 import { FormsModule } from '@angular/forms';
@@ -6,6 +6,7 @@ import { PlanGameComponent } from './plan-game/plan-game.component';
 import { PlanService } from '../../core/services/plan.service';
 import { GamePlan } from '../../core/models/plan.model';
 import { PlanPokemonComponent } from "./plan-pokemon/plan-pokemon.component";
+import { ScrollingModule, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 
 @Component({
   selector: 'app-plan',
@@ -15,7 +16,8 @@ import { PlanPokemonComponent } from "./plan-pokemon/plan-pokemon.component";
     MatCardModule,
     FormsModule,
     PlanGameComponent,
-    PlanPokemonComponent
+    PlanPokemonComponent,
+    ScrollingModule
 ],
   template: `
     <div class="plan-container">
@@ -34,13 +36,14 @@ import { PlanPokemonComponent } from "./plan-pokemon/plan-pokemon.component";
 
       <div class="pokemon-section" *ngIf="selectedGame">
         <h2>{{ selectedGame.game_name }} - Pokémon to Catch</h2>
-        <div class="pokemon-list">
-          <app-plan-pokemon
-            *ngFor="let pokemon of selectedGame.pokemon  | keyvalue"
-            [pokemon_family]="pokemon.value"
-            (statusUpdate)="onPokemonStatusUpdate($event)"
-          ></app-plan-pokemon>
-        </div>
+        <cdk-virtual-scroll-viewport [itemSize]="56" class="pokemon-viewport">
+          <div *cdkVirtualFor="let pokemon of selectedGame.pokemon | keyvalue; trackBy: trackByPfic">
+            <app-plan-pokemon
+              [pokemon_family]="pokemon.value"
+              (statusUpdate)="onPokemonStatusUpdate($event)"
+            ></app-plan-pokemon>
+          </div>
+        </cdk-virtual-scroll-viewport>
       </div>
     </div>
   `,
@@ -90,13 +93,23 @@ import { PlanPokemonComponent } from "./plan-pokemon/plan-pokemon.component";
       border-radius: 8px;
       margin-bottom: 20px;
     }
+    .pokemon-viewport {
+      flex: 1;
+      overflow-y: auto;
+      padding: 16px;
+      background: #f5f5f5;
+      border-radius: 8px;
+      margin-bottom: 20px;
+    }
   `]
 })
 export class PlanComponent implements OnInit {
+  @ViewChild(CdkVirtualScrollViewport) viewport!: CdkVirtualScrollViewport;
+  
   gamePlans: GamePlan[] = [];
   selectedGame: GamePlan | null = null;
 
-  constructor(private planService: PlanService) {}
+  constructor(private planService: PlanService, private cdr: ChangeDetectorRef) {}
 
   ngOnInit() {
     this.loadPlan();
@@ -114,10 +127,20 @@ export class PlanComponent implements OnInit {
   }
 
   selectGame(game: GamePlan) {
+    if (this.viewport) {
+      this.viewport.scrollToIndex(0); // Reset scroll to top when switching games
+    }
+    this.selectedGame = null; // Clear the selected game first to avoid stale data
+    this.cdr.detectChanges();
     this.selectedGame = game;
+    this.cdr.detectChanges();
   }
 
   onPokemonStatusUpdate(event: { pfic: string, caught: boolean }) {
     this.loadPlan();
   }
+
+  trackByPfic(index: number, item: any): string {
+    return item.key; // Assuming PFIC or another unique identifier is available
+  }
 }

src/assets/images/Male_and_female_sign.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path style="fill:none;stroke:#000;stroke-width:.60000002;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" transform="translate(-.877 -.75)" d="M6 11.75V8.5m-1.25 1.75h2.5m.517-6.017L10.25 1.75m-1.77 0h1.77v1.77M8.5 6c0-.69-.28-1.314-.733-1.767A2.502 2.502 0 0 0 3.5 6c0 1.379 1.121 2.5 2.5 2.5S8.5 7.379 8.5 6Z"/></svg>

src/assets/images/Male_symbol_(fixed_width).svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path style="fill:none;stroke:#000;stroke-width:.6;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" d="M7.28 7.22c0-.69-.28-1.315-.732-1.768A2.492 2.492 0 0 0 4.78 4.72a2.502 2.502 0 0 0-2.5 2.5 2.5 2.5 0 0 0 5 0zm.67-4.94h1.77v1.77M6.547 5.452l3.171-3.171"/></svg>

src/assets/images/Venus_symbol_(fixed_width).svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path style="fill:none;stroke:#000;stroke-width:.6;stroke-miterlimit:4;stroke-dasharray:none;stroke-linejoin:round;stroke-linecap:round" d="M6 11V7M4 9h4m1-5a3 3 0 0 1-3 3 3 3 0 0 1-3-3 3 3 0 0 1 3-3 3 3 0 0 1 3 3Z"/></svg>