195 lines
14 KiB
PHP
195 lines
14 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';
|
|
const btn = form.find('[type="submit"]'); const btnHtml = btn.html();
|
|
btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span>Menyimpan...');
|
|
$.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 => {
|
|
btn.prop('disabled', false).html(btnHtml);
|
|
Swal.fire({icon: 'error', title: 'Gagal menyimpan', text: 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', showLoaderOnConfirm: true, preConfirm: () => $.ajax({url: routes.destroy.replace(':id', encodeURIComponent(selected.vehicleId)), type:'DELETE', headers:{'X-CSRF-TOKEN':csrf}}).catch(xhr => { Swal.showValidationMessage(xhr.responseJSON?.message || 'Kendaraan tidak dapat dihapus.'); })}).then(result => { if (result.isConfirmed && result.value) { Swal.fire({icon: 'success', title: 'Berhasil', text: 'Kendaraan dihapus.', timer: 1500, showConfirmButton: false}).then(() => window.location.reload()); } }); });
|
|
$('#btnDetail').on('click', function () { if (!selected) return; const btn = $(this); const btnHtml = btn.html(); btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span>Memuat...'); $('#vehicle-detail-body').html('<div class="text-center py-3"><span class="spinner-border spinner-border-sm me-2"></span>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>`); }).fail(xhr => { $('#vehicle-detail-body').html('<div class="text-danger text-center">' + (xhr.responseJSON?.message || 'Gagal memuat detail.') + '</div>'); }).always(() => btn.prop('disabled', false).html(btnHtml)); });
|
|
});
|
|
</script>
|
|
|
|
@endsection
|