137 lines
4.6 KiB
PHP
137 lines
4.6 KiB
PHP
@extends('admin.layout.main')
|
|
|
|
@push('custom-resource')
|
|
<link href="{{ asset('/') }}syncfusion/material.css" rel="stylesheet">
|
|
<script src="{{ asset('/') }}syncfusion/ej2.min.js" type="text/javascript"></script>
|
|
<script src="{{ asset('/') }}syncfusion/syncfusion-helper.js" type="text/javascript"></script>
|
|
@endpush
|
|
|
|
@section('content')
|
|
<main id="main" class="main">
|
|
|
|
<div class="pagetitle">
|
|
<h1>Bak {{ $deviceName }}</h1>
|
|
<nav>
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Halaman Utama</a></li>
|
|
<li class="breadcrumb-item">{{ $deviceName }}</li>
|
|
</ol>
|
|
</nav>
|
|
</div><!-- End Page Title -->
|
|
|
|
<section class="section">
|
|
<div class="row">
|
|
|
|
<!-- Chart Jarak di Kiri -->
|
|
@if (!!$latest->distance)
|
|
<div class="col-lg-6">
|
|
<div class="card flex-fill w-100">
|
|
<div class="card-body">
|
|
<h5 class="card-title">
|
|
Distance
|
|
</h5>
|
|
<a href="{{ url('/sensor-data/' . $deviceName) }}" class="float-right" data-toggle="tooltip" data-placement="top" title="Lihat Selengkapnya">
|
|
<i class="bi bi-box-arrow-up-right"></i>
|
|
</a>
|
|
<a href="{{ route('admin.pages.cobahabib', ['device_name' => $deviceName]) }}" class="float-right" data-toggle="tooltip" data-placement="top" title="Download File">
|
|
<i class="file-earmark-arrow-down"></i>
|
|
</a>
|
|
|
|
<div>
|
|
<div id="line-chart" style="height: 400px"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
<!-- Chart Gauge Tekanan di Kanan -->
|
|
@if (!!$latest->pressure)
|
|
<div class="col-lg-6">
|
|
<div class="card flex-fill w-100">
|
|
<div class="card-body">
|
|
<h5 class="card-title">
|
|
Pressure
|
|
</h5>
|
|
<div id="gauge-chart" style="height: 400px"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</section>
|
|
</main>
|
|
@endsection
|
|
|
|
|
|
@section('js')
|
|
@if (!!$latest->distance)
|
|
<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,
|
|
},
|
|
},
|
|
series: [{
|
|
// dataSource for chart series
|
|
dataSource: JSON.parse('<?= $distanceLastWeek ?>'),
|
|
xName: 'day',
|
|
yName: 'value',
|
|
type: 'Line',
|
|
width: 4,
|
|
}],
|
|
});
|
|
chart.appendTo('#line-chart');
|
|
</script>
|
|
@endif
|
|
|
|
@if (!!$latest->pressure)
|
|
<script>
|
|
var circulargauge = new ej.circulargauge.CircularGauge({
|
|
axes: [{
|
|
minimum: 0,
|
|
maximum: 20,
|
|
startAngle: 270 - 45,
|
|
endAngle: 90 + 45,
|
|
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
|