feat: TomSelect ile coin seçici
This commit is contained in:
parent
0ba182834b
commit
4104d82ef0
1 changed files with 33 additions and 44 deletions
|
|
@ -4,6 +4,8 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Mukan Special Edition</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tom-select@2/dist/css/tom-select.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/tom-select@2/dist/js/tom-select.complete.min.js"></script>
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
:root {
|
||||
|
|
@ -57,6 +59,12 @@
|
|||
.auth-box input { background: var(--bg); border: 1px solid var(--border); border-radius: 5px; padding: 9px 12px; color: var(--text); font-size: 14px; width: 100%; }
|
||||
.auth-box input:focus { outline: none; border-color: var(--accent); }
|
||||
.auth-error { color: var(--red); font-size: 12px; display: none; }
|
||||
.ts-wrapper .ts-control { background: var(--bg); border-color: var(--border); color: var(--text); min-height: 32px; padding: 4px 10px; border-radius: 5px; }
|
||||
.ts-wrapper.focus .ts-control { border-color: var(--accent); box-shadow: none; }
|
||||
.ts-dropdown { background: var(--surface); border-color: var(--border); color: var(--text); }
|
||||
.ts-dropdown .option { padding: 7px 12px; }
|
||||
.ts-dropdown .option.active { background: rgba(108,99,255,0.2); color: var(--text); }
|
||||
.ts-wrapper .ts-control .item { color: var(--text); background: rgba(108,99,255,0.15); border-radius: 3px; padding: 1px 6px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -89,11 +97,9 @@
|
|||
<div class="section-header">Yeni Bot Ekle</div>
|
||||
<div class="form-grid">
|
||||
<div class="form-group"><label>İsim</label><input id="f-name" placeholder="DOGE Bot" /></div>
|
||||
<div class="form-group" style="position:relative">
|
||||
<div class="form-group">
|
||||
<label>Coin (USDT çifti)</label>
|
||||
<input id="f-symbol-search" placeholder="Ara: DOGE, BTC..." autocomplete="off" oninput="filterSymbols(this.value)" onfocus="showDropdown()" onblur="setTimeout(hideDropdown,150)" />
|
||||
<div id="symbol-dropdown" style="display:none;position:absolute;top:100%;left:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:5px;max-height:200px;overflow-y:auto;z-index:50;"></div>
|
||||
<input type="hidden" id="f-symbol" />
|
||||
<select id="f-symbol"><option value="">Yükleniyor...</option></select>
|
||||
</div>
|
||||
<div class="form-group"><label>Timeframe</label>
|
||||
<select id="f-timeframe">
|
||||
|
|
@ -141,7 +147,7 @@
|
|||
<script>
|
||||
let AUTH_TOKEN = localStorage.getItem('mse_token') || '';
|
||||
let sseSource = null;
|
||||
let allSymbols = []; // [{symbol, min_notional}]
|
||||
let symbolSelect = null;
|
||||
|
||||
function login() {
|
||||
const t = document.getElementById('token-input').value.trim();
|
||||
|
|
@ -185,46 +191,29 @@ async function loadAll() {
|
|||
|
||||
async function loadSymbols() {
|
||||
const res = await api('GET', '/symbols');
|
||||
allSymbols = await res.json();
|
||||
}
|
||||
const symbols = await res.json();
|
||||
|
||||
function filterSymbols(query) {
|
||||
const q = query.toUpperCase();
|
||||
const matches = q
|
||||
? allSymbols.filter(s => s.symbol.startsWith(q) || s.symbol.includes(q)).slice(0, 50)
|
||||
: allSymbols.slice(0, 50);
|
||||
renderDropdown(matches);
|
||||
showDropdown();
|
||||
}
|
||||
|
||||
function renderDropdown(items) {
|
||||
const dd = document.getElementById('symbol-dropdown');
|
||||
if (!items.length) { dd.innerHTML = '<div style="padding:8px 12px;color:var(--muted)">Bulunamadı</div>'; return; }
|
||||
dd.innerHTML = items.map(s =>
|
||||
`<div style="padding:7px 12px;cursor:pointer;display:flex;justify-content:space-between;align-items:center"
|
||||
onmousedown="selectSymbol('${s.symbol}',${s.min_notional})">
|
||||
<strong>${s.symbol}</strong><span style="color:var(--muted);font-size:11px">min ${s.min_notional} USDT</span>
|
||||
</div>`
|
||||
).join('');
|
||||
}
|
||||
|
||||
function selectSymbol(symbol, minNotional) {
|
||||
document.getElementById('f-symbol').value = symbol;
|
||||
document.getElementById('f-symbol-search').value = symbol;
|
||||
document.getElementById('f-usdt').value = minNotional;
|
||||
document.getElementById('f-min-label').textContent = `(min ${minNotional} USDT)`;
|
||||
hideDropdown();
|
||||
}
|
||||
|
||||
function showDropdown() {
|
||||
const dd = document.getElementById('symbol-dropdown');
|
||||
if (!allSymbols.length) return;
|
||||
if (!dd.innerHTML) filterSymbols(document.getElementById('f-symbol-search').value);
|
||||
dd.style.display = 'block';
|
||||
}
|
||||
|
||||
function hideDropdown() {
|
||||
document.getElementById('symbol-dropdown').style.display = 'none';
|
||||
symbolSelect = new TomSelect('#f-symbol', {
|
||||
valueField: 'symbol',
|
||||
labelField: 'symbol',
|
||||
searchField: 'symbol',
|
||||
options: symbols,
|
||||
placeholder: 'Ara: DOGE, BTC...',
|
||||
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 = symbols.find(s => s.symbol === value);
|
||||
if (!item) return;
|
||||
document.getElementById('f-usdt').value = item.min_notional;
|
||||
document.getElementById('f-min-label').textContent = `(min ${item.min_notional} USDT)`;
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
async function loadBots() {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue