feat(admin): add classroom edit modal

frontend/admin/admin.css

@@ -145,6 +145,74 @@ body {
     transform: scale(1.1);
 }
 
+/* Checkbox list styling */
+.checkbox-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+    padding: 8px 0;
+}
+
+.checkbox-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 0.9rem;
+    color: var(--text-base);
+    cursor: pointer;
+}
+
+.checkbox-item input[type="checkbox"] {
+    cursor: pointer;
+    width: 16px;
+    height: 16px;
+    accent-color: var(--primary-color);
+}
+
+/* Classroom Status Badges */
+.badge-available {
+    background-color: var(--success-bg);
+    color: var(--success-color);
+}
+
+.badge-unavailable {
+    background-color: var(--error-bg);
+    color: var(--error-color);
+}
+
+.status-cell {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.btn-icon-toggle {
+    background: var(--bg-body);
+    border: 1px solid var(--border-color);
+    color: var(--text-muted);
+    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(--card-bg);
+    border-color: var(--primary-color);
+    color: var(--primary-color);
+    transform: rotate(45deg);
+    box-shadow: 0 0 10px rgba(99, 102, 241, 0.2);
+}
+
+.btn-icon-toggle svg {
+    display: block;
+}
+
 .nav-item.active {
     background: rgba(99, 102, 241, 0.12);
     color: var(--accent-hover);
@@ -615,41 +683,60 @@ tbody tr:hover {
 }
 
 /* ===== Theme Toggle Button ===== */
-.theme-toggle {
-    width: 38px;
-    height: 38px;
-    border-radius: 50%;
-    background: var(--bg-input);
-    border: 1px solid var(--bg-card-border);
-    color: var(--text-primary);
-    cursor: pointer;
-    display: flex;
+
+/* ===== Modals ===== */
+.modal-overlay {
+    display: none;
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 1000;
+    backdrop-filter: blur(2px);
     align-items: center;
     justify-content: center;
-    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
-    flex-shrink: 0;
+    padding: 1rem;
 }
 
-.theme-toggle svg {
-    width: 18px;
-    height: 18px;
-    transition: transform 0.4s ease;
+.modal-overlay.open {
+    display: flex;
+    animation: fadeIn 0.2s ease;
 }
 
-.theme-toggle:hover {
-    transform: scale(1.1);
-    box-shadow: 0 4px 16px var(--accent-glow);
+.modal-content {
+    background: var(--bg-primary);
+    border: 1px solid var(--bg-card-border);
+    border-radius: var(--radius-md);
+    padding: 2rem;
+    width: 100%;
+    max-width: 600px;
+    position: relative;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
 }
 
-.theme-toggle:active {
-    transform: scale(0.95);
+.modal-content h2 {
+    font-size: 1.2rem;
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+    color: var(--text-primary);
+    border-bottom: 1px solid var(--bg-card-border);
+    padding-bottom: 1rem;
 }
 
-.theme-toggle--fixed {
-    position: fixed;
-    top: 1.25rem;
-    right: 1.25rem;
-    z-index: 100;
+.modal-close {
+    position: absolute;
+    top: 1.5rem;
+    right: 1.5rem;
+    background: none;
+    border: none;
+    color: var(--text-secondary);
+    font-size: 1.5rem;
+    cursor: pointer;
+    line-height: 1;
+    transition: color var(--transition);
+}
+
+.modal-close:hover {
+    color: var(--error);
 }
 
 /* ===== Responsive ===== */

frontend/admin/admin.js

@@ -57,18 +57,37 @@
     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');
+
     const navItems = document.querySelectorAll('.nav-item[data-tab]');
     const tabContents = document.querySelectorAll('.tab-content');
 
     // ---- State ----
     let allGroups = [];
     let allEducationForms = [];
+    let allEquipments = [];
 
     // ---- Tab Switching ----
     const TAB_TITLES = {
         users: 'Управление пользователями',
         groups: 'Управление группами',
         'edu-forms': 'Формы обучения',
+        equipments: 'Оборудование',
+        classrooms: 'Аудитории'
     };
 
     navItems.forEach(item => {
@@ -91,6 +110,8 @@
         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()); }
 
         sidebar.classList.remove('open');
         sidebarOverlay.classList.remove('open');
@@ -365,6 +386,278 @@
         } 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('');
+    }
+
+    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();
+                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>';
+            }
+
+            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'); }
+    });
+
     // ============================================================
     //  LOGOUT & INIT
     // ============================================================

frontend/admin/index.html

@@ -59,6 +59,21 @@
                 </svg>
                 Формы обучения
             </a>
+            <a href="#" class="nav-item" data-tab="equipments">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                    stroke-linecap="round" stroke-linejoin="round">
+                    <rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect>
+                    <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path>
+                </svg>
+                Оборудование
+            </a>
+            <a href="#" class="nav-item" data-tab="classrooms">
+                <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="M3 3h18v18H3zM9 3v18M15 3v18M3 9h18M3 15h18" />
+                </svg>
+                Аудитории
+            </a>
         </nav>
         <div class="sidebar-footer">
             <button class="btn-logout" id="btn-logout">
@@ -225,6 +240,129 @@
                 </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">
+                        <div class="form-group" style="flex: 2;">
+                            <label>Оборудование</label>
+                            <div id="equipment-checkboxes" class="checkbox-group">
+                                <!-- Подгружается через JS -->
+                                <p class="text-muted"><small>Загрузка...</small></p>
+                            </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>
+
+        <!-- ===== 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">&times;</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 id="edit-equipment-checkboxes" class="checkbox-group">
+                                <!-- Подгружается через JS -->
+                            </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>