Zuev/magistr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
alekan
2026-04-02 00:09:19 +03:00
parent c82e3feaed
commit ac69a57290
5 changed files with 739 additions and 334 deletions
Download Patch File Download Diff File Expand all files Collapse all files

154
frontend/admin/js/views/users.js
View File

@@ -7,7 +7,9 @@ const ROLE_BADGE = { ADMIN: 'badge-admin', TEACHER: 'badge-teacher', STUDENT: 'b
export async function initUsers() {
const usersTbody = document.getElementById('users-tbody');
const createForm = document.getElementById('create-form');
const modalBackdrop = document.getElementById('modal-backdrop');
// ===== Оверлей (cs-overlay) =====
const usersOverlay = document.getElementById('users-overlay');
// ===== 1-е модальное окно: Добавить занятие =====
const modalAddLesson = document.getElementById('modal-add-lesson');
@@ -28,7 +30,6 @@ export async function initUsers() {
// ===== 2-е модальное окно: Просмотр занятий =====
const modalViewLessons = document.getElementById('modal-view-lessons');
const modalViewLessonsClose = document.getElementById('modal-view-lessons-close');
const lessonsContainer = document.getElementById('lessons-container');
const modalTeacherName = document.getElementById('modal-teacher-name');
@@ -56,36 +57,6 @@ export async function initUsers() {
"13:20-14:50"
];
// =========================================================
// СИНХРОНИЗАЦИЯ ВЫСОТЫ 1-й МОДАЛКИ -> CSS переменная
// =========================================================
const addLessonContent = document.querySelector('#modal-add-lesson .modal-content');
function setAddLessonHeightVar(px) {
const h = Math.max(0, Math.ceil(px || 0));
document.documentElement.style.setProperty('--add-lesson-height', `${h}px`);
}
function syncAddLessonHeight() {
if (!addLessonContent) return;
if (!modalAddLesson?.classList.contains('open')) {
// если первая модалка закрыта — "шапки" нет
setAddLessonHeightVar(0);
return;
}
setAddLessonHeightVar(addLessonContent.getBoundingClientRect().height);
}
// Авто-обновление при любом изменении размеров первой модалки
if (addLessonContent && 'ResizeObserver' in window) {
const ro = new ResizeObserver(() => syncAddLessonHeight());
ro.observe(addLessonContent);
}
window.addEventListener('resize', () => syncAddLessonHeight());
// =========================================================
// Загрузка справочников
// =========================================================
@@ -225,25 +196,15 @@ export async function initUsers() {
`).join('');
}
function updateBackdrop() {
if(!modalBackdrop) return;
const anyOpen =
modalAddLesson?.classList.contains('open') ||
modalViewLessons?.classList.contains('open');
modalBackdrop.classList.toggle('open', anyOpen);
// ===== Открытие / закрытие оверлея =====
function openOverlay() {
if (usersOverlay) usersOverlay.classList.add('open');
}
// Клик мимо модалок закроет их, если не надо, то закомментить этот код
modalBackdrop?.addEventListener('click', () => {
if (modalAddLesson?.classList.contains('open')) {
modalAddLesson.classList.remove('open');
function closeOverlay() {
if (usersOverlay) usersOverlay.classList.remove('open');
if (modalViewLessons) modalViewLessons.style.display = 'none';
resetLessonForm();
syncAddLessonHeight();
}
if (modalViewLessons?.classList.contains('open')) {
closeViewLessonsModal();
}
});
}
// =========================================================
// 1-я модалка: добавление занятия
@@ -270,9 +231,7 @@ export async function initUsers() {
lessonDaySelect.value = '';
updateTimeOptions('');
modalAddLesson.classList.add('open');
updateBackdrop();
requestAnimationFrame(() => syncAddLessonHeight());
openOverlay();
}
addLessonForm.addEventListener('submit', async (e) => {
@@ -289,15 +248,20 @@ export async function initUsers() {
const lessonFormat = document.querySelector('input[name="lessonFormat"]:checked')?.value;
if (!groupId) { showAlert('add-lesson-alert', 'Выберите группу', 'error'); requestAnimationFrame(() => syncAddLessonHeight()); return; }
if (!subjectId) { showAlert('add-lesson-alert', 'Выберите дисциплину', 'error'); requestAnimationFrame(() => syncAddLessonHeight()); return; }
if (!classroomId) { showAlert('add-lesson-alert', 'Выберите аудиторию', 'error'); requestAnimationFrame(() => syncAddLessonHeight()); return; }
if (!dayOfWeek) { showAlert('add-lesson-alert', 'Выберите день недели', 'error'); requestAnimationFrame(() => syncAddLessonHeight()); return; }
if (!timeSlot) { showAlert('add-lesson-alert', 'Выберите время', 'error'); requestAnimationFrame(() => syncAddLessonHeight()); return; }
if (!groupId) { showAlert('add-lesson-alert', 'Выберите группу', 'error'); return; }
if (!subjectId) { showAlert('add-lesson-alert', 'Выберите дисциплину', 'error'); return; }
if (!classroomId) { showAlert('add-lesson-alert', 'Выберите аудиторию', 'error'); return; }
if (!dayOfWeek) { showAlert('add-lesson-alert', 'Выберите день недели', 'error'); return; }
if (!timeSlot) { showAlert('add-lesson-alert', 'Выберите время', 'error'); return; }
const weekUpperChecked = weekUpper?.checked || false;
const weekLowerChecked = weekLower?.checked || false;
if (!weekUpperChecked && !weekLowerChecked) {
showAlert('add-lesson-alert', 'Не выбран тип недели', 'error');
return;
}
let weekType = null;
if (weekUpperChecked && weekLowerChecked) weekType = 'Обе';
else if (weekUpperChecked) weekType = 'Верхняя';
@@ -316,57 +280,45 @@ export async function initUsers() {
time: timeSlot
});
if (modalViewLessons?.classList.contains('open') && currentLessonsTeacherId == userId) {
if (modalViewLessons?.style.display !== 'none' && currentLessonsTeacherId == userId) {
await loadTeacherLessons(currentLessonsTeacherId, currentLessonsTeacherName);
}
showAlert('add-lesson-alert', 'Занятие добавлено', 'success');
showAlert('add-lesson-alert', 'Занятие добавлено ✓', 'success');
lessonGroupSelect.value = '';
lessonDisciplineSelect.value = '';
lessonClassroomSelect.value = '';
lessonTypeSelect.value = '';
lessonDaySelect.value = '';
lessonTimeSelect.value = '';
lessonGroupSelect.selectedIndex = 0;
lessonDisciplineSelect.selectedIndex = 0;
lessonClassroomSelect.selectedIndex = 0;
lessonTypeSelect.selectedIndex = 0;
lessonDaySelect.selectedIndex = 0;
lessonTimeSelect.innerHTML = '<option value="">Сначала выберите день</option>';
lessonTimeSelect.disabled = true;
weekUpper.checked = false;
weekLower.checked = false;
document.querySelector('input[name="lessonFormat"][value="Очно"]').checked = true;
requestAnimationFrame(() => syncAddLessonHeight());
setTimeout(() => {
hideAlert('add-lesson-alert');
syncAddLessonHeight();
}, 3000);
} catch (err) {
showAlert('add-lesson-alert', err.message || 'Ошибка добавления занятия', 'error');
requestAnimationFrame(() => syncAddLessonHeight());
}
});
lessonDaySelect.addEventListener('change', function () {
updateTimeOptions(this.value);
requestAnimationFrame(() => syncAddLessonHeight());
});
if (modalAddLessonClose) {
modalAddLessonClose.addEventListener('click', () => {
modalAddLesson.classList.remove('open');
resetLessonForm();
syncAddLessonHeight();
updateBackdrop();
});
modalAddLessonClose.addEventListener('click', () => closeOverlay());
}
if (modalAddLesson) {
modalAddLesson.addEventListener('click', (e) => {
if (e.target === modalAddLesson) {
modalAddLesson.classList.remove('open');
resetLessonForm();
syncAddLessonHeight();
updateBackdrop();
// Клик по оверлею (мимо модалок) закрывает всё
if (usersOverlay) {
usersOverlay.querySelector('.cs-overlay-scroll')?.addEventListener('click', (e) => {
if (e.target.classList.contains('cs-overlay-scroll')) {
closeOverlay();
}
});
}
@@ -481,48 +433,20 @@ export async function initUsers() {
currentLessonsTeacherId = teacherId;
currentLessonsTeacherName = teacherName || '';
if (modalViewLessons) modalViewLessons.style.display = '';
loadTeacherLessons(teacherId, teacherName);
requestAnimationFrame(() => syncAddLessonHeight());
modalViewLessons.classList.add('open');
updateBackdrop();
// document.body.style.overflow = 'hidden';
}
function closeViewLessonsModal() {
modalViewLessons.classList.remove('open');
updateBackdrop();
// document.body.style.overflow = '';
if (modalViewLessons) modalViewLessons.style.display = 'none';
currentLessonsTeacherId = null;
currentLessonsTeacherName = '';
}
if (modalViewLessonsClose) {
modalViewLessonsClose.addEventListener('click', closeViewLessonsModal);
}
if (modalViewLessons) {
modalViewLessons.addEventListener('click', (e) => {
if (e.target === modalViewLessons) closeViewLessonsModal();
});
}
document.addEventListener('keydown', (e) => {
if (e.key !== 'Escape') return;
if (modalAddLesson?.classList.contains('open')) {
modalAddLesson.classList.remove('open');
resetLessonForm();
syncAddLessonHeight();
updateBackdrop();
return;
}
if (modalViewLessons?.classList.contains('open')) {
closeViewLessonsModal();
return;
if (usersOverlay?.classList.contains('open')) {
closeOverlay();
}
});