File size: 6,247 Bytes
07cf142
9d4cd83
 
 
07cf142
9d4cd83
 
 
 
 
 
 
 
07cf142
9d4cd83
 
 
 
 
 
 
 
07cf142
9d4cd83
 
 
 
 
 
 
 
07cf142
df4a76e
9d4cd83
 
df4a76e
 
 
 
 
9d4cd83
 
 
 
 
 
 
 
 
 
07cf142
9d4cd83
 
07cf142
9d4cd83
df4a76e
9d4cd83
 
 
 
df4a76e
9d4cd83
 
 
 
 
 
 
07cf142
9d4cd83
df4a76e
 
 
 
 
 
9d4cd83
 
07cf142
df4a76e
 
 
 
 
 
 
 
 
9d4cd83
 
 
 
 
 
df4a76e
9d4cd83
 
 
 
 
 
 
 
 
00fb9a1
9d4cd83
00fb9a1
 
 
 
 
 
 
 
 
 
9d4cd83
 
 
 
 
 
 
eb50c6c
9d4cd83
 
 
 
 
07cf142
 
9d4cd83
07cf142
b5872a0
07cf142
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<div class="tools-page">
  <div class="filters-content">
    <section class="filters-card">
      <h2 class="title">Market Selection</h2>

      <form class="grid" autocomplete="off">
        <!-- Country -->
        <mat-form-field appearance="fill" class="col">
          <mat-label>Country</mat-label>
          <mat-select [(ngModel)]="selectedCountry" name="country" (selectionChange)="onCountryChange()">
            <mat-option *ngFor="let c of countries" [value]="c">{{ c }}</mat-option>
          </mat-select>
        </mat-form-field>

        <!-- Exchange -->
        <mat-form-field appearance="fill" class="col">
          <mat-label>Exchange</mat-label>
          <mat-select [(ngModel)]="selectedExchange" name="exchange"
                      [disabled]="!selectedCountry" (selectionChange)="onExchangeChange()">
            <mat-option *ngFor="let e of getMarket()" [value]="e">{{ e }}</mat-option>
          </mat-select>
        </mat-form-field>

        <!-- Index -->
        <mat-form-field appearance="fill" class="col">
          <mat-label>Index</mat-label>
          <mat-select [(ngModel)]="selectedIndexName" name="index"
                      [disabled]="!selectedExchange" (selectionChange)="onIndexChange()">
            <mat-option *ngFor="let d of getMarketDivision()" [value]="d">{{ d }}</mat-option>
          </mat-select>
        </mat-form-field>

        <!-- Companies (multi-select) bound to indexSelected -->
        <mat-form-field appearance="fill" class="full">
          <mat-label>Select Companies (multi-select)</mat-label>
          <mat-select [(ngModel)]="indexSelected"
                      (ngModelChange)="onCompaniesModelChange($event)"
                      name="companies"
                      [disabled]="companies.length === 0"
                      multiple>
            <mat-option (click)="toggleSelectAll()" [disabled]="companies.length === 0">
              {{ isAllSelected() ? 'Unselect All' : 'Select All' }}
            </mat-option>
            <mat-option *ngFor="let c of getCompanies(); trackBy: trackBySymbol" [value]="c.symbol">
              {{ c.company }} ({{ c.symbol }})
            </mat-option>
          </mat-select>
        </mat-form-field>
      </form>
    </section>

    <section class="filters-card">
      <h2 class="title">Search</h2>

      <form class="grid" autocomplete="off">
        <!-- Search ticker/company via backend (/searchcompanies) -->
        <mat-form-field appearance="fill" class="full ticker-search">
          <mat-label>Search ticker</mat-label>
          <input matInput
                 type="text"
                 placeholder="Type symbol or company (e.g., INFY, RELIANCE)"
                 [formControl]="tickerCtrl"
                 [matAutocomplete]="tickAuto" />
          <button mat-icon-button matSuffix *ngIf="tickerCtrl.value" (click)="clearTickerSearch()" aria-label="Clear">
            <mat-icon>close</mat-icon>
          </button>
          <mat-icon matSuffix>search</mat-icon>
        </mat-form-field>

        <mat-autocomplete #tickAuto="matAutocomplete" (optionSelected)="onPickTicker($event.option.value)">
          <mat-option *ngFor="let h of filteredCompanies$ | async; trackBy: trackBySymbol" [value]="h">
            <div style="display:flex;align-items:center;gap:10px;width:100%">
              <strong style="min-width:90px">{{ h.symbol }}</strong>
              <span style="flex:1;opacity:.85;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{{ h.company }}</span>
              <span style="font-size:12px;opacity:.75">{{ h.indexCode }}</span>
            </div>
          </mat-option>
        </mat-autocomplete>

        <!-- Chips: ONLY search-picked items -->
        <mat-chip-listbox *ngIf="selectedChips.length" class="chipbar" aria-label="Picked tickers">
          <mat-chip-row *ngFor="let t of selectedChips; trackBy: trackBySymbol"
                        [removable]="true"
                        (removed)="onRemoveChip(t.symbol)">
            {{ t.symbol }}
            <ng-container *ngIf="t.company && t.company !== t.symbol">
              — {{ t.company }}
            </ng-container>
            <button matChipRemove aria-label="Remove"><mat-icon>close</mat-icon></button>
          </mat-chip-row>
        </mat-chip-listbox>
      </form>
    </section>
  </div>

  <div class="type-content">
    <section class="filters-card">
      <h2 class="title">Trading Type</h2>

      <form class="grid" autocomplete="off">
        <mat-form-field appearance="fill" class="col">
          <mat-label>Trading Type</mat-label>
          <mat-select [(ngModel)]="selectedTradingType" name="tradingType"
                      [disabled]="!selectedCompanies || selectedCompanies.length === 0">
            <mat-option value="intraday" disabled>Intraday</mat-option>
            <mat-option value="swing">Swing trading</mat-option>
            <mat-option value="longTerm" disabled>Position trading (long-term)</mat-option>
            <mat-option value="scalping" disabled>Scalping</mat-option>
            <mat-option value="momentum" disabled>Momentum Trading</mat-option>
            <mat-option value="trendFollowing" disabled>Trend-Following</mat-option>
            <mat-option value="meanReversion" disabled>Mean-Reversion</mat-option>
            <mat-option value="breakout" disabled>Breakout Trading</mat-option>
            <mat-option value="options" disabled>Options Trading</mat-option>
            <mat-option value="futures" disabled>Futures Trading</mat-option>
            <mat-option value="arbitrage" disabled>Arbitrage Trading</mat-option>
            <mat-option value="eventDriven" disabled>Event-Driven Trading</mat-option>
          </mat-select>
        </mat-form-field>

        <button mat-raised-button
                type="button"
                class="run-btn"
                (click)="submit()"
                [disabled]="loading || !selectedCompanies || selectedCompanies.length === 0">
          Run Analysis
        </button>
      </form>
    </section>
  </div>
</div>

<!-- Loading overlay -->
<div class="overlay" *ngIf="loading">
  <mat-spinner diameter="100"></mat-spinner>
  <div class="hint">Processing…</div>
</div>