TaskTracker/TaskTracker.Api/wwwroot/js/app.js

import { initDashboard, refreshDashboard } from './pages/dashboard.js';
import { initTasks } from './pages/tasks.js';
import { initContext } from './pages/context.js';
import { initMappings } from './pages/mappings.js';

const pages = ['dashboard', 'tasks', 'context', 'mappings'];
let currentPage = null;
let refreshTimer = null;

function navigate(page) {
    if (!pages.includes(page)) page = 'dashboard';
    if (currentPage === page) return;
    currentPage = page;

    // Update nav
    document.querySelectorAll('.nav-link').forEach(link => {
        link.classList.toggle('active', link.dataset.page === page);
    });

    // Show/hide pages
    pages.forEach(p => {
        document.getElementById(`page-${p}`).classList.toggle('hidden', p !== page);
    });

    // Load page content
    const loaders = { dashboard: refreshDashboard, tasks: initTasks, context: initContext, mappings: initMappings };
    loaders[page]?.();

    // Auto-refresh for dashboard and context
    clearInterval(refreshTimer);
    if (page === 'dashboard' || page === 'context') {
        refreshTimer = setInterval(() => loaders[page]?.(), 30000);
    }
}

function onHashChange() {
    const hash = location.hash.slice(2) || 'dashboard';
    navigate(hash);
}

// Init
document.querySelectorAll('.nav-link').forEach(link => {
    link.addEventListener('click', (e) => {
        e.preventDefault();
        location.hash = link.getAttribute('href').slice(1);
    });
});

window.addEventListener('hashchange', onHashChange);

initDashboard();
initTasks();
onHashChange();