feat: implement day detail panel for calendar
- Introduced a new `dayDetail.js` module to manage the day detail panel functionality, allowing users to view detailed information about duties and events for each calendar day. - Enhanced the calendar rendering in `calendar.js` to include visual indicators for duties and events, improving user interaction and experience. - Updated CSS in `style.css` to style the day detail panel and its components, ensuring a responsive design for both desktop and mobile views. - Refactored `hints.js` to export the `getDutyMarkerRows` function, facilitating better integration with the new day detail features. - Added localization support for the day detail panel in `i18n.js`, including new translations for close button and event titles. - Enhanced the initialization process in `main.js` to set up the day detail panel on application load.
This commit is contained in:
300
webapp/js/dayDetail.js
Normal file
300
webapp/js/dayDetail.js
Normal file
@@ -0,0 +1,300 @@
|
||||
/**
|
||||
* Day detail panel: popover (desktop) or bottom sheet (mobile) on calendar cell tap.
|
||||
*/
|
||||
|
||||
import { calendarEl, state } from "./dom.js";
|
||||
import { t } from "./i18n.js";
|
||||
import { escapeHtml } from "./utils.js";
|
||||
import { localDateString, dateKeyToDDMM } from "./dateUtils.js";
|
||||
import { getDutyMarkerRows } from "./hints.js";
|
||||
|
||||
const BOTTOM_SHEET_BREAKPOINT_PX = 640;
|
||||
const POPOVER_MARGIN = 12;
|
||||
|
||||
/** @type {HTMLElement|null} */
|
||||
let panelEl = null;
|
||||
/** @type {HTMLElement|null} */
|
||||
let overlayEl = null;
|
||||
/** @type {((e: MouseEvent) => void)|null} */
|
||||
let popoverCloseHandler = null;
|
||||
|
||||
/**
|
||||
* Parse JSON from data attribute (values are stored with " for safety).
|
||||
* @param {string} raw
|
||||
* @returns {object[]|string[]}
|
||||
*/
|
||||
function parseDataAttr(raw) {
|
||||
if (!raw) return [];
|
||||
try {
|
||||
const s = raw.replace(/"/g, '"');
|
||||
const parsed = JSON.parse(s);
|
||||
return Array.isArray(parsed) ? parsed : [];
|
||||
} catch (e) {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Build HTML content for the day detail panel.
|
||||
* @param {string} dateKey - YYYY-MM-DD
|
||||
* @param {object[]} duties - Array of { event_type, full_name, start_at?, end_at? }
|
||||
* @param {string[]} eventSummaries - Calendar event summary strings
|
||||
* @returns {string}
|
||||
*/
|
||||
export function buildDayDetailContent(dateKey, duties, eventSummaries) {
|
||||
const lang = state.lang;
|
||||
const todayKey = localDateString(new Date());
|
||||
const ddmm = dateKeyToDDMM(dateKey);
|
||||
const title =
|
||||
dateKey === todayKey
|
||||
? t(lang, "duty.today") + ", " + ddmm
|
||||
: ddmm;
|
||||
|
||||
const dutyList = (duties || []).filter((d) => d.event_type === "duty");
|
||||
const unavailableList = (duties || []).filter((d) => d.event_type === "unavailable");
|
||||
const vacationList = (duties || []).filter((d) => d.event_type === "vacation");
|
||||
const summaries = eventSummaries || [];
|
||||
|
||||
const fromLabel = t(lang, "hint.from");
|
||||
const toLabel = t(lang, "hint.to");
|
||||
const nbsp = "\u00a0";
|
||||
|
||||
let html =
|
||||
'<h2 id="dayDetailTitle" class="day-detail-title">' + escapeHtml(title) + "</h2>";
|
||||
html += '<div class="day-detail-sections">';
|
||||
|
||||
if (dutyList.length > 0) {
|
||||
const hasTimes = dutyList.some(
|
||||
(it) => (it.start_at || it.end_at)
|
||||
);
|
||||
const rows = hasTimes
|
||||
? getDutyMarkerRows(dutyList, dateKey, nbsp, fromLabel, toLabel)
|
||||
: dutyList.map((it) => ({ timePrefix: "", fullName: it.full_name || "" }));
|
||||
|
||||
html +=
|
||||
'<section class="day-detail-section day-detail-section--duty">' +
|
||||
'<h3 class="day-detail-section-title">' +
|
||||
escapeHtml(t(lang, "event_type.duty")) +
|
||||
"</h3><ul class=" +
|
||||
'"day-detail-list">';
|
||||
rows.forEach((r) => {
|
||||
const timeHtml = r.timePrefix ? escapeHtml(r.timePrefix) + " — " : "";
|
||||
html +=
|
||||
"<li>" +
|
||||
(timeHtml ? '<span class="day-detail-time">' + timeHtml + "</span>" : "") +
|
||||
escapeHtml(r.fullName) +
|
||||
"</li>";
|
||||
});
|
||||
html += "</ul></section>";
|
||||
}
|
||||
|
||||
if (unavailableList.length > 0) {
|
||||
html +=
|
||||
'<section class="day-detail-section day-detail-section--unavailable">' +
|
||||
'<h3 class="day-detail-section-title">' +
|
||||
escapeHtml(t(lang, "event_type.unavailable")) +
|
||||
"</h3><ul class=\"day-detail-list\">";
|
||||
unavailableList.forEach((d) => {
|
||||
html += "<li>" + escapeHtml(d.full_name || "") + "</li>";
|
||||
});
|
||||
html += "</ul></section>";
|
||||
}
|
||||
|
||||
if (vacationList.length > 0) {
|
||||
html +=
|
||||
'<section class="day-detail-section day-detail-section--vacation">' +
|
||||
'<h3 class="day-detail-section-title">' +
|
||||
escapeHtml(t(lang, "event_type.vacation")) +
|
||||
"</h3><ul class=\"day-detail-list\">";
|
||||
vacationList.forEach((d) => {
|
||||
html += "<li>" + escapeHtml(d.full_name || "") + "</li>";
|
||||
});
|
||||
html += "</ul></section>";
|
||||
}
|
||||
|
||||
if (summaries.length > 0) {
|
||||
html +=
|
||||
'<section class="day-detail-section day-detail-section--events">' +
|
||||
'<h3 class="day-detail-section-title">' +
|
||||
escapeHtml(t(lang, "hint.events")) +
|
||||
"</h3><ul class=\"day-detail-list\">";
|
||||
summaries.forEach((s) => {
|
||||
html += "<li>" + escapeHtml(String(s)) + "</li>";
|
||||
});
|
||||
html += "</ul></section>";
|
||||
}
|
||||
|
||||
html += "</div>";
|
||||
return html;
|
||||
}
|
||||
|
||||
/**
|
||||
* Position panel as popover near cell rect; keep inside viewport.
|
||||
* @param {HTMLElement} panel
|
||||
* @param {DOMRect} cellRect
|
||||
*/
|
||||
function positionPopover(panel, cellRect) {
|
||||
const vw = document.documentElement.clientWidth;
|
||||
const vh = document.documentElement.clientHeight;
|
||||
const margin = POPOVER_MARGIN;
|
||||
panel.classList.remove("day-detail-panel--below");
|
||||
panel.style.left = "";
|
||||
panel.style.top = "";
|
||||
panel.style.right = "";
|
||||
panel.style.bottom = "";
|
||||
panel.hidden = false;
|
||||
requestAnimationFrame(() => {
|
||||
const panelRect = panel.getBoundingClientRect();
|
||||
let left = cellRect.left + cellRect.width / 2 - panelRect.width / 2;
|
||||
let top = cellRect.bottom + 8;
|
||||
if (top + panelRect.height > vh - margin) {
|
||||
top = cellRect.top - panelRect.height - 8;
|
||||
panel.classList.add("day-detail-panel--below");
|
||||
} else {
|
||||
panel.classList.remove("day-detail-panel--below");
|
||||
}
|
||||
if (left < margin) left = margin;
|
||||
if (left + panelRect.width > vw - margin) left = vw - panelRect.width - margin;
|
||||
panel.style.left = left + "px";
|
||||
panel.style.top = top + "px";
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Show panel as bottom sheet (fixed at bottom).
|
||||
*/
|
||||
function showAsBottomSheet() {
|
||||
if (!panelEl || !overlayEl) return;
|
||||
overlayEl.hidden = false;
|
||||
panelEl.classList.add("day-detail-panel--sheet");
|
||||
panelEl.style.left = "";
|
||||
panelEl.style.top = "";
|
||||
panelEl.style.right = "";
|
||||
panelEl.style.bottom = "0";
|
||||
panelEl.hidden = false;
|
||||
const closeBtn = panelEl.querySelector(".day-detail-close");
|
||||
if (closeBtn) closeBtn.focus();
|
||||
}
|
||||
|
||||
/**
|
||||
* Show panel as popover at cell position.
|
||||
* @param {DOMRect} cellRect
|
||||
*/
|
||||
function showAsPopover(cellRect) {
|
||||
if (!panelEl || !overlayEl) return;
|
||||
overlayEl.hidden = true;
|
||||
panelEl.classList.remove("day-detail-panel--sheet");
|
||||
positionPopover(panelEl, cellRect);
|
||||
if (popoverCloseHandler) document.removeEventListener("click", popoverCloseHandler);
|
||||
popoverCloseHandler = (e) => {
|
||||
const target = e.target instanceof Node ? e.target : null;
|
||||
if (!target || !panelEl) return;
|
||||
if (panelEl.contains(target)) return;
|
||||
if (target instanceof HTMLElement && calendarEl && calendarEl.contains(target) && target.closest(".day")) return;
|
||||
hideDayDetail();
|
||||
};
|
||||
setTimeout(() => document.addEventListener("click", popoverCloseHandler), 0);
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide panel and overlay.
|
||||
*/
|
||||
export function hideDayDetail() {
|
||||
if (popoverCloseHandler) {
|
||||
document.removeEventListener("click", popoverCloseHandler);
|
||||
popoverCloseHandler = null;
|
||||
}
|
||||
if (panelEl) panelEl.hidden = true;
|
||||
if (overlayEl) overlayEl.hidden = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Open day detail for the given cell (reads data from data-* attributes).
|
||||
* @param {HTMLElement} cell - .day element
|
||||
*/
|
||||
function openDayDetail(cell) {
|
||||
const dateKey = cell.getAttribute("data-date");
|
||||
if (!dateKey) return;
|
||||
|
||||
const dutiesRaw = cell.getAttribute("data-day-duties");
|
||||
const eventsRaw = cell.getAttribute("data-day-events");
|
||||
const duties = /** @type {object[]} */ (parseDataAttr(dutiesRaw || ""));
|
||||
const eventSummaries = /** @type {string[]} */ (parseDataAttr(eventsRaw || ""));
|
||||
|
||||
ensurePanelInDom();
|
||||
if (!panelEl) return;
|
||||
|
||||
const contentHtml = buildDayDetailContent(dateKey, duties, eventSummaries);
|
||||
const body = panelEl.querySelector(".day-detail-body");
|
||||
if (body) body.innerHTML = contentHtml;
|
||||
|
||||
const isNarrow = window.matchMedia("(max-width: " + BOTTOM_SHEET_BREAKPOINT_PX + "px)").matches;
|
||||
if (isNarrow) {
|
||||
showAsBottomSheet();
|
||||
} else {
|
||||
const rect = cell.getBoundingClientRect();
|
||||
showAsPopover(rect);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Ensure #dayDetailPanel and overlay exist in DOM.
|
||||
*/
|
||||
function ensurePanelInDom() {
|
||||
if (panelEl) return;
|
||||
overlayEl = document.getElementById("dayDetailOverlay");
|
||||
panelEl = document.getElementById("dayDetailPanel");
|
||||
if (!overlayEl) {
|
||||
overlayEl = document.createElement("div");
|
||||
overlayEl.id = "dayDetailOverlay";
|
||||
overlayEl.className = "day-detail-overlay";
|
||||
overlayEl.setAttribute("aria-hidden", "true");
|
||||
overlayEl.hidden = true;
|
||||
document.body.appendChild(overlayEl);
|
||||
}
|
||||
if (!panelEl) {
|
||||
panelEl = document.createElement("div");
|
||||
panelEl.id = "dayDetailPanel";
|
||||
panelEl.className = "day-detail-panel";
|
||||
panelEl.setAttribute("role", "dialog");
|
||||
panelEl.setAttribute("aria-modal", "true");
|
||||
panelEl.setAttribute("aria-labelledby", "dayDetailTitle");
|
||||
panelEl.hidden = true;
|
||||
|
||||
const closeLabel = t(state.lang, "day_detail.close");
|
||||
panelEl.innerHTML =
|
||||
'<button type="button" class="day-detail-close" aria-label="' +
|
||||
escapeHtml(closeLabel) +
|
||||
'">×</button><div class="day-detail-body"></div>';
|
||||
|
||||
const closeBtn = panelEl.querySelector(".day-detail-close");
|
||||
if (closeBtn) {
|
||||
closeBtn.addEventListener("click", hideDayDetail);
|
||||
}
|
||||
panelEl.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Escape") hideDayDetail();
|
||||
});
|
||||
overlayEl.addEventListener("click", hideDayDetail);
|
||||
document.body.appendChild(panelEl);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Bind delegated click/keydown on calendar for .day cells.
|
||||
*/
|
||||
export function initDayDetail() {
|
||||
if (!calendarEl) return;
|
||||
calendarEl.addEventListener("click", (e) => {
|
||||
const cell = /** @type {HTMLElement} */ (e.target instanceof HTMLElement ? e.target.closest(".day") : null);
|
||||
if (!cell) return;
|
||||
e.preventDefault();
|
||||
openDayDetail(cell);
|
||||
});
|
||||
calendarEl.addEventListener("keydown", (e) => {
|
||||
if (e.key !== "Enter" && e.key !== " ") return;
|
||||
const cell = /** @type {HTMLElement} */ (e.target instanceof HTMLElement ? e.target.closest(".day") : null);
|
||||
if (!cell) return;
|
||||
e.preventDefault();
|
||||
openDayDetail(cell);
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user