Работа с сеткой в графике загруженности

frontend/admin/js/views/academic-calendar.js

@@ -82,6 +82,12 @@ export async function initAcademicCalendar() {
     let timeSlotDateAssignments = [];
     let activeCalendarDay = null;
     let selectedCalendarDayKey = null;
+    let selectedCalendarDays = [];
+    let isCalendarDragSelecting = false;
+    let didCalendarDragSelect = false;
+    let suppressCalendarDayClick = false;
+    let isSyncingCalendarDayDialog = false;
+    let calendarDayTooltip = null;
 
     bindEvents();
 
@@ -116,10 +122,34 @@ export async function initAcademicCalendar() {
                 renderCalendarTotals();
             }
         });
+        calendarGrid?.addEventListener('mousedown', (event) => {
+            const day = event.target.closest('.calendar-day');
+            if (day) startCalendarDayDragSelection(event, day);
+        });
+        calendarGrid?.addEventListener('mouseover', (event) => {
+            const day = event.target.closest('.calendar-day');
+            if (day) addCalendarDayToDragSelection(day);
+        });
+        calendarGrid?.addEventListener('mousemove', (event) => {
+            const day = event.target.closest('.calendar-day');
+            if (day) showCalendarDayTooltip(day, event);
+        });
+        calendarGrid?.addEventListener('mouseleave', hideCalendarDayTooltip);
+        calendarGrid?.addEventListener('focusin', (event) => {
+            const day = event.target.closest('.calendar-day');
+            if (day) showCalendarDayTooltip(day);
+        });
+        calendarGrid?.addEventListener('focusout', hideCalendarDayTooltip);
         calendarGrid?.addEventListener('click', (event) => {
+            if (suppressCalendarDayClick) {
+                suppressCalendarDayClick = false;
+                event.preventDefault();
+                return;
+            }
             const day = event.target.closest('.calendar-day');
             if (day) openCalendarDayDialog(day);
         });
+        document.addEventListener('mouseup', finishCalendarDayDragSelection);
         calendarGrid?.addEventListener('keydown', (event) => {
             if (event.key !== 'Enter' && event.key !== ' ') return;
             const day = event.target.closest('.calendar-day');
@@ -132,14 +162,17 @@ export async function initAcademicCalendar() {
             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);
+            if (isSyncingCalendarDayDialog || !calendarDayDialogActivitySelect.value) return;
+            const days = selectedCalendarDays.length ? selectedCalendarDays : (activeCalendarDay ? [activeCalendarDay] : []);
+            days.forEach(day => {
+                const select = day.querySelector('.calendar-day-activity');
+                select.value = calendarDayDialogActivitySelect.value;
+                updateCalendarDayVisual(day);
+            });
+            updateCalendarDayDialogSummaryForSelection(days);
             renderCalendarTotals();
         });
-        calendarDayDialogTimeSaveButton?.addEventListener('click', saveTimeSlotDateAssignment);
+        calendarDayDialogTimeSaveButton?.addEventListener('click', closeCalendarDayDialog);
         calendarDayDialogTimeClearButton?.addEventListener('click', clearTimeSlotDateAssignment);
 
         academicYearForm?.addEventListener('submit', saveAcademicYear);
