mirror of
https://github.com/chrisnov-it/quantumbotx.git
synced 2026-07-27 18:57:47 +00:00
Reynov Christian
5b41fdea95
- Streamlined .env.example to include only essential Flask and MT5 configs for production environments - Added .vercel directory to .gitignore for clean Vercel deployments - Enabled internationalization by adding data-i18n attributes to strategy switcher UI elements - Updated MT5 setup guide and roadmap documentation for clarity and current focus This change simplifies configuration for server deployment while enhancing UI accessibility across languages.
141 lines
11 KiB
HTML
141 lines
11 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title_key %}bots.title{% endblock %}
|
|
{% 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" data-i18n="bots.title">Trading Bots</h2>
|
|
<p class="text-gray-600" data-i18n="bots.manage">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" data-i18n-title="bots.start_all_title" title="Jalankan semua bot yang dijeda">
|
|
<i class="fas fa-play mr-2"></i> <span data-i18n="action.start_all">Start All</span></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" data-i18n-title="bots.stop_all_title" title="Hentikan semua bot yang aktif">
|
|
<i class="fas fa-stop mr-2"></i> <span data-i18n="action.stop_all">Stop All</span></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> <span data-i18n="action.create_new_bot">Buat Bot Baru</span></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" data-i18n="bots.name_market">Nama / Pasar</th>
|
|
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" data-i18n="bots.parameters">Parameter</th>
|
|
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" data-i18n="bots.configuration">Konfigurasi</th>
|
|
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" data-i18n="label.status">Status</th>
|
|
<th scope="col" class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider" data-i18n="bots.actions">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" data-i18n="bots.create_new">
|
|
🚀 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" data-i18n="bots.close_modal">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" data-i18n="label.bot_name">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" data-i18n-placeholder="bots.example_name" placeholder="Contoh: XAUUSD Hybrid H1" required>
|
|
</div>
|
|
<div>
|
|
<label for="market" class="block mb-2 text-sm font-medium text-gray-900" data-i18n="label.market">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" data-i18n-placeholder="bots.example_market" 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" data-i18n="label.risk_per_trade">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" data-i18n="label.sl_atr">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" data-i18n="label.tp_atr">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" data-i18n="label.timeframe">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" data-i18n="bots.timeframe_1m">1 Menit</option>
|
|
<option value="M5" data-i18n="bots.timeframe_5m">5 Menit</option>
|
|
<option value="M15" data-i18n="bots.timeframe_15m">15 Menit</option>
|
|
<option value="M30" data-i18n="bots.timeframe_30m">30 Menit</option>
|
|
<option value="H1" selected data-i18n="bots.timeframe_1h">1 Jam</option>
|
|
<option value="H4" data-i18n="bots.timeframe_4h">4 Jam</option>
|
|
<option value="D1" data-i18n="bots.timeframe_1d">1 Hari</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label for="check_interval_seconds" class="block mb-2 text-sm font-medium text-gray-900" data-i18n="label.check_interval">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" data-i18n="bots.enable_strategy_switching">Aktifkan Automatic Strategy Switching</label>
|
|
</div>
|
|
<p class="mt-1 text-xs text-gray-500" data-i18n="bots.strategy_switching_info">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" data-i18n="label.strategy">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 data-i18n="bots.select_strategy">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 -->
|
|
<span data-i18n="bots.strategy_params_loaded">Parameter strategi akan dimuat di sini oleh JavaScript</span>
|
|
</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" data-i18n="bots.create_bot">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" data-i18n="bots.cancel">Batal</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script src="{{ url_for('static', filename='js/trading_bots.js') }}"></script>
|
|
{% endblock %}
|