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