`;
+
+ hoverPanel.innerHTML = hoverHtml;
+ tradeItem.appendChild(hoverPanel);
+
+ return tradeItem;
}
- // Call to display the 'Create new trade' dialog.
- open_tradeForm() { this.formDialog_el.style.display = "grid"; }
- // Call to hide the 'Create trade' dialog.
- close_tradeForm() { this.formDialog_el.style.display = "none"; }
+ /**
+ * Updates a single trade's P/L display.
+ * @param {string} tradeId - The trade ID.
+ * @param {number} pl - The P/L value.
+ * @param {number} plPct - The P/L percentage.
+ */
+ updateTradePL(tradeId, pl, plPct) {
+ const plEl = document.getElementById(`${tradeId}_pl_value`);
+ if (plEl) {
+ const plClass = pl >= 0 ? 'positive' : 'negative';
+ plEl.className = `trade-value trade-pl ${plClass}`;
+ plEl.textContent = `${this._formatPL(pl)} (${this._formatPct(plPct)})`;
- fetchTrades(){
- if (window.UI.data.comms) {
- window.UI.data.comms.sendToApp('request', { request: 'trades', user_name: window.UI.data.user_name });
- } else {
- console.error('Comms instance not available.');
+ // Add flash animation
+ plEl.classList.add('trade-pl-flash');
+ setTimeout(() => plEl.classList.remove('trade-pl-flash'), 300);
}
}
- // Call to display the 'Trade details' dialog.
- open_tradeDetails_Form() { document.getElementById("trade_details_form").style.display = "grid"; }
- // Call to hide the 'Create new signal' dialog.
- close_tradeDetails_Form() { document.getElementById("trade_details_form").style.display = "none"; }
-
- submitNewTrade(){
- // Collect all the input fields.
- var target = this.target_el.value; // The target to trade ['binance'|'test_exchange'].
- var symbol = window.UI.data.trading_pair; // The symbol to trade at.
- var price = this.priceInput_el.value; // The price to trade at this is ignored in a market trade.
- var side = this.side_el.value; // The side to trade at.
- var orderType = this.orderType_el.value; // The orderType for the trade.
- var quantity = this.qtyInput_el.value; // The base quantity to trade.
- var data = {
- target, symbol, price, side, orderType, quantity
- };
- window.UI.data.comms.sendToApp( "new_trade", data);
- this.close_tradeForm();
- }
- set_data(trades){
- console.log('incoming trades!!!');
- console.log(trades);
- // Create a list item for every trade and add it to a UL element.
- var ul = this.activeTLst_el;
-
- // loop through a provided list of trades and attributes.
- for (let trade in trades){
- // Create a Json object from each trade.
- if (typeof(trades[trade]) == 'string')
- // During initialization the object received from the server is in string form.
- var obj = JSON.parse(trades[trade]);
- else
- // When trades are created this function receives a javascript object.
- var obj=trades[trade];
- // Keep a local record of the trade.
- this.trades.push(obj);
- // Define the function that is called when closing an individual trade.
- let click_func = "window.UI.trade.closeTrade('" + obj.unique_id + "')";
-
- // Create a close button for every individual trade.
- let close_btn = '';
- // Format some markup to display the attributes of the trade.
- //let trade_id = " " + obj.unique_id + ": ";
- let trade_qty = "" + obj.stats.qty_filled + "";
- let trade_profit = "" + obj.stats.profit + "";
- let trade_pct = "" + obj.stats.profit_pct + "";
- let trade_icon = "";
- // Stick all the html together.
- let html = trade_icon;
- html += "QTY:" + trade_qty + "";
- html += "P/L:" + trade_profit + "";
- html += "P/L %:" + trade_pct + "";
- html += close_btn;
- // Put it in a div.
- html = "
" + html + "
"
- // Create the list item.
- let li = document.createElement("li");
- // Give it an id.
- li.id = obj.unique_id + '_item';
- // Inject the html.
- li.innerHTML= html;
- // And add it the the UL we created earlier.
- ul.appendChild(li);
- }
- console.log('pushed trades!!!');
- console.log(this.trades);
-
- }
- closeTrade(tradeId){
- // Requests that the server close a specific trade.
- window.UI.data.comms.sendToApp('close_trade', tradeId);
- // Get the trade element from the UI
- let child = document.getElementById(tradeId + '_item');
- // Ask the parent of the trade element to remove its child(trade) from the document.
- child.parentNode.removeChild(child);
- }
- update_received(trade_updts){
-// if ( 'cmd' in trade_updts) {
-// let alert =
-// window.UI.alerts.publish_alerts('trade', trade_updts);
-// this.executeCmd(trade_updts.cmd);
-// }
- console.log('Received trade update.');
- console.log('Updating trade updating local list.');
- this.trades = trade_updts;
- for (let trade in this.trades){
- console.log('dont forget to update the html.');
- console.log(trade);
+ /**
+ * Removes a trade card from the display.
+ * @param {string} tradeId - The trade ID.
+ */
+ removeTradeCard(tradeId) {
+ const card = document.querySelector(`[data-trade-id="${tradeId}"]`);
+ if (card) {
+ card.classList.add('trade-card-removing');
+ setTimeout(() => card.remove(), 300);
}
}
+ // ============ Formatting helpers ============
+
+ _formatNumber(num) {
+ if (num === null || num === undefined) return 'N/A';
+ return parseFloat(num).toLocaleString(undefined, { maximumFractionDigits: 6 });
+ }
+
+ _formatPrice(price) {
+ if (price === null || price === undefined) return 'N/A';
+ return parseFloat(price).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 8 });
+ }
+
+ _formatPL(pl) {
+ if (pl === null || pl === undefined) return '$0.00';
+ const formatted = Math.abs(pl).toFixed(2);
+ return pl >= 0 ? `+$${formatted}` : `-$${formatted}`;
+ }
+
+ _formatPct(pct) {
+ if (pct === null || pct === undefined) return '0.00%';
+ const formatted = Math.abs(pct).toFixed(2);
+ return pct >= 0 ? `+${formatted}%` : `-${formatted}%`;
+ }
+
+ /**
+ * Sets the callback function for closing a trade.
+ * @param {Function} callback - The callback function.
+ */
+ registerCloseTradeCallback(callback) {
+ this.onCloseTrade = callback;
+ }
+}
+
+
+/**
+ * TradeDataManager - Manages in-memory trade data store
+ */
+class TradeDataManager {
+ constructor() {
+ this.trades = [];
+ }
+
+ /**
+ * Fetches trades from the server.
+ * @param {Object} comms - The communications instance.
+ * @param {Object} data - An object containing user data.
+ */
+ fetchTrades(comms, data) {
+ if (comms) {
+ try {
+ const requestData = {
+ request: 'trades',
+ user_name: data?.user_name
+ };
+ comms.sendToApp('request', requestData);
+ } catch (error) {
+ console.error("Error fetching trades:", error.message);
+ }
+ } else {
+ throw new Error('Communications instance not available.');
+ }
+ }
+
+ /**
+ * Adds a new trade to the local store.
+ * @param {Object} data - The trade data.
+ */
+ addTrade(data) {
+ const tradeData = data.trade || data;
+ console.log("Adding new trade:", tradeData);
+
+ if (!tradeData.unique_id && !tradeData.tbl_key) {
+ console.error("Trade data missing identifier:", tradeData);
+ return;
+ }
+
+ // Check for duplicates
+ const id = tradeData.unique_id || tradeData.tbl_key;
+ const exists = this.trades.find(t => t.unique_id === id || t.tbl_key === id);
+ if (!exists) {
+ this.trades.push(tradeData);
+ }
+ }
+
+ /**
+ * Retrieves a trade by its ID.
+ * @param {string} tradeId - The trade ID.
+ * @returns {Object|null} - The trade object or null.
+ */
+ getTradeById(tradeId) {
+ return this.trades.find(t => t.unique_id === tradeId || t.tbl_key === tradeId) || null;
+ }
+
+ /**
+ * Updates trade data (including P/L updates).
+ * @param {Object} updateData - The updated trade data.
+ */
+ updateTrade(updateData) {
+ const tradeId = updateData.id || updateData.unique_id || updateData.tbl_key;
+ if (!tradeId) return;
+
+ const trade = this.getTradeById(tradeId);
+ if (trade) {
+ // Update stats
+ if (updateData.pl !== undefined) {
+ trade.stats = trade.stats || {};
+ trade.stats.profit = updateData.pl;
+ }
+ if (updateData.pl_pct !== undefined) {
+ trade.stats = trade.stats || {};
+ trade.stats.profit_pct = updateData.pl_pct;
+ }
+ if (updateData.status) {
+ trade.status = updateData.status;
+ }
+ }
+ }
+
+ /**
+ * Removes a trade from the store.
+ * @param {string} tradeId - The trade ID.
+ */
+ removeTrade(tradeId) {
+ console.log(`Removing trade: ${tradeId}`);
+ this.trades = this.trades.filter(
+ t => t.unique_id !== tradeId && t.tbl_key !== tradeId
+ );
+ }
+
+ /**
+ * Returns all trades.
+ * @returns {Object[]} - The list of trades.
+ */
+ getAllTrades() {
+ return this.trades;
+ }
+
+ /**
+ * Sets all trades (used when loading from server).
+ * @param {Object[]} trades - The list of trades.
+ */
+ setTrades(trades) {
+ this.trades = Array.isArray(trades) ? trades : [];
+ }
+
+ /**
+ * Applies batch P/L updates from server.
+ * @param {Object[]} updates - Array of trade update objects.
+ */
+ applyUpdates(updates) {
+ if (!Array.isArray(updates)) return;
+
+ for (const update of updates) {
+ this.updateTrade(update);
+ }
+ }
+
+ /**
+ * Gets trade statistics.
+ * @returns {Object} - Statistics object.
+ */
+ getStatistics() {
+ const totalTrades = this.trades.length;
+ const paperTrades = this.trades.filter(t => t.is_paper).length;
+ const liveTrades = totalTrades - paperTrades;
+
+ let totalPL = 0;
+ for (const trade of this.trades) {
+ totalPL += (trade.stats?.profit || 0);
+ }
+
+ return {
+ totalTrades,
+ paperTrades,
+ liveTrades,
+ totalPL
+ };
+ }
+}
+
+
+/**
+ * Trade - Main coordinator class that manages TradeUIManager, TradeDataManager, and SocketIO communication
+ */
+class Trade {
+ constructor(ui = null) {
+ this.ui = ui;
+ this.comms = null;
+ this.data = null;
+
+ this.dataManager = new TradeDataManager();
+ this.uiManager = new TradeUIManager();
+
+ // Set up close callback
+ this.uiManager.registerCloseTradeCallback(this.closeTrade.bind(this));
+
+ // Bind methods
+ this.submitNewTrade = this.submitNewTrade.bind(this);
+
+ this._initialized = false;
+ }
+
+ /**
+ * Initializes the Trade instance.
+ * Called after page load when UI.data is available.
+ * @param {Object} config - Configuration object.
+ */
+ initialize(config = {}) {
+ try {
+ // Get references from global UI if not provided in constructor
+ if (!this.ui && window.UI) {
+ this.ui = window.UI;
+ }
+ this.data = this.ui?.data || window.UI?.data;
+ this.comms = this.data?.comms;
+
+ this.uiManager.initUI(config);
+
+ if (!this.comms) {
+ console.error("Communications instance not available.");
+ return;
+ }
+
+ // Register handlers with Comms
+ this.comms.on('trades', this.handleTradesResponse.bind(this));
+ this.comms.on('trade_created', this.handleTradeCreated.bind(this));
+ this.comms.on('trade_closed', this.handleTradeClosed.bind(this));
+ this.comms.on('trade_error', this.handleTradeError.bind(this));
+ this.comms.on('updates', this.handleUpdates.bind(this));
+ this.comms.on('trade_update', this.handleTradeUpdate.bind(this));
+
+ // Set initial price if available
+ if (this.data?.price_history && this.data.price_history.length > 0) {
+ const lastPrice = this.data.price_history[this.data.price_history.length - 1].close;
+ this.uiManager.updateCurrentPrice(lastPrice);
+ }
+
+ // Update trading pair display
+ this._updateTradingPairDisplay();
+
+ // Fetch existing trades
+ this.dataManager.fetchTrades(this.comms, this.data);
+
+ this._initialized = true;
+ console.log("Trade module initialized successfully");
+ } catch (error) {
+ console.error("Error initializing Trade:", error);
+ }
+ }
+
+ /**
+ * Updates the trading pair display in the form.
+ * @private
+ */
+ _updateTradingPairDisplay() {
+ const symbolDisplay = document.getElementById('trade_symbol_display');
+ if (symbolDisplay && this.data?.trading_pair) {
+ symbolDisplay.textContent = this.data.trading_pair;
+ }
+ }
+
+ /**
+ * Handle initial trades list response from server.
+ * @param {Array} data - List of trade objects.
+ */
+ handleTradesResponse(data) {
+ console.log("Received trades list:", data);
+ if (Array.isArray(data)) {
+ this.dataManager.setTrades(data);
+ this.uiManager.updateTradesHtml(this.dataManager.getAllTrades());
+ this._updateStatistics();
+ }
+ }
+
+ /**
+ * Handle new trade created event.
+ * @param {Object} data - Server response with trade data.
+ */
+ handleTradeCreated(data) {
+ console.log("Trade created:", data);
+ if (data.success) {
+ this.dataManager.addTrade(data);
+ this.uiManager.updateTradesHtml(this.dataManager.getAllTrades());
+ this._updateStatistics();
+ } else {
+ alert(`Failed to create trade: ${data.message}`);
+ }
+ }
+
+ /**
+ * Handle trade closed event.
+ * @param {Object} data - Server response with closed trade info.
+ */
+ handleTradeClosed(data) {
+ console.log("Trade closed:", data);
+ if (data.success) {
+ const tradeId = data.trade_id;
+ this.dataManager.removeTrade(tradeId);
+ this.uiManager.removeTradeCard(tradeId);
+ this._updateStatistics();
+
+ // Show P/L notification
+ if (data.final_pl !== undefined) {
+ const plText = data.final_pl >= 0
+ ? `+$${data.final_pl.toFixed(2)}`
+ : `-$${Math.abs(data.final_pl).toFixed(2)}`;
+ console.log(`Trade closed with P/L: ${plText}`);
+ }
+ }
+ }
+
+ /**
+ * Handle trade error.
+ * @param {Object} data - Error data.
+ */
+ handleTradeError(data) {
+ console.error("Trade error:", data.message);
+ alert(`Trade error: ${data.message}`);
+ }
+
+ /**
+ * Handle updates (including trade P/L updates).
+ * @param {Object} data - Update data from server.
+ */
+ handleUpdates(data) {
+ const { trade_updts } = data;
+ if (trade_updts && Array.isArray(trade_updts)) {
+ this.dataManager.applyUpdates(trade_updts);
+
+ // Update UI for each trade
+ for (const update of trade_updts) {
+ const tradeId = update.id;
+ if (update.pl !== undefined && update.pl_pct !== undefined) {
+ this.uiManager.updateTradePL(tradeId, update.pl, update.pl_pct);
+ }
+ }
+
+ this._updateStatistics();
+ }
+ }
+
+ /**
+ * Handle individual trade update from execution loop.
+ * @param {Object} data - Single trade update data from server.
+ */
+ handleTradeUpdate(data) {
+ console.log('Trade update event received:', data);
+ if (data && data.id) {
+ // Update the trade in data manager
+ this.dataManager.applyUpdates([data]);
+
+ // Update the UI
+ if (data.pl !== undefined && data.pl_pct !== undefined) {
+ this.uiManager.updateTradePL(data.id, data.pl, data.pl_pct);
+ }
+
+ this._updateStatistics();
+ }
+ }
+
+ // ================ Form Methods ================
+
+ /**
+ * Opens the trade creation form.
+ */
+ open_tradeForm() {
+ // Get current price if available
+ let currentPrice = null;
+ if (this.data?.price_history && this.data.price_history.length > 0) {
+ currentPrice = this.data.price_history[this.data.price_history.length - 1].close;
+ }
+ this.uiManager.displayForm(currentPrice);
+ }
+
+ /**
+ * Closes the trade form.
+ */
+ close_tradeForm() {
+ this.uiManager.hideForm();
+ }
+
+ /**
+ * Submits a new trade.
+ */
+ submitNewTrade() {
+ if (!this.comms) {
+ console.error("Comms instance not available.");
+ return;
+ }
+
+ const formElement = this.uiManager.formElement;
+ if (!formElement) {
+ console.error("Form element not available.");
+ return;
+ }
+
+ const target = this.uiManager.targetSelect?.value || 'test_exchange';
+ const symbol = this.data?.trading_pair || '';
+ const orderType = this.uiManager.orderTypeSelect?.value || 'MARKET';
+ const side = this.uiManager.sideSelect?.value || 'buy';
+
+ let price;
+ if (orderType === 'MARKET') {
+ price = parseFloat(this.uiManager.currentPriceDisplay?.value || 0);
+ } else {
+ price = parseFloat(this.uiManager.priceInput?.value || 0);
+ }
+
+ const quantity = parseFloat(this.uiManager.qtyInput?.value || 0);
+
+ // Validation
+ if (!symbol) {
+ alert('Please select a trading pair first.');
+ return;
+ }
+ if (quantity <= 0) {
+ alert('Please enter a valid quantity.');
+ return;
+ }
+ if (orderType === 'LIMIT' && price <= 0) {
+ alert('Please enter a valid price for limit orders.');
+ return;
+ }
+
+ const tradeData = {
+ target,
+ symbol,
+ price,
+ side,
+ orderType,
+ quantity,
+ user_name: this.data?.user_name
+ };
+
+ console.log("Submitting trade:", tradeData);
+ this.comms.sendToApp('new_trade', tradeData);
+ this.close_tradeForm();
+ }
+
+ /**
+ * Closes a trade.
+ * @param {string} tradeId - The trade ID.
+ */
+ closeTrade(tradeId) {
+ if (!this.comms) {
+ console.error("Comms instance not available.");
+ return;
+ }
+
+ console.log(`Closing trade: ${tradeId}`);
+ this.comms.sendToApp('close_trade', { trade_id: tradeId });
+ }
+
+ /**
+ * Fetches trades from server.
+ */
+ fetchTrades() {
+ this.dataManager.fetchTrades(this.comms, this.data);
+ }
+
+ /**
+ * Updates the statistics panel with trade data.
+ * @private
+ */
+ _updateStatistics() {
+ const stats = this.dataManager.getStatistics();
+
+ // Update statistics panel if available
+ const activeTradesEl = document.getElementById('stat_active_trades');
+ const totalPLEl = document.getElementById('stat_trades_pl');
+ const paperCountEl = document.getElementById('stat_paper_trades');
+ const liveCountEl = document.getElementById('stat_live_trades');
+
+ if (activeTradesEl) {
+ activeTradesEl.textContent = stats.totalTrades;
+ }
+ if (totalPLEl) {
+ const plClass = stats.totalPL >= 0 ? 'positive' : 'negative';
+ totalPLEl.className = `stat-value ${plClass}`;
+ totalPLEl.textContent = stats.totalPL >= 0
+ ? `+$${stats.totalPL.toFixed(2)}`
+ : `-$${Math.abs(stats.totalPL).toFixed(2)}`;
+ }
+ if (paperCountEl) {
+ paperCountEl.textContent = stats.paperTrades;
+ }
+ if (liveCountEl) {
+ liveCountEl.textContent = stats.liveTrades;
+ }
+ }
+
+ // ================ Legacy Methods (for backwards compatibility) ================
+
+ /**
+ * Legacy method: Connect elements (calls initUI).
+ */
+ connectElements(config = {}) {
+ this.uiManager.initUI({
+ priceId: config.price || 'price',
+ currentPriceId: config.currentPrice || 'currentPrice',
+ qtyId: config.quantity || 'quantity',
+ tradeValueId: config.tradeValue || 'tradeValue',
+ orderTypeId: config.orderType || 'orderType',
+ tradeTargetId: config.target || 'tradeTarget',
+ sideId: config.side || 'side',
+ formElId: config.ntf || 'new_trade_form',
+ targetId: config.atl || 'tradesContainer'
+ });
+ }
+
+ /**
+ * Legacy method: Set data (handles trades response).
+ * @param {Array} trades - List of trades.
+ */
+ set_data(trades) {
+ this.handleTradesResponse(trades);
+ }
+
+ /**
+ * Legacy method: Update received (handles updates).
+ * @param {Array} trade_updts - Trade updates.
+ */
+ update_received(trade_updts) {
+ this.handleUpdates({ trade_updts });
+ }
+
+ /**
+ * Legacy: Open trade details form.
+ */
+ open_tradeDetails_Form() {
+ const el = document.getElementById("trade_details_form");
+ if (el) el.style.display = "grid";
+ }
+
+ /**
+ * Legacy: Close trade details form.
+ */
+ close_tradeDetails_Form() {
+ const el = document.getElementById("trade_details_form");
+ if (el) el.style.display = "none";
+ }
+
+ /**
+ * Gets all trades.
+ * @returns {Object[]} - The list of trades.
+ */
+ get trades() {
+ return this.dataManager.getAllTrades();
+ }
}
diff --git a/src/templates/new_trade_popup.html b/src/templates/new_trade_popup.html
index 1cf4294..7b795e2 100644
--- a/src/templates/new_trade_popup.html
+++ b/src/templates/new_trade_popup.html
@@ -1,47 +1,50 @@