forked from nique_372/FastNLExamples
//+------------------------------------------------------------------+
| |
//| app.js |
| |
//| Interfaz: carga el .bin, muestra la ficha del evento y la tabla |
| |
//| de valores con lista virtual (solo se dibujan las filas cerca |
| |
//| de la pantalla; el resto se lee del buffer cuando se hace scroll)|
| |
//+------------------------------------------------------------------+
| |
(function () {
| |
'use strict';
| |
| |
const ROW_H = 28; // alto fijo de fila (px): permite calcular que filas ver sin medirlas
| |
const RENDER_SCREENS = 4; // se dibujan ~4 pantallas de filas alrededor de la vista, el resto on-demand
| |
| |
const $ = (id) => document.getElementById(id);
| |
const el = {
| |
file: $('file'), drop: $('drop'), msg: $('msg'), info: $('info'), title: $('title'), sub: $('sub'),
| |
chips: $('chips'), stats: $('stats'), warn: $('warn'), tableWrap: $('tableWrap'), scroller: $('scroller'),
| |
body: $('body'), rows: $('rows'), order: $('order'), count: $('count')
| |
};
| |
| |
let H = null; // cabecera parseada
| |
let desc = true; // true = mas reciente primero
| |
let start = 0, end = 0; // rango de filas dibujado [start, end)
| |
let ticking = false;
| |
| |
//--- Utilidades
| |
function esc(s) {
| |
return String(s).replace(/[&<>"']/g, (c) => ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c]));
| |
}
| |
function setMsg(text, isErr) { el.msg.textContent = text; el.msg.className = isErr ? 'err' : ''; }
| |
| |
//--- Carga del archivo
| |
async function loadFile(file) {
| |
if (!file) return;
| |
const t0 = performance.now();
| |
try {
| |
const buf = await file.arrayBuffer();
| |
H = CalFmt.parseHeader(buf);
| |
} catch (e) {
| |
H = null;
| |
el.info.hidden = true; el.tableWrap.hidden = true;
| |
setMsg('No se pudo leer "' + file.name + '": ' + e.message, true);
| |
return;
| |
}
| |
setMsg(file.name + ' — ' + (file.size / 1024).toFixed(1) + ' KB, cabecera leida en ' + (performance.now() - t0).toFixed(1) + ' ms', false);
| |
showInfo(file);
| |
resetTable();
| |
}
| |
| |
function chip(k, v) { return '<span class="chip"><b>' + esc(k) + '</b> ' + esc(v) + '</span>'; }
| |
| |
function showInfo(file) {
| |
const C = CalFmt;
| |
el.title.textContent = H.name || '(sin nombre)';
| |
let sub = esc(H.code);
| |
if (/^https?:\/\//i.test(H.url)) sub += ' · <a href="' + esc(H.url) + '" target="_blank" rel="noopener noreferrer">' + esc(H.url) + '</a>';
| |
else if (H.url) sub += ' · ' + esc(H.url);
| |
el.sub.innerHTML = sub;
| |
| |
el.chips.innerHTML = [
| |
chip('Pais', (C.COUNTRY[H.countryId] || 'Desconocido') + ' (' + H.countryId + ')'),
| |
chip('Importancia', C.label(C.IMPORTANCE, H.importance)),
| |
chip('Tipo', C.label(C.TYPE, H.type)),
| |
chip('Sector', C.label(C.SECTOR, H.sector)),
| |
chip('Frecuencia', C.label(C.FREQUENCY, H.frequency)),
| |
chip('Hora', C.label(C.TIMEMODE, H.timeMode)),
| |
chip('Unidad', C.label(C.UNIT, H.unit)),
| |
chip('Multiplicador', C.label(C.MULT_NAME, H.multiplier)),
| |
chip('Decimales', H.digits),
| |
chip('ID evento', H.id)
| |
].join('');
| |
| |
let first = '—', last = '—';
| |
if (H.count > 0) {
| |
first = C.fmtTime(C.readRow(H, 0).time);
| |
last = C.fmtTime(C.readRow(H, H.count - 1).time);
| |
}
| |
el.stats.textContent = H.count.toLocaleString() + ' registros · ' + first + ' → ' + last + ' (hora del servidor)';
| |
el.warn.hidden = !H.warning;
| |
el.warn.textContent = H.warning || '';
| |
el.info.hidden = false;
| |
}
| |
| |
//--- Tabla virtual
| |
function resetTable() {
| |
el.tableWrap.hidden = H.count === 0;
| |
el.count.textContent = H.count.toLocaleString() + ' filas';
| |
el.body.style.height = H.count * ROW_H + 'px';
| |
el.scroller.scrollTop = 0;
| |
start = end = 0;
| |
el.rows.innerHTML = '';
| |
render(true);
| |
}
| |
| |
function visibleRows() { return Math.max(1, Math.ceil(el.scroller.clientHeight / ROW_H)); }
| |
| |
function rowHtml(k) {
| |
const C = CalFmt;
| |
const i = desc ? H.count - 1 - k : k; // k = posicion en pantalla, i = indice en el archivo
| |
const r = C.readRow(H, i);
| |
const imp = r.impact === 1 ? 'pos' : (r.impact === 2 ? 'neg' : '');
| |
return '<div class="row ' + (k % 2 ? 'alt' : '') + '" style="height:' + ROW_H + 'px">' +
| |
'<span class="c-n">' + (i + 1) + '</span>' +
| |
'<span class="c-t">' + C.fmtTime(r.time) + '</span>' +
| |
'<span class="c-v">' + C.fmtValue(r.actual, H) + '</span>' +
| |
'<span class="c-v">' + C.fmtValue(r.forecast, H) + '</span>' +
| |
'<span class="c-v">' + C.fmtValue(r.previous, H) + '</span>' +
| |
'<span class="c-v">' + C.fmtValue(r.revised, H) + '</span>' +
| |
'<span class="c-i ' + imp + '">' + C.label(C.IMPACT, r.impact) + '</span>' +
| |
'<span class="c-id">' + r.id + '</span>' +
| |
'<span class="c-m">' + r.countryIdx + ' / ' + r.eventIdx + (r.processed ? ' · proc.' : '') + '</span>' +
| |
'</div>';
| |
}
| |
| |
// Dibuja ~RENDER_SCREENS pantallas alrededor de la vista. Solo vuelve a dibujar cuando la vista
| |
// se acerca al borde de lo ya dibujado (o con force).
| |
function render(force) {
| |
if (!H || H.count === 0) return;
| |
const vis = visibleRows();
| |
const first = Math.min(H.count - 1, Math.floor(el.scroller.scrollTop / ROW_H));
| |
const last = Math.min(H.count, first + vis);
| |
| |
// Se redibuja solo si la vista se sale de lo dibujado o se acerca a un borde (margen = media pantalla)
| |
const margin = Math.floor(vis * 0.5);
| |
const nearTop = start > 0 && first < start + margin;
| |
const nearBottom = end < H.count && last > end - margin;
| |
if (!force && !nearTop && !nearBottom && first >= start && last <= end) return;
| |
| |
const extra = Math.ceil(vis * (RENDER_SCREENS - 1) / 2);
| |
start = Math.max(0, first - extra);
| |
end = Math.min(H.count, last + extra);
| |
| |
let html = '';
| |
for (let k = start; k < end; k++) html += rowHtml(k);
| |
el.rows.style.top = start * ROW_H + 'px';
| |
el.rows.innerHTML = html;
| |
}
| |
| |
function onScroll() {
| |
if (ticking) return;
| |
ticking = true;
| |
requestAnimationFrame(() => { ticking = false; render(false); });
| |
}
| |
| |
//--- Eventos
| |
el.file.addEventListener('change', () => loadFile(el.file.files[0]));
| |
el.scroller.addEventListener('scroll', onScroll, { passive: true });
| |
window.addEventListener('resize', () => render(true));
| |
el.order.addEventListener('click', () => {
| |
desc = !desc;
| |
el.order.textContent = desc ? 'Mas reciente primero' : 'Mas antiguo primero';
| |
if (H) { el.scroller.scrollTop = 0; render(true); }
| |
});
| |
| |
['dragenter', 'dragover'].forEach((ev) => el.drop.addEventListener(ev, (e) => { e.preventDefault(); el.drop.classList.add('over'); }));
| |
['dragleave', 'drop'].forEach((ev) => el.drop.addEventListener(ev, (e) => { e.preventDefault(); el.drop.classList.remove('over'); }));
| |
el.drop.addEventListener('drop', (e) => loadFile(e.dataTransfer.files[0]));
| |
})();
|