GraphQL queries + GraphQL GUI support

src/app/gui/gui.module.ts

@@ -1,5 +1,8 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { FetchIconDirective } from './icon/fetchIcon.directive';
+import { FetchItemDirective } from './item/fetchItem.directive';
+import { FetchObjectDirective } from './object/fetchObject.directive';
 import { IconDirective } from './icon/icon.directive';
 import { ItemDirective } from './item/item.directive';
 import { ItemSetComponent } from './item-set/item-set.component';
@@ -41,6 +44,9 @@ import { ItemSetListComponent } from './item-set-list/item-set-list.component';
 const COMPONENTS = [
   CoinsComponent,
   CurrencyComponent,
+  FetchIconDirective,
+  FetchItemDirective,
+  FetchObjectDirective,
   IconDirective,
   ItemDirective,
   ItemSetComponent,

src/app/gui/icon/fetchIcon.directive.ts

@@ -0,0 +1,39 @@
+import { ElementRef, Directive, Input } from "@angular/core";
+import { LuCoreDataService } from "../../services";
+import { DB_Icons } from "../../../defs/cdclient";
+import { first } from "rxjs/operators";
+
+@Directive({
+  selector: "img[luxFetchIcon]"
+})
+export class FetchIconDirective {
+  @Input("luxFetchIcon") set id(id: number | DB_Icons) {
+    if (id != null) {
+      if (typeof id === 'number') {
+        this.luCoreData.getSingleTableEntry("Icons", id)
+          .pipe(first())
+          .subscribe(this.onIcon.bind(this, id));
+      } else {
+        this.onIcon(id.IconID, id)
+      }
+    }
+  }
+
+  constructor(private luCoreData: LuCoreDataService, private element: ElementRef<HTMLImageElement>) { }
+
+  onIcon(id: number, icon: DB_Icons) {
+    if (!icon) {
+      console.warn("img[luxFetchIcon]", `id=${id}`, "Call returned no icon");
+      return;
+    }
+    if (!icon.IconPath) {
+      console.warn("img[luxFetchIcon]", `id=${id}`, `Missing IconPath`);
+      return;
+    }
+    this.element.nativeElement.src = "/lu-res/textures/ui/" + icon.IconPath.toLowerCase().replace(/dds$/, "png");
+    if (icon.IconName) {
+      this.element.nativeElement.title = icon.IconName;
+      this.element.nativeElement.alt = icon.IconName;
+    }
+  }
+}

src/app/gui/icon/icon.directive.ts

@@ -1,39 +1,19 @@
 import { ElementRef, Directive, Input } from "@angular/core";
-import { LuCoreDataService } from "../../services";
-import { DB_Icons } from "../../../defs/cdclient";
-import { first } from "rxjs/operators";
+import { IconFragment } from "generated/graphql";
 
 @Directive({
-  selector: "img[luxFetchIcon]"
+  selector: "img[luxIcon]"
 })
 export class IconDirective {
-  @Input("luxFetchIcon") set id(id: number | DB_Icons) {
-    if (id != null) {
-      if (typeof id === 'number') {
-        this.luCoreData.getSingleTableEntry("Icons", id)
-          .pipe(first())
-          .subscribe(this.onIcon.bind(this, id));
-      } else {
-        this.onIcon(id.IconID, id)
-      }
+  @Input("luxIcon") set icon(value: IconFragment) {
+    if (value.IconPath) {
+      this.element.nativeElement.src = "/lu-res/textures/ui/" + value.IconPath.toLowerCase().replace(/dds$/, "png");
     }
-  }
-
-  constructor(private luCoreData: LuCoreDataService, private element: ElementRef<HTMLImageElement>) { }
-
-  onIcon(id: number, icon: DB_Icons) {
-    if (!icon) {
-      console.warn("img[luxFetchIcon]", `id=${id}`, "Call returned no icon");
-      return;
-    }
-    if (!icon.IconPath) {
-      console.warn("img[luxFetchIcon]", `id=${id}`, `Missing IconPath`);
-      return;
-    }
-    this.element.nativeElement.src = "/lu-res/textures/ui/" + icon.IconPath.toLowerCase().replace(/dds$/, "png");
-    if (icon.IconName) {
-      this.element.nativeElement.title = icon.IconName;
-      this.element.nativeElement.alt = icon.IconName;
+    if (value.IconName) {
+      this.element.nativeElement.title = value.IconName;
+      this.element.nativeElement.alt = value.IconName;
     }
   }
+
+  constructor(private element: ElementRef<HTMLImageElement>) {}
 }

src/app/gui/icon/icon.graphql

@@ -0,0 +1,4 @@
+fragment icon on Icons {
+	IconName
+	IconPath
+}

src/app/gui/item/fetchItem.directive.ts

@@ -0,0 +1,41 @@
+import { ApplicationRef, ElementRef, Directive, Injector, Input, Renderer2, EnvironmentInjector } from "@angular/core";
+import { ItemTooltipDirective } from "../item-tooltip/item-tooltip.directive";
+import { SlotComponent } from "../slot/slot.component";
+import { LuCoreDataService } from "../../services";
+import { DB_ComponentsRegistry } from "../../../defs/cdclient";
+import { RENDER_COMPONENT_ID } from "../../../defs/components";
+
+@Directive({
+  selector: "lux-slot[luxFetchItem]"
+})
+export class FetchItemDirective extends ItemTooltipDirective {
+  @Input("luxFetchItem") set id(id: number) {
+    super.id = id;
+    this.slotComponent.link = `/objects/${id}`;
+    this.coreData.getTableEntry('ComponentsRegistry', id).subscribe(this.onObjectComponents.bind(this));
+  }
+
+  constructor(
+    element: ElementRef<HTMLElement>,
+    applicationRef: ApplicationRef,
+    renderer: Renderer2,
+    injector: Injector,
+    environmentInjector: EnvironmentInjector,
+    protected coreData: LuCoreDataService,
+    private slotComponent: SlotComponent
+  ) {
+    super(element, applicationRef, renderer, injector, environmentInjector, coreData);
+  }
+
+  onObjectComponents(components: DB_ComponentsRegistry[]) {
+    const renderId = components.find(c => c.component_type == RENDER_COMPONENT_ID)?.component_id;
+    if (renderId) {
+      this.coreData.getSingleTableEntry("RenderComponent", renderId).subscribe(x => {
+        if (x.icon_asset && !x.icon_asset.endsWith('tga')) {
+          this.slotComponent.icon = "/lu-res/textures/ui/" + x.icon_asset.toLowerCase().replace(/dds$/, "png")
+        }
+      });
+    }
+    this.itemTooltipRef.changeDetectorRef.detectChanges();
+  }
+}

src/app/gui/item/item.directive.graphql

@@ -0,0 +1,6 @@
+fragment item on Objects {
+	id
+	renderComponent {
+		icon_asset
+	}
+}

src/app/gui/item/item.directive.ts

@@ -2,17 +2,17 @@ import { ApplicationRef, ElementRef, Directive, Injector, Input, Renderer2, Envi
 import { ItemTooltipDirective } from "../item-tooltip/item-tooltip.directive";
 import { SlotComponent } from "../slot/slot.component";
 import { LuCoreDataService } from "../../services";
-import { DB_ComponentsRegistry } from "../../../defs/cdclient";
-import { RENDER_COMPONENT_ID } from "../../../defs/components";
+import { ItemFragment } from "generated/graphql";
 
 @Directive({
-  selector: "lux-slot[luxFetchItem]"
+  selector: "lux-slot[luxItem]"
 })
 export class ItemDirective extends ItemTooltipDirective {
-  @Input("luxFetchItem") set id(id: number) {
-    super.id = id;
-    this.slotComponent.link = `/objects/${id}`;
-    this.coreData.getTableEntry('ComponentsRegistry', id).subscribe(this.onObjectComponents.bind(this));
+  @Input("luxItem") set item(value: ItemFragment) {
+    super.id = value.id;
+    this.slotComponent.link = `/objects/${value.id}`;
+    let icon = value.renderComponent.icon_asset;
+    this.slotComponent.icon = "/lu-res/textures/ui/" + (icon ? icon : "inventory/unknown.png").toLowerCase().replace(/dds$/, "png");
   }
 
   constructor(
@@ -26,16 +26,4 @@ export class ItemDirective extends ItemTooltipDirective {
   ) {
     super(element, applicationRef, renderer, injector, environmentInjector, coreData);
   }
-
-  onObjectComponents(components: DB_ComponentsRegistry[]) {
-    const renderId = components.find(c => c.component_type == RENDER_COMPONENT_ID)?.component_id;
-    if (renderId) {
-      this.coreData.getSingleTableEntry("RenderComponent", renderId).subscribe(x => {
-        if (x.icon_asset && !x.icon_asset.endsWith('tga')) {
-          this.slotComponent.icon = "/lu-res/textures/ui/" + x.icon_asset.toLowerCase().replace(/dds$/, "png")
-        }
-      });
-    }
-    this.itemTooltipRef.changeDetectorRef.detectChanges();
-  }
 }

src/app/gui/mission-list/mission-list.component.html

@@ -1,30 +1,38 @@
-<ul class="mission-list" *ngIf="'
-  select
-    m.id as id,
-    isMission,
-    i.IconPath,
-    name_en_US as name,
-    case isMission
-      when 0 then description_en_US
-      else in_progress_en_US
-    end tooltip
-  from
-    Missions m
-    left join MissionText mt on m.id = mt.id
-    left join Icons i on i.IconID =
-      case isMission
-        when 0 then missionIconID
-        else (select largeTaskIconID from MissionTasks mt where mt.id = m.id limit 1)
-      end '
-  +_where+'
-  order by
-    isMission desc,
-    UISortOrder
-  ' | query; let missions">
-    <ng-container *ngFor="let mission of missions">
-      <li [style.order]="1 - mission.isMission">
-        <lux-mission [id]="+mission.id" [isMission]="((mission.isMission) == '1')" [title]="mission.name | default:(mission.isMission == '1' ? 'Mission' : 'Achievement')+' #'+mission.id" [icon]="mission.IconPath | icon" [tooltip]="mission.tooltip"></lux-mission>
-      </li>
-    </ng-container>
-    <li class="mission-separator"></li>
+<ul *ngIf="missions; else deprecated" class="mission-list">
+  <li *ngFor="let mission of missions" [style.order]="1 - mission.isMission" [style.order]="-mission.isMission * 10000 + mission.UISortOrder + 1">
+    <lux-mission [mission]="mission"></lux-mission>
+  </li>
+  <li class="mission-separator"></li>
 </ul>
+<ng-template #deprecated>
+  <ul class="mission-list" *ngIf="'
+    select
+      m.id as id,
+      isMission,
+      i.IconPath,
+      name_en_US as name,
+      case isMission
+        when 0 then description_en_US
+        else in_progress_en_US
+      end tooltip
+    from
+      Missions m
+      left join MissionText mt on m.id = mt.id
+      left join Icons i on i.IconID =
+        case isMission
+          when 0 then missionIconID
+          else (select largeTaskIconID from MissionTasks mt where mt.id = m.id limit 1)
+        end '
+    +_where+'
+    order by
+      isMission desc,
+      UISortOrder
+    ' | query; let missions">
+      <ng-container *ngFor="let mission of missions">
+        <li [style.order]="1 - mission.isMission">
+          <lux-mission [id]="+mission.id" [isMission]="((mission.isMission) == '1')" [title]="mission.name | default:(mission.isMission == '1' ? 'Mission' : 'Achievement')+' #'+mission.id" [icon]="mission.IconPath | icon" [tooltip]="mission.tooltip"></lux-mission>
+        </li>
+      </ng-container>
+      <li class="mission-separator"></li>
+  </ul>
+</ng-template>

src/app/gui/mission-list/mission-list.component.ts

@@ -1,11 +1,14 @@
 import { Component, Input } from '@angular/core';
+import { MissionFragment } from "generated/graphql";
 
 @Component({
   selector: 'lux-mission-list',
   templateUrl: './mission-list.component.html',
   styleUrls: ['./mission-list.component.css']
 })
 export class MissionListComponent {
+  @Input() missions: MissionFragment[];
+
   @Input()
   set ids(value: number[]) {
     this._where = "where m.id in ("+value+")";

src/app/gui/mission/mission.component.graphql

@@ -0,0 +1,18 @@
+fragment mission on Missions {
+	id
+	isMission
+	UISortOrder
+	name_loc
+	MissionText {
+		in_progress_loc
+		description_loc
+	}
+	MissionTasks {
+		largeTaskIconID {
+			IconPath
+		}
+	}
+	missionIconID {
+		IconPath
+	}
+}

src/app/gui/mission/mission.component.ts

@@ -1,12 +1,36 @@
 import { Component, HostBinding, Input } from "@angular/core";
 import { DB_Icons } from "../../../defs/cdclient";
+import { MissionFragment } from "generated/graphql";
 
 @Component({
   selector: "lux-mission",
   templateUrl: "./mission.component.html",
   styleUrls: ["./mission.component.css"]
 })
 export class MissionComponent {
+  @Input() set mission(value: MissionFragment) {
+    this.id = value.id;
+    this.sortOrder = value.UISortOrder;
+    this.isMission = value.isMission == 1;
+    if (value.name_loc) {
+      this.title = value.name_loc;
+    } else {
+      this.title = (this.isMission ? 'Mission' : 'Achievement')+' #'+this.id;
+    }
+    let icon;
+    if (this.isMission) {
+      if (value.MissionText.length > 0) {
+        this.tooltip = value.MissionText[0].in_progress_loc;
+      }
+      icon = value.MissionTasks[0].largeTaskIconID;
+    } else {
+      if (value.MissionText.length > 0) {
+        this.tooltip = value.MissionText[0].description_loc;
+      }
+      icon = value.missionIconID;
+    }
+    this.icon = "/lu-res/textures/ui/" + (icon ? icon.IconPath : "inventory/unknown.png").toLowerCase().replace(/dds$/, "png");
+  }
   @Input() id: number;
   @Input() isMission: boolean = true;
   /// Either iconID or icon must be provided. If possible do a bulk lookup of icon ID -> icon path on the DB side, this is much more efficient than specificing iconID for multiple missions.