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

352 lines
16 KiB
PHP

@extends('layouts.master')
@section('styles')
<style>
.card-body label {
font-size: 13px;
color: #6c757d;
}
.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;
}
/*
.table-selectable tbody tr {
cursor: pointer;
transition: 0.15s;
}
.table-selectable tbody tr:hover {
background-color: #f2f6ff;
}
.table-selectable tbody tr.selected {
background-color: #0d6efd !important;
color: #fff;
}
.table-selectable tbody tr.selected td {
color: #fff !important;
} */
</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">Daftar Pintu/Pos</h4>
<div class="table-responsive mb-2">
<table class="table table-bordered table-selectable" id="example" data-url="{{ route('getMember') }}">
<thead>
<tr>
<th class="p-3" width="5%">No.</th>
<th style="text-align: center;">Nama Pintu</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 ($Gate as $pintu)
@php
if ($pintu->jenis === 0 ) {
$jenis = 'Masuk';
} elseif ($pintu->jenis === 1) {
$jenis = 'Keluar';
}
$isManless = $pintu->manless === 1
? '<span class="d-inline-block rounded-circle bg-success" style="width:12px;height:12px;"></span>'
: '<span class="d-inline-block rounded-circle bg-danger" style="width:12px;height:12px;"></span>';
@endphp
<tr>
<td class="text-center">{{ $loop->iteration }}</td>
{{-- <td class="text-center" width="7%">{{ $pintu->id }}</td> --}}
<td>{{ $pintu->nama }} <strong> - ({{ $pintu->id }})</strong></td>
<td width="10%">{{
match($pintu->jenis) {
0 => 'Masuk',
1 => 'Keluar',
2 => 'Transit',
3 => 'Emergency',
default => '-'
}
}}</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%">
<a class="btn btn-warning btn-sm parameter-button" id="parameter" data-bs-toggle="modal" data-bs-target=".bd-ubah-modal-lg">Pos</a>
<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-center align-items-center mt-2">
<div>
<button class="btn btn-primary btn-sm add-button" data-bs-toggle="modal" data-bs-target=".bd-example-modal-lg">Tambah</button>
<button class="btn btn-warning btn-sm edit-button" id="btnEdit" data-bs-toggle="modal" data-bs-target=".bd-ubah-modal-lg">Ubah</button>
<button class="btn btn-danger btn-sm" id="btnDelete">Hapus</button>
<button class="btn btn-danger btn-sm" id="btnDelete">Detail</button>
</div>
</div>
<!-- ADD MEMMBER MODAL -->
{{-- @include('stiker.tambah-stiker')
@include('stiker.ubah-stiker') --}}
<!-- END MEMMBER MODAL -->
</div>
</div>
</div>
<div class="col-2">
</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/member/member-register.js') }}"></script>
<script>
$(document).ready(function () {
$(document).on('click', '.hardware-button', function () {
let row = $(this).closest('tr');
// kalau sudah ada baris edit, hapus dulu
$('.edit-row').remove();
let id = $(this).data('id');
let nama = $(this).data('nama');
// # base url tanpa parameter biar tidak dobel slash
let baseUrl = "{{ url('setup/master/gate-hardware') }}";
$.ajax({
url: baseUrl + "/" + id,
type: 'GET',
success: function (r) {
r = r || {};
console.log(r);
let colSpan = row.children('td').length;
// # daftar field yang ditampilkan (key database + label)
let fields = [
['printer1_avail', 'Printer Status'],
['printer1_conn', 'Printer Connection'],
['printer1_spd', 'Printer Speed/Baudrate'],
['printer1_dummy', 'Jarak Potong Kertas'],
['video1_avail', 'Kamera Status'],
['video1_conn', 'Kamera URL/Path'],
['sound_avail', 'Sound Status'],
['bg_avail', 'BGate Status'],
['bg_conn', 'BGate Connection'],
['bank_reader_avail', 'Reader BANK Status'],
['bank_reader_comm', 'Reader BANK Connection'],
['bank_reader_key', 'Reader BANK Key/Parameter'],
['smartcard_avail', 'Smartcard Status'],
['smartcard_speed', 'Smartcard Speed/Baudrate'],
['smartcard_port', 'Smartcard Port'],
];
let cards = '';
for (let i = 0; i < fields.length; i ++) {
let f1 = fields[i];
let val = r[f1[0]] ?? '';
cards += `
<div class="col-12 col-sm-6 col-lg-3 mb-2">
<div class="border rounded p-2 h-100">
<div class="fw-semibold text-muted text-label mb-1"><strong>${f1[1]}</strong></div>
<div>
<span class="view-mode">${formatValue(f1[0], r[f1[0]])}</span>
<input type="text"
class="form-control form-control-sm edit-mode d-none"
data-key="${f1[0]}"
data-orig="${esc(val)}"
value="${esc(val)}">
</div>
</div>
</div>
`;
}
let editHtml = `
<tr class="edit-row" data-id="${id}">
<td colspan="${colSpan}">
<div class="card shadow-sm">
<div class="card-header d-flex justify-content-between align-items-center">
<strong>Hardware Configuration - ${esc(nama)} (${esc(id)})</strong>
<div>
<button class="btn btn-sm btn-primary btn-edit">Edit</button>
<button class="btn btn-sm btn-success btn-save d-none">Save</button>
<button class="btn btn-sm btn-secondary btn-cancel d-none">Cancel</button>
</div>
</div>
<div class="card-body p-2">
<div class="row">
${cards}
</div>
</div>
</div>
</td>
</tr>
`;
row.after(editHtml);
},
error: function (xhr) {
console.error(xhr.responseText);
}
});
});
// MODE EDIT
$(document).on('click', '.btn-edit', function () {
$('.view-mode').addClass('d-none');
$('.edit-mode').removeClass('d-none');
$('.btn-edit').addClass('d-none');
$('.btn-save, .btn-cancel').removeClass('d-none');
});
// CANCEL
$(document).on('click', '.btn-cancel', function () {
// # kembalikan isian ke nilai semula
$('.edit-mode').each(function () {
$(this).val($(this).data('orig') ?? '');
});
$('.edit-mode').addClass('d-none');
$('.view-mode').removeClass('d-none');
$('.btn-save, .btn-cancel').addClass('d-none');
$('.btn-edit').removeClass('d-none');
});
// SAVE
$(document).on('click', '.btn-save', function () {
let dataToSend = {};
let gateId = $('.edit-row').data('id');
$('.edit-mode').each(function () {
let key = $(this).data('key');
dataToSend[key] = $(this).val();
});
console.log(dataToSend);
// # base url tanpa parameter biar tidak dobel slash
let baseUrl = "{{ url('setup/master/gate-hardware') }}";
$.ajax({
url: baseUrl + "/" + gateId,
type: "POST",
data: {
_token: "{{ csrf_token() }}",
_method: "PUT",
data: dataToSend
},
success: function (res) {
// # tampilkan ulang nilai yang baru disimpan
$('.edit-mode').each(function () {
let key = $(this).data('key');
let val = $(this).val();
$(this).data('orig', val);
$(this).siblings('.view-mode').html(formatValue(key, val));
});
$('.btn-cancel').click();
alert('Berhasil disimpan');
},
error: function (xhr) {
console.error(xhr.responseText);
alert('Gagal menyimpan. Cek koneksi / hubungi admin.');
}
});
});
// # amankan teks biar tanda kutip tidak merusak HTML
function esc(value) {
if (value === null || value === undefined) return '';
return String(value)
.replace(/&/g, '&amp;')
.replace(/"/g, '&quot;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;');
}
function formatValue(key, value) {
// kalau field *_avail kita kasih badge
if (key.includes('_avail')) {
if (value == 1) {
return `<span class="badge rounded-pill bg-success px-3">ON</span>`;
} else {
return `<span class="badge rounded-pill bg-danger px-3">OFF</span>`;
}
}
// default
if (value === null || value === undefined || value === '') {
return '-';
}
return esc(value);
}
});
</script>
@endsection