armour type select and targets allowed

package.json

@@ -24,8 +24,11 @@
     "@angular/platform-browser-dynamic": "~8.2.0",
     "@angular/router": "~8.2.0",
     "@ng-bootstrap/ng-bootstrap": "^5.1.0",
+    "awesome-bootstrap-checkbox": "^1.0.1",
+    "bootstrap": "^4.3.1",
     "electron-json-storage": "^4.1.7",
     "electron-reload": "^1.5.0",
+    "font-awesome": "^4.7.0",
     "ngx-bootstrap": "^5.1.1",
     "ngx-electron": "^2.1.1",
     "rxjs": "~6.4.0",

src/app/app.module.ts

@@ -13,6 +13,9 @@ import { UnitEditorComponent } from './components/unit-editor/unit-editor.compon
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { SafePipe } from './safe.pipe';
 import { StringFieldComponent } from './components/string-field/string-field.component';
+import { IntegerFieldComponent } from './components/integer-field/integer-field.component';
+import { TargetListFieldComponent } from './components/target-list-field/target-list-field.component';
+import { DropDownSelectFieldComponent } from './components/drop-down-select-field/drop-down-select-field.component';
 
 registerLocaleData(en);
 
@@ -21,7 +24,10 @@ registerLocaleData(en);
     AppComponent,
     UnitEditorComponent,
     SafePipe,
-    StringFieldComponent
+    StringFieldComponent,
+    IntegerFieldComponent,
+    TargetListFieldComponent,
+    DropDownSelectFieldComponent
   ],
   imports: [
     BrowserModule,

src/app/components/drop-down-select-field/drop-down-select-field.component.html

@@ -0,0 +1,13 @@
+<div class="form-group row">
+  <label class="col-sm-2 col-form-label" for="exampleFormControlSelect1">{{weService.FieldToName(fieldName)}}</label>
+  <div class="col-sm-10">
+
+    <select [value]="value"
+            [disabled]="disabled"
+            (change)="onChange($event.target.value)"
+            class="form-control"
+            id="exampleFormControlSelect1">
+      <option *ngFor="let opt of options" [value]="opt">{{opt}}</option>
+    </select>
+  </div>
+</div>

src/app/components/drop-down-select-field/drop-down-select-field.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DropDownSelectFieldComponent } from './drop-down-select-field.component';
+
+describe('DropDownSelectFieldComponent', () => {
+  let component: DropDownSelectFieldComponent;
+  let fixture: ComponentFixture<DropDownSelectFieldComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DropDownSelectFieldComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DropDownSelectFieldComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/drop-down-select-field/drop-down-select-field.component.ts

@@ -0,0 +1,47 @@
+import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { WorldEditService } from '../../services/WorldEditService/world-edit.service';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+@Component({
+  selector: 'app-drop-down-select-field',
+  templateUrl: './drop-down-select-field.component.html',
+  styleUrls: ['./drop-down-select-field.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => DropDownSelectFieldComponent),
+      multi: true
+    }
+  ]
+})
+export class DropDownSelectFieldComponent {
+  @Input() public fieldName: string;
+  @Input() public options: string[];
+  public value: string;
+  public active: boolean = false;
+  public onChange: (value: string) => void;
+  public onTouched: () => void;
+  public disabled: boolean;
+
+  constructor(public weService: WorldEditService) {
+  }
+
+  public registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  public registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+
+  }
+
+  public setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+  public writeValue(value: string): void {
+    this.value = value ? value : '';
+  }
+
+
+}

src/app/components/integer-field/integer-field.component.html

@@ -0,0 +1,13 @@
+<div class="form-group row">
+  <label [for]="'input'+fieldName" class="col-sm-2 col-form-label">{{weService.FieldToName(fieldName)}}</label>
+  <div class="col-sm-10">
+    <input
+      [value]="value"
+      [disabled]="disabled"
+      (change)="onChange($event.target.value)"
+      [placeholder]="weService.FieldToName(fieldName)"
+      type="number"
+      class="form-control"
+      [id]="'input'+fieldName">
+  </div>
+</div>

src/app/components/integer-field/integer-field.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IntegerFieldComponent } from './integer-field.component';
+
+describe('IntegerFieldComponent', () => {
+  let component: IntegerFieldComponent;
+  let fixture: ComponentFixture<IntegerFieldComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ IntegerFieldComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(IntegerFieldComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/integer-field/integer-field.component.ts

@@ -0,0 +1,44 @@
+import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { WorldEditService } from '../../services/WorldEditService/world-edit.service';
+
+@Component({
+  selector: 'app-integer-field',
+  templateUrl: './integer-field.component.html',
+  styleUrls: ['./integer-field.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => IntegerFieldComponent),
+      multi: true
+    }
+  ]
+})
+export class IntegerFieldComponent {
+  @Input() public fieldName: string;
+  public value: number;
+  public active: boolean = false;
+  public onChange: (value: string) => void;
+  public onTouched: () => void;
+  public disabled: boolean;
+
+  constructor(public weService: WorldEditService) {
+  }
+
+  public registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  public registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+
+  }
+
+  public setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+  public writeValue(value: number): void {
+    this.value = value ? value : 0;
+  }
+}

src/app/components/string-field/string-field.component.ts

@@ -15,30 +15,30 @@ import { WorldEditService } from '../../services/WorldEditService/world-edit.ser
   ]
 })
 export class StringFieldComponent {
-  @Input() fieldName: string;
-  value: string;
-  active: boolean = false;
-  onChange: (value: string) => void;
-  onTouched: () => void;
-  disabled: boolean;
+  @Input() public fieldName: string;
+  public value: string;
+  public active: boolean = false;
+  public onChange: (value: string) => void;
+  public onTouched: () => void;
+  public disabled: boolean;
 
   constructor(public weService: WorldEditService) {
   }
 
-  registerOnChange(fn: any): void {
+  public registerOnChange(fn: any): void {
     this.onChange = fn;
   }
 
-  registerOnTouched(fn: any): void {
+  public registerOnTouched(fn: any): void {
     this.onTouched = fn;
 
   }
 
-  setDisabledState(isDisabled: boolean): void {
+  public setDisabledState(isDisabled: boolean): void {
     this.disabled = isDisabled;
   }
 
-  writeValue(value: string): void {
+  public writeValue(value: string): void {
     this.value = value ? value : '';
   }