Finish off more of the basic grid settings pages

src/app/app-routing.module.ts

@@ -3,6 +3,8 @@ import { Routes, RouterModule } from '@angular/router';
 import { RawEditorComponent } from "./pages/raw-editor/raw-editor.component";
 import { ConfigComponent } from "./pages/config/config.component";
 import { QuestsComponent } from "./pages/config/quests/quests.component";
+import { GridComponent } from "./pages/config/grid/grid.component";
+import { DbsComponent } from "./pages/config/dbs/dbs.component";
 
 
 const routes: Routes = [
@@ -10,7 +12,9 @@ const routes: Routes = [
   {
     path: 'config', component: ConfigComponent,
     children: [
-      //{path: '', component: ''}
+      {path: '', redirectTo: 'grid', pathMatch: 'full'},
+      {path: 'grid', component: GridComponent},
+      {path: 'dbs', component: DbsComponent},
       {path: 'quests', component: QuestsComponent},
     ]
   }

src/app/app.component.ts

@@ -14,5 +14,6 @@ export class AppComponent {
   constructor(private server: Server) {
     // Temporary just load all the grid. Remove later.
     this.server.serverGrid = new ServerGridModel().deserialize((data as any).default);
+    console.log(this.server.serverGrid);
   }
 }

src/app/app.module.ts

@@ -11,6 +11,12 @@ import { FormsModule } from "@angular/forms";
 import { Server } from "./server";
 import { PegjsService } from "./services/pegjs.service";
 import { QuestsComponent } from './pages/config/quests/quests.component';
+import { GridComponent } from './pages/config/grid/grid.component';
+import { NumberComponent } from './components/form/number/number.component';
+import { TextComponent } from './components/form/text/text.component';
+import { PasswordComponent } from './components/form/password/password.component';
+import { DbsComponent } from './pages/config/dbs/dbs.component';
+import { CheckboxComponent } from './components/form/checkbox/checkbox.component';
 
 @NgModule({
   declarations: [
@@ -18,7 +24,13 @@ import { QuestsComponent } from './pages/config/quests/quests.component';
     RawEditorComponent,
     CodeEditorComponent,
     ConfigComponent,
-    QuestsComponent
+    QuestsComponent,
+    GridComponent,
+    NumberComponent,
+    TextComponent,
+    PasswordComponent,
+    DbsComponent,
+    CheckboxComponent
   ],
   imports: [
     BrowserModule,

src/app/components/form/checkbox/checkbox.component.html

@@ -0,0 +1,7 @@
+<div class="form-group row">
+    <label for="check-{{ id }}" class="col-2">{{ label }}</label>
+    <div class="col-10">
+        <input id="check-{{ id }}" type="checkbox" class="form-control" (ngModelChange)="checkboxChange.emit($event)" [ngModel]="checkbox">
+        <small class="form-text text-muted" *ngIf="help">{{ help }}</small>
+    </div>
+</div>

src/app/components/form/checkbox/checkbox.component.ts

@@ -0,0 +1,19 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-checkbox',
+  templateUrl: './checkbox.component.html'
+})
+export class CheckboxComponent implements OnInit {
+  @Input() checkbox: boolean;
+  @Output() checkboxChange = new EventEmitter();
+  @Input() label: string;
+  @Input() id: string;
+  @Input() help: string;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/components/form/number/number.component.html

@@ -0,0 +1,7 @@
+<div class="form-group row">
+    <label for="num-{{ id }}" class="col-2">{{ label }}</label>
+    <div class="col-10">
+        <input id="num-{{ id }}" type="number" class="form-control" (ngModelChange)="numberChange.emit($event)" [ngModel]="number">
+        <small class="form-text text-muted" *ngIf="help">{{ help }}</small>
+    </div>
+</div>

src/app/components/form/number/number.component.ts

@@ -0,0 +1,19 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-number',
+  templateUrl: './number.component.html'
+})
+export class NumberComponent implements OnInit {
+  @Input() number: number;
+  @Output() numberChange = new EventEmitter();
+  @Input() label: string;
+  @Input() id: string;
+  @Input() help: string;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/components/form/password/password.component.html

@@ -0,0 +1,13 @@
+<div class="form-group row">
+    <label for="text-{{ id }}" class="col-2">{{ label }}</label>
+    <div class="col-10">
+        <div class="input-group">
+            <input id="text-{{ id }}" type="{{ show ? 'text' : 'password' }}" class="form-control"
+                   (ngModelChange)="passwordChange.emit($event)" [ngModel]="password">
+            <div class="input-group-append">
+                <button class="btn btn-warning" (click)="toggleShow()">{{ show ? 'Hide' : 'Show' }}</button>
+            </div>
+        </div>
+        <small class="form-text text-muted" *ngIf="help">{{ help }}</small>
+    </div>
+</div>

src/app/components/form/password/password.component.ts

@@ -0,0 +1,23 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-password',
+  templateUrl: './password.component.html'
+})
+export class PasswordComponent implements OnInit {
+  @Input() password: string;
+  @Output() passwordChange = new EventEmitter();
+  @Input() label: string;
+  @Input() id: string;
+  @Input() help: string;
+  private show: boolean = false;
+
+  constructor() { }
+
+  private toggleShow() {
+    this.show = !this.show;
+  }
+
+  ngOnInit() {
+  }
+}

src/app/components/form/text/text.component.html

@@ -0,0 +1,7 @@
+<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">
+        <small class="form-text text-muted" *ngIf="help">{{ help }}</small>
+    </div>
+</div>

src/app/components/form/text/text.component.ts

@@ -0,0 +1,18 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-text',
+  templateUrl: './text.component.html'
+})
+export class TextComponent implements OnInit {
+  @Input() text: string;
+  @Output() textChange = new EventEmitter();
+  @Input() label: string;
+  @Input() id: string;
+  @Input() help: string;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+}

