admin ui allows to specify entry strategy

Author: spiderpug

admin/src/app/app.module.ts

@@ -11,6 +11,7 @@ import {TradesRoutingModule} from './trades-routing.module';
 import {FormsModule} from '@angular/forms';
 import {ExitDetailsComponent} from './trade-details/exit-details.component';
 import {SLDetailsComponent} from './trade-details/sl-details.component';
+import {EntryDetailsComponent} from './trade-details/entry-details.component';
 import {SymbolValidatorDirective} from './trade-details/symbol-validator';
 import {AuthInterceptor} from './auth.interceptor';
 import { LogInComponent } from './log-in/log-in.component';
@@ -22,11 +23,12 @@ import { LogInComponent } from './log-in/log-in.component';
   declarations: [
     AppComponent,
     AssetTableComponent,
+    EntryDetailsComponent,
     TradeDetailsComponent,
     ExitDetailsComponent,
     SLDetailsComponent,
     SymbolValidatorDirective,
-    LogInComponent
+    LogInComponent,
   ],
   imports: [
     // CollapseModule.forRoot(),

admin/src/app/botapi.ts

@@ -4,7 +4,7 @@ import {Observable, of, throwError} from 'rxjs';
 import {TradeInfo} from './tradeInfo';
 import {catchError, map, retry, tap} from 'rxjs/operators';
 import {ApiResult} from './apiresult';
-import {TradeDetails} from './trade-details';
+import {TradeDetails, Entry} from './trade-details';
 import deleteProperty = Reflect.deleteProperty;
 import {environment} from '../environments/environment';
 
@@ -40,7 +40,13 @@ export class BotApi {
     return this.http.get<TradeDetails>(`${this.API_URL}/trade/${id}`, httpOptions).pipe(
       retry(this.RETRIES),
       tap(trade => this.log(`fetched trade ${id} info`)),
-      map(data => Object.assign(new TradeDetails(), data)),
+      map(data => {
+        const trade = Object.assign(new TradeDetails(), data);
+        if (data.entry) {
+          trade.entry = Object.assign(new Entry(), data.entry); // restore nested class Entry
+        }
+        return trade;
+      }),
       catchError(this.handleError('getActiveTradeInfo', null))
     );
   }

admin/src/app/trade-details.ts

@@ -11,6 +11,7 @@ export class TradeDetails {
   side: 'BUY' | 'SELL' = 'SELL';
   status: 'NEW' | 'ACTIVE' | 'COMPLETED';
   exit: ExitInfo;
+  entry?: Entry;
 
   get stoploss(): StopLoss {
     return this._stoploss;
@@ -71,7 +72,24 @@ export class ExitInfo {
   smart: boolean;
   threshold: string;
   targets: Target[];
+}
+
+export class EntryTarget {
+  price: string;
+  vol: string;
+}
+
+export class Entry {
+  constructor() {
+    this.targets = [new EntryTarget()];
+  }
+
+  side: 'BUY' | 'SELL' = 'BUY';
+  targets: [EntryTarget];
+  smart: boolean;
 
+  isBuy(): boolean { return this.side === 'BUY'; }
+  isSell(): boolean { return !this.isBuy(); }
 }
 
 export class Target {

admin/src/app/trade-details/entry-details.component.html

@@ -0,0 +1,45 @@
+<fieldset [disabled]="mode.isView()">
+  <legend>
+    Entry
+
+    <button
+      type="button"
+      class="btn btn-sm btn-outline-success"
+      (click)="addNewTarget()"
+      tooltip="Add Target"
+      *ngIf="!trade.entry"
+    >
+      <span class="oi oi-plus"></span>
+    </button>
+  </legend>
+
+
+  <div class="form-group row row-no-btm-margin" *ngIf="trade.entry?.targets.length > 0">
+    <div class="col-form-label-sm col-md-2"><label for="targetPrice">Price</label></div>
+    <div class="col-form-label-sm col-md-2"><label for="targetVol">Volume</label></div>
+  </div>
+
+  <div class="form-group row row-no-btm-margin" *ngFor="let entryTarget of trade.entry?.targets">
+    <div class="form-group col-md-2">
+      <input type="text" class="form-control form-control-sm" id="targetPrice" [(ngModel)]="entryTarget.price">
+    </div>
+    <div class="form-group col-md-2">
+      <input type="text" class="form-control form-control-sm" id="targetVol" [(ngModel)]="entryTarget.vol">
+    </div>
+    <div class="form-group col-md-1" *ngIf="mode.isCreate()">
+      <button type="button" class="btn btn-sm btn-outline-danger" (click)="deleteTarget(entryTarget)" tooltip="Remove Target" >
+        <span class="oi oi-trash"></span>
+      </button>
+    </div>
+    <div class="form-group col-md-1">
+    <div class="btn-group btn-group-toggle" data-toggle="buttons" id="buysellBtn">
+      <label class="btn btn-sm btn-outline-danger {{trade.entry.isSell() ? 'active' : ''}}" *ngIf="mode.isCreate() || (!mode.isCreate() && trade.entry.isSell())">
+        <input type="radio" name="options" id="sideSell" value="SELL" autocomplete="off" [(ngModel)]="trade.entry.side"> Sell
+      </label>
+      <label class="btn btn-sm btn-outline-success {{trade.entry.isBuy() ? 'active' : ''}}" *ngIf="mode.isCreate() || (!mode.isCreate() && trade.entry.isBuy())">
+        <input type="radio" name="options" id="sideBuy"  value="BUY" autocomplete="off" [(ngModel)]="trade.entry.side"> Buy
+      </label>
+    </div>
+    </div>
+  </div>
+</fieldset>

admin/src/app/trade-details/entry-details.component.ts

@@ -0,0 +1,45 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {Mode, Entry, EntryTarget, TradeDetails} from '../trade-details';
+
+@Component({
+  selector: 'app-entry-details',
+  templateUrl: './entry-details.component.html',
+  styleUrls: ['./trade-details.component.css']
+})
+
+export class EntryDetailsComponent implements OnInit {
+  @Input()
+  trade: TradeDetails;
+
+  @Input()
+  mode: Mode;
+
+  entryTarget: EntryTarget;
+
+  constructor() {
+
+  }
+
+  ngOnInit(): void {
+  }
+
+  deleteTarget(exitTarget: EntryTarget) {
+    this.entryTarget = null;
+    this.trade.entry = null;
+  }
+
+  addNewTarget() {
+    if (this.entryTarget) {
+      return;
+    }
+
+    this.entryTarget = new EntryTarget();
+
+    if (!this.trade.entry) {
+      this.trade.entry = new Entry();
+    }
+
+    this.trade.entry.targets = [this.entryTarget];
+  }
+}
+

admin/src/app/trade-details/trade-details.component.html

@@ -75,6 +75,7 @@ <h4 class="modal-title pull-left">Trade ({{mode.str()}} mode)</h4>
           </div>
         </div>
       </fieldset>
+    <app-entry-details [trade]="trade" [mode]="mode"></app-entry-details>
     <app-exit-details [trade]="trade" [mode]="mode"></app-exit-details>
     <app-sl-details [trade]="trade" [mode]="mode"></app-sl-details>
   </div>