${t("loading")}

`; } const resSymbolId = symbolToIdMap[symbol]; if(!resSymbolId) return; try { const res = await fetch( `https://instruments.nextrades.ai/api/rest/getInstruments?page=1&limit=50&base_symbol_id=${resSymbolId}`, ); const data = await res.json(); if (data && data.length > 0) { instrumentMap[symbol] = { icon_link: data[0].icon_link, country: data[0].country, }; } } catch (e) {} }), ); rawData.forEach((item) => { if (instrumentMap[item.symbol]) { item.icon_link = instrumentMap[item.symbol].icon_link; item.country = instrumentMap[item.symbol].country; } }); // Update Moment locale again after potentially more scripts loaded getLang(); // Update Country List const allCountries = [ ...new Set(rawData.map((item) => item.country).filter(Boolean)), ].sort(); const countryListEl = document.getElementById("country-filters-list"); if (countryListEl) { countryListEl.innerHTML = allCountries .map((country) => { const cCode = getCountryCode(country); const flag = cCode ? `

` : ` No flag

`; return `

${flag}${t(country)}

`; }) .join(""); document .querySelectorAll(".country-filter") .forEach((cb) => (cb.onchange = render)); } const grouped = rawData.reduce((acc, item) => { const d = item.paymentDate.split("T")[0]; if (!acc[d]) acc[d] = []; acc[d].push(item); return acc; }, {}); dividendData.length = 0; dividendData.push( ...Object.entries(grouped).sort( (a, b) => new Date(a[0]) - new Date(b[0]), ), ); getLang(); // Final locale sync before first render render(); } catch (err) { if (tbody) tbody.innerHTML = `Error loading data`; } } function render() { const tbody = document.getElementById("tableBody"); const recordSpan = document.querySelector("#record-num span"); if (!tbody) return; // Refresh locale at start of render const lang = getLang(); const momentMap = { cn: 'zh-cn', zh: 'zh-tw', vn: 'vi', ms: 'ms', th: 'th', jp: 'ja', lo: 'lo' }; const currentLocale = momentMap[lang] || 'en'; if (typeof moment !== 'undefined' && moment.locale) { moment.locale(currentLocale); } const now = moment(); if (currentLocale !== 'en') now.locale(currentLocale); const currencies = Array.from( document.querySelectorAll(".currency-filter:checked"), ).map((cb) => cb.value); const countries = Array.from( document.querySelectorAll(".country-filter:checked"), ).map((cb) => cb.value); // CRITICAL FIX: Always use data-raw (YYYY-MM-DD) for data matching internally const sVal = document.getElementById("start-val")?.getAttribute("data-raw"); const eVal = document.getElementById("end-val")?.getAttribute("data-raw"); let html = ""; let visibleCount = 0; // Find the ABSOLUTE nearest future event across ALL data (regardless of filters) let absoluteNearestItem = null; let minDiff = Infinity; dividendData.forEach(([_, payments]) => { payments.forEach((item) => { const d = moment.utc(item.paymentDate); if (d.isAfter(now)) { const diff = d.diff(now); if (diff < minDiff) { minDiff = diff; absoluteNearestItem = item; } } }); }); const processedGroups = []; dividendData.forEach(([groupDate, payments]) => { const filtered = payments.filter((item) => { const curMatch = currencies.length === 0 || currencies.includes(item.currencyCode); const cntMatch = countries.length === 0 || countries.includes(item.country); const d = item.paymentDate.split("T")[0]; // Date match should be against YYYY-MM-DD const dateMatch = (!sVal || d >= sVal) && (!eVal || d <= eVal); return curMatch && cntMatch && dateMatch; }); if (filtered.length > 0) { // SORTING: Sort by time within each day filtered.sort((a, b) => { return moment.utc(a.paymentDate).valueOf() - moment.utc(b.paymentDate).valueOf(); }); processedGroups.push({ groupDate, filtered }); visibleCount += filtered.length; } }); processedGroups.forEach(({ groupDate, filtered }) => { const gDate = moment(groupDate); if (currentLocale !== 'en') { gDate.locale(currentLocale); } const tzContainer = document.getElementById("tz-desktop"); const tzOffset = tzContainer ? parseInt(tzContainer.getAttribute("data-value") || "0", 10) : 0; const isCN = currentLocale === 'zh-cn' || currentLocale === 'zh-tw'; const isJP = currentLocale === 'ja'; const headerFormat = (isCN || isJP) ? "YYYY年M月D日 dddd" : "dddd, MMM DD, YYYY"; const headerText = gDate.format(headerFormat); html += `${headerText}`; filtered.forEach((item) => { const d = moment.utc(item.paymentDate).utcOffset(tzOffset * 60); if (currentLocale !== 'en') { d.locale(currentLocale); } const isPast = d.isBefore(now); const rowFormat = (isCN || isJP) ? "M月D日, HH:mm" : "MMM DD, HH:mm"; const dateText = d.format(rowFormat); const fromNowText = d.fromNow(); const isNearest = absoluteNearestItem && item.symbol === absoluteNearestItem.symbol && item.paymentDate === absoluteNearestItem.paymentDate; const cCode = getCountryCode(item.country); let rowClass = isPast ? "opacity-50" : ""; if (isNearest) { rowClass += " red-timeline-border"; if (d.isSame(now, 'day')) { rowClass += " highlight-today"; } } html += ` ${dateText} ${isPast ? '✔' : fromNowText}

