/** * TIS-RMS Static Web Application Logic * Interactive UI behavior for Windows and Android layouts */ let currentDevice = 'windows'; // 'windows' | 'android' let currentScreen = 'dashboard'; // ── Screen Definitions ───────────────────────────────────────── const SCREENS = [ { id: 'dashboard', label: 'Dashboard', icon: '' }, { id: 'students', label: 'Students', icon: '' }, { id: 'documents', label: 'Documents', icon: '' }, { id: 'archives', label: 'Archives', icon: '' }, { id: 'reports', label: 'Reports', icon: '' }, { id: 'users', label: 'Users', icon: '' }, { id: 'history', label: 'History', icon: '' }, { id: 'settings', label: 'Settings', icon: '' }, ]; document.addEventListener('DOMContentLoaded', () => { setupDeviceSwitcher(); setupNavigation(); startClock(); setScreen('dashboard'); }); // ── Device Switcher ──────────────────────────────────────────── function setupDeviceSwitcher() { const winBtn = document.getElementById('btn-view-windows'); const androidBtn = document.getElementById('btn-view-android'); const winWindow = document.getElementById('desktop-window'); const phoneMockup = document.getElementById('phone-frame'); winBtn.addEventListener('click', () => { currentDevice = 'windows'; winBtn.classList.add('active'); androidBtn.classList.remove('active'); winWindow.style.display = 'flex'; phoneMockup.style.display = 'none'; syncScreenView(); }); androidBtn.addEventListener('click', () => { currentDevice = 'android'; androidBtn.classList.add('active'); winBtn.classList.remove('active'); winWindow.style.display = 'none'; phoneMockup.style.display = 'flex'; syncScreenView(); }); } // ── Navigation ───────────────────────────────────────────────── function setupNavigation() { // Desktop Sidebar document.querySelectorAll('.win-nav-item').forEach(item => { item.addEventListener('click', () => { const scr = item.getAttribute('data-screen'); if (scr) setScreen(scr); }); }); // Mobile Drawer items document.querySelectorAll('.mobile-drawer-item').forEach(item => { item.addEventListener('click', () => { const scr = item.getAttribute('data-screen'); if (scr) { setScreen(scr); closeMobileDrawer(); } }); }); } function openMobileDrawer() { const drawer = document.getElementById('mobile-drawer'); const backdrop = document.getElementById('mobile-drawer-backdrop'); if (drawer) drawer.classList.add('active'); if (backdrop) backdrop.classList.add('active'); } function closeMobileDrawer() { const drawer = document.getElementById('mobile-drawer'); const backdrop = document.getElementById('mobile-drawer-backdrop'); if (drawer) drawer.classList.remove('active'); if (backdrop) backdrop.classList.remove('active'); } function setScreen(screenId) { currentScreen = screenId; syncScreenView(); } function syncScreenView() { // 1. Update active sidebar item on Windows document.querySelectorAll('.win-nav-item').forEach(el => { el.classList.toggle('active', el.getAttribute('data-screen') === currentScreen); }); // 2. Update active drawer item on Android document.querySelectorAll('.mobile-drawer-item').forEach(el => { el.classList.toggle('active', el.getAttribute('data-screen') === currentScreen); }); // 3. Update titles const desktopTitles = { dashboard: 'Dashboard Overview', students: 'Students Directory', documents: 'Document Folders', archives: 'Archived Records', reports: 'DepEd Transparency Board', users: 'User Management', history: 'System Audit Logs', settings: 'Account Settings' }; const mobileTitles = { dashboard: 'Dashboard', students: 'Students', documents: 'Documents', archives: 'Archives', reports: 'Reports', users: 'Users', history: 'History', settings: 'Settings' }; const desktopTitle = document.getElementById('stage-screen-title'); if (desktopTitle) desktopTitle.textContent = desktopTitles[currentScreen] || 'Dashboard Overview'; const mobileTitle = document.getElementById('phone-screen-title'); if (mobileTitle) mobileTitle.textContent = mobileTitles[currentScreen] || 'TIS RMS'; // 4. Update mobile header action buttons (matching screenshots) const mobileActions = document.getElementById('phone-header-actions'); if (mobileActions) { switch (currentScreen) { case 'dashboard': mobileActions.innerHTML = `