145 lines
5.4 KiB
PHP
145 lines
5.4 KiB
PHP
@extends('layouts.home')
|
|
|
|
@section('content')
|
|
<div class="container">
|
|
<h1 class="my-4">Daftar User - {{ $kelas->nama ?? 'Kelas ' . $kelas->nama_kelas }}</h1>
|
|
|
|
@if(isset($users) && $users->isNotEmpty())
|
|
<div class="table-responsive">
|
|
<table class="table table-light mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>NAME</th>
|
|
<th>ACTION</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach($users as $index => $user)
|
|
<tr>
|
|
<td>{{ $index + 1 }}</td>
|
|
<td> {{ $user->name }} </td>
|
|
|
|
<td>
|
|
<!-- Tombol Trigger Modal -->
|
|
<button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteModal{{ $user->id }}">
|
|
Hapus
|
|
</button>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="deleteModal{{ $user->id }}" tabindex="-1" aria-labelledby="modalLabel{{ $user->id }}" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<form action="{{ route('admin.destroy', $user->id) }}" method="POST">
|
|
@csrf
|
|
@method('DELETE')
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="modalLabel{{ $user->id }}">Konfirmasi Hapus</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
Apakah Anda yakin ingin menghapus user <strong>{{ $user->name }}</strong>?
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
|
|
<button type="submit" class="btn btn-danger">Hapus</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<button class="btn btn-primary" data-user-id="{{ $user->id }}" data-bs-toggle="modal" data-bs-target="#chartModal">
|
|
Lihat Grafik
|
|
</button>
|
|
<div class="modal fade" id="chartModal" tabindex="-1" aria-labelledby="chartModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Grafik Hasil Prediksi {{ $user->name }}</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<canvas id="predictionChart" width="400" height="200"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
@else
|
|
<p>Tidak ada user dalam kelas ini.</p>
|
|
@endif
|
|
</div>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script>
|
|
let chartInstance = null;
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const chartModal = document.getElementById('chartModal');
|
|
|
|
chartModal.addEventListener('show.bs.modal', function (event) {
|
|
const button = event.relatedTarget;
|
|
const userId = button.getAttribute('data-user-id');
|
|
|
|
fetch(`/prediction/chart-data/user/${userId}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
const labels = data.map(item => item.created_at);
|
|
const results = data.map(item => item.result);
|
|
|
|
const ctx = document.getElementById('predictionChart').getContext('2d');
|
|
|
|
if (chartInstance) chartInstance.destroy();
|
|
|
|
chartInstance = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: 'Hasil (%)',
|
|
data: results,
|
|
backgroundColor: 'rgba(54, 162, 235, 0.2)',
|
|
borderColor: 'rgba(54, 162, 235, 1)',
|
|
borderWidth: 2,
|
|
fill: true,
|
|
tension: 0.3,
|
|
}]
|
|
},
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
max: 100,
|
|
ticks: {
|
|
stepSize: 10,
|
|
callback: function(value) {
|
|
return value + '%';
|
|
}
|
|
}
|
|
}
|
|
},
|
|
plugins: {
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function(context) {
|
|
return `${context.raw}%`;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
|
|
@endsection
|