script.js

// IoT Monitoring Dashboard JavaScript
class IoTDashboard {
    constructor() {
        this.currentChart = null;
        this.powerChart = null;
        this.dataPoints = 50;
        this.updateInterval = null;

        this.init();
        this.initCharts();
        this.startRealTimeUpdates();
        this.bindEvents();
    }

    init() {
        // Initialize dashboard with sample data
        this.updateMetrics();
        this.updateDeviceStatuses();
    }

    initCharts() {
        // Current & Voltage Chart
        const currentVoltageCtx = document.getElementById('current-voltage-chart').getContext('2d');
        this.currentChart = new Chart(currentVoltageCtx, {
            type: 'line',
            data: {
                labels: this.generateTimeLabels(),
                datasets: [{
                    label: 'Current (A)',
                    data: this.generateRandomData(10, 15, this.dataPoints),
                    borderColor: '#ff006e',
                    backgroundColor: 'rgba(255, 0, 110, 0.1)',
                    borderWidth: 2,
                    fill: true,
                    tension: 0.4,
                    pointRadius: 0,
                    pointHoverRadius: 6
                }, {
                    label: 'Voltage (V)',
                    data: this.generateRandomData(218, 222, this.dataPoints),
                    borderColor: '#ffaa00',
                    backgroundColor: 'rgba(255, 170, 0, 0.1)',
                    borderWidth: 2,
                    fill: true,
                    tension: 0.4,
                    pointRadius: 0,
                    pointHoverRadius: 6
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'top',
                        labels: {
                            color: '#ffffff',
                            font: {
                                size: 12
                            }
                        }
                    }
                },
                scales: {
                    x: {
                        display: true,
                        grid: {
                            color: 'rgba(255, 255, 255, 0.1)'
                        },
                        ticks: {
                            color: '#a0a0a0',
                            font: {
                                size: 10
                            }
                        }
                    },
                    y: {
                        display: true,
                        grid: {
                            color: 'rgba(255, 255, 255, 0.1)'
                        },
                        ticks: {
                            color: '#a0a0a0',
                            font: {
                                size: 10
                            }
                        }
                    }
                },
                interaction: {
                    intersect: false,
                    mode: 'index'
                }
            }
        });

        // Power Consumption Chart
        const powerCtx = document.getElementById('power-chart').getContext('2d');
        this.powerChart = new Chart(powerCtx, {
            type: 'area',
            data: {
                labels: this.generateTimeLabels(),
                datasets: [{
                    label: 'Power (kW)',
                    data: this.generateRandomData(2, 4, this.dataPoints),
                    borderColor: '#7b2cbf',
                    backgroundColor: 'rgba(123, 44, 191, 0.2)',
                    borderWidth: 2,
                    fill: true,
                    tension: 0.4,
                    pointRadius: 0,
                    pointHoverRadius: 6
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'top',
                        labels: {
                            color: '#ffffff',
                            font: {
                                size: 12
                            }
                        }
                    }
                },
                scales: {
                    x: {
                        display: true,
                        grid: {
                            color: 'rgba(255, 255, 255, 0.1)'
                        },
                        ticks: {
                            color: '#a0a0a0',
                            font: {
                                size: 10
                            }
                        }
                    },
                    y: {
                        display: true,
                        grid: {
                            color: 'rgba(255, 255, 255, 0.1)'
                        },
                        ticks: {
                            color: '#a0a0a0',
                            font: {
                                size: 10
                            }
                        }
                    }
                }
            }
        });
    }

