643 lines
20 KiB
JavaScript
643 lines
20 KiB
JavaScript
// Progressive enhancement for local frontend-backend checks.
|
|
const RECENT_SNAPSHOT_WINDOW_MS = 30 * 60 * 1000;
|
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
console.info("HLL Vietnam frontend ready");
|
|
|
|
const backendBaseUrl =
|
|
document.body.dataset.backendBaseUrl || "http://127.0.0.1:8000";
|
|
const statusNode = document.getElementById("backend-status");
|
|
const trailerFrame = document.getElementById("trailer-frame");
|
|
const trailerTitle = document.getElementById("trailer-title");
|
|
const serversTitle = document.getElementById("servers-title");
|
|
const serversNote = document.getElementById("servers-note");
|
|
const serversList = document.getElementById("servers-list");
|
|
const serversBadge = document.getElementById("servers-badge");
|
|
const serversSource = document.getElementById("servers-source");
|
|
const serversSourceLabel = document.getElementById("servers-source-label");
|
|
const serversSourceMeta = document.getElementById("servers-source-meta");
|
|
const statsPreview = document.getElementById("stats-preview");
|
|
const statsPreviewItems = document.getElementById("stats-preview-items");
|
|
|
|
updateBackendStatus(statusNode, "Backend comprobando", "status-chip--idle");
|
|
|
|
setServersDataState(
|
|
{
|
|
badgeNode: serversBadge,
|
|
sourceNode: serversSource,
|
|
labelNode: serversSourceLabel,
|
|
metaNode: serversSourceMeta,
|
|
},
|
|
{ kind: "fallback" },
|
|
);
|
|
|
|
Promise.allSettled([
|
|
fetchHealth(backendBaseUrl, statusNode),
|
|
hydrateTrailer(backendBaseUrl, trailerFrame, trailerTitle),
|
|
hydrateServers(
|
|
backendBaseUrl,
|
|
serversTitle,
|
|
serversNote,
|
|
serversList,
|
|
serversBadge,
|
|
serversSource,
|
|
serversSourceLabel,
|
|
serversSourceMeta,
|
|
statsPreview,
|
|
statsPreviewItems,
|
|
),
|
|
]).catch((error) => {
|
|
console.warn("Progressive enhancement failed", error);
|
|
});
|
|
});
|
|
|
|
async function fetchHealth(backendBaseUrl, statusNode) {
|
|
try {
|
|
const response = await fetch(`${backendBaseUrl}/health`);
|
|
if (!response.ok) {
|
|
throw new Error(`Health request failed with ${response.status}`);
|
|
}
|
|
|
|
const payload = await response.json();
|
|
if (payload.status === "ok") {
|
|
updateBackendStatus(statusNode, "Backend operativo", "status-chip--ok");
|
|
return;
|
|
}
|
|
|
|
throw new Error("Unexpected health payload");
|
|
} catch (error) {
|
|
console.warn("Backend health check unavailable", error);
|
|
updateBackendStatus(statusNode, "Modo estatico activo", "status-chip--fallback");
|
|
}
|
|
}
|
|
|
|
async function hydrateTrailer(backendBaseUrl, trailerFrame, trailerTitle) {
|
|
if (!trailerFrame || !trailerTitle) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch(`${backendBaseUrl}/api/trailer`);
|
|
if (!response.ok) {
|
|
throw new Error(`Trailer request failed with ${response.status}`);
|
|
}
|
|
|
|
const payload = await response.json();
|
|
const trailer = payload.data;
|
|
if (!trailer || !trailer.video_url || !trailer.title) {
|
|
throw new Error("Trailer payload incomplete");
|
|
}
|
|
|
|
trailerFrame.src = trailer.video_url;
|
|
trailerFrame.title = trailer.title;
|
|
trailerTitle.textContent = trailer.title;
|
|
} catch (error) {
|
|
console.warn("Trailer placeholder remains static", error);
|
|
}
|
|
}
|
|
|
|
async function hydrateServers(
|
|
backendBaseUrl,
|
|
serversTitle,
|
|
serversNote,
|
|
serversList,
|
|
serversBadge,
|
|
serversSource,
|
|
serversSourceLabel,
|
|
serversSourceMeta,
|
|
statsPreview,
|
|
statsPreviewItems,
|
|
) {
|
|
if (!serversTitle || !serversNote || !serversList || !serversBadge) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch(`${backendBaseUrl}/api/servers`);
|
|
if (!response.ok) {
|
|
throw new Error(`Servers request failed with ${response.status}`);
|
|
}
|
|
|
|
const payload = await response.json();
|
|
const serversData = payload.data;
|
|
if (!serversData || !Array.isArray(serversData.items)) {
|
|
throw new Error("Servers payload incomplete");
|
|
}
|
|
|
|
serversTitle.textContent =
|
|
serversData.title || "Servidores actuales de Hell Let Loose";
|
|
setServersDataState(
|
|
{
|
|
badgeNode: serversBadge,
|
|
sourceNode: serversSource,
|
|
labelNode: serversSourceLabel,
|
|
metaNode: serversSourceMeta,
|
|
},
|
|
{ kind: "fallback" },
|
|
);
|
|
|
|
if (serversData.context === "current-hll-reference") {
|
|
serversNote.textContent =
|
|
"Referencia provisional del HLL actual mientras no existan datos reales de HLL Vietnam.";
|
|
}
|
|
|
|
if (serversData.items.length === 0) {
|
|
serversList.innerHTML =
|
|
'<p class="servers-empty">Informacion de servidores disponible mas adelante.</p>';
|
|
return;
|
|
}
|
|
|
|
serversList.innerHTML = serversData.items.map(renderServerCard).join("");
|
|
await hydrateServerStats(
|
|
backendBaseUrl,
|
|
serversTitle,
|
|
serversNote,
|
|
serversList,
|
|
serversBadge,
|
|
serversSource,
|
|
serversSourceLabel,
|
|
serversSourceMeta,
|
|
statsPreview,
|
|
statsPreviewItems,
|
|
);
|
|
} catch (error) {
|
|
console.warn("Servers panel remains on static fallback", error);
|
|
}
|
|
}
|
|
|
|
async function hydrateServerStats(
|
|
backendBaseUrl,
|
|
serversTitle,
|
|
serversNote,
|
|
serversList,
|
|
serversBadge,
|
|
serversSource,
|
|
serversSourceLabel,
|
|
serversSourceMeta,
|
|
statsPreview,
|
|
statsPreviewItems,
|
|
) {
|
|
if (!statsPreview || !statsPreviewItems) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const latestPayload = await fetchJson(`${backendBaseUrl}/api/servers/latest`);
|
|
const latestItems = latestPayload?.data?.items;
|
|
if (!Array.isArray(latestItems) || latestItems.length === 0) {
|
|
return;
|
|
}
|
|
|
|
const histories = await Promise.all(
|
|
latestItems.map(async (server) => {
|
|
const serverKey = server.external_server_id || server.server_id;
|
|
const historyPayload = await fetchJson(
|
|
`${backendBaseUrl}/api/servers/${encodeURIComponent(serverKey)}/history?limit=4`,
|
|
);
|
|
return {
|
|
key: serverKey,
|
|
items: Array.isArray(historyPayload?.data?.items)
|
|
? historyPayload.data.items
|
|
: [],
|
|
};
|
|
}),
|
|
);
|
|
|
|
const historyByServer = new Map(
|
|
histories.map((entry) => [String(entry.key), entry.items]),
|
|
);
|
|
const visibleItems = selectPrimaryServerItems(latestItems);
|
|
const latestState = deriveSnapshotState(visibleItems);
|
|
const hasRealSnapshots = visibleItems.some(isRealA2SSnapshot);
|
|
|
|
serversTitle.textContent = hasRealSnapshots
|
|
? "Servidores activos con captura real"
|
|
: latestPayload.data.title || "Actividad reciente de servidores";
|
|
serversNote.textContent = hasRealSnapshots
|
|
? "La vista principal muestra solo servidores con snapshots reales A2S utilizables. El fallback provisional queda reservado para cuando el backend no aporta capturas validas."
|
|
: "Vista ligera basada en snapshots persistidos del backend. Si no hay capturas reales utilizables, el panel conserva la referencia provisional.";
|
|
setServersDataState(
|
|
{
|
|
badgeNode: serversBadge,
|
|
sourceNode: serversSource,
|
|
labelNode: serversSourceLabel,
|
|
metaNode: serversSourceMeta,
|
|
},
|
|
latestState,
|
|
);
|
|
statsPreview.hidden = false;
|
|
statsPreviewItems.innerHTML = renderStatsPreview(visibleItems);
|
|
serversList.innerHTML = renderServerSections(visibleItems, historyByServer);
|
|
} catch (error) {
|
|
console.warn("Historical stats preview unavailable", error);
|
|
}
|
|
}
|
|
|
|
function updateBackendStatus(statusNode, label, stateClass) {
|
|
if (!statusNode) {
|
|
return;
|
|
}
|
|
|
|
statusNode.textContent = label;
|
|
statusNode.classList.remove("status-chip--ok", "status-chip--fallback");
|
|
if (stateClass) {
|
|
statusNode.classList.add(stateClass);
|
|
}
|
|
}
|
|
|
|
function setServersDataState(nodes, state) {
|
|
const { badgeNode, sourceNode, labelNode, metaNode } = nodes;
|
|
if (!badgeNode || !sourceNode || !labelNode || !metaNode) {
|
|
return;
|
|
}
|
|
|
|
if (state.kind === "live") {
|
|
badgeNode.textContent = "Snapshots A2S recientes";
|
|
labelNode.textContent = "Captura real reciente";
|
|
metaNode.textContent =
|
|
state.timestampLabel
|
|
? `Ultima captura A2S registrada ${state.timestampLabel}.`
|
|
: "El bloque muestra snapshots recientes procedentes del backend.";
|
|
badgeNode.classList.remove("status-chip--fallback");
|
|
badgeNode.classList.add("status-chip--ok");
|
|
sourceNode.dataset.state = "live";
|
|
return;
|
|
}
|
|
|
|
if (state.kind === "historical") {
|
|
badgeNode.textContent = "Historico persistido";
|
|
labelNode.textContent = "Persistencia local disponible";
|
|
metaNode.textContent =
|
|
state.timestampLabel
|
|
? `Se muestran snapshots guardados. Ultima captura ${state.timestampLabel}.`
|
|
: "El backend devuelve historico persistido, aunque no sea una captura reciente.";
|
|
badgeNode.classList.remove("status-chip--fallback");
|
|
badgeNode.classList.add("status-chip--ok");
|
|
sourceNode.dataset.state = "historical";
|
|
return;
|
|
}
|
|
|
|
badgeNode.textContent = "Fallback estatico";
|
|
labelNode.textContent = "Fallback estatico activo";
|
|
metaNode.textContent =
|
|
"La landing conserva la referencia provisional cuando el backend o el historico aun no aportan snapshots utilizables.";
|
|
badgeNode.classList.remove("status-chip--ok");
|
|
badgeNode.classList.add("status-chip--fallback");
|
|
sourceNode.dataset.state = "fallback";
|
|
}
|
|
|
|
function renderServerCard(server) {
|
|
const serverName = server.server_name || "Servidor sin nombre";
|
|
const serverStatus =
|
|
server.status === "online" ? "Online" : server.status === "offline" ? "Offline" : "Estado pendiente";
|
|
const stateClass =
|
|
server.status === "online" ? "server-state--online" : "server-state--offline";
|
|
const currentMap = server.current_map || "Sin mapa disponible";
|
|
const region = server.region || "Region pendiente";
|
|
const players = Number.isFinite(server.players) ? server.players : 0;
|
|
const maxPlayers = Number.isFinite(server.max_players) ? server.max_players : 0;
|
|
const loadPercent =
|
|
maxPlayers > 0 ? Math.max(0, Math.min(100, Math.round((players / maxPlayers) * 100))) : 0;
|
|
|
|
return `
|
|
<article class="server-card">
|
|
<div class="server-card__top">
|
|
<div class="server-card__identity">
|
|
<p class="server-card__eyebrow">Servidor de referencia</p>
|
|
<h3>${escapeHtml(serverName)}</h3>
|
|
</div>
|
|
<span class="server-state ${stateClass}">${escapeHtml(serverStatus)}</span>
|
|
</div>
|
|
<div class="server-card__load" aria-hidden="true">
|
|
<span style="width: ${loadPercent}%"></span>
|
|
</div>
|
|
<dl class="server-card__stats">
|
|
<div class="server-stat server-stat--players">
|
|
<dt>Jugadores</dt>
|
|
<dd>${players} / ${maxPlayers}</dd>
|
|
</div>
|
|
<div class="server-stat">
|
|
<dt>Mapa</dt>
|
|
<dd>${escapeHtml(currentMap)}</dd>
|
|
</div>
|
|
<div class="server-stat">
|
|
<dt>Region</dt>
|
|
<dd>${escapeHtml(region)}</dd>
|
|
</div>
|
|
</dl>
|
|
</article>
|
|
`;
|
|
}
|
|
|
|
function renderServerStatsCard(server, historyItems) {
|
|
const serverName = server.server_name || "Servidor sin nombre";
|
|
const statusLabel = formatServerStatus(server.status);
|
|
const stateClass =
|
|
server.status === "online" ? "server-state--online" : "server-state--offline";
|
|
const isRealSnapshot = server.snapshot_origin === "real-a2s";
|
|
const currentMap = server.current_map || "Sin mapa disponible";
|
|
const region = server.region || "Region pendiente";
|
|
const players = Number.isFinite(server.players) ? server.players : 0;
|
|
const maxPlayers = Number.isFinite(server.max_players) ? server.max_players : 0;
|
|
const loadPercent =
|
|
maxPlayers > 0 ? Math.max(0, Math.min(100, Math.round((players / maxPlayers) * 100))) : 0;
|
|
const updatedAt = server.captured_at
|
|
? formatTimestamp(server.captured_at)
|
|
: "Sin captura reciente";
|
|
const updatedAgo = formatElapsedMinutes(server.history_summary?.minutes_since_last_capture);
|
|
const trendMarkup = renderTrend(historyItems);
|
|
const connectAction = renderConnectAction(server);
|
|
const summaryMarkup = renderHistorySummary(server.history_summary);
|
|
const cardVariantClass = isRealSnapshot ? "server-card--real" : "server-card--reference";
|
|
const eyebrowLabel = isRealSnapshot ? "Snapshot real A2S" : "Referencia persistida";
|
|
const quickFacts = renderQuickFacts([
|
|
{ label: "Mapa", value: currentMap },
|
|
{ label: "Region", value: region },
|
|
{ label: "Ultima captura", value: updatedAgo || updatedAt },
|
|
]);
|
|
|
|
return `
|
|
<article class="server-card server-card--stats ${cardVariantClass}">
|
|
<div class="server-card__top server-card__top--stats">
|
|
<div class="server-card__identity">
|
|
<p class="server-card__eyebrow">${escapeHtml(eyebrowLabel)}</p>
|
|
<h3>${escapeHtml(serverName)}</h3>
|
|
<p class="server-card__meta">Mapa actual, region visible y ultima captura persistida del servidor.</p>
|
|
</div>
|
|
<div class="server-card__status-column">
|
|
<span class="server-state ${stateClass}">${escapeHtml(statusLabel)}</span>
|
|
<p class="server-card__population">${escapeHtml(`${players} / ${maxPlayers}`)}</p>
|
|
${connectAction}
|
|
</div>
|
|
</div>
|
|
<div class="server-card__body">
|
|
<div class="server-card__facts">
|
|
${quickFacts}
|
|
${summaryMarkup}
|
|
</div>
|
|
<div class="server-trend">
|
|
<div class="server-trend__header">
|
|
<p>Tendencia reciente</p>
|
|
<span>${historyItems.length} capturas</span>
|
|
</div>
|
|
<div class="server-trend__bars" aria-hidden="true">${trendMarkup}</div>
|
|
</div>
|
|
</div>
|
|
<div class="server-card__load" aria-hidden="true">
|
|
<span style="width: ${loadPercent}%"></span>
|
|
</div>
|
|
</article>
|
|
`;
|
|
}
|
|
|
|
function renderServerSections(latestItems, historyByServer) {
|
|
const hasRealSnapshots = latestItems.some(isRealA2SSnapshot);
|
|
|
|
return renderServerSection(
|
|
hasRealSnapshots ? "Snapshots reales A2S" : "Historico persistido",
|
|
hasRealSnapshots
|
|
? "Servidores reales validados y consultados desde el backend."
|
|
: "Snapshots persistidos disponibles mientras no haya capturas reales utilizables.",
|
|
hasRealSnapshots ? "server-panel-section--real" : "server-panel-section--reference",
|
|
latestItems,
|
|
historyByServer,
|
|
);
|
|
}
|
|
|
|
function renderServerSection(title, intro, variantClass, items, historyByServer) {
|
|
const cards = items
|
|
.map((server) =>
|
|
renderServerStatsCard(
|
|
server,
|
|
historyByServer.get(String(server.external_server_id || server.server_id)) || [],
|
|
),
|
|
)
|
|
.join("");
|
|
|
|
return `
|
|
<section class="server-panel-section ${variantClass}">
|
|
<div class="server-panel-section__header">
|
|
<h3>${escapeHtml(title)}</h3>
|
|
<p>${escapeHtml(intro)}</p>
|
|
</div>
|
|
<div class="servers-grid servers-grid--section">
|
|
${cards}
|
|
</div>
|
|
</section>
|
|
`;
|
|
}
|
|
|
|
function renderConnectAction(server) {
|
|
if (!server || !isRealA2SSnapshot(server)) {
|
|
return "";
|
|
}
|
|
|
|
const host = typeof server.host === "string" ? server.host.trim() : "";
|
|
const gamePort = Number.isInteger(server.game_port) ? server.game_port : Number(server.game_port);
|
|
if (!host || !Number.isInteger(gamePort) || gamePort <= 0) {
|
|
return "";
|
|
}
|
|
|
|
const connectUrl = `steam://connect/${host}:${gamePort}`;
|
|
return `
|
|
<div class="server-card__actions">
|
|
<a class="server-connect-button" href="${escapeHtml(connectUrl)}">Conectar</a>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function renderStatsPreview(items) {
|
|
const latestTimestamp = items
|
|
.map((item) => item.captured_at)
|
|
.filter(Boolean)
|
|
.sort()
|
|
.at(-1);
|
|
const totalPlayers = items.reduce(
|
|
(sum, item) => sum + (Number.isFinite(item.players) ? item.players : 0),
|
|
0,
|
|
);
|
|
const onlineServers = items.filter((item) => item.status === "online").length;
|
|
|
|
return [
|
|
renderStatsPreviewItem("Servidores", String(items.length)),
|
|
renderStatsPreviewItem("Online", String(onlineServers)),
|
|
renderStatsPreviewItem("Jugadores", String(totalPlayers)),
|
|
renderStatsPreviewItem(
|
|
"Ultima captura",
|
|
latestTimestamp ? formatTimestamp(latestTimestamp) : "Pendiente",
|
|
),
|
|
].join("");
|
|
}
|
|
|
|
function renderHistorySummary(summary) {
|
|
if (!summary) {
|
|
return "";
|
|
}
|
|
|
|
return `
|
|
<dl class="server-summary">
|
|
<div class="server-summary__item">
|
|
<dt>Visto online</dt>
|
|
<dd>${escapeHtml(summary.last_seen_online_at ? formatTimestamp(summary.last_seen_online_at) : "Sin registro")}</dd>
|
|
</div>
|
|
<div class="server-summary__item">
|
|
<dt>Capturas</dt>
|
|
<dd>${escapeHtml(`${summary.recent_capture_count || 0}/${summary.window_size || 0}`)}</dd>
|
|
</div>
|
|
<div class="server-summary__item">
|
|
<dt>Promedio</dt>
|
|
<dd>${escapeHtml(formatPlayerMetric(summary.recent_average_players))}</dd>
|
|
</div>
|
|
<div class="server-summary__item">
|
|
<dt>Pico</dt>
|
|
<dd>${escapeHtml(formatPlayerMetric(summary.recent_peak_players))}</dd>
|
|
</div>
|
|
</dl>
|
|
`;
|
|
}
|
|
|
|
function renderQuickFacts(items) {
|
|
return `
|
|
<div class="server-card__quickfacts">
|
|
${items
|
|
.map(
|
|
(item) => `
|
|
<article class="server-card__quickfact">
|
|
<p>${escapeHtml(item.label)}</p>
|
|
<strong>${escapeHtml(item.value)}</strong>
|
|
</article>
|
|
`,
|
|
)
|
|
.join("")}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function selectPrimaryServerItems(items) {
|
|
if (!Array.isArray(items)) {
|
|
return [];
|
|
}
|
|
|
|
const realItems = items.filter(isRealA2SSnapshot);
|
|
return realItems.length > 0 ? realItems : items;
|
|
}
|
|
|
|
function isRealA2SSnapshot(item) {
|
|
return item?.snapshot_origin === "real-a2s";
|
|
}
|
|
|
|
function deriveSnapshotState(items) {
|
|
const stateItems = Array.isArray(items) ? items : [];
|
|
const realItems = stateItems.filter(isRealA2SSnapshot);
|
|
const itemsForState = realItems.length > 0 ? realItems : stateItems;
|
|
const latestTimestamp = itemsForState
|
|
.map((item) => item.captured_at)
|
|
.filter(Boolean)
|
|
.sort()
|
|
.at(-1);
|
|
const latestDate = latestTimestamp ? new Date(latestTimestamp) : null;
|
|
const latestTime = latestDate && !Number.isNaN(latestDate.getTime()) ? latestDate.getTime() : null;
|
|
const timestampLabel = latestTimestamp ? formatTimestamp(latestTimestamp) : "";
|
|
const hasRealA2S = realItems.length > 0;
|
|
|
|
if (hasRealA2S && latestTime && Date.now() - latestTime <= RECENT_SNAPSHOT_WINDOW_MS) {
|
|
return { kind: "live", timestampLabel };
|
|
}
|
|
|
|
return { kind: "historical", timestampLabel };
|
|
}
|
|
|
|
function renderStatsPreviewItem(label, value) {
|
|
return `
|
|
<article class="stats-preview__item">
|
|
<p>${escapeHtml(label)}</p>
|
|
<strong>${escapeHtml(value)}</strong>
|
|
</article>
|
|
`;
|
|
}
|
|
|
|
function renderTrend(historyItems) {
|
|
if (!Array.isArray(historyItems) || historyItems.length === 0) {
|
|
return '<span class="server-trend__bar server-trend__bar--empty"></span>';
|
|
}
|
|
|
|
const orderedItems = [...historyItems].reverse();
|
|
return orderedItems
|
|
.map((item) => {
|
|
const players = Number.isFinite(item.players) ? item.players : 0;
|
|
const maxPlayers = Number.isFinite(item.max_players) ? item.max_players : 0;
|
|
const height =
|
|
maxPlayers > 0 ? Math.max(14, Math.round((players / maxPlayers) * 100)) : 14;
|
|
return `<span class="server-trend__bar" style="height: ${height}%"></span>`;
|
|
})
|
|
.join("");
|
|
}
|
|
|
|
function formatServerStatus(status) {
|
|
if (status === "online") {
|
|
return "Online";
|
|
}
|
|
|
|
if (status === "offline") {
|
|
return "Offline";
|
|
}
|
|
|
|
return "Estado pendiente";
|
|
}
|
|
|
|
function formatTimestamp(timestamp) {
|
|
const value = new Date(timestamp);
|
|
if (Number.isNaN(value.getTime())) {
|
|
return "Fecha no disponible";
|
|
}
|
|
|
|
return new Intl.DateTimeFormat("es-ES", {
|
|
dateStyle: "short",
|
|
timeStyle: "short",
|
|
}).format(value);
|
|
}
|
|
|
|
function formatElapsedMinutes(minutes) {
|
|
if (!Number.isFinite(minutes)) {
|
|
return "";
|
|
}
|
|
|
|
if (minutes < 1) {
|
|
return "hace menos de 1 min";
|
|
}
|
|
|
|
if (minutes < 60) {
|
|
return `hace ${minutes} min`;
|
|
}
|
|
|
|
const hours = Math.floor(minutes / 60);
|
|
if (hours < 24) {
|
|
return `hace ${hours} h`;
|
|
}
|
|
|
|
const days = Math.floor(hours / 24);
|
|
return `hace ${days} d`;
|
|
}
|
|
|
|
function formatPlayerMetric(value) {
|
|
return Number.isFinite(value) ? String(value) : "Sin dato";
|
|
}
|
|
|
|
async function fetchJson(url) {
|
|
const response = await fetch(url);
|
|
if (!response.ok) {
|
|
throw new Error(`Request failed with ${response.status}`);
|
|
}
|
|
|
|
return response.json();
|
|
}
|
|
|
|
function escapeHtml(value) {
|
|
return String(value)
|
|
.replaceAll("&", "&")
|
|
.replaceAll("<", "<")
|
|
.replaceAll(">", ">")
|
|
.replaceAll('"', """)
|
|
.replaceAll("'", "'");
|
|
}
|