Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
9d06c69e2b | ||
|
|
684273de50 | ||
|
|
772b110762 |
7
.gitignore
vendored
7
.gitignore
vendored
@@ -3,14 +3,7 @@ db/data/
|
||||
|
||||
# Игнорируем секреты
|
||||
.env
|
||||
!GEMINI.md
|
||||
!AGENTS.md
|
||||
|
||||
# Игнорируем системные папки IDE (если редактируете с ПК)
|
||||
.idea/
|
||||
.vscode/
|
||||
*.DS_Store
|
||||
.agent/
|
||||
# Игнорируем временные файлы сборки (на будущее)
|
||||
backend/target/
|
||||
backend/build/
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,911 +0,0 @@
|
||||
(() => {
|
||||
'use strict';
|
||||
|
||||
const token = localStorage.getItem('token');
|
||||
const role = localStorage.getItem('role');
|
||||
|
||||
if (!token || role !== 'ADMIN') {
|
||||
window.location.href = '/';
|
||||
return;
|
||||
}
|
||||
|
||||
// ---- DOM refs ----
|
||||
const pageTitle = document.getElementById('page-title');
|
||||
const btnLogout = document.getElementById('btn-logout');
|
||||
const menuToggle = document.getElementById('menu-toggle');
|
||||
const sidebar = document.querySelector('.sidebar');
|
||||
const sidebarOverlay = document.getElementById('sidebar-overlay');
|
||||
|
||||
// Global Ripple Effect
|
||||
document.addEventListener('click', function (e) {
|
||||
const btn = e.target.closest('.btn-create, .btn-delete, .btn-logout');
|
||||
if (!btn) return;
|
||||
|
||||
const rect = btn.getBoundingClientRect();
|
||||
const x = e.clientX - rect.left;
|
||||
const y = e.clientY - rect.top;
|
||||
|
||||
const ripple = document.createElement('span');
|
||||
ripple.classList.add('ripple');
|
||||
ripple.style.left = `${x}px`;
|
||||
ripple.style.top = `${y}px`;
|
||||
|
||||
if (getComputedStyle(btn).position === 'static') {
|
||||
btn.style.position = 'relative';
|
||||
}
|
||||
btn.style.overflow = 'hidden';
|
||||
|
||||
btn.appendChild(ripple);
|
||||
|
||||
setTimeout(() => ripple.remove(), 600);
|
||||
});
|
||||
|
||||
// Users
|
||||
const usersTbody = document.getElementById('users-tbody');
|
||||
const createForm = document.getElementById('create-form');
|
||||
const createAlert = document.getElementById('create-alert');
|
||||
|
||||
// Groups
|
||||
const groupsTbody = document.getElementById('groups-tbody');
|
||||
const createGroupForm = document.getElementById('create-group-form');
|
||||
const createGroupAlert = document.getElementById('create-group-alert');
|
||||
const newGroupEfSelect = document.getElementById('new-group-ef');
|
||||
const filterEfSelect = document.getElementById('filter-ef');
|
||||
|
||||
// Education Forms
|
||||
const efTbody = document.getElementById('ef-tbody');
|
||||
const createEfForm = document.getElementById('create-ef-form');
|
||||
const createEfAlert = document.getElementById('create-ef-alert');
|
||||
|
||||
// Classrooms
|
||||
const classroomsTbody = document.getElementById('classrooms-tbody');
|
||||
const createClassroomForm = document.getElementById('create-classroom-form');
|
||||
const createClassroomAlert = document.getElementById('create-classroom-alert');
|
||||
const modalEditClassroom = document.getElementById('modal-edit-classroom');
|
||||
const modalEditClassroomClose = document.getElementById('modal-edit-classroom-close');
|
||||
const editClassroomForm = document.getElementById('edit-classroom-form');
|
||||
const editClassroomAlert = document.getElementById('edit-classroom-alert');
|
||||
const editEquipmentCheckboxes = document.getElementById('edit-equipment-checkboxes');
|
||||
|
||||
// Equipments
|
||||
const equipmentsTbody = document.getElementById('equipments-tbody');
|
||||
const createEquipmentForm = document.getElementById('create-equipment-form');
|
||||
const createEquipmentAlert = document.getElementById('create-equipment-alert');
|
||||
const equipmentCheckboxes = document.getElementById('equipment-checkboxes');
|
||||
|
||||
// Subjects
|
||||
const subjectsTbody = document.getElementById('subjects-tbody');
|
||||
const createSubjectForm = document.getElementById('create-subject-form');
|
||||
const createSubjectAlert = document.getElementById('create-subject-alert');
|
||||
const assignTeacherForm = document.getElementById('assign-teacher-form');
|
||||
const assignTeacherAlert = document.getElementById('assign-teacher-alert');
|
||||
const assignTeacherSelect = document.getElementById('assign-teacher-select');
|
||||
const assignSubjectSelect = document.getElementById('assign-subject-select');
|
||||
const teacherSubjectsTbody = document.getElementById('teacher-subjects-tbody');
|
||||
|
||||
// --- Multi-select logic ---
|
||||
function updateSelectText(containerId, textId) {
|
||||
const container = document.getElementById(containerId);
|
||||
const textEl = document.getElementById(textId);
|
||||
if (!container || !textEl) return;
|
||||
const checked = Array.from(container.querySelectorAll('input:checked'));
|
||||
if (checked.length === 0) {
|
||||
textEl.textContent = 'Выберите оборудование...';
|
||||
} else if (checked.length === 1) {
|
||||
textEl.textContent = checked[0].parentElement.textContent.trim();
|
||||
} else {
|
||||
textEl.textContent = `Выбрано: ${checked.length}`;
|
||||
}
|
||||
}
|
||||
|
||||
function initMultiSelect(boxId, menuId, textId, checkboxContainerId) {
|
||||
const box = document.getElementById(boxId);
|
||||
const menu = document.getElementById(menuId);
|
||||
const container = document.getElementById(checkboxContainerId);
|
||||
if (!box || !menu || !container) return;
|
||||
|
||||
box.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
const isOpen = menu.classList.contains('open');
|
||||
document.querySelectorAll('.dropdown-menu').forEach(m => m.classList.remove('open'));
|
||||
document.querySelectorAll('.select-box').forEach(b => b.classList.remove('active'));
|
||||
if (!isOpen) {
|
||||
menu.classList.add('open');
|
||||
box.classList.add('active');
|
||||
}
|
||||
});
|
||||
|
||||
menu.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
container.addEventListener('change', () => {
|
||||
updateSelectText(checkboxContainerId, textId);
|
||||
});
|
||||
}
|
||||
|
||||
initMultiSelect('equipment-select-box', 'equipment-dropdown-menu', 'equipment-select-text', 'equipment-checkboxes');
|
||||
initMultiSelect('edit-equipment-select-box', 'edit-equipment-dropdown-menu', 'edit-equipment-select-text', 'edit-equipment-checkboxes');
|
||||
|
||||
document.addEventListener('click', () => {
|
||||
document.querySelectorAll('.dropdown-menu').forEach(m => m.classList.remove('open'));
|
||||
document.querySelectorAll('.select-box').forEach(b => b.classList.remove('active'));
|
||||
});
|
||||
// --------------------------
|
||||
|
||||
const navItems = document.querySelectorAll('.nav-item[data-tab]');
|
||||
const tabContents = document.querySelectorAll('.tab-content');
|
||||
|
||||
// ---- State ----
|
||||
let allGroups = [];
|
||||
let allEducationForms = [];
|
||||
let allEquipments = [];
|
||||
let allSubjects = [];
|
||||
let allTeachers = [];
|
||||
|
||||
// ---- Tab Switching ----
|
||||
const TAB_TITLES = {
|
||||
users: 'Управление пользователями',
|
||||
groups: 'Управление группами',
|
||||
'edu-forms': 'Формы обучения',
|
||||
equipments: 'Оборудование',
|
||||
classrooms: 'Аудитории',
|
||||
subjects: 'Дисциплины и преподаватели'
|
||||
};
|
||||
|
||||
navItems.forEach(item => {
|
||||
item.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
switchTab(item.dataset.tab);
|
||||
});
|
||||
});
|
||||
|
||||
function switchTab(tab) {
|
||||
navItems.forEach(n => n.classList.remove('active'));
|
||||
document.querySelector(`.nav-item[data-tab="${tab}"]`)?.classList.add('active');
|
||||
|
||||
tabContents.forEach(tc => tc.style.display = 'none');
|
||||
const target = document.getElementById('tab-' + tab);
|
||||
if (target) target.style.display = '';
|
||||
|
||||
pageTitle.textContent = TAB_TITLES[tab] || '';
|
||||
|
||||
if (tab === 'users') loadUsers();
|
||||
if (tab === 'groups') { loadEducationForms().then(() => loadGroups()); }
|
||||
if (tab === 'edu-forms') loadEducationForms();
|
||||
if (tab === 'equipments') loadEquipments();
|
||||
if (tab === 'classrooms') { loadEquipments().then(() => loadClassrooms()); }
|
||||
if (tab === 'subjects') { Promise.all([loadSubjects(), loadTeachers()]).then(() => loadTeacherSubjects()); }
|
||||
|
||||
sidebar.classList.remove('open');
|
||||
sidebarOverlay.classList.remove('open');
|
||||
}
|
||||
|
||||
// ---- Mobile Menu ----
|
||||
menuToggle.addEventListener('click', () => {
|
||||
sidebar.classList.toggle('open');
|
||||
sidebarOverlay.classList.toggle('open');
|
||||
});
|
||||
sidebarOverlay.addEventListener('click', () => {
|
||||
sidebar.classList.remove('open');
|
||||
sidebarOverlay.classList.remove('open');
|
||||
});
|
||||
|
||||
// ---- Helpers ----
|
||||
const ROLE_LABELS = { ADMIN: 'Администратор', TEACHER: 'Преподаватель', STUDENT: 'Студент' };
|
||||
const ROLE_BADGE = { ADMIN: 'badge-admin', TEACHER: 'badge-teacher', STUDENT: 'badge-student' };
|
||||
|
||||
function escapeHtml(str) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = str;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
function showAlert(el, msg, type) {
|
||||
el.className = 'form-alert ' + type;
|
||||
el.textContent = msg;
|
||||
}
|
||||
|
||||
function hideAlert(el) {
|
||||
el.className = 'form-alert';
|
||||
el.textContent = '';
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// USERS
|
||||
// ============================================================
|
||||
|
||||
async function loadUsers() {
|
||||
try {
|
||||
const res = await fetch('/api/users', {
|
||||
headers: { 'Authorization': 'Bearer ' + token },
|
||||
});
|
||||
const users = await res.json();
|
||||
renderUsers(users);
|
||||
} catch (e) {
|
||||
usersTbody.innerHTML = '<tr><td colspan="4" class="loading-row">Ошибка загрузки</td></tr>';
|
||||
}
|
||||
}
|
||||
|
||||
function renderUsers(users) {
|
||||
if (!users.length) {
|
||||
usersTbody.innerHTML = '<tr><td colspan="4" class="loading-row">Нет пользователей</td></tr>';
|
||||
return;
|
||||
}
|
||||
usersTbody.innerHTML = users.map(u => `
|
||||
<tr>
|
||||
<td>${u.id}</td>
|
||||
<td>${escapeHtml(u.username)}</td>
|
||||
<td><span class="badge ${ROLE_BADGE[u.role] || ''}">${ROLE_LABELS[u.role] || u.role}</span></td>
|
||||
<td><button class="btn-delete" data-id="${u.id}">Удалить</button></td>
|
||||
<td><button class="btn-delete" data-role="${u.role}">Добавить занятие</button></td>
|
||||
</tr>`).join('');
|
||||
}
|
||||
|
||||
createForm.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
hideAlert(createAlert);
|
||||
const username = document.getElementById('new-username').value.trim();
|
||||
const password = document.getElementById('new-password').value;
|
||||
const role = document.getElementById('new-role').value;
|
||||
if (!username || !password) { showAlert(createAlert, 'Заполните все поля', 'error'); return; }
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/users', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token },
|
||||
body: JSON.stringify({ username, password, role }),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (res.ok) {
|
||||
showAlert(createAlert, `Пользователь "${data.username}" создан`, 'success');
|
||||
createForm.reset();
|
||||
loadUsers();
|
||||
} else {
|
||||
showAlert(createAlert, data.message || 'Ошибка создания', 'error');
|
||||
}
|
||||
} catch (e) { showAlert(createAlert, 'Ошибка соединения', 'error'); }
|
||||
});
|
||||
|
||||
usersTbody.addEventListener('click', async (e) => {
|
||||
const btn = e.target.closest('.btn-delete');
|
||||
if (!btn) return;
|
||||
if (!confirm('Удалить пользователя?')) return;
|
||||
try {
|
||||
const res = await fetch('/api/users/' + btn.dataset.id, {
|
||||
method: 'DELETE',
|
||||
headers: { 'Authorization': 'Bearer ' + token },
|
||||
});
|
||||
if (res.ok) loadUsers();
|
||||
else alert('Ошибка удаления');
|
||||
} catch (e) { alert('Ошибка соединения'); }
|
||||
});
|
||||
|
||||
// ============================================================
|
||||
// EDUCATION FORMS
|
||||
// ============================================================
|
||||
|
||||
async function loadEducationForms() {
|
||||
try {
|
||||
const res = await fetch('/api/education-forms', {
|
||||
headers: { 'Authorization': 'Bearer ' + token },
|
||||
});
|
||||
allEducationForms = await res.json();
|
||||
renderEfTable(allEducationForms);
|
||||
populateEfSelects(allEducationForms);
|
||||
} catch (e) {
|
||||
efTbody.innerHTML = '<tr><td colspan="3" class="loading-row">Ошибка загрузки</td></tr>';
|
||||
}
|
||||
}
|
||||
|
||||
function renderEfTable(forms) {
|
||||
if (!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('');
|
||||
}
|
||||
|
||||
function populateEfSelects(forms) {
|
||||
// Group creation select
|
||||
const currentVal = newGroupEfSelect.value;
|
||||
newGroupEfSelect.innerHTML = forms.map(ef =>
|
||||
`<option value="${ef.id}">${escapeHtml(ef.name)}</option>`
|
||||
).join('');
|
||||
if (currentVal && forms.find(f => f.id == currentVal)) {
|
||||
newGroupEfSelect.value = currentVal;
|
||||
}
|
||||
|
||||
// Filter select
|
||||
const currentFilter = filterEfSelect.value;
|
||||
filterEfSelect.innerHTML = '<option value="">Все формы</option>' +
|
||||
forms.map(ef =>
|
||||
`<option value="${ef.id}">${escapeHtml(ef.name)}</option>`
|
||||
).join('');
|
||||
if (currentFilter) filterEfSelect.value = currentFilter;
|
||||
}
|
||||
|
||||
createEfForm.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
hideAlert(createEfAlert);
|
||||
const name = document.getElementById('new-ef-name').value.trim();
|
||||
if (!name) { showAlert(createEfAlert, 'Введите название', 'error'); return; }
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/education-forms', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token },
|
||||
body: JSON.stringify({ name }),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (res.ok) {
|
||||
showAlert(createEfAlert, `Форма "${data.name}" создана`, 'success');
|
||||
createEfForm.reset();
|
||||
loadEducationForms();
|
||||
} else {
|
||||
showAlert(createEfAlert, data.message || 'Ошибка создания', 'error');
|
||||
}
|
||||
} catch (e) { showAlert(createEfAlert, 'Ошибка соединения', 'error'); }
|
||||
});
|
||||
|
||||
efTbody.addEventListener('click', async (e) => {
|
||||
const btn = e.target.closest('.btn-delete');
|
||||
if (!btn) return;
|
||||
if (!confirm('Удалить форму обучения?')) return;
|
||||
try {
|
||||
const res = await fetch('/api/education-forms/' + btn.dataset.id, {
|
||||
method: 'DELETE',
|
||||
headers: { 'Authorization': 'Bearer ' + token },
|
||||
});
|
||||
if (res.ok) {
|
||||
loadEducationForms();
|
||||
} else {
|
||||
const data = await res.json();
|
||||
alert(data.message || 'Ошибка удаления');
|
||||
}
|
||||
} catch (e) { alert('Ошибка соединения'); }
|
||||
});
|
||||
|
||||
// ============================================================
|
||||
// GROUPS
|
||||
// ============================================================
|
||||
|
||||
async function loadGroups() {
|
||||
try {
|
||||
const res = await fetch('/api/groups', {
|
||||
headers: { 'Authorization': 'Bearer ' + token },
|
||||
});
|
||||
allGroups = await res.json();
|
||||
applyGroupFilter();
|
||||
} catch (e) {
|
||||
groupsTbody.innerHTML = '<tr><td colspan="4" class="loading-row">Ошибка загрузки</td></tr>';
|
||||
}
|
||||
}
|
||||
|
||||
function applyGroupFilter() {
|
||||
const filterId = filterEfSelect.value;
|
||||
const filtered = filterId
|
||||
? allGroups.filter(g => g.educationFormId == filterId)
|
||||
: allGroups;
|
||||
renderGroups(filtered);
|
||||
}
|
||||
|
||||
filterEfSelect.addEventListener('change', applyGroupFilter);
|
||||
|
||||
function renderGroups(groups) {
|
||||
if (!groups.length) {
|
||||
groupsTbody.innerHTML = '<tr><td colspan="4" class="loading-row">Нет групп</td></tr>';
|
||||
return;
|
||||
}
|
||||
groupsTbody.innerHTML = groups.map(g => `
|
||||
<tr>
|
||||
<td>${g.id}</td>
|
||||
<td>${escapeHtml(g.name)}</td>
|
||||
<td><span class="badge badge-ef">${escapeHtml(g.educationFormName)}</span></td>
|
||||
<td><button class="btn-delete" data-id="${g.id}">Удалить</button></td>
|
||||
</tr>`).join('');
|
||||
}
|
||||
|
||||
createGroupForm.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
hideAlert(createGroupAlert);
|
||||
const name = document.getElementById('new-group-name').value.trim();
|
||||
const educationFormId = newGroupEfSelect.value;
|
||||
if (!name) { showAlert(createGroupAlert, 'Введите название группы', 'error'); return; }
|
||||
if (!educationFormId) { showAlert(createGroupAlert, 'Выберите форму обучения', 'error'); return; }
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/groups', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token },
|
||||
body: JSON.stringify({ name, educationFormId: Number(educationFormId) }),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (res.ok) {
|
||||
showAlert(createGroupAlert, `Группа "${data.name}" создана`, 'success');
|
||||
createGroupForm.reset();
|
||||
loadGroups();
|
||||
} else {
|
||||
showAlert(createGroupAlert, data.message || 'Ошибка создания', 'error');
|
||||
}
|
||||
} catch (e) { showAlert(createGroupAlert, 'Ошибка соединения', 'error'); }
|
||||
});
|
||||
|
||||
groupsTbody.addEventListener('click', async (e) => {
|
||||
const btn = e.target.closest('.btn-delete');
|
||||
if (!btn) return;
|
||||
if (!confirm('Удалить группу?')) return;
|
||||
try {
|
||||
const res = await fetch('/api/groups/' + btn.dataset.id, {
|
||||
method: 'DELETE',
|
||||
headers: { 'Authorization': 'Bearer ' + token },
|
||||
});
|
||||
if (res.ok) loadGroups();
|
||||
else alert('Ошибка удаления');
|
||||
} catch (e) { alert('Ошибка соединения'); }
|
||||
});
|
||||
|
||||
// ============================================================
|
||||
// EQUIPMENTS
|
||||
// ============================================================
|
||||
|
||||
async function loadEquipments() {
|
||||
try {
|
||||
const res = await fetch('/api/equipments', {
|
||||
headers: { 'Authorization': 'Bearer ' + token },
|
||||
});
|
||||
allEquipments = await res.json();
|
||||
renderEquipments(allEquipments);
|
||||
renderEquipmentCheckboxes(allEquipments);
|
||||
} catch (e) {
|
||||
if (equipmentsTbody) equipmentsTbody.innerHTML = '<tr><td colspan="3" class="loading-row">Ошибка загрузки</td></tr>';
|
||||
if (equipmentCheckboxes) equipmentCheckboxes.innerHTML = '<p class="text-error">Ошибка загрузки</p>';
|
||||
}
|
||||
}
|
||||
|
||||
function renderEquipments(equipments) {
|
||||
if (!equipments.length) {
|
||||
equipmentsTbody.innerHTML = '<tr><td colspan="3" class="loading-row">Нет оборудования</td></tr>';
|
||||
return;
|
||||
}
|
||||
equipmentsTbody.innerHTML = equipments.map(eq => `
|
||||
<tr>
|
||||
<td>${eq.id}</td>
|
||||
<td>${escapeHtml(eq.name)}</td>
|
||||
<td><button class="btn-delete" data-id="${eq.id}">Удалить</button></td>
|
||||
</tr>`).join('');
|
||||
}
|
||||
|
||||
function renderEquipmentCheckboxes(equipments) {
|
||||
if (!equipments.length) {
|
||||
equipmentCheckboxes.innerHTML = '<p class="text-muted"><small>Нет доступного оборудования</small></p>';
|
||||
return;
|
||||
}
|
||||
equipmentCheckboxes.innerHTML = equipments.map(eq => `
|
||||
<label class="checkbox-item">
|
||||
<input type="checkbox" value="${eq.id}"> ${escapeHtml(eq.name)}
|
||||
</label>
|
||||
`).join('');
|
||||
updateSelectText('equipment-checkboxes', 'equipment-select-text');
|
||||
}
|
||||
|
||||
createEquipmentForm.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
hideAlert(createEquipmentAlert);
|
||||
const name = document.getElementById('new-equipment-name').value.trim();
|
||||
if (!name) { showAlert(createEquipmentAlert, 'Введите название', 'error'); return; }
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/equipments', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token },
|
||||
body: JSON.stringify({ name }),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (res.ok) {
|
||||
showAlert(createEquipmentAlert, `Оборудование "${data.name}" добавлено`, 'success');
|
||||
createEquipmentForm.reset();
|
||||
loadEquipments();
|
||||
} else {
|
||||
showAlert(createEquipmentAlert, data.message || 'Ошибка создания', 'error');
|
||||
}
|
||||
} catch (e) { showAlert(createEquipmentAlert, 'Ошибка соединения', 'error'); }
|
||||
});
|
||||
|
||||
equipmentsTbody.addEventListener('click', async (e) => {
|
||||
const btn = e.target.closest('.btn-delete');
|
||||
if (!btn) return;
|
||||
if (!confirm('Удалить оборудование?')) return;
|
||||
try {
|
||||
const res = await fetch('/api/equipments/' + btn.dataset.id, {
|
||||
method: 'DELETE',
|
||||
headers: { 'Authorization': 'Bearer ' + token },
|
||||
});
|
||||
if (res.ok) {
|
||||
loadEquipments();
|
||||
} else {
|
||||
const data = await res.json();
|
||||
alert(data.message || 'Ошибка удаления');
|
||||
}
|
||||
} catch (e) { alert('Ошибка соединения'); }
|
||||
});
|
||||
|
||||
// ============================================================
|
||||
// CLASSROOMS
|
||||
// ============================================================
|
||||
|
||||
async function loadClassrooms() {
|
||||
try {
|
||||
const res = await fetch('/api/classrooms', {
|
||||
headers: { 'Authorization': 'Bearer ' + token },
|
||||
});
|
||||
const classrooms = await res.json();
|
||||
renderClassrooms(classrooms);
|
||||
} catch (e) {
|
||||
classroomsTbody.innerHTML = '<tr><td colspan="6" class="loading-row">Ошибка загрузки</td></tr>';
|
||||
}
|
||||
}
|
||||
|
||||
function renderClassrooms(classrooms) {
|
||||
if (!classrooms.length) {
|
||||
classroomsTbody.innerHTML = '<tr><td colspan="6" class="loading-row">Нет аудиторий</td></tr>';
|
||||
return;
|
||||
}
|
||||
classroomsTbody.innerHTML = classrooms.map(c => {
|
||||
const equipHtml = c.equipments && c.equipments.length
|
||||
? c.equipments.map(eq => escapeHtml(eq.name)).join(', ')
|
||||
: '—';
|
||||
|
||||
return `
|
||||
<tr>
|
||||
<td>${c.id}</td>
|
||||
<td><strong>${escapeHtml(c.name)}</strong></td>
|
||||
<td>${c.capacity} чел.</td>
|
||||
<td><small>${equipHtml}</small></td>
|
||||
<td>
|
||||
<div class="status-cell">
|
||||
<span class="badge ${c.isAvailable ? 'badge-available' : 'badge-unavailable'}">
|
||||
${c.isAvailable ? 'Доступна' : 'Не доступна'}
|
||||
</span>
|
||||
<button class="btn-icon-toggle" data-id="${c.id}" data-current-status="${c.isAvailable}" title="Сменить статус">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
<td style="text-align: right;">
|
||||
<button class="btn-edit-classroom" data-id="${c.id}" style="padding: 0.35rem 0.7rem; background: rgba(99, 102, 241, 0.1); border: 1px solid rgba(99, 102, 241, 0.2); border-radius: var(--radius-sm); color: var(--accent-hover); cursor: pointer; margin-right: 0.5rem;">Изменить</button>
|
||||
<button class="btn-delete" data-id="${c.id}">Удалить</button>
|
||||
</td>
|
||||
</tr>`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
createClassroomForm.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
hideAlert(createClassroomAlert);
|
||||
const name = document.getElementById('new-classroom-name').value.trim();
|
||||
const capacity = parseInt(document.getElementById('new-classroom-capacity').value, 10);
|
||||
|
||||
const checkedBoxes = Array.from(equipmentCheckboxes.querySelectorAll('input:checked'));
|
||||
const equipmentIds = checkedBoxes.map(chk => parseInt(chk.value, 10));
|
||||
|
||||
if (!name || isNaN(capacity)) { showAlert(createClassroomAlert, 'Заполните обязательные поля', 'error'); return; }
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/classrooms', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token },
|
||||
body: JSON.stringify({ name, capacity, equipmentIds, isAvailable: true }),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (res.ok) {
|
||||
showAlert(createClassroomAlert, `Аудитория "${data.name}" добавлена`, 'success');
|
||||
createClassroomForm.reset();
|
||||
updateSelectText('equipment-checkboxes', 'equipment-select-text');
|
||||
loadClassrooms();
|
||||
} else {
|
||||
showAlert(createClassroomAlert, data.message || 'Ошибка создания', 'error');
|
||||
}
|
||||
} catch (e) { showAlert(createClassroomAlert, 'Ошибка соединения', 'error'); }
|
||||
});
|
||||
|
||||
classroomsTbody.addEventListener('click', async (e) => {
|
||||
const btnDelete = e.target.closest('.btn-delete');
|
||||
const btnToggleStatus = e.target.closest('.btn-icon-toggle');
|
||||
const btnEdit = e.target.closest('.btn-edit-classroom');
|
||||
|
||||
if (btnDelete) {
|
||||
if (!confirm('Удалить аудиторию?')) return;
|
||||
try {
|
||||
const res = await fetch('/api/classrooms/' + btnDelete.dataset.id, {
|
||||
method: 'DELETE',
|
||||
headers: { 'Authorization': 'Bearer ' + token },
|
||||
});
|
||||
if (res.ok) loadClassrooms();
|
||||
else alert('Ошибка удаления');
|
||||
} catch (err) { alert('Ошибка соединения'); }
|
||||
}
|
||||
|
||||
if (btnToggleStatus) {
|
||||
const id = btnToggleStatus.dataset.id;
|
||||
const currentStatus = btnToggleStatus.dataset.currentStatus === 'true';
|
||||
try {
|
||||
const res = await fetch('/api/classrooms/' + id, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token },
|
||||
body: JSON.stringify({ isAvailable: !currentStatus }),
|
||||
});
|
||||
if (res.ok) loadClassrooms();
|
||||
else alert('Ошибка изменения статуса');
|
||||
} catch (err) { alert('Ошибка соединения'); }
|
||||
}
|
||||
|
||||
if (btnEdit) {
|
||||
const id = btnEdit.dataset.id;
|
||||
openEditClassroomModal(id);
|
||||
}
|
||||
});
|
||||
|
||||
let editingClassroomData = null;
|
||||
|
||||
async function openEditClassroomModal(id) {
|
||||
try {
|
||||
const res = await fetch('/api/classrooms', { headers: { 'Authorization': 'Bearer ' + token } });
|
||||
const classrooms = await res.json();
|
||||
editingClassroomData = classrooms.find(c => c.id == id);
|
||||
|
||||
if (!editingClassroomData) return;
|
||||
|
||||
document.getElementById('edit-classroom-id').value = editingClassroomData.id;
|
||||
document.getElementById('edit-classroom-name').value = editingClassroomData.name;
|
||||
document.getElementById('edit-classroom-capacity').value = editingClassroomData.capacity;
|
||||
|
||||
if (allEquipments.length) {
|
||||
editEquipmentCheckboxes.innerHTML = allEquipments.map(eq => {
|
||||
const isChecked = editingClassroomData.equipments.some(e => e.id === eq.id) ? 'checked' : '';
|
||||
return `
|
||||
<label class="checkbox-item">
|
||||
<input type="checkbox" value="${eq.id}" ${isChecked}> ${escapeHtml(eq.name)}
|
||||
</label>
|
||||
`;
|
||||
}).join('');
|
||||
} else {
|
||||
editEquipmentCheckboxes.innerHTML = '<p class="text-muted"><small>Нет доступного оборудования</small></p>';
|
||||
}
|
||||
updateSelectText('edit-equipment-checkboxes', 'edit-equipment-select-text');
|
||||
|
||||
hideAlert(editClassroomAlert);
|
||||
modalEditClassroom.classList.add('open');
|
||||
} catch (e) {
|
||||
alert('Ошибка загрузки данных аудитории');
|
||||
}
|
||||
}
|
||||
|
||||
modalEditClassroomClose.addEventListener('click', () => {
|
||||
modalEditClassroom.classList.remove('open');
|
||||
});
|
||||
|
||||
modalEditClassroom.addEventListener('click', (e) => {
|
||||
if (e.target === modalEditClassroom) {
|
||||
modalEditClassroom.classList.remove('open');
|
||||
}
|
||||
});
|
||||
|
||||
editClassroomForm.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
hideAlert(editClassroomAlert);
|
||||
const id = document.getElementById('edit-classroom-id').value;
|
||||
const name = document.getElementById('edit-classroom-name').value.trim();
|
||||
const capacity = parseInt(document.getElementById('edit-classroom-capacity').value, 10);
|
||||
|
||||
const checkedBoxes = Array.from(editEquipmentCheckboxes.querySelectorAll('input:checked'));
|
||||
const equipmentIds = checkedBoxes.map(chk => parseInt(chk.value, 10));
|
||||
|
||||
if (!name || isNaN(capacity)) { showAlert(editClassroomAlert, 'Заполните обязательные поля', 'error'); return; }
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/classrooms/' + id, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token },
|
||||
body: JSON.stringify({ name, capacity, equipmentIds, isAvailable: editingClassroomData.isAvailable }),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (res.ok) {
|
||||
modalEditClassroom.classList.remove('open');
|
||||
showAlert(createClassroomAlert, `Аудитория "${data.name}" обновлена`, 'success');
|
||||
loadClassrooms();
|
||||
} else {
|
||||
showAlert(editClassroomAlert, data.message || 'Ошибка обновления', 'error');
|
||||
}
|
||||
} catch (e) { showAlert(editClassroomAlert, 'Ошибка соединения', 'error'); }
|
||||
});
|
||||
|
||||
// ============================================================
|
||||
// SUBJECTS
|
||||
// ============================================================
|
||||
|
||||
async function loadSubjects() {
|
||||
try {
|
||||
const res = await fetch('/api/subjects', {
|
||||
headers: { 'Authorization': 'Bearer ' + token },
|
||||
});
|
||||
allSubjects = await res.json();
|
||||
renderSubjects(allSubjects);
|
||||
populateSubjectSelect(allSubjects);
|
||||
} catch (e) {
|
||||
if (subjectsTbody) subjectsTbody.innerHTML = '<tr><td colspan="3" class="loading-row">Ошибка загрузки</td></tr>';
|
||||
}
|
||||
}
|
||||
|
||||
function renderSubjects(subjects) {
|
||||
if (!subjects.length) {
|
||||
subjectsTbody.innerHTML = '<tr><td colspan="3" class="loading-row">Нет дисциплин</td></tr>';
|
||||
return;
|
||||
}
|
||||
subjectsTbody.innerHTML = subjects.map(s => `
|
||||
<tr>
|
||||
<td>${s.id}</td>
|
||||
<td>${escapeHtml(s.name)}</td>
|
||||
<td><button class="btn-delete" data-id="${s.id}">Удалить</button></td>
|
||||
</tr>`).join('');
|
||||
}
|
||||
|
||||
function populateSubjectSelect(subjects) {
|
||||
if (!assignSubjectSelect) return;
|
||||
const currentVal = assignSubjectSelect.value;
|
||||
assignSubjectSelect.innerHTML = '<option value="">Выберите дисциплину</option>' +
|
||||
subjects.map(s => `<option value="${s.id}">${escapeHtml(s.name)}</option>`).join('');
|
||||
if (currentVal && subjects.find(s => s.id == currentVal)) {
|
||||
assignSubjectSelect.value = currentVal;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadTeachers() {
|
||||
try {
|
||||
const res = await fetch('/api/users/teachers', {
|
||||
headers: { 'Authorization': 'Bearer ' + token },
|
||||
});
|
||||
allTeachers = await res.json();
|
||||
populateTeacherSelect(allTeachers);
|
||||
} catch (e) {
|
||||
if (assignTeacherSelect) assignTeacherSelect.innerHTML = '<option value="">Ошибка загрузки</option>';
|
||||
}
|
||||
}
|
||||
|
||||
function populateTeacherSelect(teachers) {
|
||||
if (!assignTeacherSelect) return;
|
||||
const currentVal = assignTeacherSelect.value;
|
||||
if (!teachers.length) {
|
||||
assignTeacherSelect.innerHTML = '<option value="">Нет преподавателей</option>';
|
||||
return;
|
||||
}
|
||||
assignTeacherSelect.innerHTML = '<option value="">Выберите преподавателя</option>' +
|
||||
teachers.map(t => `<option value="${t.id}">${escapeHtml(t.username)}</option>`).join('');
|
||||
if (currentVal && teachers.find(t => t.id == currentVal)) {
|
||||
assignTeacherSelect.value = currentVal;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadTeacherSubjects() {
|
||||
try {
|
||||
const res = await fetch('/api/teacher-subjects', {
|
||||
headers: { 'Authorization': 'Bearer ' + token },
|
||||
});
|
||||
const tsData = await res.json();
|
||||
renderTeacherSubjects(tsData);
|
||||
} catch (e) {
|
||||
if (teacherSubjectsTbody) teacherSubjectsTbody.innerHTML = '<tr><td colspan="3" class="loading-row">Ошибка загрузки</td></tr>';
|
||||
}
|
||||
}
|
||||
|
||||
function renderTeacherSubjects(tsArray) {
|
||||
if (!tsArray.length) {
|
||||
teacherSubjectsTbody.innerHTML = '<tr><td colspan="3" class="loading-row">Нет привязок</td></tr>';
|
||||
return;
|
||||
}
|
||||
teacherSubjectsTbody.innerHTML = tsArray.map(ts => `
|
||||
<tr>
|
||||
<td>${escapeHtml(ts.username)}</td>
|
||||
<td>${escapeHtml(ts.subjectName)}</td>
|
||||
<td><button class="btn-delete" data-user-id="${ts.userId}" data-subject-id="${ts.subjectId}">Удалить</button></td>
|
||||
</tr>`).join('');
|
||||
}
|
||||
|
||||
createSubjectForm.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
hideAlert(createSubjectAlert);
|
||||
const name = document.getElementById('new-subject-name').value.trim();
|
||||
if (!name) { showAlert(createSubjectAlert, 'Введите название', 'error'); return; }
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/subjects', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token },
|
||||
body: JSON.stringify({ name }),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (res.ok) {
|
||||
showAlert(createSubjectAlert, `Дисциплина "${data.name}" добавлена`, 'success');
|
||||
createSubjectForm.reset();
|
||||
loadSubjects();
|
||||
} else {
|
||||
showAlert(createSubjectAlert, data.message || 'Ошибка создания', 'error');
|
||||
}
|
||||
} catch (e) { showAlert(createSubjectAlert, 'Ошибка соединения', 'error'); }
|
||||
});
|
||||
|
||||
subjectsTbody.addEventListener('click', async (e) => {
|
||||
const btn = e.target.closest('.btn-delete');
|
||||
if (!btn) return;
|
||||
if (!confirm('Удалить дисциплину?')) return;
|
||||
try {
|
||||
const res = await fetch('/api/subjects/' + btn.dataset.id, {
|
||||
method: 'DELETE',
|
||||
headers: { 'Authorization': 'Bearer ' + token },
|
||||
});
|
||||
if (res.ok) {
|
||||
loadSubjects();
|
||||
loadTeacherSubjects();
|
||||
} else {
|
||||
const data = await res.json();
|
||||
alert(data.message || 'Ошибка удаления');
|
||||
}
|
||||
} catch (e) { alert('Ошибка соединения'); }
|
||||
});
|
||||
|
||||
assignTeacherForm.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
hideAlert(assignTeacherAlert);
|
||||
const userId = assignTeacherSelect.value;
|
||||
const subjectId = assignSubjectSelect.value;
|
||||
if (!userId) { showAlert(assignTeacherAlert, 'Выберите преподавателя', 'error'); return; }
|
||||
if (!subjectId) { showAlert(assignTeacherAlert, 'Выберите дисциплину', 'error'); return; }
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/teacher-subjects', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token },
|
||||
body: JSON.stringify({ userId: Number(userId), subjectId: Number(subjectId) }),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (res.ok) {
|
||||
showAlert(assignTeacherAlert, 'Привязка создана', 'success');
|
||||
loadTeacherSubjects();
|
||||
} else {
|
||||
showAlert(assignTeacherAlert, data.message || 'Ошибка привязки', 'error');
|
||||
}
|
||||
} catch (e) { showAlert(assignTeacherAlert, 'Ошибка соединения', 'error'); }
|
||||
});
|
||||
|
||||
teacherSubjectsTbody.addEventListener('click', async (e) => {
|
||||
const btn = e.target.closest('.btn-delete');
|
||||
if (!btn) return;
|
||||
if (!confirm('Удалить привязку?')) return;
|
||||
try {
|
||||
const res = await fetch('/api/teacher-subjects', {
|
||||
method: 'DELETE',
|
||||
headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token },
|
||||
body: JSON.stringify({ userId: Number(btn.dataset.userId), subjectId: Number(btn.dataset.subjectId) }),
|
||||
});
|
||||
if (res.ok) loadTeacherSubjects();
|
||||
else alert('Ошибка удаления');
|
||||
} catch (e) { alert('Ошибка соединения'); }
|
||||
});
|
||||
|
||||
// ============================================================
|
||||
// LOGOUT & INIT
|
||||
// ============================================================
|
||||
|
||||
btnLogout.addEventListener('click', () => {
|
||||
localStorage.removeItem('token');
|
||||
localStorage.removeItem('role');
|
||||
window.location.href = '/';
|
||||
});
|
||||
|
||||
loadUsers();
|
||||
})();
|
||||
587
frontend/admin/css/components.css
Normal file
587
frontend/admin/css/components.css
Normal file
@@ -0,0 +1,587 @@
|
||||
/* ===== Cards ===== */
|
||||
.card {
|
||||
background: var(--bg-card);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border: 1px solid var(--bg-card-border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 1.75rem;
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
animation: slideUpCard 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) both;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
|
||||
opacity: 0;
|
||||
transition: opacity var(--transition);
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
|
||||
border-color: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
.card:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.create-card {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.card h2 {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
/* ===== Form Structure ===== */
|
||||
.form-row {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: flex-end;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
flex: 1;
|
||||
min-width: 160px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 0.4rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group select {
|
||||
width: 100%;
|
||||
padding: 0.75rem 1rem;
|
||||
background: var(--bg-input);
|
||||
border: 1px solid var(--bg-card-border);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--text-primary);
|
||||
font-family: inherit;
|
||||
font-size: 0.95rem;
|
||||
outline: none;
|
||||
transition: all var(--transition);
|
||||
}
|
||||
|
||||
.form-group input::placeholder {
|
||||
color: var(--text-placeholder);
|
||||
transition: opacity var(--transition);
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group select:focus {
|
||||
background: var(--bg-input-focus);
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 4px var(--accent-glow);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.form-group input:focus::placeholder {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Hide Number Arrows */
|
||||
input[type="number"]::-webkit-outer-spin-button,
|
||||
input[type="number"]::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
appearance: textfield;
|
||||
}
|
||||
|
||||
/* Select Base Style */
|
||||
.form-group select,
|
||||
.filter-row select {
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 0.75rem center;
|
||||
padding-right: 2.25rem;
|
||||
}
|
||||
|
||||
.form-group select option,
|
||||
.filter-row select option {
|
||||
background: #1a1a2e;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* Light theme selects */
|
||||
[data-theme="light"] .form-group input,
|
||||
[data-theme="light"] .form-group select,
|
||||
[data-theme="light"] .filter-row select {
|
||||
border-color: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
[data-theme="light"] .form-group select option,
|
||||
[data-theme="light"] .filter-row select option {
|
||||
background: #fff;
|
||||
color: #1a1a2e;
|
||||
}
|
||||
|
||||
/* Filter Row */
|
||||
.card-header-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.card-header-row h2 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.filter-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.filter-row label {
|
||||
font-size: 0.78rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.filter-row select {
|
||||
padding: 0.45rem 2rem 0.45rem 0.7rem;
|
||||
background: var(--bg-input);
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--text-primary);
|
||||
font-size: 0.85rem;
|
||||
transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
|
||||
}
|
||||
|
||||
.filter-row select:focus {
|
||||
background-color: var(--bg-input-focus);
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px var(--accent-glow);
|
||||
}
|
||||
|
||||
|
||||
/* ===== Custom Multi-Select ===== */
|
||||
.custom-multi-select {
|
||||
position: relative;
|
||||
user-select: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.select-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: 0.75rem 1rem;
|
||||
background: var(--bg-input);
|
||||
border: 1px solid var(--bg-card-border);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--text-primary);
|
||||
font-size: 0.95rem;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition);
|
||||
}
|
||||
|
||||
.select-box:hover {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.select-box.active {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 4px var(--accent-glow);
|
||||
}
|
||||
|
||||
.dropdown-icon {
|
||||
transition: transform var(--transition);
|
||||
}
|
||||
|
||||
.select-box.active .dropdown-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
margin-top: 0.5rem;
|
||||
background: rgba(15, 23, 42, 0.95);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid var(--bg-card-border);
|
||||
border-radius: var(--radius-sm);
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
|
||||
padding: 1rem;
|
||||
z-index: 100;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(-10px);
|
||||
transition: all var(--transition);
|
||||
}
|
||||
|
||||
[data-theme="light"] .custom-multi-select .dropdown-menu {
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
}
|
||||
|
||||
.dropdown-menu.open {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.checkbox-group-vertical {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.checkbox-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-primary);
|
||||
padding: 0.25rem 0;
|
||||
}
|
||||
|
||||
.checkbox-item input[type="checkbox"] {
|
||||
cursor: pointer;
|
||||
width: 1.1rem;
|
||||
height: 1.1rem;
|
||||
accent-color: var(--accent);
|
||||
}
|
||||
|
||||
/* ===== Buttons ===== */
|
||||
.btn-primary {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 0.75rem 1.75rem;
|
||||
background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
|
||||
border: none;
|
||||
border-radius: var(--radius-sm);
|
||||
color: #fff;
|
||||
font-family: inherit;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: all var(--transition);
|
||||
box-shadow: 0 4px 15px var(--accent-glow);
|
||||
}
|
||||
|
||||
.btn-primary::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(rgba(255, 255, 255, 0.2), transparent);
|
||||
border-radius: inherit;
|
||||
opacity: 0;
|
||||
transition: opacity var(--transition);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px var(--accent-glow);
|
||||
}
|
||||
|
||||
.btn-primary:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.btn-primary:active {
|
||||
transform: translateY(1px);
|
||||
box-shadow: 0 2px 10px var(--accent-glow);
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
padding: 0.35rem 0.7rem;
|
||||
background: rgba(248, 113, 113, 0.1);
|
||||
border: 1px solid rgba(248, 113, 113, 0.2);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--error);
|
||||
font-family: inherit;
|
||||
font-size: 0.8rem;
|
||||
cursor: pointer;
|
||||
transition: background var(--transition), transform var(--transition);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn-delete:hover {
|
||||
background: rgba(248, 113, 113, 0.2);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.btn-icon-toggle {
|
||||
background: transparent;
|
||||
border: 1px solid var(--bg-card-border);
|
||||
color: var(--text-secondary);
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.btn-icon-toggle:hover {
|
||||
background: var(--bg-card);
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
transform: rotate(45deg);
|
||||
box-shadow: 0 0 10px var(--accent-glow);
|
||||
}
|
||||
|
||||
.btn-edit-classroom {
|
||||
padding: 0.35rem 0.7rem;
|
||||
background: rgba(99, 102, 241, 0.1);
|
||||
border: 1px solid rgba(99, 102, 241, 0.2);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--accent-hover);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition);
|
||||
}
|
||||
|
||||
.btn-edit-classroom:hover {
|
||||
background: rgba(99, 102, 241, 0.2);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* ===== Alerts ===== */
|
||||
.form-alert {
|
||||
display: none;
|
||||
padding: 0.6rem 1rem;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.85rem;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.form-alert.error {
|
||||
display: block;
|
||||
background: rgba(248, 113, 113, 0.1);
|
||||
border: 1px solid rgba(248, 113, 113, 0.2);
|
||||
color: var(--error);
|
||||
animation: slideDownAlert 0.3s ease-out both;
|
||||
}
|
||||
|
||||
.form-alert.success {
|
||||
display: block;
|
||||
background: rgba(52, 211, 153, 0.1);
|
||||
border: 1px solid rgba(52, 211, 153, 0.2);
|
||||
color: var(--success);
|
||||
animation: slideDownAlert 0.3s ease-out both;
|
||||
}
|
||||
|
||||
/* ===== Table ===== */
|
||||
.table-wrap {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
thead th {
|
||||
text-align: left;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
padding: 0.6rem 0.8rem;
|
||||
border-bottom: 1px solid var(--bg-card-border);
|
||||
}
|
||||
|
||||
tbody td {
|
||||
padding: 0.85rem 1rem;
|
||||
font-size: 0.95rem;
|
||||
border-bottom: 1px solid var(--bg-card-border);
|
||||
transition: background var(--transition);
|
||||
}
|
||||
|
||||
[data-theme="light"] tbody td {
|
||||
border-bottom-color: rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
transition: background var(--transition);
|
||||
animation: slideInRow 0.3s ease-out both;
|
||||
}
|
||||
|
||||
/* Animation delays */
|
||||
tbody tr:nth-child(1) {
|
||||
animation-delay: 0.05s;
|
||||
}
|
||||
|
||||
tbody tr:nth-child(2) {
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
|
||||
tbody tr:nth-child(3) {
|
||||
animation-delay: 0.15s;
|
||||
}
|
||||
|
||||
tbody tr:nth-child(4) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
tbody tr:nth-child(5) {
|
||||
animation-delay: 0.25s;
|
||||
}
|
||||
|
||||
tbody tr:nth-child(n+6) {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
|
||||
tbody tr:hover {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.loading-row {
|
||||
text-align: center;
|
||||
color: var(--text-secondary);
|
||||
padding: 2rem !important;
|
||||
}
|
||||
|
||||
/* ===== Badges ===== */
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 0.2rem 0.6rem;
|
||||
border-radius: 999px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
.badge-admin {
|
||||
background: rgba(248, 113, 113, 0.15);
|
||||
color: var(--error);
|
||||
}
|
||||
|
||||
.badge-teacher {
|
||||
background: rgba(251, 191, 36, 0.15);
|
||||
color: var(--warning);
|
||||
}
|
||||
|
||||
.badge-student {
|
||||
background: rgba(52, 211, 153, 0.15);
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.badge-ef {
|
||||
background: rgba(99, 102, 241, 0.15);
|
||||
color: var(--accent-hover);
|
||||
}
|
||||
|
||||
/* Classroom Status */
|
||||
.badge-available {
|
||||
background: rgba(16, 185, 129, 0.15);
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.badge-unavailable {
|
||||
background: rgba(248, 113, 113, 0.15);
|
||||
color: var(--error);
|
||||
}
|
||||
|
||||
.status-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* ===== Modal ===== */
|
||||
.modal-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
backdrop-filter: blur(4px);
|
||||
z-index: 1000;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity var(--transition);
|
||||
}
|
||||
|
||||
.modal-overlay.open {
|
||||
display: flex;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--bg-card-border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 2rem;
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
position: relative;
|
||||
transform: scale(0.95);
|
||||
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.modal-overlay.open .modal-content {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
transition: color var(--transition);
|
||||
}
|
||||
|
||||
.modal-close:hover {
|
||||
color: var(--error);
|
||||
}
|
||||
216
frontend/admin/css/layout.css
Normal file
216
frontend/admin/css/layout.css
Normal file
@@ -0,0 +1,216 @@
|
||||
/* ===== Sidebar ===== */
|
||||
.sidebar {
|
||||
width: 260px;
|
||||
min-height: 100vh;
|
||||
background: var(--bg-sidebar);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-right: 1px solid var(--bg-card-border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
transition: background 0.4s ease, border-color 0.4s ease, transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
padding: 1.25rem;
|
||||
border-bottom: 1px solid var(--bg-card-border);
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
font-size: 1.15rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
flex: 1;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem 1rem;
|
||||
margin-bottom: 0.25rem;
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
transition: all var(--transition);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.nav-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 3px;
|
||||
background: var(--accent);
|
||||
border-radius: 0 4px 4px 0;
|
||||
transform: scaleY(0);
|
||||
transition: transform var(--transition);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-primary);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
background: rgba(139, 92, 246, 0.12);
|
||||
color: var(--accent-hover);
|
||||
}
|
||||
|
||||
[data-theme="light"] .nav-item.active {
|
||||
background: rgba(99, 102, 241, 0.18);
|
||||
}
|
||||
|
||||
.nav-item.active::before {
|
||||
transform: scaleY(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.nav-item svg {
|
||||
transition: transform var(--transition);
|
||||
}
|
||||
|
||||
.nav-item:hover svg,
|
||||
.nav-item.active svg {
|
||||
transform: scale(1.15) rotate(-5deg);
|
||||
}
|
||||
|
||||
.sidebar-footer {
|
||||
padding: 0.75rem;
|
||||
border-top: 1px solid var(--bg-card-border);
|
||||
}
|
||||
|
||||
.btn-logout {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
padding: 0.65rem 0.8rem;
|
||||
border: none;
|
||||
border-radius: var(--radius-sm);
|
||||
background: none;
|
||||
color: var(--text-secondary);
|
||||
font-family: inherit;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
transition: background var(--transition), color var(--transition);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.btn-logout:hover {
|
||||
background: rgba(248, 113, 113, 0.1);
|
||||
color: var(--error);
|
||||
}
|
||||
|
||||
/* ===== Main ===== */
|
||||
.main {
|
||||
flex: 1;
|
||||
margin-left: 260px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
padding: 1.5rem 2rem;
|
||||
border-bottom: 1px solid var(--bg-card-border);
|
||||
transition: border-color 0.4s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.topbar h1 {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 1.5rem 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
animation: fadeIn 0.2s ease;
|
||||
}
|
||||
|
||||
/* ===== Mobile Menu Toggle ===== */
|
||||
.menu-toggle {
|
||||
display: none;
|
||||
padding: 0.4rem;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-primary);
|
||||
cursor: pointer;
|
||||
border-radius: var(--radius-sm);
|
||||
transition: background var(--transition);
|
||||
}
|
||||
|
||||
.menu-toggle:hover {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.sidebar-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
backdrop-filter: blur(2px);
|
||||
z-index: 9;
|
||||
opacity: 0;
|
||||
transition: opacity var(--transition);
|
||||
}
|
||||
|
||||
/* ===== Responsive Mobile ===== */
|
||||
@media (max-width: 768px) {
|
||||
.sidebar {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.sidebar.open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.main {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
padding: 1rem 1.25rem;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.menu-toggle,
|
||||
.sidebar-overlay {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sidebar-overlay.open {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
110
frontend/admin/css/main.css
Normal file
110
frontend/admin/css/main.css
Normal file
@@ -0,0 +1,110 @@
|
||||
/* ===== Reset & Base ===== */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
/* Deep dark premium background */
|
||||
--bg-primary: #0a0a0f;
|
||||
--bg-sidebar: rgba(255, 255, 255, 0.02);
|
||||
--bg-card: rgba(255, 255, 255, 0.03);
|
||||
--bg-card-border: rgba(255, 255, 255, 0.05);
|
||||
--bg-input: rgba(255, 255, 255, 0.04);
|
||||
--bg-input-focus: rgba(255, 255, 255, 0.08);
|
||||
--bg-hover: rgba(255, 255, 255, 0.06);
|
||||
|
||||
/* Typography */
|
||||
--text-primary: #f8fafc;
|
||||
--text-secondary: #94a3b8;
|
||||
--text-placeholder: #475569;
|
||||
|
||||
/* Vibrant Accents */
|
||||
--accent: #8b5cf6;
|
||||
--accent-hover: #a78bfa;
|
||||
--accent-glow: rgba(139, 92, 246, 0.4);
|
||||
--accent-secondary: #ec4899;
|
||||
|
||||
/* Status Colors */
|
||||
--error: #ef4444;
|
||||
--success: #10b981;
|
||||
--warning: #f59e0b;
|
||||
|
||||
/* Spatial */
|
||||
--radius-sm: 10px;
|
||||
--radius-md: 16px;
|
||||
--transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
}
|
||||
|
||||
/* ===== Light Theme ===== */
|
||||
[data-theme="light"] {
|
||||
--bg-primary: #f8fafc;
|
||||
--bg-sidebar: rgba(255, 255, 255, 0.7);
|
||||
--bg-card: rgba(255, 255, 255, 0.75);
|
||||
--bg-card-border: rgba(0, 0, 0, 0.08);
|
||||
--bg-input: rgba(0, 0, 0, 0.03);
|
||||
--bg-input-focus: rgba(0, 0, 0, 0.06);
|
||||
--bg-hover: rgba(0, 0, 0, 0.05);
|
||||
--text-primary: #0f172a;
|
||||
--text-secondary: #475569;
|
||||
--text-placeholder: #94a3b8;
|
||||
--accent: #6366f1;
|
||||
--accent-hover: #4f46e5;
|
||||
--accent-glow: rgba(99, 102, 241, 0.3);
|
||||
--accent-secondary: #d946ef;
|
||||
|
||||
--error: #ef4444;
|
||||
--success: #10b981;
|
||||
--warning: #f59e0b;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 16px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
transition: background 0.4s ease, color 0.4s ease;
|
||||
}
|
||||
|
||||
/* ===== Animations ===== */
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(4px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes slideUpCard {
|
||||
from { opacity: 0; transform: translateY(15px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes slideDownAlert {
|
||||
from { opacity: 0; transform: translateY(-10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes slideInRow {
|
||||
from { opacity: 0; transform: translateX(-10px); }
|
||||
to { opacity: 1; transform: translateX(0); }
|
||||
}
|
||||
|
||||
@keyframes admin-ripple {
|
||||
to { transform: scale(4); opacity: 0; }
|
||||
}
|
||||
|
||||
.ripple {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
transform: scale(0);
|
||||
animation: admin-ripple 0.6s linear;
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
pointer-events: none;
|
||||
}
|
||||
@@ -8,7 +8,11 @@
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="admin.css">
|
||||
|
||||
<!-- CSS Modules -->
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
<link rel="stylesheet" href="css/layout.css">
|
||||
<link rel="stylesheet" href="css/components.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@@ -31,7 +35,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<nav class="sidebar-nav">
|
||||
<a href="#" class="nav-item active" data-tab="users">
|
||||
<a href="#" class="nav-item" data-tab="users">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
||||
stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
|
||||
@@ -110,372 +114,17 @@
|
||||
<line x1="3" y1="18" x2="21" y2="18" />
|
||||
</svg>
|
||||
</button>
|
||||
<h1 id="page-title">Управление пользователями</h1>
|
||||
<h1 id="page-title">Загрузка...</h1>
|
||||
</header>
|
||||
|
||||
<!-- ===== Users Tab ===== -->
|
||||
<section class="content tab-content" id="tab-users">
|
||||
<div class="card create-card">
|
||||
<h2>Новый пользователь</h2>
|
||||
<form id="create-form">
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="new-username">Имя пользователя</label>
|
||||
<input type="text" id="new-username" placeholder="username" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="new-password">Пароль</label>
|
||||
<input type="text" id="new-password" placeholder="password" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="new-role">Роль</label>
|
||||
<select id="new-role">
|
||||
<option value="STUDENT">Студент</option>
|
||||
<option value="TEACHER">Преподаватель</option>
|
||||
<option value="ADMIN">Администратор</option>
|
||||
</select>
|
||||
</div>
|
||||
<button type="submit" class="btn-create">Создать</button>
|
||||
</div>
|
||||
<div class="form-alert" id="create-alert" role="alert"></div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h2>Все пользователи</h2>
|
||||
<div class="table-wrap">
|
||||
<table id="users-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Имя пользователя</th>
|
||||
<th>Роль</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="users-tbody">
|
||||
<tr>
|
||||
<td colspan="4" class="loading-row">Загрузка...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Dynamic Content Injected Here -->
|
||||
<section class="content" id="app-content">
|
||||
<!-- Content loaded via main.js -->
|
||||
</section>
|
||||
|
||||
<!-- ===== Groups Tab ===== -->
|
||||
<section class="content tab-content" id="tab-groups" style="display:none;">
|
||||
<div class="card create-card">
|
||||
<h2>Новая группа</h2>
|
||||
<form id="create-group-form">
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="new-group-name">Название группы</label>
|
||||
<input type="text" id="new-group-name" placeholder="ИВТ-21-1" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="new-group-ef">Форма обучения</label>
|
||||
<select id="new-group-ef">
|
||||
<option value="">Загрузка...</option>
|
||||
</select>
|
||||
</div>
|
||||
<button type="submit" class="btn-create">Создать</button>
|
||||
</div>
|
||||
<div class="form-alert" id="create-group-alert" role="alert"></div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header-row">
|
||||
<h2>Все группы</h2>
|
||||
<div class="filter-row">
|
||||
<label for="filter-ef">Фильтр:</label>
|
||||
<select id="filter-ef">
|
||||
<option value="">Все формы</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table id="groups-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Название</th>
|
||||
<th>Форма обучения</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="groups-tbody">
|
||||
<tr>
|
||||
<td colspan="4" class="loading-row">Загрузка...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== Education Forms Tab ===== -->
|
||||
<section class="content tab-content" id="tab-edu-forms" style="display:none;">
|
||||
<div class="card create-card">
|
||||
<h2>Новая форма обучения</h2>
|
||||
<form id="create-ef-form">
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="new-ef-name">Название</label>
|
||||
<input type="text" id="new-ef-name" placeholder="Бакалавриат" required>
|
||||
</div>
|
||||
<button type="submit" class="btn-create">Создать</button>
|
||||
</div>
|
||||
<div class="form-alert" id="create-ef-alert" role="alert"></div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h2>Все формы обучения</h2>
|
||||
<div class="table-wrap">
|
||||
<table id="ef-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Название</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="ef-tbody">
|
||||
<tr>
|
||||
<td colspan="3" class="loading-row">Загрузка...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== Equipments Tab ===== -->
|
||||
<section class="content tab-content" id="tab-equipments" style="display:none;">
|
||||
<div class="card create-card">
|
||||
<h2>Новое оборудование</h2>
|
||||
<form id="create-equipment-form">
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="new-equipment-name">Название оборудования</label>
|
||||
<input type="text" id="new-equipment-name" placeholder="Проектор" required>
|
||||
</div>
|
||||
<button type="submit" class="btn-create">Добавить</button>
|
||||
</div>
|
||||
<div class="form-alert" id="create-equipment-alert" role="alert"></div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h2>Справочник оборудования</h2>
|
||||
<div class="table-wrap">
|
||||
<table id="equipments-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Название</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="equipments-tbody">
|
||||
<tr>
|
||||
<td colspan="3" class="loading-row">Загрузка...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== Classrooms Tab ===== -->
|
||||
<section class="content tab-content" id="tab-classrooms" style="display:none;">
|
||||
<div class="card create-card">
|
||||
<h2>Новая аудитория</h2>
|
||||
<form id="create-classroom-form">
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="new-classroom-name">Номер / Название</label>
|
||||
<input type="text" id="new-classroom-name" placeholder="101 Ленинская" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="new-classroom-capacity">Вместимость (чел.)</label>
|
||||
<input type="number" id="new-classroom-capacity" placeholder="30" min="1" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row" style="margin-top: 1rem;">
|
||||
<div class="form-group" style="flex: 2;">
|
||||
<label>Оборудование</label>
|
||||
<div class="custom-multi-select">
|
||||
<div class="select-box" id="equipment-select-box">
|
||||
<span class="select-text" id="equipment-select-text">Выберите оборудование...</span>
|
||||
<svg class="dropdown-icon" width="12" height="8" viewBox="0 0 12 8" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 1.5L6 6.5L11 1.5" stroke="#9ca3af" stroke-width="2"
|
||||
stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="dropdown-menu" id="equipment-dropdown-menu">
|
||||
<div id="equipment-checkboxes" class="checkbox-group-vertical">
|
||||
<!-- Подгружается через JS -->
|
||||
<p class="text-muted"><small>Загрузка...</small></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group" style="display: flex; align-items: flex-end;">
|
||||
<button type="submit" class="btn-create">Добавить</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-alert" id="create-classroom-alert" role="alert"></div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h2>Список аудиторий</h2>
|
||||
<div class="table-wrap">
|
||||
<table id="classrooms-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Название</th>
|
||||
<th>Вместимость</th>
|
||||
<th>Оборудование</th>
|
||||
<th>Статус</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="classrooms-tbody">
|
||||
<tr>
|
||||
<td colspan="6" class="loading-row">Загрузка...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== Subjects Tab ===== -->
|
||||
<section class="content tab-content" id="tab-subjects" style="display:none;">
|
||||
<div class="card create-card">
|
||||
<h2>Новая дисциплина</h2>
|
||||
<form id="create-subject-form">
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="new-subject-name">Название дисциплины</label>
|
||||
<input type="text" id="new-subject-name" placeholder="Высшая математика" required>
|
||||
</div>
|
||||
<button type="submit" class="btn-create">Добавить</button>
|
||||
</div>
|
||||
<div class="form-alert" id="create-subject-alert" role="alert"></div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card create-card">
|
||||
<h2>Привязка преподавателя к дисциплине</h2>
|
||||
<form id="assign-teacher-form">
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="assign-teacher-select">Преподаватель</label>
|
||||
<select id="assign-teacher-select">
|
||||
<option value="">Загрузка...</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="assign-subject-select">Дисциплина</label>
|
||||
<select id="assign-subject-select">
|
||||
<option value="">Загрузка...</option>
|
||||
</select>
|
||||
</div>
|
||||
<button type="submit" class="btn-create">Привязать</button>
|
||||
</div>
|
||||
<div class="form-alert" id="assign-teacher-alert" role="alert"></div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h2>Все дисциплины</h2>
|
||||
<div class="table-wrap">
|
||||
<table id="subjects-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Название</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="subjects-tbody">
|
||||
<tr>
|
||||
<td colspan="3" class="loading-row">Загрузка...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h2>Привязки преподавателей</h2>
|
||||
<div class="table-wrap">
|
||||
<table id="teacher-subjects-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Преподаватель</th>
|
||||
<th>Дисциплина</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="teacher-subjects-tbody">
|
||||
<tr>
|
||||
<td colspan="3" class="loading-row">Загрузка...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== Edit Classroom Modal ===== -->
|
||||
<div class="modal-overlay" id="modal-edit-classroom">
|
||||
<div class="modal-content">
|
||||
<h2>Редактировать аудиторию</h2>
|
||||
<button class="modal-close" id="modal-edit-classroom-close">×</button>
|
||||
<form id="edit-classroom-form">
|
||||
<input type="hidden" id="edit-classroom-id">
|
||||
<div class="form-row" style="margin-top: 1rem;">
|
||||
<div class="form-group">
|
||||
<label for="edit-classroom-name">Номер / Название</label>
|
||||
<input type="text" id="edit-classroom-name" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="edit-classroom-capacity">Вместимость (чел.)</label>
|
||||
<input type="number" id="edit-classroom-capacity" min="1" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row" style="margin-top: 1rem;">
|
||||
<div class="form-group" style="flex: 2;">
|
||||
<label>Оборудование</label>
|
||||
<div class="custom-multi-select">
|
||||
<div class="select-box" id="edit-equipment-select-box">
|
||||
<span class="select-text" id="edit-equipment-select-text">Выберите
|
||||
оборудование...</span>
|
||||
<svg class="dropdown-icon" width="12" height="8" viewBox="0 0 12 8" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 1.5L6 6.5L11 1.5" stroke="#9ca3af" stroke-width="2"
|
||||
stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="dropdown-menu" id="edit-equipment-dropdown-menu">
|
||||
<div id="edit-equipment-checkboxes" class="checkbox-group-vertical">
|
||||
<!-- Подгружается через JS -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group" style="display: flex; align-items: flex-end;">
|
||||
<button type="submit" class="btn-create" style="width: 100%;">Сохранить</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-alert" id="edit-classroom-alert" role="alert"></div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script src="/theme-toggle.js"></script>
|
||||
<script src="admin.js"></script>
|
||||
<script type="module" src="js/main.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
57
frontend/admin/js/api.js
Normal file
57
frontend/admin/js/api.js
Normal file
@@ -0,0 +1,57 @@
|
||||
const token = localStorage.getItem('token');
|
||||
|
||||
export function getToken() {
|
||||
return token;
|
||||
}
|
||||
|
||||
export function isAuthenticatedAsAdmin() {
|
||||
const role = localStorage.getItem('role');
|
||||
return token && role === 'ADMIN';
|
||||
}
|
||||
|
||||
function getHeaders(contentType = 'application/json') {
|
||||
const headers = {
|
||||
'Authorization': `Bearer ${token}`
|
||||
};
|
||||
if (contentType) {
|
||||
headers['Content-Type'] = contentType;
|
||||
}
|
||||
return headers;
|
||||
}
|
||||
|
||||
export async function apiFetch(endpoint, method = 'GET', body = null) {
|
||||
const options = {
|
||||
method,
|
||||
headers: getHeaders(body ? 'application/json' : null)
|
||||
};
|
||||
|
||||
if (body) {
|
||||
options.body = JSON.stringify(body);
|
||||
}
|
||||
|
||||
const response = await fetch(endpoint, options);
|
||||
|
||||
// Si status is 401 or 403, we should probably redirect to login,
|
||||
// but for now let's just throw an error or handle it in the view.
|
||||
|
||||
let data;
|
||||
try {
|
||||
data = await response.json();
|
||||
} catch (e) {
|
||||
data = null;
|
||||
}
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(data?.message || `Ошибка HTTP: ${response.status}`);
|
||||
}
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
// Shortcut methods
|
||||
export const api = {
|
||||
get: (url) => apiFetch(url, 'GET'),
|
||||
post: (url, body) => apiFetch(url, 'POST', body),
|
||||
put: (url, body) => apiFetch(url, 'PUT', body),
|
||||
delete: (url, body = null) => apiFetch(url, 'DELETE', body)
|
||||
};
|
||||
101
frontend/admin/js/main.js
Normal file
101
frontend/admin/js/main.js
Normal file
@@ -0,0 +1,101 @@
|
||||
import { isAuthenticatedAsAdmin } from './api.js';
|
||||
import { applyRippleEffect, closeAllDropdownsOnOutsideClick } from './utils.js';
|
||||
|
||||
import { initUsers } from './views/users.js';
|
||||
import { initGroups } from './views/groups.js';
|
||||
import { initEduForms } from './views/edu-forms.js';
|
||||
import { initEquipments } from './views/equipments.js';
|
||||
import { initClassrooms } from './views/classrooms.js';
|
||||
import { initSubjects } from './views/subjects.js';
|
||||
|
||||
// Configuration
|
||||
const ROUTES = {
|
||||
users: { title: 'Управление пользователями', file: 'views/users.html', init: initUsers },
|
||||
groups: { title: 'Управление группами', file: 'views/groups.html', init: initGroups },
|
||||
'edu-forms': { title: 'Формы обучения', file: 'views/edu-forms.html', init: initEduForms },
|
||||
equipments: { title: 'Оборудование', file: 'views/equipments.html', init: initEquipments },
|
||||
classrooms: { title: 'Аудитории', file: 'views/classrooms.html', init: initClassrooms },
|
||||
subjects: { title: 'Дисциплины и преподаватели', file: 'views/subjects.html', init: initSubjects },
|
||||
};
|
||||
|
||||
let currentTab = null;
|
||||
|
||||
// DOM Elements
|
||||
const appContent = document.getElementById('app-content');
|
||||
const pageTitle = document.getElementById('page-title');
|
||||
const navItems = document.querySelectorAll('.nav-item[data-tab]');
|
||||
const sidebar = document.querySelector('.sidebar');
|
||||
const sidebarOverlay = document.getElementById('sidebar-overlay');
|
||||
const menuToggle = document.getElementById('menu-toggle');
|
||||
const btnLogout = document.getElementById('btn-logout');
|
||||
|
||||
// Initial auth check
|
||||
if (!isAuthenticatedAsAdmin()) {
|
||||
window.location.href = '/';
|
||||
}
|
||||
|
||||
// Setup Global Effects
|
||||
applyRippleEffect();
|
||||
closeAllDropdownsOnOutsideClick();
|
||||
|
||||
// Menu Toggle
|
||||
menuToggle.addEventListener('click', () => {
|
||||
sidebar.classList.toggle('open');
|
||||
sidebarOverlay.classList.toggle('open');
|
||||
});
|
||||
sidebarOverlay.addEventListener('click', () => {
|
||||
sidebar.classList.remove('open');
|
||||
sidebarOverlay.classList.remove('open');
|
||||
});
|
||||
|
||||
// Logout
|
||||
btnLogout.addEventListener('click', () => {
|
||||
localStorage.removeItem('token');
|
||||
localStorage.removeItem('role');
|
||||
window.location.href = '/';
|
||||
});
|
||||
|
||||
// Navigation
|
||||
navItems.forEach(item => {
|
||||
item.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
const tab = item.dataset.tab;
|
||||
switchTab(tab);
|
||||
});
|
||||
});
|
||||
|
||||
async function switchTab(tab) {
|
||||
if (currentTab === tab || !ROUTES[tab]) return;
|
||||
|
||||
// UI Update
|
||||
navItems.forEach(n => n.classList.remove('active'));
|
||||
document.querySelector(`.nav-item[data-tab="${tab}"]`)?.classList.add('active');
|
||||
pageTitle.textContent = ROUTES[tab].title;
|
||||
|
||||
// Load template
|
||||
try {
|
||||
appContent.innerHTML = '<div class="loading-row">Загрузка...</div>';
|
||||
const response = await fetch(ROUTES[tab].file);
|
||||
if (!response.ok) throw new Error('Failed to load view');
|
||||
|
||||
const html = await response.text();
|
||||
appContent.innerHTML = html;
|
||||
|
||||
// Initialize logic for the tab
|
||||
if (ROUTES[tab].init) {
|
||||
ROUTES[tab].init();
|
||||
}
|
||||
|
||||
currentTab = tab;
|
||||
} catch (e) {
|
||||
appContent.innerHTML = `<div class="form-alert error">Ошибка загрузки вкладки: ${e.message}</div>`;
|
||||
console.error(e);
|
||||
}
|
||||
|
||||
// Close mobile menu if open
|
||||
sidebar.classList.remove('open');
|
||||
sidebarOverlay.classList.remove('open');
|
||||
}
|
||||
|
||||
// Load default tab
|
||||
switchTab('users');
|
||||
102
frontend/admin/js/utils.js
Normal file
102
frontend/admin/js/utils.js
Normal file
@@ -0,0 +1,102 @@
|
||||
export const ESCAPE_MAP = {
|
||||
'&': '&',
|
||||
'<': '<',
|
||||
'>': '>',
|
||||
'"': '"',
|
||||
"'": '''
|
||||
};
|
||||
|
||||
export function escapeHtml(str) {
|
||||
if (!str) return '';
|
||||
return String(str).replace(/[&<>"']/g, m => ESCAPE_MAP[m]);
|
||||
}
|
||||
|
||||
export function showAlert(elementId, msg, type) {
|
||||
const el = document.getElementById(elementId);
|
||||
if (!el) return;
|
||||
el.className = 'form-alert ' + type;
|
||||
el.textContent = msg;
|
||||
}
|
||||
|
||||
export function hideAlert(elementId) {
|
||||
const el = document.getElementById(elementId);
|
||||
if (!el) return;
|
||||
el.className = 'form-alert';
|
||||
el.textContent = '';
|
||||
}
|
||||
|
||||
export function applyRippleEffect() {
|
||||
document.addEventListener('click', function (e) {
|
||||
const btn = e.target.closest('.btn-primary, .btn-delete, .btn-logout');
|
||||
if (!btn) return;
|
||||
|
||||
const rect = btn.getBoundingClientRect();
|
||||
const x = e.clientX - rect.left;
|
||||
const y = e.clientY - rect.top;
|
||||
|
||||
const ripple = document.createElement('span');
|
||||
ripple.classList.add('ripple');
|
||||
ripple.style.left = `${x}px`;
|
||||
ripple.style.top = `${y}px`;
|
||||
|
||||
if (getComputedStyle(btn).position === 'static') {
|
||||
btn.style.position = 'relative';
|
||||
}
|
||||
btn.style.overflow = 'hidden';
|
||||
|
||||
btn.appendChild(ripple);
|
||||
|
||||
setTimeout(() => ripple.remove(), 600);
|
||||
});
|
||||
}
|
||||
|
||||
export function initMultiSelect(boxId, menuId, textId, checkboxContainerId) {
|
||||
const box = document.getElementById(boxId);
|
||||
const menu = document.getElementById(menuId);
|
||||
const container = document.getElementById(checkboxContainerId);
|
||||
if (!box || !menu || !container) return;
|
||||
|
||||
// Remove old listeners to prevent duplication if re-initialized
|
||||
const newBox = box.cloneNode(true);
|
||||
box.parentNode.replaceChild(newBox, box);
|
||||
|
||||
newBox.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
const isOpen = menu.classList.contains('open');
|
||||
document.querySelectorAll('.dropdown-menu').forEach(m => m.classList.remove('open'));
|
||||
document.querySelectorAll('.select-box').forEach(b => b.classList.remove('active'));
|
||||
if (!isOpen) {
|
||||
menu.classList.add('open');
|
||||
newBox.classList.add('active');
|
||||
}
|
||||
});
|
||||
|
||||
menu.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
container.addEventListener('change', () => {
|
||||
updateSelectText(checkboxContainerId, textId);
|
||||
});
|
||||
}
|
||||
|
||||
export function updateSelectText(containerId, textId) {
|
||||
const container = document.getElementById(containerId);
|
||||
const textEl = document.getElementById(textId);
|
||||
if (!container || !textEl) return;
|
||||
const checked = Array.from(container.querySelectorAll('input:checked'));
|
||||
if (checked.length === 0) {
|
||||
textEl.textContent = 'Выберите оборудование...';
|
||||
} else if (checked.length === 1) {
|
||||
textEl.textContent = checked[0].parentElement.textContent.trim();
|
||||
} else {
|
||||
textEl.textContent = `Выбрано: ${checked.length}`;
|
||||
}
|
||||
}
|
||||
|
||||
export function closeAllDropdownsOnOutsideClick() {
|
||||
document.addEventListener('click', () => {
|
||||
document.querySelectorAll('.dropdown-menu').forEach(m => m.classList.remove('open'));
|
||||
document.querySelectorAll('.select-box').forEach(b => b.classList.remove('active'));
|
||||
});
|
||||
}
|
||||
185
frontend/admin/js/views/classrooms.js
Normal file
185
frontend/admin/js/views/classrooms.js
Normal file
@@ -0,0 +1,185 @@
|
||||
import { api } from '../api.js';
|
||||
import { escapeHtml, showAlert, hideAlert, initMultiSelect, updateSelectText } from '../utils.js';
|
||||
import { fetchEquipments, renderEquipmentCheckboxes } from './equipments.js';
|
||||
|
||||
export async function initClassrooms() {
|
||||
const classroomsTbody = document.getElementById('classrooms-tbody');
|
||||
const createClassroomForm = document.getElementById('create-classroom-form');
|
||||
|
||||
const equipmentCheckboxes = document.getElementById('equipment-checkboxes');
|
||||
const editEquipmentCheckboxes = document.getElementById('edit-equipment-checkboxes');
|
||||
|
||||
const modalEditClassroom = document.getElementById('modal-edit-classroom');
|
||||
const modalEditClassroomClose = document.getElementById('modal-edit-classroom-close');
|
||||
const editClassroomForm = document.getElementById('edit-classroom-form');
|
||||
|
||||
let allEquipments = [];
|
||||
let editingClassroomData = null;
|
||||
|
||||
initMultiSelect('equipment-select-box', 'equipment-dropdown-menu', 'equipment-select-text', 'equipment-checkboxes');
|
||||
initMultiSelect('edit-equipment-select-box', 'edit-equipment-dropdown-menu', 'edit-equipment-select-text', 'edit-equipment-checkboxes');
|
||||
|
||||
async function loadInitialData() {
|
||||
try {
|
||||
allEquipments = await fetchEquipments();
|
||||
renderEquipmentCheckboxes(allEquipments, 'equipment-checkboxes', 'equipment-select-text');
|
||||
await loadClassrooms();
|
||||
} catch (e) {
|
||||
classroomsTbody.innerHTML = '<tr><td colspan="6" class="loading-row">Ошибка загрузки данных</td></tr>';
|
||||
}
|
||||
}
|
||||
|
||||
async function loadClassrooms() {
|
||||
try {
|
||||
const classrooms = await api.get('/api/classrooms');
|
||||
renderClassrooms(classrooms);
|
||||
} catch (e) {
|
||||
classroomsTbody.innerHTML = '<tr><td colspan="6" class="loading-row">Ошибка загрузки</td></tr>';
|
||||
}
|
||||
}
|
||||
|
||||
function renderClassrooms(classrooms) {
|
||||
if (!classrooms || !classrooms.length) {
|
||||
classroomsTbody.innerHTML = '<tr><td colspan="6" class="loading-row">Нет аудиторий</td></tr>';
|
||||
return;
|
||||
}
|
||||
classroomsTbody.innerHTML = classrooms.map(c => {
|
||||
const equipHtml = c.equipments && c.equipments.length
|
||||
? c.equipments.map(eq => escapeHtml(eq.name)).join(', ')
|
||||
: '—';
|
||||
|
||||
return `
|
||||
<tr>
|
||||
<td>${c.id}</td>
|
||||
<td><strong>${escapeHtml(c.name)}</strong></td>
|
||||
<td>${c.capacity} чел.</td>
|
||||
<td><small>${equipHtml}</small></td>
|
||||
<td>
|
||||
<div class="status-cell">
|
||||
<span class="badge ${c.isAvailable ? 'badge-available' : 'badge-unavailable'}">
|
||||
${c.isAvailable ? 'Доступна' : 'Не доступна'}
|
||||
</span>
|
||||
<button class="btn-icon-toggle" data-id="${c.id}" data-current-status="${c.isAvailable}" title="Сменить статус">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
<td style="text-align: right;">
|
||||
<button class="btn-edit-classroom" data-id="${c.id}">Изменить</button>
|
||||
<button class="btn-delete" data-id="${c.id}" style="margin-left: 0.5rem;">Удалить</button>
|
||||
</td>
|
||||
</tr>`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
createClassroomForm.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
hideAlert('create-classroom-alert');
|
||||
const name = document.getElementById('new-classroom-name').value.trim();
|
||||
const capacity = parseInt(document.getElementById('new-classroom-capacity').value, 10);
|
||||
|
||||
const checkedBoxes = Array.from(equipmentCheckboxes.querySelectorAll('input:checked'));
|
||||
const equipmentIds = checkedBoxes.map(chk => parseInt(chk.value, 10));
|
||||
|
||||
if (!name || isNaN(capacity)) { showAlert('create-classroom-alert', 'Заполните обязательные поля', 'error'); return; }
|
||||
|
||||
try {
|
||||
const data = await api.post('/api/classrooms', { name, capacity, equipmentIds, isAvailable: true });
|
||||
showAlert('create-classroom-alert', `Аудитория "${escapeHtml(data.name)}" добавлена`, 'success');
|
||||
createClassroomForm.reset();
|
||||
updateSelectText('equipment-checkboxes', 'equipment-select-text');
|
||||
loadClassrooms();
|
||||
} catch (e) {
|
||||
showAlert('create-classroom-alert', e.message || 'Ошибка создания', 'error');
|
||||
}
|
||||
});
|
||||
|
||||
classroomsTbody.addEventListener('click', async (e) => {
|
||||
const btnDelete = e.target.closest('.btn-delete');
|
||||
const btnToggleStatus = e.target.closest('.btn-icon-toggle');
|
||||
const btnEdit = e.target.closest('.btn-edit-classroom');
|
||||
|
||||
if (btnDelete) {
|
||||
if (!confirm('Удалить аудиторию?')) return;
|
||||
try {
|
||||
await api.delete('/api/classrooms/' + btnDelete.dataset.id);
|
||||
loadClassrooms();
|
||||
} catch (err) { alert('Ошибка удаления'); }
|
||||
}
|
||||
|
||||
if (btnToggleStatus) {
|
||||
const id = btnToggleStatus.dataset.id;
|
||||
const currentStatus = btnToggleStatus.dataset.currentStatus === 'true';
|
||||
try {
|
||||
await api.put('/api/classrooms/' + id, { isAvailable: !currentStatus });
|
||||
loadClassrooms();
|
||||
} catch (err) { alert('Ошибка изменения статуса'); }
|
||||
}
|
||||
|
||||
if (btnEdit) {
|
||||
openEditClassroomModal(btnEdit.dataset.id);
|
||||
}
|
||||
});
|
||||
|
||||
async function openEditClassroomModal(id) {
|
||||
try {
|
||||
// Can optimize by using already loaded classrooms, but fetch is safer to get fresh data
|
||||
const classrooms = await api.get('/api/classrooms');
|
||||
editingClassroomData = classrooms.find(c => c.id == id);
|
||||
|
||||
if (!editingClassroomData) return;
|
||||
|
||||
document.getElementById('edit-classroom-id').value = editingClassroomData.id;
|
||||
document.getElementById('edit-classroom-name').value = editingClassroomData.name;
|
||||
document.getElementById('edit-classroom-capacity').value = editingClassroomData.capacity;
|
||||
|
||||
const existingEquipIds = editingClassroomData.equipments.map(e => e.id);
|
||||
renderEquipmentCheckboxes(allEquipments, 'edit-equipment-checkboxes', 'edit-equipment-select-text', existingEquipIds);
|
||||
|
||||
hideAlert('edit-classroom-alert');
|
||||
modalEditClassroom.classList.add('open');
|
||||
} catch (e) {
|
||||
alert('Ошибка загрузки данных аудитории');
|
||||
}
|
||||
}
|
||||
|
||||
modalEditClassroomClose.addEventListener('click', () => {
|
||||
modalEditClassroom.classList.remove('open');
|
||||
});
|
||||
|
||||
modalEditClassroom.addEventListener('click', (e) => {
|
||||
if (e.target === modalEditClassroom) {
|
||||
modalEditClassroom.classList.remove('open');
|
||||
}
|
||||
});
|
||||
|
||||
editClassroomForm.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
hideAlert('edit-classroom-alert');
|
||||
const id = document.getElementById('edit-classroom-id').value;
|
||||
const name = document.getElementById('edit-classroom-name').value.trim();
|
||||
const capacity = parseInt(document.getElementById('edit-classroom-capacity').value, 10);
|
||||
|
||||
const checkedBoxes = Array.from(editEquipmentCheckboxes.querySelectorAll('input:checked'));
|
||||
const equipmentIds = checkedBoxes.map(chk => parseInt(chk.value, 10));
|
||||
|
||||
if (!name || isNaN(capacity)) { showAlert('edit-classroom-alert', 'Заполните обязательные поля', 'error'); return; }
|
||||
|
||||
try {
|
||||
const data = await api.put('/api/classrooms/' + id, {
|
||||
name,
|
||||
capacity,
|
||||
equipmentIds,
|
||||
isAvailable: editingClassroomData.isAvailable
|
||||
});
|
||||
modalEditClassroom.classList.remove('open');
|
||||
// We show alert on the main create form area or we could use toast
|
||||
showAlert('create-classroom-alert', `Аудитория "${escapeHtml(data.name)}" обновлена`, 'success');
|
||||
loadClassrooms();
|
||||
} catch (e) {
|
||||
showAlert('edit-classroom-alert', e.message || 'Ошибка обновления', 'error');
|
||||
}
|
||||
});
|
||||
|
||||
loadInitialData();
|
||||
}
|
||||
71
frontend/admin/js/views/edu-forms.js
Normal file
71
frontend/admin/js/views/edu-forms.js
Normal file
@@ -0,0 +1,71 @@
|
||||
import { api } from '../api.js';
|
||||
import { escapeHtml, showAlert, hideAlert } from '../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();
|
||||
}
|
||||
88
frontend/admin/js/views/equipments.js
Normal file
88
frontend/admin/js/views/equipments.js
Normal file
@@ -0,0 +1,88 @@
|
||||
import { api } from '../api.js';
|
||||
import { escapeHtml, showAlert, hideAlert, updateSelectText } from '../utils.js';
|
||||
|
||||
export let allEquipments = [];
|
||||
|
||||
export async function fetchEquipments() {
|
||||
try {
|
||||
allEquipments = await api.get('/api/equipments');
|
||||
return allEquipments;
|
||||
} catch (e) {
|
||||
console.error("Failed to fetch equipments", e);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
export function renderEquipmentCheckboxes(equipments, containerId, textId, checkedIds = []) {
|
||||
const container = document.getElementById(containerId);
|
||||
if (!container) return;
|
||||
if (!equipments.length) {
|
||||
container.innerHTML = '<p class="text-muted"><small>Нет доступного оборудования</small></p>';
|
||||
return;
|
||||
}
|
||||
container.innerHTML = equipments.map(eq => {
|
||||
const isChecked = checkedIds.includes(eq.id) ? 'checked' : '';
|
||||
return `
|
||||
<label class="checkbox-item">
|
||||
<input type="checkbox" value="${eq.id}" ${isChecked}> ${escapeHtml(eq.name)}
|
||||
</label>
|
||||
`}).join('');
|
||||
updateSelectText(containerId, textId);
|
||||
}
|
||||
|
||||
export async function initEquipments() {
|
||||
const equipmentsTbody = document.getElementById('equipments-tbody');
|
||||
const createEquipmentForm = document.getElementById('create-equipment-form');
|
||||
|
||||
async function loadEquipments() {
|
||||
try {
|
||||
const equipments = await fetchEquipments();
|
||||
renderEquipments(equipments);
|
||||
} catch (e) {
|
||||
if (equipmentsTbody) equipmentsTbody.innerHTML = '<tr><td colspan="3" class="loading-row">Ошибка загрузки</td></tr>';
|
||||
}
|
||||
}
|
||||
|
||||
function renderEquipments(equipments) {
|
||||
if (!equipments || !equipments.length) {
|
||||
equipmentsTbody.innerHTML = '<tr><td colspan="3" class="loading-row">Нет оборудования</td></tr>';
|
||||
return;
|
||||
}
|
||||
equipmentsTbody.innerHTML = equipments.map(eq => `
|
||||
<tr>
|
||||
<td>${eq.id}</td>
|
||||
<td>${escapeHtml(eq.name)}</td>
|
||||
<td><button class="btn-delete" data-id="${eq.id}">Удалить</button></td>
|
||||
</tr>`).join('');
|
||||
}
|
||||
|
||||
createEquipmentForm.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
hideAlert('create-equipment-alert');
|
||||
const name = document.getElementById('new-equipment-name').value.trim();
|
||||
if (!name) { showAlert('create-equipment-alert', 'Введите название', 'error'); return; }
|
||||
|
||||
try {
|
||||
const data = await api.post('/api/equipments', { name });
|
||||
showAlert('create-equipment-alert', `Оборудование "${escapeHtml(data.name)}" добавлено`, 'success');
|
||||
createEquipmentForm.reset();
|
||||
loadEquipments();
|
||||
} catch (e) {
|
||||
showAlert('create-equipment-alert', e.message || 'Ошибка создания', 'error');
|
||||
}
|
||||
});
|
||||
|
||||
equipmentsTbody.addEventListener('click', async (e) => {
|
||||
const btn = e.target.closest('.btn-delete');
|
||||
if (!btn) return;
|
||||
if (!confirm('Удалить оборудование?')) return;
|
||||
try {
|
||||
await api.delete('/api/equipments/' + btn.dataset.id);
|
||||
loadEquipments();
|
||||
} catch (e) {
|
||||
alert(e.message || 'Ошибка удаления');
|
||||
}
|
||||
});
|
||||
|
||||
loadEquipments();
|
||||
}
|
||||
108
frontend/admin/js/views/groups.js
Normal file
108
frontend/admin/js/views/groups.js
Normal file
@@ -0,0 +1,108 @@
|
||||
import { api } from '../api.js';
|
||||
import { escapeHtml, showAlert, hideAlert } from '../utils.js';
|
||||
import { fetchEducationForms } from './edu-forms.js';
|
||||
|
||||
export async function initGroups() {
|
||||
const groupsTbody = document.getElementById('groups-tbody');
|
||||
const createGroupForm = document.getElementById('create-group-form');
|
||||
const newGroupEfSelect = document.getElementById('new-group-ef');
|
||||
const filterEfSelect = document.getElementById('filter-ef');
|
||||
|
||||
let allGroups = [];
|
||||
let educationForms = [];
|
||||
|
||||
async function loadInitialData() {
|
||||
try {
|
||||
educationForms = await fetchEducationForms();
|
||||
populateEfSelects(educationForms);
|
||||
await loadGroups();
|
||||
} catch (e) {
|
||||
groupsTbody.innerHTML = '<tr><td colspan="4" class="loading-row">Ошибка загрузки данных</td></tr>';
|
||||
}
|
||||
}
|
||||
|
||||
async function loadGroups() {
|
||||
try {
|
||||
allGroups = await api.get('/api/groups');
|
||||
applyGroupFilter();
|
||||
} catch (e) {
|
||||
groupsTbody.innerHTML = '<tr><td colspan="4" class="loading-row">Ошибка загрузки</td></tr>';
|
||||
}
|
||||
}
|
||||
|
||||
function applyGroupFilter() {
|
||||
const filterId = filterEfSelect.value;
|
||||
const filtered = filterId
|
||||
? allGroups.filter(g => g.educationFormId == filterId)
|
||||
: allGroups;
|
||||
renderGroups(filtered);
|
||||
}
|
||||
|
||||
filterEfSelect.addEventListener('change', applyGroupFilter);
|
||||
|
||||
function populateEfSelects(forms) {
|
||||
// Group creation select
|
||||
const currentVal = newGroupEfSelect.value;
|
||||
newGroupEfSelect.innerHTML = forms.map(ef =>
|
||||
`<option value="${ef.id}">${escapeHtml(ef.name)}</option>`
|
||||
).join('');
|
||||
if (currentVal && forms.find(f => f.id == currentVal)) {
|
||||
newGroupEfSelect.value = currentVal;
|
||||
}
|
||||
|
||||
// Filter select
|
||||
const currentFilter = filterEfSelect.value;
|
||||
filterEfSelect.innerHTML = '<option value="">Все формы</option>' +
|
||||
forms.map(ef =>
|
||||
`<option value="${ef.id}">${escapeHtml(ef.name)}</option>`
|
||||
).join('');
|
||||
if (currentFilter) filterEfSelect.value = currentFilter;
|
||||
}
|
||||
|
||||
function renderGroups(groups) {
|
||||
if (!groups || !groups.length) {
|
||||
groupsTbody.innerHTML = '<tr><td colspan="4" class="loading-row">Нет групп</td></tr>';
|
||||
return;
|
||||
}
|
||||
groupsTbody.innerHTML = groups.map(g => `
|
||||
<tr>
|
||||
<td>${g.id}</td>
|
||||
<td>${escapeHtml(g.name)}</td>
|
||||
<td><span class="badge badge-ef">${escapeHtml(g.educationFormName)}</span></td>
|
||||
<td><button class="btn-delete" data-id="${g.id}">Удалить</button></td>
|
||||
</tr>`).join('');
|
||||
}
|
||||
|
||||
createGroupForm.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
hideAlert('create-group-alert');
|
||||
const name = document.getElementById('new-group-name').value.trim();
|
||||
const educationFormId = newGroupEfSelect.value;
|
||||
|
||||
if (!name) { showAlert('create-group-alert', 'Введите название группы', 'error'); return; }
|
||||
if (!educationFormId) { showAlert('create-group-alert', 'Выберите форму обучения', 'error'); return; }
|
||||
|
||||
try {
|
||||
const data = await api.post('/api/groups', { name, educationFormId: Number(educationFormId) });
|
||||
showAlert('create-group-alert', `Группа "${escapeHtml(data.name)}" создана`, 'success');
|
||||
createGroupForm.reset();
|
||||
loadGroups();
|
||||
} catch (e) {
|
||||
showAlert('create-group-alert', e.message || 'Ошибка создания', 'error');
|
||||
}
|
||||
});
|
||||
|
||||
groupsTbody.addEventListener('click', async (e) => {
|
||||
const btn = e.target.closest('.btn-delete');
|
||||
if (!btn) return;
|
||||
if (!confirm('Удалить группу?')) return;
|
||||
try {
|
||||
await api.delete('/api/groups/' + btn.dataset.id);
|
||||
loadGroups();
|
||||
} catch (e) {
|
||||
alert(e.message || 'Ошибка удаления');
|
||||
}
|
||||
});
|
||||
|
||||
loadInitialData();
|
||||
}
|
||||
153
frontend/admin/js/views/subjects.js
Normal file
153
frontend/admin/js/views/subjects.js
Normal file
@@ -0,0 +1,153 @@
|
||||
import { api } from '../api.js';
|
||||
import { escapeHtml, showAlert, hideAlert } from '../utils.js';
|
||||
|
||||
export async function initSubjects() {
|
||||
const subjectsTbody = document.getElementById('subjects-tbody');
|
||||
const createSubjectForm = document.getElementById('create-subject-form');
|
||||
|
||||
const assignTeacherForm = document.getElementById('assign-teacher-form');
|
||||
const assignTeacherSelect = document.getElementById('assign-teacher-select');
|
||||
const assignSubjectSelect = document.getElementById('assign-subject-select');
|
||||
const teacherSubjectsTbody = document.getElementById('teacher-subjects-tbody');
|
||||
|
||||
let allSubjects = [];
|
||||
let allTeachers = [];
|
||||
|
||||
async function loadInitialData() {
|
||||
await Promise.all([loadSubjects(), loadTeachers()]);
|
||||
await loadTeacherSubjects();
|
||||
}
|
||||
|
||||
async function loadSubjects() {
|
||||
try {
|
||||
allSubjects = await api.get('/api/subjects');
|
||||
renderSubjects(allSubjects);
|
||||
populateSubjectSelect(allSubjects);
|
||||
} catch (e) {
|
||||
if (subjectsTbody) subjectsTbody.innerHTML = '<tr><td colspan="3" class="loading-row">Ошибка загрузки</td></tr>';
|
||||
}
|
||||
}
|
||||
|
||||
function renderSubjects(subjects) {
|
||||
if (!subjects || !subjects.length) {
|
||||
subjectsTbody.innerHTML = '<tr><td colspan="3" class="loading-row">Нет дисциплин</td></tr>';
|
||||
return;
|
||||
}
|
||||
subjectsTbody.innerHTML = subjects.map(s => `
|
||||
<tr>
|
||||
<td>${s.id}</td>
|
||||
<td>${escapeHtml(s.name)}</td>
|
||||
<td><button class="btn-delete" data-id="${s.id}">Удалить</button></td>
|
||||
</tr>`).join('');
|
||||
}
|
||||
|
||||
function populateSubjectSelect(subjects) {
|
||||
if (!assignSubjectSelect) return;
|
||||
const currentVal = assignSubjectSelect.value;
|
||||
assignSubjectSelect.innerHTML = '<option value="">Выберите дисциплину</option>' +
|
||||
subjects.map(s => `<option value="${s.id}">${escapeHtml(s.name)}</option>`).join('');
|
||||
if (currentVal && subjects.find(s => s.id == currentVal)) {
|
||||
assignSubjectSelect.value = currentVal;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadTeachers() {
|
||||
try {
|
||||
allTeachers = await api.get('/api/users/teachers');
|
||||
populateTeacherSelect(allTeachers);
|
||||
} catch (e) {
|
||||
if (assignTeacherSelect) assignTeacherSelect.innerHTML = '<option value="">Ошибка загрузки</option>';
|
||||
}
|
||||
}
|
||||
|
||||
function populateTeacherSelect(teachers) {
|
||||
if (!assignTeacherSelect) return;
|
||||
const currentVal = assignTeacherSelect.value;
|
||||
if (!teachers || !teachers.length) {
|
||||
assignTeacherSelect.innerHTML = '<option value="">Нет преподавателей</option>';
|
||||
return;
|
||||
}
|
||||
assignTeacherSelect.innerHTML = '<option value="">Выберите преподавателя</option>' +
|
||||
teachers.map(t => `<option value="${t.id}">${escapeHtml(t.username)}</option>`).join('');
|
||||
if (currentVal && teachers.find(t => t.id == currentVal)) {
|
||||
assignTeacherSelect.value = currentVal;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadTeacherSubjects() {
|
||||
try {
|
||||
const tsData = await api.get('/api/teacher-subjects');
|
||||
renderTeacherSubjects(tsData);
|
||||
} catch (e) {
|
||||
if (teacherSubjectsTbody) teacherSubjectsTbody.innerHTML = '<tr><td colspan="3" class="loading-row">Ошибка загрузки</td></tr>';
|
||||
}
|
||||
}
|
||||
|
||||
function renderTeacherSubjects(tsArray) {
|
||||
if (!tsArray || !tsArray.length) {
|
||||
teacherSubjectsTbody.innerHTML = '<tr><td colspan="3" class="loading-row">Нет привязок</td></tr>';
|
||||
return;
|
||||
}
|
||||
teacherSubjectsTbody.innerHTML = tsArray.map(ts => `
|
||||
<tr>
|
||||
<td>${escapeHtml(ts.username)}</td>
|
||||
<td>${escapeHtml(ts.subjectName)}</td>
|
||||
<td><button class="btn-delete" data-user-id="${ts.userId}" data-subject-id="${ts.subjectId}">Удалить</button></td>
|
||||
</tr>`).join('');
|
||||
}
|
||||
|
||||
createSubjectForm.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
hideAlert('create-subject-alert');
|
||||
const name = document.getElementById('new-subject-name').value.trim();
|
||||
if (!name) { showAlert('create-subject-alert', 'Введите название', 'error'); return; }
|
||||
|
||||
try {
|
||||
const data = await api.post('/api/subjects', { name });
|
||||
showAlert('create-subject-alert', `Дисциплина "${escapeHtml(data.name)}" добавлена`, 'success');
|
||||
createSubjectForm.reset();
|
||||
loadSubjects();
|
||||
} catch (e) { showAlert('create-subject-alert', e.message || 'Ошибка создания', 'error'); }
|
||||
});
|
||||
|
||||
subjectsTbody.addEventListener('click', async (e) => {
|
||||
const btn = e.target.closest('.btn-delete');
|
||||
if (!btn) return;
|
||||
if (!confirm('Удалить дисциплину?')) return;
|
||||
try {
|
||||
await api.delete('/api/subjects/' + btn.dataset.id);
|
||||
loadSubjects();
|
||||
loadTeacherSubjects(); // May have deleted a subject that was assigned
|
||||
} catch (e) { alert(e.message || 'Ошибка удаления'); }
|
||||
});
|
||||
|
||||
assignTeacherForm.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
hideAlert('assign-teacher-alert');
|
||||
const userId = assignTeacherSelect.value;
|
||||
const subjectId = assignSubjectSelect.value;
|
||||
if (!userId) { showAlert('assign-teacher-alert', 'Выберите преподавателя', 'error'); return; }
|
||||
if (!subjectId) { showAlert('assign-teacher-alert', 'Выберите дисциплину', 'error'); return; }
|
||||
|
||||
try {
|
||||
await api.post('/api/teacher-subjects', { userId: Number(userId), subjectId: Number(subjectId) });
|
||||
showAlert('assign-teacher-alert', 'Привязка создана', 'success');
|
||||
loadTeacherSubjects();
|
||||
} catch (e) { showAlert('assign-teacher-alert', e.message || 'Ошибка привязки', 'error'); }
|
||||
});
|
||||
|
||||
teacherSubjectsTbody.addEventListener('click', async (e) => {
|
||||
const btn = e.target.closest('.btn-delete');
|
||||
if (!btn) return;
|
||||
if (!confirm('Удалить привязку?')) return;
|
||||
try {
|
||||
await api.delete('/api/teacher-subjects', {
|
||||
userId: Number(btn.dataset.userId),
|
||||
subjectId: Number(btn.dataset.subjectId)
|
||||
});
|
||||
loadTeacherSubjects();
|
||||
} catch (e) { alert(e.message || 'Ошибка удаления'); }
|
||||
});
|
||||
|
||||
loadInitialData();
|
||||
}
|
||||
67
frontend/admin/js/views/users.js
Normal file
67
frontend/admin/js/views/users.js
Normal file
@@ -0,0 +1,67 @@
|
||||
import { api } from '../api.js';
|
||||
import { escapeHtml, showAlert, hideAlert } from '../utils.js';
|
||||
|
||||
const ROLE_LABELS = { ADMIN: 'Администратор', TEACHER: 'Преподаватель', STUDENT: 'Студент' };
|
||||
const ROLE_BADGE = { ADMIN: 'badge-admin', TEACHER: 'badge-teacher', STUDENT: 'badge-student' };
|
||||
|
||||
export async function initUsers() {
|
||||
const usersTbody = document.getElementById('users-tbody');
|
||||
const createForm = document.getElementById('create-form');
|
||||
const createAlert = document.getElementById('create-alert');
|
||||
|
||||
async function loadUsers() {
|
||||
try {
|
||||
const users = await api.get('/api/users');
|
||||
renderUsers(users);
|
||||
} catch (e) {
|
||||
usersTbody.innerHTML = '<tr><td colspan="4" class="loading-row">Ошибка загрузки: ' + escapeHtml(e.message) + '</td></tr>';
|
||||
}
|
||||
}
|
||||
|
||||
function renderUsers(users) {
|
||||
if (!users || !users.length) {
|
||||
usersTbody.innerHTML = '<tr><td colspan="4" class="loading-row">Нет пользователей</td></tr>';
|
||||
return;
|
||||
}
|
||||
usersTbody.innerHTML = users.map(u => `
|
||||
<tr>
|
||||
<td>${u.id}</td>
|
||||
<td>${escapeHtml(u.username)}</td>
|
||||
<td><span class="badge ${ROLE_BADGE[u.role] || ''}">${ROLE_LABELS[u.role] || escapeHtml(u.role)}</span></td>
|
||||
<td><button class="btn-delete" data-id="${u.id}">Удалить</button></td>
|
||||
</tr>`).join('');
|
||||
}
|
||||
|
||||
createForm.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
hideAlert('create-alert');
|
||||
const username = document.getElementById('new-username').value.trim();
|
||||
const password = document.getElementById('new-password').value;
|
||||
const role = document.getElementById('new-role').value;
|
||||
if (!username || !password) { showAlert('create-alert', 'Заполните все поля', 'error'); return; }
|
||||
|
||||
try {
|
||||
const data = await api.post('/api/users', { username, password, role });
|
||||
showAlert('create-alert', `Пользователь "${escapeHtml(data.username)}" создан`, 'success');
|
||||
createForm.reset();
|
||||
loadUsers();
|
||||
} catch (e) {
|
||||
showAlert('create-alert', e.message || 'Ошибка соединения', 'error');
|
||||
}
|
||||
});
|
||||
|
||||
usersTbody.addEventListener('click', async (e) => {
|
||||
const btn = e.target.closest('.btn-delete');
|
||||
if (!btn) return;
|
||||
if (!confirm('Удалить пользователя?')) return;
|
||||
try {
|
||||
await api.delete('/api/users/' + btn.dataset.id);
|
||||
loadUsers();
|
||||
} catch (e) {
|
||||
alert(e.message || 'Ошибка удаления');
|
||||
}
|
||||
});
|
||||
|
||||
// Initial load
|
||||
loadUsers();
|
||||
}
|
||||
109
frontend/admin/views/classrooms.html
Normal file
109
frontend/admin/views/classrooms.html
Normal file
@@ -0,0 +1,109 @@
|
||||
<!-- ===== Classrooms Tab ===== -->
|
||||
<div class="card create-card">
|
||||
<h2>Новая аудитория</h2>
|
||||
<form id="create-classroom-form">
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="new-classroom-name">Номер / Название</label>
|
||||
<input type="text" id="new-classroom-name" placeholder="101 Ленинская" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="new-classroom-capacity">Вместимость (чел.)</label>
|
||||
<input type="number" id="new-classroom-capacity" placeholder="30" min="1" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row" style="margin-top: 1rem;">
|
||||
<div class="form-group" style="flex: 2;">
|
||||
<label>Оборудование</label>
|
||||
<div class="custom-multi-select">
|
||||
<div class="select-box" id="equipment-select-box">
|
||||
<span class="select-text" id="equipment-select-text">Выберите оборудование...</span>
|
||||
<svg class="dropdown-icon" width="12" height="8" viewBox="0 0 12 8" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 1.5L6 6.5L11 1.5" stroke="#9ca3af" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="dropdown-menu" id="equipment-dropdown-menu">
|
||||
<div id="equipment-checkboxes" class="checkbox-group-vertical">
|
||||
<!-- Подгружается через JS -->
|
||||
<p class="text-muted"><small>Загрузка...</small></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group" style="display: flex; align-items: flex-end;">
|
||||
<button type="submit" class="btn-primary">Добавить</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-alert" id="create-classroom-alert" role="alert"></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h2>Список аудиторий</h2>
|
||||
<div class="table-wrap">
|
||||
<table id="classrooms-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Название</th>
|
||||
<th>Вместимость</th>
|
||||
<th>Оборудование</th>
|
||||
<th>Статус</th>
|
||||
<th style="text-align: right;">Действия</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="classrooms-tbody">
|
||||
<tr>
|
||||
<td colspan="6" class="loading-row">Загрузка...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Edit Classroom Modal -->
|
||||
<div class="modal-overlay" id="modal-edit-classroom">
|
||||
<div class="modal-content card">
|
||||
<h2>Редактировать аудиторию</h2>
|
||||
<button class="modal-close" id="modal-edit-classroom-close">×</button>
|
||||
<form id="edit-classroom-form">
|
||||
<input type="hidden" id="edit-classroom-id">
|
||||
<div class="form-row" style="margin-top: 1rem;">
|
||||
<div class="form-group">
|
||||
<label for="edit-classroom-name">Номер / Название</label>
|
||||
<input type="text" id="edit-classroom-name" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="edit-classroom-capacity">Вместимость (чел.)</label>
|
||||
<input type="number" id="edit-classroom-capacity" min="1" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row" style="margin-top: 1rem;">
|
||||
<div class="form-group" style="flex: 2;">
|
||||
<label>Оборудование</label>
|
||||
<div class="custom-multi-select">
|
||||
<div class="select-box" id="edit-equipment-select-box">
|
||||
<span class="select-text" id="edit-equipment-select-text">Выберите оборудование...</span>
|
||||
<svg class="dropdown-icon" width="12" height="8" viewBox="0 0 12 8" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 1.5L6 6.5L11 1.5" stroke="#9ca3af" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="dropdown-menu" id="edit-equipment-dropdown-menu">
|
||||
<div id="edit-equipment-checkboxes" class="checkbox-group-vertical">
|
||||
<!-- Подгружается через JS -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group" style="display: flex; align-items: flex-end;">
|
||||
<button type="submit" class="btn-primary" style="width: 100%;">Сохранить</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-alert" id="edit-classroom-alert" role="alert"></div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
34
frontend/admin/views/edu-forms.html
Normal file
34
frontend/admin/views/edu-forms.html
Normal file
@@ -0,0 +1,34 @@
|
||||
<!-- ===== Education Forms Tab ===== -->
|
||||
<div class="card create-card">
|
||||
<h2>Новая форма обучения</h2>
|
||||
<form id="create-ef-form">
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="new-ef-name">Название</label>
|
||||
<input type="text" id="new-ef-name" placeholder="Бакалавриат" required>
|
||||
</div>
|
||||
<button type="submit" class="btn-primary">Создать</button>
|
||||
</div>
|
||||
<div class="form-alert" id="create-ef-alert" role="alert"></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h2>Все формы обучения</h2>
|
||||
<div class="table-wrap">
|
||||
<table id="ef-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Название</th>
|
||||
<th>Действия</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="ef-tbody">
|
||||
<tr>
|
||||
<td colspan="3" class="loading-row">Загрузка...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
34
frontend/admin/views/equipments.html
Normal file
34
frontend/admin/views/equipments.html
Normal file
@@ -0,0 +1,34 @@
|
||||
<!-- ===== Equipments Tab ===== -->
|
||||
<div class="card create-card">
|
||||
<h2>Новое оборудование</h2>
|
||||
<form id="create-equipment-form">
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="new-equipment-name">Название оборудования</label>
|
||||
<input type="text" id="new-equipment-name" placeholder="Проектор" required>
|
||||
</div>
|
||||
<button type="submit" class="btn-primary">Добавить</button>
|
||||
</div>
|
||||
<div class="form-alert" id="create-equipment-alert" role="alert"></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h2>Справочник оборудования</h2>
|
||||
<div class="table-wrap">
|
||||
<table id="equipments-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Название</th>
|
||||
<th>Действия</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="equipments-tbody">
|
||||
<tr>
|
||||
<td colspan="3" class="loading-row">Загрузка...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
49
frontend/admin/views/groups.html
Normal file
49
frontend/admin/views/groups.html
Normal file
@@ -0,0 +1,49 @@
|
||||
<!-- ===== Groups Tab ===== -->
|
||||
<div class="card create-card">
|
||||
<h2>Новая группа</h2>
|
||||
<form id="create-group-form">
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="new-group-name">Название группы</label>
|
||||
<input type="text" id="new-group-name" placeholder="ИВТ-21-1" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="new-group-ef">Форма обучения</label>
|
||||
<select id="new-group-ef">
|
||||
<option value="">Загрузка...</option>
|
||||
</select>
|
||||
</div>
|
||||
<button type="submit" class="btn-primary">Создать</button>
|
||||
</div>
|
||||
<div class="form-alert" id="create-group-alert" role="alert"></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header-row">
|
||||
<h2>Все группы</h2>
|
||||
<div class="filter-row">
|
||||
<label for="filter-ef">Фильтр:</label>
|
||||
<select id="filter-ef">
|
||||
<option value="">Все формы</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table id="groups-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Название</th>
|
||||
<th>Форма обучения</th>
|
||||
<th>Действия</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="groups-tbody">
|
||||
<tr>
|
||||
<td colspan="4" class="loading-row">Загрузка...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
76
frontend/admin/views/subjects.html
Normal file
76
frontend/admin/views/subjects.html
Normal file
@@ -0,0 +1,76 @@
|
||||
<!-- ===== Subjects Tab ===== -->
|
||||
<div class="card create-card">
|
||||
<h2>Новая дисциплина</h2>
|
||||
<form id="create-subject-form">
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="new-subject-name">Название дисциплины</label>
|
||||
<input type="text" id="new-subject-name" placeholder="Высшая математика" required>
|
||||
</div>
|
||||
<button type="submit" class="btn-primary">Добавить</button>
|
||||
</div>
|
||||
<div class="form-alert" id="create-subject-alert" role="alert"></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="card create-card">
|
||||
<h2>Привязка преподавателя к дисциплине</h2>
|
||||
<form id="assign-teacher-form">
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="assign-teacher-select">Преподаватель</label>
|
||||
<select id="assign-teacher-select">
|
||||
<option value="">Загрузка...</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="assign-subject-select">Дисциплина</label>
|
||||
<select id="assign-subject-select">
|
||||
<option value="">Загрузка...</option>
|
||||
</select>
|
||||
</div>
|
||||
<button type="submit" class="btn-primary">Привязать</button>
|
||||
</div>
|
||||
<div class="form-alert" id="assign-teacher-alert" role="alert"></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h2>Все дисциплины</h2>
|
||||
<div class="table-wrap">
|
||||
<table id="subjects-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Название</th>
|
||||
<th>Действия</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="subjects-tbody">
|
||||
<tr>
|
||||
<td colspan="3" class="loading-row">Загрузка...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h2>Привязки преподавателей</h2>
|
||||
<div class="table-wrap">
|
||||
<table id="teacher-subjects-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Преподаватель</th>
|
||||
<th>Дисциплина</th>
|
||||
<th>Действия</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="teacher-subjects-tbody">
|
||||
<tr>
|
||||
<td colspan="3" class="loading-row">Загрузка...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
47
frontend/admin/views/users.html
Normal file
47
frontend/admin/views/users.html
Normal file
@@ -0,0 +1,47 @@
|
||||
<!-- ===== Users Tab ===== -->
|
||||
<div class="card create-card">
|
||||
<h2>Новый пользователь</h2>
|
||||
<form id="create-form">
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="new-username">Имя пользователя</label>
|
||||
<input type="text" id="new-username" placeholder="username" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="new-password">Пароль</label>
|
||||
<input type="text" id="new-password" placeholder="password" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="new-role">Роль</label>
|
||||
<select id="new-role">
|
||||
<option value="STUDENT">Студент</option>
|
||||
<option value="TEACHER">Преподаватель</option>
|
||||
<option value="ADMIN">Администратор</option>
|
||||
</select>
|
||||
</div>
|
||||
<button type="submit" class="btn-primary">Создать</button>
|
||||
</div>
|
||||
<div class="form-alert" id="create-alert" role="alert"></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h2>Все пользователи</h2>
|
||||
<div class="table-wrap">
|
||||
<table id="users-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Имя пользователя</th>
|
||||
<th>Роль</th>
|
||||
<th>Действия</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="users-tbody">
|
||||
<tr>
|
||||
<td colspan="4" class="loading-row">Загрузка...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user