Implement duty overlap detection and enhance duty list rendering
- Added functions to check if duties overlap with the local day and format dates for display. - Enhanced the rendering of the duty list to highlight today's duties, including a current duty indicator. - Introduced a refresh mechanism for today's duties to ensure real-time updates in the calendar view. - Improved HTML structure for duty items to enhance visual presentation and user interaction.
This commit is contained in:
121
webapp/app.js
121
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 "<div class=\"" + itemClass + "\"><span class=\"duty-item-type\">" + escapeHtml(typeLabel) + "</span> <span class=\"name\">" + escapeHtml(d.full_name) + "</span><div class=\"time\">" + timeOrRange + "</div></div>";
|
||||
}
|
||||
|
||||
function renderDutyList(duties) {
|
||||
if (duties.length === 0) {
|
||||
dutyListEl.innerHTML = "<p class=\"muted\">В этом месяце событий нет.</p>";
|
||||
@@ -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 += "<div class=\"" + dayBlockClass + "\"><h2 class=\"duty-list-day-title\">" + escapeHtml(titleText) + "</h2>";
|
||||
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 += "<div class=\"" + itemClass + "\"><span class=\"duty-item-type\">" + escapeHtml(typeLabel) + "</span> <span class=\"name\">" + escapeHtml(d.full_name) + "</span><div class=\"time\">" + timeOrRange + "</div></div>";
|
||||
});
|
||||
|
||||
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 += "</div>";
|
||||
});
|
||||
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);
|
||||
|
||||
Reference in New Issue
Block a user