| class HeaderComponent { |
| static render() { |
| const header = document.getElementById('mainHeader'); |
| if (!header) return; |
|
|
| header.innerHTML = ` |
| <div class="header-content"> |
| <div class="header-brand"> |
| <h1>🎓 RewardApp</h1> |
| <span class="header-subtitle">پلتفرم آموزش توسعه وب</span> |
| </div> |
| |
| <div class="header-stats" id="headerStats"> |
| <!-- توسط JavaScript پر می‌شود --> |
| </div> |
| |
| <div class="header-actions"> |
| <button class="header-btn" onclick="HeaderComponent.showUserMenu()"> |
| 👤 حساب کاربری |
| </button> |
| <button class="header-btn" onclick="HeaderComponent.toggleTheme()"> |
| 🌙 تغییر تم |
| </button> |
| </div> |
| </div> |
| |
| <div class="user-menu" id="userMenu" style="display: none;"> |
| <div class="menu-content"> |
| <div class="menu-header"> |
| <div class="user-avatar">U</div> |
| <div class="user-details"> |
| <span class="user-name" id="menuUserName">کاربر مهمان</span> |
| <span class="user-role" id="menuUserRole">ورود نکرده</span> |
| </div> |
| </div> |
| <div class="menu-items"> |
| <a href="login.html" class="menu-item">🔐 ورود به سیستم</a> |
| <a href="register.html" class="menu-item">📝 ثبت نام</a> |
| <hr class="menu-divider"> |
| <button class="menu-item" onclick="HeaderComponent.resetProgress()"> |
| 🔄 بازنشانی پیشرفت |
| </button> |
| <button class="menu-item" onclick="HeaderComponent.exportData()"> |
| 💾 ذخیره اطلاعات |
| </button> |
| <hr class="menu-divider"> |
| <button class="menu-item" onclick="HeaderComponent.showAbout()"> |
| ℹ️ درباره برنامه |
| </button> |
| </div> |
| </div> |
| </div> |
| `; |
|
|
| this.updateStats(); |
| this.setupEventListeners(); |
| } |
|
|
| static updateStats() { |
| const headerStats = document.getElementById('headerStats'); |
| if (!headerStats) return; |
|
|
| const user = authManager.getCurrentUser(); |
| |
| if (user) { |
| const stats = learningLogic.getUserStats(); |
| headerStats.innerHTML = ` |
| <div class="stat-item"> |
| <span class="stat-label">سطح</span> |
| <span class="stat-value">${stats.level}</span> |
| </div> |
| <div class="stat-item"> |
| <span class="stat-label">امتیاز</span> |
| <span class="stat-value">${Utils.formatNumber(stats.totalScore)}</span> |
| </div> |
| <div class="stat-item"> |
| <span class="stat-label">استریک</span> |
| <span class="stat-value">${stats.streak}</span> |
| </div> |
| `; |
| } else { |
| headerStats.innerHTML = ` |
| <div class="stat-item"> |
| <span class="stat-label">وضعیت</span> |
| <span class="stat-value">ورود نکرده</span> |
| </div> |
| `; |
| } |
| } |
|
|
| static setupEventListeners() { |
| |
| document.addEventListener('click', (e) => { |
| const userMenu = document.getElementById('userMenu'); |
| const headerBtn = e.target.closest('.header-btn'); |
| |
| if (userMenu && !userMenu.contains(e.target) && !headerBtn) { |
| userMenu.style.display = 'none'; |
| } |
| }); |
|
|
| |
| document.addEventListener('authStateChanged', () => { |
| this.updateStats(); |
| this.updateUserMenu(); |
| }); |
|
|
| document.addEventListener('progressUpdated', () => { |
| this.updateStats(); |
| }); |
| } |
|
|
| static showUserMenu() { |
| const userMenu = document.getElementById('userMenu'); |
| if (!userMenu) return; |
|
|
| this.updateUserMenu(); |
| userMenu.style.display = userMenu.style.display === 'none' ? 'block' : 'none'; |
| } |
|
|
| static updateUserMenu() { |
| const menuUserName = document.getElementById('menuUserName'); |
| const menuUserRole = document.getElementById('menuUserRole'); |
| |
| if (!menuUserName || !menuUserRole) return; |
|
|
| const user = authManager.getCurrentUser(); |
| |
| if (user) { |
| menuUserName.textContent = user.profile.fullName || user.username; |
| menuUserRole.textContent = this.getRoleText(user.role); |
| } else { |
| menuUserName.textContent = 'کاربر مهمان'; |
| menuUserRole.textContent = 'ورود نکرده'; |
| } |
| } |
|
|
| static getRoleText(role) { |
| const roles = { |
| 'student': 'دانشجو', |
| 'instructor': 'مربی', |
| 'admin': 'مدیر' |
| }; |
| return roles[role] || role; |
| } |
|
|
| static toggleTheme() { |
| const currentTheme = localStorage.getItem('theme') || 'light'; |
| const newTheme = currentTheme === 'light' ? 'dark' : 'light'; |
| |
| localStorage.setItem('theme', newTheme); |
| document.body.setAttribute('data-theme', newTheme); |
| |
| Utils.showNotification( |
| `تم ${newTheme === 'dark' ? 'تاریک' : 'روشن'} فعال شد`, |
| 'success' |
| ); |
| } |
|
|
| static resetProgress() { |
| if (confirm('آیا از بازنشانی تمام پیشرفت خود مطمئن هستید؟ این عمل غیرقابل برگشت است.')) { |
| learningLogic.resetProgress(); |
| Utils.showNotification('پیشرفت با موفقیت بازنشانی شد', 'success'); |
| document.dispatchEvent(new CustomEvent('progressUpdated')); |
| this.showUserMenu(); |
| } |
| } |
|
|
| static exportData() { |
| const userProgress = learningLogic.userProgress; |
| const dataStr = JSON.stringify(userProgress, null, 2); |
| const dataBlob = new Blob([dataStr], { type: 'application/json' }); |
| |
| const url = URL.createObjectURL(dataBlob); |
| const link = document.createElement('a'); |
| link.href = url; |
| link.download = `rewardapp-backup-${Utils.getCurrentDate()}.json`; |
| document.body.appendChild(link); |
| link.click(); |
| document.body.removeChild(link); |
| URL.revokeObjectURL(url); |
| |
| Utils.showNotification('اطلاعات با موفقیت ذخیره شد', 'success'); |
| this.showUserMenu(); |
| } |
|
|
| static showAbout() { |
| const aboutHTML = ` |
| <div class="about-modal"> |
| <h3>🎓 درباره RewardApp</h3> |
| <div class="about-content"> |
| <p><strong>نسخه:</strong> ۱.۰.۰</p> |
| <p><strong>توضیحات:</strong> پلتفرم آموزشی تعاملی برای یادگیری توسعه وب</p> |
| <p><strong>امکانات:</strong></p> |
| <ul> |
| <li>📖 درس‌های تعاملی</li> |
| <li>❓ آزمون‌های کوتاه</li> |
| <li>✏️ تمرین‌های عملی</li> |
| <li>🏆 سیستم پاداش و سطح‌بندی</li> |
| <li>📊 ردیابی پیشرفت</li> |
| </ul> |
| <hr> |
| <p>ساخته شده با ❤️ برای جامعه توسعه‌دهندگان وب</p> |
| </div> |
| <button class="btn btn-primary" onclick="ModalComponent.closeCurrentModal()"> |
| بستن |
| </button> |
| </div> |
| `; |
| |
| ModalComponent.showCustomModal('about-modal', aboutHTML); |
| this.showUserMenu(); |
| } |
| } |
|
|
| |
| document.addEventListener('DOMContentLoaded', () => { |
| const savedTheme = localStorage.getItem('theme'); |
| if (savedTheme) { |
| document.body.setAttribute('data-theme', savedTheme); |
| } |
| }); |
