доработал отображение учебного графика
This commit is contained in:
Zuev
869
frontend/admin/js/views/academic-calendar.js
Normal file
869
frontend/admin/js/views/academic-calendar.js
Normal file
@@ -0,0 +1,869 @@
|
||||
import { api } from '../api.js';
|
||||
import { escapeHtml, showAlert, hideAlert } from '../utils.js';
|
||||
|
||||
const DAY_OPTIONS = [
|
||||
{ value: 1, label: 'Понедельник' },
|
||||
{ value: 2, label: 'Вторник' },
|
||||
{ value: 3, label: 'Среда' },
|
||||
{ value: 4, label: 'Четверг' },
|
||||
{ value: 5, label: 'Пятница' },
|
||||
{ value: 6, label: 'Суббота' },
|
||||
{ value: 7, label: 'Воскресенье' }
|
||||
];
|
||||
|
||||
const SEMESTER_LABELS = {
|
||||
autumn: 'осенний',
|
||||
spring: 'весенний'
|
||||
};
|
||||
|
||||
export async function initAcademicCalendar() {
|
||||
const academicYearForm = document.getElementById('academic-year-form');
|
||||
const academicYearFormTitle = document.getElementById('academic-year-form-title');
|
||||
const academicYearIdInput = document.getElementById('academic-year-id');
|
||||
const academicYearTitleInput = document.getElementById('academic-year-title');
|
||||
const academicYearStartInput = document.getElementById('academic-year-start');
|
||||
const academicYearEndInput = document.getElementById('academic-year-end');
|
||||
const academicYearResetButton = document.getElementById('academic-year-reset');
|
||||
const academicYearsTbody = document.getElementById('academic-years-tbody');
|
||||
const academicYearsRefreshButton = document.getElementById('academic-years-refresh');
|
||||
|
||||
const semesterForm = document.getElementById('semester-form');
|
||||
const semesterFormTitle = document.getElementById('semester-form-title');
|
||||
const semesterIdInput = document.getElementById('semester-id');
|
||||
const semesterYearSelect = document.getElementById('semester-year');
|
||||
const semesterTypeSelect = document.getElementById('semester-type');
|
||||
const semesterStartInput = document.getElementById('semester-start');
|
||||
const semesterEndInput = document.getElementById('semester-end');
|
||||
const semesterResetButton = document.getElementById('semester-reset');
|
||||
|
||||
const calendarForm = document.getElementById('academic-calendar-form');
|
||||
const calendarFormTitle = document.getElementById('academic-calendar-form-title');
|
||||
const calendarIdInput = document.getElementById('academic-calendar-id');
|
||||
const calendarTitleInput = document.getElementById('academic-calendar-title');
|
||||
const calendarYearSelect = document.getElementById('academic-calendar-year');
|
||||
const calendarSpecialtySelect = document.getElementById('academic-calendar-specialty');
|
||||
const calendarProfileSelect = document.getElementById('academic-calendar-profile');
|
||||
const calendarStudyFormSelect = document.getElementById('academic-calendar-study-form');
|
||||
const calendarCourseCountInput = document.getElementById('academic-calendar-course-count');
|
||||
const calendarResetButton = document.getElementById('academic-calendar-reset');
|
||||
const calendarsRefreshButton = document.getElementById('academic-calendars-refresh');
|
||||
const calendarsTbody = document.getElementById('academic-calendars-tbody');
|
||||
|
||||
const editorCalendarSelect = document.getElementById('calendar-editor-calendar');
|
||||
const editorLoadButton = document.getElementById('calendar-editor-load');
|
||||
const editorSaveButton = document.getElementById('calendar-editor-save');
|
||||
const fillCourseSelect = document.getElementById('calendar-fill-course');
|
||||
const fillStartInput = document.getElementById('calendar-fill-start');
|
||||
const fillEndInput = document.getElementById('calendar-fill-end');
|
||||
const fillActivitySelect = document.getElementById('calendar-fill-activity');
|
||||
const fillApplyButton = document.getElementById('calendar-fill-apply');
|
||||
const calendarGrid = document.getElementById('calendar-grid');
|
||||
const calendarTotals = document.getElementById('calendar-totals');
|
||||
const calendarDayDialog = document.getElementById('calendar-day-dialog');
|
||||
const calendarDayDialogClose = document.getElementById('calendar-day-dialog-close');
|
||||
const calendarDayDialogDate = document.getElementById('calendar-day-dialog-date');
|
||||
const calendarDayDialogCourse = document.getElementById('calendar-day-dialog-course');
|
||||
const calendarDayDialogWeek = document.getElementById('calendar-day-dialog-week');
|
||||
const calendarDayDialogDay = document.getElementById('calendar-day-dialog-day');
|
||||
const calendarDayDialogActivitySummary = document.getElementById('calendar-day-dialog-activity-summary');
|
||||
const calendarDayDialogActivitySelect = document.getElementById('calendar-day-dialog-activity');
|
||||
|
||||
let academicYears = [];
|
||||
let semesters = [];
|
||||
let specialties = [];
|
||||
let profilesBySpecialty = new Map();
|
||||
let studyForms = [];
|
||||
let activityTypes = [];
|
||||
let calendars = [];
|
||||
let activeCalendarDay = null;
|
||||
|
||||
bindEvents();
|
||||
|
||||
try {
|
||||
await Promise.all([loadBaseLists(), loadYears(), loadStudyForms(), loadActivityTypes()]);
|
||||
await loadCalendars();
|
||||
} catch (error) {
|
||||
showAlert('academic-calendar-alert', error.message || 'Ошибка загрузки календарных графиков', 'error');
|
||||
}
|
||||
|
||||
function bindEvents() {
|
||||
academicYearsRefreshButton?.addEventListener('click', loadYears);
|
||||
calendarsRefreshButton?.addEventListener('click', loadCalendars);
|
||||
academicYearResetButton?.addEventListener('click', resetAcademicYearForm);
|
||||
semesterResetButton?.addEventListener('click', resetSemesterForm);
|
||||
calendarResetButton?.addEventListener('click', resetCalendarForm);
|
||||
calendarSpecialtySelect?.addEventListener('change', () => populateProfileSelect(calendarProfileSelect, calendarSpecialtySelect.value));
|
||||
editorLoadButton?.addEventListener('click', loadCalendarGrid);
|
||||
editorSaveButton?.addEventListener('click', saveCalendarGrid);
|
||||
fillApplyButton?.addEventListener('click', applyCalendarFill);
|
||||
|
||||
calendarGrid?.addEventListener('change', (event) => {
|
||||
if (event.target.matches('.calendar-day-activity')) {
|
||||
updateCalendarDayVisual(event.target.closest('.calendar-day'));
|
||||
renderCalendarTotals();
|
||||
}
|
||||
});
|
||||
calendarGrid?.addEventListener('click', (event) => {
|
||||
const day = event.target.closest('.calendar-day');
|
||||
if (day) openCalendarDayDialog(day);
|
||||
});
|
||||
calendarGrid?.addEventListener('keydown', (event) => {
|
||||
if (event.key !== 'Enter' && event.key !== ' ') return;
|
||||
const day = event.target.closest('.calendar-day');
|
||||
if (!day) return;
|
||||
event.preventDefault();
|
||||
openCalendarDayDialog(day);
|
||||
});
|
||||
calendarDayDialogClose?.addEventListener('click', closeCalendarDayDialog);
|
||||
calendarDayDialog?.addEventListener('click', (event) => {
|
||||
if (event.target === calendarDayDialog) closeCalendarDayDialog();
|
||||
});
|
||||
calendarDayDialogActivitySelect?.addEventListener('change', () => {
|
||||
if (!activeCalendarDay) return;
|
||||
const select = activeCalendarDay.querySelector('.calendar-day-activity');
|
||||
select.value = calendarDayDialogActivitySelect.value;
|
||||
updateCalendarDayVisual(activeCalendarDay);
|
||||
updateCalendarDayDialogSummary(activeCalendarDay);
|
||||
renderCalendarTotals();
|
||||
});
|
||||
|
||||
academicYearForm?.addEventListener('submit', saveAcademicYear);
|
||||
semesterForm?.addEventListener('submit', saveSemester);
|
||||
calendarForm?.addEventListener('submit', saveCalendar);
|
||||
|
||||
academicYearsTbody?.addEventListener('click', handleAcademicYearTableClick);
|
||||
calendarsTbody?.addEventListener('click', handleCalendarTableClick);
|
||||
}
|
||||
|
||||
async function loadBaseLists() {
|
||||
specialties = await api.get('/api/specialties');
|
||||
await loadProfiles();
|
||||
populateSpecialtySelects();
|
||||
}
|
||||
|
||||
async function loadProfiles() {
|
||||
const pairs = await Promise.all(specialties.map(async (speciality) => {
|
||||
const profiles = await api.get(`/api/specialties/${speciality.id}/profiles`);
|
||||
return [String(speciality.id), profiles];
|
||||
}));
|
||||
profilesBySpecialty = new Map(pairs);
|
||||
}
|
||||
|
||||
async function loadYears() {
|
||||
academicYearsTbody.innerHTML = '<tr><td colspan="4" class="loading-row">Загрузка...</td></tr>';
|
||||
try {
|
||||
academicYears = await api.get('/api/admin/calendar/years');
|
||||
semesters = academicYears.flatMap(year => year.semesters || []);
|
||||
renderAcademicYears();
|
||||
populateYearSelects();
|
||||
} catch (error) {
|
||||
academicYearsTbody.innerHTML = `<tr><td colspan="4" class="loading-row">Ошибка загрузки: ${escapeHtml(error.message)}</td></tr>`;
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
function renderAcademicYears() {
|
||||
if (!academicYears.length) {
|
||||
academicYearsTbody.innerHTML = '<tr><td colspan="4" class="loading-row">Учебные годы не созданы</td></tr>';
|
||||
return;
|
||||
}
|
||||
academicYearsTbody.innerHTML = academicYears.map(year => `
|
||||
<tr>
|
||||
<td>${escapeHtml(year.title)}</td>
|
||||
<td>${escapeHtml(year.startDate)} - ${escapeHtml(year.endDate)}</td>
|
||||
<td>${renderSemesterList(year.semesters || [])}</td>
|
||||
<td>
|
||||
<button class="btn-edit-classroom btn-edit-year" data-id="${year.id}">Изменить</button>
|
||||
<button class="btn-delete btn-delete-year" data-id="${year.id}">Удалить</button>
|
||||
</td>
|
||||
</tr>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
function renderSemesterList(items) {
|
||||
if (!items.length) return '<span class="muted">Нет семестров</span>';
|
||||
return items.map(semester => `
|
||||
<div class="schedule-semester-line">
|
||||
${escapeHtml(semesterLabel(semester))}
|
||||
<button class="btn-edit-classroom btn-edit-semester" data-id="${semester.id}">Изменить</button>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
async function saveAcademicYear(event) {
|
||||
event.preventDefault();
|
||||
hideAlert('academic-year-alert');
|
||||
const payload = {
|
||||
title: academicYearTitleInput.value.trim(),
|
||||
startDate: academicYearStartInput.value,
|
||||
endDate: academicYearEndInput.value
|
||||
};
|
||||
try {
|
||||
if (!payload.title || !payload.startDate || !payload.endDate) throw new Error('Заполните название и даты учебного года');
|
||||
const id = academicYearIdInput.value;
|
||||
await (id
|
||||
? api.put('/api/admin/calendar/years/' + id, payload)
|
||||
: api.post('/api/admin/calendar/years', payload));
|
||||
showAlert('academic-year-alert', 'Учебный год сохранён', 'success');
|
||||
resetAcademicYearForm();
|
||||
await loadYears();
|
||||
await loadCalendars();
|
||||
} catch (error) {
|
||||
showAlert('academic-year-alert', error.message || 'Ошибка сохранения учебного года', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function handleAcademicYearTableClick(event) {
|
||||
const editYearButton = event.target.closest('.btn-edit-year');
|
||||
const deleteYearButton = event.target.closest('.btn-delete-year');
|
||||
const editSemesterButton = event.target.closest('.btn-edit-semester');
|
||||
|
||||
if (editYearButton) {
|
||||
const year = academicYears.find(item => item.id == editYearButton.dataset.id);
|
||||
if (!year) return;
|
||||
academicYearFormTitle.textContent = 'Редактирование учебного года';
|
||||
academicYearIdInput.value = year.id;
|
||||
academicYearTitleInput.value = year.title || '';
|
||||
academicYearStartInput.value = year.startDate || '';
|
||||
academicYearEndInput.value = year.endDate || '';
|
||||
hideAlert('academic-year-alert');
|
||||
academicYearForm.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
return;
|
||||
}
|
||||
|
||||
if (editSemesterButton) {
|
||||
const semester = semesters.find(item => item.id == editSemesterButton.dataset.id);
|
||||
if (!semester) return;
|
||||
semesterFormTitle.textContent = 'Редактирование семестра';
|
||||
semesterIdInput.value = semester.id;
|
||||
semesterYearSelect.value = semester.academicYearId || '';
|
||||
semesterTypeSelect.value = normalizeSemesterType(semester.semesterType);
|
||||
semesterStartInput.value = semester.startDate || '';
|
||||
semesterEndInput.value = semester.endDate || '';
|
||||
syncSelects(semesterYearSelect, semesterTypeSelect);
|
||||
hideAlert('semester-alert');
|
||||
semesterForm.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
return;
|
||||
}
|
||||
|
||||
if (deleteYearButton) {
|
||||
if (!confirm('Удалить учебный год вместе с семестрами и календарными графиками?')) return;
|
||||
try {
|
||||
await api.delete('/api/admin/calendar/years/' + deleteYearButton.dataset.id);
|
||||
showAlert('academic-year-alert', 'Учебный год удалён', 'success');
|
||||
await loadYears();
|
||||
await loadCalendars();
|
||||
} catch (error) {
|
||||
showAlert('academic-year-alert', error.message || 'Ошибка удаления учебного года', 'error');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function resetAcademicYearForm() {
|
||||
academicYearForm.reset();
|
||||
academicYearFormTitle.textContent = 'Учебный год';
|
||||
academicYearIdInput.value = '';
|
||||
hideAlert('academic-year-alert');
|
||||
}
|
||||
|
||||
async function saveSemester(event) {
|
||||
event.preventDefault();
|
||||
hideAlert('semester-alert');
|
||||
const yearId = semesterYearSelect.value;
|
||||
const payload = {
|
||||
semesterType: semesterTypeSelect.value,
|
||||
startDate: semesterStartInput.value,
|
||||
endDate: semesterEndInput.value
|
||||
};
|
||||
try {
|
||||
if (!yearId || !payload.semesterType || !payload.startDate || !payload.endDate) {
|
||||
throw new Error('Заполните учебный год, тип и даты семестра');
|
||||
}
|
||||
const id = semesterIdInput.value;
|
||||
await (id
|
||||
? api.put('/api/admin/calendar/semesters/' + id, payload)
|
||||
: api.post(`/api/admin/calendar/years/${yearId}/semesters`, payload));
|
||||
showAlert('semester-alert', 'Семестр сохранён', 'success');
|
||||
resetSemesterForm();
|
||||
await loadYears();
|
||||
} catch (error) {
|
||||
showAlert('semester-alert', error.message || 'Ошибка сохранения семестра', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
function resetSemesterForm() {
|
||||
semesterForm.reset();
|
||||
semesterFormTitle.textContent = 'Семестр';
|
||||
semesterIdInput.value = '';
|
||||
syncSelects(semesterYearSelect, semesterTypeSelect);
|
||||
hideAlert('semester-alert');
|
||||
}
|
||||
|
||||
async function loadStudyForms() {
|
||||
studyForms = await api.get('/api/education-forms');
|
||||
populateStudyFormSelect();
|
||||
}
|
||||
|
||||
async function loadActivityTypes() {
|
||||
activityTypes = await api.get('/api/admin/calendar/activity-types');
|
||||
populateActivitySelects();
|
||||
}
|
||||
|
||||
async function loadCalendars() {
|
||||
calendarsTbody.innerHTML = '<tr><td colspan="7" class="loading-row">Загрузка...</td></tr>';
|
||||
try {
|
||||
calendars = await api.get('/api/admin/academic-calendars');
|
||||
renderCalendars();
|
||||
populateEditorCalendarSelect();
|
||||
} catch (error) {
|
||||
calendarsTbody.innerHTML = `<tr><td colspan="7" class="loading-row">Ошибка загрузки: ${escapeHtml(error.message)}</td></tr>`;
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
function renderCalendars() {
|
||||
if (!calendars.length) {
|
||||
calendarsTbody.innerHTML = '<tr><td colspan="7" class="loading-row">Календарные графики не созданы</td></tr>';
|
||||
return;
|
||||
}
|
||||
calendarsTbody.innerHTML = calendars.map(calendar => `
|
||||
<tr>
|
||||
<td>${escapeHtml(calendar.title)}</td>
|
||||
<td>${escapeHtml(calendar.academicYearTitle || '-')}</td>
|
||||
<td>${escapeHtml(`${calendar.specialtyCode || ''} ${calendar.specialtyName || ''}`.trim() || '-')}</td>
|
||||
<td>${escapeHtml(calendar.specialtyProfileName || '-')}</td>
|
||||
<td>${escapeHtml(calendar.studyFormName || '-')}</td>
|
||||
<td>${escapeHtml(String(calendar.courseCount || '-'))}</td>
|
||||
<td>
|
||||
<button class="btn-edit-classroom btn-edit-calendar" data-id="${calendar.id}">Изменить</button>
|
||||
<button class="btn-edit-classroom btn-open-calendar-grid" data-id="${calendar.id}">Сетка</button>
|
||||
<button class="btn-delete btn-delete-calendar" data-id="${calendar.id}">Удалить</button>
|
||||
</td>
|
||||
</tr>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
async function saveCalendar(event) {
|
||||
event.preventDefault();
|
||||
hideAlert('academic-calendar-alert');
|
||||
const payload = {
|
||||
id: calendarIdInput.value ? Number(calendarIdInput.value) : null,
|
||||
title: calendarTitleInput.value.trim(),
|
||||
academicYearId: Number(calendarYearSelect.value),
|
||||
specialtyId: Number(calendarSpecialtySelect.value),
|
||||
specialtyProfileId: Number(calendarProfileSelect.value),
|
||||
studyFormId: Number(calendarStudyFormSelect.value),
|
||||
courseCount: Number(calendarCourseCountInput.value)
|
||||
};
|
||||
try {
|
||||
if (!payload.title || !payload.academicYearId || !payload.specialtyId
|
||||
|| !payload.specialtyProfileId || !payload.studyFormId || !payload.courseCount) {
|
||||
throw new Error('Заполните все поля календарного графика');
|
||||
}
|
||||
const id = calendarIdInput.value;
|
||||
const saved = id
|
||||
? await api.put('/api/admin/academic-calendars/' + id, payload)
|
||||
: await api.post('/api/admin/academic-calendars', payload);
|
||||
showAlert('academic-calendar-alert', `График "${escapeHtml(saved.title)}" сохранён`, 'success');
|
||||
resetCalendarForm();
|
||||
await loadCalendars();
|
||||
} catch (error) {
|
||||
showAlert('academic-calendar-alert', error.message || 'Ошибка сохранения календарного графика', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function handleCalendarTableClick(event) {
|
||||
const editButton = event.target.closest('.btn-edit-calendar');
|
||||
const gridButton = event.target.closest('.btn-open-calendar-grid');
|
||||
const deleteButton = event.target.closest('.btn-delete-calendar');
|
||||
|
||||
if (editButton) {
|
||||
const calendar = calendars.find(item => item.id == editButton.dataset.id);
|
||||
if (!calendar) return;
|
||||
calendarFormTitle.textContent = 'Редактирование календарного графика';
|
||||
calendarIdInput.value = calendar.id;
|
||||
calendarTitleInput.value = calendar.title || '';
|
||||
calendarYearSelect.value = calendar.academicYearId || '';
|
||||
calendarSpecialtySelect.value = calendar.specialtyId || '';
|
||||
populateProfileSelect(calendarProfileSelect, calendarSpecialtySelect.value, calendar.specialtyProfileId);
|
||||
calendarStudyFormSelect.value = calendar.studyFormId || '';
|
||||
calendarCourseCountInput.value = calendar.courseCount || 4;
|
||||
syncSelects(calendarYearSelect, calendarSpecialtySelect, calendarProfileSelect, calendarStudyFormSelect);
|
||||
hideAlert('academic-calendar-alert');
|
||||
calendarForm.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
return;
|
||||
}
|
||||
|
||||
if (gridButton) {
|
||||
editorCalendarSelect.value = gridButton.dataset.id;
|
||||
syncSelects(editorCalendarSelect);
|
||||
await loadCalendarGrid();
|
||||
calendarGrid.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
return;
|
||||
}
|
||||
|
||||
if (deleteButton) {
|
||||
if (!confirm('Удалить календарный график?')) return;
|
||||
try {
|
||||
await api.delete('/api/admin/academic-calendars/' + deleteButton.dataset.id);
|
||||
showAlert('academic-calendar-alert', 'Календарный график удалён', 'success');
|
||||
await loadCalendars();
|
||||
} catch (error) {
|
||||
showAlert('academic-calendar-alert', error.message || 'Ошибка удаления календарного графика', 'error');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function resetCalendarForm() {
|
||||
calendarForm.reset();
|
||||
calendarFormTitle.textContent = 'Календарный учебный график';
|
||||
calendarIdInput.value = '';
|
||||
calendarCourseCountInput.value = 4;
|
||||
populateProfileSelect(calendarProfileSelect, calendarSpecialtySelect.value);
|
||||
syncSelects(calendarYearSelect, calendarSpecialtySelect, calendarProfileSelect, calendarStudyFormSelect);
|
||||
hideAlert('academic-calendar-alert');
|
||||
}
|
||||
|
||||
async function loadCalendarGrid() {
|
||||
hideAlert('calendar-editor-alert');
|
||||
const calendar = selectedEditorCalendar();
|
||||
if (!calendar) {
|
||||
showAlert('calendar-editor-alert', 'Выберите календарный график', 'error');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const rows = await api.get(`/api/admin/academic-calendars/${calendar.id}/grid`);
|
||||
const gridRows = rows.length ? rows : buildDefaultGrid(calendar);
|
||||
renderCalendarGrid(gridRows);
|
||||
showAlert('calendar-editor-alert', rows.length ? 'Сетка загружена' : 'Подготовлена новая сетка по датам учебного года', 'success');
|
||||
} catch (error) {
|
||||
showAlert('calendar-editor-alert', error.message || 'Ошибка загрузки сетки', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function saveCalendarGrid() {
|
||||
hideAlert('calendar-editor-alert');
|
||||
const calendar = selectedEditorCalendar();
|
||||
if (!calendar) {
|
||||
showAlert('calendar-editor-alert', 'Выберите календарный график', 'error');
|
||||
return;
|
||||
}
|
||||
const rows = Array.from(calendarGrid.querySelectorAll('.calendar-day')).map(day => ({
|
||||
calendarId: calendar.id,
|
||||
courseNumber: Number(day.dataset.course),
|
||||
date: day.dataset.date,
|
||||
weekNumber: Number(day.dataset.week),
|
||||
dayOfWeek: Number(day.dataset.day),
|
||||
activityTypeId: Number(day.querySelector('.calendar-day-activity').value)
|
||||
}));
|
||||
if (!rows.length) {
|
||||
showAlert('calendar-editor-alert', 'Сначала загрузите сетку графика', 'error');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await api.put(`/api/admin/academic-calendars/${calendar.id}/grid`, rows);
|
||||
showAlert('calendar-editor-alert', 'Календарный учебный график сохранён', 'success');
|
||||
await loadCalendarGrid();
|
||||
} catch (error) {
|
||||
showAlert('calendar-editor-alert', error.message || 'Ошибка сохранения сетки', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
function applyCalendarFill() {
|
||||
hideAlert('calendar-editor-alert');
|
||||
const activityId = fillActivitySelect.value;
|
||||
const start = fillStartInput.value;
|
||||
const end = fillEndInput.value;
|
||||
if (!activityId || !start || !end) {
|
||||
showAlert('calendar-editor-alert', 'Выберите даты и код активности для заполнения', 'error');
|
||||
return;
|
||||
}
|
||||
if (end < start) {
|
||||
showAlert('calendar-editor-alert', 'Дата окончания не может быть раньше даты начала', 'error');
|
||||
return;
|
||||
}
|
||||
const course = fillCourseSelect.value;
|
||||
let changed = 0;
|
||||
calendarGrid.querySelectorAll('.calendar-day').forEach(day => {
|
||||
const sameCourse = !course || day.dataset.course === course;
|
||||
const inRange = day.dataset.date >= start && day.dataset.date <= end;
|
||||
if (sameCourse && inRange) {
|
||||
day.querySelector('.calendar-day-activity').value = activityId;
|
||||
updateCalendarDayVisual(day);
|
||||
changed += 1;
|
||||
}
|
||||
});
|
||||
renderCalendarTotals();
|
||||
showAlert('calendar-editor-alert', `Обновлено ячеек: ${changed}`, 'success');
|
||||
}
|
||||
|
||||
function renderCalendarGrid(rows) {
|
||||
const grouped = groupBy(rows, row => row.courseNumber);
|
||||
calendarGrid.innerHTML = Array.from(grouped.entries()).map(([course, courseRows]) => `
|
||||
<section class="calendar-course-block">
|
||||
<div class="calendar-course-header">
|
||||
<h3>${course} курс</h3>
|
||||
<span>${courseRows.length} дней</span>
|
||||
</div>
|
||||
<div class="calendar-semesters-grid">
|
||||
${renderCourseSemesters(Number(course), courseRows)}
|
||||
</div>
|
||||
</section>
|
||||
`).join('');
|
||||
populateFillCourseSelect();
|
||||
renderCalendarTotals();
|
||||
}
|
||||
|
||||
function renderCourseSemesters(course, courseRows) {
|
||||
const calendar = selectedEditorCalendar();
|
||||
const semestersForCourse = semesterBlocksForCourse(calendar, course, courseRows);
|
||||
return semestersForCourse.map(block => `
|
||||
<section class="calendar-semester-block">
|
||||
<div class="calendar-semester-header">
|
||||
<h4>${block.semesterNumber} семестр</h4>
|
||||
<span>${escapeHtml(block.caption)}</span>
|
||||
</div>
|
||||
${renderSemesterTable(block.rows)}
|
||||
</section>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
function renderSemesterTable(rows) {
|
||||
if (!rows.length) {
|
||||
return '<div class="calendar-empty-semester">Нет дат в этом семестре</div>';
|
||||
}
|
||||
|
||||
const rowsByWeek = groupBy(rows, row => row.weekNumber);
|
||||
const weeks = Array.from(rowsByWeek.keys()).sort((a, b) => Number(a) - Number(b));
|
||||
const cellByWeekAndDay = new Map(rows.map(row => [`${row.weekNumber}:${row.dayOfWeek}`, row]));
|
||||
return `
|
||||
<div class="calendar-semester-table-wrap">
|
||||
<table class="calendar-semester-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="calendar-day-head">День</th>
|
||||
${weeks.map(week => `<th title="Неделя ${week} учебного года">${week}</th>`).join('')}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
${DAY_OPTIONS.map(day => `
|
||||
<tr>
|
||||
<th class="calendar-day-head">${escapeHtml(day.label.slice(0, 2))}</th>
|
||||
${weeks.map(week => {
|
||||
const row = cellByWeekAndDay.get(`${week}:${day.value}`);
|
||||
return row ? renderCalendarDay(row) : '<td class="calendar-empty-day"></td>';
|
||||
}).join('')}
|
||||
</tr>
|
||||
`).join('')}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function renderCalendarDay(row) {
|
||||
const selected = row.activityTypeId || activityIdByCode(row.activityCode) || theoryActivityId();
|
||||
const dayName = shortDayLabel(row.dayOfWeek);
|
||||
const activity = activityById(selected) || activityTypes[0] || {};
|
||||
const code = activity.code || row.activityCode || 'Т';
|
||||
const color = activity.colorCode || '#64748b';
|
||||
return `
|
||||
<td class="calendar-day"
|
||||
data-course="${row.courseNumber}"
|
||||
data-date="${row.date}"
|
||||
data-week="${row.weekNumber}"
|
||||
data-day="${row.dayOfWeek}"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
aria-label="${escapeHtml(`${formatShortDate(row.date)} ${dayName}, ${row.weekNumber} неделя, код ${code}`)}"
|
||||
title="${escapeHtml(`${formatLongDate(row.date)}, ${dayName}, ${row.weekNumber} неделя, ${code} - ${activity.name || ''}`)}"
|
||||
style="--activity-color:${escapeHtml(color)}">
|
||||
<strong class="calendar-day-code">${escapeHtml(code)}</strong>
|
||||
<select class="calendar-day-activity custom-select-initialized" aria-hidden="true" tabindex="-1">${options(activityTypes.map(toActivityOption), selected)}</select>
|
||||
</td>
|
||||
`;
|
||||
}
|
||||
|
||||
function openCalendarDayDialog(day) {
|
||||
activeCalendarDay = day;
|
||||
calendarDayDialogDate.textContent = `${formatLongDate(day.dataset.date)} (${shortDayLabel(day.dataset.day)})`;
|
||||
calendarDayDialogCourse.textContent = `${day.dataset.course} курс`;
|
||||
calendarDayDialogWeek.textContent = `${day.dataset.week} неделя`;
|
||||
calendarDayDialogDay.textContent = dayLabel(day.dataset.day);
|
||||
calendarDayDialogActivitySelect.innerHTML = options(
|
||||
activityTypes.map(toActivityOption),
|
||||
day.querySelector('.calendar-day-activity').value
|
||||
);
|
||||
syncSelects(calendarDayDialogActivitySelect);
|
||||
updateCalendarDayDialogSummary(day);
|
||||
calendarDayDialog.classList.add('open');
|
||||
}
|
||||
|
||||
function closeCalendarDayDialog() {
|
||||
activeCalendarDay = null;
|
||||
calendarDayDialog.classList.remove('open');
|
||||
}
|
||||
|
||||
function updateCalendarDayDialogSummary(day) {
|
||||
const activity = activityById(day.querySelector('.calendar-day-activity').value);
|
||||
if (!activity) {
|
||||
calendarDayDialogActivitySummary.innerHTML = '';
|
||||
return;
|
||||
}
|
||||
calendarDayDialogActivitySummary.innerHTML = `
|
||||
<span class="calendar-day-dialog-code" style="--activity-color:${escapeHtml(activity.colorCode || '#64748b')}">${escapeHtml(activity.code)}</span>
|
||||
<div>
|
||||
<strong>${escapeHtml(activity.name)}</strong>
|
||||
<p>${escapeHtml(activity.description || (activity.allowSchedule ? 'Обычные пары разрешены' : 'Обычные пары не генерируются'))}</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function updateCalendarDayVisual(day) {
|
||||
if (!day) return;
|
||||
const select = day.querySelector('.calendar-day-activity');
|
||||
const activity = activityById(select.value);
|
||||
const code = activity?.code || '-';
|
||||
const color = activity?.colorCode || '#64748b';
|
||||
day.style.setProperty('--activity-color', color);
|
||||
day.querySelector('.calendar-day-code').textContent = code;
|
||||
day.setAttribute('aria-label', `${formatShortDate(day.dataset.date)} ${shortDayLabel(day.dataset.day)}, ${day.dataset.week} неделя, код ${code}`);
|
||||
day.setAttribute('title', `${formatLongDate(day.dataset.date)}, ${shortDayLabel(day.dataset.day)}, ${day.dataset.week} неделя, ${code} - ${activity?.name || ''}`);
|
||||
}
|
||||
|
||||
function buildDefaultGrid(calendar) {
|
||||
const rows = [];
|
||||
const dates = enumerateDates(calendar.academicYearStartDate, calendar.academicYearEndDate);
|
||||
for (let course = 1; course <= calendar.courseCount; course += 1) {
|
||||
dates.forEach((date, index) => {
|
||||
rows.push({
|
||||
id: null,
|
||||
calendarId: calendar.id,
|
||||
courseNumber: course,
|
||||
date: date.iso,
|
||||
weekNumber: Math.floor(index / 7) + 1,
|
||||
dayOfWeek: date.dayOfWeek,
|
||||
activityTypeId: theoryActivityId(),
|
||||
activityCode: 'Т'
|
||||
});
|
||||
});
|
||||
}
|
||||
return rows;
|
||||
}
|
||||
|
||||
function semesterBlocksForCourse(calendar, course, courseRows) {
|
||||
const sortedRows = [...courseRows].sort((a, b) => String(a.date).localeCompare(String(b.date)));
|
||||
const year = academicYears.find(item => String(item.id) === String(calendar?.academicYearId));
|
||||
const yearSemesters = [...(year?.semesters || [])]
|
||||
.sort((a, b) => String(a.startDate).localeCompare(String(b.startDate)));
|
||||
|
||||
if (!yearSemesters.length) {
|
||||
return [{
|
||||
semesterNumber: `${course * 2 - 1}-${course * 2}`,
|
||||
caption: dateRangeCaption(sortedRows),
|
||||
rows: sortedRows
|
||||
}];
|
||||
}
|
||||
|
||||
return yearSemesters.map((semester, index) => {
|
||||
const nextSemester = yearSemesters[index + 1];
|
||||
const startDate = index === 0
|
||||
? minIso(calendar.academicYearStartDate, semester.startDate)
|
||||
: semester.startDate;
|
||||
const endDate = nextSemester
|
||||
? previousIsoDate(nextSemester.startDate)
|
||||
: maxIso(calendar.academicYearEndDate, semester.endDate);
|
||||
const rows = sortedRows.filter(row => row.date >= startDate && row.date <= endDate);
|
||||
return {
|
||||
semesterNumber: course * 2 - 1 + index,
|
||||
caption: dateRangeCaption(rows) || `${formatLongDate(startDate)} - ${formatLongDate(endDate)}`,
|
||||
rows
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
function renderCalendarTotals() {
|
||||
const counts = new Map();
|
||||
calendarGrid.querySelectorAll('.calendar-day-activity').forEach(select => {
|
||||
const activity = activityById(select.value);
|
||||
const key = activity ? activity.code : '-';
|
||||
counts.set(key, (counts.get(key) || 0) + 1);
|
||||
});
|
||||
calendarTotals.innerHTML = Array.from(counts.entries())
|
||||
.sort(([a], [b]) => a.localeCompare(b, 'ru'))
|
||||
.map(([code, count]) => {
|
||||
const activity = activityTypes.find(item => item.code === code);
|
||||
return `<span class="calendar-total-chip" style="--chip-color:${escapeHtml(activity?.colorCode || '#64748b')}">${escapeHtml(code)}: ${count}</span>`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
function populateYearSelects() {
|
||||
const yearOptions = '<option value="">Выберите учебный год</option>' +
|
||||
academicYears.map(year => `<option value="${year.id}">${escapeHtml(year.title)}</option>`).join('');
|
||||
semesterYearSelect.innerHTML = yearOptions;
|
||||
calendarYearSelect.innerHTML = yearOptions;
|
||||
syncSelects(semesterYearSelect, calendarYearSelect);
|
||||
}
|
||||
|
||||
function populateSpecialtySelects() {
|
||||
calendarSpecialtySelect.innerHTML = '<option value="">Выберите специальность</option>' +
|
||||
specialties.map(speciality => `<option value="${speciality.id}">${escapeHtml(specialityLabel(speciality))}</option>`).join('');
|
||||
populateProfileSelect(calendarProfileSelect, calendarSpecialtySelect.value);
|
||||
syncSelects(calendarSpecialtySelect);
|
||||
}
|
||||
|
||||
function populateProfileSelect(select, specialtyId, selectedProfileId = null) {
|
||||
const profiles = profilesBySpecialty.get(String(specialtyId)) || [];
|
||||
select.innerHTML = profiles.length
|
||||
? '<option value="">Выберите профиль</option>' + profiles.map(profile =>
|
||||
`<option value="${profile.id}">${escapeHtml(profile.name)}</option>`
|
||||
).join('')
|
||||
: '<option value="">Нет профилей</option>';
|
||||
if (selectedProfileId && profiles.some(profile => String(profile.id) === String(selectedProfileId))) {
|
||||
select.value = selectedProfileId;
|
||||
}
|
||||
syncSelects(select);
|
||||
}
|
||||
|
||||
function populateStudyFormSelect() {
|
||||
calendarStudyFormSelect.innerHTML = '<option value="">Выберите форму</option>' +
|
||||
studyForms.map(form => `<option value="${form.id}">${escapeHtml(form.name)}</option>`).join('');
|
||||
syncSelects(calendarStudyFormSelect);
|
||||
}
|
||||
|
||||
function populateActivitySelects() {
|
||||
const activityOptions = '<option value="">Выберите код</option>' +
|
||||
activityTypes.map(type => `<option value="${type.id}">${escapeHtml(type.code)} - ${escapeHtml(type.name)}</option>`).join('');
|
||||
fillActivitySelect.innerHTML = activityOptions;
|
||||
syncSelects(fillActivitySelect);
|
||||
}
|
||||
|
||||
function populateEditorCalendarSelect() {
|
||||
const current = editorCalendarSelect.value;
|
||||
editorCalendarSelect.innerHTML = '<option value="">Выберите график</option>' +
|
||||
calendars.map(calendar => `<option value="${calendar.id}">${escapeHtml(calendar.title)}</option>`).join('');
|
||||
if (current && calendars.some(calendar => String(calendar.id) === String(current))) {
|
||||
editorCalendarSelect.value = current;
|
||||
}
|
||||
syncSelects(editorCalendarSelect);
|
||||
}
|
||||
|
||||
function populateFillCourseSelect() {
|
||||
const courses = new Set(Array.from(calendarGrid.querySelectorAll('.calendar-day')).map(day => day.dataset.course));
|
||||
fillCourseSelect.innerHTML = '<option value="">Все курсы</option>' +
|
||||
Array.from(courses).sort((a, b) => Number(a) - Number(b))
|
||||
.map(course => `<option value="${course}">${course} курс</option>`).join('');
|
||||
syncSelects(fillCourseSelect);
|
||||
}
|
||||
|
||||
function options(items, selectedValue) {
|
||||
const selected = selectedValue == null ? '' : String(selectedValue);
|
||||
return '<option value="">Выберите</option>' + items.map(item => {
|
||||
const value = String(item.value);
|
||||
return `<option value="${escapeHtml(value)}" ${value === selected ? 'selected' : ''}>${escapeHtml(item.label)}</option>`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
function toActivityOption(type) {
|
||||
return { value: type.id, label: `${type.code} - ${type.name}` };
|
||||
}
|
||||
|
||||
function selectedEditorCalendar() {
|
||||
return calendars.find(calendar => String(calendar.id) === String(editorCalendarSelect.value));
|
||||
}
|
||||
|
||||
function theoryActivityId() {
|
||||
return activityTypes.find(type => type.code === 'Т')?.id || activityTypes[0]?.id || '';
|
||||
}
|
||||
|
||||
function activityIdByCode(code) {
|
||||
return activityTypes.find(type => type.code === code)?.id || null;
|
||||
}
|
||||
|
||||
function activityById(id) {
|
||||
return activityTypes.find(type => String(type.id) === String(id));
|
||||
}
|
||||
|
||||
function semesterLabel(semester) {
|
||||
const type = normalizeSemesterType(semester.semesterType);
|
||||
return `${semester.academicYearTitle || '-'}, ${SEMESTER_LABELS[type] || type} (${semester.startDate} - ${semester.endDate})`;
|
||||
}
|
||||
|
||||
function normalizeSemesterType(type) {
|
||||
return String(type || '').toLowerCase();
|
||||
}
|
||||
|
||||
function specialityLabel(speciality) {
|
||||
const code = speciality.specialityCode || speciality.specialtyCode || speciality.specialty_code || speciality.id;
|
||||
const name = speciality.specialityName || speciality.name || '';
|
||||
return name ? `${code} - ${name}` : String(code);
|
||||
}
|
||||
|
||||
function dayLabel(value) {
|
||||
return DAY_OPTIONS.find(day => String(day.value) === String(value))?.label || '-';
|
||||
}
|
||||
|
||||
function shortDayLabel(value) {
|
||||
const label = dayLabel(value);
|
||||
return label === '-' ? '-' : label.slice(0, 2);
|
||||
}
|
||||
|
||||
function formatShortDate(value) {
|
||||
const [year, month, day] = String(value).split('-');
|
||||
return `${day}.${month}`;
|
||||
}
|
||||
|
||||
function formatLongDate(value) {
|
||||
const [year, month, day] = String(value).split('-');
|
||||
return `${day}.${month}.${year}`;
|
||||
}
|
||||
|
||||
function dateRangeCaption(rows) {
|
||||
if (!rows.length) return '';
|
||||
const dates = rows.map(row => row.date).sort();
|
||||
return `${formatLongDate(dates[0])} - ${formatLongDate(dates[dates.length - 1])}`;
|
||||
}
|
||||
|
||||
function minIso(a, b) {
|
||||
return String(a) <= String(b) ? a : b;
|
||||
}
|
||||
|
||||
function maxIso(a, b) {
|
||||
return String(a) >= String(b) ? a : b;
|
||||
}
|
||||
|
||||
function previousIsoDate(value) {
|
||||
const date = new Date(`${value}T00:00:00Z`);
|
||||
date.setUTCDate(date.getUTCDate() - 1);
|
||||
return date.toISOString().slice(0, 10);
|
||||
}
|
||||
|
||||
function enumerateDates(startIso, endIso) {
|
||||
const result = [];
|
||||
const current = new Date(`${startIso}T00:00:00Z`);
|
||||
const end = new Date(`${endIso}T00:00:00Z`);
|
||||
while (current <= end) {
|
||||
const iso = current.toISOString().slice(0, 10);
|
||||
const jsDay = current.getUTCDay();
|
||||
result.push({ iso, dayOfWeek: jsDay === 0 ? 7 : jsDay });
|
||||
current.setUTCDate(current.getUTCDate() + 1);
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
function groupBy(items, keyFn) {
|
||||
const grouped = new Map();
|
||||
items.forEach(item => {
|
||||
const key = keyFn(item);
|
||||
if (!grouped.has(key)) grouped.set(key, []);
|
||||
grouped.get(key).push(item);
|
||||
});
|
||||
return grouped;
|
||||
}
|
||||
|
||||
function syncSelects(...selects) {
|
||||
selects.filter(Boolean).forEach(select => {
|
||||
select.dispatchEvent(new Event('change', { bubbles: true }));
|
||||
});
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user