Зеркалирование "Создать занятие" в "Расписание занятий" из "Пользователи", визуальные изменения этих модалок
This commit is contained in:
@@ -1,5 +1,8 @@
|
||||
<div class="card">
|
||||
<h2>Расписание занятий</h2>
|
||||
<div class="card-header-row">
|
||||
<h2>Расписание занятий</h2>
|
||||
<button class="btn-primary" id="sch-btn-add-lesson">Добавить занятие</button>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table id="schedule-table">
|
||||
<thead>
|
||||
@@ -35,9 +38,142 @@
|
||||
</thead>
|
||||
<tbody id="schedule-tbody">
|
||||
<tr>
|
||||
<td colspan="8" class="loading-row">Загрузка...</td>
|
||||
<td colspan="11" class="loading-row">Загрузка...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== Оверлей для модалок добавления занятия ===== -->
|
||||
<div class="cs-overlay" id="sch-overlay">
|
||||
<div class="cs-overlay-scroll">
|
||||
|
||||
<!-- Модалка 1: Форма добавления -->
|
||||
<div class="cs-modal cs-modal-form card" id="sch-modal-form">
|
||||
<div class="cs-modal-header">
|
||||
<h2>Добавить занятие</h2>
|
||||
<button class="btn-close-panel" id="sch-modal-close">×</button>
|
||||
</div>
|
||||
|
||||
<form id="sch-add-lesson-form">
|
||||
<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="flex: 0 1 auto; max-width: 220px">
|
||||
<label for="sch-teacher">Преподаватель</label>
|
||||
<select id="sch-teacher" required>
|
||||
<option value="">Выберите преподавателя</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Группа -->
|
||||
<div class="form-group" style="flex: 0 1 auto; max-width: 190px">
|
||||
<label for="sch-group">Группа</label>
|
||||
<select id="sch-group" required>
|
||||
<option value="">Выберите группу</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Дисциплина -->
|
||||
<div class="form-group" style="flex: 0 1 auto; max-width: 220px">
|
||||
<label for="sch-discipline">Дисциплина</label>
|
||||
<select id="sch-discipline" required>
|
||||
<option value="">Выберите дисциплину</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Аудитория -->
|
||||
<div class="form-group" style="flex: 0 1 auto; max-width: 215px">
|
||||
<label for="sch-classroom">Аудитория</label>
|
||||
<select id="sch-classroom" required>
|
||||
<option value="">Выберите аудиторию</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- День недели -->
|
||||
<div class="form-group" style="flex: 0 1 auto; max-width: 170px">
|
||||
<label for="sch-day">День недели</label>
|
||||
<select id="sch-day" 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: 0 1 auto; max-width: 192px">
|
||||
<label>Неделя</label>
|
||||
<div style="display: flex; gap: 0.2rem;">
|
||||
<label class="btn-checkbox">
|
||||
<input type="checkbox" name="schWeekType" value="Верхняя" id="sch-week-upper">
|
||||
<span class="checkbox-btn">Верхняя</span>
|
||||
</label>
|
||||
<label class="btn-checkbox">
|
||||
<input type="checkbox" name="schWeekType" value="Нижняя" id="sch-week-lower">
|
||||
<span class="checkbox-btn">Нижняя</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Тип занятия -->
|
||||
<div class="form-group" style="flex: 0 1 auto; max-width: 160px">
|
||||
<label for="sch-type">Тип занятия</label>
|
||||
<select id="sch-type" required>
|
||||
<option value="">Выберите тип</option>
|
||||
<option value="Практическая работа">Практическая</option>
|
||||
<option value="Лекция">Лекция</option>
|
||||
<option value="Лабораторная работа">Лабораторная</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Формат занятия -->
|
||||
<div class="form-group" style="flex: 0 1 auto; max-width: 170px">
|
||||
<label>Формат занятия</label>
|
||||
<div style="display: flex; gap: 0.2rem;">
|
||||
<label class="btn-checkbox">
|
||||
<input type="radio" name="schLessonFormat" value="Очно" id="sch-format-offline" checked>
|
||||
<span class="checkbox-btn">Очно</span>
|
||||
</label>
|
||||
<label class="btn-checkbox">
|
||||
<input type="radio" name="schLessonFormat" value="Онлайн" id="sch-format-online">
|
||||
<span class="checkbox-btn">Онлайн</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Время занятия -->
|
||||
<div class="form-group" style="flex: 0 0 auto; max-width: 235px">
|
||||
<label for="sch-time">Время занятия</label>
|
||||
<select id="sch-time" required disabled>
|
||||
<option value="">Сначала выберите день</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Кнопка Сохранить -->
|
||||
<div class="form-group" style="flex: 0 0 auto;">
|
||||
<button type="submit" class="btn-primary" style="white-space: nowrap;">Сохранить</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="form-alert" id="sch-add-alert" role="alert" style="margin-top: 1rem;"></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Модалка 2: Занятия выбранного преподавателя -->
|
||||
<div class="cs-modal cs-modal-table card" id="sch-modal-lessons" style="display:none;">
|
||||
<div class="cs-modal-header">
|
||||
<h2 id="sch-teacher-name">Занятия преподавателя</h2>
|
||||
</div>
|
||||
<div class="lessons-container" id="sch-lessons-container">
|
||||
<div class="no-lessons">Выберите преподавателя для просмотра занятий</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,187 +1,189 @@
|
||||
<!-- ===== Users Tab ===== -->
|
||||
<div class="card create-card">
|
||||
<h2>Новый пользователь</h2>
|
||||
<form id="create-form">
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="new-username">Имя пользователя</label>
|
||||
<input type="text" id="new-username" placeholder="username" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="new-password">Пароль</label>
|
||||
<input type="text" id="new-password" placeholder="password" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="new-role">Роль</label>
|
||||
<select id="new-role">
|
||||
<option value="STUDENT">Студент</option>
|
||||
<option value="TEACHER">Преподаватель</option>
|
||||
<option value="ADMIN">Администратор</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="new-fullname">ФИО пользователя</label>
|
||||
<input type="text" id="new-fullname" placeholder="Иванов Иван Иванович" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="new-jobtitle">Должность</label>
|
||||
<input type="text" id="new-jobtitle" placeholder="Студент / Доцент" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="new-department">ID Кафедры</label>
|
||||
<input type="number" id="new-department" placeholder="ID" required>
|
||||
</div>
|
||||
<button type="submit" class="btn-primary">Создать</button>
|
||||
</div>
|
||||
<div class="form-alert" id="create-alert" role="alert"></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h2>Все пользователи</h2>
|
||||
<div class="table-wrap">
|
||||
<table id="users-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Имя пользователя</th>
|
||||
<th>ФИО</th>
|
||||
<th>Должность</th>
|
||||
<th>Кафедра</th>
|
||||
<th>Роль</th>
|
||||
<th colspan="2">Действия</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="users-tbody">
|
||||
<tr>
|
||||
<td colspan="8" class="loading-row">Загрузка...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add Lesson Modal -->
|
||||
<div class="modal-overlay" id="modal-add-lesson">
|
||||
<div class="modal-content card">
|
||||
<h2>Добавить занятие</h2>
|
||||
<button class="modal-close" id="modal-add-lesson-close">×</button>
|
||||
<form id="add-lesson-form">
|
||||
<input type="hidden" id="lesson-user-id">
|
||||
|
||||
<!-- Один общий ряд для всех элементов -->
|
||||
<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="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="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-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>
|
||||
<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: 0 1 auto; max-width: 192px">
|
||||
<label>Неделя</label>
|
||||
<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>
|
||||
</label>
|
||||
<label class="btn-checkbox">
|
||||
<input type="checkbox" name="weekType" value="Нижняя" id="week-lower">
|
||||
<span class="checkbox-btn">Нижняя</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Тип занятия -->
|
||||
<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>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Формат занятия (ВЕРТИКАЛЬНО) -->
|
||||
<div class="form-group" style="flex: 0 1 auto; max-width: 170px">
|
||||
<label>Формат занятия</label>
|
||||
<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>
|
||||
</label>
|
||||
<label class="btn-checkbox">
|
||||
<input type="radio" name="lessonFormat" value="Онлайн" id="format-online">
|
||||
<span class="checkbox-btn">Онлайн</span>
|
||||
</label>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<!-- Кнопка Сохранить (в том же ряду) -->
|
||||
<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>
|
||||
<!-- 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">×</button>
|
||||
</div>
|
||||
|
||||
<div class="lessons-container" id="lessons-container">
|
||||
<!-- Фильтры по дням (добавим позже) -->
|
||||
<div class="loading-lessons">Загрузка занятий...</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="modal-backdrop"></div>
|
||||
<!-- ===== Users Tab ===== -->
|
||||
<div class="card create-card">
|
||||
<h2>Новый пользователь</h2>
|
||||
<form id="create-form">
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="new-username">Имя пользователя</label>
|
||||
<input type="text" id="new-username" placeholder="username" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="new-password">Пароль</label>
|
||||
<input type="text" id="new-password" placeholder="password" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="new-role">Роль</label>
|
||||
<select id="new-role">
|
||||
<option value="STUDENT">Студент</option>
|
||||
<option value="TEACHER">Преподаватель</option>
|
||||
<option value="ADMIN">Администратор</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="new-fullname">ФИО пользователя</label>
|
||||
<input type="text" id="new-fullname" placeholder="Иванов Иван Иванович" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="new-jobtitle">Должность</label>
|
||||
<input type="text" id="new-jobtitle" placeholder="Студент / Доцент" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="new-department">ID Кафедры</label>
|
||||
<input type="number" id="new-department" placeholder="ID" required>
|
||||
</div>
|
||||
<button type="submit" class="btn-primary">Создать</button>
|
||||
</div>
|
||||
<div class="form-alert" id="create-alert" role="alert"></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h2>Все пользователи</h2>
|
||||
<div class="table-wrap">
|
||||
<table id="users-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Имя пользователя</th>
|
||||
<th>ФИО</th>
|
||||
<th>Должность</th>
|
||||
<th>Кафедра</th>
|
||||
<th>Роль</th>
|
||||
<th colspan="2">Действия</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="users-tbody">
|
||||
<tr>
|
||||
<td colspan="8" class="loading-row">Загрузка...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== Оверлей для модалок добавления/просмотра занятий ===== -->
|
||||
<div class="cs-overlay" id="users-overlay">
|
||||
<div class="cs-overlay-scroll">
|
||||
|
||||
<!-- Модалка 1: Форма добавления -->
|
||||
<div class="cs-modal cs-modal-form card" id="modal-add-lesson">
|
||||
<div class="cs-modal-header">
|
||||
<h2>Добавить занятие</h2>
|
||||
<button class="btn-close-panel" id="modal-add-lesson-close">×</button>
|
||||
</div>
|
||||
<form id="add-lesson-form">
|
||||
<input type="hidden" id="lesson-user-id">
|
||||
|
||||
<!-- Один общий ряд для всех элементов -->
|
||||
<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="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="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-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>
|
||||
<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: 0 1 auto; max-width: 192px">
|
||||
<label>Неделя</label>
|
||||
<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>
|
||||
</label>
|
||||
<label class="btn-checkbox">
|
||||
<input type="checkbox" name="weekType" value="Нижняя" id="week-lower">
|
||||
<span class="checkbox-btn">Нижняя</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Тип занятия -->
|
||||
<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>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Формат занятия -->
|
||||
<div class="form-group" style="flex: 0 1 auto; max-width: 170px">
|
||||
<label>Формат занятия</label>
|
||||
<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>
|
||||
</label>
|
||||
<label class="btn-checkbox">
|
||||
<input type="radio" name="lessonFormat" value="Онлайн" id="format-online">
|
||||
<span class="checkbox-btn">Онлайн</span>
|
||||
</label>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<!-- Кнопка Сохранить -->
|
||||
<div class="form-group" style="flex: 0 0 auto;">
|
||||
<button type="submit" class="btn-primary" style="white-space: nowrap;">Сохранить</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="form-alert" id="add-lesson-alert" role="alert" style="margin-top: 1rem;"></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Модалка 2: Просмотр занятий преподавателя -->
|
||||
<div class="cs-modal cs-modal-table card" id="modal-view-lessons" style="display:none;">
|
||||
<div class="cs-modal-header">
|
||||
<h2 id="modal-teacher-name">Занятия преподавателя</h2>
|
||||
</div>
|
||||
<div class="lessons-container" id="lessons-container">
|
||||
<div class="loading-lessons">Загрузка занятий...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user