`;
}
function createAtmList() {
const statusClass = (status) => `status-${status.toLowerCase().replace(/\s+/g, '-')}`;
const rows = dashboardData.atms.map(a => `
| ${a.id} |
${a.locationName} |
${a.status} |
${a.cashLevel}% |
${a.transactionsToday.toLocaleString()} |
${new Date(a.lastMaintenance).toLocaleDateString()} |
`).join('');
return `
| ID | Location | Status | Cash Level | Transactions (24h) | Last Maintenance |
|---|
${rows}
`;
}
function createDataConfiguration() {
const atmRows = dashboardData.atms.map(a => `
|
|
|
|
|
|
|
|
|
`).join('');
return `
ATM Network Data
| ID | Location | Status | Lat | Lon | Cash Lvl % | Trans. (24h) | Last Maint. | Del |
|---|
${atmRows}
`;
}
// --- HELPER & UTILITY ---
function renderMap() {
const container = document.getElementById('map-container');
if (!container) return;
container.innerHTML = '';
const latMin = 33.90, latMax = 34.10, lonMin = -118.48, lonMax = -118.20;
const icon = `
`;
dashboardData.atms.forEach(a => {
const x = ((a.lon - lonMin) / (lonMax - lonMin)) * 100;
const y = ((latMax - a.lat) / (latMax - latMin)) * 100;
if (x >= 0 && x <= 100 && y >= 0 && y <= 100) {
const pointEl = document.createElement('div');
pointEl.id = `map-point-${a.id}`;
pointEl.className = `map-point status-${a.status.toLowerCase().replace(/\s+/g, '-')}`;
pointEl.dataset.id = a.id;
pointEl.style.left = `${x}%`;
pointEl.style.top = `${y}%`;
pointEl.innerHTML = icon;
container.appendChild(pointEl);
}
});
addDynamicEventListeners(); // Re-attach listeners to new points
}
function selectAsset(id) {
const asset = dashboardData.atms.find(a => a.id === id);
if (!asset) return;
document.querySelectorAll('.map-point, .list-item').forEach(el => el.classList.remove('selected'));
document.getElementById(`map-point-${id}`)?.classList.add('selected');
document.getElementById(`list-item-${id}`)?.classList.add('selected');
const detailsPanel = document.getElementById('details-panel');
detailsPanel.innerHTML = `
${asset.locationName}
${asset.id}
- Status: ${asset.status}
- Cash Level: ${asset.cashLevel}%
- Transactions Today: ${asset.transactionsToday.toLocaleString()}
- Last Maintenance: ${new Date(asset.lastMaintenance).toLocaleDateString()}
`;
}
function createKPICard(title, value) {
return `
`;
}
function addTableRow(tableId) {
const table = document.getElementById(tableId);
const newRow = table.tBodies[0].insertRow();
newRow.innerHTML = `
| |
|
| |
| | |
| `;
newRow.querySelector('.delete-row-btn').addEventListener('click', (e) => e.target.closest('tr').remove());
}
function filterAtms() {
const filter = document.getElementById('atm-search').value.toLowerCase();
document.querySelectorAll('.atm-row').forEach(row => {
row.style.display = row.textContent.toLowerCase().includes(filter) ? "" : "none";
});
}
function navigateTabs(direction) {
const newIndex = currentTabIndex + direction;
if (newIndex >= 0 && newIndex < tabs.length) showTab(newIndex);
}
function updateNavButtons() {
prevTabBtn.disabled = currentTabIndex === 0;
nextTabBtn.disabled = currentTabIndex === tabs.length - 1;
}
async function generatePDF() {
const { jsPDF } = window.jspdf;
const doc = new jsPDF('p', 'pt', 'a4');
const activeTab = tabs[currentTabIndex];
const addHeader = (title) => {
doc.setFontSize(18); doc.text('ATM Network Performance Report', 40, 60);
doc.setFontSize(12); doc.setTextColor(100); doc.text(`Section: ${title}`, 40, 80);
doc.setLineWidth(0.5); doc.line(40, 90, 555, 90);
};
addHeader(activeTab.name);
const tabElement = document.getElementById(activeTab.id);
if (activeTab.id === 'dashboard-overview') {
const canvas = await html2canvas(tabElement, { backgroundColor: '#ffffff', scale: 2 });
const imgData = canvas.toDataURL('image/png');
const pdfWidth = doc.internal.pageSize.getWidth() - 80;
const pdfHeight = (canvas.height * pdfWidth) / canvas.width;
doc.addImage(imgData, 'PNG', 40, 110, pdfWidth, pdfHeight);
} else {
const table = tabElement.querySelector('table');
if (table) doc.autoTable({ html: table, startY: 110 });
}
doc.save(`ATM_Network_Report_${activeTab.name.replace(/\s/g, '_')}.pdf`);
}
init();
});
