Поправил модалку с расписанием препода

frontend/admin/css/components.css

@@ -753,109 +753,4 @@ tbody tr:hover {
     display: flex;
     align-items: center;
     gap: 8px;
-}
-
-/* ===== Modal ===== */
-.modal-overlay {
-    display: none;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0.6);
-    backdrop-filter: blur(4px);
-    z-index: 1000;
-    align-items: center;
-    justify-content: center;
-    opacity: 0;
-    transition: opacity var(--transition);
-}
-
-.modal-overlay.open {
-    display: flex;
-    opacity: 1;
-}
-
-.modal-content {
-    background: var(--bg-primary);
-    border: 1px solid var(--bg-card-border);
-    border-radius: var(--radius-md);
-    padding: 2rem;
-    width: 90%;
-    max-width: 500px;
-    position: relative;
-    transform: scale(0.95);
-    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
-}
-
-.modal-overlay.open .modal-content {
-    transform: scale(1);
-}
-
-.modal-close {
-    position: absolute;
-    top: 1rem;
-    right: 1rem;
-    background: none;
-    border: none;
-    font-size: 1.5rem;
-    color: var(--text-secondary);
-    cursor: pointer;
-    transition: color var(--transition);
-}
-
-.modal-close:hover {
-    color: var(--error);
-}
-
-.btn-add-lesson {
-    padding: 0.35rem 0.7rem;
-    background: rgba(16, 185, 129, 0.1);
-    border: 1px solid rgba(16, 185, 129, 0.2);
-    border-radius: var(--radius-sm);
-    color: var(--success);
-    font-family: inherit;
-    font-size: 0.8rem;
-    cursor: pointer;
-    transition: background var(--transition), transform var(--transition);
-    position: relative;
-    overflow: hidden;
-}
-
-.btn-add-lesson:hover {
-    background: rgba(16, 185, 129, 0.2);
-    transform: scale(1.05);
-}
-
-/* Кнопки-переключатели для недели */
-.btn-checkbox {
-    display: inline-block;
-    cursor: pointer;
-}
-
-.btn-checkbox input {
-    position: absolute;
-    opacity: 0;
-    width: 0;
-    height: 0;
-}
-
-.checkbox-btn {
-    display: inline-block;
-    padding: 0.5rem 1rem;
-    background: var(--bg-secondary);
-    border: 1px solid var(--bg-card-border);
-    border-radius: var(--radius-sm);
-    color: var(--text-primary);
-    transition: all var(--transition);
-    user-select: none;
-}
-
-.btn-checkbox input:checked+.checkbox-btn {
-    background: var(--success, #10b981);
-    /* используем success или зелёный */
-    border-color: var(--success, #10b981);
-    color: white;
 }

frontend/admin/css/modals.css

@@ -0,0 +1,418 @@
+/* ===== Modal (общие стили) ===== */
+.modal-overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    /* bottom: 0; */
+    background: rgba(0, 0, 0, 0.6);
+    backdrop-filter: blur(4px);
+
+    z-index: 1000;
+
+    align-items: center;
+    justify-content: center;
+
+    opacity: 0;
+    transition: opacity var(--transition);
+}
+
+.modal-overlay.open {
+    display: flex;
+    opacity: 1;
+}
+
+.modal-content {
+    background: var(--bg-primary);
+    border: 1px solid var(--bg-card-border);
+    border-radius: var(--radius-md);
+    padding: 2rem;
+
+    width: 100%;
+    top: 0;
+    max-width: 100%;
+    margin: 0 auto;
+
+    position: relative;
+    transform: scale(0.95);
+    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
+}
+
+.modal-overlay.open .modal-content {
+    transform: scale(1);
+}
+
+.modal-close {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    background: none;
+    border: none;
+    font-size: 1.5rem;
+    color: var(--text-secondary);
+    cursor: pointer;
+    transition: color var(--transition);
+}
+
+.modal-close:hover {
+    color: var(--error);
+}
+
+/* ===== Кнопки ===== */
+.btn-add-lesson {
+    padding: 0.35rem 0.7rem;
+    background: rgba(16, 185, 129, 0.1);
+    border: 1px solid rgba(16, 185, 129, 0.2);
+    border-radius: var(--radius-sm);
+    color: var(--success);
+    font-family: inherit;
+    font-size: 0.8rem;
+    cursor: pointer;
+    transition: background var(--transition), transform var(--transition);
+    position: relative;
+    overflow: hidden;
+}
+
+.btn-add-lesson:hover {
+    background: rgba(16, 185, 129, 0.2);
+    transform: scale(1.05);
+}
+
+.btn-view-lessons {
+    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);
+    font-family: inherit;
+    font-size: 0.8rem;
+    cursor: pointer;
+    transition: all var(--transition);
+    white-space: nowrap;
+}
+
+.btn-view-lessons:hover {
+    background: rgba(99, 102, 241, 0.2);
+    transform: translateY(-1px);
+}
+
+/* ===== Кнопки-переключатели (неделя) ===== */
+.btn-checkbox {
+    display: inline-block;
+    cursor: pointer;
+}
+
+.btn-checkbox input {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.checkbox-btn {
+    display: inline-block;
+    padding: 0.5rem 1rem;
+    background: var(--bg-secondary);
+    border: 1px solid var(--bg-card-border);
+    border-radius: var(--radius-sm);
+    color: var(--text-primary);
+    transition: all var(--transition);
+    user-select: none;
+}
+
+.btn-checkbox input:checked + .checkbox-btn {
+    background: var(--success, #10b981);
+    border-color: var(--success, #10b981);
+    color: #fff;
+}
+
+/* ===========================================================
+   ===== 2-е модальное окно (View Lessons) — ОСНОВНЫЕ ПРАВКИ =====
+   Требования:
+   - слева
+   - ~30% ширины
+   - сверху начинается СРАЗУ под 1-й модалкой
+   - высота = весь остаток до низа экрана
+   - визуально "ниже" 1-й модалки (и по z-index тоже ниже)
+   =========================================================== */
+
+#modal-view-lessons.modal-overlay {
+    background: transparent !important;
+    backdrop-filter: none !important;
+    pointer-events: none;
+    z-index: 999; /* ниже чем 1-е (1000) */
+}
+
+/* В открытом состоянии: прижать влево и опустить вниз на высоту "шапки" */
+#modal-view-lessons.modal-overlay.open {
+    justify-content: flex-start;
+    align-items: flex-start;
+
+    padding-left: 1rem;
+    padding-right: 1rem;
+
+    /* ключевое: высота 1-й модалки приходит из JS через --add-lesson-height */
+    padding-top: var(--add-lesson-height, 0px);
+}
+
+/* Панель 2-й модалки */
+#modal-view-lessons .view-lessons-modal {
+    width: 30vw !important;
+    max-width: 30vw !important;
+    min-width: 320px;
+
+    pointer-events: auto;
+
+    background: var(--bg-primary);
+    border: 1px solid var(--bg-card-border);
+    border-radius: var(--radius-md);
+    padding: 2rem;
+
+    position: relative;
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
+
+    margin: 0;
+
+    /* отключаем "пружинку" от .modal-content */
+    transform: none;
+
+    /* ключевое: занимает остаток по высоте */
+    height: calc(100vh - var(--add-lesson-height, 0px));
+    max-height: calc(100vh - var(--add-lesson-height, 0px));
+
+    /* чтобы скролл был внутри, а не у всей модалки */
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+/* Header во 2-й модалке */
+#modal-veiw-lessons .modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+    padding-right: 2rem;
+    flex: 0 0 auto;
+}
+
+#modal-view-lessons .modal-header h2 {
+    margin: 0;
+    font-size: 1.3rem;
+    color: var(--text-primary);
+}
+
+/* Контейнер занятий: растягивается и скроллится */
+#modal-view-lessons .lessons-container {
+    flex: 1 1 auto;
+    overflow-y: auto;
+
+    /* перебиваем старое ограничение */
+    max-height: none;
+
+    padding-right: 0.5rem;
+}
+
+/* ===== Карточки занятий ===== */
+.lesson-card {
+    background: var(--bg-card);
+    border: 1px solid var(--bg-card-border);
+    border-radius: var(--radius-sm);
+    padding: 1.2rem;
+    margin-bottom: 1rem;
+    transition: all 0.2s ease;
+}
+
+.lesson-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+    border-color: var(--accent);
+}
+
+.lesson-card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.8rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px dashed var(--bg-card-border);
+}
+
+.lesson-group {
+    font-weight: 700;
+    color: var(--accent);
+    font-size: 1rem;
+    background: rgba(99, 102, 241, 0.1);
+    padding: 0.3rem 0.8rem;
+    border-radius: 20px;
+}
+
+.lesson-time {
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+    display: flex;
+    align-items: center;
+    gap: 0.3rem;
+}
+
+.lesson-time::before {
+    content: "🕒";
+    font-size: 0.9rem;
+    opacity: 0.7;
+}
+
+.lesson-card-body {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.lesson-subject {
+    font-weight: 600;
+    color: var(--text-primary);
+    font-size: 1.1rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.lesson-subject::before {
+    content: "📚";
+    font-size: 1rem;
+    opacity: 0.7;
+}
+
+.lesson-details {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.8rem;
+    margin-top: 0.5rem;
+}
+
+.lesson-detail-item {
+    background: var(--bg-input);
+    padding: 0.3rem 0.8rem;
+    border-radius: 15px;
+    font-size: 0.85rem;
+    color: var(--text-secondary);
+    border: 1px solid var(--bg-card-border);
+}
+
+/* День недели как разделитель */
+.lesson-day-divider {
+    margin: 1.5rem 0 1rem 0;
+    font-weight: 700;
+    color: var(--accent);
+    font-size: 1.1rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    border-bottom: 2px solid var(--accent-glow);
+    padding-bottom: 0.3rem;
+}
+
+.lesson-day-divider:first-of-type {
+    margin-top: 0;
+}
+
+/* Загрузка/пусто */
+.loading-lessons,
+.no-lessons {
+    text-align: center;
+    color: var(--text-secondary);
+    padding: 3rem;
+    font-size: 1rem;
+    background: var(--bg-card);
+    border-radius: var(--radius-sm);
+}
+
+/* Светлая тема */
+[data-theme="light"] .lesson-card {
+    background: #fff;
+    border-color: rgba(0, 0, 0, 0.1);
+}
+
+[data-theme="light"] .lesson-group {
+    background: rgba(99, 102, 241, 0.05);
+}
+
+/* ===== Адаптивность ===== */
+@media (max-width: 1200px) {
+    #modal-view-lessons .view-lessons-modal {
+        width: 40vw !important;
+        max-width: 40vw !important;
+    }
+}
+
+@media (max-width: 768px) {
+    /* На мобилке делаем поведение более "обычным" */
+    #modal-view-lessons.modal-overlay.open {
+        padding-top: 1rem;
+        justify-content: center;
+        align-items: flex-start;
+    }
+
+    #modal-view-lessons .view-lessons-modal {
+        width: 90vw !important;
+        max-width: 90vw !important;
+        min-width: 0;
+
+        /* чтобы занимало почти весь экран */
+        height: calc(100vh - 2rem);
+        max-height: calc(100vh - 2rem);
+    }
+
+    .lesson-card-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.5rem;
+    }
+}
+
+/* ===== Скролл во 2-й модалке ===== */
+#modal-view-lessons .lessons-container {
+  scrollbar-width: thin; /* Firefox */
+  scrollbar-color: rgba(99, 102, 241, 0.55) rgba(255, 255, 255, 0.06); /* thumb track */
+}
+
+/* WebKit (Chrome/Edge/Safari) */
+#modal-view-lessons .lessons-container::-webkit-scrollbar {
+  width: 10px;
+}
+
+#modal-view-lessons .lessons-container::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.06);
+  border-radius: 10px;
+}
+
+#modal-view-lessons .lessons-container::-webkit-scrollbar-thumb {
+  background: rgba(99, 102, 241, 0.55); /* под accent */
+  border-radius: 10px;
+  border: 2px solid rgba(0, 0, 0, 0);   /* чтобы выглядел “тоньше” */
+  background-clip: padding-box;
+}
+
+#modal-view-lessons .lessons-container::-webkit-scrollbar-thumb:hover {
+  background: rgba(99, 102, 241, 0.75);
+}
+
+/* Общий блюр/затемнение за модалками */
+#modal-backdrop{
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.55);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--transition);
+  z-index: 998; /* ниже модалок: 999 и 1000 */
+}
+
+#modal-backdrop.open{
+  opacity: 1;
+  pointer-events: auto;
+}
+

frontend/admin/index.html

@@ -13,6 +13,7 @@
     <link rel="stylesheet" href="css/main.css">
     <link rel="stylesheet" href="css/layout.css">
     <link rel="stylesheet" href="css/components.css">
+    <link rel="stylesheet" href="css/modals.css">
 </head>
 
 <body>

frontend/admin/js/views/users.js

@@ -7,11 +7,13 @@ 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');
 
-    // Элементы модального окна добавления занятия
+    // ===== 1-е модальное окно: Добавить занятие =====
     const modalAddLesson = document.getElementById('modal-add-lesson');
     const modalAddLessonClose = document.getElementById('modal-add-lesson-close');
     const addLessonForm = document.getElementById('add-lesson-form');
+
     const lessonGroupSelect = document.getElementById('lesson-group');
     const lessonDisciplineSelect = document.getElementById('lesson-discipline');
     const lessonClassroomSelect = document.getElementById('lesson-classroom');
@@ -22,15 +24,21 @@ export async function initUsers() {
     const lessonDaySelect = document.getElementById('lesson-day');
     const weekUpper = document.getElementById('week-upper');
     const weekLower = document.getElementById('week-lower');
-    // NEW: получаем элемент выбора времени
     const lessonTimeSelect = document.getElementById('lesson-time');
 
-    // Переменные для хранения загруженных данных
+    // ===== 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');
+
+    let currentLessonsTeacherId = null;
+    let currentLessonsTeacherName = '';
+    // ===== Данные =====
     let groups = [];
     let subjects = [];
     let classrooms = [];
 
-    // NEW: массивы с временными слотами
     const weekdaysTimes = [
         "8:00-9:30",
         "9:40-11:10",
@@ -48,7 +56,39 @@ 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());
+
+    // =========================================================
+    // Загрузка справочников
+    // =========================================================
     async function loadGroups() {
         try {
             groups = await api.get('/api/groups');
@@ -58,7 +98,6 @@ export async function initUsers() {
         }
     }
 
-    // Загрузка дисциплин
     async function loadSubjects() {
         try {
             subjects = await api.get('/api/subjects');
@@ -69,39 +108,37 @@ export async function initUsers() {
     }
 
     async function loadClassrooms() {
-            try {
-                classrooms = await api.get('/api/classrooms');
-                renderClassroomsOptions();
-            } catch (e) {
-                console.error('Ошибка загрузки аудиторий:', e);
-            }
+        try {
+            classrooms = await api.get('/api/classrooms');
+            renderClassroomsOptions();
+        } catch (e) {
+            console.error('Ошибка загрузки аудиторий:', e);
         }
+    }
 
-    // Заполнение select группами
     function renderGroupOptions() {
         if (!groups || groups.length === 0) {
-            lessonClassroomSelect.innerHTML = '<option value="">Нет доступных групп</option>';
+            lessonGroupSelect.innerHTML = '<option value="">Нет доступных групп</option>';
             return;
         }
 
-        lessonGroupSelect.innerHTML = '<option value="">Выберите группу</option>' +
+        lessonGroupSelect.innerHTML =
+            '<option value="">Выберите группу</option>' +
             groups.map(g => {
-            let optionText = escapeHtml(g.name);
-            if(g.groupSize) {
-                optionText += ` (численность: ${g.groupSize} чел.)`;
-            }
-            return `<option value="${g.id}">${optionText}</option>`;
+                let optionText = escapeHtml(g.name);
+                if (g.groupSize) optionText += ` (численность: ${g.groupSize} чел.)`;
+                return `<option value="${g.id}">${optionText}</option>`;
             }).join('');
     }
 
-    // Заполнение select дисциплинами
     function renderSubjectOptions() {
-        lessonDisciplineSelect.innerHTML = '<option value="">Выберите дисциплину</option>' +
+        lessonDisciplineSelect.innerHTML =
+            '<option value="">Выберите дисциплину</option>' +
             subjects.map(s => `<option value="${s.id}">${escapeHtml(s.name)}</option>`).join('');
     }
 
     function renderClassroomsOptions() {
-        if (!classrooms || classrooms.length ===0) {
+        if (!classrooms || classrooms.length === 0) {
             lessonClassroomSelect.innerHTML = '<option value="">Нет доступных аудиторий</option>';
             return;
         }
@@ -110,32 +147,28 @@ export async function initUsers() {
         const selectedGroup = groups?.find(g => g.id == selectedGroupId);
         const groupSize = selectedGroup?.groupSize || 0;
 
-        lessonClassroomSelect.innerHTML = '<option value="">Выберите аудиторию</option>' +
+        lessonClassroomSelect.innerHTML =
+            '<option value="">Выберите аудиторию</option>' +
             classrooms.map(c => {
-            let optionText = escapeHtml(c.name);
-            // Добавление текста с инфой о вместимости чел.
-            if(c.capacity) {
-                optionText += ` (вместимость: ${c.capacity} чел.)`;
-            }
+                let optionText = escapeHtml(c.name);
 
-            // Если аудитория занята, то рисуем крестик допом
-            if (c.isAvailable === false) {
-                optionText += ` ❌ Занята`
-            // Если свободна, но меньше численности группы, отображаем воскл. знак
-            } else if (selectedGroupId && groupSize > 0 && c.capacity && groupSize > c.capacity) {
-                optionText += ` ⚠️ Недостаточно места`;
-            }
+                if (c.capacity) optionText += ` (вместимость: ${c.capacity} чел.)`;
 
+                if (c.isAvailable === false) {
+                    optionText += ` ❌ Занята`;
+                } else if (selectedGroupId && groupSize > 0 && c.capacity && groupSize > c.capacity) {
+                    optionText += ` ⚠️ Недостаточно места`;
+                }
 
-            return `<option value="${c.id}">${optionText}</option>`;
+                return `<option value="${c.id}">${optionText}</option>`;
             }).join('');
     }
 
-    lessonGroupSelect.addEventListener('change', function() {
+    lessonGroupSelect.addEventListener('change', function () {
         renderClassroomsOptions();
+        requestAnimationFrame(() => syncAddLessonHeight());
     });
 
-    // NEW: функция обновления списка времени в зависимости от дня
     function updateTimeOptions(dayValue) {
         let times = [];
         if (dayValue === "Суббота") {
@@ -148,17 +181,23 @@ export async function initUsers() {
             return;
         }
 
-        lessonTimeSelect.innerHTML = '<option value="">Выберите время</option>' +
+        lessonTimeSelect.innerHTML =
+            '<option value="">Выберите время</option>' +
             times.map(t => `<option value="${t}">${t}</option>`).join('');
         lessonTimeSelect.disabled = false;
     }
 
+    // =========================================================
+    // Пользователи
+    // =========================================================
     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>';
+            usersTbody.innerHTML =
+                '<tr><td colspan="4" class="loading-row">Ошибка загрузки: ' +
+                escapeHtml(e.message) + '</td></tr>';
         }
     }
 
@@ -167,40 +206,72 @@ export async function initUsers() {
             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>
-        <td><button class="btn-add-lesson" data-id="${u.id}">Добавить занятие</button></td>  
-      </tr>`).join('');
+            <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>
+                <td>
+                    <button class="btn-add-lesson" data-id="${u.id}" data-name="${escapeHtml(u.username)}">Добавить занятие</button>
+                </td>
+            </tr>
+        `).join('');
     }
 
-    // Сброс формы модального окна
+    function updateBackdrop() {
+        if(!modalBackdrop) return;
+        const anyOpen =
+            modalAddLesson?.classList.contains('open') ||
+            modalViewLessons?.classList.contains('open');
+
+        modalBackdrop.classList.toggle('open', anyOpen);
+    }
+    // Клик мимо модалок закроет их, если не надо, то закомментить этот код
+    modalBackdrop?.addEventListener('click', () => {
+        if (modalAddLesson?.classList.contains('open')) {
+        modalAddLesson.classList.remove('open');
+        resetLessonForm();
+        syncAddLessonHeight();
+        }
+        if (modalViewLessons?.classList.contains('open')) {
+        closeViewLessonsModal();
+        }
+    });
+
+    // =========================================================
+    // 1-я модалка: добавление занятия
+    // =========================================================
     function resetLessonForm() {
         addLessonForm.reset();
         lessonUserId.value = '';
+
         if (weekUpper) weekUpper.checked = false;
         if (weekLower) weekLower.checked = false;
-        // NEW: сбрасываем селект времени
+
         if (lessonOfflineFormat) lessonOfflineFormat.checked = true;
         if (lessonOnlineFormat) lessonOnlineFormat.checked = false;
+
         lessonTimeSelect.innerHTML = '<option value="">Сначала выберите день</option>';
         lessonTimeSelect.disabled = true;
+
         hideAlert('add-lesson-alert');
     }
 
-    // Открытие модалки с установкой userId
     function openAddLessonModal(userId) {
         lessonUserId.value = userId;
-        // NEW: сбрасываем выбранный день и время
+
         lessonDaySelect.value = '';
         updateTimeOptions('');
+
         modalAddLesson.classList.add('open');
+        updateBackdrop();
+        requestAnimationFrame(() => syncAddLessonHeight());
     }
 
-    // Обработчик отправки формы добавления занятия
     addLessonForm.addEventListener('submit', async (e) => {
         e.preventDefault();
         hideAlert('add-lesson-alert');
@@ -211,48 +282,26 @@ export async function initUsers() {
         const classroomId = lessonClassroomSelect.value;
         const lessonType = lessonTypeSelect.value;
         const dayOfWeek = lessonDaySelect.value;
-        const timeSlot = lessonTimeSelect.value; // NEW: получаем выбранное время
+        const timeSlot = lessonTimeSelect.value;
 
         const lessonFormat = document.querySelector('input[name="lessonFormat"]:checked')?.value;
 
-        // Проверка обязательных полей
-        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;
-        }
-        // NEW: проверка времени
-        if (!timeSlot) {
-            showAlert('add-lesson-alert', 'Выберите время', 'error');
-            return;
-        }
+        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; }
 
-        // Определяем выбранный тип недели
         const weekUpperChecked = weekUpper?.checked || false;
         const weekLowerChecked = weekLower?.checked || false;
+
         let weekType = null;
-        if (weekUpperChecked && weekLowerChecked) {
-            weekType = 'Обе';
-        } else if (weekUpperChecked) {
-            weekType = 'Верхняя';
-        } else if (weekLowerChecked) {
-            weekType = 'Нижняя';
-        }
+        if (weekUpperChecked && weekLowerChecked) weekType = 'Обе';
+        else if (weekUpperChecked) weekType = 'Верхняя';
+        else if (weekLowerChecked) weekType = 'Нижняя';
 
         try {
-            // Отправляем данные на сервер
-            const response = await api.post('/api/users/lessons/create', {
+            await api.post('/api/users/lessons/create', {
                 teacherId: parseInt(userId),
                 groupId: parseInt(groupId),
                 subjectId: parseInt(subjectId),
@@ -261,37 +310,212 @@ export async function initUsers() {
                 lessonFormat: lessonFormat,
                 day: dayOfWeek,
                 week: weekType,
-                time: timeSlot // передаём время
+                time: timeSlot
             });
+
+            if (modalViewLessons?.classList.contains('open') && currentLessonsTeacherId == userId) {
+                await loadTeacherLessons(currentLessonsTeacherId, currentLessonsTeacherName);
+            }
+
             showAlert('add-lesson-alert', 'Занятие добавлено', 'success');
+
+            lessonGroupSelect.value = '';
+            lessonDisciplineSelect.value = '';
+            lessonClassroomSelect.value = '';
+            lessonTypeSelect.value = '';
+            lessonDaySelect.value = '';
+            lessonTimeSelect.value = '';
+            lessonTimeSelect.disabled = true;
+
+            weekUpper.checked = false;
+            weekLower.checked = false;
+            document.querySelector('input[name="lessonFormat"][value="Очно"]').checked = true;
+
+            requestAnimationFrame(() => syncAddLessonHeight());
+
             setTimeout(() => {
-                modalAddLesson.classList.remove('open');
-                resetLessonForm();
-            }, 1500);
-        } catch (e) {
-            showAlert('add-lesson-alert', e.message || 'Ошибка добавления занятия', 'error');
+                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();
+        });
+    }
+
+    if (modalAddLesson) {
+        modalAddLesson.addEventListener('click', (e) => {
+            if (e.target === modalAddLesson) {
+                modalAddLesson.classList.remove('open');
+                resetLessonForm();
+                syncAddLessonHeight();
+                updateBackdrop();
+            }
+        });
+    }
+
+    // =========================================================
+    // Создание пользователя
+    // =========================================================
     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; }
+
+        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');
+        } catch (err) {
+            showAlert('create-alert', err.message || 'Ошибка соединения', 'error');
         }
     });
 
-    // Обработчик кликов по таблице
+    // =========================================================
+    // Инициализация
+    // =========================================================
+    await Promise.all([loadUsers(), loadGroups(), loadSubjects(), loadClassrooms()]);
+
+    // =========================================================
+    // 2-я модалка: просмотр занятий
+    // =========================================================
+    async function loadTeacherLessons(teacherId, teacherName) {
+        try {
+            lessonsContainer.innerHTML = '<div class="loading-lessons">Загрузка занятий...</div>';
+
+            modalTeacherName.textContent = teacherName
+                ? `Занятия преподавателя: ${teacherName}`
+                : 'Занятия преподавателя';
+
+            const lessons = await api.get(`/api/users/lessons/${teacherId}`);
+
+            if (!lessons || lessons.length === 0) {
+                lessonsContainer.innerHTML = '<div class="no-lessons">У преподавателя пока нет занятий</div>';
+                return;
+            }
+
+            const daysOrder = ['Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота'];
+            const lessonsByDay = {};
+
+            lessons.forEach(lesson => {
+                if (!lessonsByDay[lesson.day]) lessonsByDay[lesson.day] = [];
+                lessonsByDay[lesson.day].push(lesson);
+            });
+
+            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>
+                    `;
+                });
+            });
+
+            lessonsContainer.innerHTML = html;
+        } catch (e) {
+            lessonsContainer.innerHTML = `<div class="no-lessons">Ошибка загрузки: ${escapeHtml(e.message)}</div>`;
+            console.error('Ошибка загрузки занятий:', e);
+        }
+    }
+
+    function openViewLessonsModal(teacherId, teacherName) {
+        currentLessonsTeacherId = teacherId;
+        currentLessonsTeacherName = teacherName || '';
+
+        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 = '';
+
+        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;
+        }
+    });
+
+    // =========================================================
+    // ЕДИНЫЙ обработчик кликов по таблице (ВАЖНО: без дубля)
+    // =========================================================
     usersTbody.addEventListener('click', async (e) => {
         const deleteBtn = e.target.closest('.btn-delete');
         if (deleteBtn) {
@@ -299,8 +523,8 @@ export async function initUsers() {
             try {
                 await api.delete('/api/users/' + deleteBtn.dataset.id);
                 loadUsers();
-            } catch (e) {
-                alert(e.message || 'Ошибка удаления');
+            } catch (err) {
+                alert(err.message || 'Ошибка удаления');
             }
             return;
         }
@@ -308,35 +532,23 @@ export async function initUsers() {
         const addLessonBtn = e.target.closest('.btn-add-lesson');
         if (addLessonBtn) {
             e.preventDefault();
-            if (modalAddLesson) {
-                openAddLessonModal(addLessonBtn.dataset.id);
-            }
+
+            const teacherId = addLessonBtn.dataset.id;
+            const teacherName = addLessonBtn.dataset.name;
+
+            openAddLessonModal(teacherId);
+            openViewLessonsModal(teacherId, teacherName);
+
+            return;
+        }
+
+        const viewLessonsBtn = e.target.closest('.btn-view-lessons');
+        if (viewLessonsBtn) {
+            e.preventDefault();
+            const teacherId = viewLessonsBtn.dataset.id;
+            const teacherName = viewLessonsBtn.dataset.name;
+            openViewLessonsModal(teacherId, teacherName);
+            return;
         }
     });
-
-    // NEW: обработчик изменения дня недели для обновления списка времени
-    lessonDaySelect.addEventListener('change', function() {
-        updateTimeOptions(this.value);
-    });
-
-    // Закрытие модалки по крестику
-    if (modalAddLessonClose) {
-        modalAddLessonClose.addEventListener('click', () => {
-            modalAddLesson.classList.remove('open');
-            resetLessonForm();
-        });
-    }
-
-    // Закрытие по клику на overlay
-    if (modalAddLesson) {
-        modalAddLesson.addEventListener('click', (e) => {
-            if (e.target === modalAddLesson) {
-                modalAddLesson.classList.remove('open');
-                resetLessonForm();
-            }
-        });
-    }
-
-    // Загружаем все данные при инициализации
-    await Promise.all([loadUsers(), loadGroups(), loadSubjects(), loadClassrooms()]);
-}
+}

frontend/admin/views/users.html

@@ -54,29 +54,35 @@
         <form id="add-lesson-form">
             <input type="hidden" id="lesson-user-id">
 
-            <div class="form-group" style="margin-top: 1rem;">
-                <label for="lesson-group">Группа</label>
-                <select id="lesson-group" required>
-                    <option value="">Выберите группу</option>
-                </select>
-            </div>
+            <!-- Один общий ряд для всех элементов -->
+            <div class="form-row" style="align-items: flex-end; gap: 1rem; flex-wrap: wrap; width: 100%; justify-content: space-between;">
 
-            <div class="form-group" style="margin-top: 1rem;">
-                <label for="lesson-discipline">Дисциплина</label>
-                <select id="lesson-discipline" required>
-                    <option value="">Выберите дисциплину</option>
-                </select>
-            </div>
+                <!-- Группа -->
+                <div class="form-group" style="flex: 0 1 auto; max-width: 190px">
+                    <label for="lesson-group">Группа</label>
+                    <select id="lesson-group" required>
+                        <option value="">Выберите группу</option>
+                    </select>
+                </div>
 
-            <div class="form-group" style="margin-top: 1rem;">
-                <label for="lesson-classroom">Аудитория</label>
-                <select id="lesson-classroom" required>
-                    <option value="">Выберите аудиторию</option>
-                </select>
-            </div>
+                <!-- Дисциплина -->
+                <div class="form-group" style="flex: 0 1 auto; max-width: 220px">
+                    <label for="lesson-discipline">Дисциплина</label>
+                    <select id="lesson-discipline" required>
+                        <option value="">Выберите дисциплину</option>
+                    </select>
+                </div>
 
-            <div class="form-row" style="margin-top: 1rem;">
-                <div class="form-group" style="flex: 1;">
+                <!-- Аудитория -->
+                <div class="form-group" style="flex: 0 1 auto; max-width: 215px">
+                    <label for="lesson-classroom">Аудитория</label>
+                    <select id="lesson-classroom" required>
+                        <option value="">Выберите аудиторию</option>
+                    </select>
+                </div>
+
+                <!-- День недели -->
+                <div class="form-group" style="flex: 0 1 auto; max-width: 170px">
                     <label for="lesson-day">День недели</label>
                     <select id="lesson-day" required>
                         <option value="">Выберите день</option>
@@ -88,9 +94,11 @@
                         <option value="Суббота">Суббота</option>
                     </select>
                 </div>
-                <div class="form-group" style="flex: 1;">
+
+                <!-- Тип недели (ВЕРТИКАЛЬНО) -->
+                <div class="form-group" style="flex: 0 1 auto; max-width: 192px">
                     <label>Неделя</label>
-                    <div style="display: flex; gap: 0.5rem;">
+                    <div style="display: flex; gap: 0.2rem;">
                         <label class="btn-checkbox">
                             <input type="checkbox" name="weekType" value="Верхняя" id="week-upper">
                             <span class="checkbox-btn">Верхняя</span>
@@ -101,21 +109,22 @@
                         </label>
                     </div>
                 </div>
-            </div>
 
-            <div class="form-row" style="margin-top: 1rem;">
-                <div class="form-group" style="flex: 1;">
+                <!-- Тип занятия -->
+                <div class="form-group" style="flex: 0 1 auto; max-width: 160px">
                     <label for="lesson-type">Тип занятия</label>
                     <select id="lesson-type" required>
-                        <option value="">Выберите тип занятия</option>
-                        <option value="Практическая работа">Практическая работа</option>
+                        <option value="">Выберите тип</option>
+                        <option value="Практическая работа">Практическая</option>
                         <option value="Лекция">Лекция</option>
-                        <option value="Лабораторная работа">Лабораторная работа</option>
+                        <option value="Лабораторная работа">Лабораторная</option>
                     </select>
                 </div>
-                <div class="form-group" style="flex: 1;">
+
+                <!-- Формат занятия (ВЕРТИКАЛЬНО) -->
+                <div class="form-group" style="flex: 0 1 auto; max-width: 170px">
                     <label>Формат занятия</label>
-                    <div style="display: flex; gap: 0.5rem;">
+                    <div style="display: flex; gap: 0.2rem;">
                         <label class="btn-checkbox">
                             <input type="radio" name="lessonFormat" value="Очно" id="format-offline" checked>
                             <span class="checkbox-btn">Очно</span>
@@ -126,17 +135,38 @@
                         </label>
                     </div>
                 </div>
-            </div>
 
-            <div class="form-group" style="margin-top: 1rem;">
-                <label for="lesson-time">Время занятия</label>
-                <select id="lesson-time" required disabled>
-                    <option value="">Сначала выберите день</option>
-                </select>
-            </div>
+                <!-- Время занятия -->
+                <div class="form-group" style="flex: 0 0 auto; max-width: 235px">
+                    <label for="lesson-time">Время занятия</label>
+                    <select id="lesson-time" required disabled>
+                        <option value="">Сначала выберите день</option>
+                    </select>
+                </div>
 
-            <button type="submit" class="btn-primary" style="width: 100%; margin-top: 1rem;">Сохранить</button>
-            <div class="form-alert" id="add-lesson-alert" role="alert"></div>
+                <!-- Кнопка Сохранить (в том же ряду) -->
+                <div class="form-group" style="flex: 0 0 auto;">
+                    <button type="submit" class="btn-primary" style="white-space: nowrap;">Сохранить</button>
+                </div>
+
+            </div> <!-- Закрытие form-row -->
+
+            <div class="form-alert" id="add-lesson-alert" role="alert" style="margin-top: 1rem;"></div>
         </form>
     </div>
-</div>
+    <!-- View Teacher Lessons Modal -->
+    <div class="modal-overlay" id="modal-view-lessons">
+        <div class="modal-content view-lessons-modal">
+            <div class="modal-header">
+                <h2 id="modal-teacher-name">Занятия преподавателя</h2>
+                <button class="modal-close" id="modal-view-lessons-close">&times;</button>
+            </div>
+
+            <div class="lessons-container" id="lessons-container">
+                <!-- Фильтры по дням (добавим позже) -->
+                <div class="loading-lessons">Загрузка занятий...</div>
+            </div>
+        </div>
+    </div>
+</div>
+<div id="modal-backdrop"></div>