feat(mse): shared bot modal component + pagination on positions/bots
- Extract bot creation modal to _bot_modal.html partial (TomSelect, min_notional display)
- bots.html and index.html now include the partial via {% include %}
- Remove duplicate modal JS from bots.html; add onBotCreated/onModeChange hooks
- Add 20-item pagination to positions.html (open + closed tables)
- positions.html: remove redundant loadMode (handled by _header.html partial)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
d1085cc4cc
commit
2ff8d57c08
7 changed files with 290 additions and 294 deletions
17
Cargo.lock
generated
17
Cargo.lock
generated
|
|
@ -1061,6 +1061,12 @@ version = "2.8.0"
|
|||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "f8ca58f447f06ed17d5fc4043ce1b10dd205e060fb3ce5b979b8ed8e59ff3f79"
|
||||
|
||||
[[package]]
|
||||
name = "memo-map"
|
||||
version = "0.3.3"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "38d1115007560874e373613744c6fba374c17688327a71c1476d1a5954cc857b"
|
||||
|
||||
[[package]]
|
||||
name = "mime"
|
||||
version = "0.3.17"
|
||||
|
|
@ -1077,6 +1083,16 @@ dependencies = [
|
|||
"unicase",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "minijinja"
|
||||
version = "2.19.0"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "805bfd7352166bae857ee569628b52bcd85a1cecf7810861ebceb1686b72b75d"
|
||||
dependencies = [
|
||||
"memo-map",
|
||||
"serde",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "mio"
|
||||
version = "1.2.0"
|
||||
|
|
@ -1105,6 +1121,7 @@ dependencies = [
|
|||
"hex",
|
||||
"hmac",
|
||||
"log",
|
||||
"minijinja",
|
||||
"reqwest",
|
||||
"rusqlite",
|
||||
"serde",
|
||||
|
|
|
|||
|
|
@ -61,3 +61,4 @@ axum-extra = { version = "0.9", features = ["cookie"] }
|
|||
|
||||
# Async stream generator
|
||||
async-stream = "0.3"
|
||||
minijinja = "2.19.0"
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ fn env() -> &'static Environment<'static> {
|
|||
ENV.get_or_init(|| {
|
||||
let mut e = Environment::new();
|
||||
e.add_template_owned("_header.html", include_str!("web/_header.html").to_string()).unwrap();
|
||||
e.add_template_owned("_bot_modal.html", include_str!("web/_bot_modal.html").to_string()).unwrap();
|
||||
e.add_template_owned("index.html", include_str!("web/index.html").to_string()).unwrap();
|
||||
e.add_template_owned("bots.html", include_str!("web/bots.html").to_string()).unwrap();
|
||||
e.add_template_owned("bot.html", include_str!("web/bot.html").to_string()).unwrap();
|
||||
|
|
|
|||
127
src/web/_bot_modal.html
Normal file
127
src/web/_bot_modal.html
Normal file
|
|
@ -0,0 +1,127 @@
|
|||
<div id="modal-overlay" onclick="if(event.target===this)closeModal()">
|
||||
<div class="modal">
|
||||
<div class="modal-header">
|
||||
<h2 id="modal-title">Yeni Bot Ekle</h2>
|
||||
<button class="modal-close" onclick="closeModal()">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label>İsim</label>
|
||||
<input id="f-name" type="text" placeholder="DOGE Bot" autocomplete="off" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Coin (USDT çifti)</label>
|
||||
<select id="f-symbol"><option value="">Ara veya seç...</option></select>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>Timeframe</label>
|
||||
<select id="f-tf">
|
||||
<option value="1m">1 Dakika</option>
|
||||
<option value="5m" selected>5 Dakika</option>
|
||||
<option value="15m">15 Dakika</option>
|
||||
<option value="30m">30 Dakika</option>
|
||||
<option value="1h">1 Saat</option>
|
||||
<option value="4h">4 Saat</option>
|
||||
<option value="1d">1 Gün</option>
|
||||
<option value="1w">1 Hafta</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Kar %</label>
|
||||
<input id="f-profit" type="number" step="0.1" placeholder="2" min="0.1" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>USDT Miktarı <span id="f-min-label" style="font-size:10px;color:var(--muted);font-weight:400;text-transform:none"></span></label>
|
||||
<input id="f-usdt" type="number" step="1" placeholder="10" min="1" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn" onclick="closeModal()">İptal</button>
|
||||
<button class="btn btn-primary" onclick="createBot()">Oluştur</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
let _symbolSelect = null;
|
||||
let _symbolMinMap = {};
|
||||
let _symbolsLoaded = false;
|
||||
|
||||
async function _api(method, path, body) {
|
||||
const res = await fetch('/api' + path, {
|
||||
method, credentials: 'include',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: body ? JSON.stringify(body) : undefined,
|
||||
});
|
||||
if (res.status === 401) { window.location.href = '/'; throw new Error('Unauthorized'); }
|
||||
return res;
|
||||
}
|
||||
|
||||
async function _loadSymbols() {
|
||||
if (_symbolsLoaded) return;
|
||||
_symbolsLoaded = true;
|
||||
const res = await _api('GET', '/symbols');
|
||||
const symbols = await res.json();
|
||||
_symbolMinMap = {};
|
||||
symbols.forEach(s => { _symbolMinMap[s.symbol] = s.min_notional; });
|
||||
|
||||
const sel = document.getElementById('f-symbol');
|
||||
sel.innerHTML = '<option value="">Ara veya seç...</option>' +
|
||||
symbols.map(s => `<option value="${s.symbol}">${s.symbol}</option>`).join('');
|
||||
|
||||
_symbolSelect = new TomSelect('#f-symbol', {
|
||||
maxOptions: 2000,
|
||||
searchField: ['text'],
|
||||
render: {
|
||||
option: d => `<div style="display:flex;justify-content:space-between;align-items:center"><strong>${d.text}</strong><span style="color:#888;font-size:11px;margin-left:8px">min ${_symbolMinMap[d.value] || '—'} USDT</span></div>`,
|
||||
item: d => `<div>${d.text}</div>`,
|
||||
},
|
||||
onChange: v => {
|
||||
const min = _symbolMinMap[v];
|
||||
document.getElementById('f-min-label').textContent = min ? `(min: ${min} USDT)` : '';
|
||||
const inp = document.getElementById('f-usdt');
|
||||
if (min) { inp.min = min; if (!inp.value || parseFloat(inp.value) < min) inp.value = min; }
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
window.openModal = async function() {
|
||||
const modeRes = await _api('GET', '/mode');
|
||||
const { mode } = await modeRes.json();
|
||||
const label = mode === 'testnet' ? 'Testnet' : 'Canlı';
|
||||
document.getElementById('modal-title').textContent = `Yeni Bot Ekle — ${label}`;
|
||||
document.getElementById('modal-overlay').classList.add('open');
|
||||
await _loadSymbols();
|
||||
if (_symbolSelect) _symbolSelect.focus();
|
||||
};
|
||||
|
||||
window.closeModal = function() {
|
||||
document.getElementById('modal-overlay').classList.remove('open');
|
||||
document.getElementById('f-name').value = '';
|
||||
document.getElementById('f-usdt').value = '';
|
||||
document.getElementById('f-profit').value = '';
|
||||
document.getElementById('f-min-label').textContent = '';
|
||||
if (_symbolSelect) _symbolSelect.clear();
|
||||
};
|
||||
|
||||
window.createBot = async function() {
|
||||
const name = document.getElementById('f-name').value.trim();
|
||||
const symbol = _symbolSelect ? _symbolSelect.getValue() : document.getElementById('f-symbol').value;
|
||||
const timeframe = document.getElementById('f-tf').value;
|
||||
const usdt_amount = parseFloat(document.getElementById('f-usdt').value);
|
||||
const profit_percent = parseFloat(document.getElementById('f-profit').value);
|
||||
if (!name || !symbol || !usdt_amount || !profit_percent) { alert('Tüm alanları doldurun'); return; }
|
||||
const min = _symbolMinMap[symbol] || 0;
|
||||
if (usdt_amount < min) { alert(`Minimum işlem miktarı ${min} USDT`); document.getElementById('f-usdt').focus(); return; }
|
||||
const res = await _api('POST', '/bots', { name, symbol, timeframe, usdt_amount, profit_percent });
|
||||
if (!res.ok) { alert('Bot oluşturulamadı: ' + await res.text()); return; }
|
||||
closeModal();
|
||||
if (typeof onBotCreated === 'function') onBotCreated();
|
||||
};
|
||||
|
||||
document.addEventListener('keydown', e => { if (e.key === 'Escape') closeModal(); });
|
||||
})();
|
||||
</script>
|
||||
|
|
@ -114,6 +114,11 @@
|
|||
.ts-dropdown .option { padding: 7px 12px; color: var(--text) !important; }
|
||||
.ts-dropdown .option:hover, .ts-dropdown .option.active { background: rgba(108,99,255,.2) !important; }
|
||||
.ts-wrapper .ts-control .item { color: var(--text) !important; background: rgba(108,99,255,.15) !important; border-radius: 3px; padding: 1px 6px; border: none !important; }
|
||||
.pagination { display: flex; align-items: center; gap: 4px; padding: 12px 0 4px; flex-wrap: wrap; }
|
||||
.pg-btn { padding: 4px 10px; border-radius: 5px; border: 1px solid var(--border); background: transparent; color: var(--muted); font-size: 12px; cursor: pointer; transition: all .15s; }
|
||||
.pg-btn:hover { background: rgba(255,255,255,.05); color: var(--text); }
|
||||
.pg-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
|
||||
.pg-info { font-size: 11px; color: var(--muted); margin-left: 8px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -136,58 +141,9 @@
|
|||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Yeni Bot Modal -->
|
||||
<div id="modal-overlay" onclick="if(event.target===this)closeModal()">
|
||||
<div class="modal">
|
||||
<div class="modal-header">
|
||||
<h2>Yeni Bot Oluştur</h2>
|
||||
<button class="modal-close" onclick="closeModal()">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label>İsim</label>
|
||||
<input id="f-name" type="text" placeholder="Bot ismi" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Sembol</label>
|
||||
<select id="f-symbol"></select>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>Timeframe</label>
|
||||
<select id="f-tf">
|
||||
<option value="1m">1 Dakika</option>
|
||||
<option value="5m" selected>5 Dakika</option>
|
||||
<option value="15m">15 Dakika</option>
|
||||
<option value="30m">30 Dakika</option>
|
||||
<option value="1h">1 Saat</option>
|
||||
<option value="4h">4 Saat</option>
|
||||
<option value="1d">1 Gün</option>
|
||||
<option value="1w">1 Hafta</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Kar %</label>
|
||||
<input id="f-profit" type="number" step="0.1" placeholder="2" min="0.1" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>USDT Miktarı <span id="f-min-note" style="font-size:10px;color:var(--muted);font-weight:400;text-transform:none"></span></label>
|
||||
<input id="f-usdt" type="number" step="1" placeholder="10" min="1" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn" onclick="closeModal()">İptal</button>
|
||||
<button class="btn btn-primary" onclick="createBot()">Oluştur</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% include "_bot_modal.html" %}
|
||||
|
||||
<script>
|
||||
let symbolSelect = null;
|
||||
let symbolMinMap = {};
|
||||
let currentMode = 'live';
|
||||
|
||||
async function api(method, path, body) {
|
||||
const res = await fetch('/api' + path, {
|
||||
method, credentials: 'include',
|
||||
|
|
@ -199,21 +155,8 @@ async function api(method, path, body) {
|
|||
}
|
||||
function esc(s) { return String(s).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>'); }
|
||||
|
||||
// ── Mode ──
|
||||
async function loadMode() {
|
||||
const res = await api('GET', '/mode');
|
||||
const { mode } = await res.json();
|
||||
currentMode = mode;
|
||||
document.getElementById('btn-live').className = 'mode-btn' + (mode === 'live' ? ' active-live' : '');
|
||||
document.getElementById('btn-testnet').className = 'mode-btn' + (mode === 'testnet' ? ' active-testnet' : '');
|
||||
}
|
||||
async function setMode(mode) {
|
||||
await api('POST', '/mode', { mode });
|
||||
currentMode = mode;
|
||||
document.getElementById('btn-live').className = 'mode-btn' + (mode === 'live' ? ' active-live' : '');
|
||||
document.getElementById('btn-testnet').className = 'mode-btn' + (mode === 'testnet' ? ' active-testnet' : '');
|
||||
loadBots();
|
||||
}
|
||||
function onBotCreated() { loadBots(); }
|
||||
function onModeChange() { loadBots(); }
|
||||
|
||||
// ── Bots ──
|
||||
async function loadBots() {
|
||||
|
|
@ -283,60 +226,11 @@ async function deleteBot(id, name) {
|
|||
loadBots();
|
||||
}
|
||||
|
||||
// ── Modal ──
|
||||
async function openModal() {
|
||||
document.getElementById('modal-overlay').classList.add('open');
|
||||
if (!symbolSelect) await loadSymbols();
|
||||
}
|
||||
function closeModal() {
|
||||
document.getElementById('modal-overlay').classList.remove('open');
|
||||
document.getElementById('f-name').value = '';
|
||||
document.getElementById('f-usdt').value = '';
|
||||
document.getElementById('f-profit').value = '';
|
||||
document.getElementById('f-min-note').textContent = '';
|
||||
if (symbolSelect) symbolSelect.clear();
|
||||
}
|
||||
|
||||
async function loadSymbols() {
|
||||
const res = await api('GET', '/symbols');
|
||||
const symbols = await res.json();
|
||||
symbolMinMap = {};
|
||||
symbols.forEach(s => symbolMinMap[s.symbol] = s.min_notional);
|
||||
|
||||
const sel = document.getElementById('f-symbol');
|
||||
sel.innerHTML = '<option value="">Sembol seç...</option>' +
|
||||
symbols.map(s => `<option value="${s.symbol}">${s.symbol}</option>`).join('');
|
||||
|
||||
symbolSelect = new TomSelect('#f-symbol', {
|
||||
maxOptions: 2000, searchField: ['text'],
|
||||
onChange: v => {
|
||||
const min = symbolMinMap[v];
|
||||
document.getElementById('f-min-note').textContent = min ? `(min: ${min} USDT)` : '';
|
||||
document.getElementById('f-usdt').min = min || 1;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function createBot() {
|
||||
const name = document.getElementById('f-name').value.trim();
|
||||
const symbol = symbolSelect ? symbolSelect.getValue() : document.getElementById('f-symbol').value;
|
||||
const timeframe = document.getElementById('f-tf').value;
|
||||
const usdt_amount = parseFloat(document.getElementById('f-usdt').value);
|
||||
const profit_percent = parseFloat(document.getElementById('f-profit').value);
|
||||
if (!name || !symbol || !usdt_amount || !profit_percent) { alert('Tüm alanları doldurun'); return; }
|
||||
const min = symbolMinMap[symbol] || 0;
|
||||
if (usdt_amount < min) { alert(`Minimum işlem miktarı ${min} USDT`); return; }
|
||||
await api('POST', '/bots', { name, symbol, timeframe, usdt_amount, profit_percent });
|
||||
closeModal();
|
||||
loadBots();
|
||||
}
|
||||
|
||||
async function logout() {
|
||||
await fetch('/api/auth/logout', { method: 'POST', credentials: 'include' });
|
||||
window.location.href = '/';
|
||||
}
|
||||
|
||||
loadMode();
|
||||
loadBots();
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -94,55 +94,19 @@
|
|||
.ts-dropdown .option.active { background: rgba(108,99,255,0.2) !important; color: var(--text) !important; }
|
||||
.ts-dropdown .option.selected { background: rgba(108,99,255,0.1) !important; }
|
||||
.ts-wrapper .ts-control .item { color: var(--text) !important; background: rgba(108,99,255,0.15) !important; border-radius: 3px; padding: 1px 6px; border: none !important; }
|
||||
|
||||
/* Pagination */
|
||||
.pagination { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 8px 0; border-top: 1px solid var(--border); }
|
||||
.pg-btn { background: none; border: 1px solid var(--border); color: var(--muted); border-radius: 3px; padding: 2px 9px; font-size: 11px; cursor: pointer; }
|
||||
.pg-btn:hover { color: var(--text); border-color: var(--accent); }
|
||||
.pg-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
|
||||
.pg-info { font-size: 11px; color: var(--muted); margin-left: 6px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<div id="modal-overlay" onclick="if(event.target===this)closeModal()">
|
||||
<div class="modal">
|
||||
<div class="modal-header">
|
||||
<h2>Yeni Bot Ekle</h2>
|
||||
<button class="modal-close" onclick="closeModal()">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label>İsim</label>
|
||||
<input id="f-name" placeholder="DOGE Bot" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Coin (USDT çifti)</label>
|
||||
<select id="f-symbol"><option value="">Yükleniyor...</option></select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Timeframe</label>
|
||||
<select id="f-timeframe">
|
||||
<option value="1m">1m</option>
|
||||
<option value="5m" selected>5m</option>
|
||||
<option value="15m">15m</option>
|
||||
<option value="30m">30m</option>
|
||||
<option value="1h">1h</option>
|
||||
<option value="4h">4h</option>
|
||||
<option value="1d">1d</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>USDT Miktarı <span id="f-min-label" style="color:var(--muted);font-size:10px"></span></label>
|
||||
<input id="f-usdt" type="number" step="1" inputmode="numeric" placeholder="—" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Kar %</label>
|
||||
<input id="f-profit" type="number" step="0.1" placeholder="2" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn" onclick="closeModal()">İptal</button>
|
||||
<button class="btn btn-primary" onclick="createBot()">Bot Ekle</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% include "_bot_modal.html" %}
|
||||
|
||||
{% include "_header.html" %}
|
||||
|
||||
|
|
@ -165,6 +129,7 @@
|
|||
<thead><tr><th>Bot</th><th>Sembol</th><th>Alış</th><th>Hedef</th><th>Miktar</th><th>Zaman</th></tr></thead>
|
||||
<tbody id="positions-body"><tr><td colspan="6" class="empty">Açık pozisyon yok</td></tr></tbody>
|
||||
</table>
|
||||
<div class="pagination" id="positions-pagination"></div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
|
|
@ -173,14 +138,15 @@
|
|||
<thead><tr><th>Bot</th><th>Sembol</th><th>Alış</th><th>Hedef</th><th>Miktar</th><th>Durum</th><th>Zaman</th></tr></thead>
|
||||
<tbody id="closed-body"><tr><td colspan="7" class="empty">Henüz işlem yok</td></tr></tbody>
|
||||
</table>
|
||||
<div class="pagination" id="closed-pagination"></div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
let sseSource = null;
|
||||
let symbolSelect = null;
|
||||
let allSymbols = [];
|
||||
let currentMode = 'testnet';
|
||||
const PAGE_SIZE = 20;
|
||||
let positionsCache = [], posPage = 0;
|
||||
let closedCache = [], closedPage = 0;
|
||||
|
||||
async function api(method, path, body) {
|
||||
const res = await fetch('/api' + path, {
|
||||
|
|
@ -199,83 +165,15 @@ async function logout() {
|
|||
window.location.href = '/';
|
||||
}
|
||||
|
||||
function onBotCreated() { loadBots(); }
|
||||
function onModeChange() { loadBots(); loadPositions(); loadClosed(); }
|
||||
|
||||
async function loadAll() {
|
||||
await loadMode();
|
||||
loadBots();
|
||||
loadPositions();
|
||||
loadClosed();
|
||||
loadSymbols();
|
||||
}
|
||||
|
||||
async function loadMode() {
|
||||
const res = await api('GET', '/mode');
|
||||
const data = await res.json();
|
||||
currentMode = data.mode;
|
||||
updateModeUI();
|
||||
}
|
||||
|
||||
function updateModeUI() {
|
||||
const btnTestnet = document.getElementById('btn-testnet');
|
||||
const btnLive = document.getElementById('btn-live');
|
||||
btnTestnet.className = 'mode-btn' + (currentMode === 'testnet' ? ' active-testnet' : '');
|
||||
btnLive.className = 'mode-btn' + (currentMode === 'live' ? ' active-live' : '');
|
||||
}
|
||||
|
||||
async function switchMode(mode) {
|
||||
if (mode === currentMode) return;
|
||||
const label = mode === 'live' ? 'canlı' : 'testnet';
|
||||
if (!confirm(`${label.charAt(0).toUpperCase() + label.slice(1)} moda geçilecek. Çalışan tüm botlar durdurulacak. Devam edilsin mi?`)) return;
|
||||
await api('POST', '/mode', { mode });
|
||||
currentMode = mode;
|
||||
updateModeUI();
|
||||
loadAll();
|
||||
}
|
||||
|
||||
async function loadSymbols() {
|
||||
const res = await api('GET', '/symbols');
|
||||
allSymbols = await res.json();
|
||||
|
||||
symbolSelect = new TomSelect('#f-symbol', {
|
||||
valueField: 'symbol',
|
||||
labelField: 'symbol',
|
||||
searchField: 'symbol',
|
||||
options: allSymbols,
|
||||
placeholder: 'Ara veya seç...',
|
||||
minChars: 0,
|
||||
maxOptions: false,
|
||||
dropdownParent: 'body',
|
||||
render: {
|
||||
option: (data) =>
|
||||
`<div style="display:flex;justify-content:space-between;align-items:center">
|
||||
<strong>${data.symbol}</strong>
|
||||
<span style="color:#888;font-size:11px">min ${data.min_notional} USDT</span>
|
||||
</div>`,
|
||||
item: (data) => `<div>${data.symbol}</div>`,
|
||||
},
|
||||
onChange(value) {
|
||||
const item = allSymbols.find(s => s.symbol === value);
|
||||
if (!item) return;
|
||||
const usdtInput = document.getElementById('f-usdt');
|
||||
usdtInput.value = item.min_notional;
|
||||
usdtInput.min = item.min_notional;
|
||||
document.getElementById('f-min-label').textContent = `(min ${item.min_notional} USDT)`;
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function openModal() {
|
||||
const modeLabel = currentMode === 'testnet' ? '🟡 Testnet' : '🟢 Canlı';
|
||||
document.querySelector('.modal-header h2').textContent = `Yeni Bot Ekle — ${modeLabel}`;
|
||||
document.getElementById('modal-overlay').classList.add('open');
|
||||
if (symbolSelect) symbolSelect.focus();
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
document.getElementById('modal-overlay').classList.remove('open');
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', e => { if (e.key === 'Escape') closeModal(); });
|
||||
|
||||
async function loadBots() {
|
||||
const res = await api('GET', '/bots');
|
||||
const bots = await res.json();
|
||||
|
|
@ -303,11 +201,20 @@ async function loadBots() {
|
|||
|
||||
async function loadPositions() {
|
||||
const res = await api('GET', '/positions');
|
||||
const positions = await res.json();
|
||||
positionsCache = await res.json();
|
||||
posPage = 0;
|
||||
renderPositions();
|
||||
}
|
||||
|
||||
function renderPositions() {
|
||||
const tbody = document.getElementById('positions-body');
|
||||
if (!positions.length) { tbody.innerHTML = '<tr><td colspan="6" class="empty">Açık pozisyon yok</td></tr>'; return; }
|
||||
tbody.innerHTML = positions.map(p => `
|
||||
<tr>
|
||||
if (!positionsCache.length) {
|
||||
tbody.innerHTML = '<tr><td colspan="6" class="empty">Açık pozisyon yok</td></tr>';
|
||||
document.getElementById('positions-pagination').innerHTML = '';
|
||||
return;
|
||||
}
|
||||
const page = positionsCache.slice(posPage * PAGE_SIZE, (posPage + 1) * PAGE_SIZE);
|
||||
tbody.innerHTML = page.map(p => `<tr>
|
||||
<td>${esc(p.bot_name)}</td>
|
||||
<td><strong>${esc(p.symbol)}</strong></td>
|
||||
<td>${p.buy_price.toFixed(6)}</td>
|
||||
|
|
@ -315,15 +222,25 @@ async function loadPositions() {
|
|||
<td>${p.quantity}</td>
|
||||
<td>${new Date(p.opened_at).toLocaleString('tr-TR')}</td>
|
||||
</tr>`).join('');
|
||||
renderPagination('positions-pagination', positionsCache.length, posPage, 'goPosPage');
|
||||
}
|
||||
|
||||
async function loadClosed() {
|
||||
const res = await api('GET', '/positions/closed');
|
||||
const closed = await res.json();
|
||||
closedCache = await res.json();
|
||||
closedPage = 0;
|
||||
renderClosed();
|
||||
}
|
||||
|
||||
function renderClosed() {
|
||||
const tbody = document.getElementById('closed-body');
|
||||
if (!closed.length) { tbody.innerHTML = '<tr><td colspan="7" class="empty">Henüz işlem yok</td></tr>'; return; }
|
||||
tbody.innerHTML = closed.map(c => `
|
||||
<tr>
|
||||
if (!closedCache.length) {
|
||||
tbody.innerHTML = '<tr><td colspan="7" class="empty">Henüz işlem yok</td></tr>';
|
||||
document.getElementById('closed-pagination').innerHTML = '';
|
||||
return;
|
||||
}
|
||||
const page = closedCache.slice(closedPage * PAGE_SIZE, (closedPage + 1) * PAGE_SIZE);
|
||||
tbody.innerHTML = page.map(c => `<tr>
|
||||
<td>${esc(c.bot_name)}</td>
|
||||
<td><strong>${esc(c.symbol)}</strong></td>
|
||||
<td>${c.buy_price.toFixed(6)}</td>
|
||||
|
|
@ -332,27 +249,25 @@ async function loadClosed() {
|
|||
<td><span class="badge ${c.status==='FILLED'?'badge-running':'badge-stopped'}">${c.status}</span></td>
|
||||
<td>${new Date(c.closed_at).toLocaleString('tr-TR')}</td>
|
||||
</tr>`).join('');
|
||||
renderPagination('closed-pagination', closedCache.length, closedPage, 'goClosedPage');
|
||||
}
|
||||
|
||||
async function createBot() {
|
||||
const name = document.getElementById('f-name').value.trim();
|
||||
const symbol = symbolSelect ? symbolSelect.getValue() : '';
|
||||
const timeframe = document.getElementById('f-timeframe').value;
|
||||
const usdt_amount = parseFloat(document.getElementById('f-usdt').value);
|
||||
const profit_percent = parseFloat(document.getElementById('f-profit').value);
|
||||
const usdtInput = document.getElementById('f-usdt');
|
||||
const minNotional = parseFloat(usdtInput.min) || 0;
|
||||
if (!name || !symbol || !usdt_amount || !profit_percent) { alert('Tüm alanları doldurun'); return; }
|
||||
if (usdt_amount < minNotional) { alert(`Minimum işlem miktarı ${minNotional} USDT`); usdtInput.focus(); return; }
|
||||
await api('POST', '/bots', { name, symbol, timeframe, usdt_amount, profit_percent });
|
||||
closeModal();
|
||||
document.getElementById('f-name').value = '';
|
||||
if (symbolSelect) symbolSelect.clear();
|
||||
document.getElementById('f-usdt').value = '';
|
||||
document.getElementById('f-profit').value = '';
|
||||
document.getElementById('f-min-label').textContent = '';
|
||||
loadBots();
|
||||
function renderPagination(containerId, total, currentPage, fnName) {
|
||||
const el = document.getElementById(containerId);
|
||||
const totalPages = Math.ceil(total / PAGE_SIZE);
|
||||
if (totalPages <= 1) { el.innerHTML = ''; return; }
|
||||
const lo = Math.max(0, currentPage - 2), hi = Math.min(totalPages - 1, currentPage + 2);
|
||||
let html = '';
|
||||
if (currentPage > 0) html += `<button class="pg-btn" onclick="${fnName}(${currentPage-1})">‹</button>`;
|
||||
for (let i = lo; i <= hi; i++)
|
||||
html += `<button class="pg-btn${i===currentPage?' active':''}" onclick="${fnName}(${i})">${i+1}</button>`;
|
||||
if (currentPage < totalPages - 1) html += `<button class="pg-btn" onclick="${fnName}(${currentPage+1})">›</button>`;
|
||||
const start = currentPage * PAGE_SIZE;
|
||||
html += `<span class="pg-info">${start+1}–${Math.min(start+PAGE_SIZE,total)} / ${total}</span>`;
|
||||
el.innerHTML = html;
|
||||
}
|
||||
function goPosPage(p) { posPage = p; renderPositions(); }
|
||||
function goClosedPage(p) { closedPage = p; renderClosed(); }
|
||||
|
||||
async function startBot(id) {
|
||||
await api('POST', `/bots/${id}/start`);
|
||||
|
|
|
|||
|
|
@ -41,6 +41,11 @@
|
|||
.badge-new { background: rgba(108,99,255,.15); color: var(--accent); }
|
||||
.badge-canceled { background: rgba(136,136,136,.1); color: var(--muted); }
|
||||
.empty { padding: 24px 18px; color: var(--muted); font-size: 13px; text-align: center; }
|
||||
.pagination { display: flex; align-items: center; gap: 4px; padding: 12px 18px; flex-wrap: wrap; }
|
||||
.pg-btn { padding: 4px 10px; border-radius: 5px; border: 1px solid var(--border); background: transparent; color: var(--muted); font-size: 12px; cursor: pointer; transition: all .15s; }
|
||||
.pg-btn:hover { background: rgba(255,255,255,.05); color: var(--text); }
|
||||
.pg-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
|
||||
.pg-info { font-size: 11px; color: var(--muted); margin-left: 8px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -55,6 +60,7 @@
|
|||
<thead><tr><th>Bot</th><th>Sembol</th><th>Alış</th><th>Hedef</th><th>Miktar</th><th>Zaman</th></tr></thead>
|
||||
<tbody id="open-body"><tr><td colspan="6" class="empty">Yükleniyor...</td></tr></tbody>
|
||||
</table>
|
||||
<div class="pagination" id="open-pagination"></div>
|
||||
</section>
|
||||
<section>
|
||||
<div class="section-header">Kapalı İşlemler</div>
|
||||
|
|
@ -62,10 +68,15 @@
|
|||
<thead><tr><th>Bot</th><th>Sembol</th><th>Alış</th><th>Hedef</th><th>Miktar</th><th>Durum</th><th>Kapanış</th></tr></thead>
|
||||
<tbody id="closed-body"><tr><td colspan="7" class="empty">Yükleniyor...</td></tr></tbody>
|
||||
</table>
|
||||
<div class="pagination" id="closed-pagination"></div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
const PAGE_SIZE = 20;
|
||||
let openCache = [], closedCache = [];
|
||||
let openPage = 1, closedPage = 1;
|
||||
|
||||
async function api(method, path) {
|
||||
const res = await fetch('/api' + path, { method, credentials: 'include' });
|
||||
if (res.status === 401) { window.location.href = '/'; throw new Error('Unauthorized'); }
|
||||
|
|
@ -74,21 +85,33 @@ async function api(method, path) {
|
|||
function fmt(n, d=2) { return parseFloat(n).toLocaleString('tr-TR', { minimumFractionDigits: d, maximumFractionDigits: d }); }
|
||||
function ts(ms) { return new Date(ms).toLocaleString('tr-TR'); }
|
||||
|
||||
async function loadMode() {
|
||||
const res = await api('GET', '/mode');
|
||||
if (!res.ok) return;
|
||||
const { mode } = await res.json();
|
||||
document.getElementById('btn-live').className = 'mode-btn' + (mode === 'live' ? ' active-live' : '');
|
||||
document.getElementById('btn-testnet').className = 'mode-btn' + (mode === 'testnet' ? ' active-testnet' : '');
|
||||
function onModeChange() { loadOpen(); loadClosed(); }
|
||||
|
||||
function renderPagination(containerId, total, current, fnName) {
|
||||
const el = document.getElementById(containerId);
|
||||
if (total <= PAGE_SIZE) { el.innerHTML = ''; return; }
|
||||
const pages = Math.ceil(total / PAGE_SIZE);
|
||||
const from = (current - 1) * PAGE_SIZE + 1;
|
||||
const to = Math.min(current * PAGE_SIZE, total);
|
||||
let html = '';
|
||||
if (current > 1) html += `<button class="pg-btn" onclick="${fnName}(${current - 1})">‹</button>`;
|
||||
for (let i = 1; i <= pages; i++) {
|
||||
if (pages > 7 && Math.abs(i - current) > 2 && i !== 1 && i !== pages) {
|
||||
if (i === current - 3 || i === current + 3) html += `<span class="pg-info">…</span>`;
|
||||
continue;
|
||||
}
|
||||
html += `<button class="pg-btn${i === current ? ' active' : ''}" onclick="${fnName}(${i})">${i}</button>`;
|
||||
}
|
||||
if (current < pages) html += `<button class="pg-btn" onclick="${fnName}(${current + 1})">›</button>`;
|
||||
html += `<span class="pg-info">${from}–${to} / ${total}</span>`;
|
||||
el.innerHTML = html;
|
||||
}
|
||||
|
||||
async function loadOpen() {
|
||||
const res = await api('GET', '/positions');
|
||||
function renderOpen() {
|
||||
const tbody = document.getElementById('open-body');
|
||||
if (!res.ok) { tbody.innerHTML = '<tr><td colspan="6" class="empty">Yüklenemedi</td></tr>'; return; }
|
||||
const data = await res.json();
|
||||
if (!data.length) { tbody.innerHTML = '<tr><td colspan="6" class="empty">Açık pozisyon yok</td></tr>'; return; }
|
||||
tbody.innerHTML = data.map(p => `<tr>
|
||||
if (!openCache.length) { tbody.innerHTML = '<tr><td colspan="6" class="empty">Açık pozisyon yok</td></tr>'; document.getElementById('open-pagination').innerHTML = ''; return; }
|
||||
const page = openCache.slice((openPage - 1) * PAGE_SIZE, openPage * PAGE_SIZE);
|
||||
tbody.innerHTML = page.map(p => `<tr>
|
||||
<td>${p.bot_name}</td>
|
||||
<td>${p.symbol}</td>
|
||||
<td>${fmt(p.buy_price, 4)}</td>
|
||||
|
|
@ -96,15 +119,14 @@ async function loadOpen() {
|
|||
<td>${fmt(p.quantity, 4)}</td>
|
||||
<td>${ts(p.opened_at)}</td>
|
||||
</tr>`).join('');
|
||||
renderPagination('open-pagination', openCache.length, openPage, 'goOpenPage');
|
||||
}
|
||||
|
||||
async function loadClosed() {
|
||||
const res = await api('GET', '/positions/closed');
|
||||
function renderClosed() {
|
||||
const tbody = document.getElementById('closed-body');
|
||||
if (!res.ok) { tbody.innerHTML = '<tr><td colspan="7" class="empty">Yüklenemedi</td></tr>'; return; }
|
||||
const data = await res.json();
|
||||
if (!data.length) { tbody.innerHTML = '<tr><td colspan="7" class="empty">Henüz işlem yok</td></tr>'; return; }
|
||||
tbody.innerHTML = data.map(p => `<tr>
|
||||
if (!closedCache.length) { tbody.innerHTML = '<tr><td colspan="7" class="empty">Henüz işlem yok</td></tr>'; document.getElementById('closed-pagination').innerHTML = ''; return; }
|
||||
const page = closedCache.slice((closedPage - 1) * PAGE_SIZE, closedPage * PAGE_SIZE);
|
||||
tbody.innerHTML = page.map(p => `<tr>
|
||||
<td>${p.bot_name}</td>
|
||||
<td>${p.symbol}</td>
|
||||
<td>${fmt(p.buy_price, 4)}</td>
|
||||
|
|
@ -113,6 +135,26 @@ async function loadClosed() {
|
|||
<td><span class="badge badge-${p.status.toLowerCase()}">${p.status}</span></td>
|
||||
<td>${ts(p.closed_at)}</td>
|
||||
</tr>`).join('');
|
||||
renderPagination('closed-pagination', closedCache.length, closedPage, 'goClosedPage');
|
||||
}
|
||||
|
||||
function goOpenPage(p) { openPage = p; renderOpen(); }
|
||||
function goClosedPage(p) { closedPage = p; renderClosed(); }
|
||||
|
||||
async function loadOpen() {
|
||||
const res = await api('GET', '/positions');
|
||||
if (!res.ok) { document.getElementById('open-body').innerHTML = '<tr><td colspan="6" class="empty">Yüklenemedi</td></tr>'; return; }
|
||||
openCache = await res.json();
|
||||
openPage = 1;
|
||||
renderOpen();
|
||||
}
|
||||
|
||||
async function loadClosed() {
|
||||
const res = await api('GET', '/positions/closed');
|
||||
if (!res.ok) { document.getElementById('closed-body').innerHTML = '<tr><td colspan="7" class="empty">Yüklenemedi</td></tr>'; return; }
|
||||
closedCache = await res.json();
|
||||
closedPage = 1;
|
||||
renderClosed();
|
||||
}
|
||||
|
||||
async function logout() {
|
||||
|
|
@ -120,7 +162,6 @@ async function logout() {
|
|||
window.location.href = '/';
|
||||
}
|
||||
|
||||
loadMode();
|
||||
loadOpen();
|
||||
loadClosed();
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue