feat: enhance duty information handling with contact details and current duty view
- Added `bot_username` to settings for dynamic retrieval of the bot's username. - Implemented `_resolve_bot_username` function to fetch the bot's username if not set, improving user experience in group chats. - Updated `DutyWithUser` schema to include optional `phone` and `username` fields for enhanced duty information. - Enhanced API responses to include contact details for users, ensuring better communication. - Introduced a new current duty view in the web app, displaying active duty information along with contact options. - Updated CSS styles for better presentation of contact information in duty cards. - Added unit tests to verify the inclusion of contact details in API responses and the functionality of the current duty view.
This commit is contained in:
@@ -24,8 +24,18 @@
|
||||
<div class="loading" id="loading"><span class="loading__spinner" aria-hidden="true"></span><span class="loading__text"></span></div>
|
||||
<div class="error" id="error" hidden></div>
|
||||
<div class="access-denied" id="accessDenied" hidden></div>
|
||||
<div id="currentDutyView" class="current-duty-view hidden"></div>
|
||||
</div>
|
||||
<script src="https://telegram.org/js/telegram-web-app.js"></script>
|
||||
<script type="module" src="js/main.js"></script>
|
||||
<script type="importmap">
|
||||
{
|
||||
"scopes": {
|
||||
"./js/": {
|
||||
"./js/i18n.js": "./js/i18n.js?v=1"
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script type="module" src="js/main.js?v=4"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
239
webapp/js/currentDuty.js
Normal file
239
webapp/js/currentDuty.js
Normal file
@@ -0,0 +1,239 @@
|
||||
/**
|
||||
* Current duty view: full-screen card when opened via Mini App deep link (startapp=duty).
|
||||
* Fetches today's duties, finds the active one (start <= now < end), shows name, shift, contacts.
|
||||
*/
|
||||
|
||||
import { currentDutyViewEl, state, loadingEl } from "./dom.js";
|
||||
import { t } from "./i18n.js";
|
||||
import { escapeHtml } from "./utils.js";
|
||||
import { fetchDuties } from "./api.js";
|
||||
import {
|
||||
localDateString,
|
||||
dateKeyToDDMM,
|
||||
formatHHMM
|
||||
} from "./dateUtils.js";
|
||||
|
||||
/**
|
||||
* Find the duty that is currently active (start <= now < end). Prefer event_type === "duty".
|
||||
* @param {object[]} duties - List of duties with start_at, end_at, event_type
|
||||
* @returns {object|null}
|
||||
*/
|
||||
export function findCurrentDuty(duties) {
|
||||
const now = Date.now();
|
||||
const dutyType = (duties || []).filter((d) => d.event_type === "duty");
|
||||
const candidates = dutyType.length ? dutyType : duties || [];
|
||||
for (const d of candidates) {
|
||||
const start = new Date(d.start_at).getTime();
|
||||
const end = new Date(d.end_at).getTime();
|
||||
if (start <= now && now < end) return d;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Build contact HTML (phone + Telegram) for current duty card, styled like day-detail.
|
||||
* @param {'ru'|'en'} lang
|
||||
* @param {object} d - Duty with optional phone, username
|
||||
* @returns {string}
|
||||
*/
|
||||
function buildContactHtml(lang, d) {
|
||||
const parts = [];
|
||||
if (d.phone && String(d.phone).trim()) {
|
||||
const p = String(d.phone).trim();
|
||||
const label = t(lang, "contact.phone");
|
||||
const safeHref =
|
||||
"tel:" +
|
||||
p.replace(/&/g, "&").replace(/"/g, """).replace(/</g, "<");
|
||||
parts.push(
|
||||
'<span class="current-duty-contact">' +
|
||||
escapeHtml(label) +
|
||||
": " +
|
||||
'<a href="' +
|
||||
safeHref +
|
||||
'" class="current-duty-contact-link current-duty-contact-phone">' +
|
||||
escapeHtml(p) +
|
||||
"</a></span>"
|
||||
);
|
||||
}
|
||||
if (d.username && String(d.username).trim()) {
|
||||
const u = String(d.username).trim().replace(/^@+/, "");
|
||||
if (u) {
|
||||
const label = t(lang, "contact.telegram");
|
||||
const display = "@" + u;
|
||||
const href = "https://t.me/" + encodeURIComponent(u);
|
||||
parts.push(
|
||||
'<span class="current-duty-contact">' +
|
||||
escapeHtml(label) +
|
||||
": " +
|
||||
'<a href="' +
|
||||
escapeHtml(href) +
|
||||
'" class="current-duty-contact-link current-duty-contact-username" target="_blank" rel="noopener noreferrer">' +
|
||||
escapeHtml(display) +
|
||||
"</a></span>"
|
||||
);
|
||||
}
|
||||
}
|
||||
return parts.length
|
||||
? '<div class="current-duty-contact-row">' + parts.join(" ") + "</div>"
|
||||
: "";
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the current duty view content (card with duty or no-duty message).
|
||||
* @param {object|null} duty - Active duty or null
|
||||
* @param {string} lang
|
||||
* @returns {string}
|
||||
*/
|
||||
export function renderCurrentDutyContent(duty, lang) {
|
||||
const backLabel = t(lang, "current_duty.back");
|
||||
const title = t(lang, "current_duty.title");
|
||||
|
||||
if (!duty) {
|
||||
const noDuty = t(lang, "current_duty.no_duty");
|
||||
return (
|
||||
'<div class="current-duty-card">' +
|
||||
'<h2 class="current-duty-title">' +
|
||||
escapeHtml(title) +
|
||||
"</h2>" +
|
||||
'<p class="current-duty-no-duty">' +
|
||||
escapeHtml(noDuty) +
|
||||
"</p>" +
|
||||
'<button type="button" class="current-duty-back-btn" data-action="back">' +
|
||||
escapeHtml(backLabel) +
|
||||
"</button>" +
|
||||
"</div>"
|
||||
);
|
||||
}
|
||||
|
||||
const startLocal = localDateString(new Date(duty.start_at));
|
||||
const endLocal = localDateString(new Date(duty.end_at));
|
||||
const startDDMM = dateKeyToDDMM(startLocal);
|
||||
const endDDMM = dateKeyToDDMM(endLocal);
|
||||
const startTime = formatHHMM(duty.start_at);
|
||||
const endTime = formatHHMM(duty.end_at);
|
||||
const shiftStr =
|
||||
startDDMM +
|
||||
" " +
|
||||
startTime +
|
||||
" — " +
|
||||
endDDMM +
|
||||
" " +
|
||||
endTime;
|
||||
const shiftLabel = t(lang, "current_duty.shift");
|
||||
const contactHtml = buildContactHtml(lang, duty);
|
||||
|
||||
return (
|
||||
'<div class="current-duty-card">' +
|
||||
'<h2 class="current-duty-title">' +
|
||||
escapeHtml(title) +
|
||||
"</h2>" +
|
||||
'<p class="current-duty-name">' +
|
||||
escapeHtml(duty.full_name) +
|
||||
"</p>" +
|
||||
'<div class="current-duty-shift">' +
|
||||
escapeHtml(shiftLabel) +
|
||||
": " +
|
||||
escapeHtml(shiftStr) +
|
||||
"</div>" +
|
||||
contactHtml +
|
||||
'<button type="button" class="current-duty-back-btn" data-action="back">' +
|
||||
escapeHtml(backLabel) +
|
||||
"</button>" +
|
||||
"</div>"
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the current duty view: fetch today's duties, render card or no-duty, show back button.
|
||||
* Hides calendar/duty list and shows #currentDutyView. Optionally shows Telegram BackButton.
|
||||
* @param {() => void} onBack - Callback when user taps "Back to calendar"
|
||||
*/
|
||||
export async function showCurrentDutyView(onBack) {
|
||||
const container = currentDutyViewEl && currentDutyViewEl.closest(".container");
|
||||
const calendarSticky = document.getElementById("calendarSticky");
|
||||
const dutyList = document.getElementById("dutyList");
|
||||
if (!currentDutyViewEl) return;
|
||||
|
||||
currentDutyViewEl._onBack = onBack;
|
||||
currentDutyViewEl.classList.remove("hidden");
|
||||
if (container) container.setAttribute("data-view", "currentDuty");
|
||||
if (calendarSticky) calendarSticky.hidden = true;
|
||||
if (dutyList) dutyList.hidden = true;
|
||||
if (loadingEl) loadingEl.classList.add("hidden");
|
||||
|
||||
const lang = state.lang;
|
||||
currentDutyViewEl.innerHTML =
|
||||
'<div class="current-duty-loading">' +
|
||||
escapeHtml(t(lang, "loading")) +
|
||||
"</div>";
|
||||
|
||||
if (window.Telegram && window.Telegram.WebApp && window.Telegram.WebApp.BackButton) {
|
||||
window.Telegram.WebApp.BackButton.show();
|
||||
const handler = () => {
|
||||
if (currentDutyViewEl._onBack) currentDutyViewEl._onBack();
|
||||
};
|
||||
currentDutyViewEl._backButtonHandler = handler;
|
||||
window.Telegram.WebApp.BackButton.onClick(handler);
|
||||
}
|
||||
|
||||
const today = new Date();
|
||||
const from = localDateString(today);
|
||||
const to = from;
|
||||
try {
|
||||
const duties = await fetchDuties(from, to);
|
||||
const duty = findCurrentDuty(duties);
|
||||
currentDutyViewEl.innerHTML = renderCurrentDutyContent(duty, lang);
|
||||
} catch (e) {
|
||||
currentDutyViewEl.innerHTML =
|
||||
'<div class="current-duty-card">' +
|
||||
'<p class="current-duty-error">' +
|
||||
escapeHtml(e.message || t(lang, "error_generic")) +
|
||||
"</p>" +
|
||||
'<button type="button" class="current-duty-back-btn" data-action="back">' +
|
||||
escapeHtml(t(lang, "current_duty.back")) +
|
||||
"</button>" +
|
||||
"</div>";
|
||||
}
|
||||
|
||||
currentDutyViewEl.addEventListener("click", handleCurrentDutyClick);
|
||||
}
|
||||
|
||||
/**
|
||||
* Delegate click for back button.
|
||||
* @param {MouseEvent} e
|
||||
*/
|
||||
function handleCurrentDutyClick(e) {
|
||||
const btn = e.target && e.target.closest("[data-action='back']");
|
||||
if (!btn) return;
|
||||
if (currentDutyViewEl && currentDutyViewEl._onBack) {
|
||||
currentDutyViewEl._onBack();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide the current duty view and show calendar/duty list again.
|
||||
* Hides Telegram BackButton and calls loadMonth so calendar is populated.
|
||||
*/
|
||||
export function hideCurrentDutyView() {
|
||||
const container = currentDutyViewEl && currentDutyViewEl.closest(".container");
|
||||
const calendarSticky = document.getElementById("calendarSticky");
|
||||
const dutyList = document.getElementById("dutyList");
|
||||
const backHandler = currentDutyViewEl && currentDutyViewEl._backButtonHandler;
|
||||
|
||||
if (window.Telegram && window.Telegram.WebApp && window.Telegram.WebApp.BackButton) {
|
||||
if (backHandler) {
|
||||
window.Telegram.WebApp.BackButton.offClick(backHandler);
|
||||
}
|
||||
window.Telegram.WebApp.BackButton.hide();
|
||||
}
|
||||
if (currentDutyViewEl) {
|
||||
currentDutyViewEl.removeEventListener("click", handleCurrentDutyClick);
|
||||
currentDutyViewEl._onBack = null;
|
||||
currentDutyViewEl._backButtonHandler = null;
|
||||
currentDutyViewEl.classList.add("hidden");
|
||||
currentDutyViewEl.innerHTML = "";
|
||||
}
|
||||
if (container) container.removeAttribute("data-view");
|
||||
if (calendarSticky) calendarSticky.hidden = false;
|
||||
if (dutyList) dutyList.hidden = false;
|
||||
}
|
||||
121
webapp/js/currentDuty.test.js
Normal file
121
webapp/js/currentDuty.test.js
Normal file
@@ -0,0 +1,121 @@
|
||||
/**
|
||||
* Unit tests for currentDuty (findCurrentDuty, renderCurrentDutyContent, showCurrentDutyView).
|
||||
*/
|
||||
|
||||
import { describe, it, expect, beforeAll, vi } from "vitest";
|
||||
|
||||
vi.mock("./api.js", () => ({
|
||||
fetchDuties: vi.fn().mockResolvedValue([])
|
||||
}));
|
||||
|
||||
import {
|
||||
findCurrentDuty,
|
||||
renderCurrentDutyContent
|
||||
} from "./currentDuty.js";
|
||||
|
||||
describe("currentDuty", () => {
|
||||
beforeAll(() => {
|
||||
document.body.innerHTML =
|
||||
'<div id="loading"></div>' +
|
||||
'<div class="container">' +
|
||||
'<div id="calendarSticky"></div>' +
|
||||
'<div id="dutyList"></div>' +
|
||||
'<div id="currentDutyView" class="current-duty-view hidden"></div>' +
|
||||
"</div>";
|
||||
});
|
||||
|
||||
describe("findCurrentDuty", () => {
|
||||
it("returns duty when now is between start_at and end_at", () => {
|
||||
const now = new Date();
|
||||
const start = new Date(now);
|
||||
start.setHours(start.getHours() - 1, 0, 0, 0);
|
||||
const end = new Date(now);
|
||||
end.setHours(end.getHours() + 1, 0, 0, 0);
|
||||
const duties = [
|
||||
{
|
||||
event_type: "duty",
|
||||
full_name: "Иванов",
|
||||
start_at: start.toISOString(),
|
||||
end_at: end.toISOString()
|
||||
}
|
||||
];
|
||||
const duty = findCurrentDuty(duties);
|
||||
expect(duty).not.toBeNull();
|
||||
expect(duty.full_name).toBe("Иванов");
|
||||
});
|
||||
|
||||
it("returns null when no duty overlaps current time", () => {
|
||||
const duties = [
|
||||
{
|
||||
event_type: "duty",
|
||||
full_name: "Past",
|
||||
start_at: "2020-01-01T09:00:00Z",
|
||||
end_at: "2020-01-01T17:00:00Z"
|
||||
},
|
||||
{
|
||||
event_type: "duty",
|
||||
full_name: "Future",
|
||||
start_at: "2030-01-01T09:00:00Z",
|
||||
end_at: "2030-01-01T17:00:00Z"
|
||||
}
|
||||
];
|
||||
expect(findCurrentDuty(duties)).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe("renderCurrentDutyContent", () => {
|
||||
it("renders no-duty message and back button when duty is null", () => {
|
||||
const html = renderCurrentDutyContent(null, "en");
|
||||
expect(html).toContain("current-duty-card");
|
||||
expect(html).toContain("Current Duty");
|
||||
expect(html).toContain("No one is on duty right now");
|
||||
expect(html).toContain("Back to calendar");
|
||||
expect(html).toContain('data-action="back"');
|
||||
});
|
||||
|
||||
it("renders duty card with name, shift, and back button when duty has no contacts", () => {
|
||||
const duty = {
|
||||
event_type: "duty",
|
||||
full_name: "Иванов Иван",
|
||||
start_at: "2025-03-02T06:00:00.000Z",
|
||||
end_at: "2025-03-03T06:00:00.000Z"
|
||||
};
|
||||
const html = renderCurrentDutyContent(duty, "ru");
|
||||
expect(html).toContain("Текущее дежурство");
|
||||
expect(html).toContain("Иванов Иван");
|
||||
expect(html).toContain("Смена");
|
||||
expect(html).toContain("Назад к календарю");
|
||||
expect(html).toContain('data-action="back"');
|
||||
});
|
||||
|
||||
it("renders duty card with phone and Telegram links when present", () => {
|
||||
const duty = {
|
||||
event_type: "duty",
|
||||
full_name: "Alice",
|
||||
start_at: "2025-03-02T09:00:00",
|
||||
end_at: "2025-03-02T17:00:00",
|
||||
phone: "+7 900 123-45-67",
|
||||
username: "alice_dev"
|
||||
};
|
||||
const html = renderCurrentDutyContent(duty, "en");
|
||||
expect(html).toContain("Alice");
|
||||
expect(html).toContain("current-duty-contact-row");
|
||||
expect(html).toContain('href="tel:');
|
||||
expect(html).toContain("+7 900 123-45-67");
|
||||
expect(html).toContain("https://t.me/");
|
||||
expect(html).toContain("alice_dev");
|
||||
expect(html).toContain("Back to calendar");
|
||||
});
|
||||
});
|
||||
|
||||
describe("showCurrentDutyView", () => {
|
||||
it("hides the global loading element when called", async () => {
|
||||
vi.resetModules();
|
||||
const { showCurrentDutyView } = await import("./currentDuty.js");
|
||||
await showCurrentDutyView(() => {});
|
||||
const loading = document.getElementById("loading");
|
||||
expect(loading).not.toBeNull();
|
||||
expect(loading.classList.contains("hidden")).toBe(true);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -35,6 +35,43 @@ function parseDataAttr(raw) {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Build HTML for contact info (phone link, Telegram username link) for a duty entry.
|
||||
* @param {'ru'|'en'} lang
|
||||
* @param {string|null|undefined} phone
|
||||
* @param {string|null|undefined} username - Telegram username with or without leading @
|
||||
* @returns {string}
|
||||
*/
|
||||
function buildContactHtml(lang, phone, username) {
|
||||
const parts = [];
|
||||
if (phone && String(phone).trim()) {
|
||||
const p = String(phone).trim();
|
||||
const label = t(lang, "contact.phone");
|
||||
const safeHref = "tel:" + p.replace(/&/g, "&").replace(/"/g, """).replace(/</g, "<");
|
||||
parts.push(
|
||||
'<span class="day-detail-contact">' +
|
||||
escapeHtml(label) + ": " +
|
||||
'<a href="' + safeHref + '" class="day-detail-contact-link day-detail-contact-phone">' +
|
||||
escapeHtml(p) + "</a></span>"
|
||||
);
|
||||
}
|
||||
if (username && String(username).trim()) {
|
||||
const u = String(username).trim().replace(/^@+/, "");
|
||||
if (u) {
|
||||
const label = t(lang, "contact.telegram");
|
||||
const display = "@" + u;
|
||||
const href = "https://t.me/" + encodeURIComponent(u);
|
||||
parts.push(
|
||||
'<span class="day-detail-contact">' +
|
||||
escapeHtml(label) + ": " +
|
||||
'<a href="' + escapeHtml(href) + '" class="day-detail-contact-link day-detail-contact-username" target="_blank" rel="noopener noreferrer">' +
|
||||
escapeHtml(display) + "</a></span>"
|
||||
);
|
||||
}
|
||||
}
|
||||
return parts.length ? '<div class="day-detail-contact-row">' + parts.join(" ") + "</div>" : "";
|
||||
}
|
||||
|
||||
/**
|
||||
* Build HTML content for the day detail panel.
|
||||
* @param {string} dateKey - YYYY-MM-DD
|
||||
@@ -72,7 +109,12 @@ export function buildDayDetailContent(dateKey, duties, eventSummaries) {
|
||||
);
|
||||
const rows = hasTimes
|
||||
? getDutyMarkerRows(dutyList, dateKey, nbsp, fromLabel, toLabel)
|
||||
: dutyList.map((it) => ({ timePrefix: "", fullName: it.full_name || "" }));
|
||||
: dutyList.map((it) => ({
|
||||
timePrefix: "",
|
||||
fullName: it.full_name || "",
|
||||
phone: it.phone,
|
||||
username: it.username
|
||||
}));
|
||||
|
||||
html +=
|
||||
'<section class="day-detail-section day-detail-section--duty">' +
|
||||
@@ -80,12 +122,17 @@ export function buildDayDetailContent(dateKey, duties, eventSummaries) {
|
||||
escapeHtml(t(lang, "event_type.duty")) +
|
||||
"</h3><ul class=" +
|
||||
'"day-detail-list">';
|
||||
rows.forEach((r) => {
|
||||
rows.forEach((r, i) => {
|
||||
const duty = hasTimes ? dutyList[i] : null;
|
||||
const phone = r.phone != null ? r.phone : (duty && duty.phone);
|
||||
const username = r.username != null ? r.username : (duty && duty.username);
|
||||
const timeHtml = r.timePrefix ? escapeHtml(r.timePrefix) + " — " : "";
|
||||
const contactHtml = buildContactHtml(lang, phone, username);
|
||||
html +=
|
||||
"<li>" +
|
||||
(timeHtml ? '<span class="day-detail-time">' + timeHtml + "</span>" : "") +
|
||||
escapeHtml(r.fullName) +
|
||||
(contactHtml ? contactHtml : "") +
|
||||
"</li>";
|
||||
});
|
||||
html += "</ul></section>";
|
||||
|
||||
@@ -38,4 +38,25 @@ describe("buildDayDetailContent", () => {
|
||||
const petrovPos = html.indexOf("Петров");
|
||||
expect(ivanovPos).toBeLessThan(petrovPos);
|
||||
});
|
||||
|
||||
it("includes contact info (phone, username) for duty entries when present", () => {
|
||||
const dateKey = "2025-03-01";
|
||||
const duties = [
|
||||
{
|
||||
event_type: "duty",
|
||||
full_name: "Alice",
|
||||
start_at: "2025-03-01T09:00:00",
|
||||
end_at: "2025-03-01T17:00:00",
|
||||
phone: "+79991234567",
|
||||
username: "alice_dev",
|
||||
},
|
||||
];
|
||||
const html = buildDayDetailContent(dateKey, duties, []);
|
||||
expect(html).toContain("Alice");
|
||||
expect(html).toContain("day-detail-contact-row");
|
||||
expect(html).toContain('href="tel:');
|
||||
expect(html).toContain("+79991234567");
|
||||
expect(html).toContain("https://t.me/");
|
||||
expect(html).toContain("alice_dev");
|
||||
});
|
||||
});
|
||||
|
||||
@@ -32,6 +32,9 @@ export const prevBtn = document.getElementById("prevMonth");
|
||||
/** @type {HTMLButtonElement|null} */
|
||||
export const nextBtn = document.getElementById("nextMonth");
|
||||
|
||||
/** @type {HTMLDivElement|null} */
|
||||
export const currentDutyViewEl = document.getElementById("currentDutyView");
|
||||
|
||||
/** Currently viewed month (mutable). */
|
||||
export const state = {
|
||||
/** @type {Date} */
|
||||
|
||||
@@ -14,8 +14,49 @@ import {
|
||||
formatDateKey
|
||||
} from "./dateUtils.js";
|
||||
|
||||
/**
|
||||
* Build HTML for contact links (phone, Telegram) for a duty. Returns empty string if none.
|
||||
* @param {'ru'|'en'} lang
|
||||
* @param {object} d - Duty with optional phone, username
|
||||
* @returns {string}
|
||||
*/
|
||||
function dutyCardContactHtml(lang, d) {
|
||||
const parts = [];
|
||||
if (d.phone && String(d.phone).trim()) {
|
||||
const p = String(d.phone).trim();
|
||||
const safeHref = "tel:" + p.replace(/&/g, "&").replace(/"/g, """).replace(/</g, "<");
|
||||
parts.push(
|
||||
'<a href="' + safeHref + '" class="duty-contact-link duty-contact-phone">' +
|
||||
escapeHtml(p) + "</a>"
|
||||
);
|
||||
}
|
||||
if (d.username && String(d.username).trim()) {
|
||||
const u = String(d.username).trim().replace(/^@+/, "");
|
||||
if (u) {
|
||||
const href = "https://t.me/" + encodeURIComponent(u);
|
||||
parts.push(
|
||||
'<a href="' + href.replace(/"/g, """) + '" class="duty-contact-link duty-contact-username" target="_blank" rel="noopener noreferrer">@' +
|
||||
escapeHtml(u) + "</a>"
|
||||
);
|
||||
}
|
||||
}
|
||||
return parts.length
|
||||
? '<div class="duty-contact-row">' + parts.join(" · ") + "</div>"
|
||||
: "";
|
||||
}
|
||||
|
||||
/** Phone icon SVG for flip button (show contacts). */
|
||||
const ICON_PHONE =
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>';
|
||||
|
||||
/** Back/arrow icon SVG for flip button (back to card). */
|
||||
const ICON_BACK =
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>';
|
||||
|
||||
/**
|
||||
* Build HTML for one timeline duty card: one-day "DD.MM, HH:MM – HH:MM" or multi-day.
|
||||
* When duty has phone or username, wraps in a flip-card (front: info + button; back: contacts).
|
||||
* Otherwise returns a plain card without flip wrapper.
|
||||
* @param {object} d - Duty
|
||||
* @param {boolean} isCurrent - Whether this is "current" duty
|
||||
* @returns {string}
|
||||
@@ -38,15 +79,62 @@ export function dutyTimelineCardHtml(d, isCurrent) {
|
||||
? t(lang, "duty.now_on_duty")
|
||||
: (t(lang, "event_type." + (d.event_type || "duty")));
|
||||
const extraClass = isCurrent ? " duty-item--current" : "";
|
||||
const contactHtml = dutyCardContactHtml(lang, d);
|
||||
const hasContacts = Boolean(
|
||||
(d.phone && String(d.phone).trim()) ||
|
||||
(d.username && String(d.username).trim())
|
||||
);
|
||||
|
||||
if (!hasContacts) {
|
||||
return (
|
||||
'<div class="duty-item duty-item--duty duty-timeline-card' +
|
||||
extraClass +
|
||||
'"><span class="duty-item-type">' +
|
||||
escapeHtml(typeLabel) +
|
||||
'</span> <span class="name">' +
|
||||
escapeHtml(d.full_name) +
|
||||
'</span><div class="time">' +
|
||||
escapeHtml(timeStr) +
|
||||
"</div></div>"
|
||||
);
|
||||
}
|
||||
|
||||
const showLabel = t(lang, "contact.show");
|
||||
const backLabel = t(lang, "contact.back");
|
||||
return (
|
||||
'<div class="duty-item duty-item--duty duty-timeline-card' +
|
||||
'<div class="duty-flip-card' +
|
||||
extraClass +
|
||||
'"><span class="duty-item-type">' +
|
||||
'" data-flipped="false">' +
|
||||
'<div class="duty-flip-inner">' +
|
||||
'<div class="duty-flip-front duty-item duty-item--duty duty-timeline-card' +
|
||||
extraClass +
|
||||
'">' +
|
||||
'<span class="duty-item-type">' +
|
||||
escapeHtml(typeLabel) +
|
||||
'</span> <span class="name">' +
|
||||
escapeHtml(d.full_name) +
|
||||
'</span><div class="time">' +
|
||||
escapeHtml(timeStr) +
|
||||
'</div>' +
|
||||
'<button class="duty-flip-btn" type="button" aria-label="' +
|
||||
escapeHtml(showLabel) +
|
||||
'">' +
|
||||
ICON_PHONE +
|
||||
"</button>" +
|
||||
"</div>" +
|
||||
'<div class="duty-flip-back duty-item duty-item--duty duty-timeline-card' +
|
||||
extraClass +
|
||||
'">' +
|
||||
'<span class="name">' +
|
||||
escapeHtml(d.full_name) +
|
||||
"</span>" +
|
||||
contactHtml +
|
||||
'<button class="duty-flip-btn" type="button" aria-label="' +
|
||||
escapeHtml(backLabel) +
|
||||
'">' +
|
||||
ICON_BACK +
|
||||
"</button>" +
|
||||
"</div>" +
|
||||
"</div></div>"
|
||||
);
|
||||
}
|
||||
@@ -91,12 +179,27 @@ export function dutyItemHtml(d, typeLabelOverride, showUntilEnd, extraClass) {
|
||||
);
|
||||
}
|
||||
|
||||
/** Whether the delegated flip-button click listener has been attached to dutyListEl. */
|
||||
let flipListenerAttached = false;
|
||||
|
||||
/**
|
||||
* Render duty list (timeline) for current month; scroll to today if visible.
|
||||
* @param {object[]} duties - Duties (only duty type used for timeline)
|
||||
*/
|
||||
export function renderDutyList(duties) {
|
||||
if (!dutyListEl) return;
|
||||
|
||||
if (!flipListenerAttached) {
|
||||
flipListenerAttached = true;
|
||||
dutyListEl.addEventListener("click", (e) => {
|
||||
const btn = e.target.closest(".duty-flip-btn");
|
||||
if (!btn) return;
|
||||
const card = btn.closest(".duty-flip-card");
|
||||
if (!card) return;
|
||||
const flipped = card.getAttribute("data-flipped") === "true";
|
||||
card.setAttribute("data-flipped", String(!flipped));
|
||||
});
|
||||
}
|
||||
const filtered = duties.filter((d) => d.event_type === "duty");
|
||||
if (filtered.length === 0) {
|
||||
dutyListEl.classList.remove("duty-timeline");
|
||||
|
||||
92
webapp/js/dutyList.test.js
Normal file
92
webapp/js/dutyList.test.js
Normal file
@@ -0,0 +1,92 @@
|
||||
/**
|
||||
* Unit tests for dutyList (dutyTimelineCardHtml, contact rendering).
|
||||
*/
|
||||
|
||||
import { describe, it, expect, beforeAll } from "vitest";
|
||||
import { dutyTimelineCardHtml } from "./dutyList.js";
|
||||
|
||||
describe("dutyList", () => {
|
||||
beforeAll(() => {
|
||||
document.body.innerHTML =
|
||||
'<div id="calendar"></div><div id="monthTitle"></div>' +
|
||||
'<div id="dutyList"></div><div id="loading"></div><div id="error"></div>' +
|
||||
'<div id="accessDenied"></div><div class="header"></div><div class="weekdays"></div>' +
|
||||
'<button id="prevMonth"></button><button id="nextMonth"></button>';
|
||||
});
|
||||
|
||||
describe("dutyTimelineCardHtml", () => {
|
||||
it("renders duty with full_name and time range (no flip when no contacts)", () => {
|
||||
const d = {
|
||||
event_type: "duty",
|
||||
full_name: "Иванов",
|
||||
start_at: "2025-02-25T09:00:00",
|
||||
end_at: "2025-02-25T18:00:00",
|
||||
};
|
||||
const html = dutyTimelineCardHtml(d, false);
|
||||
expect(html).toContain("Иванов");
|
||||
expect(html).toContain("duty-item");
|
||||
expect(html).toContain("duty-timeline-card");
|
||||
expect(html).not.toContain("duty-flip-card");
|
||||
expect(html).not.toContain("duty-flip-btn");
|
||||
});
|
||||
|
||||
it("uses flip-card wrapper with front and back when phone or username present", () => {
|
||||
const d = {
|
||||
event_type: "duty",
|
||||
full_name: "Alice",
|
||||
start_at: "2025-03-01T09:00:00",
|
||||
end_at: "2025-03-01T17:00:00",
|
||||
phone: "+79991234567",
|
||||
username: "alice_dev",
|
||||
};
|
||||
const html = dutyTimelineCardHtml(d, false);
|
||||
expect(html).toContain("Alice");
|
||||
expect(html).toContain("duty-flip-card");
|
||||
expect(html).toContain("duty-flip-inner");
|
||||
expect(html).toContain("duty-flip-front");
|
||||
expect(html).toContain("duty-flip-back");
|
||||
expect(html).toContain("duty-flip-btn");
|
||||
expect(html).toContain('data-flipped="false"');
|
||||
expect(html).toContain("duty-contact-row");
|
||||
expect(html).toContain('href="tel:');
|
||||
expect(html).toContain("+79991234567");
|
||||
expect(html).toContain("https://t.me/");
|
||||
expect(html).toContain("alice_dev");
|
||||
});
|
||||
|
||||
it("front face contains name and time; back face contains contact links", () => {
|
||||
const d = {
|
||||
event_type: "duty",
|
||||
full_name: "Bob",
|
||||
start_at: "2025-03-02T08:00:00",
|
||||
end_at: "2025-03-02T16:00:00",
|
||||
phone: "+79001112233",
|
||||
};
|
||||
const html = dutyTimelineCardHtml(d, false);
|
||||
const frontStart = html.indexOf("duty-flip-front");
|
||||
const backStart = html.indexOf("duty-flip-back");
|
||||
const frontSection = html.slice(frontStart, backStart);
|
||||
const backSection = html.slice(backStart);
|
||||
expect(frontSection).toContain("Bob");
|
||||
expect(frontSection).toContain("time");
|
||||
expect(frontSection).not.toContain("duty-contact-row");
|
||||
expect(backSection).toContain("Bob");
|
||||
expect(backSection).toContain("duty-contact-row");
|
||||
expect(backSection).toContain("tel:");
|
||||
});
|
||||
|
||||
it("omits flip wrapper and button when phone and username are missing", () => {
|
||||
const d = {
|
||||
event_type: "duty",
|
||||
full_name: "Bob",
|
||||
start_at: "2025-03-02T08:00:00",
|
||||
end_at: "2025-03-02T16:00:00",
|
||||
};
|
||||
const html = dutyTimelineCardHtml(d, false);
|
||||
expect(html).toContain("Bob");
|
||||
expect(html).not.toContain("duty-flip-card");
|
||||
expect(html).not.toContain("duty-flip-btn");
|
||||
expect(html).not.toContain("duty-contact-row");
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -49,7 +49,16 @@ export const MESSAGES = {
|
||||
"hint.to": "until",
|
||||
"hint.duty_title": "Duty:",
|
||||
"hint.events": "Events:",
|
||||
"day_detail.close": "Close"
|
||||
"day_detail.close": "Close",
|
||||
"contact.label": "Contact",
|
||||
"contact.show": "Contacts",
|
||||
"contact.back": "Back",
|
||||
"contact.phone": "Phone",
|
||||
"contact.telegram": "Telegram",
|
||||
"current_duty.title": "Current Duty",
|
||||
"current_duty.no_duty": "No one is on duty right now",
|
||||
"current_duty.shift": "Shift",
|
||||
"current_duty.back": "Back to calendar"
|
||||
},
|
||||
ru: {
|
||||
"app.title": "Календарь дежурств",
|
||||
@@ -94,7 +103,16 @@ export const MESSAGES = {
|
||||
"hint.to": "до",
|
||||
"hint.duty_title": "Дежурство:",
|
||||
"hint.events": "События:",
|
||||
"day_detail.close": "Закрыть"
|
||||
"day_detail.close": "Закрыть",
|
||||
"contact.label": "Контакт",
|
||||
"contact.show": "Контакты",
|
||||
"contact.back": "Назад",
|
||||
"contact.phone": "Телефон",
|
||||
"contact.telegram": "Telegram",
|
||||
"current_duty.title": "Текущее дежурство",
|
||||
"current_duty.no_duty": "Сейчас никто не дежурит",
|
||||
"current_duty.shift": "Смена",
|
||||
"current_duty.back": "Назад к календарю"
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -25,6 +25,7 @@ import {
|
||||
import { initDayDetail } from "./dayDetail.js";
|
||||
import { initHints } from "./hints.js";
|
||||
import { renderDutyList } from "./dutyList.js";
|
||||
import { showCurrentDutyView, hideCurrentDutyView } from "./currentDuty.js";
|
||||
import {
|
||||
firstDayOfMonth,
|
||||
lastDayOfMonth,
|
||||
@@ -262,6 +263,18 @@ runWhenReady(() => {
|
||||
bindStickyScrollShadow();
|
||||
initDayDetail();
|
||||
initHints();
|
||||
loadMonth();
|
||||
const startParam =
|
||||
(window.Telegram && window.Telegram.WebApp && window.Telegram.WebApp.initDataUnsafe &&
|
||||
window.Telegram.WebApp.initDataUnsafe.start_param) ||
|
||||
"";
|
||||
if (startParam === "duty") {
|
||||
state.lang = getLang();
|
||||
showCurrentDutyView(() => {
|
||||
hideCurrentDutyView();
|
||||
loadMonth();
|
||||
});
|
||||
} else {
|
||||
loadMonth();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
248
webapp/style.css
248
webapp/style.css
@@ -416,6 +416,48 @@ body.day-detail-sheet-open {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
/* Contact info: phone (tel:) and Telegram username links in day detail */
|
||||
.day-detail-contact-row {
|
||||
margin-top: 4px;
|
||||
font-size: 0.85rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.day-detail-contact {
|
||||
display: inline-block;
|
||||
margin-right: 0.75em;
|
||||
}
|
||||
|
||||
.day-detail-contact:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.day-detail-contact-link,
|
||||
.day-detail-contact-phone,
|
||||
.day-detail-contact-username {
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.day-detail-contact-link:hover,
|
||||
.day-detail-contact-phone:hover,
|
||||
.day-detail-contact-username:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.day-detail-contact-link:focus,
|
||||
.day-detail-contact-phone:focus,
|
||||
.day-detail-contact-username:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.day-detail-contact-link:focus-visible,
|
||||
.day-detail-contact-phone:focus-visible,
|
||||
.day-detail-contact-username:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.info-btn {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@@ -746,6 +788,70 @@ body.day-detail-sheet-open {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Flip-card: front = duty info + button, back = contacts */
|
||||
.duty-flip-card {
|
||||
perspective: 600px;
|
||||
position: relative;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.duty-flip-inner {
|
||||
transition: transform 0.4s;
|
||||
transform-style: preserve-3d;
|
||||
position: relative;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.duty-flip-card[data-flipped="true"] .duty-flip-inner {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.duty-flip-front {
|
||||
position: relative;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.duty-flip-back {
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.duty-flip-btn {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background: var(--surface);
|
||||
color: var(--accent);
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background var(--transition-fast), color var(--transition-fast);
|
||||
}
|
||||
|
||||
.duty-flip-btn:hover {
|
||||
background: color-mix(in srgb, var(--accent) 20%, var(--surface));
|
||||
}
|
||||
|
||||
.duty-flip-btn:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.duty-flip-btn:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.duty-timeline-card.duty-item,
|
||||
.duty-list .duty-item {
|
||||
display: grid;
|
||||
@@ -793,6 +899,41 @@ body.day-detail-sheet-open {
|
||||
.duty-timeline-card .name { grid-column: 1; grid-row: 2; min-width: 0; }
|
||||
.duty-timeline-card .time { grid-column: 1; grid-row: 3; }
|
||||
|
||||
/* Contact info: phone and Telegram username links in duty timeline cards */
|
||||
.duty-contact-row {
|
||||
grid-column: 1;
|
||||
grid-row: 4;
|
||||
font-size: 0.8rem;
|
||||
color: var(--muted);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.duty-contact-link,
|
||||
.duty-contact-phone,
|
||||
.duty-contact-username {
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.duty-contact-link:hover,
|
||||
.duty-contact-phone:hover,
|
||||
.duty-contact-username:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.duty-contact-link:focus,
|
||||
.duty-contact-phone:focus,
|
||||
.duty-contact-username:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.duty-contact-link:focus-visible,
|
||||
.duty-contact-phone:focus-visible,
|
||||
.duty-contact-username:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.duty-item--current {
|
||||
border-left-color: var(--today);
|
||||
background: color-mix(in srgb, var(--today) 12%, var(--surface));
|
||||
@@ -848,10 +989,115 @@ body.day-detail-sheet-open {
|
||||
color: var(--error);
|
||||
}
|
||||
|
||||
.error[hidden], .loading.hidden {
|
||||
.error[hidden], .loading.hidden,
|
||||
.current-duty-view.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Current duty view (Mini App deep link startapp=duty) */
|
||||
[data-view="currentDuty"] .calendar-sticky,
|
||||
[data-view="currentDuty"] .duty-list {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.current-duty-view {
|
||||
padding: 24px 16px;
|
||||
min-height: 60vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.current-duty-card {
|
||||
background: var(--surface);
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
max-width: 360px;
|
||||
width: 100%;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.current-duty-title {
|
||||
margin: 0 0 16px 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.current-duty-name {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: var(--duty);
|
||||
}
|
||||
|
||||
.current-duty-shift {
|
||||
margin: 0 0 12px 0;
|
||||
font-size: 0.95rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.current-duty-no-duty,
|
||||
.current-duty-error {
|
||||
margin: 0 0 16px 0;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.current-duty-error {
|
||||
color: var(--error);
|
||||
}
|
||||
|
||||
.current-duty-contact-row {
|
||||
margin: 12px 0 20px 0;
|
||||
}
|
||||
|
||||
.current-duty-contact {
|
||||
display: inline-block;
|
||||
margin-right: 12px;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.current-duty-contact-link,
|
||||
.current-duty-contact-phone,
|
||||
.current-duty-contact-username {
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.current-duty-contact-link:hover,
|
||||
.current-duty-contact-phone:hover,
|
||||
.current-duty-contact-username:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.current-duty-back-btn {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
margin-top: 8px;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
color: var(--bg);
|
||||
background: var(--accent);
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.current-duty-back-btn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.current-duty-back-btn:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.current-duty-loading {
|
||||
text-align: center;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.access-denied {
|
||||
text-align: center;
|
||||
padding: 24px 12px;
|
||||
|
||||
Reference in New Issue
Block a user