@@ -524,6 +557,7 @@ export async function initAcademicCalendar() {
     function renderCalendarGrid(rows) {
         activeCalendarDay = null;
         selectedCalendarDayKey = null;
+        selectedCalendarDays = [];
         const grouped = groupBy(rows, row => row.courseNumber);
         calendarGrid.innerHTML = Array.from(grouped.entries()).map(([course, courseRows], index) => `
             <details class="calendar-course-block" ${index === 0 ? 'open' : ''}>
@@ -607,7 +641,6 @@ export async function initAcademicCalendar() {
                  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>
                 ${timeAssignmentForDate(row.date) ? '<span class="calendar-day-time-marker">вр.</span>' : ''}
@@ -617,20 +650,48 @@ export async function initAcademicCalendar() {
     }
 
     function openCalendarDayDialog(day) {
-        activeCalendarDay = day;
-        selectCalendarDay(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);
+        openCalendarDayDialogForSelection([day]);
+    }
+
+    function openCalendarDayDialogForSelection(days) {
+        const selectedDays = uniqueCalendarDays(days);
+        if (!selectedDays.length) return;
+
+        activeCalendarDay = selectedDays[0];
+        selectCalendarDays(selectedDays);
+
+        const dates = selectedDays.map(day => day.dataset.date).sort();
+        const courses = new Set(selectedDays.map(day => day.dataset.course));
+        const weeks = new Set(selectedDays.map(day => day.dataset.week));
+        const weekDays = new Set(selectedDays.map(day => day.dataset.day));
+        const isSingle = selectedDays.length === 1;
+
+        calendarDayDialogDate.textContent = isSingle
+            ? `${formatLongDate(activeCalendarDay.dataset.date)} (${shortDayLabel(activeCalendarDay.dataset.day)})`
+            : `${formatLongDate(dates[0])} - ${formatLongDate(dates[dates.length - 1])}`;
+        calendarDayDialogCourse.textContent = courses.size === 1
+            ? `${activeCalendarDay.dataset.course} курс`
+            : `${courses.size} курса`;
+        calendarDayDialogWeek.textContent = weeks.size === 1
+            ? `${activeCalendarDay.dataset.week} неделя`
+            : `${weeks.size} недель`;
+        calendarDayDialogDay.textContent = weekDays.size === 1
+            ? dayLabel(activeCalendarDay.dataset.day)
+            : `${selectedDays.length} ячеек`;
         calendarDayDialogActivitySelect.innerHTML = options(
             activityTypes.map(toActivityOption),
-            day.querySelector('.calendar-day-activity').value
+            commonCalendarDayActivityValue(selectedDays)
         );
-        populateTimeScopeDialogSelect(day.dataset.date);
+        if (isSingle) {
+            populateTimeScopeDialogSelect(activeCalendarDay.dataset.date);
+        } else {
+            populateMultiSelectionTimeScopeDialogSelect();
+        }
+        isSyncingCalendarDayDialog = true;
         syncSelects(calendarDayDialogActivitySelect);
         syncSelects(calendarDayDialogTimeScopeSelect);
-        updateCalendarDayDialogSummary(day);
+        isSyncingCalendarDayDialog = false;
+        updateCalendarDayDialogSummaryForSelection(selectedDays);
         renderCalendarTotals();
         calendarDayDialog.classList.add('open');
     }
@@ -655,6 +716,33 @@ export async function initAcademicCalendar() {
         `;
     }
 
+    function updateCalendarDayDialogSummaryForSelection(days) {
+        if (days.length <= 1) {
+            updateCalendarDayDialogSummary(days[0]);
+            return;
+        }
+
+        const activity = activityById(commonCalendarDayActivityValue(days));
+        if (!activity) {
+            calendarDayDialogActivitySummary.innerHTML = `
+                <span class="calendar-day-dialog-code" style="--activity-color:#64748b">...</span>
+                <div>
+                    <strong>Выбрано ячеек: ${days.length}</strong>
+                    <p>Выберите код активности, чтобы применить его ко всему выделению</p>
+                </div>
+            `;
+            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)} · ${days.length} ячеек</strong>
+                <p>${escapeHtml(activity.description || (activity.allowSchedule ? 'Обычные пары разрешены' : 'Обычные пары не генерируются'))}</p>
+            </div>
+        `;
+    }
+
     async function saveTimeSlotDateAssignment() {
         if (!activeCalendarDay) return;
         hideAlert('calendar-day-dialog-time-alert');
@@ -707,10 +795,19 @@ export async function initAcademicCalendar() {
         calendarDayDialogTimeScopeSelect.innerHTML = `<option value="">${escapeHtml(automaticLabel)}</option>` +
             manualScopes.map(scope => `<option value="${scope.id}">${escapeHtml(scope.name)}</option>`).join('');
         calendarDayDialogTimeScopeSelect.value = assignment?.scopeId || '';
-        calendarDayDialogTimeSaveButton.disabled = manualScopes.length === 0 && !assignment;
+        calendarDayDialogTimeScopeSelect.disabled = false;
+        calendarDayDialogTimeSaveButton.disabled = false;
         calendarDayDialogTimeClearButton.disabled = !assignment;
     }
 
+    function populateMultiSelectionTimeScopeDialogSelect() {
+        calendarDayDialogTimeScopeSelect.innerHTML = '<option value="">Для выделения доступен только код дня</option>';
+        calendarDayDialogTimeScopeSelect.value = '';
+        calendarDayDialogTimeScopeSelect.disabled = true;
+        calendarDayDialogTimeSaveButton.disabled = false;
+        calendarDayDialogTimeClearButton.disabled = true;
+    }
+
     function updateTimeAssignmentVisuals(date) {
         const assignment = timeAssignmentForDate(date);
         calendarGrid.querySelectorAll(`.calendar-day[data-date="${date}"]`).forEach(day => {
@@ -735,14 +832,133 @@ export async function initAcademicCalendar() {
         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 showCalendarDayTooltip(day, event = null) {
+        if (isCalendarDragSelecting) {
+            hideCalendarDayTooltip();
+            return;
+        }
+        const tooltip = ensureCalendarDayTooltip();
+        const activity = activityById(day.querySelector('.calendar-day-activity')?.value);
+        tooltip.style.setProperty('--activity-color', activity?.colorCode || '#64748b');
+        tooltip.innerHTML = renderCalendarDayTooltip(day);
+        tooltip.classList.add('visible');
+        positionCalendarDayTooltip(tooltip, day, event);
+    }
+
+    function hideCalendarDayTooltip() {
+        calendarDayTooltip?.classList.remove('visible');
+    }
+
+    function ensureCalendarDayTooltip() {
+        if (calendarDayTooltip) return calendarDayTooltip;
+        calendarDayTooltip = document.createElement('div');
+        calendarDayTooltip.className = 'calendar-day-tooltip';
+        calendarDayTooltip.setAttribute('role', 'tooltip');
+        document.body.appendChild(calendarDayTooltip);
+        return calendarDayTooltip;
+    }
+
+    function renderCalendarDayTooltip(day) {
+        const activity = activityById(day.querySelector('.calendar-day-activity')?.value);
+        const code = activity?.code || day.querySelector('.calendar-day-code')?.textContent || '-';
+        const color = activity?.colorCode || '#64748b';
+        const timeAssignment = timeAssignmentForDate(day.dataset.date);
+        const timeLabel = timeAssignment
+            ? (timeSlotScopes.find(scope => String(scope.id) === String(timeAssignment.scopeId))?.name || 'ручная сетка')
+            : automaticTimeScopeLabel(day.dataset.date).replace('По правилу даты ', '');
+        return `
+            <div class="calendar-day-tooltip-head">
+                <span class="calendar-day-tooltip-code" style="--activity-color:${escapeHtml(color)}">${escapeHtml(code)}</span>
+                <div>
+                    <strong>${escapeHtml(formatLongDate(day.dataset.date))}</strong>
+                    <span>${escapeHtml(shortDayLabel(day.dataset.day))}, ${escapeHtml(day.dataset.week)} неделя</span>
+                </div>
+            </div>
+            <div class="calendar-day-tooltip-body">
+                <div>
+                    <span>Курс</span>
+                    <strong>${escapeHtml(day.dataset.course)}</strong>
+                </div>
+                <div>
+                    <span>Активность</span>
+                    <strong>${escapeHtml(activity?.name || 'Не задана')}</strong>
+                </div>
+                <div>
+                    <span>Время</span>
+                    <strong>${escapeHtml(timeLabel)}</strong>
+                </div>
+            </div>
+        `;
+    }
+
+    function positionCalendarDayTooltip(tooltip, day, event) {
+        const offset = 14;
+        const rect = day.getBoundingClientRect();
+        const x = event?.clientX ?? rect.left + rect.width / 2;
+        const y = event?.clientY ?? rect.top;
+        const tooltipRect = tooltip.getBoundingClientRect();
+        let left = x + offset;
+        let top = y + offset;
+        if (left + tooltipRect.width > window.innerWidth - 12) {
+            left = x - tooltipRect.width - offset;
+        }
+        if (top + tooltipRect.height > window.innerHeight - 12) {
+            top = y - tooltipRect.height - offset;
+        }
+        tooltip.style.left = `${Math.max(12, left)}px`;
+        tooltip.style.top = `${Math.max(12, top)}px`;
+    }
+
+    function startCalendarDayDragSelection(event, day) {
+        if (event.button !== 0) return;
+        hideCalendarDayTooltip();
+        isCalendarDragSelecting = true;
+        didCalendarDragSelect = false;
+        suppressCalendarDayClick = false;
+        selectCalendarDays([day]);
+        event.preventDefault();
+    }
+
+    function addCalendarDayToDragSelection(day) {
+        if (!isCalendarDragSelecting || selectedCalendarDays.includes(day)) return;
+        didCalendarDragSelect = true;
+        selectedCalendarDays.push(day);
+        day.classList.add('is-selected');
+        renderCalendarTotals();
+    }
+
+    function finishCalendarDayDragSelection() {
+        if (!isCalendarDragSelecting) return;
+        isCalendarDragSelecting = false;
+        if (didCalendarDragSelect && selectedCalendarDays.length > 1) {
+            suppressCalendarDayClick = true;
+            openCalendarDayDialogForSelection(selectedCalendarDays);
+        }
     }
 
     function selectCalendarDay(day) {
-        if (!day) return;
-        selectedCalendarDayKey = calendarDayKey(day);
+        selectCalendarDays(day ? [day] : []);
+    }
+
+    function selectCalendarDays(days) {
+        const uniqueDays = uniqueCalendarDays(days);
+        selectedCalendarDays = uniqueDays;
+        selectedCalendarDayKey = uniqueDays[0] ? calendarDayKey(uniqueDays[0]) : null;
         calendarGrid.querySelectorAll('.calendar-day.is-selected').forEach(item => item.classList.remove('is-selected'));
-        day.classList.add('is-selected');
+        uniqueDays.forEach(item => item.classList.add('is-selected'));
+        renderCalendarTotals();
+    }
+
+    function uniqueCalendarDays(days) {
+        return Array.from(new Set(days.filter(Boolean)));
+    }
+
+    function commonCalendarDayActivityValue(days) {
+        const values = uniqueCalendarDays(days).map(day => day.querySelector('.calendar-day-activity')?.value || '');
+        const uniqueValues = Array.from(new Set(values));
+        return uniqueValues.length === 1 ? uniqueValues[0] : '';
     }
 
     function calendarDayKey(day) {
@@ -807,10 +1023,12 @@ export async function initAcademicCalendar() {
             const key = activity ? activity.code : '-';
             counts.set(key, (counts.get(key) || 0) + 1);
         });
-        const selectedDay = selectedCalendarDayKey
-            ? Array.from(calendarGrid.querySelectorAll('.calendar-day')).find(day => calendarDayKey(day) === selectedCalendarDayKey)
-            : null;
-        const selectedActivity = selectedDay ? activityById(selectedDay.querySelector('.calendar-day-activity').value) : null;
+        const selectedDays = selectedCalendarDays.length
+            ? selectedCalendarDays
+            : (selectedCalendarDayKey
+                ? [Array.from(calendarGrid.querySelectorAll('.calendar-day')).find(day => calendarDayKey(day) === selectedCalendarDayKey)].filter(Boolean)
+                : []);
+        const selectedActivity = selectedDays.length ? activityById(commonCalendarDayActivityValue(selectedDays)) : null;
         const selectedCode = selectedActivity?.code || null;
         calendarTotals.innerHTML = Array.from(counts.entries())
             .sort(([a], [b]) => a.localeCompare(b, 'ru'))