Зеркалирование "Создать занятие" в "Расписание занятий" из "Пользователи", визуальные изменения этих модалок

frontend/admin/js/views/schedule.js

@@ -1,5 +1,5 @@
 import { api } from '../api.js';
-import { escapeHtml } from '../utils.js';
+import { escapeHtml, showAlert, hideAlert } from '../utils.js';
 
 export async function initSchedule() {
     const tbody = document.getElementById('schedule-tbody');
@@ -20,7 +20,6 @@ export async function initSchedule() {
 
     // ===================== Фильтрация =====================
 
-    // Извлечение отображаемого значения поля для фильтрации
     function getDisplayValue(lesson, key) {
         switch (key) {
             case 'teacher':
@@ -38,20 +37,17 @@ export async function initSchedule() {
         }
     }
 
-    // Собрать уникальные значения из данных
     function getUniqueValues(key) {
         const vals = new Set();
         lessonsData.forEach(lesson => {
             vals.add(getDisplayValue(lesson, key));
         });
-        // Для дней — сортируем по порядку
         if (key === 'day') {
             return [...vals].sort((a, b) => (dayOrder[a.toLowerCase()] ?? 99) - (dayOrder[b.toLowerCase()] ?? 99));
         }
         return [...vals].sort((a, b) => a.localeCompare(b, 'ru'));
     }
 
-    // Применить все фильтры
     function applyFilters(lessons) {
         return lessons.filter(lesson => {
             for (const key of Object.keys(activeFilters)) {
@@ -79,7 +75,6 @@ export async function initSchedule() {
 
     function onDocumentClick(e) {
         if (currentPopup && !currentPopup.contains(e.target)) {
-            // Проверяем, не кликнули ли по иконке фильтра
             if (!e.target.closest('.filter-icon')) {
                 closePopup();
             }
@@ -87,7 +82,6 @@ export async function initSchedule() {
     }
 
     function openFilterPopup(th, filterKey) {
-        // Если уже открыт этот же — закрыть
         if (currentPopup && currentPopup.dataset.filterKey === filterKey) {
             closePopup();
             return;
@@ -97,19 +91,16 @@ export async function initSchedule() {
         const uniqueValues = getUniqueValues(filterKey);
         const currentFilter = activeFilters[filterKey];
 
-        // Создаём попап
         const popup = document.createElement('div');
         popup.className = 'filter-popup';
         popup.dataset.filterKey = filterKey;
 
-        // Поисковое поле
         const searchInput = document.createElement('input');
         searchInput.type = 'text';
         searchInput.className = 'filter-search';
         searchInput.placeholder = 'Поиск...';
         popup.appendChild(searchInput);
 
-        // Кнопки «Выбрать все» / «Сбросить»
         const btnRow = document.createElement('div');
         btnRow.className = 'filter-btn-row';
 
@@ -133,7 +124,6 @@ export async function initSchedule() {
         btnRow.appendChild(btnNone);
         popup.appendChild(btnRow);
 
-        // Список чекбоксов
         const listWrap = document.createElement('div');
         listWrap.className = 'filter-list';
 
@@ -146,7 +136,6 @@ export async function initSchedule() {
             const cb = document.createElement('input');
             cb.type = 'checkbox';
             cb.value = val;
-            // Если фильтр активен — отмечаем только выбранные; если нет — все отмечены
             cb.checked = currentFilter ? currentFilter.has(val) : true;
 
             const span = document.createElement('span');
@@ -160,7 +149,6 @@ export async function initSchedule() {
 
         popup.appendChild(listWrap);
 
-        // Кнопка «Применить»
         const btnApply = document.createElement('button');
         btnApply.className = 'filter-btn-apply';
         btnApply.textContent = 'Применить';
@@ -171,7 +159,6 @@ export async function initSchedule() {
                 if (cb.checked) selected.add(cb.value);
             });
 
-            // Если все выбраны — снимаем фильтр
             if (selected.size === uniqueValues.length) {
                 delete activeFilters[filterKey];
                 th.classList.remove('filter-active');
@@ -185,7 +172,6 @@ export async function initSchedule() {
         });
         popup.appendChild(btnApply);
 
-        // Поиск по чекбоксам
         searchInput.addEventListener('input', () => {
             const query = searchInput.value.toLowerCase();
             listWrap.querySelectorAll('.filter-item').forEach(item => {
@@ -194,28 +180,22 @@ export async function initSchedule() {
             });
         });
 
-        // Предотвращаем всплытие кликов внутри попапа (чтобы не срабатывала сортировка th)
         popup.addEventListener('click', (e) => e.stopPropagation());
         searchInput.addEventListener('click', (e) => e.stopPropagation());
 
-        // Позиционируем попап под th
         th.style.position = 'relative';
         th.appendChild(popup);
         currentPopup = popup;
 
-        // Фокус на поиск
         setTimeout(() => searchInput.focus(), 50);
 
-        // Закрытие по клику вне
         setTimeout(() => {
             document.addEventListener('click', onDocumentClick, true);
         }, 10);
     }
 
-    // Обработчики кликов по заголовкам с фильтрами (клик по всей ячейке)
     table.querySelectorAll('thead th.filterable').forEach(th => {
         th.addEventListener('click', (e) => {
-            // Не открываем попап при клике внутри самого попапа
             if (e.target.closest('.filter-popup')) return;
             const filterKey = th.dataset.filterKey;
             openFilterPopup(th, filterKey);
@@ -249,7 +229,6 @@ export async function initSchedule() {
             case 'week':
                 return (lesson.week || '').toLowerCase();
             case 'time': {
-                // Составной ключ: день + время для правильной сортировки
                 const d = (lesson.day || '').toLowerCase();
                 const dayNum = dayOrder[d] ?? 99;
                 const t = lesson.time || '99:99';
@@ -287,10 +266,8 @@ export async function initSchedule() {
         });
     }
 
-    // Навешиваем обработчики клика на заголовки (сортировка)
     table.querySelectorAll('thead th.sortable').forEach(th => {
         th.addEventListener('click', (e) => {
-            // Не сортируем, если кликнули по иконке фильтра или внутри попапа
             if (e.target.closest('.filter-icon') || e.target.closest('.filter-popup')) return;
 
             const key = th.dataset.sortKey;
@@ -310,7 +287,7 @@ export async function initSchedule() {
         });
     });
 
-    // ===================== Загрузка и рендер =====================
+    // ===================== Загрузка и рендер таблицы =====================
 
     async function loadSchedule() {
         try {
@@ -318,21 +295,20 @@ export async function initSchedule() {
             lessonsData = lessons;
             renderSchedule(lessons);
         } catch (e) {
-            tbody.innerHTML = `<tr><td colspan="8" class="loading-row">Ошибка загрузки: ${escapeHtml(e.message)}</td></tr>`;
+            tbody.innerHTML = `<tr><td colspan="11" class="loading-row">Ошибка загрузки: ${escapeHtml(e.message)}</td></tr>`;
         }
     }
 
     function renderSchedule(lessons) {
         if (!lessons || !lessons.length) {
-            tbody.innerHTML = '<tr><td colspan="8" class="loading-row">Нет занятий</td></tr>';
+            tbody.innerHTML = '<tr><td colspan="11" class="loading-row">Нет занятий</td></tr>';
             return;
         }
 
-        // Сначала фильтруем, потом сортируем
         const filtered = applyFilters(lessons);
 
         if (!filtered.length) {
-            tbody.innerHTML = '<tr><td colspan="8" class="loading-row">Нет занятий по выбранным фильтрам</td></tr>';
+            tbody.innerHTML = '<tr><td colspan="11" class="loading-row">Нет занятий по выбранным фильтрам</td></tr>';
             return;
         }
 
@@ -366,5 +342,343 @@ export async function initSchedule() {
         }).join('');
     }
 
-    await loadSchedule();
+    // ===================== Модалки добавления занятия =====================
+
+    const overlay = document.getElementById('sch-overlay');
+    const modalForm = document.getElementById('sch-modal-form');
+    const modalLessons = document.getElementById('sch-modal-lessons');
+    const btnAddLesson = document.getElementById('sch-btn-add-lesson');
+    const btnClose = document.getElementById('sch-modal-close');
+    const addForm = document.getElementById('sch-add-lesson-form');
+
+    const schTeacherSelect = document.getElementById('sch-teacher');
+    const schGroupSelect = document.getElementById('sch-group');
+    const schDisciplineSelect = document.getElementById('sch-discipline');
+    const schClassroomSelect = document.getElementById('sch-classroom');
+    const schDaySelect = document.getElementById('sch-day');
+    const schTimeSelect = document.getElementById('sch-time');
+    const schTypeSelect = document.getElementById('sch-type');
+    const schWeekUpper = document.getElementById('sch-week-upper');
+    const schWeekLower = document.getElementById('sch-week-lower');
+    const schFormatOffline = document.getElementById('sch-format-offline');
+
+    const schTeacherName = document.getElementById('sch-teacher-name');
+    const schLessonsContainer = document.getElementById('sch-lessons-container');
+
+    let groups = [];
+    let subjects = [];
+    let classrooms = [];
+    let teachers = [];
+
+    const weekdaysTimes = [
+        "8:00-9:30", "9:40-11:10", "11:40-13:10",
+        "13:20-14:50", "15:00-16:30", "16:50-18:20", "18:30-19:00"
+    ];
+    const saturdayTimes = [
+        "8:20-9:50", "10:00-11:30", "11:40-13:10", "13:20-14:50"
+    ];
+
+    // ===== Загрузка справочников =====
+    async function loadGroups() {
+        try {
+            groups = await api.get('/api/groups');
+            schGroupSelect.innerHTML = '<option value="">Выберите группу</option>' +
+                groups.map(g => {
+                    let text = escapeHtml(g.name);
+                    if (g.groupSize) text += ` (числ: ${g.groupSize} чел.)`;
+                    return `<option value="${g.id}">${text}</option>`;
+                }).join('');
+        } catch (e) { console.error('Ошибка загрузки групп:', e); }
+    }
+
+    async function loadSubjects() {
+        try {
+            subjects = await api.get('/api/subjects');
+            schDisciplineSelect.innerHTML = '<option value="">Выберите дисциплину</option>' +
+                subjects.map(s => `<option value="${s.id}">${escapeHtml(s.name)}</option>`).join('');
+        } catch (e) { console.error('Ошибка загрузки дисциплин:', e); }
+    }
+
+    async function loadClassrooms() {
+        try {
+            classrooms = await api.get('/api/classrooms');
+            renderClassroomOptions();
+        } catch (e) { console.error('Ошибка загрузки аудиторий:', e); }
+    }
+
+    async function loadTeachers() {
+        try {
+            teachers = await api.get('/api/users/teachers');
+            schTeacherSelect.innerHTML = '<option value="">Выберите преподавателя</option>' +
+                teachers.map(t => `<option value="${t.id}">${escapeHtml(t.fullName || t.username)}</option>`).join('');
+        } catch (e) { console.error('Ошибка загрузки преподавателей:', e); }
+    }
+
+    function renderClassroomOptions() {
+        if (!classrooms || classrooms.length === 0) {
+            schClassroomSelect.innerHTML = '<option value="">Нет доступных аудиторий</option>';
+            return;
+        }
+        const selectedGroupId = schGroupSelect.value;
+        const selectedGroup = groups?.find(g => g.id == selectedGroupId);
+        const groupSize = selectedGroup?.groupSize || 0;
+
+        schClassroomSelect.innerHTML = '<option value="">Выберите аудиторию</option>' +
+            classrooms.map(c => {
+                let text = escapeHtml(c.name);
+                if (c.capacity) text += ` (вместимость: ${c.capacity} чел.)`;
+                if (c.isAvailable === false) {
+                    text += ` ❌ Занята`;
+                } else if (selectedGroupId && groupSize > 0 && c.capacity && groupSize > c.capacity) {
+                    text += ` ⚠️ Недостаточно места`;
+                }
+                return `<option value="${c.id}">${text}</option>`;
+            }).join('');
+    }
+
+    schGroupSelect.addEventListener('change', () => renderClassroomOptions());
+
+    function updateTimeOptions(dayValue) {
+        let times = [];
+        if (dayValue === "Суббота") {
+            times = saturdayTimes;
+        } else if (dayValue && dayValue !== '') {
+            times = weekdaysTimes;
+        } else {
+            schTimeSelect.innerHTML = '<option value="">Сначала выберите день</option>';
+            schTimeSelect.disabled = true;
+            return;
+        }
+        schTimeSelect.innerHTML = '<option value="">Выберите время</option>' +
+            times.map(t => `<option value="${t}">${t}</option>`).join('');
+        schTimeSelect.disabled = false;
+    }
+
+    schDaySelect.addEventListener('change', function () {
+        updateTimeOptions(this.value);
+    });
+
+    // ===== Автозаполнение преподавателя из фильтра =====
+    function getFilteredTeacherId() {
+        const teacherFilter = activeFilters['teacher'];
+        if (teacherFilter && teacherFilter.size === 1) {
+            const teacherName = [...teacherFilter][0];
+            // Сопоставляем по username, fullName и их комбинациям
+            const match = teachers.find(t =>
+                t.username === teacherName ||
+                t.fullName === teacherName ||
+                (t.fullName || t.username) === teacherName
+            );
+            return match ? String(match.id) : '';
+        }
+        return '';
+    }
+
+    // ===== Загрузка занятий преподавателя =====
+    async function loadTeacherLessons(teacherId) {
+        const teacher = teachers.find(t => t.id == teacherId);
+        const name = teacher ? (teacher.fullName || teacher.username) : '';
+        schTeacherName.textContent = name
+            ? `Занятия преподавателя: ${name}`
+            : 'Занятия преподавателя';
+
+        modalLessons.style.display = '';
+        schLessonsContainer.innerHTML = '<div class="loading-lessons">Загрузка занятий...</div>';
+
+        try {
+            const lessons = await api.get(`/api/users/lessons/${teacherId}`);
+
+            if (!lessons || !Array.isArray(lessons) || lessons.length === 0) {
+                schLessonsContainer.innerHTML = '<div class="no-lessons">У преподавателя пока нет занятий</div>';
+                return;
+            }
+
+            const daysOrder = ['Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота'];
+            const lessonsByDay = {};
+            lessons.forEach(l => {
+                if (!lessonsByDay[l.day]) lessonsByDay[l.day] = [];
+                lessonsByDay[l.day].push(l);
+            });
+            Object.keys(lessonsByDay).forEach(day => {
+                lessonsByDay[day].sort((a, b) => a.time.localeCompare(b.time));
+            });
+
+            let html = '';
+            daysOrder.forEach(day => {
+                if (!lessonsByDay[day]) return;
+                html += `<div class="lesson-day-divider">${day}</div>`;
+                lessonsByDay[day].forEach(lesson => {
+                    html += `
+                        <div class="lesson-card">
+                            <div class="lesson-card-header">
+                                <span class="lesson-group">${escapeHtml(lesson.groupName)}</span>
+                                <span class="lesson-time">${escapeHtml(lesson.time)}</span>
+                            </div>
+                            <div class="lesson-card-body">
+                                <div class="lesson-subject">${escapeHtml(lesson.subjectName)}</div>
+                                <div class="lesson-details">
+                                    <span class="lesson-detail-item">${escapeHtml(lesson.typeLesson)}</span>
+                                    <span class="lesson-detail-item">${escapeHtml(lesson.lessonFormat)}</span>
+                                    <span class="lesson-detail-item">${escapeHtml(lesson.week)}</span>
+                                    <span class="lesson-detail-item">${escapeHtml(lesson.classroomName)}</span>
+                                </div>
+                            </div>
+                        </div>`;
+                });
+            });
+
+            schLessonsContainer.innerHTML = html;
+        } catch (e) {
+            schLessonsContainer.innerHTML = `<div class="no-lessons">Ошибка загрузки: ${escapeHtml(e.message)}</div>`;
+        }
+    }
+
+    // ===== При смене преподавателя — подгрузить его занятия =====
+    schTeacherSelect.addEventListener('change', function () {
+        const teacherId = this.value;
+        if (teacherId) {
+            loadTeacherLessons(teacherId);
+        } else {
+            modalLessons.style.display = 'none';
+            schLessonsContainer.innerHTML = '<div class="no-lessons">Выберите преподавателя для просмотра занятий</div>';
+        }
+    });
+
+    // ===== Открытие / закрытие оверлея =====
+    function openOverlay() {
+        // Автозаполнение преподавателя из фильтра таблицы
+        const autoTeacherId = getFilteredTeacherId();
+        if (autoTeacherId) {
+            schTeacherSelect.value = autoTeacherId;
+            loadTeacherLessons(autoTeacherId);
+        }
+
+        overlay.classList.add('open');
+    }
+
+    function closeOverlay() {
+        overlay.classList.remove('open');
+        resetForm();
+    }
+
+    function resetForm() {
+        addForm.reset();
+        schTeacherSelect.value = '';
+        schGroupSelect.value = '';
+        schDisciplineSelect.value = '';
+        schClassroomSelect.value = '';
+        schDaySelect.value = '';
+        schTypeSelect.value = '';
+        schTimeSelect.innerHTML = '<option value="">Сначала выберите день</option>';
+        schTimeSelect.disabled = true;
+        if (schWeekUpper) schWeekUpper.checked = false;
+        if (schWeekLower) schWeekLower.checked = false;
+        if (schFormatOffline) schFormatOffline.checked = true;
+        modalLessons.style.display = 'none';
+        schLessonsContainer.innerHTML = '<div class="no-lessons">Выберите преподавателя для просмотра занятий</div>';
+        hideAlert('sch-add-alert');
+    }
+
+    btnAddLesson.addEventListener('click', openOverlay);
+    btnClose.addEventListener('click', closeOverlay);
+
+    // Закрытие по клику на оверлей (мимо модалок)
+    overlay.addEventListener('click', (e) => {
+        if (e.target === overlay || e.target.classList.contains('cs-overlay-scroll')) {
+            closeOverlay();
+        }
+    });
+
+    // Закрытие по Escape
+    document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape' && overlay.classList.contains('open')) {
+            closeOverlay();
+        }
+    });
+
+    // ===== Отправка формы =====
+    addForm.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        hideAlert('sch-add-alert');
+
+        const teacherId = schTeacherSelect.value;
+        const groupId = schGroupSelect.value;
+        const subjectId = schDisciplineSelect.value;
+        const classroomId = schClassroomSelect.value;
+        const lessonType = schTypeSelect.value;
+        const dayOfWeek = schDaySelect.value;
+        const timeSlot = schTimeSelect.value;
+        const lessonFormat = document.querySelector('input[name="schLessonFormat"]:checked')?.value;
+
+        if (!teacherId) { showAlert('sch-add-alert', 'Выберите преподавателя', 'error'); return; }
+        if (!groupId) { showAlert('sch-add-alert', 'Выберите группу', 'error'); return; }
+        if (!subjectId) { showAlert('sch-add-alert', 'Выберите дисциплину', 'error'); return; }
+        if (!classroomId) { showAlert('sch-add-alert', 'Выберите аудиторию', 'error'); return; }
+        if (!dayOfWeek) { showAlert('sch-add-alert', 'Выберите день недели', 'error'); return; }
+        if (!timeSlot) { showAlert('sch-add-alert', 'Выберите время', 'error'); return; }
+
+        const weekUpperChecked = schWeekUpper?.checked || false;
+        const weekLowerChecked = schWeekLower?.checked || false;
+
+        if (!weekUpperChecked && !weekLowerChecked) {
+            showAlert('sch-add-alert', 'Не выбран тип недели', 'error');
+            return;
+        }
+
+        let weekType = null;
+        if (weekUpperChecked && weekLowerChecked) weekType = 'Обе';
+        else if (weekUpperChecked) weekType = 'Верхняя';
+        else if (weekLowerChecked) weekType = 'Нижняя';
+
+        try {
+            await api.post('/api/users/lessons/create', {
+                teacherId: parseInt(teacherId),
+                groupId: parseInt(groupId),
+                subjectId: parseInt(subjectId),
+                classroomId: parseInt(classroomId),
+                typeLesson: lessonType,
+                lessonFormat: lessonFormat,
+                day: dayOfWeek,
+                week: weekType,
+                time: timeSlot
+            });
+
+            showAlert('sch-add-alert', 'Занятие добавлено ✓', 'success');
+
+            // Очистить все поля кроме преподавателя (для массового добавления)
+            schGroupSelect.selectedIndex = 0;
+            schDisciplineSelect.selectedIndex = 0;
+            schClassroomSelect.selectedIndex = 0;
+            schTypeSelect.selectedIndex = 0;
+            schDaySelect.selectedIndex = 0;
+            schTimeSelect.innerHTML = '<option value="">Сначала выберите день</option>';
+            schTimeSelect.disabled = true;
+            schWeekUpper.checked = false;
+            schWeekLower.checked = false;
+            document.querySelector('input[name="schLessonFormat"][value="Очно"]').checked = true;
+
+            // Обновить занятия преподавателя в модалке 2
+            if (teacherId) {
+                await loadTeacherLessons(teacherId);
+            }
+
+            // Обновить основную таблицу
+            await loadSchedule();
+
+            setTimeout(() => {
+                hideAlert('sch-add-alert');
+            }, 4000);
+        } catch (err) {
+            showAlert('sch-add-alert', err.message || 'Ошибка добавления занятия', 'error');
+        }
+    });
+
+    // ===================== Инициализация =====================
+    await Promise.all([
+        loadSchedule(),
+        loadGroups(),
+        loadSubjects(),
+        loadClassrooms(),
+        loadTeachers()
+    ]);
 }