182 lines
8.7 KiB
PHP
182 lines
8.7 KiB
PHP
@extends('layouts.master')
|
|
@section('title')
|
|
@lang('translation.dashboards')
|
|
@endsection
|
|
@section('css')
|
|
<link href="{{ URL::asset('build/libs/jsvectormap/css/jsvectormap.min.css') }}" rel="stylesheet" type="text/css" />
|
|
<link href="{{ URL::asset('build/libs/swiper/swiper-bundle.min.css') }}" rel="stylesheet" type="text/css" />
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
|
|
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
|
|
@endsection
|
|
@section('content')
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card overflow-hidden">
|
|
<div class="card-body bg-marketplace">
|
|
<div class="row mx-1">
|
|
<div class="col-12 col-lg-8">
|
|
<h4 class="fs-18 lh-base mb-0 mt-2">Selamat datang! Anda masuk sebagai <span
|
|
class="text-success">{{ Auth::user()->name }}.</span> </h4>
|
|
<p class="mb-0 mt-2 pt-1 text-muted">Platform ini dirancang untuk memantau dan kontrol lampu otomatis</p>
|
|
</div>
|
|
<div class="col-0 col-lg-2"></div>
|
|
<div class="col-12 col-lg-2 mt-4 mt-md-0 align-content-center">
|
|
<form action="javascript:void(0);">
|
|
<div class="row g-3 mb-0 align-items-center justify-content-between">
|
|
<div class="col-sm-auto">
|
|
<br>
|
|
<h2 id="realTime" class="h2 text-dark">00:00:00</h2>
|
|
<script type='text/javascript'>
|
|
var months = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober',
|
|
'November', 'Desember'
|
|
];
|
|
var myDays = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jum'at', 'Sabtu'];
|
|
var date = new Date();
|
|
var day = date.getDate();
|
|
var month = date.getMonth();
|
|
var thisDay = date.getDay(),
|
|
thisDay = myDays[thisDay];
|
|
var yy = date.getYear();
|
|
var year = (yy < 1000) ? yy + 1900 : yy;
|
|
document.write(thisDay + ', ' + day + ' ' + months[month] + ' ' + year);
|
|
|
|
function updateRealTime() {
|
|
var now = new Date();
|
|
var hours = now.getHours().toString().padStart(2, '0');
|
|
var minutes = now.getMinutes().toString().padStart(2, '0');
|
|
var seconds = now.getSeconds().toString().padStart(2, '0');
|
|
var timeString = hours + ':' + minutes + ':' + seconds;
|
|
document.getElementById('realTime').textContent = timeString;
|
|
}
|
|
setInterval(updateRealTime, 1000);
|
|
updateRealTime();
|
|
</script>
|
|
|
|
</div>
|
|
</div>
|
|
<!--end row-->
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!--end col-->
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-xl-12">
|
|
<div class="card crm-widget">
|
|
<div class="card-body p-0">
|
|
<div class="row row-cols-md-3 row-cols-1">
|
|
<div class="col col-lg border-end">
|
|
<div class="py-4 px-3">
|
|
<h5 class="text-muted text-uppercase fs-13">Kontrol Lampu
|
|
<div class="d-flex align-items-center">
|
|
<br>
|
|
<div class="flex-shrink-0">
|
|
<i class="ri-lightbulb-line display-6 text-muted"></i>
|
|
<div class="flex-grow-1 ml-3">
|
|
<form method="POST" action="{{ route('device.control') }}">
|
|
@csrf
|
|
<div class="btn-group material-shadow btn-group-lg" role="group" aria-label="Basic example">
|
|
<button type="submit" name="action" value="on" class="btn btn-success material-shadow-none">On</button>
|
|
<button type="submit" name="action" value="off" class="btn btn-danger material-shadow-none">Off</button>
|
|
<button type="submit" name="action" value="auto" class="btn btn-warning material-shadow-none">Auto</button>
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!-- end col -->
|
|
|
|
</div><!-- end row -->
|
|
|
|
</div><!-- end card body -->
|
|
</div><!-- end card -->
|
|
</div><!-- end col -->
|
|
</div><!-- end row -->
|
|
<div class="row">
|
|
|
|
|
|
<div class="col-xl-12">
|
|
<!-- card -->
|
|
<div class="card">
|
|
<div class="card-header align-items-center d-flex">
|
|
<h4 class="card-title mb-0 flex-grow-1"><i class="ri-sensor-fill me-1"></i>Riwayat Sensor</h4>
|
|
</div><!-- end card header -->
|
|
|
|
<div class="card-body">
|
|
<livewire:sensor-table />
|
|
|
|
|
|
</div><!-- end card body -->
|
|
</div><!-- end card -->
|
|
</div>
|
|
<!-- end col -->
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="h-100">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="card">
|
|
<div class="card-header align-items-center d-flex">
|
|
<h4 class="card-title mb-0 flex-grow-1"><i class="ri-lightbulb-line me-1"></i>Riwayat Lampu</h4>
|
|
</div><!-- end card header -->
|
|
|
|
<div class="card-body">
|
|
<livewire:lamp-table />
|
|
|
|
|
|
</div><!-- end card -->
|
|
</div>
|
|
<!-- end col -->
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div> <!-- end col -->
|
|
</div>
|
|
@endsection
|
|
@section('script')
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
$('.insert-btn').on('click', function() {
|
|
var customerId = $(this).data('customer-id');
|
|
var customerName = $(this).data('customer-name');
|
|
$('#formCustomerName').val(customerName);
|
|
$('#formCustomerId').val(customerId);
|
|
});
|
|
|
|
});
|
|
</script>
|
|
\
|
|
{{-- ini script untuk display 5 --}}
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
let rows = document.querySelectorAll("#minPressureTable tbody tr");
|
|
let showAllBtn = document.getElementById("showAllBtn");
|
|
|
|
rows.forEach((row, index) => {
|
|
if (index >= 5) {
|
|
row.style.display = "none";
|
|
}
|
|
});
|
|
|
|
|
|
});
|
|
</script>
|
|
|
|
<!-- apexcharts -->
|
|
<script src="{{ URL::asset('build/libs/apexcharts/apexcharts.min.js') }}"></script>
|
|
<script src="{{ URL::asset('build/libs/jsvectormap/js/jsvectormap.min.js') }}"></script>
|
|
<script src="{{ URL::asset('build/libs/jsvectormap/maps/world-merc.js') }}"></script>
|
|
<script src="{{ URL::asset('build/libs/swiper/swiper-bundle.min.js') }}"></script>
|
|
<!-- dashboard init -->
|
|
<script src="{{ URL::asset('build/js/pages/dashboard-nft.init.js') }}"></script>
|
|
<script src="{{ URL::asset('build/js/pages/dashboard-ecommerce.init.js') }}"></script>
|
|
|
|
@endsection
|