Zuev/magistr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
dipatrik10
2026-05-27 13:22:59 +03:00
parent f08db3f178
commit 467f78c3d0
3 changed files with 398 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

197
frontend/admin/css/components.css
View File

@@ -391,13 +391,20 @@
}
.calendar-semesters-grid {
--calendar-semester-block-height: 194px;
display: grid;
grid-template-columns: 1fr;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-rows: 1fr;
align-items: stretch;
gap: 0.65rem;
padding: 0.65rem;
}
.calendar-semester-block {
display: flex;
flex-direction: column;
height: var(--calendar-semester-block-height);
min-height: 100%;
border: 1px solid var(--bg-card-border);
border-radius: var(--radius-sm);
background: var(--bg-card);
@@ -426,16 +433,28 @@
}
.calendar-semester-table-wrap {
flex: 1;
display: flex;
min-height: 0;
overflow-x: auto;
overflow-y: hidden;
background: var(--bg-primary);
scrollbar-width: none;
}
.calendar-semester-table-wrap::-webkit-scrollbar {
width: 0;
height: 0;
}
.calendar-semester-table {
width: max-content;
min-width: 100%;
height: 100%;
border-collapse: collapse;
table-layout: fixed;
font-size: 0.62rem;
user-select: none;
}
.calendar-semester-table th,
@@ -443,12 +462,16 @@
border: 1px solid var(--bg-card-border);
}
.calendar-semester-table tbody tr {
height: 19px;
}
.calendar-semester-table thead th {
position: sticky;
top: 0;
z-index: 1;
height: 18px;
min-width: 21px;
min-width: 18px;
padding: 0 0.12rem;
background: var(--bg-input);
color: var(--text-secondary);
@@ -470,43 +493,33 @@
.calendar-day {
position: relative;
width: 21px;
min-width: 21px;
height: 20px;
min-height: 20px;
padding: 1px;
background:
linear-gradient(180deg, color-mix(in srgb, var(--activity-color, var(--accent)) 18%, var(--bg-card)) 0%, var(--bg-card) 100%);
width: 18px;
min-width: 18px;
height: 19px;
min-height: 19px;
padding: 0;
background: color-mix(in srgb, var(--activity-color, var(--accent)) 12%, var(--bg-card));
border-color: color-mix(in srgb, var(--activity-color, var(--accent)) 28%, var(--bg-card-border));
cursor: pointer;
outline: none;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--activity-color, var(--accent)) 30%, transparent);
box-shadow: none;
text-align: center;
transition: background var(--transition), box-shadow var(--transition), transform var(--transition), filter var(--transition);
transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), filter var(--transition);
}
.calendar-day:hover,
.calendar-day:focus-visible {
background:
linear-gradient(180deg, color-mix(in srgb, var(--activity-color, var(--accent)) 32%, var(--bg-card)) 0%, color-mix(in srgb, var(--activity-color, var(--accent)) 10%, var(--bg-card)) 100%);
box-shadow:
inset 0 0 0 1px color-mix(in srgb, var(--activity-color, var(--accent)) 72%, transparent),
inset 0 -2px 0 color-mix(in srgb, var(--activity-color, var(--accent)) 58%, transparent),
0 0 0 1px color-mix(in srgb, var(--activity-color, var(--accent)) 24%, transparent);
transform: none;
background: color-mix(in srgb, var(--activity-color, var(--accent)) 24%, var(--bg-card));
border-color: color-mix(in srgb, var(--activity-color, var(--accent)) 50%, var(--bg-card-border));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--activity-color, var(--accent)) 30%, transparent);
z-index: 3;
}
.calendar-day.is-selected {
background:
radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--activity-color, var(--accent)) 46%, #ffffff) 0%, color-mix(in srgb, var(--activity-color, var(--accent)) 26%, var(--bg-card)) 42%, var(--bg-card) 100%);
box-shadow:
inset 0 0 0 1px color-mix(in srgb, var(--activity-color, var(--accent)) 90%, transparent),
inset 0 -2px 0 color-mix(in srgb, var(--activity-color, var(--accent)) 72%, transparent),
0 0 0 2px color-mix(in srgb, var(--activity-color, var(--accent)) 32%, transparent),
0 6px 14px color-mix(in srgb, var(--activity-color, var(--accent)) 18%, transparent);
filter: saturate(1.2);
transform: none;
background: color-mix(in srgb, var(--activity-color, var(--accent)) 34%, var(--bg-card));
border-color: color-mix(in srgb, var(--activity-color, var(--accent)) 64%, var(--bg-card-border));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--activity-color, var(--accent)) 44%, transparent);
filter: saturate(1.08);
z-index: 4;
}
@@ -516,7 +529,7 @@
justify-content: center;
width: 100%;
height: 100%;
border-radius: 3px;
border-radius: 2px;
color: var(--text-primary);
font-size: 0.6rem;
line-height: 1;
@@ -541,14 +554,89 @@
display: none !important;
}
.calendar-day-tooltip {
position: fixed;
z-index: 1200;
width: min(280px, calc(100vw - 24px));
padding: 0.75rem;
border: 1px solid color-mix(in srgb, var(--activity-color, var(--accent)) 26%, var(--bg-card-border));
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--bg-primary) 88%, var(--bg-card));
color: var(--text-primary);
box-shadow: 0 16px 42px rgba(0, 0, 0, 0.36), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
pointer-events: none;
opacity: 0;
visibility: hidden;
transform: translateY(4px) scale(0.98);
transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s ease;
}
.calendar-day-tooltip.visible {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
.calendar-day-tooltip-head {
display: flex;
align-items: center;
gap: 0.65rem;
padding-bottom: 0.65rem;
border-bottom: 1px solid var(--bg-card-border);
}
.calendar-day-tooltip-head strong,
.calendar-day-tooltip-body strong {
display: block;
color: var(--text-primary);
font-size: 0.85rem;
line-height: 1.25;
}
.calendar-day-tooltip-head span,
.calendar-day-tooltip-body span {
display: block;
color: var(--text-secondary);
font-size: 0.68rem;
line-height: 1.2;
}
.calendar-day-tooltip-code {
width: 34px;
min-width: 34px;
height: 34px;
display: inline-grid;
place-items: center;
border-radius: 8px;
background: color-mix(in srgb, var(--activity-color, var(--accent)) 24%, transparent);
border: 1px solid color-mix(in srgb, var(--activity-color, var(--accent)) 56%, transparent);
color: var(--text-primary);
font-size: 0.86rem;
font-weight: 800;
line-height: 1;
padding-top: 2px;
text-align: center;
}
.calendar-day-tooltip-body {
display: grid;
gap: 0.45rem;
padding-top: 0.65rem;
}
.calendar-empty-day {
width: 21px;
min-width: 21px;
height: 20px;
width: 18px;
min-width: 18px;
height: 19px;
background: color-mix(in srgb, var(--bg-input) 65%, transparent);
}
.calendar-empty-semester {
flex: 1;
display: flex;
align-items: center;
padding: 0.75rem;
color: var(--text-secondary);
font-size: 0.82rem;
@@ -558,6 +646,7 @@
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 0.85rem;
}
.calendar-total-chip {
@@ -590,19 +679,25 @@
text-transform: uppercase;
}
.calendar-day-dialog-card {
width: min(500px, 100%);
#calendar-day-dialog.modal-overlay {
background: rgba(0, 0, 0, 0.42);
backdrop-filter: blur(3px);
}
#calendar-day-dialog .calendar-day-dialog-card {
width: min(470px, 100%);
max-height: none;
padding: 1.35rem;
padding: 1rem 1rem 0.85rem;
overflow: visible;
background: color-mix(in srgb, var(--bg-primary) 88%, var(--bg-card));
border-radius: 18px;
}
.calendar-day-dialog-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.55rem;
margin: 0.65rem 0;
gap: 0.45rem;
margin: 0.45rem 0;
}
.calendar-day-dialog-grid div {
@@ -627,8 +722,8 @@
display: flex;
gap: 0.7rem;
align-items: center;
margin: 0.7rem 0 0.8rem;
padding: 0.65rem;
margin: 0.55rem 0 0.65rem;
padding: 0.6rem;
border-radius: var(--radius-sm);
background: var(--bg-input);
border: 1px solid var(--bg-card-border);
@@ -654,8 +749,8 @@
}
.calendar-day-dialog-time-grid {
margin-top: 0.8rem;
padding-top: 0.8rem;
margin-top: 0.6rem;
padding-top: 0.6rem;
border-top: 1px solid var(--bg-card-border);
}
@@ -663,15 +758,21 @@
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin-top: 0.8rem;
margin-top: 0.6rem;
margin-bottom: 0;
}
#calendar-day-dialog-time-alert:not(.error):not(.success) {
#calendar-day-dialog-time-alert {
margin: 0;
padding: 0;
}
#calendar-day-dialog-time-alert.error,
#calendar-day-dialog-time-alert.success {
margin-top: 0.55rem;
padding: 0.5rem 0.75rem;
}
.profiles-context {
color: var(--text-secondary);
font-weight: 600;
@@ -702,6 +803,16 @@
grid-template-columns: repeat(2, minmax(180px, 1fr));
}
.calendar-semesters-grid {
grid-template-columns: 1fr;
grid-auto-rows: auto;
}
.calendar-semester-block {
height: auto;
min-height: 0;
}
.calendar-semester-header {
align-items: flex-start;
flex-direction: column;
@@ -727,7 +838,7 @@
grid-template-columns: 1fr;
}
.calendar-day-dialog-card {
#calendar-day-dialog .calendar-day-dialog-card {
max-height: calc(100vh - 2rem);
overflow-y: auto;
}

268
frontend/admin/js/views/academic-calendar.js
View File

@@ -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'))