Reduce frontend polling load and clean stale UI hooks
This commit is contained in:
418
wwwroot/app.js
418
wwwroot/app.js
@@ -1,246 +1,282 @@
|
||||
import { t, setLanguage, getLanguage, initI18n, onLanguageChange, faqMarkdown } from "./js/i18n.js";
|
||||
import {
|
||||
t,
|
||||
setLanguage,
|
||||
getLanguage,
|
||||
initI18n,
|
||||
onLanguageChange,
|
||||
faqMarkdown,
|
||||
} from "./js/i18n.js";
|
||||
import { state, clearUserState } from "./js/state.js";
|
||||
import { toast } from "./js/dom.js";
|
||||
import {
|
||||
handleAuthError,
|
||||
renderWelcome,
|
||||
renderPhasePill,
|
||||
renderCounts,
|
||||
renderMySuggestions,
|
||||
renderAllSuggestions,
|
||||
renderVotes,
|
||||
syncVoteScores,
|
||||
renderResults,
|
||||
renderPhaseTitles,
|
||||
updatePhaseNav,
|
||||
configureUiRuntime,
|
||||
handleAuthError,
|
||||
renderWelcome,
|
||||
renderPhasePill,
|
||||
renderCounts,
|
||||
renderMySuggestions,
|
||||
renderAllSuggestions,
|
||||
renderVotes,
|
||||
syncVoteScores,
|
||||
renderResults,
|
||||
renderPhaseTitles,
|
||||
updatePhaseNav,
|
||||
configureUiRuntime,
|
||||
} from "./js/ui.js";
|
||||
import {
|
||||
loadSuggestData,
|
||||
loadVoteData,
|
||||
refreshPhaseData,
|
||||
} from "./js/data.js";
|
||||
import { loadSuggestData, loadVoteData, refreshPhaseData } from "./js/data.js";
|
||||
import { setupAuthHandlers } from "./js/app-auth-handlers.js";
|
||||
import { setupAdminHandlers } from "./js/app-admin-handlers.js";
|
||||
import { setupVoteNavigationHandlers } from "./js/app-vote-nav-handlers.js";
|
||||
|
||||
const REFRESH_INTERVAL_MS = 4000;
|
||||
const REFRESH_MIN_MS = 3000;
|
||||
const REFRESH_MAX_MS = 20000;
|
||||
let refreshInFlight = null;
|
||||
let refreshTimerId = null;
|
||||
let refreshSchedulerStarted = false;
|
||||
let unchangedRefreshCycles = 0;
|
||||
let nextRefreshDelayMs = REFRESH_MIN_MS;
|
||||
|
||||
async function runSerializedRefresh() {
|
||||
if (refreshInFlight) return refreshInFlight;
|
||||
refreshInFlight = refreshPhaseData().finally(() => {
|
||||
refreshInFlight = null;
|
||||
});
|
||||
return refreshInFlight;
|
||||
if (refreshInFlight) return refreshInFlight;
|
||||
refreshInFlight = refreshPhaseData().finally(() => {
|
||||
refreshInFlight = null;
|
||||
});
|
||||
return refreshInFlight;
|
||||
}
|
||||
|
||||
async function refreshWithUiErrorHandling() {
|
||||
try {
|
||||
await runSerializedRefresh();
|
||||
} catch (err) {
|
||||
if (!handleAuthError(err, clearUserState)) toast(err.message, true);
|
||||
}
|
||||
try {
|
||||
const changed = await runSerializedRefresh();
|
||||
updateRefreshCadence(changed === true);
|
||||
} catch (err) {
|
||||
// Back off after transient failures to avoid hammering server/dependencies.
|
||||
nextRefreshDelayMs = Math.min(nextRefreshDelayMs * 2, REFRESH_MAX_MS);
|
||||
if (!handleAuthError(err, clearUserState)) toast(err.message, true);
|
||||
}
|
||||
}
|
||||
|
||||
function scheduleNextRefresh() {
|
||||
refreshTimerId = window.setTimeout(async () => {
|
||||
if (!document.hidden && !state.adminStatusSelectActive) {
|
||||
await refreshWithUiErrorHandling();
|
||||
}
|
||||
scheduleNextRefresh();
|
||||
}, REFRESH_INTERVAL_MS);
|
||||
refreshTimerId = window.setTimeout(async () => {
|
||||
if (!document.hidden && !state.adminStatusSelectActive) {
|
||||
await refreshWithUiErrorHandling();
|
||||
}
|
||||
scheduleNextRefresh();
|
||||
}, nextRefreshDelayMs);
|
||||
}
|
||||
|
||||
function startRefreshScheduler() {
|
||||
if (refreshSchedulerStarted) return;
|
||||
refreshSchedulerStarted = true;
|
||||
if (refreshSchedulerStarted) return;
|
||||
refreshSchedulerStarted = true;
|
||||
|
||||
document.addEventListener("visibilitychange", () => {
|
||||
if (!document.hidden && !state.adminStatusSelectActive) {
|
||||
refreshWithUiErrorHandling();
|
||||
document.addEventListener("visibilitychange", () => {
|
||||
if (!document.hidden && !state.adminStatusSelectActive) {
|
||||
unchangedRefreshCycles = 0;
|
||||
nextRefreshDelayMs = baseRefreshDelayForPhase();
|
||||
refreshWithUiErrorHandling();
|
||||
}
|
||||
});
|
||||
|
||||
if (refreshTimerId !== null) {
|
||||
window.clearTimeout(refreshTimerId);
|
||||
}
|
||||
});
|
||||
scheduleNextRefresh();
|
||||
}
|
||||
|
||||
if (refreshTimerId !== null) {
|
||||
window.clearTimeout(refreshTimerId);
|
||||
}
|
||||
scheduleNextRefresh();
|
||||
function updateRefreshCadence(changed) {
|
||||
const base = baseRefreshDelayForPhase();
|
||||
if (changed) {
|
||||
unchangedRefreshCycles = 0;
|
||||
nextRefreshDelayMs = base;
|
||||
return;
|
||||
}
|
||||
|
||||
unchangedRefreshCycles = Math.min(unchangedRefreshCycles + 1, 8);
|
||||
const growth = Math.pow(1.35, unchangedRefreshCycles);
|
||||
nextRefreshDelayMs = Math.min(Math.round(base * growth), REFRESH_MAX_MS);
|
||||
}
|
||||
|
||||
function baseRefreshDelayForPhase() {
|
||||
switch (state.phase) {
|
||||
case "Vote":
|
||||
return REFRESH_MIN_MS;
|
||||
case "Suggest":
|
||||
return 5000;
|
||||
case "Results":
|
||||
return 7000;
|
||||
default:
|
||||
return 5000;
|
||||
}
|
||||
}
|
||||
|
||||
configureUiRuntime({
|
||||
refreshPhaseData: runSerializedRefresh,
|
||||
loadSuggestData,
|
||||
loadVoteData,
|
||||
handleAuthError: (err) => handleAuthError(err, clearUserState),
|
||||
refreshPhaseData: runSerializedRefresh,
|
||||
loadSuggestData,
|
||||
loadVoteData,
|
||||
handleAuthError: (err) => handleAuthError(err, clearUserState),
|
||||
});
|
||||
|
||||
function setupHandlers() {
|
||||
setupAuthHandlers({ runSerializedRefresh });
|
||||
setupAdminHandlers({ runSerializedRefresh });
|
||||
setupVoteNavigationHandlers({ runSerializedRefresh });
|
||||
setupLanguageSwitchers();
|
||||
setupAuthHandlers({ runSerializedRefresh });
|
||||
setupAdminHandlers({ runSerializedRefresh });
|
||||
setupVoteNavigationHandlers({ runSerializedRefresh });
|
||||
setupLanguageSwitchers();
|
||||
|
||||
onLanguageChange(() => {
|
||||
updateLanguageButtons();
|
||||
renderWelcome();
|
||||
renderPhasePill();
|
||||
renderCounts();
|
||||
renderPhaseTitles();
|
||||
renderMySuggestions();
|
||||
renderAllSuggestions();
|
||||
if (state.phase === "Vote") {
|
||||
renderVotes();
|
||||
state.votesRendered = true;
|
||||
syncVoteScores();
|
||||
}
|
||||
if (state.phase === "Results") {
|
||||
renderResults();
|
||||
}
|
||||
updatePhaseNav();
|
||||
});
|
||||
onLanguageChange(() => {
|
||||
updateLanguageButtons();
|
||||
renderWelcome();
|
||||
renderPhasePill();
|
||||
renderCounts();
|
||||
renderPhaseTitles();
|
||||
renderMySuggestions();
|
||||
renderAllSuggestions();
|
||||
if (state.phase === "Vote") {
|
||||
renderVotes();
|
||||
state.votesRendered = true;
|
||||
syncVoteScores();
|
||||
}
|
||||
if (state.phase === "Results") {
|
||||
renderResults();
|
||||
}
|
||||
updatePhaseNav();
|
||||
});
|
||||
|
||||
document.querySelectorAll(".help-chip").forEach((chip) => {
|
||||
chip.addEventListener("click", () => openFaqModal());
|
||||
});
|
||||
document.querySelectorAll(".help-chip").forEach((chip) => {
|
||||
chip.addEventListener("click", () => openFaqModal());
|
||||
});
|
||||
}
|
||||
|
||||
async function main() {
|
||||
await initI18n();
|
||||
setupHandlers();
|
||||
await refreshWithUiErrorHandling();
|
||||
startRefreshScheduler();
|
||||
await initI18n();
|
||||
setupHandlers();
|
||||
await refreshWithUiErrorHandling();
|
||||
startRefreshScheduler();
|
||||
}
|
||||
|
||||
main();
|
||||
|
||||
function updateLanguageButtons() {
|
||||
document.querySelectorAll(".lang-button").forEach((btn) => {
|
||||
btn.textContent = "🌐";
|
||||
btn.title = t("lang.label");
|
||||
btn.setAttribute("aria-label", t("lang.label"));
|
||||
});
|
||||
document.querySelectorAll(".lang-button").forEach((btn) => {
|
||||
btn.textContent = "🌐";
|
||||
btn.title = t("lang.label");
|
||||
btn.setAttribute("aria-label", t("lang.label"));
|
||||
});
|
||||
}
|
||||
|
||||
function setupLanguageSwitchers() {
|
||||
const switches = document.querySelectorAll(".lang-switch");
|
||||
const closeAll = () =>
|
||||
switches.forEach((wrap) => wrap.querySelector(".lang-menu")?.classList.add("hidden"));
|
||||
const switches = document.querySelectorAll(".lang-switch");
|
||||
const closeAll = () =>
|
||||
switches.forEach((wrap) =>
|
||||
wrap.querySelector(".lang-menu")?.classList.add("hidden"),
|
||||
);
|
||||
|
||||
switches.forEach((wrap) => {
|
||||
const btn = wrap.querySelector(".lang-button");
|
||||
const menu = wrap.querySelector(".lang-menu");
|
||||
if (!btn || !menu) return;
|
||||
btn.addEventListener("click", (e) => {
|
||||
e.preventDefault();
|
||||
const isHidden = menu.classList.contains("hidden");
|
||||
closeAll();
|
||||
if (isHidden) menu.classList.remove("hidden");
|
||||
switches.forEach((wrap) => {
|
||||
const btn = wrap.querySelector(".lang-button");
|
||||
const menu = wrap.querySelector(".lang-menu");
|
||||
if (!btn || !menu) return;
|
||||
btn.addEventListener("click", (e) => {
|
||||
e.preventDefault();
|
||||
const isHidden = menu.classList.contains("hidden");
|
||||
closeAll();
|
||||
if (isHidden) menu.classList.remove("hidden");
|
||||
});
|
||||
menu.querySelectorAll("[data-lang]").forEach((item) =>
|
||||
item.addEventListener("click", () => {
|
||||
const lang = item.dataset.lang;
|
||||
if (lang) setLanguage(lang);
|
||||
closeAll();
|
||||
}),
|
||||
);
|
||||
});
|
||||
menu.querySelectorAll("[data-lang]").forEach((item) =>
|
||||
item.addEventListener("click", () => {
|
||||
const lang = item.dataset.lang;
|
||||
if (lang) setLanguage(lang);
|
||||
closeAll();
|
||||
}),
|
||||
);
|
||||
});
|
||||
|
||||
document.addEventListener("click", (e) => {
|
||||
if (!e.target.closest(".lang-switch")) closeAll();
|
||||
});
|
||||
document.addEventListener("click", (e) => {
|
||||
if (!e.target.closest(".lang-switch")) closeAll();
|
||||
});
|
||||
|
||||
updateLanguageButtons();
|
||||
updateLanguageButtons();
|
||||
}
|
||||
|
||||
function markdownToHtml(md) {
|
||||
const lines = md.trim().split(/\r?\n/);
|
||||
const html = [];
|
||||
let inList = false;
|
||||
let inParagraph = false;
|
||||
const lines = md.trim().split(/\r?\n/);
|
||||
const html = [];
|
||||
let inList = false;
|
||||
let inParagraph = false;
|
||||
|
||||
const escapeHtml = (text) =>
|
||||
text
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">");
|
||||
const escapeHtml = (text) =>
|
||||
text.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");
|
||||
|
||||
const formatInline = (text) =>
|
||||
escapeHtml(text)
|
||||
.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>")
|
||||
.replace(/`([^`]+)`/g, "<code>$1</code>");
|
||||
const formatInline = (text) =>
|
||||
escapeHtml(text)
|
||||
.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>")
|
||||
.replace(/`([^`]+)`/g, "<code>$1</code>");
|
||||
|
||||
const closeParagraph = () => {
|
||||
if (inParagraph) {
|
||||
html.push("</p>");
|
||||
inParagraph = false;
|
||||
}
|
||||
};
|
||||
const closeParagraph = () => {
|
||||
if (inParagraph) {
|
||||
html.push("</p>");
|
||||
inParagraph = false;
|
||||
}
|
||||
};
|
||||
|
||||
const closeList = () => {
|
||||
if (inList) {
|
||||
html.push("</ul>");
|
||||
inList = false;
|
||||
}
|
||||
};
|
||||
const closeList = () => {
|
||||
if (inList) {
|
||||
html.push("</ul>");
|
||||
inList = false;
|
||||
}
|
||||
};
|
||||
|
||||
lines.forEach((rawLine) => {
|
||||
const line = rawLine.trimEnd();
|
||||
const trimmed = line.trim();
|
||||
if (!trimmed) {
|
||||
closeParagraph();
|
||||
closeList();
|
||||
return;
|
||||
}
|
||||
lines.forEach((rawLine) => {
|
||||
const line = rawLine.trimEnd();
|
||||
const trimmed = line.trim();
|
||||
if (!trimmed) {
|
||||
closeParagraph();
|
||||
closeList();
|
||||
return;
|
||||
}
|
||||
|
||||
if (/^-{5,}$/.test(trimmed)) {
|
||||
closeParagraph();
|
||||
closeList();
|
||||
html.push('<hr class="faq-divider" />');
|
||||
return;
|
||||
}
|
||||
if (/^-{5,}$/.test(trimmed)) {
|
||||
closeParagraph();
|
||||
closeList();
|
||||
html.push('<hr class="faq-divider" />');
|
||||
return;
|
||||
}
|
||||
|
||||
const heading = trimmed.match(/^(#{1,3})\s+(.*)$/);
|
||||
if (heading) {
|
||||
closeParagraph();
|
||||
closeList();
|
||||
const level = heading[1].length;
|
||||
const tag = level === 1 ? "h2" : level === 2 ? "h3" : "h4";
|
||||
html.push(`<${tag}>${formatInline(heading[2].trim())}</${tag}>`);
|
||||
return;
|
||||
}
|
||||
const heading = trimmed.match(/^(#{1,3})\s+(.*)$/);
|
||||
if (heading) {
|
||||
closeParagraph();
|
||||
closeList();
|
||||
const level = heading[1].length;
|
||||
const tag = level === 1 ? "h2" : level === 2 ? "h3" : "h4";
|
||||
html.push(`<${tag}>${formatInline(heading[2].trim())}</${tag}>`);
|
||||
return;
|
||||
}
|
||||
|
||||
if (/^[*-]\s+/.test(trimmed)) {
|
||||
closeParagraph();
|
||||
if (!inList) {
|
||||
html.push("<ul>");
|
||||
inList = true;
|
||||
}
|
||||
const text = trimmed.replace(/^[*-]\s+/, "");
|
||||
html.push(`<li>${formatInline(text)}</li>`);
|
||||
return;
|
||||
}
|
||||
if (/^[*-]\s+/.test(trimmed)) {
|
||||
closeParagraph();
|
||||
if (!inList) {
|
||||
html.push("<ul>");
|
||||
inList = true;
|
||||
}
|
||||
const text = trimmed.replace(/^[*-]\s+/, "");
|
||||
html.push(`<li>${formatInline(text)}</li>`);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!inParagraph) {
|
||||
html.push("<p>");
|
||||
inParagraph = true;
|
||||
}
|
||||
html.push(formatInline(trimmed));
|
||||
});
|
||||
if (!inParagraph) {
|
||||
html.push("<p>");
|
||||
inParagraph = true;
|
||||
}
|
||||
html.push(formatInline(trimmed));
|
||||
});
|
||||
|
||||
closeParagraph();
|
||||
closeList();
|
||||
return html.join("\n");
|
||||
closeParagraph();
|
||||
closeList();
|
||||
return html.join("\n");
|
||||
}
|
||||
|
||||
function openFaqModal() {
|
||||
const overlay = document.createElement("div");
|
||||
overlay.className = "edit-modal";
|
||||
const panel = document.createElement("div");
|
||||
panel.className = "edit-panel faq-panel";
|
||||
panel.innerHTML = `
|
||||
const overlay = document.createElement("div");
|
||||
overlay.className = "edit-modal";
|
||||
const panel = document.createElement("div");
|
||||
panel.className = "edit-panel faq-panel";
|
||||
panel.innerHTML = `
|
||||
<div class="edit-header">
|
||||
<h3>${t("help.title")}</h3>
|
||||
<button class="lightbox-close" aria-label="${t("modal.close")}">x</button>
|
||||
@@ -250,16 +286,20 @@ function openFaqModal() {
|
||||
</div>
|
||||
`;
|
||||
|
||||
const list = panel.querySelector(".faq-list");
|
||||
const lang = getLanguage();
|
||||
const md = faqMarkdown[lang] ?? faqMarkdown.en;
|
||||
list.innerHTML = markdownToHtml(md);
|
||||
const list = panel.querySelector(".faq-list");
|
||||
const lang = getLanguage();
|
||||
const md = faqMarkdown[lang] ?? faqMarkdown.en;
|
||||
list.innerHTML = markdownToHtml(md);
|
||||
|
||||
const close = () => overlay.remove();
|
||||
overlay.addEventListener("click", (e) => {
|
||||
if (e.target.classList.contains("edit-modal") || e.target.classList.contains("lightbox-close")) close();
|
||||
});
|
||||
const close = () => overlay.remove();
|
||||
overlay.addEventListener("click", (e) => {
|
||||
if (
|
||||
e.target.classList.contains("edit-modal") ||
|
||||
e.target.classList.contains("lightbox-close")
|
||||
)
|
||||
close();
|
||||
});
|
||||
|
||||
overlay.appendChild(panel);
|
||||
document.body.appendChild(overlay);
|
||||
overlay.appendChild(panel);
|
||||
document.body.appendChild(overlay);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user