script.js

document.addEventListener('DOMContentLoaded', () => {
    const speedEl = document.getElementById('speed');
    const temperatureEl = document.getElementById('temperature');
    const voltageEl = document.getElementById('voltage');
    const currentEl = document.getElementById('current');
    const distanceEl = document.getElementById('distance');
    const powerEl = document.getElementById('power');

    const wifiStatusEl = document.getElementById('wifi-status');
    const loraStatusEl = document.getElementById('lora-status');
    const emergencyBrakesStatusEl = document.getElementById('emergency-brakes-status');

    const logsEl = document.getElementById('logs');

    const startBtn = document.getElementById('start-btn');
    const stopBtn = document.getElementById('stop-btn');
    const speedSlider = document.getElementById('speed-slider');
    const speedValue = document.getElementById('speed-value');
    const resetBtn = document.getElementById('reset-btn');
    const emergencyBrakeBtn = document.getElementById('emergency-brake-btn');

    const modal = document.getElementById('confirmation-modal');
    const modalMessage = document.getElementById('modal-message');
    const modalConfirmBtn = document.getElementById('modal-confirm-btn');
    const modalCancelBtn = document.getElementById('modal-cancel-btn');

    let confirmCallback = null;

    const showConfirmation = (message, callback) => {
        modalMessage.textContent = message;
        confirmCallback = callback;
        modal.style.display = 'flex';
    };

    const hideConfirmation = () => {
        modal.style.display = 'none';
        confirmCallback = null;
    };

    modalConfirmBtn.addEventListener('click', () => {
        if (confirmCallback) {
            confirmCallback();
        }
        hideConfirmation();
    });

    modalCancelBtn.addEventListener('click', () => {
        hideConfirmation();
    });


    const createChart = (ctx, label) => {
        return new Chart(ctx, {
            type: 'line',
            data: {
                labels: [],
                datasets: [{
                    label: label,
                    data: [],
                    borderColor: '#00ffff',
                    backgroundColor: 'rgba(0, 255, 255, 0.2)',
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    x: {
                        ticks: { color: '#f0f0f0' }
                    },
                    y: {
                        ticks: { color: '#f0f0f0' }
                    }
                },
                plugins: {
                    legend: { labels: { color: '#f0f0f0' } }
                }
            }
        });
    };

    const speedChart = createChart(document.getElementById('speedChart').getContext('2d'), 'Speed (km/h)');
    const temperatureChart = createChart(document.getElementById('temperatureChart').getContext('2d'), 'Temperature (°C)');
    const powerChart = createChart(document.getElementById('powerChart').getContext('2d'), 'Power (W)');

    const addLog = (message) => {
        const li = document.createElement('li');
        li.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
        logsEl.prepend(li);
        if (logsEl.children.length > 20) {
            logsEl.removeChild(logsEl.lastChild);
        }
    };

    const updateChart = (chart, value) => {
        const now = new Date().toLocaleTimeString();
        chart.data.labels.push(now);
        chart.data.datasets[0].data.push(value);
        if (chart.data.labels.length > 10) {
            chart.data.labels.shift();
            chart.data.datasets[0].data.shift();
        }
        chart.update();
    };

    const simulateData = () => {
        const getStatus = () => {
            const rand = Math.random();
            if (rand < 0.1) return 'error';
            if (rand < 0.3) return 'warning';
            return 'ok';
        };

        const data = {
            speed: Math.random() * 1000,
            temperature: Math.random() * 100 + 20,
            voltage: Math.random() * 50 + 400,
            current: Math.random() * 100,
            distance: Math.random() * 1000,
            power: Math.random() * 5000,
            wifiStatus: getStatus(),
            loraStatus: getStatus(),
            emergencyBrakesStatus: getStatus(),
        };

        speedEl.textContent = `${data.speed.toFixed(2)} km/h`;
        speedSlider.value = data.speed;
        speedValue.textContent = `${data.speed.toFixed(2)} km/h`;
        temperatureEl.textContent = `${data.temperature.toFixed(2)} °C`;
        voltageEl.textContent = `${data.voltage.toFixed(2)} V`;
        currentEl.textContent = `${data.current.toFixed(2)} A`;
        distanceEl.textContent = `${data.distance.toFixed(2)} km`;
        powerEl.textContent = `${data.power.toFixed(2)} W`;

        wifiStatusEl.className = `status-indicator ${data.wifiStatus}`;
        loraStatusEl.className = `status-indicator ${data.loraStatus}`;
        emergencyBrakesStatusEl.className = `status-indicator ${data.emergencyBrakesStatus}`;

        updateChart(speedChart, data.speed);
        updateChart(temperatureChart, data.temperature);
        updateChart(powerChart, data.power);

        if (data.loraStatus === 'warning') addLog('Warning: Lora signal weak.');
        if (data.emergencyBrakesStatus === 'error') addLog('Alert: Emergency Brakes engaged!');
    };

    startBtn.addEventListener('click', () => {
        showConfirmation('Are you sure you want to start?', () => {
            addLog('Command: START');
        });
    });
    stopBtn.addEventListener('click', () => {
        showConfirmation('Are you sure you want to stop?', () => {
            addLog('Command: STOP');
        });
    });
    speedSlider.addEventListener('input', () => {
        const speed = parseFloat(speedSlider.value).toFixed(2);
        speedValue.textContent = `${speed} km/h`;
    });

    speedSlider.addEventListener('change', () => {
        showConfirmation('Are you sure you want to set the speed?', () => {
            const speed = parseFloat(speedSlider.value).toFixed(2);
            addLog(`Command: SET SPEED to ${speed} km/h`);
        });
    });
    resetBtn.addEventListener('click', () => {
        showConfirmation('Are you sure you want to reset?', () => {
            addLog('Command: RESET');
        });
    });
    emergencyBrakeBtn.addEventListener('click', () => {
        showConfirmation('Are you sure you want to engage the emergency brake?', () => {
            addLog('Command: EMERGENCY BRAKE');
        });
    });

    setInterval(simulateData, 2000);
    addLog('Dashboard initialized.');
});