UI redesign: CS2 gambling aesthetic, glassmorphism, responsive layout, enhanced sounds, admin panel overhaul
This commit is contained in:
root
+42
-204
@@ -2,9 +2,7 @@
|
||||
{% block title %}Кейсы — Админ-панель{% endblock %}
|
||||
{% block nav_cases %}active{% endblock %}
|
||||
{% block page_title %}📦 Управление кейсами{% endblock %}
|
||||
{% block top_actions %}
|
||||
<button class="a-btn a-btn-primary" onclick="openCreateCaseModal()">➕ Создать кейс</button>
|
||||
{% endblock %}
|
||||
{% block top_actions %}<button class="a-btn a-btn-primary" onclick="openCreateCaseModal()">➕ Создать кейс</button>{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="a-card">
|
||||
@@ -64,29 +62,14 @@
|
||||
<div class="a-modal-title" id="caseModalTitle">🎲 Создать кейс</div>
|
||||
<input type="hidden" id="editCaseName">
|
||||
<div class="a-row a-gap-sm">
|
||||
<div class="a-mb" style="flex:1">
|
||||
<label class="a-label">Название кейса (ID)</label>
|
||||
<input type="text" id="caseNameInput" class="a-input" placeholder="my_case">
|
||||
</div>
|
||||
<div class="a-mb" style="flex:1">
|
||||
<label class="a-label">Отображаемое название</label>
|
||||
<input type="text" id="caseDisplayName" class="a-input" placeholder="Мой кейс">
|
||||
</div>
|
||||
<div class="a-mb" style="flex:1"><label class="a-label">Название кейса (ID)</label><input type="text" id="caseNameInput" class="a-input" placeholder="my_case"></div>
|
||||
<div class="a-mb" style="flex:1"><label class="a-label">Отображаемое название</label><input type="text" id="caseDisplayName" class="a-input" placeholder="Мой кейс"></div>
|
||||
</div>
|
||||
<div class="a-row a-gap-sm">
|
||||
<div class="a-mb" style="flex:1">
|
||||
<label class="a-label">Цена открытия</label>
|
||||
<input type="number" id="casePrice" class="a-input" value="250">
|
||||
</div>
|
||||
<div class="a-mb" style="flex:1">
|
||||
<label class="a-label">Ссылка на изображение</label>
|
||||
<input type="text" id="caseImage" class="a-input" placeholder="/static/cases/default.png">
|
||||
</div>
|
||||
</div>
|
||||
<div class="a-mb">
|
||||
<label class="a-label">Описание (необязательно)</label>
|
||||
<input type="text" id="caseDescription" class="a-input" placeholder="Описание кейса...">
|
||||
<div class="a-mb" style="flex:1"><label class="a-label">Цена открытия</label><input type="number" id="casePrice" class="a-input" value="250"></div>
|
||||
<div class="a-mb" style="flex:1"><label class="a-label">Ссылка на изображение</label><input type="text" id="caseImage" class="a-input" placeholder="/static/cases/default.png"></div>
|
||||
</div>
|
||||
<div class="a-mb"><label class="a-label">Описание (необязательно)</label><input type="text" id="caseDescription" class="a-input" placeholder="Описание кейса..."></div>
|
||||
<div class="a-card" style="background:rgba(0,0,0,0.2);padding:0.75rem">
|
||||
<div class="a-card-header" style="margin-bottom:0.5rem">📋 Предметы кейса</div>
|
||||
<div id="caseItemsList"></div>
|
||||
@@ -116,14 +99,8 @@
|
||||
<div class="a-modal" style="max-width:400px">
|
||||
<div class="a-modal-title">➕ Добавить кейс в секцию</div>
|
||||
<p style="font-size:0.82rem;color:rgba(255,255,255,0.5);margin-bottom:0.75rem">Секция: <strong id="addCaseSectionName"></strong></p>
|
||||
<div class="a-mb">
|
||||
<label class="a-label">Выберите кейс</label>
|
||||
<select id="addCaseSelect" class="a-input"></select>
|
||||
</div>
|
||||
<div class="a-modal-actions">
|
||||
<button class="a-btn" onclick="closeModal('addCaseModal')">Отмена</button>
|
||||
<button class="a-btn a-btn-primary" onclick="confirmAddCase()">Добавить</button>
|
||||
</div>
|
||||
<div class="a-mb"><label class="a-label">Выберите кейс</label><select id="addCaseSelect" class="a-input"></select></div>
|
||||
<div class="a-modal-actions"><button class="a-btn" onclick="closeModal('addCaseModal')">Отмена</button><button class="a-btn a-btn-primary" onclick="confirmAddCase()">Добавить</button></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -131,14 +108,8 @@
|
||||
<div class="a-overlay" id="addSectionModal">
|
||||
<div class="a-modal" style="max-width:400px">
|
||||
<div class="a-modal-title">➕ Новая секция</div>
|
||||
<div class="a-mb">
|
||||
<label class="a-label">Название вкладки</label>
|
||||
<input type="text" id="newSectionName" class="a-input" placeholder="Новая коллекция">
|
||||
</div>
|
||||
<div class="a-modal-actions">
|
||||
<button class="a-btn" onclick="closeModal('addSectionModal')">Отмена</button>
|
||||
<button class="a-btn a-btn-primary" onclick="confirmAddSection()">Создать</button>
|
||||
</div>
|
||||
<div class="a-mb"><label class="a-label">Название вкладки</label><input type="text" id="newSectionName" class="a-input" placeholder="Новая коллекция"></div>
|
||||
<div class="a-modal-actions"><button class="a-btn" onclick="closeModal('addSectionModal')">Отмена</button><button class="a-btn a-btn-primary" onclick="confirmAddSection()">Создать</button></div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -157,98 +128,44 @@
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
let currentCaseItems = [];
|
||||
let editingCaseName = null;
|
||||
|
||||
// ─── Modals ──────────────────────────────────────────────────────────────────
|
||||
let currentCaseItems = [], editingCaseName = null;
|
||||
function closeModal(id) { document.getElementById(id).classList.remove('open'); }
|
||||
function openModal(id) { document.getElementById(id).classList.add('open'); }
|
||||
|
||||
// ─── Load page data ──────────────────────────────────────────────────────────
|
||||
let allCasesList = [];
|
||||
document.addEventListener('DOMContentLoaded', async () => {
|
||||
const r = await fetch('/admin/api/cases/list');
|
||||
const d = await r.json();
|
||||
allCasesList = d.cases || [];
|
||||
});
|
||||
document.addEventListener('DOMContentLoaded', async () => { const r = await fetch('/admin/api/cases/list'); const d = await r.json(); allCasesList = d.cases||[]; });
|
||||
|
||||
// ─── Create / Edit Case ──────────────────────────────────────────────────────
|
||||
function openCreateCaseModal() {
|
||||
editingCaseName = null;
|
||||
document.getElementById('caseModalTitle').textContent = '🎲 Создать кейс';
|
||||
document.getElementById('saveCaseBtn').textContent = '💾 Создать';
|
||||
document.getElementById('editCaseName').value = '';
|
||||
document.getElementById('caseNameInput').value = '';
|
||||
document.getElementById('caseDisplayName').value = '';
|
||||
document.getElementById('casePrice').value = '250';
|
||||
document.getElementById('caseImage').value = '';
|
||||
document.getElementById('caseDescription').value = '';
|
||||
currentCaseItems = [];
|
||||
renderCaseItems();
|
||||
openModal('caseModal');
|
||||
editingCaseName = null; document.getElementById('caseModalTitle').textContent = '🎲 Создать кейс'; document.getElementById('saveCaseBtn').textContent = '💾 Создать';
|
||||
document.getElementById('editCaseName').value = ''; document.getElementById('caseNameInput').value = ''; document.getElementById('caseDisplayName').value = '';
|
||||
document.getElementById('casePrice').value = '250'; document.getElementById('caseImage').value = ''; document.getElementById('caseDescription').value = '';
|
||||
currentCaseItems = []; renderCaseItems(); openModal('caseModal');
|
||||
}
|
||||
|
||||
function openEditCaseModal(caseName) {
|
||||
editingCaseName = caseName;
|
||||
document.getElementById('caseModalTitle').textContent = '✏️ Редактировать кейс';
|
||||
document.getElementById('saveCaseBtn').textContent = '💾 Сохранить';
|
||||
editingCaseName = caseName; document.getElementById('caseModalTitle').textContent = '✏️ Редактировать кейс'; document.getElementById('saveCaseBtn').textContent = '💾 Сохранить';
|
||||
document.getElementById('editCaseName').value = caseName;
|
||||
const cfg = {{ cases_config|tojson }};
|
||||
const c = cfg[caseName] || {};
|
||||
document.getElementById('caseNameInput').value = caseName;
|
||||
document.getElementById('caseDisplayName').value = c.display_name || '';
|
||||
document.getElementById('casePrice').value = c.price_open || 250;
|
||||
document.getElementById('caseImage').value = c.image_url || '';
|
||||
document.getElementById('caseDescription').value = c.description || '';
|
||||
currentCaseItems = (c.items || []).filter(i => typeof i === 'object');
|
||||
renderCaseItems();
|
||||
openModal('caseModal');
|
||||
const cfg = {{ cases_config|tojson }}, c = cfg[caseName]||{};
|
||||
document.getElementById('caseNameInput').value = caseName; document.getElementById('caseDisplayName').value = c.display_name||'';
|
||||
document.getElementById('casePrice').value = c.price_open||250; document.getElementById('caseImage').value = c.image_url||''; document.getElementById('caseDescription').value = c.description||'';
|
||||
currentCaseItems = (c.items||[]).filter(i => typeof i === 'object'); renderCaseItems(); openModal('caseModal');
|
||||
}
|
||||
|
||||
function renderCaseItems() {
|
||||
const div = document.getElementById('caseItemsList');
|
||||
div.innerHTML = currentCaseItems.map((item, i) => `
|
||||
<div class="ci-item">
|
||||
<img src="${item.image_url || '/static/placeholder.png'}" onerror="this.src='/static/placeholder.png'">
|
||||
<div class="ci-info">
|
||||
<div>${item.market_hash_name || item.name || '???'}</div>
|
||||
<div class="ci-rarity">${item.rarity || ''} • ${item.weapon || ''}</div>
|
||||
</div>
|
||||
<button class="a-btn a-btn-danger a-btn-sm" onclick="removeCaseItem(${i})">✕</button>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
function renderCaseItems() { document.getElementById('caseItemsList').innerHTML = currentCaseItems.map((item,i) => `<div class="ci-item"><img src="${item.image_url||'/static/placeholder.png'}" onerror="this.src='/static/placeholder.png'"><div class="ci-info"><div>${item.market_hash_name||item.name||'???'}</div><div class="ci-rarity">${item.rarity||''} • ${item.weapon||''}</div></div><button class="a-btn a-btn-danger a-btn-sm" onclick="removeCaseItem(${i})">✕</button></div>`).join(''); }
|
||||
|
||||
function removeCaseItem(idx) {
|
||||
currentCaseItems.splice(idx, 1);
|
||||
renderCaseItems();
|
||||
}
|
||||
|
||||
function addCaseItem(item) {
|
||||
if (currentCaseItems.some(i => (i.market_hash_name || i.name) === (item.market_hash_name || item.name))) return;
|
||||
currentCaseItems.push(item);
|
||||
renderCaseItems();
|
||||
}
|
||||
function removeCaseItem(idx) { currentCaseItems.splice(idx,1); renderCaseItems(); }
|
||||
function addCaseItem(item) { if (currentCaseItems.some(i => (i.market_hash_name||i.name) === (item.market_hash_name||item.name))) return; currentCaseItems.push(item); renderCaseItems(); }
|
||||
|
||||
async function searchCaseItems() {
|
||||
const q = document.getElementById('caseItemSearch').value;
|
||||
if (q.length < 2) return;
|
||||
const r = await fetch(`/admin/api/items/search?q=${encodeURIComponent(q)}`);
|
||||
const items = await r.json();
|
||||
// show as dropdown
|
||||
let html = '<div style="margin-top:0.5rem;max-height:200px;overflow-y:auto">';
|
||||
items.forEach(item => {
|
||||
html += `<div class="ci-item" style="cursor:pointer" onclick="addCaseItem(${JSON.stringify(item).replace(/"/g,'"')})">
|
||||
<img src="${item.image_url || '/static/placeholder.png'}" onerror="this.src='/static/placeholder.png'">
|
||||
<div class="ci-info"><div>${item.name}</div><div class="ci-rarity">${item.rarity} • ${item.price_rub||0} ₽</div></div>
|
||||
</div>`;
|
||||
});
|
||||
items.forEach(item => { html += `<div class="ci-item" style="cursor:pointer" onclick="addCaseItem(${JSON.stringify(item).replace(/"/g,'"')})"><img src="${item.image_url||'/static/placeholder.png'}" onerror="this.src='/static/placeholder.png'"><div class="ci-info"><div>${item.name}</div><div class="ci-rarity">${item.rarity} • ${item.price_rub||0} ₽</div></div></div>`; });
|
||||
html += '</div>';
|
||||
const existing = document.getElementById('caseItemSearchResults');
|
||||
if (!existing) {
|
||||
const d = document.createElement('div'); d.id = 'caseItemSearchResults';
|
||||
document.getElementById('caseItemSearch').parentNode.appendChild(d);
|
||||
}
|
||||
let existing = document.getElementById('caseItemSearchResults');
|
||||
if (!existing) { const d = document.createElement('div'); d.id = 'caseItemSearchResults'; document.getElementById('caseItemSearch').parentNode.appendChild(d); }
|
||||
document.getElementById('caseItemSearchResults').innerHTML = html;
|
||||
}
|
||||
|
||||
@@ -256,106 +173,27 @@ async function saveCase() {
|
||||
const name = document.getElementById('caseNameInput').value.trim();
|
||||
if (!name) { alert('Введите название кейса'); return; }
|
||||
const fd = new FormData();
|
||||
fd.append('case_name', name);
|
||||
fd.append('display_name', document.getElementById('caseDisplayName').value);
|
||||
fd.append('price_open', document.getElementById('casePrice').value);
|
||||
fd.append('image_url', document.getElementById('caseImage').value);
|
||||
fd.append('description', document.getElementById('caseDescription').value);
|
||||
fd.append('items_json', JSON.stringify(currentCaseItems));
|
||||
|
||||
fd.append('case_name', name); fd.append('display_name', document.getElementById('caseDisplayName').value);
|
||||
fd.append('price_open', document.getElementById('casePrice').value); fd.append('image_url', document.getElementById('caseImage').value);
|
||||
fd.append('description', document.getElementById('caseDescription').value); fd.append('items_json', JSON.stringify(currentCaseItems));
|
||||
const isEdit = editingCaseName !== null && editingCaseName !== name;
|
||||
const url = isEdit
|
||||
? `/admin/api/cases/update/${encodeURIComponent(editingCaseName)}`
|
||||
: '/admin/api/cases/create';
|
||||
|
||||
const r = await fetch(url, { method:'POST', body:fd });
|
||||
const r = await fetch(isEdit ? `/admin/api/cases/update/${encodeURIComponent(editingCaseName)}` : '/admin/api/cases/create', { method:'POST', body:fd });
|
||||
const d = await r.json();
|
||||
if (d.success) { window.location.reload(); }
|
||||
else alert(d.error || 'Ошибка');
|
||||
if (d.success) window.location.reload(); else alert(d.error||'Ошибка');
|
||||
}
|
||||
|
||||
async function deleteCase(name) {
|
||||
if (!confirm(`Удалить кейс "${name}"?`)) return;
|
||||
const fd = new FormData(); fd.append('case_name', name);
|
||||
const r = await fetch(`/admin/api/cases/delete/${encodeURIComponent(name)}`, { method:'POST', body:fd });
|
||||
const d = await r.json();
|
||||
if (d.success) window.location.reload();
|
||||
else alert(d.error);
|
||||
}
|
||||
async function deleteCase(name) { if (!confirm(`Удалить кейс "${name}"?`)) return; const fd = new FormData(); fd.append('case_name', name); const r = await fetch(`/admin/api/cases/delete/${encodeURIComponent(name)}`, { method:'POST', body:fd }); const d = await r.json(); if (d.success) window.location.reload(); else alert(d.error); }
|
||||
|
||||
// ─── All Items Browser ───────────────────────────────────────────────────────
|
||||
async function openAllItemsModal() {
|
||||
openModal('allItemsModal');
|
||||
document.getElementById('allItemsSearch').value = '';
|
||||
await searchAllItems();
|
||||
}
|
||||
async function searchAllItems() {
|
||||
const q = document.getElementById('allItemsSearch').value;
|
||||
const r = await fetch(`/admin/api/items/search?q=${encodeURIComponent(q)}&limit=200`);
|
||||
const items = await r.json();
|
||||
document.getElementById('allItemsGrid').innerHTML = items.map(item => `
|
||||
<div class="all-item-card" onclick="addCaseItemFromAll(${JSON.stringify(item).replace(/"/g,'"')})">
|
||||
<img src="${item.image_url || '/static/placeholder.png'}" onerror="this.src='/static/placeholder.png'">
|
||||
<div style="margin-top:0.2rem;line-height:1.15">${item.name}</div>
|
||||
<div style="font-size:0.6rem;color:rgba(255,255,255,0.35)">${item.rarity}</div>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
function addCaseItemFromAll(item) {
|
||||
addCaseItem(item);
|
||||
closeModal('allItemsModal');
|
||||
}
|
||||
async function openAllItemsModal() { openModal('allItemsModal'); document.getElementById('allItemsSearch').value = ''; await searchAllItems(); }
|
||||
async function searchAllItems() { const q = document.getElementById('allItemsSearch').value; const r = await fetch(`/admin/api/items/search?q=${encodeURIComponent(q)}&limit=200`); const items = await r.json(); document.getElementById('allItemsGrid').innerHTML = items.map(item => `<div class="all-item-card" onclick="addCaseItemFromAll(${JSON.stringify(item).replace(/"/g,'"')})"><img src="${item.image_url||'/static/placeholder.png'}" onerror="this.src='/static/placeholder.png'"><div style="margin-top:0.2rem;line-height:1.15">${item.name}</div><div style="font-size:0.6rem;color:rgba(255,255,255,0.35)">${item.rarity}</div></div>`).join(''); }
|
||||
function addCaseItemFromAll(item) { addCaseItem(item); closeModal('allItemsModal'); }
|
||||
|
||||
// ─── Mainpage Sections ───────────────────────────────────────────────────────
|
||||
function openAddSectionModal() {
|
||||
document.getElementById('newSectionName').value = '';
|
||||
openModal('addSectionModal');
|
||||
}
|
||||
async function confirmAddSection() {
|
||||
const name = document.getElementById('newSectionName').value.trim();
|
||||
if (!name) return;
|
||||
const fd = new FormData(); fd.append('tab', name);
|
||||
const r = await fetch('/admin/api/mainpage/section/add', { method:'POST', body:fd });
|
||||
const d = await r.json();
|
||||
if (d.success) window.location.reload();
|
||||
else alert(d.error);
|
||||
}
|
||||
async function deleteSection(tab) {
|
||||
if (!confirm(`Удалить секцию "${tab}"?`)) return;
|
||||
const fd = new FormData(); fd.append('tab', tab);
|
||||
const r = await fetch('/admin/api/mainpage/section/delete', { method:'POST', body:fd });
|
||||
const d = await r.json();
|
||||
if (d.success) window.location.reload();
|
||||
else alert(d.error);
|
||||
}
|
||||
function openAddSectionModal() { document.getElementById('newSectionName').value = ''; openModal('addSectionModal'); }
|
||||
async function confirmAddSection() { const name = document.getElementById('newSectionName').value.trim(); if (!name) return; const fd = new FormData(); fd.append('tab', name); const r = await fetch('/admin/api/mainpage/section/add', { method:'POST', body:fd }); const d = await r.json(); if (d.success) window.location.reload(); else alert(d.error); }
|
||||
async function deleteSection(tab) { if (!confirm(`Удалить секцию "${tab}"?`)) return; const fd = new FormData(); fd.append('tab', tab); const r = await fetch('/admin/api/mainpage/section/delete', { method:'POST', body:fd }); const d = await r.json(); if (d.success) window.location.reload(); else alert(d.error); }
|
||||
|
||||
function openAddCaseModal(tab) {
|
||||
document.getElementById('addCaseSectionName').textContent = tab;
|
||||
const sel = document.getElementById('addCaseSelect');
|
||||
sel.innerHTML = allCasesList.map(c => `<option value="${c}">${c}</option>`).join('');
|
||||
sel.dataset.tab = tab;
|
||||
openModal('addCaseModal');
|
||||
}
|
||||
async function confirmAddCase() {
|
||||
const tab = document.getElementById('addCaseSelect').dataset.tab;
|
||||
const caseName = document.getElementById('addCaseSelect').value;
|
||||
const fd = new FormData();
|
||||
fd.append('tab', tab);
|
||||
fd.append('case_name', caseName);
|
||||
const r = await fetch('/admin/api/mainpage/section/add-case', { method:'POST', body:fd });
|
||||
const d = await r.json();
|
||||
if (d.success) window.location.reload();
|
||||
else alert(d.error);
|
||||
}
|
||||
async function removeCaseFromSection(tab, caseName) {
|
||||
if (!confirm(`Убрать "${caseName}" из "${tab}"?`)) return;
|
||||
const fd = new FormData();
|
||||
fd.append('tab', tab);
|
||||
fd.append('case_name', caseName);
|
||||
const r = await fetch('/admin/api/mainpage/section/remove-case', { method:'POST', body:fd });
|
||||
const d = await r.json();
|
||||
if (d.success) window.location.reload();
|
||||
else alert(d.error);
|
||||
}
|
||||
function openAddCaseModal(tab) { document.getElementById('addCaseSectionName').textContent = tab; const sel = document.getElementById('addCaseSelect'); sel.innerHTML = allCasesList.map(c => `<option value="${c}">${c}</option>`).join(''); sel.dataset.tab = tab; openModal('addCaseModal'); }
|
||||
async function confirmAddCase() { const tab = document.getElementById('addCaseSelect').dataset.tab, caseName = document.getElementById('addCaseSelect').value; const fd = new FormData(); fd.append('tab', tab); fd.append('case_name', caseName); const r = await fetch('/admin/api/mainpage/section/add-case', { method:'POST', body:fd }); const d = await r.json(); if (d.success) window.location.reload(); else alert(d.error); }
|
||||
async function removeCaseFromSection(tab, caseName) { if (!confirm(`Убрать "${caseName}" из "${tab}"?`)) return; const fd = new FormData(); fd.append('tab', tab); fd.append('case_name', caseName); const r = await fetch('/admin/api/mainpage/section/remove-case', { method:'POST', body:fd }); const d = await r.json(); if (d.success) window.location.reload(); else alert(d.error); }
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user