${cCode ? `

` : `

`} ${cCode ? cCode.toUpperCase() : (t(item.country) || "")}

${item.symbol}

${item.perShareDividend} ${item.currencyCode} `; }); }); const noResultsHtml = `

${t("no_records")}

${t("please_select")}

`; tbody.innerHTML = visibleCount === 0 ? noResultsHtml : html; if (recordSpan) recordSpan.textContent = visibleCount; setTimeout(() => { const highlightedRow = tbody.querySelector(".highlight-today") || tbody.querySelector(".red-timeline-border"); const tableContainer = document.querySelector(".table-responsive"); if (highlightedRow && tableContainer) { // Calculate the position relative to the container const rowOffsetTop = highlightedRow.offsetTop; // Sticky header offset (approx 40px for the thead) const headerOffset = 89; // Scroll target is the row's offsetTop minus the header height const scrollTarget = rowOffsetTop - headerOffset; tableContainer.scrollTo({ top: scrollTarget, behavior: "smooth", }); } }, 100); } function initialize() { // Anti-scroll propagation for table and custom selects const scrollableElements = [ document.getElementById("filterDrawer"), document.querySelector(".table-responsive"), ...document.querySelectorAll(".custom-select-options") ]; scrollableElements.forEach(el => { if (!el) return; const stopScrollProp = (e) => { if (el.offsetWidth < el.scrollWidth || el.offsetHeight < el.scrollHeight) { e.stopPropagation(); } }; el.addEventListener("wheel", stopScrollProp, { passive: true }); el.addEventListener("touchstart", stopScrollProp, { passive: true }); el.addEventListener("touchmove", stopScrollProp, { passive: true }); }); // Drawer Logic const drawer = document.getElementById("filterDrawer"); const openBtn = document.getElementById("filterOpen"); const closeBtn = document.getElementById("filterClose"); if (openBtn) openBtn.onclick = () => { drawer.classList.add("active"); openBtn.classList.add("active"); }; if (closeBtn) closeBtn.onclick = () => { drawer.classList.remove("active"); openBtn.classList.remove("active"); }; // Quick Periods Toggle (Mobile) const qpToggle = document.getElementById("quickPeriodsToggle"); const qpContent = document.getElementById("quickPeriodsContent"); if (qpToggle && qpContent) { qpToggle.onclick = () => { qpContent.classList.toggle("d-none"); qpToggle.querySelector(".chevron-down").classList.toggle("active"); }; } // Reset Button document.querySelectorAll(".ant-btn-reset").forEach((btn) => { btn.onclick = () => { document .querySelectorAll(".currency-filter, .country-filter") .forEach((cb) => (cb.checked = false)); document.getElementById("start-val").value = ""; document.getElementById("end-val").value = ""; // CRITICAL: Also clear raw data on reset document.getElementById("start-val").removeAttribute("data-raw"); document.getElementById("end-val").removeAttribute("data-raw"); if (typeof syncDisplayDates === 'function') { syncDisplayDates(null, null); } const sMob = document.getElementById("start-val-mob"); const eMob = document.getElementById("end-val-mob"); if (sMob) sMob.value = ""; if (eMob) eMob.value = ""; // Remove highlight from period buttons document.querySelectorAll(".ant-btn, .ant-btn-mobile").forEach((b) => b.classList.remove("active")); render(); }; }); // Range Buttons Logic function handleRangeClick(e, selector) { const btn = e.target.closest(selector); if (!btn) return; // Remove active from ALL range buttons (mobile and desktop) document .querySelectorAll(".ant-btn, .ant-btn-mobile") .forEach((b) => b.classList.remove("active")); // Add active to the clicked one btn.classList.add("active"); const period = btn.getAttribute("data-period"); let start = moment(); let end = moment(); if (period === "TODAY") { start = moment().startOf("day"); end = moment().endOf("day"); } else if (period === "TOMORROW") { start = moment().add(1, "days").startOf("day"); end = moment().add(1, "days").endOf("day"); } else if (period === "THIS_WEEK") { start = moment().startOf("isoWeek"); end = moment().endOf("isoWeek"); } else if (period === "NEXT_WEEK") { start = moment().add(1, "weeks").startOf("isoWeek"); end = moment().add(1, "weeks").endOf("isoWeek"); } else if (period === "THIS_MONTH") { start = moment().startOf("month"); end = moment().endOf("month"); } else if (period === "NEXT_MONTH") { start = moment().add(1, "months").startOf("month"); end = moment().add(1, "months").endOf("month"); } const sYMD = start.format("YYYY-MM-DD"); const eYMD = end.format("YYYY-MM-DD"); document.getElementById("start-val").setAttribute("data-raw", sYMD); document.getElementById("end-val").setAttribute("data-raw", eYMD); if (typeof syncDisplayDates === 'function') { syncDisplayDates(sYMD, eYMD); } render(); } const rangeSelector = document.getElementById("range-selector"); if (rangeSelector) rangeSelector.onclick = (e) => handleRangeClick(e, ".ant-btn"); const mobileRangeSelector = document.querySelector( ".mobile-range-selector", ); if (mobileRangeSelector) mobileRangeSelector.onclick = (e) => handleRangeClick(e, ".ant-btn-mobile"); // Timezone Custom Select Logic function generateTimezoneOptions(containerId) { const container = document.getElementById(containerId); if (!container) return; const optionsEl = container.querySelector(".custom-select-options"); const labelEl = container.querySelector(".selected-label"); // Default to UTC (0) container.setAttribute("data-value", "0"); optionsEl.innerHTML = timezones.map(tz => { const localizedCity = t(tz.city); const fullLabel = `${tz.offset} ${localizedCity}`; return `

