ajax index

<script>
// Variabel untuk menyimpan instance chart
let myChart;
let umpanElement = document.querySelector('.umpan');
let textElement = document.querySelector('.centered-text');

// Fungsi untuk membuat chart pertama kali
function createChart(data) {
    var ctx1 = document.getElementById("chart-line").getContext("2d");

    var gradientStroke1 = ctx1.createLinearGradient(0, 230, 0, 50);
    gradientStroke1.addColorStop(1, 'rgba(94, 114, 228, 0.2)');
    gradientStroke1.addColorStop(0.2, 'rgba(94, 114, 228, 0.0)');
    gradientStroke1.addColorStop(0, 'rgba(94, 114, 228, 0)');

    myChart = new Chart(ctx1, {
        type: "bar",
        data: {
            labels: data.labels,
            datasets: [{
                label: "Tikus",
                tension: 0.4,
                borderWidth: 1,
                borderColor: "#5e72e4",
                backgroundColor: "#5e72e4",
                borderWidth: 1,
                fill: true,
                data: data.values
            }],
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false,
                }
            },
            interaction: {
                intersect: false,
                mode: 'index',
            },
            scales: {
                y: {
                    grid: {
                        drawBorder: false,
                        display: true,
                        drawOnChartArea: true,
                        drawTicks: false,
                        borderDash: [5, 5]
                    },
                    ticks: {
                        display: true,
                        padding: 20,
                        color: '#ccc',
                        font: {
                            size: 16,
                            family: "Open Sans",
                            style: 'bold',
                            lineHeight: 2
                        },
                    }
                },
                x: {
                    grid: {
                        drawBorder: false,
                        display: false,
                        drawOnChartArea: false,
                        drawTicks: false,
                        borderDash: [5, 5]
                    },
                    ticks: {
                        display: true,
                        color: '#ccc',
                        padding: 20,
                        font: {
                            size: 16,
                            family: "Open Sans",
                            style: 'bold',
                            lineHeight: 2
                        },
                    }
                },
            },
        },
    });
}

// Fungsi untuk memperbarui data pada chart
function updateChart(data) {
    myChart.data.labels = data.labels;
    myChart.data.datasets[0].data = data.values;
    myChart.update();
}

function fetchDataAndUpdateTikusTertangkap() {
    $.ajax({
        url: '/tikus/public/getTikusTertangkapHariIni',
        type: 'GET',
        success: function (response) {
            let tikusTertangkap = response.tikus_tertangkap;
            $('#tikus-terjangkap-hari-ini').text(tikusTertangkap);
        }
    });
}

// Fungsi untuk memanggil ajax dan update chart setiap 5 detik
function fetchDataAndUpdateChart() {
    $.ajax({
        url: '/tikus/public/getDataTikus',
        type: 'GET',
        success: function (response) {
            let tikusData = response.tikus;
            let labels = [];
            let dataValues = [];
            let today = new Date();

            // Menghitung tanggal satu minggu yang lalu
            let oneWeekAgo = new Date(today.getTime() - (7 * 24 * 60 * 60 * 1000));

            tikusData.forEach(function (tikus) {
                let tanggal = new Date(tikus.date);
                // Menyesuaikan zona waktu dengan Asia/Jakarta
                tanggal.setTime(tanggal.getTime() + (tanggal.getTimezoneOffset() * 60 * 1000));
                if (tanggal >= oneWeekAgo && tanggal <= today) {
                    let formattedDate = tanggal.getDate() + '-' + (tanggal.getMonth() + 1) + '-' + tanggal.getFullYear();
                    labels.push(formattedDate);
                    dataValues.push(tikus.total);
                }
            });

            // Membuat chart jika belum ada
            if (!myChart) {
                createChart({ labels, values: dataValues });
            } else {
                // Memperbarui chart dengan data baru
                updateChart({ labels, values: dataValues });
            }
        }
    });
}


function updateUmpanHeightAndText(jarak) {
    let tinggiCm = Math.max(0, 10 - jarak); // Mengubah nilai dari 10 ke 0 cm
    let heightPercentage = tinggiCm * 10; // Mengonversi tinggi cm ke persen untuk elemen tangki

    // Mengubah tinggi background aqua
    umpanElement.style.height = heightPercentage + '%';

    // Mengubah teks persentase menjadi teks dalam cm
    textElement.innerText = tinggiCm + ' cm';
}

// function updateUmpanText(jarak) {
//      // Menghitung persentase tinggi berdasarkan jarak
// }

function fetchDataAndUpdateUmpan() {
    $.ajax({
        url: '/tikus/public/getDataTangki',
        type: 'GET',
        success: function (response) {
            let jarak = response.jarak; // Mengambil nilai jarak dari respons
            updateUmpanHeightAndText(jarak); // Memanggil fungsi untuk mengubah tinggi dan teks
        }
    });
}

function fetchDataAndUpdateCard() {
    $.ajax({
        url: '/tikus/public/getTotalUmpan',
        type: 'GET',
        success: function (response) {
            let jarak = response.jarak; // Mengambil nilai jarak dari respons
            let jarakWithText = jarak + " M"; // Menambahkan teks "Meter" setelah nilai jarak
            $('#totalUmpan').text(jarakWithText); 
        }
    });
}


// Memanggil fungsi fetchDataAndUpdateChart setiap 5 detik
setInterval(function () {
    fetchDataAndUpdateChart();
    fetchDataAndUpdateTikusTertangkap();
    fetchDataAndUpdateUmpan();
    fetchDataAndUpdateCard();
}, 5000);


// Memanggil fetchDataAndUpdateChart untuk pertama kali saat halaman dimuat
fetchDataAndUpdateChart();
fetchDataAndUpdateTikusTertangkap();
fetchDataAndUpdateUmpan();
fetchDataAndUpdateCard();
</script>