feat: Add Enable/Disable toggle functionality for automation control

Enhanced Button Behavior:
- DISABLE button (Yellow): Prevents automation triggers when positions exist
- ENABLE button (Green): Re-enables automation triggers
- STOP button (Red): Stops active automation when running
- Dynamic color coding and tooltips for each state

 Smart State Management:
- Tracks manual disable state independently of automation status
- Button toggles between DISABLE → ENABLE → DISABLE cycle
- Preserves safety when positions exist but automation not running

 User Control Features:
- Safe position management: Disable before closing positions manually
- Easy re-activation: Enable when ready for automated trading
- Emergency stop: Always available for complete shutdown

 Button Color System:
- 🛑 Red: Active automation (STOP)
- 🛑 Yellow: Ready to disable triggers (DISABLE)
-  Green: Disabled, ready to enable (ENABLE)
- 🚨 Red Dark: Emergency shutdown (EMERGENCY)

Now users can safely toggle automation on/off while managing positions manually.
This commit is contained in:
mindesbunister
2025-07-28 14:50:01 +02:00
parent 2a3a3e3afa
commit 6c440959a5
2 changed files with 107 additions and 7 deletions

View File

@@ -28,6 +28,7 @@ export default function AutomationPageV2() {
const [positions, setPositions] = useState([])
const [loading, setLoading] = useState(false)
const [monitorData, setMonitorData] = useState(null)
const [automationDisabled, setAutomationDisabled] = useState(false) // Track manual disable state
useEffect(() => {
fetchStatus()
@@ -200,7 +201,22 @@ Based on comprehensive technical analysis across multiple timeframes:
}
const handleStop = async () => {
console.log('🛑 Stopping automation...')
const isCurrentlyDisabled = automationDisabled
if (status?.isActive) {
// If automation is running, stop it
console.log('🛑 Stopping active automation...')
} else if (!isCurrentlyDisabled) {
// If automation not running but not disabled, disable it
console.log('🛑 Disabling automation triggers...')
} else {
// If disabled, enable it
console.log('✅ Enabling automation triggers...')
setAutomationDisabled(false)
setLoading(false)
return
}
setLoading(true)
try {
const response = await fetch('/api/automation/stop', {
@@ -211,7 +227,12 @@ Based on comprehensive technical analysis across multiple timeframes:
const data = await response.json()
if (data.success) {
console.log('✅ Automation stopped successfully')
if (status?.isActive) {
console.log('✅ Automation stopped successfully')
} else {
console.log('✅ Automation triggers disabled')
setAutomationDisabled(true)
}
fetchStatus()
} else {
console.error('Failed to stop automation:', data.error)
@@ -385,18 +406,30 @@ Based on comprehensive technical analysis across multiple timeframes:
<button
onClick={handleStop}
disabled={loading}
className="px-8 py-4 bg-gradient-to-r from-red-600 to-red-700 text-white rounded-xl hover:from-red-700 hover:to-red-800 transition-all duration-200 disabled:opacity-50 font-semibold shadow-lg shadow-red-500/25 transform hover:scale-105"
title={status?.isActive ? "Stop active automation" : "Prevent automation from triggering on position close"}
className={`px-8 py-4 rounded-xl transition-all duration-200 disabled:opacity-50 font-semibold shadow-lg transform hover:scale-105 ${
status?.isActive
? 'bg-gradient-to-r from-red-600 to-red-700 hover:from-red-700 hover:to-red-800 shadow-red-500/25 text-white'
: automationDisabled
? 'bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 shadow-green-500/25 text-white'
: 'bg-gradient-to-r from-yellow-600 to-yellow-700 hover:from-yellow-700 hover:to-yellow-800 shadow-yellow-500/25 text-white'
}`}
title={
status?.isActive
? "Stop active automation"
: automationDisabled
? "Enable automation triggers - allows automation to start when conditions are met"
: "Disable automation triggers - prevents automation from starting on position close"
}
>
{loading ? (
<div className="flex items-center space-x-2">
<div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
<span>Stopping...</span>
<span>Processing...</span>
</div>
) : (
<div className="flex items-center space-x-2">
<span>🛑</span>
<span>{status?.isActive ? 'STOP' : 'DISABLE'}</span>
<span>{status?.isActive ? '🛑' : automationDisabled ? '✅' : '🛑'}</span>
<span>{status?.isActive ? 'STOP' : automationDisabled ? 'ENABLE' : 'DISABLE'}</span>
</div>
)}
</button>

View File

@@ -0,0 +1,67 @@
#!/usr/bin/env node
/**
* Button State Test - Demonstrate Enable/Disable Toggle
*/
console.log('🔄 AUTOMATION ENABLE/DISABLE TOGGLE EXPLANATION\n');
console.log('📊 Button States Based on Current Situation:');
console.log('');
console.log('🎯 YOUR CURRENT STATE:');
console.log(' - Active Position: SOL-PERP LONG (+$7.41 PnL)');
console.log(' - Automation Status: NOT RUNNING');
console.log(' - Disable State: Initially NOT DISABLED');
console.log('');
console.log('🔘 BUTTON BEHAVIOR:');
console.log('');
console.log('1⃣ FIRST CLICK (Current State):');
console.log(' Button: 🛑 DISABLE (Yellow)');
console.log(' Action: Disables automation triggers');
console.log(' Result: Prevents automation from starting when position closes');
console.log(' Next State: Button becomes ✅ ENABLE (Green)');
console.log('');
console.log('2⃣ SECOND CLICK (After Disable):');
console.log(' Button: ✅ ENABLE (Green)');
console.log(' Action: Re-enables automation triggers');
console.log(' Result: Allows automation to start when conditions are met');
console.log(' Next State: Button becomes 🛑 DISABLE (Yellow)');
console.log('');
console.log('3⃣ IF AUTOMATION IS RUNNING:');
console.log(' Button: 🛑 STOP (Red)');
console.log(' Action: Stops active automation immediately');
console.log(' Result: Automation stops, returns to disable/enable toggle');
console.log('');
console.log('🚨 EMERGENCY BUTTON (Always Available):');
console.log(' - Stops ALL automation processes');
console.log(' - Kills browser/screenshot processes');
console.log(' - Cleans up temporary files');
console.log(' - Nuclear option for complete reset');
console.log('');
console.log('💡 USAGE SCENARIOS:');
console.log('');
console.log('🔒 To Safely Close Position:');
console.log(' 1. Click 🛑 DISABLE to prevent automation');
console.log(' 2. Manually close position in Drift');
console.log(' 3. No automation will trigger');
console.log('');
console.log('🔄 To Re-enable Trading:');
console.log(' 1. Click ✅ ENABLE to allow automation');
console.log(' 2. Automation can now start based on conditions');
console.log(' 3. System ready for automated trading');
console.log('');
console.log('🆘 In Emergency:');
console.log(' 1. Click 🚨 EMERGENCY for immediate shutdown');
console.log(' 2. Everything stops completely');
console.log(' 3. Safe to restart or investigate issues');
console.log('\n✅ The button will now toggle between DISABLE and ENABLE states!');