WD - Dev
262 lines
11 KiB
PHP
262 lines
11 KiB
PHP
<?php
|
|
$date = date('Y-m-d H:i:s');
|
|
$db = mysqli_query($con,"SELECT * FROM pelanggan WHERE id = '$page[1]'");
|
|
$isi = mysqli_fetch_assoc($db);
|
|
$user = $isi['akun'];
|
|
|
|
?>
|
|
<!-- Main content -->
|
|
<section class="content">
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header bg-secondary">
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<h5>Riwayat Aktif Koneksi</h5>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<div class="card">
|
|
<div class="p-2 border bg-light">
|
|
<div class="card-body">
|
|
<center>
|
|
<h6>Riwayat Aktif Koneksi</h6>
|
|
</center>
|
|
<?php
|
|
$sebelum = new DateTime();
|
|
$sebelum->modify('-1 month');
|
|
$bulanF = $sebelum->format('F');
|
|
$bulanM = $sebelum->format('m');
|
|
?>
|
|
<div style="display: flex; justify-content: space-between; align-items: center;">
|
|
<div>
|
|
<select id="monthSelect">
|
|
<option value="<?php echo date('m'); ?>"><?php echo date('F'); ?></option>
|
|
<option value="<?php echo $bulanM; ?>"><?php echo $bulanF; ?></option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<select id="timeFilter">
|
|
<option value="reset">Filter</option>
|
|
<option value="6">6 Jam Terakhir</option>
|
|
<option value="12">12 Jam Terakhir</option>
|
|
<option value="24">1 Hari Terakhir</option>
|
|
<option value="72">3 Hari Terakhir</option>
|
|
<option value="168">1 Minggu Terakhir</option>
|
|
<option value="336">2 Minggu Terakhir</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<canvas id="myChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<center>
|
|
<h6>Detail Pelanggan</h6>
|
|
<hr>
|
|
</center>
|
|
<table class="table table-borderless" style="zoom: 90%">
|
|
<tbody>
|
|
<tr>
|
|
<td style="min-width: 150px"><b>Id Pelanggan</b></td>
|
|
<td><?php echo $isi['akun']; ?></td>
|
|
</tr>
|
|
<tr>
|
|
<td><b>Nama</b></td>
|
|
<td><?php echo $isi['nama']; ?></td>
|
|
</tr>
|
|
<tr>
|
|
<td><b>Alamat</b></td>
|
|
<td><?php echo $isi['alamat']; ?></td>
|
|
</tr>
|
|
<tr>
|
|
<td><b>Nomor WhatsApp</b></td>
|
|
<td><?php echo $isi['nomor_whatsapp']; ?></td>
|
|
</tr>
|
|
</tbody>
|
|
</table><br>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="card direct-chat direct-chat-primary">
|
|
<div class="card-header bg-danger">
|
|
<h3 class="card-title">Riwayat Tiket Gangguan</h3>
|
|
<div class="card-tools">
|
|
<?php
|
|
$stmt = $pdo->prepare("SELECT COUNT(id) AS jumlahtiket FROM v_tiket_gangguan WHERE id_pelanggan = '$page[1]' ");
|
|
$stmt->execute();
|
|
$datatiket = $stmt->fetchAll();
|
|
?>
|
|
<span title="3 New Messages" class="badge badge-light"><?php echo $datatiket[0]['jumlahtiket']; ?></span>
|
|
</div>
|
|
</div>
|
|
<!-- /.card-header -->
|
|
<div class="card-body">
|
|
<div class="direct-chat-messages" style="height: 300px">
|
|
<?php
|
|
$stmt = $pdo->prepare("SELECT * FROM v_tiket_gangguan WHERE id_pelanggan = '$page[1]' ORDER BY start_time DESC");
|
|
$stmt->execute();
|
|
while ($data = $stmt->fetch(PDO::FETCH_ASSOC)) {
|
|
?>
|
|
<a href="?<?php echo encrypt_url('tiket_buat') ?>">
|
|
<div class="card p-2 text-dark" style="border-left: 8px solid red">
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<p class="m-0 text-danger"><?php echo $data['jenis_tiket']; ?></p>
|
|
<p class="m-0"><?php echo $data['nama_pelanggan'].' ('.$data['nama_server'].')'; ?></p>
|
|
<p class="m-0"><?php echo $data['start_time']; ?></p>
|
|
</div>
|
|
<div class="col-6 text-right">
|
|
<p class="m-0"><?php echo $data['permasalahan']; ?></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<?php } ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<script>
|
|
const ctx = document.getElementById('myChart').getContext('2d');
|
|
let myChart; // Initialize chart variable
|
|
let allData = null; // Variable untuk menyimpan semua data
|
|
|
|
// Fungsi untuk mengambil data dan menggambar chart
|
|
function fetchDataAndRenderChart(month) {
|
|
fetch(`load/data_monitoring_pelanggan.php?m=${month}&i=<?php echo $page[1]; ?>`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
allData = data; // Simpan data ke dalam variable allData
|
|
renderChart(data); // Panggil fungsi untuk menggambar chart
|
|
document.getElementById('timeFilter').value = 'reset';
|
|
})
|
|
.catch(error => {
|
|
console.error('Error fetching data:', error);
|
|
});
|
|
}
|
|
|
|
// Fungsi untuk menggambar chart berdasarkan data yang diberikan
|
|
function renderChart(data) {
|
|
const chartLabels = data.waktu.map(dateString => {
|
|
const date = new Date(dateString);
|
|
const options = { day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit' };
|
|
return date.toLocaleString('id-ID', options);
|
|
});
|
|
|
|
const chartData = data.status;
|
|
|
|
const chartConfig = {
|
|
type: 'line',
|
|
data: {
|
|
labels: chartLabels,
|
|
datasets: [
|
|
{
|
|
label: 'Koneksi',
|
|
data: chartData,
|
|
borderColor: 'green',
|
|
backgroundColor: 'rgba(4, 214, 46, 0.6)',
|
|
stepped: true,
|
|
fill: true
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
min: -0.3,
|
|
max: 5,
|
|
ticks: {
|
|
callback: function(value) {
|
|
return value === 0 ? 'OFF' : (value === 4 ? 'ON' : '');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
// Hancurkan instance chart sebelumnya jika ada
|
|
if (myChart) {
|
|
myChart.destroy();
|
|
}
|
|
|
|
// Buat instance chart baru
|
|
myChart = new Chart(ctx, chartConfig);
|
|
}
|
|
|
|
// Fungsi untuk memfilter data berdasarkan pilihan waktu
|
|
document.getElementById('timeFilter').addEventListener('change', function() {
|
|
const filterValue = this.value;
|
|
|
|
if (filterValue === 'reset') {
|
|
renderChart(allData); // Tampilkan data awal tanpa filter
|
|
} else {
|
|
const hoursToSubtract = parseInt(filterValue);
|
|
const cutoffDate = new Date();
|
|
|
|
// Ambil waktu terakhir dari data
|
|
if (allData && allData.waktu.length > 0) {
|
|
const lastDataDate = new Date(allData.waktu[allData.waktu.length - 1]);
|
|
const filterStartDate = new Date(lastDataDate);
|
|
filterStartDate.setHours(lastDataDate.getHours() - hoursToSubtract); // Hitung tanggal batas berdasarkan data terakhir
|
|
|
|
const filteredData = {
|
|
waktu: [],
|
|
status: []
|
|
};
|
|
|
|
// Filter data berdasarkan waktu terakhir yang diambil
|
|
allData.waktu.forEach((dateString, index) => {
|
|
const date = new Date(dateString);
|
|
if (date >= filterStartDate) {
|
|
filteredData.waktu.push(dateString);
|
|
filteredData.status.push(allData.status[index]);
|
|
}
|
|
});
|
|
|
|
// Jika hanya satu data yang ditemukan, tambahkan data awal
|
|
if (filteredData.waktu.length === 1) {
|
|
filteredData.waktu.unshift(filterStartDate.toISOString()); // Tambahkan data awal
|
|
filteredData.status.unshift(4); // Status untuk data awal
|
|
}
|
|
|
|
renderChart(filteredData); // Panggil fungsi untuk menggambar chart dengan data yang sudah difilter
|
|
}
|
|
}
|
|
});
|
|
|
|
// Ambil data awal untuk bulan saat ini saat halaman dimuat
|
|
const currentMonth = new Date().getMonth() + 1; // Ambil bulan saat ini (0-11)
|
|
fetchDataAndRenderChart(currentMonth < 10 ? '0' + currentMonth : currentMonth);
|
|
|
|
// Event listener untuk pemilihan bulan
|
|
document.getElementById('monthSelect').addEventListener('change', function() {
|
|
const selectedMonth = this.value;
|
|
fetchDataAndRenderChart(selectedMonth);
|
|
});
|
|
</script>
|