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
2025-07-28 14:58:24 +02:00
parent 6c440959a5
commit 861cfb8522
2 changed files with 121 additions and 0 deletions

View File

@@ -29,6 +29,7 @@ export default function AutomationPageV2() {
const [loading, setLoading] = useState(false) const [loading, setLoading] = useState(false)
const [monitorData, setMonitorData] = useState(null) const [monitorData, setMonitorData] = useState(null)
const [automationDisabled, setAutomationDisabled] = useState(false) // Track manual disable state const [automationDisabled, setAutomationDisabled] = useState(false) // Track manual disable state
const [actionFeedback, setActionFeedback] = useState(null) // Track button action feedback
useEffect(() => { useEffect(() => {
fetchStatus() fetchStatus()
@@ -206,14 +207,19 @@ Based on comprehensive technical analysis across multiple timeframes:
if (status?.isActive) { if (status?.isActive) {
// If automation is running, stop it // If automation is running, stop it
console.log('🛑 Stopping active automation...') console.log('🛑 Stopping active automation...')
setActionFeedback({ type: 'info', message: 'Stopping automation...' })
} else if (!isCurrentlyDisabled) { } else if (!isCurrentlyDisabled) {
// If automation not running but not disabled, disable it // If automation not running but not disabled, disable it
console.log('🛑 Disabling automation triggers...') console.log('🛑 Disabling automation triggers...')
setActionFeedback({ type: 'warning', message: 'Disabling automation triggers...' })
} else { } else {
// If disabled, enable it // If disabled, enable it
console.log('✅ Enabling automation triggers...') console.log('✅ Enabling automation triggers...')
setAutomationDisabled(false) setAutomationDisabled(false)
setActionFeedback({ type: 'success', message: '✅ Automation triggers ENABLED - System ready for automated trading' })
setLoading(false) setLoading(false)
// Clear feedback after 3 seconds
setTimeout(() => setActionFeedback(null), 3000)
return return
} }
@@ -229,18 +235,24 @@ Based on comprehensive technical analysis across multiple timeframes:
if (data.success) { if (data.success) {
if (status?.isActive) { if (status?.isActive) {
console.log('✅ Automation stopped successfully') console.log('✅ Automation stopped successfully')
setActionFeedback({ type: 'success', message: '✅ Automation STOPPED successfully' })
} else { } else {
console.log('✅ Automation triggers disabled') console.log('✅ Automation triggers disabled')
setAutomationDisabled(true) setAutomationDisabled(true)
setActionFeedback({ type: 'success', message: '🚫 Automation triggers DISABLED - Safe to close positions manually' })
} }
fetchStatus() fetchStatus()
} else { } else {
console.error('Failed to stop automation:', data.error) console.error('Failed to stop automation:', data.error)
setActionFeedback({ type: 'error', message: '❌ Failed to change automation state' })
} }
} catch (error) { } catch (error) {
console.error('Failed to stop automation:', error) console.error('Failed to stop automation:', error)
setActionFeedback({ type: 'error', message: '❌ Network error - please try again' })
} finally { } finally {
setLoading(false) 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>
</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"> <div className="flex space-x-4">
{(status?.isActive || positions.length > 0) ? ( {(status?.isActive || positions.length > 0) ? (
<> <>
@@ -803,6 +853,18 @@ Based on comprehensive technical analysis across multiple timeframes:
{status?.isActive ? 'RUNNING' : 'STOPPED'} {status?.isActive ? 'RUNNING' : 'STOPPED'}
</span> </span>
</div> </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 && ( {status?.isActive && (
<> <>

59
visual-feedback-demo.js Normal file
View File

@@ -0,0 +1,59 @@
#!/usr/bin/env node
/**
* Visual Feedback Demo - New automation status indicators
*/
console.log('🎨 NEW VISUAL FEEDBACK SYSTEM\n');
console.log('📊 Status Indicators Added:');
console.log('');
console.log('1⃣ Bot Status Section:');
console.log(' Status: RUNNING/STOPPED (existing)');
console.log(' Triggers: 🚫 DISABLED / ✅ ENABLED (NEW)');
console.log(' - Shows current automation trigger state');
console.log(' - Red when disabled, Green when enabled');
console.log('');
console.log('2⃣ Visual Status Box (NEW):');
console.log(' ⚡ Automation Triggers: [DISABLED/ENABLED]');
console.log(' - Only shows when you have positions but automation not running');
console.log(' - Clear explanation of current state');
console.log(' - Helpful description of what each state means');
console.log('');
console.log('3⃣ Action Feedback Messages (NEW):');
console.log(' ✅ Success: "Automation triggers ENABLED - System ready"');
console.log(' 🚫 Warning: "Automation triggers DISABLED - Safe to close positions"');
console.log(' ❌ Error: "Failed to change automation state"');
console.log(' - Messages appear for 3 seconds after button clicks');
console.log(' - Color-coded: Green (success), Yellow (warning), Red (error)');
console.log('');
console.log('📱 What You\'ll See Now:');
console.log('');
console.log('🔄 When You Click DISABLE:');
console.log(' 1. Button shows "Processing..." with spinner');
console.log(' 2. Success message: "🚫 Automation triggers DISABLED"');
console.log(' 3. Status box shows: "⚡ DISABLED" (red)');
console.log(' 4. Bot Status shows: "Triggers: 🚫 DISABLED"');
console.log(' 5. Button changes to: "✅ ENABLE" (green)');
console.log('');
console.log('✅ When You Click ENABLE:');
console.log(' 1. Success message: "✅ Automation triggers ENABLED"');
console.log(' 2. Status box shows: "⚡ ENABLED" (green)');
console.log(' 3. Bot Status shows: "Triggers: ✅ ENABLED"');
console.log(' 4. Button changes to: "🛑 DISABLE" (yellow)');
console.log('');
console.log('🎯 Clear Visual Feedback:');
console.log(' ✅ Multiple indicators show current state');
console.log(' ✅ Immediate feedback when buttons are clicked');
console.log(' ✅ Color-coded for easy understanding');
console.log(' ✅ Helpful descriptions explain what each state means');
console.log('');
console.log('💡 No more guessing - the interface clearly shows if automation is enabled or disabled!');