106 lines
5.2 KiB
HTML
106 lines
5.2 KiB
HTML
<!-- New Trade Form Popup -->
|
|
<div class="form-popup" id="new_trade_form" style="display: none; overflow: hidden; position: absolute; width: 400px; height: 580px; border-radius: 10px;">
|
|
|
|
<!-- Draggable Header Section -->
|
|
<div class="dialog-header" id="trade_draggable_header">
|
|
<h1>Create New Trade</h1>
|
|
<button class="dialog-close-btn" onclick="UI.trade.close_tradeForm()">×</button>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<form action="/new_trade" class="form-container" style="padding: 15px; overflow-y: auto;">
|
|
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: center;">
|
|
<!-- Trade Mode Selection -->
|
|
<label for="tradeTarget"><b>Trade Mode:</b></label>
|
|
<select name="tradeTarget" id="tradeTarget">
|
|
<option value="test_exchange">Paper Trade</option>
|
|
<!-- Live exchanges populated dynamically -->
|
|
</select>
|
|
|
|
<!-- Testnet Toggle - only shown for live exchanges -->
|
|
<div id="testnet-row" style="grid-column: 1 / span 2; display: none; padding: 8px; background: #2a2a2a; border-radius: 4px;">
|
|
<label style="display: flex; align-items: center; gap: 8px; font-size: 12px;">
|
|
<input type="checkbox" id="tradeTestnet" checked>
|
|
<span><b>Testnet Mode</b> (Recommended for testing)</span>
|
|
</label>
|
|
<small id="testnet-warning" style="color: #ff6600; font-size: 10px; display: block; margin-top: 3px;">
|
|
Unchecking uses REAL MONEY on the exchange
|
|
</small>
|
|
<small id="testnet-unavailable" style="color: #888; font-size: 10px; display: none; margin-top: 3px;">
|
|
Testnet not available for this exchange
|
|
</small>
|
|
</div>
|
|
|
|
<!-- Exchange Selection (for price data source - hidden for paper trades) -->
|
|
<div id="exchange-row" style="display: contents;">
|
|
<label for="tradeExchange"><b>Exchange:</b></label>
|
|
<select name="tradeExchange" id="tradeExchange">
|
|
<!-- Exchanges populated dynamically, defaults to chart view -->
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Symbol Selection -->
|
|
<label for="tradeSymbol"><b>Symbol:</b></label>
|
|
<select name="tradeSymbol" id="tradeSymbol" style="width: 100%; padding: 4px; height: 28px; font-size: 13px; box-sizing: border-box;">
|
|
<!-- Populated dynamically, defaults to chart view -->
|
|
</select>
|
|
|
|
<!-- Side Input field -->
|
|
<label for="side"><b>Side:</b></label>
|
|
<select name="side" id="side">
|
|
<option value="buy">Buy</option>
|
|
<option value="sell">Sell</option>
|
|
</select>
|
|
|
|
<!-- Order Type Input field -->
|
|
<label for="orderType"><b>Order Type:</b></label>
|
|
<select name="orderType" id="orderType">
|
|
<option value="MARKET">Market</option>
|
|
<option value="LIMIT">Limit</option>
|
|
</select>
|
|
|
|
<!-- Price Input field -->
|
|
<label id="price-label" for="price"><b>Price:</b></label>
|
|
<div>
|
|
<input type="number" min="0" value="0.1" step="0.00000001" name="price" id="price" style="display: none; width: 100%;">
|
|
<output name="currentPrice" id="currentPrice"></output>
|
|
</div>
|
|
|
|
<!-- Quantity Input field -->
|
|
<label for="quantity"><b>Quantity:</b></label>
|
|
<input type="number" min="0" value="0" step="0.00000001" name="quantity" id="quantity" style="width: 100%;">
|
|
|
|
<!-- Value field -->
|
|
<label for="tradeValue"><b>Est. Value:</b></label>
|
|
<output name="tradeValue" id="tradeValue" for="quantity price">0</output>
|
|
|
|
<!-- Stop Loss (optional) -->
|
|
<label for="stopLoss"><b>Stop Loss:</b></label>
|
|
<input type="number" min="0" step="0.00000001" name="stopLoss" id="stopLoss"
|
|
placeholder="Optional - triggers auto-close" style="width: 100%;">
|
|
|
|
<!-- Take Profit (optional) -->
|
|
<label for="takeProfit"><b>Take Profit:</b></label>
|
|
<input type="number" min="0" step="0.00000001" name="takeProfit" id="takeProfit"
|
|
placeholder="Optional - triggers auto-close" style="width: 100%;">
|
|
|
|
<!-- Time in Force -->
|
|
<label for="timeInForce"><b>Time in Force:</b></label>
|
|
<select name="timeInForce" id="timeInForce" style="width: 100%;">
|
|
<option value="GTC">Good 'til Cancelled (GTC)</option>
|
|
<option value="IOC">Immediate or Cancel (IOC)</option>
|
|
<option value="FOK">Fill or Kill (FOK)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Buttons -->
|
|
<div style="text-align: center; margin-top: 15px;">
|
|
<button type="button" class="btn cancel" onclick="UI.trade.close_tradeForm()">Close</button>
|
|
<button type="button" class="btn next" onclick="UI.trade.submitNewTrade()">Create Trade</button>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Resizer -->
|
|
<div id="resize-trade" class="resize-handle"></div>
|
|
</div>
|