    generateTimeLabels() {
        const labels = [];
        const now = new Date();

        for (let i = this.dataPoints - 1; i >= 0; i--) {
            const time = new Date(now.getTime() - (i * 60000)); // Every minute
            labels.push(time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }));
        }

        return labels;
    }

    generateRandomData(min, max, points) {
        const data = [];
        let lastValue = (min + max) / 2;

        for (let i = 0; i < points; i++) {
            // Generate slightly random but mostly smooth data
            const change = (Math.random() - 0.5) * 0.5;
            lastValue += change;

            // Keep within bounds
            lastValue = Math.max(min, Math.min(max, lastValue));
            data.push(parseFloat(lastValue.toFixed(2)));
        }

        return data;
    }

    startRealTimeUpdates() {
        // Update every 3 seconds
        this.updateInterval = setInterval(() => {
            this.updateCharts();
            this.updateMetrics();
            this.updateDeviceStatuses();
        }, 3000);
    }

    updateCharts() {
        const currentTime = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });

        // Remove first element and add new one
        this.currentChart.data.labels.shift();
        this.currentChart.data.labels.push(currentTime);

        // Update current data
        this.currentChart.data.datasets[0].data.shift();
        const newCurrent = (10 + Math.random() * 5).toFixed(2);
        this.currentChart.data.datasets[0].data.push(parseFloat(newCurrent));

        // Update voltage data
        this.currentChart.data.datasets[1].data.shift();
        const newVoltage = (218 + Math.random() * 4).toFixed(2);
        this.currentChart.data.datasets[1].data.push(parseFloat(newVoltage));

        this.currentChart.update('none');

        // Update power chart
        this.powerChart.data.labels.shift();
        this.powerChart.data.labels.push(currentTime);

        this.powerChart.data.datasets[0].data.shift();
        const newPower = (2 + Math.random() * 2).toFixed(2);
        this.powerChart.data.datasets[0].data.push(parseFloat(newPower));

        this.powerChart.update('none');
    }

    updateMetrics() {
        // Update main metric cards
        const currentValue = (10 + Math.random() * 5).toFixed(1);
        const voltageValue = (218 + Math.random() * 4).toFixed(1);
        const tempValue = (20 + Math.random() * 10).toFixed(1);
        const powerValue = (2 + Math.random() * 2).toFixed(2);
        const efficiencyValue = (90 + Math.random() * 8).toFixed(1);

        document.getElementById('current-value').textContent = `${currentValue}A`;
        document.getElementById('voltage-value').textContent = `${voltageValue}V`;
        document.getElementById('temp-value').textContent = `${tempValue}°C`;
        document.getElementById('power-value').textContent = `${powerValue}kW`;
        document.getElementById('efficiency-value').textContent = `${efficiencyValue}%`;

        // Update trends
        this.updateTrends();
    }

    updateTrends() {
        const trends = document.querySelectorAll('.metric-trend');

        trends.forEach(trend => {
            const random = Math.random();
            let trendType, icon, text;

            if (random < 0.4) {
                trendType = 'up';
                icon = 'fa-arrow-up';
                text = `+${(Math.random() * 5).toFixed(1)}%`;
            } else if (random < 0.8) {
                trendType = 'down';
                icon = 'fa-arrow-down';
                text = `-${(Math.random() * 5).toFixed(1)}%`;
            } else {
                trendType = 'stable';
                icon = 'fa-minus';
                text = 'Stable';
            }

            trend.className = `metric-trend ${trendType}`;
            trend.innerHTML = `
                <i class="fas ${icon}"></i>
                <span>${text}</span>
            `;
        });
    }

    updateDeviceStatuses() {
        const devices = document.querySelectorAll('.device-card');

        devices.forEach((device, index) => {
            const statusElement = device.querySelector('.device-status');
            const random = Math.random();

            let status, statusClass;

            if (random < 0.7) {
                status = 'Online';
                statusClass = 'online';
            } else if (random < 0.9) {
                status = 'Warning';
                statusClass = 'warning';
            } else {
                status = 'Offline';
                statusClass = 'offline';
            }

            statusElement.className = `device-status ${statusClass}`;
            statusElement.innerHTML = `
                <i class="fas fa-circle"></i>
                ${status}
            `;

            // Update device metrics based on status
            if (status === 'Online') {
                const metrics = device.querySelectorAll('.metric-value');
                metrics[0].textContent = `${(8 + Math.random() * 8).toFixed(1)}A`;
                metrics[1].textContent = `${(218 + Math.random() * 4).toFixed(0)}V`;
                metrics[2].textContent = `${(20 + Math.random() * 15).toFixed(0)}°C`;
            } else if (status === 'Offline') {
                const metrics = device.querySelectorAll('.metric-value');
                metrics[0].textContent = '--';
                metrics[1].textContent = '--';
                metrics[2].textContent = '--';
            }
        });
    }

    bindEvents() {
        // Navigation switching
        const navItems = document.querySelectorAll('.nav-item');
        navItems.forEach(item => {
            item.addEventListener('click', (e) => {
                e.preventDefault();
                const page = item.getAttribute('data-page');

                // Handle external page navigation for devices
                if (page.startsWith('device')) {
                    this.navigateToDevicePage(page);
                    return;
                }

                // Update active navigation
                navItems.forEach(nav => nav.classList.remove('active'));
                item.classList.add('active');

                // Switch page content
                this.switchPage(page);
            });
        });

        // Time range buttons
        const timeRangeButtons = document.querySelectorAll('.time-range');
        timeRangeButtons.forEach(button => {
            button.addEventListener('click', () => {
                const range = button.getAttribute('data-range');
                this.updateTimeRange(range);
            });
        });

        // Device card clicks
        const deviceCards = document.querySelectorAll('.device-card');
        deviceCards.forEach(card => {
            card.addEventListener('click', () => {
                const deviceId = card.getAttribute('data-device');
                this.showDeviceDetails(deviceId);
            });
        });

        // Add device button
        const addDeviceBtn = document.querySelector('.add-device-btn');
        if (addDeviceBtn) {
            addDeviceBtn.addEventListener('click', () => {
                this.showAddDeviceModal();
            });
        }

        // Search functionality
        const searchInput = document.querySelector('.search-box input');
        if (searchInput) {
            searchInput.addEventListener('input', (e) => {
                this.filterDevices(e.target.value);
            });
        }
    }

    switchPage(page) {
        // Hide all pages
        const pages = document.querySelectorAll('[data-page-content]');
        pages.forEach(p => p.style.display = 'none');

        // Show selected page or default to dashboard
        let targetPage = document.querySelector(`[data-page-content="${page}"]`);
        if (!targetPage) {
            targetPage = document.getElementById('dashboard-page');
        }

        if (targetPage) {
            targetPage.style.display = 'block';

            // Add fade-in animation
            targetPage.style.opacity = '0';
            setTimeout(() => {
                targetPage.style.transition = 'opacity 0.3s ease-in-out';
                targetPage.style.opacity = '1';
            }, 50);
        }

        // Update charts if switching to dashboard
        if (page === 'dashboard') {
            setTimeout(() => {
                this.currentChart?.resize();
                this.powerChart?.resize();
            }, 100);
        }

        // Update URL without page reload
        this.updateURL(page);
    }

    navigateToDevicePage(deviceId) {
        // Map device IDs to page names
        const devicePages = {
            'device1': 'device1.html',
            'device2': 'device2.html',
            'device3': 'device3.html'
        };

        const pageName = devicePages[deviceId];
        if (pageName) {
            // Navigate to device page
            window.location.href = pageName;
        } else {
            this.showNotification('Device page not found!', 'error');
        }
    }

    updateURL(page) {
        // Update URL hash without triggering page reload
        if (page && page !== 'dashboard') {
            history.pushState({ page: page }, '', `#${page}`);
        } else {
            history.pushState({ page: 'dashboard' }, '', window.location.pathname);
        }
    }

    updateTimeRange(range) {
        // Update active button
        const buttons = document.querySelectorAll('.time-range');
        buttons.forEach(btn => btn.classList.remove('active'));

        const activeButton = document.querySelector(`[data-range="${range}"]`);
        if (activeButton) {
            activeButton.classList.add('active');
        }

        // Update data points based on range
        let multiplier = 1;
        switch(range) {
            case '1h':
                multiplier = 1;
                break;
            case '24h':
                multiplier = 24;
                break;
            case '7d':
                multiplier = 168; // 7 * 24
                break;
        }

        this.dataPoints = 50 * multiplier;

        // Regenerate charts with new data
        this.currentChart.data.labels = this.generateTimeLabels();
        this.currentChart.data.datasets[0].data = this.generateRandomData(10, 15, this.dataPoints);
        this.currentChart.data.datasets[1].data = this.generateRandomData(218, 222, this.dataPoints);
        this.currentChart.update();

        this.powerChart.data.labels = this.generateTimeLabels();
        this.powerChart.data.datasets[0].data = this.generateRandomData(2, 4, this.dataPoints);
        this.powerChart.update();
    }

    showDeviceDetails(deviceId) {
        // This would typically open a modal or navigate to a device details page
        console.log(`Showing details for ${deviceId}`);

        // For demo purposes, show an alert
        const deviceNames = {
            'device1': 'IoT Device 001',
            'device2': 'IoT Device 002',
            'device3': 'IoT Device 003'
        };

        alert(`Opening details for ${deviceNames[deviceId] || deviceId}`);
    }

    showAddDeviceModal() {
        // Simple prompt for demo
        const deviceName = prompt('Enter device name:');
        const deviceType = prompt('Enter device type (e.g., Server, Desktop, Mobile):');

        if (deviceName && deviceType) {
            this.addNewDevice(deviceName, deviceType);
        }
    }

    addNewDevice(name, type) {
        const devicesContainer = document.querySelector('.devices-container');
        const deviceCard = document.createElement('div');
        deviceCard.className = 'device-card';
        deviceCard.setAttribute('data-device', `device${Date.now()}`);

        const iconMap = {
            'server': 'fas fa-server',
            'desktop': 'fas fa-desktop',
            'mobile': 'fas fa-mobile-alt'
        };

        const icon = iconMap[type.toLowerCase()] || 'fas fa-microchip';

        deviceCard.innerHTML = `
            <div class="device-header">
                <div class="device-icon">
                    <i class="${icon}"></i>
                </div>
                <div class="device-info">
                    <h4>${name}</h4>
                    <p class="device-location">Auto-detected Location</p>
                </div>
                <div class="device-status online">
                    <i class="fas fa-circle"></i>
                    Online
                </div>
            </div>
            <div class="device-metrics">
                <div class="metric">
                    <span class="metric-label">Current</span>
                    <span class="metric-value">${(8 + Math.random() * 8).toFixed(1)}A</span>
                </div>
                <div class="metric">
                    <span class="metric-label">Voltage</span>
                    <span class="metric-value">${(218 + Math.random() * 4).toFixed(0)}V</span>
                </div>
                <div class="metric">
                    <span class="metric-label">Temp</span>
                    <span class="metric-value">${(20 + Math.random() * 15).toFixed(0)}°C</span>
                </div>
            </div>
            <div class="device-actions">
                <button class="btn btn-primary">View Details</button>
                <button class="btn btn-secondary">Configure</button>
            </div>
        `;

        devicesContainer.appendChild(deviceCard);

        // Animate in
        deviceCard.style.opacity = '0';
        deviceCard.style.transform = 'translateY(20px)';

        setTimeout(() => {
            deviceCard.style.transition = 'all 0.3s ease-out';
            deviceCard.style.opacity = '1';
            deviceCard.style.transform = 'translateY(0)';
        }, 100);

        // Bind click event to new device
        deviceCard.addEventListener('click', () => {
            const deviceId = deviceCard.getAttribute('data-device');
            this.showDeviceDetails(deviceId);
        });
    }

    filterDevices(query) {
        const devices = document.querySelectorAll('.device-card');

        devices.forEach(device => {
            const deviceName = device.querySelector('h4').textContent.toLowerCase();
            const deviceLocation = device.querySelector('.device-location').textContent.toLowerCase();

            if (deviceName.includes(query.toLowerCase()) || deviceLocation.includes(query.toLowerCase())) {
                device.style.display = 'block';
            } else {
                device.style.display = 'none';
            }
        });
    }

    // Notification system
    showNotification(message, type = 'info') {
        const notification = document.createElement('div');
        notification.className = `notification notification-${type}`;
        notification.innerHTML = `
            <i class="fas fa-info-circle"></i>
            <span>${message}</span>
        `;

        document.body.appendChild(notification);

        // Auto remove after 3 seconds
        setTimeout(() => {
            notification.remove();
        }, 3000);
    }

    // Handle browser back/forward navigation
    handlePopState(event) {
        const page = event.state ? event.state.page : 'dashboard';
        this.switchPage(page);

        // Update active navigation
        const navItems = document.querySelectorAll('.nav-item');
        navItems.forEach(nav => nav.classList.remove('active'));

        const activeNav = document.querySelector(`[data-page="${page}"]`);
        if (activeNav) {
            activeNav.classList.add('active');
        }
    }
}

