From 6307780b9c1f65ab709bf14df2be3ed774dc01f7 Mon Sep 17 00:00:00 2001
From: Thomas Bloor <tom@tbsliver.me>
Date: Thu, 26 Dec 2019 21:28:24 +0000
Subject: [PATCH] Finish work on Quest editing pages

---
 .../components/form/text/text.component.html  |  7 +-
 .../components/form/text/text.component.ts    |  2 +
 src/app/models/atlasData/questEntry.model.ts  |  2 +-
 .../pages/config/quests/quests.component.html | 93 +++++++++++++------
 .../pages/config/quests/quests.component.ts   | 48 +++++++---
 5 files changed, 107 insertions(+), 45 deletions(-)

diff --git a/src/app/components/form/text/text.component.html b/src/app/components/form/text/text.component.html
index a4f6351..fc1a752 100644
--- a/src/app/components/form/text/text.component.html
+++ b/src/app/components/form/text/text.component.html
@@ -1,7 +1,12 @@
 <div class="form-group row">
     <label for="text-{{ id }}" class="col-2">{{ label }}</label>
     <div class="col-10">
-        <input id="text-{{ id }}" type="text" class="form-control" (ngModelChange)="textChange.emit($event)" [ngModel]="text">
+        <div class="input-group">
+            <input id="text-{{ id }}" type="text" class="form-control" (ngModelChange)="textChange.emit($event)" [ngModel]="text">
+            <div class="input-group-append" *ngIf="postButtonText">
+                <button class="btn btn-outline-primary" (click)="postButton.emit($event)">{{ postButtonText || "click me" }}</button>
+            </div>
+        </div>
         <small class="form-text text-muted" *ngIf="help">{{ help }}</small>
     </div>
 </div>
