Arnike/duty-teller
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 14 Wiki Activity

fix: enhance duty marker hint rendering and styling

Browse Source 
- Introduced a new function `getDutyMarkerHintHtml` to generate HTML for duty hints, improving the display of duty times and names.
- Updated the CSS for `.calendar-event-hint` to enhance layout and styling, ensuring better visual alignment and readability.
- Adjusted the handling of duty items to include non-breaking spaces for improved formatting of time displays.
- Removed deprecated CSS rules related to sticky elements to streamline styles and improve maintainability.
This commit is contained in:
Nikolay Tatarinov
2026-02-19 15:00:17 +03:00
parent 7e09da2b9e
commit 6d91274a4e
2 changed files with 114 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
webapp/app.js
View File

@@ -431,6 +431,7 @@
});
if (dutyItems.length >= 1 && hasTimes) {
var hintDay = marker.getAttribute("data-date") || "";
var nbsp = "\u00a0";
body = dutyItems.map(function (item, idx) {
var startAt = item.start_at != null ? item.start_at : item.startAt;
var endAt = item.end_at != null ? item.end_at : item.endAt;
@@ -439,19 +440,19 @@
var startSameDay = hintDay && startAt && localDateString(new Date(startAt)) === hintDay;
var endSameDay = hintDay && endAt && localDateString(new Date(endAt)) === hintDay;
var fullName = item.full_name != null ? item.full_name : item.fullName;
var parts = [fullName];
var timePrefix = "";
if (idx === 0) {
if (startSameDay && startHHMM) {
parts.push("с " + startHHMM);
if (endSameDay && endHHMM && endHHMM !== startHHMM) { parts.push("до " + endHHMM); }
if (dutyItems.length === 1 && startSameDay && startHHMM) {
timePrefix = "с" + nbsp + startHHMM;
if (endSameDay && endHHMM && endHHMM !== startHHMM) { timePrefix += " до" + nbsp + endHHMM; }
} else if (endHHMM) {
parts.push("до " + endHHMM);
timePrefix = "до" + nbsp + endHHMM;
}
} else if (idx > 0) {
if (startHHMM) { parts.push("с " + startHHMM); }
if (endHHMM && endSameDay && endHHMM !== startHHMM) { parts.push("до " + endHHMM); }
if (startHHMM) { timePrefix = "с" + nbsp + startHHMM; }
if (endHHMM && endSameDay && endHHMM !== startHHMM) { timePrefix += (timePrefix ? " " : "") + "до" + nbsp + endHHMM; }
}
return parts.join(", ");
return timePrefix ? timePrefix + " — " + fullName : fullName;
}).join("\n");
} else {
body = names;
@@ -462,6 +463,61 @@
return body ? label + ":\n" + body : label;
}
/** Returns HTML for duty hint with aligned times and no wrap inside name, or null to use textContent. */
function getDutyMarkerHintHtml(marker) {
var type = marker.getAttribute("data-event-type") || "duty";
if (type !== "duty") { return null; }
var names = marker.getAttribute("data-names") || "";
var dutyItemsRaw = marker.getAttribute("data-duty-items") || (marker.dataset && marker.dataset.dutyItems) || "";
var dutyItems = [];
try {
if (dutyItemsRaw) { dutyItems = JSON.parse(dutyItemsRaw); }
} catch (e) { /* ignore */ }
var hasTimes = dutyItems.length > 0 && dutyItems.some(function (it) {
var start = it.start_at != null ? it.start_at : it.startAt;
var end = it.end_at != null ? it.end_at : it.endAt;
return start || end;
});
var hintDay = marker.getAttribute("data-date") || "";
var nbsp = "\u00a0";
var rows;
if (dutyItems.length >= 1 && hasTimes) {
rows = dutyItems.map(function (item, idx) {
var startAt = item.start_at != null ? item.start_at : item.startAt;
var endAt = item.end_at != null ? item.end_at : item.endAt;
var endHHMM = endAt ? formatHHMM(endAt) : "";
var startHHMM = startAt ? formatHHMM(startAt) : "";
var startSameDay = hintDay && startAt && localDateString(new Date(startAt)) === hintDay;
var endSameDay = hintDay && endAt && localDateString(new Date(endAt)) === hintDay;
var fullName = item.full_name != null ? item.full_name : item.fullName;
var timePrefix = "";
if (idx === 0) {
if (dutyItems.length === 1 && startSameDay && startHHMM) {
timePrefix = "с" + nbsp + startHHMM;
if (endSameDay && endHHMM && endHHMM !== startHHMM) { timePrefix += " до" + nbsp + endHHMM; }
} else if (endHHMM) {
timePrefix = "до" + nbsp + endHHMM;
}
} else if (idx > 0) {
if (startHHMM) { timePrefix = "с" + nbsp + startHHMM; }
if (endHHMM && endSameDay && endHHMM !== startHHMM) { timePrefix += (timePrefix ? " " : "") + "до" + nbsp + endHHMM; }
}
var timeHtml = timePrefix ? escapeHtml(timePrefix) : "";
var nameHtml = escapeHtml(fullName);
var namePart = timePrefix ? " — " + nameHtml : nameHtml;
return "<span class=\"calendar-event-hint-time\">" + timeHtml + "</span><span class=\"calendar-event-hint-name\">" + namePart + "</span>";
});
} else {
rows = (names ? names.split("\n") : []).map(function (fullName) {
var nameHtml = escapeHtml(fullName.trim());
return "<span class=\"calendar-event-hint-time\"></span><span class=\"calendar-event-hint-name\">" + nameHtml + "</span>";
});
}
if (rows.length === 0) { return null; }
return "<div class=\"calendar-event-hint-title\">Дежурство:</div><div class=\"calendar-event-hint-rows\">" +
rows.map(function (r) { return "<div class=\"calendar-event-hint-row\">" + r + "</div>"; }).join("") + "</div>";
}
function clearActiveDutyMarker() {
calendarEl.querySelectorAll(".duty-marker.calendar-marker-active, .unavailable-marker.calendar-marker-active, .vacation-marker.calendar-marker-active")
.forEach(function (m) { m.classList.remove("calendar-marker-active"); });
@@ -485,7 +541,12 @@
clearTimeout(hideTimeout);
hideTimeout = null;
}
hintEl.textContent = getDutyMarkerHintContent(marker);
var html = getDutyMarkerHintHtml(marker);
if (html) {
hintEl.innerHTML = html;
} else {
hintEl.textContent = getDutyMarkerHintContent(marker);
}
var rect = marker.getBoundingClientRect();
positionHint(hintEl, rect);
hintEl.hidden = false;
@@ -506,7 +567,12 @@
return;
}
clearActiveDutyMarker();
hintEl.textContent = getDutyMarkerHintContent(marker);
var html = getDutyMarkerHintHtml(marker);
if (html) {
hintEl.innerHTML = html;
} else {
hintEl.textContent = getDutyMarkerHintContent(marker);
}
var rect = marker.getBoundingClientRect();
positionHint(hintEl, rect);
hintEl.hidden = false;