обновил дизайн, добавил дашборд

This commit is contained in:
Zuev
2026-05-31 16:18:27 +03:00
parent e2a3553a09
commit 7926038bdc
36 changed files with 2364 additions and 1184 deletions

View File

@@ -26,11 +26,27 @@ const ROUTES = {
await module.initTimeSlotsSettings();
}
},
database: {
title: 'База данных',
file: 'views/database.html',
init: async () => {
const module = await import('./views/database.js');
await module.initDatabase();
}
},
'edu-forms': {
title: 'Формы обучения',
file: 'views/edu-forms.html',
init: async () => {
const module = await import('./views/edu-forms.js');
await module.initEduForms();
}
},
};
const ROLE_TABS = {
ADMIN: ['general', 'time-slots'],
EDUCATION_OFFICE: ['time-slots']
ADMIN: ['general', 'time-slots', 'database', 'edu-forms'],
EDUCATION_OFFICE: ['time-slots', 'edu-forms']
};
const allowedTabs = new Set(ROLE_TABS[role] || []);
const defaultTab = role === 'EDUCATION_OFFICE' ? 'time-slots' : 'general';

View File

@@ -0,0 +1,157 @@
import { api } from '../../../js/api.js';
import { escapeHtml, showAlert, hideAlert } from '../../../js/utils.js';
export async function initDatabase() {
const tenantsTbody = document.getElementById('tenants-tbody');
const addTenantForm = document.getElementById('add-tenant-form');
const statusInfo = document.getElementById('db-status-info');
const btnTest = document.getElementById('btn-test-connection');
// === Загрузка статуса текущего подключения ===
async function loadStatus() {
try {
const data = await api.get('/api/database/status');
const statusBadge = data.connected
? '<span class="badge badge-available">Online</span>'
: '<span class="badge badge-unavailable">Offline</span>';
statusInfo.innerHTML = `
<div style="display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;">
<div>
<span style="color: var(--text-secondary); font-size: 0.85rem;">Тенант:</span>
<strong>${escapeHtml(data.tenant || '—')}</strong>
</div>
<div>
<span style="color: var(--text-secondary); font-size: 0.85rem;">Название:</span>
<strong>${escapeHtml(data.name || '—')}</strong>
</div>
<div>
<span style="color: var(--text-secondary); font-size: 0.85rem;">Статус:</span>
${statusBadge}
</div>
${data.url ? `<div>
<span style="color: var(--text-secondary); font-size: 0.85rem;">URL:</span>
<code style="font-size: 0.85rem;">${escapeHtml(data.url)}</code>
</div>` : ''}
</div>
`;
} catch (e) {
statusInfo.innerHTML = `<div class="form-alert error" style="display:block">Ошибка загрузки статуса: ${e.message}</div>`;
}
}
// === Загрузка списка тенантов ===
async function loadTenants() {
try {
const tenants = await api.get('/api/database/tenants');
renderTenantsTable(tenants);
} catch (e) {
tenantsTbody.innerHTML = `<tr><td colspan="6" class="loading-row">Ошибка загрузки: ${e.message}</td></tr>`;
}
}
function renderTenantsTable(tenants) {
if (!tenants || !tenants.length) {
tenantsTbody.innerHTML = '<tr><td colspan="6" class="loading-row">Нет подключённых тенантов</td></tr>';
return;
}
tenantsTbody.innerHTML = tenants.map(t => {
const statusBadge = t.connected
? '<span class="badge badge-available">Online</span>'
: '<span class="badge badge-unavailable">Offline</span>';
return `
<tr>
<td>${escapeHtml(t.name || '—')}</td>
<td><code>${escapeHtml(t.domain)}</code></td>
<td><code style="font-size: 0.82rem;">${escapeHtml(t.url)}</code></td>
<td>${escapeHtml(t.username || '—')}</td>
<td>${statusBadge}</td>
<td><button class="btn-delete" data-domain="${escapeHtml(t.domain)}">Удалить</button></td>
</tr>`;
}).join('');
}
// === Тест подключения ===
btnTest.addEventListener('click', async () => {
hideAlert('add-tenant-alert');
const url = document.getElementById('tenant-url').value.trim();
const username = document.getElementById('tenant-username').value.trim();
const password = document.getElementById('tenant-password').value;
if (!url) {
showAlert('add-tenant-alert', 'Введите JDBC URL', 'error');
return;
}
btnTest.textContent = '...';
btnTest.disabled = true;
try {
const result = await api.post('/api/database/test', { url, username, password });
if (result.success) {
showAlert('add-tenant-alert', '✓ Подключение успешно!', 'success');
} else {
showAlert('add-tenant-alert', `${result.message}`, 'error');
}
} catch (e) {
showAlert('add-tenant-alert', `Ошибка: ${e.message}`, 'error');
} finally {
btnTest.textContent = 'Тест';
btnTest.disabled = false;
}
});
// === Добавление тенанта ===
addTenantForm.addEventListener('submit', async (e) => {
e.preventDefault();
hideAlert('add-tenant-alert');
const name = document.getElementById('tenant-name').value.trim();
const domain = document.getElementById('tenant-domain').value.trim().toLowerCase();
const url = document.getElementById('tenant-url').value.trim();
const username = document.getElementById('tenant-username').value.trim();
const password = document.getElementById('tenant-password').value;
if (!name || !domain || !url) {
showAlert('add-tenant-alert', 'Заполните все обязательные поля', 'error');
return;
}
try {
const result = await api.post('/api/database/tenants', { name, domain, url, username, password });
if (result.success) {
showAlert('add-tenant-alert', `Тенант "${escapeHtml(domain)}" добавлен!`, 'success');
addTenantForm.reset();
loadTenants();
loadStatus();
} else {
showAlert('add-tenant-alert', result.message, 'error');
}
} catch (e) {
showAlert('add-tenant-alert', `Ошибка: ${e.message}`, 'error');
}
});
// === Удаление тенанта ===
tenantsTbody.addEventListener('click', async (e) => {
const btn = e.target.closest('.btn-delete');
if (!btn) return;
const domain = btn.dataset.domain;
if (!confirm(`Удалить тенант "${domain}"? Пул соединений будет закрыт.`)) return;
try {
await api.delete(`/api/database/tenants/${domain}`);
loadTenants();
loadStatus();
} catch (e) {
alert(`Ошибка: ${e.message}`);
}
});
// === Init ===
loadStatus();
loadTenants();
}

