feat: Add comprehensive visual feedback for automation enable/disable states
Multiple Status Indicators Added: - Bot Status section now shows 'Triggers: DISABLED/ENABLED' - Visual status box with clear state explanation when positions exist - Color-coded indicators: Red (disabled), Green (enabled) Action Feedback System: - Success messages appear for 3 seconds after button clicks - Clear confirmation: 'Automation triggers ENABLED/DISABLED' - Error handling with user-friendly messages - Color-coded feedback: Green (success), Yellow (warning), Red (error) Enhanced User Experience: - No more guessing current automation state - Immediate visual confirmation of button actions - Helpful descriptions explain what each state means - Multiple indicators ensure clarity Smart Display Logic: - Status box only shows when relevant (positions exist, automation not running) - Feedback messages auto-clear after 3 seconds - Button states sync with status indicators Now users get clear visual confirmation when enabling/disabling automation triggers.
This commit is contained in:
mindesbunister
@@ -29,6 +29,7 @@ export default function AutomationPageV2() {
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [monitorData, setMonitorData] = useState(null)
|
||||
const [automationDisabled, setAutomationDisabled] = useState(false) // Track manual disable state
|
||||
const [actionFeedback, setActionFeedback] = useState(null) // Track button action feedback
|
||||
|
||||
useEffect(() => {
|
||||
fetchStatus()
|
||||
@@ -206,14 +207,19 @@ Based on comprehensive technical analysis across multiple timeframes:
|
||||
if (status?.isActive) {
|
||||
// If automation is running, stop it
|
||||
console.log('🛑 Stopping active automation...')
|
||||
setActionFeedback({ type: 'info', message: 'Stopping automation...' })
|
||||
} else if (!isCurrentlyDisabled) {
|
||||
// If automation not running but not disabled, disable it
|
||||
console.log('🛑 Disabling automation triggers...')
|
||||
setActionFeedback({ type: 'warning', message: 'Disabling automation triggers...' })
|
||||
} else {
|
||||
// If disabled, enable it
|
||||
console.log('✅ Enabling automation triggers...')
|
||||
setAutomationDisabled(false)
|
||||
setActionFeedback({ type: 'success', message: '✅ Automation triggers ENABLED - System ready for automated trading' })
|
||||
setLoading(false)
|
||||
// Clear feedback after 3 seconds
|
||||
setTimeout(() => setActionFeedback(null), 3000)
|
||||
return
|
||||
}
|
||||
|
||||
@@ -229,18 +235,24 @@ Based on comprehensive technical analysis across multiple timeframes:
|
||||
if (data.success) {
|
||||
if (status?.isActive) {
|
||||
console.log('✅ Automation stopped successfully')
|
||||
setActionFeedback({ type: 'success', message: '✅ Automation STOPPED successfully' })
|
||||
} else {
|
||||
console.log('✅ Automation triggers disabled')
|
||||
setAutomationDisabled(true)
|
||||
setActionFeedback({ type: 'success', message: '🚫 Automation triggers DISABLED - Safe to close positions manually' })
|
||||
}
|
||||
fetchStatus()
|
||||
} else {
|
||||
console.error('Failed to stop automation:', data.error)
|
||||
setActionFeedback({ type: 'error', message: '❌ Failed to change automation state' })
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to stop automation:', error)
|
||||
setActionFeedback({ type: 'error', message: '❌ Network error - please try again' })
|
||||
} finally {
|
||||
setLoading(false)
|
||||
// Clear feedback after 3 seconds
|
||||
setTimeout(() => setActionFeedback(null), 3000)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -400,6 +412,44 @@ Based on comprehensive technical analysis across multiple timeframes:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action Feedback */}
|
||||
{actionFeedback && (
|
||||
<div className={`mb-4 p-4 rounded-lg border-l-4 ${
|
||||
actionFeedback.type === 'success' ? 'bg-green-900/30 border-green-500 text-green-300' :
|
||||
actionFeedback.type === 'warning' ? 'bg-yellow-900/30 border-yellow-500 text-yellow-300' :
|
||||
actionFeedback.type === 'error' ? 'bg-red-900/30 border-red-500 text-red-300' :
|
||||
'bg-blue-900/30 border-blue-500 text-blue-300'
|
||||
}`}>
|
||||
<div className="font-medium">{actionFeedback.message}</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Automation Trigger Status Indicator */}
|
||||
{(positions.length > 0 && !status?.isActive) && (
|
||||
<div className="mb-4 p-3 rounded-lg border-2 border-dashed border-gray-500/50 bg-gray-800/30">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="text-lg">⚡</span>
|
||||
<span className="text-gray-300 font-medium">Automation Triggers:</span>
|
||||
</div>
|
||||
<div className={`flex items-center space-x-2 px-3 py-1 rounded-lg border ${
|
||||
automationDisabled
|
||||
? 'bg-red-900/30 text-red-300 border-red-500/50'
|
||||
: 'bg-green-900/30 text-green-300 border-green-500/50'
|
||||
}`}>
|
||||
<span>{automationDisabled ? '🚫' : '✅'}</span>
|
||||
<span className="font-bold">{automationDisabled ? 'DISABLED' : 'ENABLED'}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-2 text-sm text-gray-400">
|
||||
{automationDisabled
|
||||
? 'Safe to close positions manually - no automation will trigger'
|
||||
: 'Automation can start when conditions are met (position close, signals, etc.)'
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex space-x-4">
|
||||
{(status?.isActive || positions.length > 0) ? (
|
||||
<>
|
||||
@@ -803,6 +853,18 @@ Based on comprehensive technical analysis across multiple timeframes:
|
||||
{status?.isActive ? 'RUNNING' : 'STOPPED'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Automation Trigger Status */}
|
||||
<div className="flex justify-between items-center p-3 bg-black/20 rounded-lg">
|
||||
<span className="text-gray-400 font-medium">Triggers:</span>
|
||||
<span className={`px-3 py-1 rounded-lg text-sm font-bold border ${
|
||||
automationDisabled
|
||||
? 'bg-red-500/20 text-red-300 border-red-500/30'
|
||||
: 'bg-green-500/20 text-green-300 border-green-500/30'
|
||||
}`}>
|
||||
{automationDisabled ? '🚫 DISABLED' : '✅ ENABLED'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{status?.isActive && (
|
||||
<>
|
||||
|
||||
Reference in New Issue
Block a user