Update new endpoints urls and added spec selection when comparing bis

src/app/equipment/equipment.component.html

@@ -7,13 +7,23 @@ <h3>{{selectedChar.name}} -
     </div>
   </mat-toolbar>
   <mat-card-content>
-    @if (!hasCharacterLoaded) {
+    @if (!hasCharacterLoaded || loadingSpecialization) {
       <div class="ct-center ct-flex-column">
-        <mat-spinner color="primary" style="align-self: center"></mat-spinner>
+        <mat-spinner color="primary" style="align-self: center; margin: 1em"></mat-spinner>
       </div>
+    } @else {
+      <mat-form-field style="margin: 1em 0">
+        <mat-label>Specialization</mat-label>
+        <mat-select [(ngModel)]="selectedSpecialization" name="specialization"
+                    (selectionChange)="onSpecializationChange()">
+          @for (specialization of specializations; track specialization.id) {
+            <mat-option [value]="specialization.id">{{ specialization.name }}</mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
     }
 
-    <table [hidden] ="!hasCharacterLoaded"
+    <table [hidden] ="!hasCharacterLoaded || loadingSpecialization"
             mat-table
             [dataSource]="dataSource"
             matSort

src/app/equipment/equipment.component.ts

@@ -11,11 +11,14 @@ import {MatProgressSpinner} from "@angular/material/progress-spinner";
 import {MatIcon} from "@angular/material/icon";
 import {Character} from "../shared/character/character.models";
 import {MessagingService} from "../shared/messaging.service";
+import {MatFormField, MatLabel, MatOption, MatSelect, MatSelectChange} from "@angular/material/select";
+import {PlayableClassResponse, SpecResponse} from "../shared/api.models";
+import {FormsModule} from "@angular/forms";
 
 @Component({
   selector: 'app-equipment',
   standalone: true,
-  imports: [CommonModule, MatCard, MatToolbar, MatCardContent, MatProgressSpinner, MatIcon, MatTableModule, MatSortModule],
+  imports: [CommonModule, MatCard, MatToolbar, MatCardContent, MatProgressSpinner, MatIcon, MatTableModule, MatSortModule, MatFormField, MatLabel, MatOption, MatSelect, FormsModule ],
   templateUrl: './equipment.component.html',
   styleUrl: './equipment.component.scss'
 })
@@ -28,6 +31,9 @@ export class EquipmentComponent {
   selectedChar: Character | undefined;
   getItemLevelColor = SharedService.getItemLevelColor;
   getClassColor = SharedService.getClassColor;
+  protected specializations: Array<SpecResponse> | undefined;
+  protected loadingSpecialization: boolean = false;
+  protected selectedSpecialization: number = 0;
 
   constructor(private apiService: ApiService, private messagingService: MessagingService) {
 
@@ -39,33 +45,52 @@ export class EquipmentComponent {
     this.apiService.getCharacterById(id).subscribe({
       next: character => {
         this.selectedChar = character;
+        this.hasCharacterLoaded = true;
       },
       error: err => {
         this.messagingService.showError(err);
+        this.hasCharacterLoaded = true;
       }
     });
-    this.apiService.getEquipmentList(id, true).subscribe( {
-      next: equipmentResponse => {
-        let equipmentTableEntries: Array<EquipmentTableEntry> = equipmentResponse.equipments
-          .filter(equipmentResponse => equipmentResponse.slotType.indexOf("1") <= 0 && equipmentResponse.slotType.indexOf("2") <= 0)
-          .map(equipment => EquipmentTableEntry.from(equipment));
 
-        equipmentTableEntries = equipmentTableEntries.concat(EquipmentTableEntry.buildForSameSlotType(
-          equipmentResponse.equipments
+    this.loadingSpecialization = true;
+    if (this.selectedChar?.classId) {
+      this.loadingSpecialization = true;
+      this.apiService.getPlayableClassesById(this.selectedChar.classId).subscribe({
+        next: (response: PlayableClassResponse) => {
+          this.specializations = response.specializations.sort((a, b) => a.name.localeCompare(b.name));
+          this.loadingSpecialization = false;
+        }, error: (error) => {
+          console.error('Error fetching specializations', error);
+          this.loadingSpecialization = false;
+        }
+      });
+    }
+  }
+
+  onSpecializationChange() {
+    if (this.selectedChar && this.selectedChar.id) {
+      this.loadingSpecialization = true;
+      this.apiService.getEquipmentListWithBis(this.selectedChar.id, this.selectedSpecialization).subscribe({
+        next: equipmentResponse => {
+          let equipmentTableEntries: Array<EquipmentTableEntry> = equipmentResponse.equipments
+            .filter(equipmentResponse => equipmentResponse.slotType.indexOf("1") <= 0 && equipmentResponse.slotType.indexOf("2") <= 0)
+            .map(equipment => EquipmentTableEntry.from(equipment));
+
+          equipmentTableEntries = equipmentTableEntries.concat(EquipmentTableEntry.buildForSameSlotType(equipmentResponse.equipments
             .filter(equipmentResponse => equipmentResponse.slotType.indexOf("TRINKET") >= 0)));
 
-        equipmentTableEntries = equipmentTableEntries.concat(EquipmentTableEntry.buildForSameSlotType(
-          equipmentResponse.equipments
+          equipmentTableEntries = equipmentTableEntries.concat(EquipmentTableEntry.buildForSameSlotType(equipmentResponse.equipments
             .filter(equipmentResponse => equipmentResponse.slotType.indexOf("FINGER") >= 0)));
 
-        this.dataSource = new MatTableDataSource(equipmentTableEntries);
-        this.dataSource.sort = this.sort;
-        this.hasCharacterLoaded = true;
-      },
-      error: err => {
-        this.messagingService.showError(err);
-        this.hasCharacterLoaded = true;
-      }
-    });
+          this.dataSource = new MatTableDataSource(equipmentTableEntries);
+          this.dataSource.sort = this.sort;
+          this.loadingSpecialization = false;
+        }, error: err => {
+          this.messagingService.showError(err);
+          this.loadingSpecialization = false;
+        }
+      });
+    }
   }
 }

src/app/shared/api.service.ts

@@ -27,19 +27,19 @@ export class ApiService {
   }
 
   getCharacters() {
-    return this.httpClient.get<Array<Character>>(`${this.API_URL}/char`);
+    return this.httpClient.get<Array<Character>>(`${this.API_URL}/character`);
   }
 
   getCharacterById(id: number) {
-    return this.httpClient.get<Character>(`${this.API_URL}/char/${id}`);
+    return this.httpClient.get<Character>(`${this.API_URL}/character/${id}`);
   }
 
   createChar(char: Character) {
-    return this.httpClient.post<void>(`${this.API_URL}/char`, char);
+    return this.httpClient.post<void>(`${this.API_URL}/character`, char);
   }
 
   deleteCharacter(id: number) {
-    return this.httpClient.delete<void>(`${this.API_URL}/char/${id}`);
+    return this.httpClient.delete<void>(`${this.API_URL}/character/${id}`);
   }
 
   getMountsDrop(id: number) {
@@ -54,8 +54,12 @@ export class ApiService {
     return this.httpClient.get<ReputationListResponse>(`${this.API_URL}/reputation/list/${id}`);
   }
 
-  getEquipmentList(id: number, retrieveBis: boolean) {
-    return this.httpClient.get<EquipmentListResponse>(`${this.API_URL}/gear/${id}?retrieveBis=${retrieveBis}`);
+  getEquipmentListWithBis(id: number, specId: number) {
+    return this.httpClient.get<EquipmentListResponse>(`${this.API_URL}/equipment/${id}/${specId}`);
+  }
+
+  getEquipmentList(id: number) {
+    return this.httpClient.get<EquipmentListResponse>(`${this.API_URL}/equipment/${id}`);
   }
 
   getServers() {
@@ -87,6 +91,6 @@ export class ApiService {
   }
 
   searchItem(search: SearchRequest) {
-    return this.httpClient.post<EquipmentListResponse>(`${this.API_URL}/gear/search`, search);
+    return this.httpClient.post<EquipmentListResponse>(`${this.API_URL}/equipment/search`, search);
   }
 }

src/app/shared/character/character.models.ts

@@ -3,4 +3,5 @@ export interface Character {
   name: string;
   server: string;
   classId?: number;
+  specId?: number;
 }