script.js

// DevUI-Dark Educational Dashboard - JavaScript

class DashboardManager {
    constructor() {
        this.currentTimeFilter = 'week';
        this.init();
    }

    init() {
        this.setupEventListeners();
        this.initializeCharts();
        this.setupProgressAnimations();
        this.setupInteractiveElements();
        this.updateDashboardData();
    }

    setupEventListeners() {
        // Time filter buttons
        const filterButtons = document.querySelectorAll('.filter-button');
        filterButtons.forEach(button => {
            button.addEventListener('click', (e) => {
                this.handleTimeFilterChange(e.target);
            });
        });

        // View all buttons
        const viewAllButtons = document.querySelectorAll('.view-all-button');
        viewAllButtons.forEach(button => {
            button.addEventListener('click', (e) => {
                this.handleViewAllClick(e.target);
            });
        });

        // Course action buttons
        const courseButtons = document.querySelectorAll('.course-button');
        courseButtons.forEach(button => {
            button.addEventListener('click', (e) => {
                this.handleCourseAction(e.target);
            });
        });

        // Assignment action buttons
        const assignmentButtons = document.querySelectorAll('.assignment-button');
        assignmentButtons.forEach(button => {
            button.addEventListener('click', (e) => {
                this.handleAssignmentAction(e.target);
            });
        });

        // Notification button
        const notificationButton = document.querySelector('.action-button');
        if (notificationButton) {
            notificationButton.addEventListener('click', () => {
                this.showNotifications();
            });
        }
    }

    handleTimeFilterChange(clickedButton) {
        // Remove active class from all buttons
        document.querySelectorAll('.filter-button').forEach(btn => {
            btn.classList.remove('active');
        });
        
        // Add active class to clicked button
        clickedButton.classList.add('active');
        
        // Update current filter
        this.currentTimeFilter = clickedButton.textContent.toLowerCase();
        
        // Update charts based on new filter
        this.updateCharts();
        
        // Show feedback
        this.showToast(`Switched to ${this.currentTimeFilter} view`);
    }

    handleViewAllClick(button) {
        const sectionTitle = button.closest('.section-header').querySelector('.section-title').textContent;
        this.showToast(`Viewing all ${sectionTitle.toLowerCase()}`);
        
        // Simulate navigation or modal opening
        setTimeout(() => {
            console.log(`Opening full view for: ${sectionTitle}`);
        }, 300);
    }

    handleCourseAction(button) {
        const courseCard = button.closest('.course-card');
        const courseTitle = courseCard.querySelector('.course-title').textContent;
        const action = button.textContent;
        
        this.showToast(`${action} for ${courseTitle}`);
        
        // Simulate action
        if (action.includes('Continue')) {
            this.simulateLessonNavigation(courseTitle);
        } else if (action.includes('Grades')) {
            this.simulateGradesView(courseTitle);
        }
    }

    handleAssignmentAction(button) {
        const assignmentItem = button.closest('.assignment-item');
        const assignmentTitle = assignmentItem.querySelector('.assignment-title').textContent;
        const action = button.textContent;
        
        this.showToast(`${action} for ${assignmentTitle}`);
        
        // Simulate action
        if (action.includes('Continue')) {
            this.simulateAssignmentWork(assignmentTitle);
        } else if (action.includes('Submit')) {
            this.simulateAssignmentSubmission(assignmentTitle);
        }
    }

    simulateLessonNavigation(courseName) {
        console.log(`Navigating to lesson: ${courseName}`);
        // Simulate loading state
        const button = document.querySelector(`[data-course="${courseName}"]`) || 
                     document.querySelector('.course-button.primary');
        if (button) {
            const originalText = button.textContent;
            button.textContent = 'Loading...';
            button.disabled = true;
            
            setTimeout(() => {
                button.textContent = originalText;
                button.disabled = false;
            }, 2000);
        }
    }

    simulateGradesView(courseName) {
        console.log(`Opening grades for: ${courseName}`);
        // Could open a modal or navigate to grades page
    }

    simulateAssignmentWork(assignmentName) {
        console.log(`Opening assignment: ${assignmentName}`);
        // Could open assignment editor or navigate to assignment page
    }

    simulateAssignmentSubmission(assignmentName) {
        console.log(`Submitting assignment: ${assignmentName}`);
        // Could show submission confirmation or navigate to submission page
    }

    showNotifications() {
        this.showToast('Notifications panel opened');
        // Could open notifications dropdown or modal
    }

    initializeCharts() {
        this.createStudyTimeChart();
        this.createGradeTrendsChart();
    }

