143 lines
4.6 KiB
PHP
143 lines
4.6 KiB
PHP
@extends('admin.layout.main')
|
|
|
|
@push('custom-resource')
|
|
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
|
|
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
|
|
@endpush
|
|
|
|
|
|
@section('content')
|
|
<main id="main" class="main">
|
|
|
|
<div class="pagetitle">
|
|
<h1>Aliran PAM {{ ucwords($deviceName) }}</h1>
|
|
<nav>
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Beranda</a></li>
|
|
<li class="breadcrumb-item">{{ ucwords($deviceName) }}</li>
|
|
</ol>
|
|
</nav>
|
|
</div><!-- End Page Title -->
|
|
|
|
<section class="section">
|
|
<div class="row">
|
|
|
|
<!-- Chart Jarak di Kiri -->
|
|
@if (!empty($distanceData))
|
|
<div class="col-lg-6">
|
|
<div class="card flex-fill w-100">
|
|
<div class="card-body">
|
|
<h5 class="card-title">
|
|
Distance
|
|
</h5>
|
|
<p class="text-muted small">
|
|
Data terakhir:
|
|
@if ($latestDistanceDate)
|
|
{{ $latestDistanceDate->translatedFormat('d M Y, H:i') }}
|
|
@else
|
|
Belum ada data
|
|
@endif
|
|
</p>
|
|
<div class="d-flex justify-content-end align-items-center">
|
|
<a href="{{ route('admin.pages.dataprint', ['deviceName' => $deviceName]) }}"
|
|
class="btn btn-link p-0 mx-2" data-toggle="tooltip" data-placement="top"
|
|
title="Download Data {{ $deviceName }}">
|
|
<i class="bi bi-file-earmark-arrow-down" style="font-size: 24px; color: #007bff;"></i>
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<div id="line-chart" style="height: 400px"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Chart Gauge Tekanan di Kanan -->
|
|
@if ($pressureLatest !== null)
|
|
<div class="col-lg-6">
|
|
<div class="card flex-fill w-100">
|
|
<div class="card-body">
|
|
<h5 class="card-title">
|
|
Pressure
|
|
</h5>
|
|
<p class="text-muted small">
|
|
Data terakhir:
|
|
@if ($pressureLatestDate)
|
|
{{ $pressureLatestDate->translatedFormat('d M Y, H:i') }}
|
|
@else
|
|
Belum ada data
|
|
@endif
|
|
</p>
|
|
<div id="gauge-chart" style="height: 400px"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
</div>
|
|
</section>
|
|
</main>
|
|
@endsection
|
|
|
|
|
|
@section('js')
|
|
@if (!empty($distanceData))
|
|
<script>
|
|
var chart = new ej.charts.Chart({
|
|
primaryXAxis: {
|
|
majorGridLines: { width: 0 },
|
|
valueType: 'Category'
|
|
},
|
|
primaryYAxis: {
|
|
majorGridLines: { width: 1, color: '#ededed' },
|
|
minimum: 0,
|
|
},
|
|
chartArea: {
|
|
border: { width: 0 },
|
|
},
|
|
tooltip: {
|
|
enable: true,
|
|
shared: false,
|
|
format: '${point.x}: ${point.y}',
|
|
},
|
|
series: [{
|
|
dataSource: JSON.parse(@json($distanceData)),
|
|
xName: 'day',
|
|
yName: 'value',
|
|
type: 'Line',
|
|
width: 4,
|
|
marker: {
|
|
visible: true,
|
|
width: 10,
|
|
height: 10
|
|
},
|
|
}],
|
|
});
|
|
chart.appendTo('#line-chart');
|
|
</script>
|
|
@endif
|
|
|
|
@if ($pressureLatest !== null)
|
|
<script>
|
|
var circulargauge = new ej.circulargauge.CircularGauge({
|
|
axes: [{
|
|
minimum: 0,
|
|
maximum: 20,
|
|
startAngle: 225,
|
|
endAngle: 135,
|
|
ranges: [
|
|
{ start: 0, end: 10, color: '#3cb449' },
|
|
{ start: 10, end: 14, color: '#f2e715' },
|
|
{ start: 14, end: 20, color: '#e52128' }
|
|
],
|
|
majorTicks: { width: 0 },
|
|
minorTicks: { width: 0 },
|
|
pointers: [{ value: {{ $pressureLatest }} }]
|
|
}]
|
|
});
|
|
circulargauge.appendTo('#gauge-chart');
|
|
</script>
|
|
@endif
|
|
@endsection
|