Files
backend_parkir/resources/views/livewire/space.blade.php
T
pand03-CEOandClaude Sonnet 5 2a9b28581c Rapihin setup/member/lot-parking + fitur intercom, exclude WIP controller & file sampah dari git
Kumpulan perubahan yang udah numpuk di working tree: refactor Setup
(Gate/Vehicle/Member), rapihin memberin & stiker, service parking baru
(ParkingUtilsServices, NetworkService), model/migration lot-parking &
DHCP reservation, dan fitur baru Intercom (controller/model/migration/
view).

ReportTransaksiController versi lokal ini WIP (~90%, masih didebug) -
versi yang bener ada di server, jadi dikeluarin dari git (ditambahin
ke .gitignore) biar gak numpuk nindihin punya server pas git pull di
sana. Sekalian keluarin dump mentah tabel softseting (1.8MB, nyasar
ke-commit), file .bak, dan arsip ad-hoc (api.tgz, c.zip) yang emang
bukan source code.

Co-Authored-By: Claude Sonnet 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01EAJc2mrpj2cSTe4oowLPzQ
2026-10-04 07:15:54 +07:00

201 lines
8.9 KiB
PHP

@extends('layouts.master')
@section('title', 'Parking Space Information')
@section('styles')
<!-- Treeview Css -->
{{-- <link rel="stylesheet" href="{{asset('build/assets/libs/js-treeview/treeview.min.css')}}"> --}}
<style>
.img-container {
display: flex;
flex-wrap: wrap;
}
.img-item {
flex: 1 0 8.33%; /* 100% / 12 = 8.33% */
max-width: 8.33%;
padding: 5px;
}
.img-item img {
width: 100%;
height: auto;
/* display: block;
margin-top: 10px; */
}
.img-item span {
display: block;
margin-top: 10px; /* Atur jarak antara gambar dan teks jika diperlukan */
}
</style>
@endsection
@section('content')
<!-- PAGE-HEADER -->
<!--<div class="page-header d-flex align-items-center justify-content-between border-bottom mb-4">
<h1 class="page-title">Parking Lot Space</h1>
<div>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="javascript:void(0);">Admin UI</a></li>
<li class="breadcrumb-item active" aria-current="page">Treeview</li>
</ol>
</div>
</div>-->
<!-- PAGE-HEADER END -->
<!-- CONTAINER -->
<div class="main-container container-fluid">
<!-- CONTAINER -->
{{-- <div class="main-container container-fluid">
<!-- ROW OPEN -->
<div class="row">
<div class="col-md-12">
<div class="card mg-b-20">
<div class="card-header">
<div class="card-title">
<h3 class="card-title">Lot Parking</h3>
</div>
</div>
<div class="card-body">
<div class="row">
<!-- Konten akan diperbarui oleh AJAX -->
</div>
</div>
</div>
</div>
</div>
<!-- ROW CLOSED -->
</div> --}}
<!-- ROW OPEN -->
<div class="row">
<div class="col-md-12">
<div class="card mg-b-20">
<div class="card-header">
<div class="card-title">
<h3 class="card-title">Lot Parking</h3>
</div>
</div>
<div class="card-body">
<div class="row" id="lot-space">
</div>
</div>
</div>
</div>
</div>
<!-- ROW CLOSED -->
{{-- <!-- ROW OPEN -->
<div class="row">
<div class="col-md-12">
<div class="card mg-b-20">
<div class="card-header">
<div class="card-title">
<h3 class="card-title">Treeview</h3>
</div>
</div>
<div class="card-body">
<div class="card-content">
<div class="row">
@foreach ($parkingDataByArea as $areaData)
<h3>Lantai: {{ $areaData['lantai'] }}</h3>
<div class="col-sm-12 col-md-12 col-lg-12 col-xl-3">
<div class="d-flex flex-wrap gap-2">
@foreach ($areaData['data'] as $log)
<div class="m-2">
@if ($log->status == 1)
<span class="avatar avatar-md bradius cover-image" data-bs-image-src="{{ asset('images/lot/red_car.png') }}"></span>
<li>Lot Number: {{ $log->lot_number }} - Status: {{ $log->status }}</li>
@else
<span class="avatar avatar-md bradius cover-image" data-bs-image-src="{{ asset('images/lot/green_car.png') }}"></span>
<li>Lot Number: {{ $log->lot_number }} - Status: {{ $log->status }}</li>
@endif
</div>
@endforeach
</div>
</div>
@endforeach
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ROW CLOSED --> --}}
</div>
<!-- CONTAINER END -->
@endsection
@section('javascript')
<!-- Tambahkan ini dalam template blade Anda -->
<script>
document.addEventListener('DOMContentLoaded', function () {
function fetchParkingData() {
fetch('{{ route("parking-lot.data") }}')
.then(response => {
if (!response.ok) {
throw new Error('HTTP Error: ' + response.status);
}
return response.json();
})
.then(data => {
const container = document.getElementById('lot-space');
container.innerHTML = '';
data.forEach(function (areaData) {
let html = `
<div class="col-md-6 card-content mb-5 px-3">
<h3 class="text-center">
Parking Space : ${areaData.lantai}
</h3>
<div class="container mt-3">
<div class="row img-container">
`;
areaData.data.forEach(function (log) {
const image = log.status == 1
? '{{ asset("images/lot/red_car.png") }}'
: '{{ asset("images/lot/green_car.png") }}';
html += `
<div class="col-md-6 img-item">
<img src="${image}" alt="${log.status == 1 ? 'Red Car' : 'Green Car'}">
<span class="d-block">${log.lot_number}</span>
</div>
`;
});
html += `
</div>
</div>
</div>
`;
container.insertAdjacentHTML('beforeend', html);
});
})
.catch(error => {
console.error('Error fetching parking data:', error);
});
}
// Load pertama kali
fetchParkingData();
// Refresh setiap 5 detik
setInterval(fetchParkingData, 5000);
});
</script>
@endsection