Refactor admin frontend into modular SPA

frontend/admin/js/views/classrooms.js

@@ -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();
+}

frontend/admin/js/views/edu-forms.js

@@ -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();
+}

frontend/admin/js/views/equipments.js

@@ -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();
+}

frontend/admin/js/views/groups.js

@@ -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();
+}

frontend/admin/js/views/subjects.js

@@ -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();
+}

frontend/admin/js/views/users.js

@@ -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();
+}