TIF_NGANJUK_E41211253/resources/views/admin/pages/unit.blade.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