File size: 2,225 Bytes
b7a7142 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | document.addEventListener('DOMContentLoaded', () => {
// Initialize tooltips
const initTooltips = () => {
const tooltipElements = document.querySelectorAll('[data-tooltip]');
tooltipElements.forEach(el => {
const tooltipText = el.getAttribute('data-tooltip');
el.addEventListener('mouseenter', () => {
const tooltip = document.createElement('div');
tooltip.className = 'absolute z-50 bg-graphite-800 text-white text-xs px-2 py-1 rounded-md shadow-lg';
tooltip.textContent = tooltipText;
document.body.appendChild(tooltip);
const rect = el.getBoundingClientRect();
tooltip.style.top = `${rect.top - 30}px`;
tooltip.style.left = `${rect.left + rect.width / 2 - tooltip.offsetWidth / 2}px`;
el._tooltip = tooltip;
});
el.addEventListener('mouseleave', () => {
if (el._tooltip) {
document.body.removeChild(el._tooltip);
delete el._tooltip;
}
});
});
};
// Toggle dark/light mode
const themeToggle = document.getElementById('theme-toggle');
if (themeToggle) {
themeToggle.addEventListener('click', () => {
document.documentElement.classList.toggle('dark');
localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light');
});
}
// Initialize components
initTooltips();
feather.replace();
});
// Mock API fetch (would be replaced with real fetch in production)
async function fetchMetrics() {
try {
const response = await fetch('/api/metrics');
const data = await response.json();
return data;
} catch (error) {
console.error('Error fetching metrics:', error);
return null;
}
}
// Periodically update status
setInterval(async () => {
const metrics = await fetchMetrics();
if (metrics) {
// Update UI with new metrics
console.log('Metrics updated:', metrics);
}
}, 30000); // Update every 30 seconds |