// Initialize dashboard when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
    window.iotDashboard = new IoTDashboard();

    // Handle browser back/forward navigation
    window.addEventListener('popstate', (event) => {
        const page = event.state ? event.state.page : 'dashboard';
        window.iotDashboard.switchPage(page);

        // Update active navigation
        const navItems = document.querySelectorAll('.nav-item');
        navItems.forEach(nav => nav.classList.remove('active'));

        const activeNav = document.querySelector(`[data-page="${page}"]`);
        if (activeNav) {
            activeNav.classList.add('active');
        }
    });
});

// Add some additional interactive features
document.addEventListener('DOMContentLoaded', () => {
    // Add hover effects to cards
    const cards = document.querySelectorAll('.card, .device-card');

    cards.forEach(card => {
        card.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-5px)';
        });

        card.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0)';
        });
    });

    // Add click effects to buttons
    const buttons = document.querySelectorAll('.btn');

    buttons.forEach(button => {
        button.addEventListener('click', function(e) {
            // Create ripple effect
            const ripple = document.createElement('span');
            const rect = this.getBoundingClientRect();
            const size = Math.max(rect.width, rect.height);
            const x = e.clientX - rect.left - size / 2;
            const y = e.clientY - rect.top - size / 2;

            ripple.style.width = ripple.style.height = size + 'px';
            ripple.style.left = x + 'px';
            ripple.style.top = y + 'px';
            ripple.classList.add('ripple');

            this.appendChild(ripple);

            setTimeout(() => {
                ripple.remove();
            }, 600);
        });
    });
});

// CSS for ripple effect
const rippleCSS = `
.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: scale(0);
    animation: ripple-animation 0.6s linear;
    pointer-events: none;
}

@keyframes ripple-animation {
    to {
        transform: scale(4);
        opacity: 0;
    }
}
`;

// Add ripple CSS to document
const style = document.createElement('style');
style.textContent = rippleCSS;
document.head.appendChild(style);