    createStudyTimeChart() {
        const canvas = document.getElementById('studyTimeChart');
        if (!canvas) return;

        const ctx = canvas.getContext('2d');
        
        // Create a simple bar chart using canvas
        const data = [4, 6, 3, 8, 5, 7, 2]; // Hours per day
        const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
        const maxValue = Math.max(...data);
        
        // Clear canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        // Draw bars
        const barWidth = 30;
        const barSpacing = 10;
        const startX = 20;
        const startY = canvas.height - 30;
        
        data.forEach((value, index) => {
            const x = startX + index * (barWidth + barSpacing);
            const barHeight = (value / maxValue) * (canvas.height - 60);
            const y = startY - barHeight;
            
            // Bar color based on value
            const intensity = value / maxValue;
            const color = `rgba(59, 130, 246, ${0.3 + intensity * 0.7})`;
            
            // Draw bar
            ctx.fillStyle = color;
            ctx.fillRect(x, y, barWidth, barHeight);
            
            // Draw value label
            ctx.fillStyle = '#E0E0E0';
            ctx.font = '12px monospace';
            ctx.textAlign = 'center';
            ctx.fillText(value + 'h', x + barWidth / 2, y - 5);
            
            // Draw day label
            ctx.fillStyle = '#A0A0A0';
            ctx.font = '10px monospace';
            ctx.fillText(days[index], x + barWidth / 2, startY + 15);
        });
    }

    createGradeTrendsChart() {
        const canvas = document.getElementById('gradeTrendsChart');
        if (!canvas) return;

        const ctx = canvas.getContext('2d');
        
        // Create a simple line chart using canvas
        const data = [85, 88, 92, 87, 90, 94, 89]; // Grades over time
        const maxGrade = 100;
        
        // Clear canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        // Draw grid lines
        ctx.strokeStyle = '#2D2D2D';
        ctx.lineWidth = 1;
        for (let i = 0; i <= 4; i++) {
            const y = 20 + i * 40;
            ctx.beginPath();
            ctx.moveTo(20, y);
            ctx.lineTo(canvas.width - 20, y);
            ctx.stroke();
            
            // Draw grade labels
            ctx.fillStyle = '#858585';
            ctx.font = '10px monospace';
            ctx.textAlign = 'right';
            ctx.fillText(maxGrade - i * 20, 15, y + 3);
        }
        
        // Draw line chart
        ctx.strokeStyle = '#22C55E';
        ctx.lineWidth = 2;
        ctx.beginPath();
        
        data.forEach((value, index) => {
            const x = 20 + index * ((canvas.width - 40) / (data.length - 1));
            const y = 20 + ((maxGrade - value) / maxGrade) * 160;
            
            if (index === 0) {
                ctx.moveTo(x, y);
            } else {
                ctx.lineTo(x, y);
            }
            
            // Draw data points
            ctx.fillStyle = '#22C55E';
            ctx.beginPath();
            ctx.arc(x, y, 4, 0, 2 * Math.PI);
            ctx.fill();
        });
        
        ctx.stroke();
    }

    updateCharts() {
        // Update charts based on current time filter
        if (this.currentTimeFilter === 'week') {
            this.updateStudyTimeData([4, 6, 3, 8, 5, 7, 2]);
            this.updateGradeTrendsData([85, 88, 92, 87, 90, 94, 89]);
        } else if (this.currentTimeFilter === 'month') {
            this.updateStudyTimeData([120, 135, 98, 156, 142, 167, 134, 145, 178, 156, 134, 145, 167, 134, 145, 178, 156, 134, 145, 167, 134, 145, 178, 156, 134, 145, 167, 134, 145, 178]);
            this.updateGradeTrendsData([85, 87, 89, 91, 88, 90, 92, 89, 91, 93, 90, 92, 94, 91, 93, 95, 92, 94, 96, 93, 95, 97, 94, 96, 98, 95, 97, 99, 96, 98]);
        } else if (this.currentTimeFilter === 'semester') {
            this.updateStudyTimeData([480, 520, 490, 540, 510, 560, 530, 580, 550, 600, 570, 620, 590, 640, 610, 660, 630, 680, 650, 700]);
            this.updateGradeTrendsData([82, 84, 86, 88, 85, 87, 89, 86, 88, 90, 87, 89, 91, 88, 90, 92, 89, 91, 93, 90]);
        }
        
        this.createStudyTimeChart();
        this.createGradeTrendsChart();
    }

    updateStudyTimeData(data) {
        // This would typically update the data source
        console.log('Updated study time data:', data);
    }

    updateGradeTrendsData(data) {
        // This would typically update the data source
        console.log('Updated grade trends data:', data);
    }

