tooltips

index.html

@@ -0,0 +1 @@
+<table><tr><td><!--nstart--><b class="q4">Spineshatter</b><!--nend--><!--ndstart--><!--ndend--><span class="q"><br>Item Level <!--ilvl-->73</span><br /><!--bo-->Binds when picked up<br />Unique<table width="100%"><tr><td>Main Hand</td><th><!--scstart2:4--><span class="q1">Mace</span><!--scend--></th></tr></table><table width="100%"><tr> <td><span><!--dmg-->99 - 184 Damage</span></td> <th>Speed <!--spd-->2.60</th> </tr></table><!--dps-->(54.42 damage per second)<br><span><!--stat4-->+9 Strength</span><br><span><!--stat7-->+16 Stamina</span><!--ebstats--><!--egstats--><!--eistats--><!--e--><!--ps--><br>Durability 105 / 105</td></tr></table><table><tr><td>Requires Level <!--rlvl-->60<br><span class="q2">Equip: <a href="https://classic.wowhead.com/spell=7518" class="q2">Increased Defense +5.</a></span><!--itemEffects:1--><div class="whtt-sellprice">Sell Price: <span class="moneygold">12</span> <span class="moneysilver">88</span> <span class="moneycopper">25</span></div><div class="whtt-extra whtt-droppedby">Dropped by: Razorgore the Untamed</div></td></tr></table>

src/backend/Components/Item/ItemManager.ts

@@ -93,6 +93,7 @@ implements FrontworkComponent<ItemManagerIfc, ItemManagerFeatureIfc>, TableDefin
                 iconname: r.wowhead.item[0].icon[0]._,
                 url: r.wowhead.item[0].link[0],
                 quality: r.wowhead.item[0].quality[0]._,
+                tooltip: r.wowhead.item[0].htmlTooltip[0]
             }
         } catch (e) {
             console.log(name)
@@ -136,6 +137,7 @@ implements FrontworkComponent<ItemManagerIfc, ItemManagerFeatureIfc>, TableDefin
                     table.string('url').notNullable()
                     table.string('quality').defaultTo('Epic').notNullable()
                     table.boolean('hidden').defaultTo(false).notNullable()
+                    table.string('tooltip').notNullable()
                     table.enu('tier', _Tiers).notNullable()
                 }
             }]

src/backend/Types/Types.ts

@@ -87,6 +87,7 @@ export type Item = {
     url:string
     quality:string
     hidden:boolean
+    tooltip: string
     tier: Tiers
 }
 

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