\ No newline at end of file
diff --git a/src/app/components/form/text/text.component.ts b/src/app/components/form/text/text.component.ts
index 7e3be2d..b7f27a2 100644
--- a/src/app/components/form/text/text.component.ts
+++ b/src/app/components/form/text/text.component.ts
@@ -7,6 +7,8 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 export class TextComponent implements OnInit {
   @Input() text: string;
   @Output() textChange = new EventEmitter();
+  @Input() postButtonText: string;
+  @Output() postButton = new EventEmitter();
   @Input() label: string;
   @Input() id: string;
   @Input() help: string;
diff --git a/src/app/models/atlasData/questEntry.model.ts b/src/app/models/atlasData/questEntry.model.ts
index c5fac75..ea08b41 100644
--- a/src/app/models/atlasData/questEntry.model.ts
+++ b/src/app/models/atlasData/questEntry.model.ts
@@ -9,7 +9,7 @@ export class QuestEntryModel implements Deserialize {
   public UncompletedIcon: Texture2DModel;
   public QuestName: string;
   public QuestDescription: string;
-  public UnlockFeatNames: Array<string>;
+  public UnlockFeatNames: string[];
   public CompleteGiveEngramClasses: Array<BlueprintGeneratedClassModel>;
   public QuestPointsOfInterest: Array<QuestPointsOfInterestModel>;
 
diff --git a/src/app/pages/config/quests/quests.component.html b/src/app/pages/config/quests/quests.component.html
index 56c1afe..3e50ebd 100644
--- a/src/app/pages/config/quests/quests.component.html
+++ b/src/app/pages/config/quests/quests.component.html
@@ -1,32 +1,67 @@
 <div class="row">
-    <div class="col-12 mt-3" *ngFor="let quest of quests">
-        <div class="card">
-            <div class="card-body">
-                <h4 class="card-title">{{ quest.QuestID }} - {{ quest.QuestName }}</h4>
-                <p class="card-text">{{ quest.QuestDescription }}</p>
-            </div>
-            <div class="card-header" *ngIf="quest.UnlockFeatNames">Feat Unlocks</div>
-            <ul class="list-group list-group-flush">
-                <li class="list-group-item" *ngFor="let feat of quest.UnlockFeatNames">{{ availableFeats[feat] }}</li>
-            </ul>
-            <div class="card-header" *ngIf="quest.CompleteGiveEngramClasses">Engram Unlocks</div>
-            <ul class="list-group list-group-flush">
-                <li class="list-group-item" *ngFor="let engram of quest.CompleteGiveEngramClasses">
-                    Blueprint: {{ engram.blueprint }}
-                </li>
-            </ul>
-            <div class="card-header" *ngIf="quest.QuestPointsOfInterest">Points of Interest</div>
-            <ul class="list-group list-group-flush">
-                <li class="list-group-item" *ngFor="let poi of quest.QuestPointsOfInterest">
-                    <strong>
-                        {{ poi.PointOfInterestID }} - {{ poi.PointOfInterestName }}
-                        (X: {{ poi.WorldMapPosition.X }} - Y: {{ poi.WorldMapPosition.Y }})
-                    </strong>
-                    <ul *ngIf="poi.UnlockFeatNames">
-                        <li *ngFor="let feat of poi.UnlockFeatNames">{{ availableFeats[feat] }}</li>
-                    </ul>
-                </li>
-            </ul>
-        </div>
+    <div class="col-12 mt-3 mb-3">
+        <h2>Quest Entries</h2>
+        <ngb-accordion>
+            <ngb-panel *ngFor="let quest of quests; let i = index" id="toggle-{{ i }}" title="{{ quest.QuestName }}">
+                <ng-template ngbPanelContent>
+                    <app-text id="{{ i }}-QuestName" label="Name" [(text)]="quest.QuestName"></app-text>
+                    <app-number id="{{ i }}-QuestID" label="ID" [(number)]="quest.QuestID"></app-number>
+                    <app-text id="{{ i }}-QuestDescription" label="Description"
+                              [(text)]="quest.QuestDescription"></app-text>
+                    <h6>Feat Unlocks
+                        <button class="btn btn-primary btn-sm" (click)="addQuestFeat(quest)">+</button>
+                    </h6>
+                    <p *ngIf="quest.UnlockFeatNames === undefined">
+                        <em>Click + above to add Feat Unlocks</em>
+                    </p>
+                    <app-text id="{{ i }}-{{ j }}-feat"
+                              *ngFor="let feat of quest.UnlockFeatNames; index as j; trackBy: trackByFn"
+                              label="Unlock {{ j }}" [(text)]="quest.UnlockFeatNames[j]" postButtonText="-"
+                              (postButton)="removeQuestFeat(quest, j)"></app-text>
+                    <h6>Engram Unlocks
+                        <button class="btn btn-primary btn-sm" (click)="addEngramClass(quest)">+</button>
+                    </h6>
+                    <p *ngIf="quest.CompleteGiveEngramClasses === undefined">
+                        <em>Click + above to add Engram Unlocks</em>
+                    </p>
+                    <app-text id="{{ i }}-{{ j }}-engram"
+                              *ngFor="let engram of quest.CompleteGiveEngramClasses; index as j"
+                              label="Engram {{ j }}" [(text)]="engram.blueprint" postButtonText="-"
+                              (postButton)="removeEngramClass(quest, j)"></app-text>
+                    <h6>Points of Interest
+                        <button class="btn btn-primary btn-sm">+</button>
+                    </h6>
+                    <p *ngIf="quest.QuestPointsOfInterest === undefined">
+                        <em>Click + above to add Point of Interest</em>
+                    </p>
+                    <div class="card mb-3" *ngFor="let poi of quest.QuestPointsOfInterest; index as j">
+                        <div class="card-body">
+                            <app-text id="{{ i }}-{{ j }}-poi-PointOfInterestName"
+                                      label="Name" [(text)]="poi.PointOfInterestName"></app-text>
+                            <app-number id="{{ i }}-{{ j }}-poi-PointOfInterestID"
+                                        label="ID" [(number)]="poi.PointOfInterestID"></app-number>
+                            <app-number id="{{ i }}-{{ j }}-poi-WorldMapPosition-X"
+                                        label="Map X Pos" [(number)]="poi.WorldMapPosition.X"></app-number>
+                            <app-number id="{{ i }}-{{ j }}-poi-WorldMapPosition-Y"
+                                        label="Map Y Pos" [(number)]="poi.WorldMapPosition.Y"></app-number>
+                            <app-text id="{{ i }}-{{ j }}-poi-CompletedIcon"
+                                        label="Completed Icon" [(text)]="poi.CompletedIcon.texture"></app-text>
+                            <app-text id="{{ i }}-{{ j }}-poi-UncompletedIcon"
+                                      label="Uncompleted Icon" [(text)]="poi.UncompletedIcon.texture"></app-text>
+                            <h6>Feat Unlocks
+                                <button class="btn btn-primary btn-sm" (click)="addQuestFeat(poi)">+</button>
+                            </h6>
+                            <p *ngIf="poi.UnlockFeatNames === undefined">
+                                <em>Click + above to add Feat Unlocks</em>
+                            </p>
+                            <app-text id="{{ i }}-{{ j }}-={{ k }}feat"
+                                      *ngFor="let feat of poi.UnlockFeatNames; index as k; trackBy: trackByFn"
+                                      label="Unlock {{ k }}" [(text)]="poi.UnlockFeatNames[k]" postButtonText="-"
+                                      (postButton)="removeQuestFeat(poi, k)"></app-text>
+                        </div>
+                    </div>
+                </ng-template>
+            </ngb-panel>
+        </ngb-accordion>
     </div>
 </div>
diff --git a/src/app/pages/config/quests/quests.component.ts b/src/app/pages/config/quests/quests.component.ts
index 2dd7b83..f61f6ae 100644
--- a/src/app/pages/config/quests/quests.component.ts
+++ b/src/app/pages/config/quests/quests.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Server } from "../../../server";
 import { QuestEntryModel } from "../../../models/atlasData/questEntry.model";
+import { BlueprintGeneratedClassModel } from "../../../models/atlasData/blueprintGeneratedClass.model";
 
 @Component({
   selector: 'app-quests',
@@ -10,24 +11,43 @@ import { QuestEntryModel } from "../../../models/atlasData/questEntry.model";
 export class QuestsComponent implements OnInit {
   quests: QuestEntryModel[];
 
-  // TODO figure out what each dance actually is
-  private availableFeats = {
-    'Dance1': 'Dance 1',
-    'Dance2': 'Dance 2',
-    'Dance3': 'Dance 3',
-    'Dance4': 'Dance 4',
-    'Dance5': 'Dance 5',
-    'Dance6': 'Dance 6',
-    'Dance7': 'Dance 7',
-    'Dance8': 'Dance 8',
-    'Dance9': 'Dance 9',
-    'Dance10': 'Dance 10',
-  };
-
   constructor(private server: Server) {
     this.quests = server.serverGrid.globalGameplaySetup.QuestEntries;
   }
 
   ngOnInit() {
   }
+
+  // Issue with text arrays and editing jumps on each change.
+  trackByFn(index: any, item: any) {
+    return index;
+  }
+
+  private addQuestFeat(quest) {
+    if (quest.UnlockFeatNames === undefined) {
+      quest.UnlockFeatNames = [];
+    }
+    quest.UnlockFeatNames.push('');
+  }
+
+  private removeQuestFeat(quest, j) {
+    quest.UnlockFeatNames.splice(j, 1);
+    if (quest.UnlockFeatNames.length === 0) {
+      quest.UnlockFeatNames = undefined;
+    }
+  }
+
+  private addEngramClass(quest) {
+    if (quest.CompleteGiveEngramClasses === undefined) {
+      quest.CompleteGiveEngramClasses = [];
+    }
+    quest.CompleteGiveEngramClasses.push(new BlueprintGeneratedClassModel());
+  }
+
+  private removeEngramClass(quest, j) {
+    quest.CompleteGiveEngramClasses.splice(j, 1);
+    if (quest.CompleteGiveEngramClasses.length === 0) {
+      quest.UnlockFeatNames = undefined;
+    }
+  }
 }