Refactor admin frontend into modular SPA

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