script.js

// Shared functionality for ESP32 dashboard

// Theme switcher functionality
document.addEventListener('DOMContentLoaded', () => {
    // Check for saved theme preference or use system preference
    if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
        document.documentElement.classList.add('dark');
    } else {
        document.documentElement.classList.remove('dark');
    }
});
// API Endpoints
const API_BASE_URL = 'https://api.thingspeak.com/channels/1234567/feeds.json'; // Replace with your actual API
const DEVICE_API_URL = 'http://esp32.local/api/status'; // Example local ESP32 API

// Fetch device status from API
async function fetchDeviceStatus() {
    try {
        const response = await fetch(API_BASE_URL);
        const data = await response.json();
        updateDashboard(data);
    } catch (error) {
        console.error('Error fetching API data:', error);
        // Fallback to local API
        try {
            const localResponse = await fetch(DEVICE_API_URL);
            const localData = await localResponse.json();
            updateDashboard(localData);
        } catch (localError) {
            console.error('Error fetching local device data:', localError);
        }
    }
}

// Update dashboard with API data
function updateDashboard(data) {
    // Update status cards
    document.querySelector('[data-status="wifi"]').textContent = 
        data.wifi_status === 1 ? 'Connected' : 'Disconnected';
    document.querySelector('[data-status="cpu"]').textContent = 
        `${data.cpu_usage}%`;
    document.querySelector('[data-status="memory"]').textContent = 
        `${data.memory_usage}%`;
    document.querySelector('[data-status="temperature"]').textContent = 
        `${data.temperature}°C`;

    // Update chart
    const chart = Chart.getChart('sensorChart');
    chart.data.labels = data.timestamps;
    chart.data.datasets[0].data = data.temperature_readings;
    chart.data.datasets[1].data = data.humidity_readings;
    chart.update();
}

// Initialize real-time updates
document.addEventListener('DOMContentLoaded', () => {
    fetchDeviceStatus();
    setInterval(fetchDeviceStatus, 5000); // Update every 5 seconds

    // Mock data for development
    const mockData = {
        wifi_status: 1,
        cpu_usage: Math.floor(Math.random() * 20) + 30,
        memory_usage: Math.floor(Math.random() * 20) + 60,
        temperature: Math.floor(Math.random() * 5) + 30,
        timestamps: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00', '00:00'],
        temperature_readings: [22, 21, 20, 22, 25, 26, 24, 23, 22],
        humidity_readings: [45, 46, 48, 42, 40, 38, 42, 44, 45]
    };
    updateDashboard(mockData);
});
// Toggle switches functionality
document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
        checkbox.addEventListener('change', (e) => {
            const device = e.target.closest('div').querySelector('h3').textContent;
            console.log(`${device} turned ${e.target.checked ? 'on' : 'off'}`);
        });
    });

    document.querySelectorAll('input[type="range"]').forEach(range => {
        range.addEventListener('input', (e) => {
            const control = e.target.closest('div').querySelector('h3').textContent;
            console.log(`${control} adjusted to ${e.target.value}%`);
        });
    });
});