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.

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);
+      if (isToday) {
-        const endDate = new Date(d.end_at);
+        const now = new Date();
-        const typeLabel = EVENT_TYPE_LABELS[d.event_type] || d.event_type;
+        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); });
-        const itemClass = "duty-item duty-item--" + (d.event_type || "duty");
+        todayDuties.forEach(function (d) {
-        let timeOrRange = "";
+          const start = new Date(d.start_at);
-        if (d.event_type === "vacation" || d.event_type === "unavailable") {
+          const end = new Date(d.end_at);
-          const startStr = formatDateKey(d.start_at);
+          const isCurrent = start <= now && now < end;
-          const endStr = formatDateKey(d.end_at);
+          if (isCurrent && d.event_type === "duty") {
-          timeOrRange = startStr === endStr ? startStr : startStr + " – " + endStr;
+            html += dutyItemHtml(d, "Сейчас дежурит", true, "duty-item--current");
-        } else {
+          } else {
-          const start = String(startDate.getHours()).padStart(2, "0") + ":" + String(startDate.getMinutes()).padStart(2, "0");
+            html += dutyItemHtml(d);
-          const end = String(endDate.getHours()).padStart(2, "0") + ":" + String(endDate.getMinutes()).padStart(2, "0");
+          }
-          timeOrRange = start + " – " + end;
+        });
-        }
+      } else {
-        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>";
+        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);