@@ -25,7 +25,7 @@ export class FrontcraftCharacterComponent implements OnInit{
     gear1:string[] = []
     
     boss2= {}
-    gear2:string[] = []
+    gear2:Item[] = []
 
     constructor(
       private api: ApiService,
@@ -50,7 +50,7 @@ export class FrontcraftCharacterComponent implements OnInit{
 
           
 
-          fetch(this.dataLink).then(raw => raw.json().then((json) => {
+          fetch(this.dataLink).then(raw => raw.json().then(async (json) => {
             if(json.length < 1) return
             const data = json[0]
 
@@ -58,18 +58,14 @@ export class FrontcraftCharacterComponent implements OnInit{
               name: data.encounterName,
               date: data.startTime
             }
-            this.gear2 = data.gear.map(item => {return <Item>{
-              itemname: item.name,
-              iconname: item.icon.replace('.jpg', ''),
-              quality: item.quality.replace(/^\w/, c => c.toUpperCase()),
-              url: "https://classic.wowhead.com/item="+item.id
-            }})
+
+            this.gear2 = await Promise.all(data.gear.map(i => i.name).map(itemName => this.api.get('ItemManager').getItem(itemName)))
+            this.gear2 = this.gear2.filter(i => i!=null)            
+          
           }))
 
-          fetch(this.dataLink).then(raw => raw.json().then((json) => {
+          fetch(this.dataLink).then(raw => raw.json().then(async (json) => {
             if(json.length < 2) return
-            console.log(json);
-
             const data = json[1]
 
             this.boss1 = {
@@ -77,12 +73,9 @@ export class FrontcraftCharacterComponent implements OnInit{
               date: data.startTime
             }
 
-            this.gear1 = data.gear.map(item => {return <Item>{
-              itemname: item.name,
-              iconname: item.icon.replace('.jpg', ''),
-              quality: item.quality.replace(/^\w/, c => c.toUpperCase()),
-              url: "https://classic.wowhead.com/item="+item.id
-            }})
+            
+            this.gear1 = await Promise.all(data.gear.map(i => i.name).map(itemName => this.api.get('ItemManager').getItem(itemName)))
+            this.gear1 = this.gear1.filter(i => i!=null)            
           }))
         }
       })

src/frontend/src/app/frontcraft/pages/shop/item.component.ts

@@ -1,15 +1,17 @@
-import { Component, OnInit, ContentChild, AfterContentInit, ViewChild, AfterViewInit, Input, Output, EventEmitter } from '@angular/core';
+import { Component, OnInit, Input, } from '@angular/core';
 import { ApiService as ApiService } from '../../services/login-api';
-import { FrontcraftItemSelectComponent } from './itemselector.component';
-import { NbWindowService, NbWindowRef, NbToastrService, NbDialogService, NbDialogRef } from '@nebular/theme';
-import { Item, Character, SRToken, Signup } from '../../../../../../backend/Types/Types';
-import { getClassColor } from '../../../../../../backend/Types/PlayerSpecs';
-import { _Tiers, allItems, Tiers } from '../../../../../../backend/Types/Items';
+import { NbToastrService, } from '@nebular/theme';
+import { Item, } from '../../../../../../backend/Types/Types';
+import { _Tiers, } from '../../../../../../backend/Types/Items';
 
 @Component({
   selector: 'item',
   template: `
-        <span [ngStyle]="{'color':item.quality=='Poor'?'#9d9d9d':
+      <ng-template #tooltip>
+        <table><tr><td><!--nstart--><b class="q4">Spineshatter</b><!--nend--><!--ndstart--><!--ndend--><span class="q"><br>Item Level <!--ilvl-->73</span><br /><!--bo-->Binds when picked up<br />Unique<table width="100%"><tr><td>Main Hand</td><th><!--scstart2:4--><span class="q1">Mace</span><!--scend--></th></tr></table><table width="100%"><tr> <td><span><!--dmg-->99 - 184 Damage</span></td> <th>Speed <!--spd-->2.60</th> </tr></table><!--dps-->(54.42 damage per second)<br><span><!--stat4-->+9 Strength</span><br><span><!--stat7-->+16 Stamina</span><!--ebstats--><!--egstats--><!--eistats--><!--e--><!--ps--><br>Durability 105 / 105</td></tr></table><table><tr><td>Requires Level <!--rlvl-->60<br><span class="q2">Equip: <a href="https://classic.wowhead.com/spell=7518" class="q2">Increased Defense +5.</a></span><!--itemEffects:1--><div class="whtt-sellprice">Sell Price: <span class="moneygold">12</span> <span class="moneysilver">88</span> <span class="moneycopper">25</span></div><div class="whtt-extra whtt-droppedby">Dropped by: Razorgore the Untamed</div></td></tr></table>
+      </ng-template>
+      <span 
+            [ngStyle]="{'color':item.quality=='Poor'?'#9d9d9d':
                                 item.quality=='Common'?'#FFFFFF':
                                 item.quality=='Uncommon'?'#1eff00':
                                 item.quality=='Rare'?'#0070dd':

src/frontend/src/app/frontcraft/pages/shop/wowhead.component.ts

@@ -1,26 +1,40 @@
-import { Component, OnInit, ContentChild, AfterContentInit, ViewChild, AfterViewInit, Input, Output, EventEmitter } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
 import { ApiService as ApiService } from '../../services/login-api';
-import { NbWindowService, NbWindowRef, NbToastrService, NbDialogService, NbDialogRef } from '@nebular/theme';
-import { Item, Character, SRToken, Signup } from '../../../../../../backend/Types/Types';
-import { _Tiers, allItems, Tiers } from '../../../../../../backend/Types/Items';
+import { NbToastrService } from '@nebular/theme';
+import { Item } from '../../../../../../backend/Types/Types';
+import { _Tiers } from '../../../../../../backend/Types/Items';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 
 @Component({
   selector: 'wowhead',
   template: `
+    <ng-template #tooltip>
+      <div style="color:white" [innerHTML]="tooltipHtml">
+      </div>
+    </ng-template>
+    <span 
+      [nbPopover]="tooltip" 
+      nbPopoverTrigger="hover"
+      nbPopoverPlacement="top"> 
+      
+
       <a target="_blank" [href]="item.url">
           <item [item]="item"></item>
       </a>
-    
+    </span>
     `,
 })
 export class FrontcraftWowheadComponent implements OnInit {
   @Input() item: Item
+  tooltipHtml : SafeHtml
 
   constructor(
+    private sanitizer: DomSanitizer,
     private toastr: NbToastrService,
     private api: ApiService
   ) { }
 
   async ngOnInit() {
+    this.tooltipHtml = this.sanitizer.bypassSecurityTrustHtml(this.item.tooltip)
   }
 }