quantumbotx/templates/trading_bots.html

{% extends "base.html" %}

{% block title %}Trading Bots{% endblock %}

{% block head_extra %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/dashboard.css') }}" />
{% endblock %}

{% block content %}
<!-- Header Halaman: Judul di kiri, tombol di kanan -->
<div class="flex justify-between items-center mb-6">
    <div>
        <h2 class="text-2xl font-bold text-gray-800">Trading Bots</h2>
        <p class="text-gray-600">Kelola semua bot dan strategi Anda.</p>
    </div>
    <div class="flex items-center space-x-2">
            <button id="start-all-btn" class="bg-green-500 text-white py-2 px-4 rounded-lg font-medium hover:bg-green-600 transition flex items-center" title="Jalankan semua bot yang dijeda">
                <i class="fas fa-play mr-2"></i> Start All</button>
            <button id="stop-all-btn" class="bg-red-500 text-white py-2 px-4 rounded-lg font-medium hover:bg-red-600 transition flex items-center" title="Hentikan semua bot yang aktif">
                <i class="fas fa-stop mr-2"></i> Stop All</button>
            <button id="create-bot-btn" class="bg-blue-600 text-white py-2 px-4 rounded-lg font-medium hover:bg-blue-700 transition flex items-center"><i class="fas fa-plus mr-2"></i> Buat Bot Baru</button>
    </div>
</div>
<div class="bg-white rounded-lg shadow overflow-hidden">
    <table class="min-w-full divide-y divide-gray-200" aria-label="Trading Bots Table">
        <thead class="bg-gray-50">
            <tr>
                <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nama / Pasar</th>
                <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Parameter</th>
                <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Konfigurasi</th>
                <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                <th scope="col" class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Aksi</th>
            </tr>
        </thead>
        <tbody id="bots-table-body" class="bg-white divide-y divide-gray-200"></tbody>
    </table>
</div>
<!-- Modal untuk Membuat/Mengedit Bot -->
<div id="create-bot-modal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full flex items-center justify-center z-50 p-4">
    <!-- PERBAIKAN: Panel modal kini menggunakan flexbox vertikal dan tinggi maksimal -->
    <div class="relative bg-white rounded-lg shadow-xl w-full max-w-2xl flex flex-col max-h-[90vh]">
        <!-- Loading Overlay -->
        <div id="modal-loading-overlay" class="absolute inset-0 bg-white bg-opacity-75 flex items-center justify-center z-10 hidden">
            <i class="fas fa-spinner fa-spin text-blue-600 text-4xl"></i>
        </div>
        
        <!-- Header Modal (Tidak akan ikut ter-scroll) -->
        <div class="flex-shrink-0 flex items-start justify-between p-5 border-b rounded-t">
            <h3 id="modal-title" class="text-xl font-semibold text-gray-900">
                🚀 Buat Bot Baru
            </h3>
            <button type="button" id="cancel-create" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center">
                <i class="fas fa-times"></i>
                <span class="sr-only">Tutup modal</span>
            </button>
        </div>

        <!-- Form (Area ini yang akan bisa di-scroll) -->
        <form id="create-bot-form" class="flex-grow overflow-y-auto">
            <div class="p-6 space-y-6">
                <!-- Baris 1: Nama & Pasar -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="name" class="block mb-2 text-sm font-medium text-gray-900">Nama Bot</label>
                        <input type="text" name="name" id="name" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" placeholder="Contoh: XAUUSD Hybrid H1" required>
                    </div>
                    <div>
                        <label for="market" class="block mb-2 text-sm font-medium text-gray-900">Pasar</label>
                        <input type="text" name="market" id="market" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" placeholder="Contoh: XAUUSD atau EURUSD" required>
                    </div>
                </div>
                <!-- Baris 2: Lot, SL, TP -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div>
                        <label for="risk_percent" class="block mb-2 text-sm font-medium text-gray-900">Risk per Trade (%)</label>
                        <input type="number" name="risk_percent" id="risk_percent" value="1.0" step="0.1" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" required>
                    </div>
                    <div>
                        <label for="sl_atr_multiplier" class="block mb-2 text-sm font-medium text-gray-900">SL (ATR Multiplier)</label>
                        <input type="number" name="sl_atr_multiplier" id="sl_atr_multiplier" value="2.0" step="0.1" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" required>
                    </div>
                    <div>
                        <label for="tp_atr_multiplier" class="block mb-2 text-sm font-medium text-gray-900">TP (ATR Multiplier)</label>
                        <input type="number" name="tp_atr_multiplier" id="tp_atr_multiplier" value="4.0" step="0.1" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" required>
                    </div>
                </div>
                <!-- Baris 3: Timeframe & Interval -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="timeframe" class="block mb-2 text-sm font-medium text-gray-900">Timeframe</label>
                        <select id="timeframe" name="timeframe" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
                            <option value="M1">1 Menit</option>
                            <option value="M5">5 Menit</option>
                            <option value="M15">15 Menit</option>
                            <option value="M30">30 Menit</option>
                            <option value="H1" selected>1 Jam</option>
                            <option value="H4">4 Jam</option>
                            <option value="D1">1 Hari</option>
                        </select>
                    </div>
                    <div>
                        <label for="check_interval_seconds" class="block mb-2 text-sm font-medium text-gray-900">Interval Cek (detik)</label>
                        <input type="number" name="check_interval_seconds" id="check_interval_seconds" value="60" step="1" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" required>
                    </div>
                </div>
                <!-- Strategy Switching Option -->
                <div class="border-t pt-4">
                    <div class="flex items-center">
                        <input type="checkbox" id="enable_strategy_switching" name="enable_strategy_switching" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500">
                        <label for="enable_strategy_switching" class="ml-2 text-sm font-medium text-gray-900">Aktifkan Automatic Strategy Switching</label>
                    </div>
                    <p class="mt-1 text-xs text-gray-500">Jika diaktifkan, bot akan secara otomatis beralih ke strategi terbaik berdasarkan kinerja terkini.</p>
                </div>
                <!-- Baris 4: Strategi & Parameternya -->
                <div>
                    <label for="strategy" class="block mb-2 text-sm font-medium text-gray-900">Strategi</label>
                    <select id="strategy" name="strategy" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" required>
                        <option value="" disabled selected>Pilih sebuah strategi</option>
                    </select>
                </div>
                <div id="strategy-params-container" class="grid grid-cols-1 md:grid-cols-2 gap-6 pt-4 border-t">
                    <!-- Parameter strategi akan dimuat di sini oleh JavaScript -->
                </div>
            </div>
        </form>

        <!-- Footer Modal (Tidak akan ikut ter-scroll) -->
        <div class="flex-shrink-0 flex items-center p-6 space-x-2 border-t border-gray-200 rounded-b">
            <button type="submit" id="submit-bot-btn" form="create-bot-form" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center">Buat Bot</button>
            <button type="button" id="cancel-create-footer" class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10">Batal</button>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/trading_bots.js') }}"></script>
{% endblock %}