171 lines
5.4 KiB
PHP
171 lines
5.4 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<title>Smart Chili Farm Dashboard</title>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="csrf-token" content="{{ csrf_token() }}">
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
|
|
<style>
|
|
body { background-color: #f4f6f9; }
|
|
.navbar { background-color: #2e7d32; }
|
|
.navbar-brand { color: white !important; font-weight: bold; }
|
|
.card { border-radius: 12px; }
|
|
.sensor-value { font-size: 28px; font-weight: bold; }
|
|
|
|
/* Thumbnail timelapse */
|
|
.small-img {
|
|
height: 70px;
|
|
width: 100%;
|
|
object-fit: cover;
|
|
border-radius: 8px;
|
|
display: block;
|
|
}
|
|
|
|
/* Gambar utama responsif */
|
|
.main-photo {
|
|
width: 100%;
|
|
height: auto;
|
|
max-height: 400px;
|
|
object-fit: cover;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
/* Info overlay di bawah foto */
|
|
.photo-meta {
|
|
background: #1a1a1a;
|
|
color: #e2e8f0;
|
|
border-radius: 0 0 8px 8px;
|
|
padding: 8px 14px;
|
|
font-size: 13px;
|
|
word-break: break-word;
|
|
}
|
|
|
|
/* Sensor value ukuran adaptif */
|
|
@media (max-width: 576px) {
|
|
.sensor-value { font-size: 22px; }
|
|
.small-img { height: 56px; }
|
|
.photo-meta { font-size: 11px; }
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<nav class="navbar navbar-expand-lg">
|
|
<div class="container-fluid">
|
|
<span class="navbar-brand">Smart Chili Farm Dashboard</span>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container mt-4 pb-4">
|
|
|
|
<div class="row g-3">
|
|
|
|
<!-- LEFT: Foto Utama -->
|
|
<div class="col-12 col-md-8">
|
|
<div class="card h-100">
|
|
<div class="card-header fw-semibold">Recent Photograph</div>
|
|
<div class="card-body p-0">
|
|
@if($image)
|
|
<img src="{{ asset('storage/'.$image->image_path) }}"
|
|
class="main-photo"
|
|
alt="Foto Tanaman">
|
|
<div class="photo-meta">
|
|
TEMP: {{ $data->suhu }}°C |
|
|
HUM: {{ $data->kelembapan }}% |
|
|
SOIL: {{ $data->soil }}% |
|
|
DATE: {{ $data->created_at }}
|
|
</div>
|
|
@else
|
|
<div class="p-4 text-center text-muted">No Image Available</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- RIGHT: Sensor + Timelapse -->
|
|
<div class="col-12 col-md-4">
|
|
|
|
<!-- Sensor Status -->
|
|
<div class="card mb-3">
|
|
<div class="card-header fw-semibold">Sensor Status</div>
|
|
<div class="card-body text-center py-3">
|
|
<p class="mb-1 text-muted small">Temperature</p>
|
|
<div class="sensor-value text-danger">{{ $data->suhu ?? 0 }}°C</div>
|
|
|
|
<p class="mt-3 mb-1 text-muted small">Humidity</p>
|
|
<div class="sensor-value text-success">{{ $data->kelembapan ?? 0 }}%</div>
|
|
|
|
<p class="mt-3 mb-1 text-muted small">Soil Moisture</p>
|
|
<div class="sensor-value text-primary">{{ $data->soil ?? 0 }}%</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Time-lapse -->
|
|
<div class="card">
|
|
<div class="card-header fw-semibold">Time-lapse Progress</div>
|
|
<div class="card-body">
|
|
<div class="row g-2">
|
|
@foreach($images as $img)
|
|
<div class="col-4">
|
|
<img src="{{ asset('storage/'.$img->image_path) }}"
|
|
class="small-img"
|
|
alt="timelapse">
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chart -->
|
|
<div class="card mt-3">
|
|
<div class="card-header fw-semibold">Temperature & Soil Chart</div>
|
|
<div class="card-body" style="position:relative; min-height:250px;">
|
|
<canvas id="sensorChart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
const ctx = document.getElementById('sensorChart');
|
|
new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: {!! json_encode($chartLabels) !!},
|
|
datasets: [
|
|
{
|
|
label: 'Temperature',
|
|
data: {!! json_encode($chartTemp) !!},
|
|
borderColor: 'red',
|
|
backgroundColor: 'rgba(255,0,0,0.05)',
|
|
fill: true,
|
|
tension: 0.4
|
|
},
|
|
{
|
|
label: 'Soil Moisture',
|
|
data: {!! json_encode($chartSoil) !!},
|
|
borderColor: 'green',
|
|
backgroundColor: 'rgba(0,128,0,0.05)',
|
|
fill: true,
|
|
tension: 0.4
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: true
|
|
}
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|