feat: Buttons upgrade

- Added titles for add/remove/update - Changed icon for update - Changed color for remove
Gnyblast · Nov 13, 2024 · c1980c1 · c1980c1
1 parent 5a9cdeb
commit c1980c1
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 29 deletions.
diff --git a/src/app/components/drawer/drawer.component.html b/src/app/components/drawer/drawer.component.html
@@ -29,10 +29,10 @@ <h2><b>Players</b></h2>
       <td>{{player.defenceRating}}</td>
       <td>{{player.conditionRating}}</td>
       <td class="actions">
-        <button mat-mini-fab [disabled]="playersService.isPlayerExist(player.name)" (click)="AddPlayerToPlayers(player)">
+        <button title="Add Player" mat-mini-fab [disabled]="playersService.isPlayerExist(player.name)" (click)="AddPlayerToPlayers(player)">
           <mat-icon>keyboard_double_arrow_right</mat-icon>
         </button>
-        <button mat-mini-fab color="warn" (click)="playersService.deletePlayerFromDB(player)">
+        <button title="Delete Player" mat-mini-fab color="warn" (click)="playersService.deletePlayerFromDB(player)">
           <mat-icon>close</mat-icon>
         </button>
       </td>

diff --git a/src/app/components/main/main.component.html b/src/app/components/main/main.component.html
@@ -6,9 +6,7 @@
         <mat-label># of Players</mat-label>
         <input matInput type="number" [(ngModel)]="numOfPlayers" name="something" />
       </mat-form-field>
-      <button mat-raised-button color="accent" type="submit" [disabled]="numOfPlayers < 1">
-        Create
-      </button>
+      <button mat-raised-button color="accent" type="submit" [disabled]="numOfPlayers < 1">Create</button>
       <button mat-raised-button color="warn" type="button" (click)="test()">Demo</button>
     </form>
   </div>
@@ -21,8 +19,7 @@
   </div>
   <ng-container [formGroup]="playerForms">
     <ng-container formArrayName="players">
-      @for ( form of getAsFormArray(playerForms.controls['players']).controls; track
-      getAsFormArray(playerForms.controls['players']).controls ) {
+      @for ( form of getAsFormArray(playerForms.controls['players']).controls; track getAsFormArray(playerForms.controls['players']).controls ) {
       <form
         [formGroup]="
           getAsFormGroup(
@@ -32,13 +29,7 @@
       >
         <mat-form-field>
           <mat-label>Player Name {{ $index + 1 }}</mat-label>
-          <input
-            appValidateName
-            formControlName="name"
-            matInput
-            type="text"
-            (input)="compareNameToDrawer($event, $index)"
-          />
+          <input appValidateName formControlName="name" matInput type="text" (input)="compareNameToDrawer($event, $index)" />
         </mat-form-field>
         <mat-form-field>
           <mat-label>Position</mat-label>
@@ -72,12 +63,13 @@
             }
           </mat-select>
         </mat-form-field>
-        <button mat-mini-fab color="accent" (click)="deletePlayer($index)">
+        <button title="Remove" mat-mini-fab color="warn" (click)="deletePlayer($index)">
           <mat-icon>close</mat-icon>
         </button>
         @if (!authService.isAuthenticated()) {
         <button
           mat-mini-fab
+          title="Save Player"
           color="accent"
           [disabled]="!getAsFormGroup(
           getAsFormArray(playerForms.controls['players']).controls[$index]
@@ -89,13 +81,13 @@
         } @else { @if(playersService.isDPPlayerExistByIndex($index)){
         <button
           mat-mini-fab
-          color="accent"
+          title="Update Player"
           [disabled]="!isPlayerStatsChanged($index, getAsFormGroup(
             getAsFormArray(playerForms.controls['players']).controls[$index]
           ).valid)"
           (click)="updatePlayer($index)"
         >
-          <mat-icon>save_as</mat-icon>
+          <mat-icon>update</mat-icon>
         </button>
         } @else {
         <button
@@ -114,19 +106,9 @@
       }
     </ng-container>
     <div class="button-container">
-      <button
-        mat-raised-button
-        color="accent"
-        (click)="generateTeams()"
-        [disabled]="numOfPlayers < 1"
-        id="generate"
-      >
-        Generate
-      </button>
+      <button mat-raised-button color="accent" (click)="generateTeams()" [disabled]="numOfPlayers < 1" id="generate">Generate</button>
       <button mat-raised-button (click)="clean()" [disabled]="numOfPlayers < 1">Clean</button>
-      <mat-slide-toggle [(ngModel)]="forcedBalance" [ngModelOptions]="{standalone: true}"
-        >Force Balanced Teams</mat-slide-toggle
-      >
+      <mat-slide-toggle [(ngModel)]="forcedBalance" [ngModelOptions]="{standalone: true}">Force Balanced Teams</mat-slide-toggle>
     </div>
   </ng-container>
   @if (isGenerated) {