Rework loot table view

The current view only displays one item per line, which becomes a problem when loot tables are large. As loot tables are mainly about what items are in them, this PR simplifies the view to just show an inline list of slots, just like LU's inventory does. As for the other columns, `id` never seems to be used in the game and is probably an auto-added primary key. `missionDrop` is indicated by highlighting the slot. `sortPriority` is not displayed directly, but is used to order the items. Sorting is also moved from JS to CSS, as it is only used in presentation. As `sortPriority` is also only used by LU to order items, without the precise value being of much importance, not displaying it directly seems like an acceptable tradeoff for a much more compact representation of loot tables.

src/app/objects/loot/loot-table-index/loot-table-index.component.css

@@ -0,0 +1,8 @@
+ul {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+li {
+    display: block;
+}

src/app/objects/loot/loot-table-index/loot-table-index.component.html

@@ -1,8 +1,5 @@
 <ul *ngIf="loot_table">
-  <li *ngFor="let entry of loot_table">
-    <lux-slot [luxFetchItem]="entry.itemid"></lux-slot>
-    <span *ngIf="entry.MissionDrop"> [MissionDrop]</span>
-    (sortPriority: {{entry.sortPriority}};
-    id: {{entry.id}})
+  <li *ngFor="let entry of loot_table" [style.order]="entry.sortPriority">
+    <lux-slot [luxFetchItem]="entry.itemid" [equipped]="entry.MissionDrop"></lux-slot>
   </li>
 </ul>

src/app/objects/loot/loot-table-index/loot-table-index.component.ts

@@ -33,11 +33,6 @@ export class LootTableIndexComponent implements OnInit {
   }
 
   processLootTableIndex(lootTable: { loot_table: DB_LootTable[] }) {
-    console.log(lootTable);
-    this.loot_table = lootTable.loot_table.sort(this.sortLootTableEntry.bind(this))
-  }
-
-  sortLootTableEntry(a, b): number {
-    return a.sortPriority - b.sortPriority;
+    this.loot_table = lootTable.loot_table;
   }
 }

src/app/objects/loot/loot-table/loot-table.component.html

@@ -1,2 +1,3 @@
-<h2>Loot Table ({{id}})</h2>
+<h2>Loot Table #{{id}}</h2>
+<p>Highlighted items are mission drops.</p>
 <app-loot-table-index [id]="id"></app-loot-table-index>