${fullLabel}

`; }).join(''); // Set initial localized label const defaultTz = timezones.find(t => t.value === "0"); if (defaultTz && labelEl) { labelEl.textContent = `${defaultTz.offset} ${t(defaultTz.city)}`; } container.querySelector(".custom-select-trigger").onclick = (e) => { e.stopPropagation(); // Close other dropdowns document.querySelectorAll(".custom-select-container").forEach(c => { if (c !== container) c.classList.remove("active"); }); container.classList.toggle("active"); }; optionsEl.onclick = (e) => { const option = e.target.closest(".custom-select-option"); if (!option) return; const val = option.getAttribute("data-value"); const label = option.textContent; updateTimezone(val, label); container.classList.remove("active"); render(); }; } function updateTimezone(val, label) { document.querySelectorAll(".custom-select-container").forEach(container => { container.setAttribute("data-value", val); const labelEl = container.querySelector(".selected-label"); if (labelEl) labelEl.textContent = label; container.querySelectorAll(".custom-select-option").forEach(opt => { opt.classList.toggle("selected", opt.getAttribute("data-value") === val); }); }); } generateTimezoneOptions("tz-desktop"); generateTimezoneOptions("tz-mobile"); // Outside click detection to close dropdown window.addEventListener("click", () => { document.querySelectorAll(".custom-select-container").forEach(c => c.classList.remove("active")); }); document .querySelectorAll(".currency-filter") .forEach((cb) => (cb.onchange = render)); // Flatpickr Initialization if (typeof flatpickr !== "undefined") { const lang = getLang(); const fpLocaleMap = { cn: 'zh', zh: 'zh_tw', vn: 'vn', ms: 'ms', th: 'th', jp: 'ja', lo: 'lo' }; const localeKey = fpLocaleMap[lang] || "en"; let fpLocaleObj = "en"; if (lang === 'ms') { fpLocaleObj = fpLocales.ms; } else if (flatpickr.l10ns) { fpLocaleObj = flatpickr.l10ns[localeKey] || flatpickr.l10ns["default"]; } function syncDisplayDates(s, e) { const lang = getLang(); const isCN = lang === 'cn' || lang === 'zh'; const isJP = lang === 'jp'; let format = "YYYY MMM DD"; if (isCN || isJP) format = "YYYY年M月D日"; // Re-force locale on moment to be safe before formatting const momentMap = { cn: 'zh-cn', zh: 'zh-tw', vn: 'vi', ms: 'ms', th: 'th', jp: 'ja', lo: 'lo' }; if (moment.locale) moment.locale(momentMap[lang] || 'en'); let startLabel = "Start date"; let endLabel = "End date"; if (isCN || isJP) { startLabel = "开始日期"; endLabel = "结束日期"; } else if (lang === 'vn') { startLabel = "Ngày bắt đầu"; endLabel = "Ngày kết thúc"; } else if (lang === 'th') { startLabel = "วันที่เริ่มต้น"; endLabel = "วันที่สิ้นสุด"; } else if (lang === 'ms') { startLabel = "Tarikh mula"; endLabel = "Tarikh tamat"; } else if (lang === 'lo') { startLabel = "ວັນທີເລີ່ມຕົ້ນ"; endLabel = "ວັນທີສິ້ນສຸດ"; } const sDisp = s ? moment(s).format(format) : startLabel; const eDisp = e ? moment(e).format(format) : endLabel; const mainTrigger = document.getElementById("picker-trigger"); if (mainTrigger) { const mainInputs = mainTrigger.querySelectorAll('input'); if (mainInputs.length >= 2) { mainInputs[0].value = sDisp; mainInputs[1].value = eDisp; } } const mobTrigger = document.getElementById("mobile-picker-trigger"); if (mobTrigger) { const mobInputs = mobTrigger.querySelectorAll('input'); if (mobInputs.length >= 2) { mobInputs[0].value = sDisp; mobInputs[1].value = eDisp; } } } // RUN IMMEDIATELY to fix initial placeholders syncDisplayDates(null, null); const fpConfig = { mode: "range", dateFormat: "Y-m-d", locale: fpLocaleObj, onClose: function (selectedDates, dateStr, instance) { if (selectedDates.length === 2) { const s = instance.formatDate(selectedDates[0], "Y-m-d"); const e = instance.formatDate(selectedDates[1], "Y-m-d"); document.getElementById("start-val").setAttribute("data-raw", s); document.getElementById("end-val").setAttribute("data-raw", e); syncDisplayDates(s, e); document .querySelectorAll(".ant-btn, .ant-btn-mobile") .forEach((b) => b.classList.remove("active")); render(); } }, }; flatpickr("#picker-trigger", fpConfig); flatpickr("#mobile-picker-trigger", fpConfig); } updateTable(); // Initial placeholder localization if (typeof syncDisplayDates === 'function') { syncDisplayDates(null, null); } } initialize(); })();