View File

@@ -0,0 +1,71 @@
import { api } from '../../../js/api.js';
import { escapeHtml, showAlert, hideAlert } from '../../../js/utils.js';
export let allEducationForms = [];
export async function fetchEducationForms() {
try {
allEducationForms = await api.get('/api/education-forms');
return allEducationForms;
} catch (e) {
console.error("Failed to fetch education forms", e);
return [];
}
}
export async function initEduForms() {
const efTbody = document.getElementById('ef-tbody');
const createEfForm = document.getElementById('create-ef-form');
async function loadEF() {
try {
const forms = await fetchEducationForms();
renderEfTable(forms);
} catch (e) {
efTbody.innerHTML = '<tr><td colspan="3" class="loading-row">Ошибка загрузки</td></tr>';
}
}
function renderEfTable(forms) {
if (!forms || !forms.length) {
efTbody.innerHTML = '<tr><td colspan="3" class="loading-row">Нет форм обучения</td></tr>';
return;
}
efTbody.innerHTML = forms.map(ef => `
<tr>
<td>${ef.id}</td>
<td>${escapeHtml(ef.name)}</td>
<td><button class="btn-delete" data-id="${ef.id}">Удалить</button></td>
</tr>`).join('');
}
createEfForm.addEventListener('submit', async (e) => {
e.preventDefault();
hideAlert('create-ef-alert');
const name = document.getElementById('new-ef-name').value.trim();
if (!name) { showAlert('create-ef-alert', 'Введите название', 'error'); return; }
try {
const data = await api.post('/api/education-forms', { name });
showAlert('create-ef-alert', `Форма "${escapeHtml(data.name)}" создана`, 'success');
createEfForm.reset();
loadEF();
} catch (e) {
showAlert('create-ef-alert', e.message || 'Ошибка создания', 'error');
}
});
efTbody.addEventListener('click', async (e) => {
const btn = e.target.closest('.btn-delete');
if (!btn) return;
if (!confirm('Удалить форму обучения?')) return;
try {
await api.delete('/api/education-forms/' + btn.dataset.id);
loadEF();
} catch (e) {
alert(e.message || 'Ошибка удаления');
}
});
loadEF();
}