Enhance agent.user.js by introducing a dashboard overlay for improved user interaction. Update server management functions and add a new dashboard update interval for real-time updates. Refactor existing overlay functionalities for consistency and clarity.

This commit is contained in:
thuanle
2025-08-03 01:28:10 +07:00
parent fdd71665b6
commit 00dd2a2eee

View File

@@ -31,6 +31,7 @@ GM_log('[TL] 🏁 Welcome to Binance Alpha Farm Agent.');
// ====== CONFIGURATION ====== // ====== CONFIGURATION ======
const CONFIG = { const CONFIG = {
HEARTBEAT_INTERVAL: 10000, HEARTBEAT_INTERVAL: 10000,
DASHBOARD_UPDATE_INTERVAL: 500, // Update dashboard overlay every 0.5 seconds
SERVERS: { SERVERS: {
local: { label: '🏠 Local', url: 'http://localhost:3000' }, local: { label: '🏠 Local', url: 'http://localhost:3000' },
prod: { label: '🌐 Prod', url: 'https://baf.thuanle.me' }, prod: { label: '🌐 Prod', url: 'https://baf.thuanle.me' },
@@ -55,7 +56,6 @@ GM_log('[TL] 🏁 Welcome to Binance Alpha Farm Agent.');
constructor() { constructor() {
this.data = { this.data = {
// Server configuration - Thông tin server hiện tại // Server configuration - Thông tin server hiện tại
server: null, // URL của server hiện tại (từ AppSettings)
server_last_seen: null, // Thời gian cuối cùng ping server thành công server_last_seen: null, // Thời gian cuối cùng ping server thành công
// Page state - Trạng thái trang hiện tại // Page state - Trạng thái trang hiện tại
@@ -84,16 +84,11 @@ GM_log('[TL] 🏁 Welcome to Binance Alpha Farm Agent.');
if (this.initialized) return; if (this.initialized) return;
this.initialized = true; this.initialized = true;
// Load server URL từ AppSettings
const serverType = await AppSettings.getServerType();
const server = CONFIG.SERVERS[serverType] || CONFIG.SERVERS.prod;
// Detect trang hiện tại (không block) // Detect trang hiện tại (không block)
const currentPage = BINANCE.page.detectPage(); const currentPage = BINANCE.page.detectPage();
// Update state (không bao gồm login status) // Update state (không bao gồm login status)
await this.update({ await this.update({
server,
current_page: currentPage, current_page: currentPage,
}); });
@@ -111,7 +106,7 @@ GM_log('[TL] 🏁 Welcome to Binance Alpha Farm Agent.');
} }
// ====== GETTER METHODS ====== // ====== GETTER METHODS ======
getServer() { return this.data.server; } getServer() { return CONFIG.SERVERS[AppSettings.getServerType()]; }
getServerLastSeen() { return this.data.server_last_seen; } getServerLastSeen() { return this.data.server_last_seen; }
/** /**
* Kiểm tra xem server có kết nối không * Kiểm tra xem server có kết nối không
@@ -137,7 +132,7 @@ GM_log('[TL] 🏁 Welcome to Binance Alpha Farm Agent.');
const oldData = { ...this.data }; const oldData = { ...this.data };
Object.assign(this.data, updates); Object.assign(this.data, updates);
await this.notifyObservers(oldData, this.data); await this.notifyObservers(oldData, this.data);
TL.debug('STATE', 'Updated', updates); // TL.debug('STATE', 'Updated', updates);
} }
/** /**
@@ -212,7 +207,10 @@ GM_log('[TL] 🏁 Welcome to Binance Alpha Farm Agent.');
// Server configuration // Server configuration
getServerType: () => GM_getValue(AppSettings.key_server_type, 'prod'), getServerType: () => GM_getValue(AppSettings.key_server_type, 'prod'),
setServerType: (type) => GM_setValue(AppSettings.key_server_type, type), setServerType: (type) => {
GM_setValue(AppSettings.key_server_type, type);
AppState.update({ server_last_seen: null });
},
getBotStatus: () => GM_getValue(AppSettings.key_bot_status, AppEnums.BOT_STATUS.IDLE), getBotStatus: () => GM_getValue(AppSettings.key_bot_status, AppEnums.BOT_STATUS.IDLE),
setBotStatus: (status) => GM_setValue(AppSettings.key_bot_status, status), setBotStatus: (status) => GM_setValue(AppSettings.key_bot_status, status),
@@ -536,8 +534,8 @@ GM_log('[TL] 🏁 Welcome to Binance Alpha Farm Agent.');
// ====== APP UI ====== // ====== APP UI ======
const AppUi = { const AppUi = {
// ====== STATUS OVERLAY ====== // ====== DASHBOARD OVERLAY ======
statusOverlay: { dashboardOverlay: {
element: null, element: null,
// Get position CSS based on position number // Get position CSS based on position number
@@ -551,10 +549,10 @@ GM_log('[TL] 🏁 Welcome to Binance Alpha Farm Agent.');
} }
}, },
// Create status overlay element // Create dashboard overlay element
create: () => { create: () => {
if (AppUi.statusOverlay.element) { if (AppUi.dashboardOverlay.element) {
document.body.removeChild(AppUi.statusOverlay.element); document.body.removeChild(AppUi.dashboardOverlay.element);
} }
const overlay = document.createElement('div'); const overlay = document.createElement('div');
@@ -608,7 +606,7 @@ GM_log('[TL] 🏁 Welcome to Binance Alpha Farm Agent.');
TL.dom.setHover(positionBtn, 'mouseleave', { scale: 1, background: '#007bff' }); TL.dom.setHover(positionBtn, 'mouseleave', { scale: 1, background: '#007bff' });
overlay.appendChild(positionBtn); overlay.appendChild(positionBtn);
AppUi.statusOverlay.element = overlay; AppUi.dashboardOverlay.element = overlay;
document.body.appendChild(overlay); document.body.appendChild(overlay);
return overlay; return overlay;
@@ -616,11 +614,11 @@ GM_log('[TL] 🏁 Welcome to Binance Alpha Farm Agent.');
// Update overlay position // Update overlay position
updatePosition: () => { updatePosition: () => {
if (!AppUi.statusOverlay.element) return; if (!AppUi.dashboardOverlay.element) return;
const positionCSS = AppUi.statusOverlay.getPositionCSS(AppSettings.getPopupPosition()); const positionCSS = AppUi.dashboardOverlay.getPositionCSS(AppSettings.getPopupPosition());
Object.assign(AppUi.statusOverlay.element.style, positionCSS); Object.assign(AppUi.dashboardOverlay.element.style, positionCSS);
}, },
// Update overlay content // Update overlay content
@@ -656,7 +654,7 @@ GM_log('[TL] 🏁 Welcome to Binance Alpha Farm Agent.');
// Build content // Build content
const content = ` const content = `
<div style="margin-bottom: 8px;"><strong>BAF Agent Status</strong></div> <div style="margin-bottom: 8px;"><strong>BAF Agent Dashboard</strong></div>
<div style="margin-bottom: 4px;"> <div style="margin-bottom: 4px;">
<span id="safety-toggle-btn" style="color: ${safetyStatus.enabled ? '#28a745' : '#dc3545'}; cursor: pointer; padding: 2px 4px; border-radius: 3px; border: 1px solid ${safetyStatus.enabled ? '#28a745' : '#dc3545'}; background: ${safetyStatus.enabled ? 'rgba(40, 167, 69, 0.1)' : 'rgba(220, 53, 69, 0.1)'}; transition: all 0.2s ease;" title="Click to toggle safety status">🛟 Safety: ${safetyStatus.enabled ? '🛡️ Safe' : '🚨 Blocked'}</span> <span id="safety-toggle-btn" style="color: ${safetyStatus.enabled ? '#28a745' : '#dc3545'}; cursor: pointer; padding: 2px 4px; border-radius: 3px; border: 1px solid ${safetyStatus.enabled ? '#28a745' : '#dc3545'}; background: ${safetyStatus.enabled ? 'rgba(40, 167, 69, 0.1)' : 'rgba(220, 53, 69, 0.1)'}; transition: all 0.2s ease;" title="Click to toggle safety status">🛟 Safety: ${safetyStatus.enabled ? '🛡️ Safe' : '🚨 Blocked'}</span>
@@ -668,7 +666,7 @@ GM_log('[TL] 🏁 Welcome to Binance Alpha Farm Agent.');
<span style="color: #007bff;">Bot Status: ${statusDisplay}</span> <span style="color: #007bff;">Bot Status: ${statusDisplay}</span>
</div> </div>
<div style="margin-bottom: 4px;"> <div style="margin-bottom: 4px;">
<span style="color: #e83e8c;">🌐 Server: ${serverLabel} ${serverConnected}</span> <span id="server-toggle-btn" style="color: #e83e8c; cursor: pointer; padding: 2px 4px; border-radius: 3px; border: 1px solid #e83e8c; background: rgba(232, 62, 140, 0.1); transition: all 0.2s ease;" title="Click to switch between local and prod servers">🌐 Server: ${serverLabel} ${serverConnected}</span>
</div> </div>
<div style="margin-bottom: 4px;"> <div style="margin-bottom: 4px;">
<span style="color: #fd7e14;">👤 Login:${loginStatus}</span> <span style="color: #fd7e14;">👤 Login:${loginStatus}</span>
@@ -679,12 +677,12 @@ GM_log('[TL] 🏁 Welcome to Binance Alpha Farm Agent.');
`; `;
// Update content (excluding position button) // Update content (excluding position button)
const contentDiv = AppUi.statusOverlay.element.querySelector('.baf-content') || document.createElement('div'); const contentDiv = AppUi.dashboardOverlay.element.querySelector('.baf-content') || document.createElement('div');
contentDiv.className = 'baf-content'; contentDiv.className = 'baf-content';
contentDiv.innerHTML = content; contentDiv.innerHTML = content;
if (!AppUi.statusOverlay.element.querySelector('.baf-content')) { if (!AppUi.dashboardOverlay.element.querySelector('.baf-content')) {
AppUi.statusOverlay.element.appendChild(contentDiv); AppUi.dashboardOverlay.element.appendChild(contentDiv);
} }
// Add event listener for safety toggle button // Add event listener for safety toggle button
@@ -701,7 +699,7 @@ GM_log('[TL] 🏁 Welcome to Binance Alpha Farm Agent.');
AppSettings.setSafetyGuard(true); AppSettings.setSafetyGuard(true);
} }
// Update the content to reflect the change // Update the content to reflect the change
AppUi.statusOverlay.updateContent(); AppUi.dashboardOverlay.updateContent();
}; };
} }
@@ -712,44 +710,60 @@ GM_log('[TL] 🏁 Welcome to Binance Alpha Farm Agent.');
const newDebugState = !AppSettings.getDebug(); const newDebugState = !AppSettings.getDebug();
AppSettings.setDebug(newDebugState); AppSettings.setDebug(newDebugState);
// Update the content to reflect the change // Update the content to reflect the change
AppUi.statusOverlay.updateContent(); AppUi.dashboardOverlay.updateContent();
};
}
// Add event listener for server toggle button
const serverToggleBtn = contentDiv.querySelector('#server-toggle-btn');
if (serverToggleBtn) {
serverToggleBtn.onclick = async () => {
const currentServerType = AppSettings.getServerType();
const newServerType = currentServerType === 'local' ? 'prod' : 'local';
// Update server type in settings
AppSettings.setServerType(newServerType);
await AppState.update({ server_last_seen: null });
// Update the content to reflect the change
AppUi.dashboardOverlay.updateContent();
}; };
} }
}, },
// Show status overlay // Show dashboard overlay
show: () => { show: () => {
if (!AppUi.statusOverlay.element) { if (!AppUi.dashboardOverlay.element) {
AppUi.statusOverlay.create(); AppUi.dashboardOverlay.create();
} }
AppUi.statusOverlay.updatePosition(); AppUi.dashboardOverlay.updatePosition();
AppUi.statusOverlay.updateContent(); AppUi.dashboardOverlay.updateContent();
AppUi.statusOverlay.element.style.display = 'block'; AppUi.dashboardOverlay.element.style.display = 'block';
}, },
// Hide status overlay // Hide dashboard overlay
hide: () => { hide: () => {
if (AppUi.statusOverlay.element) { if (AppUi.dashboardOverlay.element) {
AppUi.statusOverlay.element.style.display = 'none'; AppUi.dashboardOverlay.element.style.display = 'none';
} }
}, },
// Toggle status overlay // Toggle dashboard overlay
toggle: () => { toggle: () => {
if (AppSettings.getPopupVisible()) { if (AppSettings.getPopupVisible()) {
AppUi.statusOverlay.hide(); AppUi.dashboardOverlay.hide();
AppSettings.setPopupVisible(false); AppSettings.setPopupVisible(false);
} else { } else {
AppUi.statusOverlay.show(); AppUi.dashboardOverlay.show();
AppSettings.setPopupVisible(true); AppSettings.setPopupVisible(true);
} }
}, },
// Initialize status overlay // Initialize dashboard overlay
init: () => { init: () => {
if (AppSettings.getPopupVisible()) { if (AppSettings.getPopupVisible()) {
AppUi.statusOverlay.show(); AppUi.dashboardOverlay.show();
} }
} }
}, },
@@ -796,7 +810,7 @@ GM_log('[TL] 🏁 Welcome to Binance Alpha Farm Agent.');
// Popup toggle menu // Popup toggle menu
GM_registerMenuCommand("👁️ Toggle Popup", () => { GM_registerMenuCommand("👁️ Toggle Popup", () => {
AppUi.statusOverlay.toggle(); AppUi.dashboardOverlay.toggle();
}); });
} catch (error) { } catch (error) {
@@ -812,24 +826,45 @@ GM_log('[TL] 🏁 Welcome to Binance Alpha Farm Agent.');
initialize: async () => { initialize: async () => {
await AppState.initialize(); await AppState.initialize();
await AppUi.menu.create(); await AppUi.menu.create();
AppUi.statusOverlay.init(); AppUi.dashboardOverlay.init();
// Setup observers for dashboard overlay updates
AppServices.initObservers();
// Setup interval services // Setup interval services
AppServices.initInterval(); AppServices.initInterval();
// Detect login status after initialization (non-blocking)
setTimeout(async () => {
await AppState.detectLoginStatus();
}, 1000); // Delay 1 second to let page load
TL.log('APP-SERVICES', 'AppServices initialized'); TL.log('APP-SERVICES', 'AppServices initialized');
}, },
initObservers: () => {
// AppState.subscribe('server_last_seen', () => {
// if (AppSettings.getPopupVisible()) {
// AppUi.dashboardOverlay.updateContent();
// }
// });
// AppState.subscribe('is_logged_in', () => {
// if (AppSettings.getPopupVisible()) {
// AppUi.dashboardOverlay.updateContent();
// }
// });
// AppState.subscribe('current_page', () => {
// if (AppSettings.getPopupVisible()) {
// AppUi.dashboardOverlay.updateContent();
// }
// });
},
// Setup interval services // Setup interval services
initInterval: () => { initInterval: () => {
// Setup heartbeat interval // Setup heartbeat interval
setInterval(() => AppServices.heartbeat(), CONFIG.HEARTBEAT_INTERVAL); setInterval(() => AppServices.heartbeat(), CONFIG.HEARTBEAT_INTERVAL);
// Setup dashboard overlay update interval
setInterval(() => AppUi.dashboardOverlay.updateContent(), CONFIG.DASHBOARD_UPDATE_INTERVAL);
TL.debug('APP-SERVICES', 'Interval services started'); TL.debug('APP-SERVICES', 'Interval services started');
}, },
@@ -838,11 +873,6 @@ GM_log('[TL] 🏁 Welcome to Binance Alpha Farm Agent.');
return serverLastSeen && new Date() - serverLastSeen < 60000; return serverLastSeen && new Date() - serverLastSeen < 60000;
}, },
// Refresh login status
refreshLoginStatus: async () => {
await AppState.detectLoginStatus();
},
// ====== HEARTBEAT SYSTEM ====== // ====== HEARTBEAT SYSTEM ======
heartbeat: async () => { heartbeat: async () => {
if (!AppSettings.getSafetyGuard()) return null; if (!AppSettings.getSafetyGuard()) return null;