show trial tags

src/backend/Components/Raid/RaidManager.ts

         const characterData: (Signup & Character & Spec)[] = await this.admin
             .knex('signups as s')
             //.transacting(tx)
-            .select('s.id as id', 'charactername', 'class', 'specid', 'specname', 'race', 'userid', 'benched', 'late', 'raidid', 'characterid', 'specid')
+            .select('s.id as id', 'charactername', 'rank', 'class', 'specid', 'specname', 'race', 'userid', 'benched', 'late', 'raidid', 'characterid', 'specid')
             .join('raids as r', 's.raidid', '=', 'r.id')
             .join('characters as c', 's.characterid', '=', 'c.id')
             .join('users as u', 'c.userid', '=', 'u.id')
                 'r.id': raid.id,
             })
             .andWhere(function () {
-                this.whereNotIn('u.rank', ['Trial', 'Guest'])
+                //this.whereNotIn('u.rank', ['Trial', 'Guest'])
                 this.whereNotNull('t.signupid')
             })
 

src/frontend/src/app/frontcraft/pages/raid/raid.component.html

                                                 [src]="'../../../../assets/images/'+participant.class.toLowerCase()+'.png'" />
                                             {{ participant.charactername }}
                                         </a>
+                                        <span 
+                                            *ngIf="participant.rank=='Trial'" 
+                                            style="font-size: 9px;">
+                                            Trial
+                                        </span>
                                     </div>
                                 </nb-card-body>
                             </nb-card>
                                                 [src]="'../../../../assets/images/'+participant.class.toLowerCase()+'.png'" />
                                             {{ participant.charactername }}
                                         </a>
+                                        <span 
+                                            *ngIf="participant.rank=='Trial'" 
+                                            style="font-size: 9px;">
+                                            Trial
+                                        </span>
                                     </div>
                                 </nb-card-body>
                             </nb-card>
                                                     [src]="'../../../../assets/images/'+participant.class.toLowerCase()+'.png'" />
                                                 {{ participant.charactername }}
                                             </a>
+                                            <span 
+                                                *ngIf="participant.rank=='Trial'" 
+                                                style="font-size: 9px;">
+                                                Trial
+                                            </span>
                                         </div>
                                     </nb-card-body>
                                 </nb-card>
                                 <wowhead [item]="item.value[0]"></wowhead><br />
                                 <div class="row">
                                     <div *ngFor="let token of item.value" class="col-12 col-md-6 col-xl-4">
-                                        [ {{token.level}} ]
-                                        <span style="text-transform: capitalize;"
-                                            [ngStyle]="{'color':token.level>=10?'#ff8000':token.level>=8?'#a335ee':token.level>=6?'#0070dd':token.level>=4?'#1eff00':token.level>=2?'#ffffff':'#9d9d9d'}">
-                                            {{token.charactername}}
+                                        <span [ngStyle]="{'text-decoration': token.rank=='Trial'? 'line-through' : 'none currentcolor solid' }">
+                                            [ {{token.level}} ]
+                                            <span style="text-transform: capitalize;"
+                                                [ngStyle]="{'color':token.level>=10?'#ff8000':token.level>=8?'#a335ee':token.level>=6?'#0070dd':token.level>=4?'#1eff00':token.level>=2?'#ffffff':'#9d9d9d'}">
+                                                {{token.charactername}}
+                                            </span>
+                                        </span>
+                                        &nbsp;
+                                        <ng-template #tooltip>
+                                            <div style="color:white">
+                                                Becomes valid when promoted to Raider
+                                            </div>
+                                        </ng-template>
+                                        <span 
+                                        *ngIf="token.rank=='Trial'" 
+                                        style="font-size: 9px;"
+                                        [nbPopover]="tooltip" 
+                                        nbPopoverTrigger="hover"
+                                        nbPopoverPlacement="top">
+                                            Trial
                                         </span><br />
                                     </div>
                                 </div>

src/frontend/src/app/frontcraft/pages/raid/raid.component.ts

       const raiddata = await raidManager.getRaidData(<any>{
         id: param
       })
+      console.log(raiddata);
+      
       this.display(raiddata)
       
     }