Lstm_prediction/lstm_prediction/resources/views/dashboard.blade.php

@extends('layouts.main')

@section('title', 'Dashboard Sensor')

@section('content')
    <div class="container mt-4">
        <div class="row">
            <div class="col-md-6">
                <div class="card p-3">
                    <h5 class="text-center">Data Sensor</h5>
                    <canvas id="sensorChart"></canvas>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card p-3">
                    <h5 class="text-center">Prediksi Data</h5>
                    <canvas id="predictionChart"></canvas>
                </div>
            </div>
        </div>

        <div class="row mt-4">
            <div class="col-md-6 offset-md-3">
                <div class="card p-3 text-center">
                    <h5>Prediksi Suhu & Kelembaban</h5>
                    <p><strong>Prediksi Suhu:</strong> <span id="predictedTemp">-</span> °C</p>
                    <p><strong>Prediksi Kelembaban:</strong> <span id="predictedHumidity">-</span> %</p>
                    <p><strong>Prediksi Tanggal Waktu:</strong> <span id="prediction_datetime">-</span></p>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        async function fetchData() {
            try {
                const {
                    data: sensorData
                } = await axios.get('/api/latest-sensor-data');
                const {
                    data: predictions
                } = await axios.get('/api/latest-predictions');

                const labels = sensorData.map(item => new Date(item.created_at).toLocaleTimeString()).reverse();
                const tempData = sensorData.map(item => item.temperature).reverse();
                const humidityData = sensorData.map(item => item.humidity).reverse();

                const predLabels = predictions.map(item => new Date(item.prediction_datetime).toLocaleTimeString())
                    .reverse();
                const predictedTemp = predictions.map(item => item.predicted_suhu).reverse();
                const predictedHumidity = predictions.map(item => item.predicted_kelembaban).reverse();

                updateChart(sensorChart, labels, tempData, humidityData);
                updateChart(predictionChart, predLabels, predictedTemp, predictedHumidity);

                if (predictions.length > 0) {
                    document.getElementById('predictedTemp').innerText = predictions[0].predicted_suhu ?? '-';
                    document.getElementById('predictedHumidity').innerText = predictions[0].predicted_kelembaban ?? '-';
                    document.getElementById('prediction_datetime').innerText = predictions[0].prediction_datetime
                }
            } catch (error) {
                console.error("Error fetching data:", error);
            }
        }

        function updateChart(chart, labels, data1, data2) {
            chart.data.labels = labels;
            chart.data.datasets[0].data = data1;
            chart.data.datasets[1].data = data2;
            chart.update();
        }

        const chartOptions = {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                tooltip: {
                    enabled: true,
                    mode: 'index',
                    intersect: false,
                    callbacks: {
                        label: function(tooltipItem) {
                            return `${tooltipItem.dataset.label}: ${tooltipItem.raw} ${tooltipItem.dataset.label.includes('Suhu') ? '°C' : '%'}`;
                        }
                    }
                },
                legend: {
                    display: true,
                    position: 'top'
                }
            },
            interaction: {
                mode: 'nearest',
                axis: 'x',
                intersect: false
            },
            elements: {
                point: {
                    radius: 5,
                    hoverRadius: 8,
                    backgroundColor: 'white',
                    borderWidth: 2
                }
            },
            scales: {
                x: {
                    ticks: {
                        autoSkip: true,
                        maxTicksLimit: 10
                    }
                }
            }
        };

        const sensorChart = new Chart(document.getElementById('sensorChart').getContext('2d'), {
            type: 'line',
            data: {
                labels: [],
                datasets: [{
                        label: 'Suhu (°C)',
                        data: [],
                        borderColor: 'red',
                        backgroundColor: 'rgba(255, 0, 0, 0.2)',
                        fill: true
                    },
                    {
                        label: 'Kelembaban (%)',
                        data: [],
                        borderColor: 'blue',
                        backgroundColor: 'rgba(0, 0, 255, 0.2)',
                        fill: true
                    }
                ]
            },
            options: chartOptions
        });

        const predictionChart = new Chart(document.getElementById('predictionChart').getContext('2d'), {
            type: 'line',
            data: {
                labels: [],
                datasets: [{
                        label: 'Prediksi Suhu (°C)',
                        data: [],
                        borderColor: 'orange',
                        backgroundColor: 'rgba(255, 165, 0, 0.2)',
                        fill: true
                    },
                    {
                        label: 'Prediksi Kelembaban (%)',
                        data: [],
                        borderColor: 'green',
                        backgroundColor: 'rgba(0, 255, 0, 0.2)',
                        fill: true
                    }
                ]
            },
            options: chartOptions
        });

        fetchData();
        setInterval(fetchData, 10000);
    </script>
@endsection