itcn/backend_parkir
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Melengkapi laporan semua transaksi

Browse Source
This commit is contained in:
pand03-CEO
2026-07-31 08:09:50 +07:00
parent 8bd2d0c542
commit d2e6f70bf6
12 changed files with 2252 additions and 689 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/report/all-report.blade.php
+53 -349
View File
@@ -2,6 +2,7 @@
@section('styles')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/css/bootstrap-datepicker3.min.css">
<style>
.table th {
text-align: center;
@@ -24,8 +25,10 @@
<div class="col d-flex align-items-center gap-2">
<div class="col-sm-2">
<input type="date" class="form-control" id="tanggalCari" name="tanggal_mulai" required>
<!--<input type="text" id="tanggalCari" ... style="display:none"> <!-- asli, hidden, format Y-m-d -->
<!--<input type="text" class="form-control flatpickr-input" ...>-->
</div>
<p class="mb-0 me-2 ms-auto">Harian</p>
<p class="mb-0 me-2 ms-auto">Harian</p>
<label class="toggle-switch toggle-switch-success">
<input type="checkbox" id="harianToggle" checked>
<span class="toggle-slider round" checked></span>
@@ -89,8 +92,8 @@
<div class="row">
<div class="col-md-5">
<h5 class="card-title text-center">Kendaraan yang masih menginap (Over Night)</h5>
<div class="table-bordered">
<table class="table table-on" id="cashless">
<div class="table-bordered mb-5">
<table class="table table-on" id="pn">
<thead>
<tr>
<th>Jenis Kend</th>
@@ -105,9 +108,45 @@
</div>
</div>
</div>
{{-- <h5 class="card-title text-center">Rekap Transaksi Kendaraan (Non Tunai)</h5>
<h5 class="card-title text-center">Rekap Transaksi Per Petugas</h5>
<div class="table-bordered mb-5">
<table class="table table-striped" id="petugas">
<thead>
<tr>
<th rowspan="2" colspan="2">Nama Petugas
<th colspan="2">Jenis Transaksi</th>
<th colspan="2">Casual</th>
<th colspan="2">Tiket Hilang</th>
<th colspan="2">Member</th>
<th colspan="2">Manual Input</th>
<th colspan="2">Manual Mix</th>
<th colspan="2">Tiket Masalah</th>
<th rowspan="2">Pendapatan</th>
</tr>
<tr>
<th>Masuk</th>
<th>Keluar</th>
<th>JML</th>
<th>Nilai</th>
<th>JML</th>
<th>Nilai</th>
<th>JML</th>
<th>Nilai</th>
<th>JML</th>
<th>Nilai</th>
<th>JML</th>
<th>Nilai</th>
<th>JML</th>
<th>Nilai</th>
</tr>
</thead>
<tbody id="officer-data">
</tbody>
</table>
</div>
<h5 class="card-title text-center">Rekap Transaksi Per Pembayaran</h5>
<div class="table-bordered">
<table class="table" id="cashless">
<table class="table" id="payment">
<thead>
<tr>
<th rowspan="2">Jenis Kend</th>
@@ -137,10 +176,10 @@
<th>Nilai</th>
</tr>
</thead>
<tbody id="table-data">
<tbody id="payment-data">
</tbody>
</table>
</div> --}}
</div>
</div>
</div>
</div>
@@ -148,351 +187,16 @@
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade show" id="modaltanggal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="false">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Pilih Tanggal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form id="formTanggal">
<div class="form-group">
<div class="row">
<div class="col-sm-6">
<label for="tanggalMulai">Tanggal pencarian</label>
</div>
<div class="col-sm-6">
<input type="date" class="form-control" id="tanggalCari" name="tanggal_mulai" required>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
<button type="button" class="btn btn-primary" id="btnTampilkan">Tampilkan</button>
</div>
</div>
</div>
</div>
<!---->
@endsection
@section('javascript')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<script>
$(document).ready(function () {
// $('#modaltanggal').modal('show');
// Set tanggal default ke hari ini
// realtime trigger
$('#tanggalCari').on('change', loadData);
$('#harianToggle').on('change', loadData);
var today = new Date().toISOString().split('T')[0];
$('#tanggalCari').val(today);
loadData();
// $('.btn-export-excel').on('click', function () {
$(document).on('click', '.btn-export-excel', function (e) {
// e.preventDefault();
$('#cash td').each(function () {
const raw = $(this).data('value');
if (raw !== undefined) {
$(this).text(raw);
}
});
const table = document.getElementById('cetak');
const wb = XLSX.utils.table_to_book(table, { sheet: 'Sheet 1'});
XLSX.writeFile(wb, `monthlyReport.xlsx`);
console.log(e);
});
$('.btn-export-pdf').on('click', async function () {
// $('.cetak').css('display','block');
// $('.user').css('display','block');
const { jsPDF } = window.jspdf;
const doc = new jsPDF('l', 'pt', 'a4');
// ambil elemen tabel
const table = document.getElementById('cetak');
const canvas = await html2canvas(table, { scale: 2 });
const imgData = canvas.toDataURL('image/png');
const imgWidth = doc.internal.pageSize.getWidth();
const imgHeight = (canvas.height * imgWidth) / canvas.width;
doc.addImage(imgData, 'PNG', 0, 20, imgWidth, imgHeight);
doc.save(`Rekap Harian.pdf`);
});
console.log(document.getElementById('cetak'));
console.log(document.getElementById('date-table'));
});
function loadData(tanggalMulai, tanggalAkhir) {
let tanggal = $('#tanggalCari').val();
let harian = $('#harianToggle').is(':checked') ? 1 : 0;
if (harian == 1)
$('#harian').text('By : Harian');
else
$('#harian').text('By : Shift');
// console.log(harian);
// console.log(tanggal);
$('#tanggal-trans').text('Tanggal : ' + tanggal);
if (!tanggal) return;
// Contoh: Load data dengan AJAX
$.ajax({
url: '{{ route("getData") }}', // Ganti dengan route Anda
type: 'GET',
data: {
tanggal: tanggal,
harian: harian
},
beforeSend: function () {
console.log('Loading data...');
},
success: function(response) {
// Update tabel dengan data yang diterima
let html = '';
let onData = '';
let jmlCashCasual = 0;
let incomeCashCasual = 0;
let jmlCashlessCasual = 0;
let incomeCashlessCasual = 0;
let grandTotal = 0;
response.tunai.forEach(function (cash) {
// cari pasangan non tunai
let cashless = response.nontunai.find(
nt => String(nt.id_kendaraan) === String(cash.id_kendaraan)
);
// fallback aman
cashless = cashless || {
nontunai: 0,
nonTunaiOut: 0,
keluar: {
casual: { jumlah: 0, income: 0 },
lost: { jumlah: 0, income: 0 },
member: { jumlah: 0, income: 0 }
},
totalCashless: 0
};
let casualIn = cash.total;
let tunaiOut = cash.tunaiOut;
// ===== DATA TUNAI =====
let tCasual = cash.keluar.casual;
let tLost = cash.keluar.lost;
let tMember = cash.keluar.member;
let tManual = cash.keluar.manual;
// ===== DATA NON TUNAI =====
let nonTunaiOut = cashless.nonTunaiOut;
let nCasual = cashless.keluar.casual;
let nLost = cashless.keluar.lost;
let nMember = cashless.keluar.member;
let nManual = cashless.keluar.manual;
let totalTunai = cash.totalCash || 0;
let totalNonTunai = cashless.totalCashless || 0;
jmlCashCasual += cash.keluar.casual.jumlah;
incomeCashCasual += cash.keluar.casual.income;
jmlCashlessCasual += cashless.keluar.casual.jumlah;
incomeCashlessCasual += cashless.keluar.casual.income;
grandTotal += totalTunai + totalNonTunai;
// let casualCash = cash.keluar.casual;
// let lostCash = cash.keluar.lost;
// let memberCash = cash.keluar.member;
// let casualIn = cash.total;
// let casualNon = cashless ? cashless.keluar.casual : { jumlah: 0, income: 0 };
// let lostNon = cashless ? cashless.keluar.lost : { jumlah: 0, income: 0 };
// let memberNon = cashless ? cashless.keluar.member : { jumlah: 0, income: 0 };
// let totalIncome =
// (cash.totalCash || 0);
// html += `
// <tr>
// <td style="text-align: left;">${cash.jenis_mobil}</td>
// <!-- Jenis Transaksi -->
// <td>${casualIn}</td>
// <td>${cash.tunaiOut}</td>
// <!-- Casual -->
// <td>${casualCash.jumlah}</td>
// <td>${rupiah(casualCash.income)}</td>
// <!-- Tiket Hilang -->
// <td>${lostCash.jumlah}</td>
// <td>${rupiah(lostCash.income)}</td>
// <!-- Member -->
// <td>${memberCash.jumlah}</td>
// <td>${rupiah(memberCash.income)}</td>
// <!-- Manual Input -->
// <td>0</td>
// <td>0</td>
// <!-- Manual Mix -->
// <td>0</td>
// <td>0</td>
// <!-- Tiket Masalah -->
// <td>0</td>
// <td>0</td>
// <!-- Pendapatan -->
// <td><strong>${rupiah(totalIncome)}</strong></td>
// </tr>
// `;
html += `
<tr>
<td rowspan="2" style="text-align: left;"><strong>${cash.jenis_mobil}</strong></td>
<td style="text-align: left;"><span class="badge bg-success">Tunai</span></td>
<td>${casualIn}</td>
<td>${tunaiOut}</td>
<td>${tCasual.jumlah}</td>
<td data-value="${tCasual.income}">${rupiah(tCasual.income)}</td>
<td>${tLost.jumlah}</td>
<td data-value="${tLost.income}">${rupiah(tLost.income)}</td>
<td>${tMember.jumlah}</td>
<td data-value="${tMember.income}">${rupiah(tMember.income)}</td>
<td>${tManual.jumlah}</td>
<td data-value="${tManual.income}">${rupiah(tManual.income)}</td>
<td>0</td>
<td data-value="0}">0</td>
<td>0</td>
<td data-value="0">0</td>
<td data-value="${totalTunai}"><strong>${rupiah(totalTunai)}</strong></td>
</tr>
<tr>
<td style="text-align: left;"><span class="badge bg-warning">Non Tunai</span></td>
<td>${casualIn}</td>
<td>${nonTunaiOut}</td>
<td>${nCasual.jumlah}</td>
<td data-value="${nCasual.income}">${rupiah(nCasual.income)}</td>
<td>${nLost.jumlah}</td>
<td>${rupiah(nLost.income)}</td>
<td>${nMember.jumlah}</td>
<td>${rupiah(nMember.income)}</td>
<td>${nManual.jumlah}</td>
<td data-value="${nManual.income}">${rupiah(nManual.income)}</td>
<td>0</td>
<td data-value="0">0</td>
<td>0</td>
<td data-value="0">0</td>
<td data-value="${totalNonTunai}"><strong>${rupiah(totalNonTunai)}</strong></td>
</tr>
`;
});
// ===== FOOTER TOTAL =====
html += `
<tr class="table">
<td rowspan="2" style="text-align: center;"><strong>TOTAL</strong></td>
<td style="text-align: left;"><span class="badge bg-success">Tunai</span></td>
<td>0</td>
<td>0</td>
<td data-value="${jmlCashCasual}">${rupiah(jmlCashCasual)}</td>
<td data-value="${incomeCashCasual}">${rupiah(incomeCashCasual)}</td>
<td colspan="11">0</td>
</tr>
<tr>
<td style="text-align: left;"><span class="badge bg-warning">NON TUNAI</td>
<td>0</td>
<td>0</td>
<td>${jmlCashlessCasual}</td>
<td data-value="${incomeCashlessCasual}">${rupiah(incomeCashlessCasual)}</td>
<td colspan="11">0</td>
</tr>
<tr class="table">
<td colspan="3" class="text-center"><strong>GRAND TOTAL</strong></td>
<td colspan="0"></td>
<td colspan="0">${jmlCashCasual+jmlCashlessCasual}</td>
<td colspan="0" data-value="${incomeCashCasual+incomeCashlessCasual}">${rupiah(incomeCashCasual+incomeCashlessCasual)}</td>
<td colspan="0"></td>
<td colspan="0"></td>
<td colspan="0"></td>
<td colspan="0"></td>
<td colspan="0"></td>
<td colspan="0"></td>
<td colspan="0"></td>
<td colspan="0"></td>
<td colspan="0"></td>
<td colspan="0"></td>
<td><strong>${rupiah(grandTotal)}</strong></td>
</tr>
`;
// console.log('TUNAI:', cash.id_kendaraan, cash);
// console.log('CASHLESS FOUND:', cashless);
$('#table-data').html(html);
response.overNight.forEach(function (on) {
if (!on.jenis_mobil) return;
let overnight = on.overNight;
let onExpired = on.onExpired;
onData += `
<tr>
<td style="text-align: left;">${on.jenis_mobil}</td>
<td>${overnight}</td>
<td>${onExpired}</td>
<td>0</td>
</tr>
`;
});
$('#table-overnight').html(onData);
console.log(response);
},
error: function(xhr) {
console.log('Error:', xhr);
alert('Terjadi kesalahan saat memuat data');
}
});
}
function rupiah(angka) {
return new Intl.NumberFormat('id-ID').format(angka || 0);
}
// }
</script>
@endsection
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.31/jspdf.plugin.autotable.min.js"></script>
<script src="{{ asset('js/report/report-vehicle.js') }}"></script>
@endsection
resources/views/report/stiker/stiker-harian.blade.php
+30 -30
View File
@@ -75,23 +75,23 @@
</div>
</div>
<div class="col-sm-1 d-flex justify-content-center align-items-center">
<button type="button" id="btnProses"
<button type="button" id="btnProses"
class="btn btn-light btn-lg w-100">
Proses
</button>
</div>
<div class="col-sm-1">
<div class="col-sm-1">
</div>
<div class="col-sm-2">
<div class="col-sm-2">
<div class="form-group">
<p>Jumlah Pendapatan : </p> <h3 id="pendapatan"></h3><br>
<p>Jumlah Transaksi : </p> <h3 id="jmlTrans"></h3>
</div>
</div>
<div class="col-sm-1">
<div class="col-sm-1">
<button type="button" class="btn btn-info btn-icon-text btn-export-pdf">
Print
<i class="mdi mdi-printer btn-icon-append"></i>
<i class="mdi mdi-printer btn-icon-append"></i>
</button>
</div>
{{-- {{ dd($filterSelect['softsetting']) }} --}}
@@ -145,7 +145,7 @@ class="btn btn-light btn-lg w-100">
$(document).ready(function () {
let location = @json(collect($locationSettings ?? [])->except('logo'));
console.log(location?.namaperusahaan);
let awal = '';
let akhir = '';
let pendapatan = 0;
@@ -163,7 +163,7 @@ class="btn btn-light btn-lg w-100">
const jenisStiker = $('#jenisStiker').val();
const nama = $('#cari_data').val();
const nopol = $('#cari_nopol').val();
awal = $('#tanggalMulai').val();
akhir = $('#tanggalSelesai').val();
@@ -225,7 +225,7 @@ class="btn btn-light btn-lg w-100">
// `);
// });
// initDataTable();
// initDataTable();
// 🔥 sortable aktif
if (!response.success) return;
@@ -447,8 +447,8 @@ function rupiah(angka) {
doc.text(`Jumlah Pendapatan : ${rupiah(pendapatan)}`, marginLeft, 38);
doc.text(
`Jumlah Transaksi : ${rupiah(jmlTrans)}`,
pageWidth - marginRight,
`Jumlah Transaksi : ${rupiah(jmlTrans)}`,
pageWidth - marginRight,
38,
{ align: 'right'}
);
@@ -472,69 +472,69 @@ function rupiah(angka) {
doc.save('Rekap_Harian.pdf');
});
});
// $('.btn-export-pdf').on('click', async function () {
// const { jsPDF } = window.jspdf;
// const doc = new jsPDF({
// orientation: 'portrait',
// unit: 'mm',
// format: 'a4'
// });
// const element = document.getElementById('cetak');
// const canvas = await html2canvas(element, {
// scale: 2,
// useCORS: true
// });
// const imgData = canvas.toDataURL('image/png');
// const pageWidth = doc.internal.pageSize.getWidth();
// const pageHeight = doc.internal.pageSize.getHeight();
// const marginTop = 20;
// const marginBottom = 20;
// const marginLeft = 10;
// const marginRight = 10;
// const headerHeight = 45; // ⬅️ ruang judul
// const contentHeight = pageHeight - headerHeight - marginBottom;
// const imgWidth = pageWidth - marginLeft - marginRight;
// const imgHeight = (canvas.height * imgWidth) / canvas.width;
// let renderedHight = 0;
// let page = 1;
// let renderedHeight = 0;
// while (renderedHeight < imgHeight) {
// if (page > 1) doc.addPage();
// doc.setFont('helvetica', 'bold');
// doc.setFontSize(14);
// doc.text('LAPORAN STIKER HARIAN', pageWidth / 2, 15, { align: 'center' });
// // SUB JUDUL
// doc.setFontSize(10);
// doc.setFont('helvetica', 'normal');
// doc.text('PT PARKIR MAJU JAYA', pageWidth / 2, 22, { align: 'center' });
// doc.setFontSize(9);
// doc.text(`Periode : ${awal} s/d ${akhir}`, marginLeft, 32);
// doc.text(`Dicetak : ${new Date().toLocaleDateString('id-ID')}`, pageWidth - marginRight, 32, {
// align: 'right'
// });
// doc.setFontSize(9);
// doc.text(`Jumlah Pendapatan : ${pendapatan}`, marginLeft, 38);
// doc.text(`Jumlah Pendapatan : 15`, pageWidth - marginRight, 38, {
// align: 'right'
// });
// doc.addImage(
// imgData,
// 'PNG',
@@ -543,7 +543,7 @@ function rupiah(angka) {
// imgWidth,
// imgHeight
// );
// renderedHeight += contentHeight;
// page++;
// }
@@ -583,4 +583,4 @@ function rupiah(angka) {
// doc.save(`Rekap Harian.pdf`);
// });
</script>
@endsection
@endsection
resources/views/setup/UserLevel/level-user-menu.blade.php
+30
View File
@@ -0,0 +1,30 @@
<div class="modal fade user-menu-modal-lg" id="modal-vehicle" tabindex="-1" role="dialog" data-bs-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-lg modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h4 class="card-title fw-bold title"></h4>
<button type="button" class="btn-close" data-bs-dismiss="modal">
</button>
</div>
<div class="modal-body">
<table class="table">
<thead>
<tr>
<th width="3%">No.</th>
<th width="3%">Tersedia?</th>
<th>Menu</th>
<th>Path</th>
</tr>
</thead>
<tbody id="menuakses">
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary simpan" data-url="{{ route('vehicle.update', ':id') }}">Save changes</button>
<button type="button" class="btn btn-danger light" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
resources/views/setup/UserLevel/level-user.blade.php
+10 -99
View File
@@ -1,9 +1,8 @@
@extends('layouts.master')
use Carbon\Carbon;
@section('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
<style>
.card-body label {
font-size: 13px;
@@ -67,7 +66,6 @@
<th class="p-3" width="3%">No.</th>
<th style="text-align: center;" width="10%">Level Code</th>
<th style="text-align: center;">Level Pengguna</th>
<!--<th style="text-align: center;">Dibuat Oleh</th>-->
<th style="text-align: center;">Tanggal Dibuat</th>
<th style="text-align: center;">Hak Akses</th>
</tr>
@@ -79,11 +77,10 @@
<td class="text-center" hidden>{{ $level->level_id }}</td>
<td class="text-center" width="7%">{{ $level->level_code }} </td>
<td>{{ $level->level_name }}</td>
<!--<td width="10%"></td>-->
<td class="text-center" width="10%">{{ \Carbon\Carbon::parse($level->create_date)->format('Y-m-d')}}</td>
<td class="text-center" width="12%">
<button type="button" class="bi bi-menu-app btn-xl parameter-button" data-bs-toggle="modal" title="Izin Akses" data-bs-target=".bd-ubah-modal-lg"></button>
<button type="button" class="bi bi-list hardware-button" data-bs-toggle="tooltip" title="Menu Akses" data-id="{{ $level->level_id }}" data-nama="{{ $level->level_name }}"></button>
<button type="button" class="user-acess" data-bs-toggle="modal" title="Izin Akses" data-bs-target=".bd-ubah-modal-lg"><i class="fa-solid fa-user-gear"></i></button>
<button type="button" class="user-menu" data-bs-toggle="modal" id="menuakses" title="Menu Akses" data-bs-target=".user-menu-modal-lg"><i class="fa-solid fa-bars"></i></button>
</td>
</tr>
@endforeach
@@ -98,14 +95,12 @@
<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">
<!-- ADD MEMMBER MODAL -->
@include('setup.UserLevel.level-user-menu')
<!-- END MEMMBER MODAL -->
</div>
</div>
</div>
@@ -126,98 +121,14 @@
<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');
$(document).on('click', '.user-menu', function () {
// kalau sudah ada baris edit, hapus dulu
$('.edit-row').remove();
let id = $(this).data('id')
let id = $(this).data('id');
let nama = $(this).data('nama');
$.ajax({
url: "{{ route('hardware.show', '') }}/" + id,
type: 'GET',
success: function (r) {
console.log(r);
let colSpan = row.children('td').length;
// Field yang mau ditampilkan (pilih sendiri mau yang mana)
let fields = [
['printer1_avail', 'Printer Status'],
['printer1_conn', 'Printer Connection'],
['printer1_spd', 'Printer Speed/Baudrate'],
['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'],
];
let rows = '';
for (let i = 0; i < fields.length; i ++) {
let f1 = fields[i];
rows += `
<tr>
<td class="fw-semibold text-muted text-label"><strong>${f1[1]}</strong></td>
<td>
<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]}"
value="${r[f1[0]] ?? ''}">
</td>
</tr>
`;
}
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</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">
<table class="table table-bordered table-sm align-middle mb-0">
<thead class="table-light">
<tr>
<th width="15%">Setting</th>
<th width="85%">Value</th>
</tr>
</thead>
<tbody>
${rows}
</tbody>
</table>
</div>
</div>
</td>
</tr>
`;
row.after(editHtml);
},
error: function (xhr) {
console.error(xhr.responseText);
}
});
let url = "{{ route() }}"
});
// MODE EDIT