Nikolay Tatarinov
dd960dc5cc
- Introduced a new function to set the default menu button for the Telegram bot's Web App. - Updated the initData validation process to provide detailed error messages for authorization failures. - Refactored the validate_init_data function to return both username and reason for validation failure. - Enhanced the web application to handle access denial more gracefully, providing users with hints on how to access the calendar. - Improved the README with additional instructions for configuring the bot's menu button and Web App URL. - Updated tests to reflect changes in the validation process and error handling.
315 lines
11 KiB
JavaScript
315 lines
11 KiB
JavaScript
(function () {
|
||
const FETCH_TIMEOUT_MS = 15000;
|
||
const RETRY_DELAY_MS = 800;
|
||
const RETRY_AFTER_ACCESS_DENIED_MS = 1200;
|
||
|
||
const MONTHS = [
|
||
"Январь", "Февраль", "Март", "Апрель", "Май", "Июнь",
|
||
"Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь"
|
||
];
|
||
|
||
let current = new Date();
|
||
const calendarEl = document.getElementById("calendar");
|
||
const monthTitleEl = document.getElementById("monthTitle");
|
||
const dutyListEl = document.getElementById("dutyList");
|
||
const loadingEl = document.getElementById("loading");
|
||
const errorEl = document.getElementById("error");
|
||
const accessDeniedEl = document.getElementById("accessDenied");
|
||
const headerEl = document.querySelector(".header");
|
||
const weekdaysEl = document.querySelector(".weekdays");
|
||
const prevBtn = document.getElementById("prevMonth");
|
||
const nextBtn = document.getElementById("nextMonth");
|
||
|
||
function isoDate(d) {
|
||
return d.toISOString().slice(0, 10);
|
||
}
|
||
|
||
function firstDayOfMonth(d) {
|
||
return new Date(d.getFullYear(), d.getMonth(), 1);
|
||
}
|
||
|
||
function lastDayOfMonth(d) {
|
||
return new Date(d.getFullYear(), d.getMonth() + 1, 0);
|
||
}
|
||
|
||
function getMonday(d) {
|
||
const day = d.getDay();
|
||
const diff = d.getDate() - day + (day === 0 ? -6 : 1);
|
||
return new Date(d.getFullYear(), d.getMonth(), diff);
|
||
}
|
||
|
||
/** Get tgWebAppData value from hash when it contains unencoded & and = (URLSearchParams would split it). Value runs from tgWebAppData= until next &tgWebApp or end. */
|
||
function getTgWebAppDataFromHash(hash) {
|
||
var idx = hash.indexOf("tgWebAppData=");
|
||
if (idx === -1) return "";
|
||
var start = idx + "tgWebAppData=".length;
|
||
var end = hash.indexOf("&tgWebApp", start);
|
||
if (end === -1) end = hash.length;
|
||
var raw = hash.substring(start, end);
|
||
try {
|
||
return decodeURIComponent(raw);
|
||
} catch (e) {
|
||
return raw;
|
||
}
|
||
}
|
||
|
||
function getInitData() {
|
||
var fromSdk = (window.Telegram && window.Telegram.WebApp && window.Telegram.WebApp.initData) || "";
|
||
if (fromSdk) return fromSdk;
|
||
var hash = window.location.hash ? window.location.hash.slice(1) : "";
|
||
if (hash) {
|
||
var fromHash = getTgWebAppDataFromHash(hash);
|
||
if (fromHash) return fromHash;
|
||
try {
|
||
var hashParams = new URLSearchParams(hash);
|
||
var tgFromHash = hashParams.get("tgWebAppData");
|
||
if (tgFromHash) return decodeURIComponent(tgFromHash);
|
||
} catch (e) { /* ignore */ }
|
||
}
|
||
var q = window.location.search ? new URLSearchParams(window.location.search).get("tgWebAppData") : null;
|
||
if (q) {
|
||
try {
|
||
return decodeURIComponent(q);
|
||
} catch (e) {
|
||
return q;
|
||
}
|
||
}
|
||
return "";
|
||
}
|
||
|
||
function getInitDataDebug() {
|
||
var sdk = !!(window.Telegram && window.Telegram.WebApp && window.Telegram.WebApp.initData);
|
||
var hash = window.location.hash ? window.location.hash.slice(1) : "";
|
||
var hashHasData = !!(hash && (getTgWebAppDataFromHash(hash) || new URLSearchParams(hash).get("tgWebAppData")));
|
||
var queryHasData = !!(window.location.search && new URLSearchParams(window.location.search).get("tgWebAppData"));
|
||
return "SDK: " + (sdk ? "да" : "нет") + ", hash: " + (hashHasData ? hash.length + " симв." : (hash ? "есть, без tgWebAppData" : "нет")) + ", query: " + (queryHasData ? "да" : "нет");
|
||
}
|
||
|
||
function isLocalhost() {
|
||
var h = window.location.hostname;
|
||
return h === "localhost" || h === "127.0.0.1" || h === "";
|
||
}
|
||
|
||
function hasTelegramHashButNoInitData() {
|
||
var hash = window.location.hash ? window.location.hash.slice(1) : "";
|
||
if (!hash) return false;
|
||
try {
|
||
var keys = Array.from(new URLSearchParams(hash).keys());
|
||
var hasVersion = keys.indexOf("tgWebAppVersion") !== -1;
|
||
var hasData = keys.indexOf("tgWebAppData") !== -1 || getTgWebAppDataFromHash(hash);
|
||
return hasVersion && !hasData;
|
||
} catch (e) { return false; }
|
||
}
|
||
|
||
function showAccessDenied() {
|
||
var debugStr = getInitDataDebug();
|
||
if (headerEl) headerEl.hidden = true;
|
||
if (weekdaysEl) weekdaysEl.hidden = true;
|
||
calendarEl.hidden = true;
|
||
dutyListEl.hidden = true;
|
||
loadingEl.classList.add("hidden");
|
||
errorEl.hidden = true;
|
||
accessDeniedEl.hidden = false;
|
||
var debugEl = document.getElementById("accessDeniedDebug");
|
||
if (debugEl) debugEl.textContent = debugStr;
|
||
var hintEl = document.getElementById("accessDeniedHint");
|
||
if (hintEl) {
|
||
hintEl.textContent = hasTelegramHashButNoInitData()
|
||
? "Откройте календарь через кнопку меню бота (⋮ или «Календарь»), а не через «Открыть в браузере» или прямую ссылку."
|
||
: "Откройте календарь из Telegram.";
|
||
}
|
||
}
|
||
|
||
function hideAccessDenied() {
|
||
accessDeniedEl.hidden = true;
|
||
if (headerEl) headerEl.hidden = false;
|
||
if (weekdaysEl) weekdaysEl.hidden = false;
|
||
calendarEl.hidden = false;
|
||
dutyListEl.hidden = false;
|
||
}
|
||
|
||
async function fetchDuties(from, to) {
|
||
const base = window.location.origin;
|
||
const url = base + "/api/duties?from=" + encodeURIComponent(from) + "&to=" + encodeURIComponent(to);
|
||
const initData = getInitData();
|
||
const headers = {};
|
||
if (initData) headers["X-Telegram-Init-Data"] = initData;
|
||
var controller = new AbortController();
|
||
var timeoutId = setTimeout(function () { controller.abort(); }, FETCH_TIMEOUT_MS);
|
||
try {
|
||
var res = await fetch(url, { headers: headers, signal: controller.signal });
|
||
if (res.status === 403) throw new Error("ACCESS_DENIED");
|
||
if (!res.ok) throw new Error("Ошибка загрузки");
|
||
return res.json();
|
||
} catch (e) {
|
||
if (e.name === "AbortError") {
|
||
throw new Error("Не удалось загрузить данные. Проверьте интернет.");
|
||
}
|
||
throw e;
|
||
} finally {
|
||
clearTimeout(timeoutId);
|
||
}
|
||
}
|
||
|
||
function renderCalendar(year, month, dutiesByDate) {
|
||
const first = firstDayOfMonth(new Date(year, month, 1));
|
||
const last = lastDayOfMonth(new Date(year, month, 1));
|
||
const start = getMonday(first);
|
||
const today = isoDate(new Date());
|
||
|
||
calendarEl.innerHTML = "";
|
||
let d = new Date(start);
|
||
const cells = 42;
|
||
for (let i = 0; i < cells; i++) {
|
||
const key = isoDate(d);
|
||
const isOther = d.getMonth() !== month;
|
||
const dayDuties = dutiesByDate[key] || [];
|
||
const isToday = key === today;
|
||
|
||
const cell = document.createElement("div");
|
||
cell.className = "day" + (isOther ? " other-month" : "") + (isToday ? " today" : "") + (dayDuties.length ? " has-duty" : "");
|
||
cell.innerHTML =
|
||
"<span class=\"num\">" + d.getDate() + "</span>" +
|
||
(dayDuties.length ? "<span class=\"day-duties\">" + dayDuties.map(function (x) { return escapeHtml(x.full_name); }).join(", ") + "</span>" : "");
|
||
calendarEl.appendChild(cell);
|
||
d.setDate(d.getDate() + 1);
|
||
}
|
||
|
||
monthTitleEl.textContent = MONTHS[month] + " " + year;
|
||
}
|
||
|
||
function renderDutyList(duties) {
|
||
if (duties.length === 0) {
|
||
dutyListEl.innerHTML = "<p class=\"muted\">В этом месяце дежурств нет.</p>";
|
||
return;
|
||
}
|
||
const grouped = {};
|
||
duties.forEach(function (d) {
|
||
const date = d.start_at.slice(0, 10);
|
||
if (!grouped[date]) grouped[date] = [];
|
||
grouped[date].push(d);
|
||
});
|
||
const dates = Object.keys(grouped).sort();
|
||
let html = "";
|
||
dates.forEach(function (date) {
|
||
const list = grouped[date];
|
||
html += "<h2>" + date + "</h2>";
|
||
list.forEach(function (d) {
|
||
const start = d.start_at.slice(11, 16);
|
||
const end = d.end_at.slice(11, 16);
|
||
html += "<div class=\"duty-item\"><span class=\"name\">" + escapeHtml(d.full_name) + "</span><div class=\"time\">" + start + " – " + end + "</div></div>";
|
||
});
|
||
});
|
||
dutyListEl.innerHTML = html;
|
||
}
|
||
|
||
function escapeHtml(s) {
|
||
const div = document.createElement("div");
|
||
div.textContent = s;
|
||
return div.innerHTML;
|
||
}
|
||
|
||
function dutiesByDate(duties) {
|
||
const byDate = {};
|
||
duties.forEach(function (d) {
|
||
const start = new Date(d.start_at);
|
||
const end = new Date(d.end_at);
|
||
for (let t = new Date(start); t <= end; t.setDate(t.getDate() + 1)) {
|
||
const key = isoDate(t);
|
||
if (!byDate[key]) byDate[key] = [];
|
||
byDate[key].push(d);
|
||
}
|
||
});
|
||
return byDate;
|
||
}
|
||
|
||
function showError(msg) {
|
||
errorEl.textContent = msg;
|
||
errorEl.hidden = false;
|
||
loadingEl.classList.add("hidden");
|
||
}
|
||
|
||
function runWhenReady(cb) {
|
||
if (window.Telegram && window.Telegram.WebApp) {
|
||
if (window.Telegram.WebApp.ready) {
|
||
window.Telegram.WebApp.ready();
|
||
}
|
||
if (window.Telegram.WebApp.expand) {
|
||
window.Telegram.WebApp.expand();
|
||
}
|
||
setTimeout(cb, 0);
|
||
} else {
|
||
cb();
|
||
}
|
||
}
|
||
|
||
/** If allowed (initData or localhost), call onAllowed(); otherwise show access denied. When inside Telegram WebApp but initData is empty, retry once after a short delay (initData may be set asynchronously). */
|
||
function requireTelegramOrLocalhost(onAllowed) {
|
||
var initData = getInitData();
|
||
var isLocal = isLocalhost();
|
||
if (initData) { onAllowed(); return; }
|
||
if (isLocal) { onAllowed(); return; }
|
||
if (window.Telegram && window.Telegram.WebApp) {
|
||
setTimeout(function () {
|
||
initData = getInitData();
|
||
if (initData) { onAllowed(); return; }
|
||
showAccessDenied();
|
||
loadingEl.classList.add("hidden");
|
||
}, RETRY_DELAY_MS);
|
||
return;
|
||
}
|
||
showAccessDenied();
|
||
loadingEl.classList.add("hidden");
|
||
}
|
||
|
||
function setNavEnabled(enabled) {
|
||
if (prevBtn) prevBtn.disabled = !enabled;
|
||
if (nextBtn) nextBtn.disabled = !enabled;
|
||
}
|
||
|
||
async function loadMonth() {
|
||
hideAccessDenied();
|
||
setNavEnabled(false);
|
||
loadingEl.classList.remove("hidden");
|
||
errorEl.hidden = true;
|
||
const from = isoDate(firstDayOfMonth(current));
|
||
const to = isoDate(lastDayOfMonth(current));
|
||
try {
|
||
const duties = await fetchDuties(from, to);
|
||
const byDate = dutiesByDate(duties);
|
||
renderCalendar(current.getFullYear(), current.getMonth(), byDate);
|
||
renderDutyList(duties);
|
||
} catch (e) {
|
||
if (e.message === "ACCESS_DENIED") {
|
||
showAccessDenied();
|
||
setNavEnabled(true);
|
||
if (window.Telegram && window.Telegram.WebApp && !window._initDataRetried) {
|
||
window._initDataRetried = true;
|
||
setTimeout(loadMonth, RETRY_AFTER_ACCESS_DENIED_MS);
|
||
}
|
||
return;
|
||
}
|
||
showError(e.message || "Не удалось загрузить данные.");
|
||
setNavEnabled(true);
|
||
return;
|
||
}
|
||
loadingEl.classList.add("hidden");
|
||
setNavEnabled(true);
|
||
}
|
||
|
||
document.getElementById("prevMonth").addEventListener("click", function () {
|
||
current.setMonth(current.getMonth() - 1);
|
||
loadMonth();
|
||
});
|
||
document.getElementById("nextMonth").addEventListener("click", function () {
|
||
current.setMonth(current.getMonth() + 1);
|
||
loadMonth();
|
||
});
|
||
|
||
runWhenReady(function () {
|
||
requireTelegramOrLocalhost(function () {
|
||
loadMonth();
|
||
});
|
||
});
|
||
})();
|