Add GraphQL support to mission, mission-list components

Author: lcdr

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.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.