    setupProgressAnimations() {
        // Animate progress bars on scroll
        const progressBars = document.querySelectorAll('.progress-fill');
        
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const progressBar = entry.target;
                    const width = progressBar.style.width;
                    progressBar.style.width = '0%';
                    
                    setTimeout(() => {
                        progressBar.style.transition = 'width 1s ease-in-out';
                        progressBar.style.width = width;
                    }, 200);
                    
                    observer.unobserve(progressBar);
                }
            });
        }, { threshold: 0.5 });
        
        progressBars.forEach(bar => observer.observe(bar));
    }

    setupInteractiveElements() {
        // Add hover effects and interactions
        const cards = document.querySelectorAll('.progress-card, .course-card, .chart-card, .assignment-item, .achievement-card');
        
        cards.forEach(card => {
            card.addEventListener('mouseenter', () => {
                card.style.transform = 'translateY(-4px)';
                card.style.boxShadow = '0 8px 25px rgba(0, 0, 0, 0.6)';
            });
            
            card.addEventListener('mouseleave', () => {
                card.style.transform = 'translateY(0)';
                card.style.boxShadow = '';
            });
        });
    }

    updateDashboardData() {
        // Simulate real-time data updates
        setInterval(() => {
            this.updateStudyHours();
            this.updateAssignmentCount();
        }, 30000); // Update every 30 seconds
    }

    updateStudyHours() {
        const studyHoursElement = document.querySelector('.progress-card:nth-child(4) .progress-value');
        if (studyHoursElement) {
            const currentHours = parseInt(studyHoursElement.textContent);
            const newHours = currentHours + Math.floor(Math.random() * 2);
            studyHoursElement.textContent = newHours + 'h';
            
            // Update the change indicator
            const changeElement = studyHoursElement.nextElementSibling;
            if (changeElement) {
                changeElement.textContent = 'Updated just now';
                changeElement.style.color = '#22C55E';
                
                setTimeout(() => {
                    changeElement.textContent = 'This week';
                    changeElement.style.color = '#858585';
                }, 3000);
            }
        }
    }

    updateAssignmentCount() {
        const assignmentCountElement = document.querySelector('.progress-card:nth-child(3) .progress-value');
        if (assignmentCountElement) {
            const currentCount = parseInt(assignmentCountElement.textContent);
            // Simulate assignment completion or new assignments
            if (Math.random() > 0.7) {
                const newCount = Math.max(0, currentCount - 1);
                assignmentCountElement.textContent = newCount;
                
                if (newCount < currentCount) {
                    this.showToast('Assignment completed! 🎉');
                }
            }
        }
    }

    showToast(message) {
        // Create toast notification
        const toast = document.createElement('div');
        toast.className = 'toast-notification';
        toast.textContent = message;
        
        // Style the toast
        Object.assign(toast.style, {
            position: 'fixed',
            top: '20px',
            right: '20px',
            background: '#1A1A1A',
            color: '#E0E0E0',
            padding: '12px 16px',
            borderRadius: '6px',
            border: '1px solid #2D2D2D',
            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.5)',
            zIndex: '1000',
            transform: 'translateX(100%)',
            transition: 'transform 0.3s ease',
            fontSize: '14px',
            fontWeight: '500'
        });
        
        document.body.appendChild(toast);
        
        // Animate in
        setTimeout(() => {
            toast.style.transform = 'translateX(0)';
        }, 100);
        
        // Remove after 3 seconds
        setTimeout(() => {
            toast.style.transform = 'translateX(100%)';
            setTimeout(() => {
                document.body.removeChild(toast);
            }, 300);
        }, 3000);
    }

    // Utility methods
    formatDate(date) {
        return new Intl.DateTimeFormat('en-US', {
            month: 'short',
            day: 'numeric',
            year: 'numeric'
        }).format(date);
    }

    calculateTimeAgo(date) {
        const now = new Date();
        const diff = now - date;
        const days = Math.floor(diff / (1000 * 60 * 60 * 24));
        
        if (days === 0) return 'Today';
        if (days === 1) return 'Yesterday';
        if (days < 7) return `${days} days ago`;
        if (days < 30) return `${Math.floor(days / 7)} weeks ago`;
        return `${Math.floor(days / 30)} months ago`;
    }
}

// Initialize dashboard when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
    const dashboard = new DashboardManager();
    
    // Make dashboard globally accessible for debugging
    window.dashboard = dashboard;
    
    // Add some sample data updates
    setTimeout(() => {
        dashboard.showToast('Dashboard loaded successfully! 🚀');
    }, 1000);
});

// Add keyboard shortcuts
document.addEventListener('keydown', (e) => {
    if (e.ctrlKey || e.metaKey) {
        switch(e.key) {
            case '1':
                e.preventDefault();
                document.querySelector('.progress-section')?.scrollIntoView({ behavior: 'smooth' });
                break;
            case '2':
                e.preventDefault();
                document.querySelector('.courses-section')?.scrollIntoView({ behavior: 'smooth' });
                break;
            case '3':
                e.preventDefault();
                document.querySelector('.assignments-section')?.scrollIntoView({ behavior: 'smooth' });
                break;
            case 'n':
                e.preventDefault();
                document.querySelector('.action-button')?.click();
                break;
        }
    }
});

// Add performance monitoring
window.addEventListener('load', () => {
    if ('performance' in window) {
        const loadTime = performance.timing.loadEventEnd - performance.timing.navigationStart;
        console.log(`Dashboard loaded in ${loadTime}ms`);
    }
});