diff --git a/webapp/app.js b/webapp/app.js index e325d4c..fc37ef4 100644 --- a/webapp/app.js +++ b/webapp/app.js @@ -9,6 +9,8 @@ ]; let current = new Date(); + let lastDutiesForList = []; + let todayRefreshInterval = null; const calendarEl = document.getElementById("calendar"); const monthTitleEl = document.getElementById("monthTitle"); const dutyListEl = document.getElementById("dutyList"); @@ -28,6 +30,16 @@ return y + "-" + m + "-" + day; } + /** True if duty (start_at/end_at UTC) overlaps the local day YYYY-MM-DD. */ + function dutyOverlapsLocalDay(d, dateKey) { + const [y, m, day] = dateKey.split("-").map(Number); + const dayStart = new Date(y, m - 1, day, 0, 0, 0, 0); + const dayEnd = new Date(y, m - 1, day, 23, 59, 59, 999); + const start = new Date(d.start_at); + const end = new Date(d.end_at); + return end > dayStart && start < dayEnd; + } + function firstDayOfMonth(d) { return new Date(d.getFullYear(), d.getMonth(), 1); } @@ -356,6 +368,42 @@ var EVENT_TYPE_LABELS = { duty: "Дежурство", unavailable: "Недоступен", vacation: "Отпуск" }; + /** Format UTC date from ISO string as DD.MM for display. */ + function formatDateKey(isoDateStr) { + const d = new Date(isoDateStr); + const day = String(d.getUTCDate()).padStart(2, "0"); + const month = String(d.getUTCMonth() + 1).padStart(2, "0"); + return day + "." + month; + } + + /** Format YYYY-MM-DD as DD.MM for list header. */ + function dateKeyToDDMM(key) { + return key.slice(8, 10) + "." + key.slice(5, 7); + } + + /** Build HTML for one duty card. @param {object} d - duty. @param {string} [typeLabelOverride] - e.g. "Сейчас дежурит". @param {boolean} [showUntilEnd] - show "до HH:MM" instead of range. @param {string} [extraClass] - e.g. "duty-item--current". */ + function dutyItemHtml(d, typeLabelOverride, showUntilEnd, extraClass) { + const startDate = new Date(d.start_at); + const endDate = new Date(d.end_at); + const typeLabel = typeLabelOverride != null ? typeLabelOverride : (EVENT_TYPE_LABELS[d.event_type] || d.event_type); + let itemClass = "duty-item duty-item--" + (d.event_type || "duty"); + if (extraClass) itemClass += " " + extraClass; + let timeOrRange = ""; + if (showUntilEnd && d.event_type === "duty") { + const end = String(endDate.getHours()).padStart(2, "0") + ":" + String(endDate.getMinutes()).padStart(2, "0"); + timeOrRange = "до " + end; + } else if (d.event_type === "vacation" || d.event_type === "unavailable") { + const startStr = formatDateKey(d.start_at); + const endStr = formatDateKey(d.end_at); + timeOrRange = startStr === endStr ? startStr : startStr + " – " + endStr; + } else { + const start = String(startDate.getHours()).padStart(2, "0") + ":" + String(startDate.getMinutes()).padStart(2, "0"); + const end = String(endDate.getHours()).padStart(2, "0") + ":" + String(endDate.getMinutes()).padStart(2, "0"); + timeOrRange = start + " – " + end; + } + return "
" + escapeHtml(typeLabel) + " " + escapeHtml(d.full_name) + "
" + timeOrRange + "
"; + } + function renderDutyList(duties) { if (duties.length === 0) { dutyListEl.innerHTML = "

В этом месяце событий нет.

"; @@ -367,46 +415,48 @@ if (!grouped[date]) grouped[date] = []; grouped[date].push(d); }); - const dates = Object.keys(grouped).sort(); + let dates = Object.keys(grouped).sort(); const todayKey = localDateString(new Date()); + const firstKey = localDateString(firstDayOfMonth(current)); + const lastKey = localDateString(lastDayOfMonth(current)); + const showTodayInMonth = todayKey >= firstKey && todayKey <= lastKey; + if (showTodayInMonth && dates.indexOf(todayKey) === -1) { + dates = [todayKey].concat(dates).sort(); + } let html = ""; - /** Format UTC date from ISO string as DD.MM for display. */ - function formatDateKey(isoDateStr) { - const d = new Date(isoDateStr); - const day = String(d.getUTCDate()).padStart(2, "0"); - const month = String(d.getUTCMonth() + 1).padStart(2, "0"); - return day + "." + month; - } - /** Format YYYY-MM-DD as DD.MM for list header. */ - function dateKeyToDDMM(key) { - return key.slice(8, 10) + "." + key.slice(5, 7); - } dates.forEach(function (date) { - const list = grouped[date]; const isToday = date === todayKey; const dayBlockClass = "duty-list-day" + (isToday ? " duty-list-day--today" : ""); const titleText = isToday ? "Сегодня, " + dateKeyToDDMM(date) : dateKeyToDDMM(date); html += "

" + escapeHtml(titleText) + "

"; - list.forEach(function (d) { - const startDate = new Date(d.start_at); - const endDate = new Date(d.end_at); - const typeLabel = EVENT_TYPE_LABELS[d.event_type] || d.event_type; - const itemClass = "duty-item duty-item--" + (d.event_type || "duty"); - let timeOrRange = ""; - if (d.event_type === "vacation" || d.event_type === "unavailable") { - const startStr = formatDateKey(d.start_at); - const endStr = formatDateKey(d.end_at); - timeOrRange = startStr === endStr ? startStr : startStr + " – " + endStr; - } else { - const start = String(startDate.getHours()).padStart(2, "0") + ":" + String(startDate.getMinutes()).padStart(2, "0"); - const end = String(endDate.getHours()).padStart(2, "0") + ":" + String(endDate.getMinutes()).padStart(2, "0"); - timeOrRange = start + " – " + end; - } - html += "
" + escapeHtml(typeLabel) + " " + escapeHtml(d.full_name) + "
" + timeOrRange + "
"; - }); + + if (isToday) { + const now = new Date(); + const todayDuties = duties.filter(function (d) { return dutyOverlapsLocalDay(d, todayKey); }).sort(function (a, b) { return new Date(a.start_at) - new Date(b.start_at); }); + todayDuties.forEach(function (d) { + const start = new Date(d.start_at); + const end = new Date(d.end_at); + const isCurrent = start <= now && now < end; + if (isCurrent && d.event_type === "duty") { + html += dutyItemHtml(d, "Сейчас дежурит", true, "duty-item--current"); + } else { + html += dutyItemHtml(d); + } + }); + } else { + const list = grouped[date] || []; + list.forEach(function (d) { html += dutyItemHtml(d); }); + } html += "
"; }); dutyListEl.innerHTML = html; + var scrollTarget = dutyListEl.querySelector(".duty-list-day--today"); + if (scrollTarget) { + var stickyEl = document.getElementById("calendarSticky"); + var stickyHeight = stickyEl ? stickyEl.offsetHeight : 0; + var targetTop = scrollTarget.getBoundingClientRect().top + window.scrollY; + window.scrollTo(0, Math.max(0, targetTop - stickyHeight)); + } } function escapeHtml(s) { @@ -513,7 +563,18 @@ return key >= firstKey && key <= lastKey; }); }); + lastDutiesForList = dutiesInMonth; renderDutyList(dutiesInMonth); + if (todayRefreshInterval) clearInterval(todayRefreshInterval); + todayRefreshInterval = null; + const viewedMonth = current.getFullYear() * 12 + current.getMonth(); + const thisMonth = new Date().getFullYear() * 12 + new Date().getMonth(); + if (viewedMonth === thisMonth) { + todayRefreshInterval = setInterval(function () { + if (current.getFullYear() * 12 + current.getMonth() !== new Date().getFullYear() * 12 + new Date().getMonth()) return; + renderDutyList(lastDutiesForList); + }, 60000); + } } catch (e) { if (e.message === "ACCESS_DENIED") { showAccessDenied(e.serverDetail);