Files
backend_parkir/resources/views/setup/vehicle/vehicle.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

185 lines
13 KiB
PHP

@extends('layouts.master')
@section('styles')
<style>
.no-spinner::-webkit-inner-spin-button,
.no-spinner::-webkit-outer-spin-button,
.no-spinner-time::-webkit-inner-spin-button,
.no-spinner-time::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.card-body label {
font-size: 13px;
color: #6c757d;
}
input {
border: 2px solid #2251c7;
}
.card-body .form-control,
.card-body .form-select {
font-size: 14px;
}
#search-button {
font-weight: 600;
letter-spacing: .3px;
}
.table-garis, .garis {
border: 0.1px solid black; /* Sets a 1px solid black border */
border-collapse: collapse;
}
.text-label {
color: #000000;
}
.tes {
width: 100px;
}
</style>
@endsection
@section('content')
<!-- partial -->
<div class="container-fluid page-body-wrapper">
<div class="main-panel">
<div class="content-wrapper">
<div class="row">
<div class="col-2">
</div>
<div class="col-12 col-md-8 grid-margin justify-content-center stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">Master Kendaraan dan Tarif Parkir</h4>
<div class="table-responsive mb-2">
<table class="table table-bordered table-selectable" id="vehicle-table">
<thead>
<tr>
<th class="p-3" width="5%">No.</th>
<th style="text-align: center;">Jenis Kendaraan - <span class="fw-bold">(Shortcut)</span></th>
{{-- <th style="text-align: center;">Mode Pintu</th> --}}
{{-- <th style="text-align: center;">Grace Periode</th> --}}
{{-- <th style="text-align: center;">Manless?</th> --}}
<th style="text-align: center;">Pengaturan</th>
</tr>
</thead>
<tbody>
@foreach ($vehicle as $kendaraan)
<tr>
{{-- {{ dd($kendaraan) }} --}}
<td class="text-center">{{ $loop->iteration }}</td>
<td data-vehicle-id="{{ $kendaraan->id }}" data-vehicle-name="{{ $kendaraan->nama }}" data-vehicle-shortcut="{{ $kendaraan->short_cut }}">{{ $kendaraan->nama }} <strong> - ({{ $kendaraan->short_cut }})</strong></td>
{{-- <td width="10%">
</td> --}}
{{-- <td class="text-center" width="7%"><span class="d-inline-block rounded-circle
{{ $pintu->grace_period === 1 ? 'bg-success' : 'bg-danger' }}"
style="width:12px;height:12px;">
</span></td>
<td class="text-center" width="7%"><span class="d-inline-block rounded-circle
{{ $pintu->manless === 1 ? 'bg-success' : 'bg-danger' }}"
style="width:12px;height:12px;">
</span>
</td> --}}
<td class="text-center" width="12%">
<button class="btn btn-warning btn-sm vehicle-price" type="button" data-bs-toggle="modal" data-id="{{ $kendaraan->id}}" data-nama="{{ $kendaraan->nama}}" data-bs-target=".bd-price-modal-lg">Tarif</button>
{{-- <button class="btn btn-primary btn-sm hardware-button" data-id="{{ $pintu->id }}" data-nama="{{ $pintu->nama }}">Hardware</button> --}}
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
<div class="d-flex justify-content-between align-items-center mt-3">
<button class="btn btn-primary btn-sm" id="btnAddVehicle" type="button"><i class="fa fa-plus me-1"></i>Tambah</button>
<div class="d-flex gap-2">
<button class="btn btn-info btn-sm" id="btnDetail" type="button" disabled><i class="fa fa-circle-info me-1"></i>Detail</button>
<button class="btn btn-warning btn-sm" id="btnEditVehicle" type="button" disabled><i class="fa fa-pen me-1"></i>Ubah</button>
<button class="btn btn-danger btn-sm" id="btnDeleteVehicle" type="button" disabled><i class="fa fa-trash me-1"></i>Hapus</button>
</div>
</div>
<!-- ADD MEMMBER MODAL -->
{{-- @include('stiker.tambah-stiker')
@include('stiker.ubah-stiker') --}}
<!-- END MEMMBER MODAL -->
</div>
</div>
</div>
<div class="col-2">
<!-- ADD MEMMBER MODAL -->
@include('setup.vehicle.vehicleprice')
{{-- @include('stiker.ubah-stiker') --}}
<!-- END MEMMBER MODAL -->
</div>
</div>
</div>
</div>
<div class="modal fade" id="vehicle-detail-modal" tabindex="-1">
<div class="modal-dialog modal-dialog-centered"><div class="modal-content">
<div class="modal-header"><h5 class="modal-title">Detail Jenis Kendaraan</h5><button class="btn-close" data-bs-dismiss="modal"></button></div>
<div class="modal-body" id="vehicle-detail-body"></div>
</div></div>
</div>
</div>
@endsection
@section('javascript')
<!--********* Scripts *********-->
<!-- Datatable -->
<!--********* Scripts *********-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/metisMenu/3.0.7/metisMenu.min.js"></script>
<script src="{{asset ('vendor/moment/moment.min.js') }}"></script>
<script src="{{asset ('vendor/bootstrap-daterangepicker/daterangepicker.js') }}"></script>
<script src="{{asset ('vendor/bootstrap-select/dist/js/bootstrap-select.min.js') }}"></script>
<script src="{{asset ('vendor/sweetalert2/dist/sweetalert2.min.js') }}"></script>
<script src="{{asset ('js/custom.min.js') }}"></script>
<script src="{{asset ('js/dlabnav-init.js') }}"></script>
<script src="{{asset ('js/member/index.js') }}"></script>
{{-- <script src="{{asset ('js/setup/vehicle-price.js') }}"></script> --}}
<script src="{{asset ('js/setup/vehicle.js') }}"></script>
<script>
$(function () {
let selected = null;
const csrf = $('meta[name="csrf-token"]').attr('content');
const routes = {
store: '{{ route('vehicle.store', [], false) }}',
show: '{{ route('vehicle.show', ':id', false) }}',
update: '{{ route('vehicle.update', ':id', false) }}',
destroy: '{{ route('vehicle.destroy', ':id', false) }}'
};
function setSelected(row) {
$('#vehicle-table tbody tr').removeClass('table-active');
selected = row ? $(row).find('[data-vehicle-id]').data() : null;
if (row) $(row).addClass('table-active');
$('#btnDetail, #btnEditVehicle, #btnDeleteVehicle').prop('disabled', !selected);
}
function formRow(mode, vehicle) {
const isEdit = mode === 'edit';
return `<tr class="vehicle-form-row"><td colspan="3"><form class="vehicle-inline-form" data-mode="${mode}" data-id="${vehicle?.vehicleId || ''}"><div class="row g-2 align-items-end"><div class="col-md-2"><label class="form-label mb-1">ID</label><input class="form-control" name="id" maxlength="16" value="${vehicle?.vehicleId || ''}" ${isEdit ? 'readonly' : ''} required></div><div class="col-md-4"><label class="form-label mb-1">Nama Kendaraan</label><input class="form-control" name="nama" maxlength="100" value="${vehicle?.vehicleName || ''}" required></div><div class="col-md-2"><label class="form-label mb-1">Shortcut</label><input class="form-control text-uppercase" name="short_cut" maxlength="16" value="${vehicle?.vehicleShortcut || ''}" required></div>${isEdit ? '' : '<div class="col-md-2"><label class="form-label mb-1">Tarif Awal</label><input class="form-control" type="number" name="tarif" min="0" step="0.01" value="0" required></div>'}<div class="col-md-2 d-flex gap-2"><button class="btn btn-success" type="submit">Simpan</button><button class="btn btn-light border cancel-vehicle-form" type="button">Batal</button></div></div></form></td></tr>`;
}
$('#vehicle-table tbody').on('click', 'tr:not(.vehicle-form-row)', function () { setSelected(this); });
$('#btnAddVehicle').on('click', function () { $('.vehicle-form-row').remove(); $('#vehicle-table tbody').prepend(formRow('create')); setSelected(null); });
$('#btnEditVehicle').on('click', function () { if (!selected) return; $('.vehicle-form-row').remove(); $('#vehicle-table tbody tr').filter(function(){ return $(this).find('[data-vehicle-id]').data('vehicle-id') === selected.vehicleId; }).after(formRow('edit', selected)); });
$(document).on('click', '.cancel-vehicle-form', function () { $(this).closest('tr').remove(); });
$(document).on('submit', '.vehicle-inline-form', function (event) {
event.preventDefault(); const form = $(this); const id = form.data('id'); const edit = form.data('mode') === 'edit';
$.ajax({ url: edit ? routes.update.replace(':id', encodeURIComponent(id)) : routes.store, type: edit ? 'PUT' : 'POST', data: form.serialize(), headers: {'X-CSRF-TOKEN': csrf}, success: () => window.location.reload(), error: xhr => alert(xhr.responseJSON?.message || Object.values(xhr.responseJSON?.errors || {}).flat().join('\n') || 'Gagal menyimpan kendaraan.') });
});
$('#btnDeleteVehicle').on('click', function () { if (!selected) return; Swal.fire({title:'Hapus kendaraan?', text:`${selected.vehicleName} beserta tarif terkait akan dihapus.`, icon:'warning', showCancelButton:true, confirmButtonText:'Ya, hapus', cancelButtonText:'Batal', confirmButtonColor:'#dc3545'}).then(result => { if (!result.isConfirmed) return; $.ajax({url: routes.destroy.replace(':id', encodeURIComponent(selected.vehicleId)), type:'DELETE', headers:{'X-CSRF-TOKEN':csrf}, success:() => window.location.reload(), error:xhr => Swal.fire({icon:'error', title:'Gagal menghapus', text:xhr.responseJSON?.message || 'Kendaraan tidak dapat dihapus.'})}); }); });
$('#btnDetail').on('click', function () { if (!selected) return; $('#vehicle-detail-body').html('<div class="text-center py-3">Memuat detail...</div>'); new bootstrap.Modal(document.getElementById('vehicle-detail-modal')).show(); $.get(routes.show.replace(':id', encodeURIComponent(selected.vehicleId)), function(r) { const t = r.tarif; $('#vehicle-detail-body').html(`<dl class="row mb-0"><dt class="col-5">ID Kendaraan</dt><dd class="col-7">${r.data.id}</dd><dt class="col-5">Nama</dt><dd class="col-7">${r.data.nama}</dd><dt class="col-5">Shortcut</dt><dd class="col-7">${r.data.short_cut}</dd><dt class="col-5">Tarif Awal</dt><dd class="col-7">${t ? Number(t.tarif || 0).toLocaleString('id-ID') : '-'}</dd><dt class="col-5">Tarif Interval</dt><dd class="col-7">${t ? Number(t.tarif_interval || 0).toLocaleString('id-ID') : '-'}</dd><dt class="col-5">Waktu Gratis</dt><dd class="col-7">${t?.waktu_gratis ?? '-' } menit</dd></dl>`); }); });
});
</script>
@endsection