TIF_NGANJUK_E41211253/resources/views/admin/pages/datasensor.blade.php

93 lines
2.6 KiB
PHP

<!DOCTYPE html>
<html lang="en">
<head>
<title>Grafik 1 Minggu</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous">
</script>
<style>
.filter-buttons {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.filter-button {
background-color: #f0f0f0;
border: none;
padding: 10px 20px;
margin: 0 5px;
cursor: pointer;
font-size: 14px;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.filter-button:hover {
background-color: #d1d1d1;
}
.filter-button.active {
background-color: #007bff;
color: white;
}
</style>
@vite(['resources/js/sensor-data.js'])
</head>
<body>
<div class="container pt-5">
<div class="d-flex align-items-center justify-content-between">
<div class="font-weight-bold" id="device-name">
<h3>{{ $deviceName }}</h3>
</div>
<div class="filter-buttons">
@php
$filters = [
[
'by' => 'hour',
'label' => 'Per jam',
],
[
'by' => 'date',
'label' => 'Per hari',
],
[
'by' => 'month',
'label' => 'Per Bulan',
],
[
'by' => 'year',
'label' => 'Per Tahun',
],
];
@endphp
@foreach ($filters as $filter)
<button class="filter-button js-btn-filter"
data-by="{{ $filter['by'] }}">{{ $filter['label'] }}</button>
@endforeach
</div>
</div>
</div>
<div class="container mt-2">
<div id="container" style="height: 80vh">
</div>
<div id="element"></div>
</div>
</body>
</html>