84 lines
3.5 KiB
HTML
84 lines
3.5 KiB
HTML
<h2 mat-dialog-title>{{isEditMode ? 'Edit Strategy' : 'Create Strategy'}}</h2>
|
|
|
|
<form [formGroup]="strategyForm" (ngSubmit)="onSubmit()">
|
|
<mat-dialog-content class="mat-typography">
|
|
<div class="grid grid-cols-1 gap-4">
|
|
<!-- Basic Strategy Information -->
|
|
<mat-form-field appearance="outline" class="w-full">
|
|
<mat-label>Strategy Name</mat-label>
|
|
<input matInput formControlName="name" placeholder="e.g., My Moving Average Crossover">
|
|
<mat-error *ngIf="strategyForm.get('name')?.invalid">Name is required</mat-error>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="outline" class="w-full">
|
|
<mat-label>Description</mat-label>
|
|
<textarea matInput formControlName="description" rows="3"
|
|
placeholder="Describe what this strategy does..."></textarea>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="outline" class="w-full">
|
|
<mat-label>Strategy Type</mat-label>
|
|
<mat-select formControlName="type" (selectionChange)="onStrategyTypeChange($event.value)">
|
|
<mat-option *ngFor="let type of strategyTypes" [value]="type">
|
|
{{type}}
|
|
</mat-option>
|
|
</mat-select>
|
|
<mat-error *ngIf="strategyForm.get('type')?.invalid">Strategy type is required</mat-error>
|
|
</mat-form-field>
|
|
|
|
<!-- Symbol Selection -->
|
|
<div class="w-full">
|
|
<label class="text-sm">Trading Symbols</label>
|
|
<div class="flex flex-wrap gap-2 mb-2">
|
|
<mat-chip *ngFor="let symbol of selectedSymbols" [removable]="true"
|
|
(removed)="removeSymbol(symbol)">
|
|
{{symbol}}
|
|
<mat-icon matChipRemove>cancel</mat-icon>
|
|
</mat-chip>
|
|
</div>
|
|
|
|
<div class="flex gap-2">
|
|
<mat-form-field appearance="outline" class="flex-1">
|
|
<mat-label>Add Symbol</mat-label>
|
|
<input matInput #symbolInput placeholder="e.g., AAPL">
|
|
</mat-form-field>
|
|
<button type="button" mat-raised-button color="primary"
|
|
(click)="addSymbol(symbolInput.value); symbolInput.value = ''">
|
|
Add
|
|
</button>
|
|
</div>
|
|
|
|
<div class="mt-2">
|
|
<p class="text-sm text-gray-500 mb-1">Suggested symbols:</p>
|
|
<div class="flex flex-wrap gap-2">
|
|
<button type="button" *ngFor="let symbol of availableSymbols"
|
|
mat-stroked-button (click)="addSymbol(symbol)"
|
|
[disabled]="selectedSymbols.includes(symbol)">
|
|
{{symbol}}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dynamic Strategy Parameters -->
|
|
<div *ngIf="strategyForm.get('type')?.value && Object.keys(parameters).length > 0">
|
|
<h3 class="text-lg font-semibold mb-2">Strategy Parameters</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<mat-form-field *ngFor="let param of parameters | keyvalue" appearance="outline">
|
|
<mat-label>{{param.key}}</mat-label>
|
|
<input matInput [value]="param.value"
|
|
(input)="updateParameter(param.key, $any($event.target).value)">
|
|
</mat-form-field>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</mat-dialog-content>
|
|
|
|
<mat-dialog-actions align="end">
|
|
<button mat-button mat-dialog-close>Cancel</button>
|
|
<button mat-raised-button color="primary" type="submit"
|
|
[disabled]="strategyForm.invalid || selectedSymbols.length === 0">
|
|
{{isEditMode ? 'Update' : 'Create'}}
|
|
</button>
|
|
</mat-dialog-actions>
|
|
</form>
|