Use SQL query API in mission list component

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

@@ -1,10 +1,30 @@
-<ul class="mission-list" *ngIf="$missions | async; let missions">
+<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 *luxVar="mission.$table | async; let m" [style.order]="mission.$sortOrder | async">
-            <lux-mission [id]="mission.id" [isMission]="m ? m.isMission : true" [iconID]="mission.$missionIcon | async"
-                [title]="(mission.$loc | async)?.name | default:'&NewLine;&NewLine;'"
-                [tooltip]="(m && !m.isMission) ? ((mission.$locText | async)?.description | default:'Achievement #'+mission.id) : ((mission.$locText | async)?.in_progress | default:'Mission #'+mission.id)"></lux-mission>
-        </li>
+      <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>

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

@@ -1,134 +1,20 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { Observable, of, ReplaySubject } from 'rxjs';
-import { map, shareReplay, switchMap } from 'rxjs/operators';
-import { DB_Icons, DB_MissionTasks } from '../../../defs/cdclient';
-import { Locale_Missions, Locale_MissionText } from '../../../defs/locale';
-import { mapRec, mapToDict, mapToMultiDict, pick, recToSet, values } from '../../../defs/rx';
-import { LuCoreDataService } from '../../services';
-
-interface DB_Missions_Ref {
-  id: number;
-  isMission: boolean;
-  UISortOrder?: number;
-  missionIconID?: number;
-}
-
-const MISSION_KEYS: (keyof DB_Missions_Ref)[] = [
-  "id",
-  "isMission",
-  "UISortOrder",
-  "missionIconID",
-];
-
-interface DB_MissionTasks_Ref {
-  id: number
-  uid: number,
-  largeTaskIconID: number,
-}
-
-const MISSION_TASKS_KEYS: (keyof DB_MissionTasks_Ref & keyof DB_MissionTasks)[] = [
-  "id",
-  "uid",
-  "largeTaskIconID",
-];
-
-class Mission {
-  constructor(
-    public id: number,
-    public $table: Observable<DB_Missions_Ref | undefined>,
-    public $missionIcon: Observable<DB_Icons | undefined>,
-    public $loc: Observable<Locale_Missions>,
-    public $locText: Observable<Locale_MissionText>,
-  ) { }
-
-  get $sortOrder(): Observable<number> {
-    return this.$table.pipe(map(m => m ? -m.isMission * 10000 + m.UISortOrder + 1 : 0))
-  }
-}
+import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'lux-mission-list',
   templateUrl: './mission-list.component.html',
   styleUrls: ['./mission-list.component.css']
 })
