354 lines
14 KiB
JavaScript
Executable File
354 lines
14 KiB
JavaScript
Executable File
import { api } from '../api.js';
|
||
import { escapeHtml, showAlert, hideAlert } from '../utils.js';
|
||
|
||
const ROLE_LABELS = { ADMIN: 'Администратор', TEACHER: 'Преподаватель', STUDENT: 'Студент' };
|
||
const ROLE_BADGE = { ADMIN: 'badge-admin', TEACHER: 'badge-teacher', STUDENT: 'badge-student' };
|
||
|
||
export async function initUsers() {
|
||
const usersTbody = document.getElementById('users-tbody');
|
||
const createForm = document.getElementById('create-form');
|
||
|
||
// Элементы модального окна добавления занятия
|
||
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');
|
||
const lessonTypeSelect = document.getElementById('lesson-type');
|
||
const lessonOnlineFormat = document.getElementById('format-online');
|
||
const lessonOfflineFormat = document.getElementById('format-offline');
|
||
const lessonUserId = document.getElementById('lesson-user-id');
|
||
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');
|
||
|
||
// Переменные для хранения загруженных данных
|
||
let groups = [];
|
||
let subjects = [];
|
||
let classrooms = [];
|
||
|
||
// NEW: массивы с временными слотами
|
||
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');
|
||
renderGroupOptions();
|
||
} catch (e) {
|
||
console.error('Ошибка загрузки групп:', e);
|
||
}
|
||
}
|
||
|
||
// Загрузка дисциплин
|
||
async function loadSubjects() {
|
||
try {
|
||
subjects = await api.get('/api/subjects');
|
||
renderSubjectOptions();
|
||
} catch (e) {
|
||
console.error('Ошибка загрузки дисциплин:', e);
|
||
}
|
||
}
|
||
|
||
async function loadClassrooms() {
|
||
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>';
|
||
return;
|
||
}
|
||
|
||
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>`;
|
||
}).join('');
|
||
}
|
||
|
||
// Заполнение select дисциплинами
|
||
function renderSubjectOptions() {
|
||
lessonDisciplineSelect.innerHTML = '<option value="">Выберите дисциплину</option>' +
|
||
subjects.map(s => `<option value="${s.id}">${escapeHtml(s.name)}</option>`).join('');
|
||
}
|
||
|
||
function renderClassroomsOptions() {
|
||
if (!classrooms || classrooms.length ===0) {
|
||
lessonClassroomSelect.innerHTML = '<option value="">Нет доступных аудиторий</option>';
|
||
return;
|
||
}
|
||
|
||
const selectedGroupId = lessonGroupSelect.value;
|
||
const selectedGroup = groups?.find(g => g.id == selectedGroupId);
|
||
const groupSize = selectedGroup?.groupSize || 0;
|
||
|
||
lessonClassroomSelect.innerHTML = '<option value="">Выберите аудиторию</option>' +
|
||
classrooms.map(c => {
|
||
let optionText = escapeHtml(c.name);
|
||
// Добавление текста с инфой о вместимости чел.
|
||
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>`;
|
||
}).join('');
|
||
}
|
||
|
||
lessonGroupSelect.addEventListener('change', function() {
|
||
renderClassroomsOptions();
|
||
});
|
||
|
||
// NEW: функция обновления списка времени в зависимости от дня
|
||
function updateTimeOptions(dayValue) {
|
||
let times = [];
|
||
if (dayValue === "Суббота") {
|
||
times = saturdayTimes;
|
||
} else if (dayValue && dayValue !== '') {
|
||
times = weekdaysTimes;
|
||
} else {
|
||
lessonTimeSelect.innerHTML = '<option value="">Сначала выберите день</option>';
|
||
lessonTimeSelect.disabled = true;
|
||
return;
|
||
}
|
||
|
||
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>';
|
||
}
|
||
}
|
||
|
||
function renderUsers(users) {
|
||
if (!users || !users.length) {
|
||
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('');
|
||
}
|
||
|
||
// Сброс формы модального окна
|
||
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');
|
||
}
|
||
|
||
// Обработчик отправки формы добавления занятия
|
||
addLessonForm.addEventListener('submit', async (e) => {
|
||
e.preventDefault();
|
||
hideAlert('add-lesson-alert');
|
||
|
||
const userId = lessonUserId.value;
|
||
const groupId = lessonGroupSelect.value;
|
||
const subjectId = lessonDisciplineSelect.value;
|
||
const classroomId = lessonClassroomSelect.value;
|
||
const lessonType = lessonTypeSelect.value;
|
||
const dayOfWeek = lessonDaySelect.value;
|
||
const timeSlot = lessonTimeSelect.value; // NEW: получаем выбранное время
|
||
|
||
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;
|
||
}
|
||
|
||
// Определяем выбранный тип недели
|
||
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 = 'Нижняя';
|
||
}
|
||
|
||
try {
|
||
// Отправляем данные на сервер
|
||
const response = await api.post('/api/users/lessons/create', {
|
||
teacherId: parseInt(userId),
|
||
groupId: parseInt(groupId),
|
||
subjectId: parseInt(subjectId),
|
||
classroomId: parseInt(classroomId),
|
||
typeLesson: lessonType,
|
||
lessonFormat: lessonFormat,
|
||
day: dayOfWeek,
|
||
week: weekType,
|
||
time: timeSlot // передаём время
|
||
});
|
||
showAlert('add-lesson-alert', 'Занятие добавлено', 'success');
|
||
// Очищаем только поля, но оставляем userId
|
||
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;
|
||
|
||
// Убираем сообщение через 3 секунды, чтобы можно было добавлять дальше
|
||
setTimeout(() => {
|
||
hideAlert('add-lesson-alert');
|
||
}, 3000);
|
||
} catch (e) {
|
||
showAlert('add-lesson-alert', e.message || 'Ошибка добавления занятия', 'error');
|
||
}
|
||
});
|
||
|
||
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; }
|
||
|
||
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');
|
||
}
|
||
});
|
||
|
||
// Обработчик кликов по таблице
|
||
usersTbody.addEventListener('click', async (e) => {
|
||
const deleteBtn = e.target.closest('.btn-delete');
|
||
if (deleteBtn) {
|
||
if (!confirm('Удалить пользователя?')) return;
|
||
try {
|
||
await api.delete('/api/users/' + deleteBtn.dataset.id);
|
||
loadUsers();
|
||
} catch (e) {
|
||
alert(e.message || 'Ошибка удаления');
|
||
}
|
||
return;
|
||
}
|
||
|
||
const addLessonBtn = e.target.closest('.btn-add-lesson');
|
||
if (addLessonBtn) {
|
||
e.preventDefault();
|
||
if (modalAddLesson) {
|
||
openAddLessonModal(addLessonBtn.dataset.id);
|
||
}
|
||
}
|
||
});
|
||
|
||
// 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()]);
|
||
} |