src/app/models/atlasData/blueprintGeneratedClass.model.ts

@@ -1,15 +1,15 @@
 import {Deserialize} from "../util/deserialize.model";
 
 export class BlueprintGeneratedClassModel implements Deserialize {
-  public texture: string;
+  public blueprint: string;
 
   public deserialize(raw: any): this {
     if( raw[0] !== 'BlueprintGeneratedClass') Error('wrong type, expecting BlueprintGeneratedClassModel, got [' + raw[0] + ']!');
-    this.texture = raw[1];
+    this.blueprint = raw[1];
     return this;
   };
 
   public toJSON(): object {
-    return [ 'BlueprintGeneratedClass', this.texture ];
+    return [ 'BlueprintGeneratedClass', this.blueprint ];
   }
 }

src/app/models/serverGrid.model.ts

@@ -8,8 +8,10 @@ import { ServerModel } from "./atlasData/server.model";
 
 export class ServerGridModel implements Deserialize {
   // Server Argument Section
-  public BaseServerArgs: string = "";
-  public AdditionalCmdLineParams: string = "";
+  // Used internally by Grapeshot
+  //public BaseServerArgs: string = "";
+  // Probably also internal to Grapeshot
+  //public AdditionalCmdLineParams: string = "";
 
   // World Options
   public WorldFriendlyName: string = "New Server";
@@ -21,12 +23,17 @@ export class ServerGridModel implements Deserialize {
   public gridSize: number = 1000;
   public totalGridsX: number = 1;
   public totalGridsY: number = 1;
-  public coordsScaling: number = 0.000000000001;
   public globalTransitionMinZ: number = 0.0;
 
+  // Used by ServerGridEditor for Zoom Level, so ignored
+  // Will be added if present in config when loading.
+  //public coordsScaling: number = 0.000000000001;
+
   // Image Paths
-  public backgroundImgPath: string = "image.png";
-  public discoZonesImagePath: string = "image.png";
+  // Used for generating tile output
+  //public backgroundImgPath: string = "image.png";
+  // Used for displaying discovery zones in ServerGridEditor
+  //public discoZonesImagePath: string = "image.png";
 
   // URL Options
   public MetaWorldURL: string = "";
@@ -39,13 +46,13 @@ export class ServerGridModel implements Deserialize {
   public columnUTCOffset: number = 0.0;
   public lastImageOverride: string = "0001-01-01T00:00:00";
 
-  // Info Options
-  public showServerInfo: boolean = false;
-  public showDiscoZoneInfo: boolean = false;
-  public showShipPathsInfo: boolean = false;
-  public showIslandNames: boolean = false;
-  public showLines: boolean = false;
-  public showBackground: boolean = false;
+  // Info Options for ServerGridEditor
+  // public showServerInfo: boolean = false;
+  // public showDiscoZoneInfo: boolean = false;
+  // public showShipPathsInfo: boolean = false;
+  // public showIslandNames: boolean = false;
+  // public showLines: boolean = false;
+  // public showBackground: boolean = false;
 
   // S3 Options
   public LocalS3URL: string = "";
@@ -54,9 +61,12 @@ export class ServerGridModel implements Deserialize {
   public LocalS3BucketName: string = "";
   public LocalS3Region: string = "";
 
-  // Unsorted...
-  public shipPathsIdGenerator: number = 1;
-  public idGenerator: number = 127;
+  // ID Generator current values
+  // Used for individual ship path
+  public shipPathsIdGenerator: number = 0;
+  // Used for Discovery Zone IDs
+  public idGenerator: number = 0;
+  // Unused as far as can see in ServerGridEditor
   public regionsIdGenerator: number = 0;
 
   // Log Configs

src/app/pages/config/config.component.html

@@ -1,5 +1,7 @@
 <div class="row">
     <div class="col-2 mt-3">
+        <button class="btn btn-primary btn-block" [routerLink]="['grid']">Grid Settings</button>
+        <button class="btn btn-primary btn-block" [routerLink]="['dbs']">DB Settings</button>
         <button class="btn btn-primary btn-block" [routerLink]="['quests']">Quest Settings</button>
     </div>
     <div class="col-10"><router-outlet></router-outlet></div>

src/app/pages/config/config.component.ts

@@ -13,5 +13,4 @@ export class ConfigComponent implements OnInit {
 
   ngOnInit() {
   }
-
 }

src/app/pages/config/dbs/dbs.component.html

@@ -0,0 +1,15 @@
+<div class="row">
+    <div class="col-12 mt-3">
+        <h2>Database Settings</h2>
+        <ngb-accordion>
+            <ngb-panel *ngFor="let db of dbs; let i = index" title="{{ db.Name }}">
+                <ng-template ngbPanelContent>
+                    <app-text id="db-{{ i }}-name" label="Name" [(text)]="db.Name"></app-text>
+                    <app-text id="db-{{ i }}-URL" label="URL" [(text)]="db.URL"></app-text>
+                    <app-number id="db-{{ i }}-Port" label="Port" [(number)]="db.Port"></app-number>
+                    <app-password id="db-{{ i }}-Password" label="Password" [(password)]="db.Password"></app-password>
+                </ng-template>
+            </ngb-panel>
+        </ngb-accordion>
+    </div>
+</div>

src/app/pages/config/dbs/dbs.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+import { Server } from "../../../server";
+import { DatabaseConnectionModel } from "../../../models/databaseConnection.model";
+
+@Component({
+  selector: 'app-dbs',
+  templateUrl: './dbs.component.html'
+})
+export class DbsComponent implements OnInit {
+  dbs: DatabaseConnectionModel[];
+
+  constructor(private server: Server) {
+    this.dbs = server.serverGrid.DatabaseConnections;
+  }
+
+  ngOnInit() {
+  }
+
+}

src/app/pages/config/grid/grid.component.html

@@ -0,0 +1,102 @@
+<div class="row">
+    <div class="col-12 mt-3">
+        <h2>Grid Settings</h2>
+        <ngb-accordion>
+            <ngb-panel id="toggle-generalSettings" title="World Settings">
+                <ng-template ngbPanelContent>
+                    <app-text id="WorldFriendlyName" label="Name" [(text)]="grid.WorldFriendlyName"
+                              help="Name shown on Atlas server listings for your server"></app-text>
+                    <app-text id="WorldAtlasId" label="Atlas ID" [(text)]="grid.WorldAtlasId"
+                              help="Unique ID used for joining multiple servers together in multi-host setups"></app-text>
+                    <app-password id="WorldAtlasPassword" label="Password"
+                                  [(password)]="grid.WorldAtlasPassword"
+                                  help="Password used for connecting to your Server"></app-password>
+                    <app-text id="ModIDs" label="Mod IDs" [(text)]="grid.ModIDs"
+                              help="Comma separated list of Mod IDs from Steam Workshop"></app-text>
+                </ng-template>
+            </ngb-panel>
+            <ngb-panel id="toggle-gridSettings" title="Grid Size Settings">
+                <ng-template ngbPanelContent>
+                    <app-number id="gridSize" label="Grid Size" [(number)]="grid.gridSize"
+                                help="Size in Unreal Units per Cell. Recommended default & maximum 1,400,000"></app-number>
+                    <app-number id="totalGridsX" label="Total Grids X" [(number)]="grid.totalGridsX"
+                                help="Total number of Cells in X Direction"></app-number>
+                    <app-number id="totalGridsY" label="Total Grids Y" [(number)]="grid.totalGridsY"
+                                help="Total number of Cells in Y Direction"></app-number>
+                    <app-number id="globalTransitionMinZ" label="Min Z Transition"
+                                [(number)]="grid.globalTransitionMinZ"
+                                help="Lowest Z height for transitions across cell borders"></app-number>
+                </ng-template>
+            </ngb-panel>
+            <ngb-panel id="toggle-urlSettings" title="URL Settings">
+                <ng-template ngbPanelContent>
+                    <app-text id="MetaWorldURL" label="Meta World URL" [(text)]="grid.MetaWorldURL"></app-text>
+                    <app-text id="AuthListURL" label="Auth List URL" [(text)]="grid.AuthListURL"></app-text>
+                    <app-text id="MapImageURL" label="Map Image URL" [(text)]="grid.MapImageURL"></app-text>
+                </ng-template>
+            </ngb-panel>
+            <ngb-panel id="toggle-timeOptions" title="Time Settings">
+                <ng-template ngbPanelContent>
+                    <app-text id="Day0" label="Day Zero" [(text)]="grid.Day0"></app-text>
+                    <app-checkbox id="bUseUTCTime" label="Use UTC" [(checkbox)]="grid.bUseUTCTime"></app-checkbox>
+                    <app-number id="columnUTCOffset" label="UTC Offset" [(number)]="grid.columnUTCOffset"></app-number>
+                </ng-template>
+            </ngb-panel>
+            <ngb-panel id="toggle-1" title="Local S3 Settings">
+                <ng-template ngbPanelContent>
+                    <app-text id="LocalS3URL" label="URL" [(text)]="grid.LocalS3URL"></app-text>
+                    <app-text id="LocalS3AccessKeyID" label="Access Key ID"
+                              [(text)]="grid.LocalS3AccessKeyId"></app-text>
+                    <app-password id="LocalS3SecretKey" label="Secret Key"
+                                  [(password)]="grid.LocalS3SecretKey"></app-password>
+                    <app-text id="LocalS3BucketName" label="Bucket Name" [(text)]="grid.LocalS3BucketName"></app-text>
+                    <app-text id="LocalS3Region" label="Region" [(text)]="grid.LocalS3Region"></app-text>
+                </ng-template>
+            </ngb-panel>
+            <ngb-panel title="Tribe Log Settings">
+                <ng-template ngbPanelContent>
+                    <app-number id="Tribe-MaxRedisEntries" label="Max Redis Entries" [(number)]="tribeLog.MaxRedisEntries"></app-number>
+                    <app-text id="Tribe-BackupMode" label="Backup Mode" [(text)]="tribeLog.BackupMode"></app-text>
+                    <app-number id="Tribe-MaxFileHistory" label="Max File History" [(number)]="tribeLog.MaxFileHistory"></app-number>
+                    <app-text id="Tribe-HttpBackupURL" label="Http Backup URL" [(text)]="tribeLog.HttpBackupURL"></app-text>
+                    <app-text id="Tribe-HttpAPIKey" label="HTTP API Key" [(text)]="tribeLog.HttpAPIKey"></app-text>
+                    <app-text id="Tribe-S3URL" label="S3 URL" [(text)]="tribeLog.S3URL"></app-text>
+                    <app-text id="Tribe-S3AccessKeyId" label="S3 Access Key ID" [(text)]="tribeLog.S3AccessKeyId"></app-text>
+                    <app-password id="Tribe-S3SecretKey" label="S3 Secret Key" [(password)]="tribeLog.S3SecretKey"></app-password>
+                    <app-text id="Tribe-S3BucketName" label="S3 Bucket Name" [(text)]="tribeLog.S3BucketName"></app-text>
+                    <app-text id="Tribe-S3KeyPrefix" label="S3 Key Prefix" [(text)]="tribeLog.S3KeyPrefix"></app-text>
+                </ng-template>
+            </ngb-panel>
+            <ngb-panel title="Shared Log Settings">
+                <ng-template ngbPanelContent>
+                    <app-number id="Shared-FetchRateSec" label="Fetch Rate (s)" [(number)]="sharedLog.FetchRateSec"></app-number>
+                    <app-number id="Shared-SnapshotRateSec" label="Snapshot Rate (s)" [(number)]="sharedLog.SnapshotRateSec"></app-number>
+                    <app-number id="Shared-SnapshotCleanupSec" label="Snapshot Cleanup (s)" [(number)]="sharedLog.SnapshotCleanupSec"></app-number>
+                    <app-number id="Shared-SnapshotExpirationHours" label="Snapshot Expiration (h)" [(number)]="sharedLog.SnapshotExpirationHours"></app-number>
+                    <app-text id="Shared-BackupMode" label="Backup Mode" [(text)]="sharedLog.BackupMode"></app-text>
+                    <app-number id="Shared-MaxFileHistory" label="Max File History" [(number)]="sharedLog.MaxFileHistory"></app-number>
+                    <app-text id="Shared-HttpBackupURL" label="Http Backup URL" [(text)]="sharedLog.HttpBackupURL"></app-text>
+                    <app-text id="Shared-HttpAPIKey" label="HTTP API Key" [(text)]="sharedLog.HttpAPIKey"></app-text>
+                    <app-text id="Shared-S3URL" label="S3 URL" [(text)]="sharedLog.S3URL"></app-text>
+                    <app-text id="Shared-S3AccessKeyId" label="S3 Access Key ID" [(text)]="sharedLog.S3AccessKeyId"></app-text>
+                    <app-password id="Shared-S3SecretKey" label="S3 Secret Key" [(password)]="sharedLog.S3SecretKey"></app-password>
+                    <app-text id="Shared-S3BucketName" label="S3 Bucket Name" [(text)]="sharedLog.S3BucketName"></app-text>
+                    <app-text id="Shared-S3KeyPrefix" label="S3 Key Prefix" [(text)]="sharedLog.S3KeyPrefix"></app-text>
+                </ng-template>
+            </ngb-panel>
+            <ngb-panel title="Travel Data Settings">
+                <ng-template ngbPanelContent>
+                    <app-text id="Travel-BackupMode" label="Backup Mode" [(text)]="travelData.BackupMode"></app-text>
+                    <app-number id="Travel-MaxFileHistory" label="Max File History" [(number)]="travelData.MaxFileHistory"></app-number>
+                    <app-text id="Travel-HttpBackupURL" label="Http Backup URL" [(text)]="travelData.HttpBackupURL"></app-text>
+                    <app-text id="Travel-HttpAPIKey" label="HTTP API Key" [(text)]="travelData.HttpAPIKey"></app-text>
+                    <app-text id="Travel-S3URL" label="S3 URL" [(text)]="travelData.S3URL"></app-text>
+                    <app-text id="Travel-S3AccessKeyId" label="S3 Access Key ID" [(text)]="travelData.S3AccessKeyId"></app-text>
+                    <app-password id="Travel-S3SecretKey" label="S3 Secret Key" [(password)]="travelData.S3SecretKey"></app-password>
+                    <app-text id="Travel-S3BucketName" label="S3 Bucket Name" [(text)]="travelData.S3BucketName"></app-text>
+                    <app-text id="Travel-S3KeyPrefix" label="S3 Key Prefix" [(text)]="travelData.S3KeyPrefix"></app-text>
+                </ng-template>
+            </ngb-panel>
+        </ngb-accordion>
+    </div>
+</div>

src/app/pages/config/grid/grid.component.ts

@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+import { ServerGridModel } from "../../../models/serverGrid.model";
+import { Server } from "../../../server";
+import { TribeLogConfigModel } from "../../../models/tribeLogConfig.model";
+import { SharedLogConfigModel } from "../../../models/sharedLogConfig.model";
+import { TravelDataConfigModel } from "../../../models/travelDataConfig.model";
+
+@Component({
+  selector: 'app-grid',
+  templateUrl: './grid.component.html'
+})
+export class GridComponent implements OnInit {
+  private grid: ServerGridModel;
+  private tribeLog: TribeLogConfigModel;
+  private sharedLog: SharedLogConfigModel;
+  private travelData: TravelDataConfigModel;
+
+  constructor(private server: Server) {
+    this.grid = server.serverGrid;
+    this.tribeLog = server.serverGrid.TribeLogConfig;
+    this.sharedLog = server.serverGrid.SharedLogConfig;
+    this.travelData = server.serverGrid.TravelDataConfig;
+  }
+
+  ngOnInit() {
+  }
+}

src/app/pages/config/quests/quests.component.html

@@ -7,12 +7,12 @@
             </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">{{ feat }}</li>
+                <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.texture }}
+                    Blueprint: {{ engram.blueprint }}
                 </li>
             </ul>
             <div class="card-header" *ngIf="quest.QuestPointsOfInterest">Points of Interest</div>
@@ -23,7 +23,7 @@
                         (X: {{ poi.WorldMapPosition.X }} - Y: {{ poi.WorldMapPosition.Y }})
                     </strong>
                     <ul *ngIf="poi.UnlockFeatNames">
-                        <li *ngFor="let feat of poi.UnlockFeatNames">{{ feat }}</li>
+                        <li *ngFor="let feat of poi.UnlockFeatNames">{{ availableFeats[feat] }}</li>
                     </ul>
                 </li>
             </ul>

src/app/pages/config/quests/quests.component.ts

@@ -4,12 +4,26 @@ import { QuestEntryModel } from "../../../models/atlasData/questEntry.model";
 
 @Component({
   selector: 'app-quests',
-  templateUrl: './quests.component.html',
-  styleUrls: ['./quests.component.scss']
+  templateUrl: './quests.component.html'
 })
+
 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;
   }