-export class MissionListComponent implements OnInit {
+export class MissionListComponent {
   @Input()
   set ids(value: number[]) {
-    this.$missionIds.next(value);
-  }
-
-  $missionIds = new ReplaySubject<number[]>();
-  $missions: Observable<Mission[]>;
-
-  constructor(private luCoreData: LuCoreDataService) { }
-
-  ngOnInit(): void {
-    const cd = this.luCoreData;
-    let $missionsTable = this.$missionIds.pipe(
-      cd.queryTableEntries$<number[], DB_Missions_Ref>('Missions', MISSION_KEYS),
-      mapToDict("id"),
-      shareReplay(1)
-    );
-    let $missionsLocale = this.$missionIds.pipe(
-      cd.queryLocaleNum$("Missions", ["name"]),
-      shareReplay(1),
-    );
-    let $missionTextLocale = this.$missionIds.pipe(
-      cd.queryLocaleNum$("MissionText", ["in_progress", "description"]),
-      shareReplay(1),
-    );
-    let $missionIcons = $missionsTable.pipe(
-      values(),
-      map(data => Array.from(data, d => d.missionIconID).filter(v => v)),
-      cd.icons(),
-      shareReplay(1)
-    );
-    let $missionTasks: Observable<Record<number, DB_MissionTasks_Ref[]>> = this.$missionIds.pipe(
-      cd.queryTableEntries$<number[], DB_MissionTasks_Ref>('MissionTasks', MISSION_TASKS_KEYS),
-      mapToMultiDict("id"),
-      shareReplay(1),
-    );
-    let $firstMissionTasks = $missionTasks.pipe(mapRec(v => v[0]), shareReplay(1));
-    let $firstMissionTasksIcons = $firstMissionTasks.pipe(
-      recToSet(a => a.largeTaskIconID),
-      map(s => Array.from(s.values())),
-      cd.icons(),
-      shareReplay(1),
-    );
-    function iconForMission(m: DB_Missions_Ref): Observable<DB_Icons> {
-      if (m && m.missionIconID && !m.isMission) {
-        // Achievement
-        return $missionIcons.pipe(map(i => i[m.missionIconID]));
-      } else if (m && m.isMission) {
-        // Mission
-        return $firstMissionTasks.pipe(
-          pick(m.id),
-          switchMap(task => $firstMissionTasksIcons.pipe(pick(task.largeTaskIconID)))
-        );
-      } else {
-        return of(null);
-      }
-    }
-    this.$missions = this.$missionIds.pipe(
-      map(data => Array.from(data, id => {
-        let $table = $missionsTable.pipe(pick(id), shareReplay(1));
-        let $missionIcon = $table.pipe(switchMap(iconForMission));
-        let $loc = $missionsLocale.pipe(pick(id), shareReplay(1));
-        let $locText = $missionTextLocale.pipe(pick(id), shareReplay(1));
-        return new Mission(id, $table, $missionIcon, $loc, $locText);
-      }))
-    );
+    this._where = "where m.id in ("+value+")";
   }
 
-  /*
-  sortOrderOf(mission?: DB_Missions_Ref): number | null {
-    if (!mission) return null;
-    return
+  @Input()
+  set where(value: string) {
+    this._where = "where "+value;
   }
 
-  iconIdOf(mission?: DB_Missions_Ref): number | null {
-    if (!mission || mission.isMission) return null;
-    return mission.missionIconID;
-  }
-  */
+  _where: string = "";
 }

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

@@ -1,7 +1,8 @@
 <a routerLink="/missions/{{id}}" [luxTooltip]="displayTooltip">
   <div [class]="isMission ? 'mission' : 'achievement'" >
     <div class="slot" [class.complete]="status == 4">
-      <img class="icon" [luxFetchIcon]="iconID">
+      <img *ngIf="icon" class="icon" [src]="icon">
+      <img *ngIf="iconID" class="icon" [luxFetchIcon]="iconID">
       <span *ngIf="status != 2 && status != 4" class="status">status {{status}}</span>
     </div>
     <div class="title">{{title}}</div>

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

@@ -9,7 +9,10 @@ import { DB_Icons } from "../../../defs/cdclient";
 export class MissionComponent {
   @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.
   @Input() iconID: number | DB_Icons;
+  /// Image path, fully resolved
+  @Input() icon: string;
   @Input() title: string;
   @Input() tooltip: string;
   @HostBinding("style.order")

src/app/missions/by-subtype/by-subtype.component.html

@@ -8,7 +8,5 @@
   <app-group-icon [name]="d.type"></app-group-icon>
   <h2>Missions <small>{{d.type}} - {{d.subtype}}</small></h2>
 
-  <ng-container *ngIf="$typeData | async; let data">
-    <lux-mission-list [ids]="data.mission_ids"></lux-mission-list>
-  </ng-container>
+  <lux-mission-list [where]="'defined_type = \''+d.type+'\' and defined_subtype = \''+d.subtype+'\''"></lux-mission-list>
 </section>

src/app/missions/by-subtype/by-subtype.component.ts

@@ -1,17 +1,13 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Observable } from 'rxjs';
-import { map, switchMap } from 'rxjs/operators';
-import { LuCoreDataService } from '../../util/services/lu-core-data.service';
+import { map } from 'rxjs/operators';
 
 interface TypeKey {
   type: string;
   subtype: string;
 }
 
-interface TypeData {
-  mission_ids: number[];
-}
 @Component({
   selector: 'app-by-subtype',
   templateUrl: './by-subtype.component.html',
@@ -20,13 +16,8 @@ interface TypeData {
 export class MissionsBySubtypeComponent implements OnInit {
 
   $defined: Observable<TypeKey>;
-  $typeData: Observable<TypeData>;
-  //defined_type: string = "";
-  //defined_subtype: string = "";
-  //mission_ids: Array<number> = [];
-  //mission_names: any = {};
 
-  constructor(private route: ActivatedRoute, private luCoreDataService: LuCoreDataService) { }
+  constructor(private route: ActivatedRoute) { }
 
   ngOnInit() {
     this.$defined = this.route.paramMap.pipe(map(map => {
@@ -35,38 +26,5 @@ export class MissionsBySubtypeComponent implements OnInit {
         subtype: map.get('subtype'),
       };
     }));
-    this.$typeData = this.$defined.pipe(switchMap(defined => {
-      return this.luCoreDataService.getRevEntry<TypeData>('mission_types', `${defined.type}/${defined.subtype}`);
-    }));
-
-    //this.getMissionNames();
-    //this.getMissions();
-  }
-
-  /*
-  getMissions() {
-    this.luJsonService.getMissionsByType().subscribe(missions => this.processMissions(missions));
-  }
-
-  processMissions(missions) {
-    this.mission_ids = missions[this.defined_type][this.defined_subtype];
-  }
-
-  getMissionNames():void
-  {
-    this.luLocaleService.getLocaleTable("Missions").subscribe(index => this.processMissionNameIndex(index));
   }
-
-  processMissionNameIndex(index: any):void
-  {
-    for (let page of index.pages)
-    {
-      this.luLocaleService.getLocalePage("Missions", page).subscribe(page => this.processMissionNamesPage(page));
-    }
-  }
-
-  processMissionNamesPage(page: any):void
-  {
-    this.mission_names = Object.assign({}, this.mission_names, page);
-  }*/
 }