tisto/student-web-if-development-kit
2
0
Fork 0
forked from izu/student-web-if-development-kit
Code Pull Requests Activity

fix: embed RODA dashboard data at build

Browse Source
This commit is contained in:
Raditya_Indra_Putranto
2026-06-04 19:21:53 +07:00
parent 56c34eddc3
commit 478d48c237
2 changed files with 159 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
groups/RODA/index.html
+87 -51
View File
@@ -75,6 +75,7 @@
<script>
window.APP_CONFIG = window.APP_CONFIG || {
debugLogs: false,
dashboardRuntimeFetch: 'local',
dashboardTargetUrl: 'https://dashboard.informatika.untan.ac.id/index.php?penelitian',
dashboardProxyTemplates: [
'https://api.allorigins.win/get?url={{url}}&ts={{ts}}',
@@ -83,6 +84,7 @@
]
};
</script>
<!-- RODA_DASHBOARD_DATA -->
<link rel="stylesheet" href="style.css">
</head>
@@ -1484,6 +1486,7 @@
if (error.message === 'EMPTY_RESPONSE') return 'Dashboard mengembalikan data kosong atau struktur halaman berubah.';
if (error.message === 'NO_ROWS_FOUND') return 'Data penelitian tidak ditemukan pada halaman dashboard.';
if (error.message === 'DASHBOARD_PROXY_NOT_CONFIGURED') return 'Proxy dashboard belum dikonfigurasi.';
if (error.message === 'DASHBOARD_RUNTIME_FETCH_DISABLED') return 'Data publikasi belum tersedia pada build ini.';
if (error.message?.startsWith('HTTP_ERROR_')) return `Proxy merespons gagal (${error.message.replace('HTTP_ERROR_', 'HTTP ')}).`;
return 'Gagal mengambil data. Server dashboard mungkin sedang sibuk atau memblokir akses.';
}
@@ -1549,60 +1552,25 @@
return hostname === 'localhost' || hostname === '127.0.0.1' || hostname === '';
}
async function fetchDashboardData() {
const grid = document.getElementById('riset-grid');
if (grid) {
grid.innerHTML = `
<div class="md:col-span-2 lg:col-span-3 py-20 text-center">
<div class="inline-block animate-spin w-10 h-10 border-4 border-untan-blue border-t-transparent rounded-full mb-4"></div>
<p class="text-slate-500 font-bold">Mengambil data dari Dashboard...</p>
</div>
`;
function isDashboardRuntimeFetchAllowed() {
const mode = window.APP_CONFIG?.dashboardRuntimeFetch;
return mode === true || mode === 'always' || (mode === 'local' && shouldUseLocalDashboardProxy());
}
const targetUrl = window.APP_CONFIG?.dashboardTargetUrl?.trim();
const proxyTemplates = Array.isArray(window.APP_CONFIG?.dashboardProxyTemplates)
? window.APP_CONFIG.dashboardProxyTemplates.filter(Boolean)
: [];
// Endpoint server.js hanya ada saat development lokal.
const proxyServers = shouldUseLocalDashboardProxy() ? [() => '/api/dashboard'] : [];
// Deployment static memakai proxy publik karena tidak menjalankan server.js.
if (targetUrl) {
proxyTemplates.forEach((template) => {
proxyServers.push((url) => template
.replaceAll('{{url}}', encodeURIComponent(url))
.replaceAll('{{rawUrl}}', url)
.replaceAll('{{ts}}', String(Date.now())));
});
}
if (!proxyServers.length) {
renderRisetFeedback('Pemuatan Data Gagal', getDashboardErrorMessage(new Error('DASHBOARD_PROXY_NOT_CONFIGURED')), 'Coba Lagi', 'fetchDashboardData()');
return;
}
let lastError = null;
for (const getProxyUrl of proxyServers) {
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 15000);
function readEmbeddedDashboardHtml() {
const source = document.getElementById('roda-dashboard-html');
if (!source) return '';
try {
const proxyUrl = getProxyUrl(targetUrl);
const response = await fetch(proxyUrl, { signal: controller.signal });
clearTimeout(timeoutId);
if (!response.ok) throw new Error(`HTTP_ERROR_${response.status}`);
const responseData = await response.text();
const html = extractDashboardHtml(responseData);
const rows = parseDashboardRows(html);
return JSON.parse(source.textContent || '""') || '';
} catch (error) {
return source.textContent || '';
}
}
function applyDashboardRows(rows) {
const newData = [];
rows.forEach((row, index) => {
rows.forEach((row) => {
const cols = row.querySelectorAll('td');
if (cols.length >= 3) {
const indexVal = cols[0].innerText.trim();
@@ -1643,15 +1611,83 @@
}
});
if (newData.length > 0) {
if (!newData.length) {
throw new Error('NO_ROWS_FOUND');
}
risetData = newData;
isLoadingData = false;
renderRisetCards();
updateStatPub(newData.length);
return; // Berhasil! Keluar dari loop
}
throw new Error('NO_ROWS_FOUND');
async function fetchDashboardData() {
const grid = document.getElementById('riset-grid');
if (grid) {
grid.innerHTML = `
<div class="md:col-span-2 lg:col-span-3 py-20 text-center">
<div class="inline-block animate-spin w-10 h-10 border-4 border-untan-blue border-t-transparent rounded-full mb-4"></div>
<p class="text-slate-500 font-bold">Mengambil data dari Dashboard...</p>
</div>
`;
}
let lastError = null;
const embeddedHtml = readEmbeddedDashboardHtml();
if (embeddedHtml) {
try {
applyDashboardRows(parseDashboardRows(embeddedHtml));
return;
} catch (error) {
lastError = error;
}
}
if (!isDashboardRuntimeFetchAllowed()) {
renderRisetFeedback('Pemuatan Data Gagal', getDashboardErrorMessage(lastError || new Error('DASHBOARD_RUNTIME_FETCH_DISABLED')), 'Coba Lagi', 'fetchDashboardData()');
return;
}
const targetUrl = window.APP_CONFIG?.dashboardTargetUrl?.trim();
const proxyTemplates = Array.isArray(window.APP_CONFIG?.dashboardProxyTemplates)
? window.APP_CONFIG.dashboardProxyTemplates.filter(Boolean)
: [];
// Endpoint server.js hanya ada saat development lokal.
const proxyServers = shouldUseLocalDashboardProxy() ? [() => '/api/dashboard'] : [];
// Deployment static memakai proxy publik karena tidak menjalankan server.js.
if (targetUrl) {
proxyTemplates.forEach((template) => {
proxyServers.push((url) => template
.replaceAll('{{url}}', encodeURIComponent(url))
.replaceAll('{{rawUrl}}', url)
.replaceAll('{{ts}}', String(Date.now())));
});
}
if (!proxyServers.length) {
renderRisetFeedback('Pemuatan Data Gagal', getDashboardErrorMessage(new Error('DASHBOARD_PROXY_NOT_CONFIGURED')), 'Coba Lagi', 'fetchDashboardData()');
return;
}
for (const getProxyUrl of proxyServers) {
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 15000);
try {
const proxyUrl = getProxyUrl(targetUrl);
const response = await fetch(proxyUrl, { signal: controller.signal });
clearTimeout(timeoutId);
if (!response.ok) throw new Error(`HTTP_ERROR_${response.status}`);
const responseData = await response.text();
const html = extractDashboardHtml(responseData);
const rows = parseDashboardRows(html);
applyDashboardRows(rows);
return; // Berhasil! Keluar dari loop
} catch (error) {
clearTimeout(timeoutId);
lastError = error;
vite.config.js
+69 -1
View File
@@ -5,6 +5,9 @@ import { defineConfig } from 'vite';
const root = path.dirname(fileURLToPath(import.meta.url));
const excludedDirs = new Set(['.git', 'dist', 'node_modules']);
const rodaDashboardUrl = 'https://dashboard.informatika.untan.ac.id/index.php?penelitian';
let rodaDashboardHtmlCache;
function collectHtmlInputs(dir) {
const inputs = {};
@@ -47,8 +50,73 @@ function copyStaticAssets() {
};
}
async function fetchRodaDashboardHtml() {
if (rodaDashboardHtmlCache !== undefined) {
return rodaDashboardHtmlCache;
}
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 12000);
try {
const response = await fetch(rodaDashboardUrl, {
signal: controller.signal,
headers: {
'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0 Safari/537.36',
},
});
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
rodaDashboardHtmlCache = await response.text();
} catch (error) {
const message = error instanceof Error ? error.message : String(error);
console.warn(`[roda-dashboard] Build-time dashboard fetch skipped: ${message}`);
rodaDashboardHtmlCache = '';
} finally {
clearTimeout(timeoutId);
}
return rodaDashboardHtmlCache;
}
function escapeJsonScriptContent(value) {
return JSON.stringify(value)
.replaceAll('<', '\\u003c')
.replaceAll('>', '\\u003e')
.replaceAll('&', '\\u0026')
.replaceAll('\u2028', '\\u2028')
.replaceAll('\u2029', '\\u2029');
}
function embedRodaDashboardData() {
let command = 'serve';
return {
name: 'embed-roda-dashboard-data',
configResolved(config) {
command = config.command;
},
async transformIndexHtml(html, context) {
const filename = context?.filename ? path.resolve(context.filename) : '';
const rodaIndex = path.join(root, 'groups', 'RODA', 'index.html');
if (filename !== rodaIndex || command !== 'build') {
return html.replace('<!-- RODA_DASHBOARD_DATA -->', '');
}
const dashboardHtml = await fetchRodaDashboardHtml();
const payload = `<script type="application/json" id="roda-dashboard-html">${escapeJsonScriptContent(dashboardHtml)}</script>`;
return html.replace('<!-- RODA_DASHBOARD_DATA -->', payload);
},
};
}
export default defineConfig({
plugins: [copyStaticAssets()],
plugins: [embedRodaDashboardData(), copyStaticAssets()],
build: {
rollupOptions: {
input: collectHtmlInputs(root),