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:
132
agent.user.js
132
agent.user.js
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user