🔧 fix(surveyor): perbaiki fungsi calculateTotalLuas untuk mendukung format koma desimal
- Menambahkan logika menghapus format ribuan (titik) sebelum perhitungan luas.
- Mengonversi koma menjadi titik untuk parsing **float** dengan benar.
- Menggunakan **toLocaleString('id-ID')** untuk hasil sesuai format Indonesia.
- Mendukung input angka dengan format Indonesia dan internasional.
This commit is contained in:
Daeng Deni Mardaeni
@@ -15,11 +15,11 @@
|
|||||||
</style>
|
</style>
|
||||||
|
|
||||||
@include('lpj::assetsku.includenya')
|
@include('lpj::assetsku.includenya')
|
||||||
<div class="w-full grid gap-5 lg:gap-7.5 mx-auto">
|
<div class="grid gap-5 mx-auto w-full lg:gap-7.5">
|
||||||
<div class="card border border-agi-100 min-w-full">
|
<div class="min-w-full border card border-agi-100">
|
||||||
<div class="card-header bg-agi-50">
|
<div class="card-header bg-agi-50">
|
||||||
<h3 class="card-title">Denah</h3>
|
<h3 class="card-title">Denah</h3>
|
||||||
<div class="flex items-center gap-2">
|
<div class="flex gap-2 items-center">
|
||||||
<a href="{{ route('surveyor.show', ['id' => $permohonan->id]) }}?form=denah" class="btn btn-xs btn-info">
|
<a href="{{ route('surveyor.show', ['id' => $permohonan->id]) }}?form=denah" class="btn btn-xs btn-info">
|
||||||
<i class="ki-filled ki-exit-left"></i> Back
|
<i class="ki-filled ki-exit-left"></i> Back
|
||||||
</a>
|
</a>
|
||||||
@@ -41,13 +41,13 @@
|
|||||||
<div id="denah-container">
|
<div id="denah-container">
|
||||||
@if (isset($formDenah['denahs']) && is_array($formDenah['denahs']) && count($formDenah['denahs']) > 0)
|
@if (isset($formDenah['denahs']) && is_array($formDenah['denahs']) && count($formDenah['denahs']) > 0)
|
||||||
@foreach ($formDenah['denahs'] as $index => $denah)
|
@foreach ($formDenah['denahs'] as $index => $denah)
|
||||||
<div class="denah-item grid gap-5 mb-5 border p-4 rounded">
|
<div class="grid gap-5 p-4 mb-5 rounded border denah-item">
|
||||||
<div class="flex flex-wrap gap-4">
|
<div class="flex flex-wrap gap-4">
|
||||||
<div class="flex w-full items-baseline flex-wrap lg:flex-nowrap gap-4">
|
<div class="flex flex-wrap gap-4 items-baseline w-full lg:flex-nowrap">
|
||||||
<label class="form-label max-w-56">
|
<label class="form-label max-w-56">
|
||||||
<span class="form-label">Upload Denah (Foto/PDF)</span>
|
<span class="form-label">Upload Denah (Foto/PDF)</span>
|
||||||
</label>
|
</label>
|
||||||
<div class="w-full grid gap-5">
|
<div class="grid gap-5 w-full">
|
||||||
<!-- Preview Container -->
|
<!-- Preview Container -->
|
||||||
<div class="preview-container-{{ $index }}">
|
<div class="preview-container-{{ $index }}">
|
||||||
@if (isset($denah['foto_denah']))
|
@if (isset($denah['foto_denah']))
|
||||||
@@ -68,9 +68,9 @@
|
|||||||
@endif
|
@endif
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="input-group w-full flex gap-2">
|
<div class="flex gap-2 w-full input-group">
|
||||||
<input type="file" name="foto_denah[]"
|
<input type="file" name="foto_denah[]"
|
||||||
class="file-input file-input-bordered w-full"
|
class="w-full file-input file-input-bordered"
|
||||||
data-index="{{ $index }}" accept=".jpg,.jpeg,.png,.pdf"
|
data-index="{{ $index }}" accept=".jpg,.jpeg,.png,.pdf"
|
||||||
onchange="previewFile(this)">
|
onchange="previewFile(this)">
|
||||||
</div>
|
</div>
|
||||||
@@ -78,26 +78,26 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-wrap lg:flex-nowrap w-full gap-4">
|
<div class="flex flex-wrap gap-4 w-full lg:flex-nowrap">
|
||||||
<div class="w-full">
|
<div class="w-full">
|
||||||
<div class="flex flex-wrap gap-4">
|
<div class="flex flex-wrap gap-4">
|
||||||
<div class="flex w-full items-center justify-center gap-4">
|
<div class="flex gap-4 justify-center items-center w-full">
|
||||||
<label class="form-label max-w-56">
|
<label class="form-label max-w-56">
|
||||||
<span class="form-label">Nama Denah</span>
|
<span class="form-label">Nama Denah</span>
|
||||||
</label>
|
</label>
|
||||||
<input type="text" name="nama_denah[]" class="input w-full"
|
<input type="text" name="nama_denah[]" class="w-full input"
|
||||||
value="{{ $denah['nama_denah'] ?? '' }}">
|
value="{{ $denah['nama_denah'] ?? '' }}">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-full">
|
<div class="w-full">
|
||||||
<div class="flex flex-wrap gap-4">
|
<div class="flex flex-wrap gap-4">
|
||||||
<div class="flex w-full items-center justify-center gap-4">
|
<div class="flex gap-4 justify-center items-center w-full">
|
||||||
<label class="form-label max-w-56">
|
<label class="form-label max-w-56">
|
||||||
<span class="form-label"> Luas</span>
|
<span class="form-label"> Luas</span>
|
||||||
</label>
|
</label>
|
||||||
<input type="text" name="luas_denah[]"
|
<input type="text" name="luas_denah[]"
|
||||||
class="input w-full number-format"
|
class="w-full input number-format"
|
||||||
value="{{ isset($denah['luas_denah']) ? $denah['luas_denah'] . ' m²' : '' }}"
|
value="{{ isset($denah['luas_denah']) ? $denah['luas_denah'] . ' m²' : '' }}"
|
||||||
onkeyup="formatNumber(this)">
|
onkeyup="formatNumber(this)">
|
||||||
</div>
|
</div>
|
||||||
@@ -115,45 +115,45 @@
|
|||||||
@endforeach
|
@endforeach
|
||||||
@else
|
@else
|
||||||
<!-- Tambahkan satu elemen default jika tidak ada data -->
|
<!-- Tambahkan satu elemen default jika tidak ada data -->
|
||||||
<div class="denah-item grid gap-5 mb-5 border p-4 rounded">
|
<div class="grid gap-5 p-4 mb-5 rounded border denah-item">
|
||||||
<!-- Isi dengan elemen default seperti sebelumnya -->
|
<!-- Isi dengan elemen default seperti sebelumnya -->
|
||||||
<div class="flex flex-wrap gap-4">
|
<div class="flex flex-wrap gap-4">
|
||||||
<div class="flex w-full items-baseline flex-wrap lg:flex-nowrap gap-4">
|
<div class="flex flex-wrap gap-4 items-baseline w-full lg:flex-nowrap">
|
||||||
<label class="form-label max-w-56">
|
<label class="form-label max-w-56">
|
||||||
<span class="form-label">Upload Denah (Foto/PDF)</span>
|
<span class="form-label">Upload Denah (Foto/PDF)</span>
|
||||||
</label>
|
</label>
|
||||||
<div class="w-full grid gap-5">
|
<div class="grid gap-5 w-full">
|
||||||
<div class="preview-container-0">
|
<div class="preview-container-0">
|
||||||
<!-- Preview akan ditampilkan di sini -->
|
<!-- Preview akan ditampilkan di sini -->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="input-group w-full flex gap-2">
|
<div class="flex gap-2 w-full input-group">
|
||||||
<input type="file" name="foto_denah[]"
|
<input type="file" name="foto_denah[]"
|
||||||
class="file-input file-input-bordered w-full" data-index="0"
|
class="w-full file-input file-input-bordered" data-index="0"
|
||||||
accept=".jpg,.jpeg,.png,.pdf" onchange="previewFile(this)">
|
accept=".jpg,.jpeg,.png,.pdf" onchange="previewFile(this)">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-wrap lg:flex-nowrap w-full gap-4">
|
<div class="flex flex-wrap gap-4 w-full lg:flex-nowrap">
|
||||||
<div class="w-full">
|
<div class="w-full">
|
||||||
<div class="flex flex-wrap gap-4">
|
<div class="flex flex-wrap gap-4">
|
||||||
<div class="flex w-full items-center justify-center gap-4">
|
<div class="flex gap-4 justify-center items-center w-full">
|
||||||
<label class="form-label max-w-56">
|
<label class="form-label max-w-56">
|
||||||
<span class="form-label">Nama Denah</span>
|
<span class="form-label">Nama Denah</span>
|
||||||
</label>
|
</label>
|
||||||
<input type="text" name="nama_denah[]" class="input w-full">
|
<input type="text" name="nama_denah[]" class="w-full input">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-full">
|
<div class="w-full">
|
||||||
<div class="flex flex-wrap gap-4">
|
<div class="flex flex-wrap gap-4">
|
||||||
<div class="flex w-full items-center justify-center gap-4">
|
<div class="flex gap-4 justify-center items-center w-full">
|
||||||
<label class="form-label max-w-56">
|
<label class="form-label max-w-56">
|
||||||
<span class="form-label"> Luas</span>
|
<span class="form-label"> Luas</span>
|
||||||
</label>
|
</label>
|
||||||
<input type="text" name="luas_denah[]" class="input w-full number-format"
|
<input type="text" name="luas_denah[]" class="w-full input number-format"
|
||||||
onkeyup="formatNumber(this)">
|
onkeyup="formatNumber(this)">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -164,18 +164,19 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="w-full p-4">
|
<div class="p-4 w-full">
|
||||||
<div class="flex flex-wrap gap-4">
|
<div class="flex flex-wrap gap-4">
|
||||||
<div class="flex w-full items-center justify-center gap-4">
|
<div class="flex gap-4 justify-center items-center w-full">
|
||||||
<label class="form-label max-w-56">
|
<label class="form-label max-w-56">
|
||||||
<span class="form-label">Total Luas</span>
|
<span class="form-label">Total Luas</span>
|
||||||
</label>
|
</label>
|
||||||
<input type="text" name="total_luas" id="totalLuas" class="input w-full number-format" readonly>
|
<input type="text" name="total_luas" id="totalLuas"
|
||||||
|
class="w-full input number-format" readonly>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex justify-end gap-2" style="margin-right: 20px; margin-top: 20px">
|
<div class="flex gap-2 justify-end" style="margin-right: 20px; margin-top: 20px">
|
||||||
<button type="button" class="btn btn-success" id="saveButton" onclick="submitDenah()">
|
<button type="button" class="btn btn-success" id="saveButton" onclick="submitDenah()">
|
||||||
<span id="saveButtonText">Save</span>
|
<span id="saveButtonText">Save</span>
|
||||||
</button>
|
</button>
|
||||||
@@ -240,23 +241,38 @@
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Menghitung total luas dari semua input denah
|
||||||
|
* Mendukung format angka dengan koma sebagai pemisah desimal
|
||||||
|
* dan menghapus format ribuan (titik) sebelum perhitungan
|
||||||
|
*/
|
||||||
function calculateTotalLuas() {
|
function calculateTotalLuas() {
|
||||||
let totalLuas = 0;
|
let totalLuas = 0;
|
||||||
|
|
||||||
const luasInputs = document.querySelectorAll('input[name="luas_denah[]"]');
|
const luasInputs = document.querySelectorAll('input[name="luas_denah[]"]');
|
||||||
luasInputs.forEach(input => {
|
luasInputs.forEach(input => {
|
||||||
const value = parseFloat(input.value.replace(/[^0-9.]/g, ''));
|
// Hapus format ribuan (titik) dan spasi
|
||||||
|
let cleanValue = input.value.replace(/\./g, '').replace(/\s/g, '');
|
||||||
|
|
||||||
|
// Ganti koma dengan titik untuk desimal
|
||||||
|
cleanValue = cleanValue.replace(',', '.');
|
||||||
|
|
||||||
|
// Parse ke float
|
||||||
|
const value = parseFloat(cleanValue);
|
||||||
if (!isNaN(value)) {
|
if (!isNaN(value)) {
|
||||||
totalLuas += value;
|
totalLuas += value;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
const totalLuasInput = document.getElementById('totalLuas');
|
const totalLuasInput = document.getElementById('totalLuas');
|
||||||
totalLuasInput.value = totalLuas ? `${totalLuas.toLocaleString()} m²` : '';
|
totalLuasInput.value = totalLuas ? `${totalLuas.toLocaleString('id-ID')} m²` : '';
|
||||||
|
|
||||||
|
// Log untuk debugging
|
||||||
|
console.log('Total luas dihitung:', totalLuas);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Tambahkan event listener untuk setiap input luas_denah[]
|
// Tambahkan event listener untuk setiap input luas_denah[]
|
||||||
document.addEventListener('input', function (e) {
|
document.addEventListener('input', function(e) {
|
||||||
if (e.target && e.target.name === 'luas_denah[]') {
|
if (e.target && e.target.name === 'luas_denah[]') {
|
||||||
calculateTotalLuas();
|
calculateTotalLuas();
|
||||||
}
|
}
|
||||||
@@ -271,17 +287,17 @@
|
|||||||
denahItem.className = 'denah-item grid gap-5 mb-5 border p-4 rounded';
|
denahItem.className = 'denah-item grid gap-5 mb-5 border p-4 rounded';
|
||||||
denahItem.innerHTML = `
|
denahItem.innerHTML = `
|
||||||
<div class="flex flex-wrap gap-4">
|
<div class="flex flex-wrap gap-4">
|
||||||
<div class="flex w-full items-baseline flex-wrap lg:flex-nowrap gap-4">
|
<div class="flex flex-wrap gap-4 items-baseline w-full lg:flex-nowrap">
|
||||||
<label class="form-label max-w-56">
|
<label class="form-label max-w-56">
|
||||||
<span class="form-label">Upload Denah (Foto/PDF)</span>
|
<span class="form-label">Upload Denah (Foto/PDF)</span>
|
||||||
</label>
|
</label>
|
||||||
<div class="w-full grid gap-5">
|
<div class="grid gap-5 w-full">
|
||||||
<div class="preview-container-${index}">
|
<div class="preview-container-${index}">
|
||||||
<!-- Preview akan ditampilkan di sini -->
|
<!-- Preview akan ditampilkan di sini -->
|
||||||
</div>
|
</div>
|
||||||
<div class="input-group w-full flex gap-2">
|
<div class="flex gap-2 w-full input-group">
|
||||||
<input type="file" name="foto_denah[]"
|
<input type="file" name="foto_denah[]"
|
||||||
class="file-input file-input-bordered w-full"
|
class="w-full file-input file-input-bordered"
|
||||||
data-index="${index}"
|
data-index="${index}"
|
||||||
accept=".jpg,.jpeg,.png,.pdf"
|
accept=".jpg,.jpeg,.png,.pdf"
|
||||||
onchange="previewFile(this)">
|
onchange="previewFile(this)">
|
||||||
@@ -289,25 +305,25 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-wrap lg:flex-nowrap w-full gap-4">
|
<div class="flex flex-wrap gap-4 w-full lg:flex-nowrap">
|
||||||
<div class="w-full">
|
<div class="w-full">
|
||||||
<div class="flex flex-wrap gap-4">
|
<div class="flex flex-wrap gap-4">
|
||||||
<div class="flex w-full items-center justify-center gap-4">
|
<div class="flex gap-4 justify-center items-center w-full">
|
||||||
<label class="form-label max-w-56">
|
<label class="form-label max-w-56">
|
||||||
<span class="form-label">Nama Denah</span>
|
<span class="form-label">Nama Denah</span>
|
||||||
</label>
|
</label>
|
||||||
<input type="text" name="nama_denah[]" class="input w-full">
|
<input type="text" name="nama_denah[]" class="w-full input">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-full">
|
<div class="w-full">
|
||||||
<div class="flex flex-wrap gap-4">
|
<div class="flex flex-wrap gap-4">
|
||||||
<div class="flex w-full items-center justify-center gap-4">
|
<div class="flex gap-4 justify-center items-center w-full">
|
||||||
<label class="form-label max-w-56">
|
<label class="form-label max-w-56">
|
||||||
<span class="form-label"> Luas</span>
|
<span class="form-label"> Luas</span>
|
||||||
</label>
|
</label>
|
||||||
<input type="text" name="luas_denah[]"
|
<input type="text" name="luas_denah[]"
|
||||||
class="input w-full number-format"
|
class="w-full input number-format"
|
||||||
onkeyup="formatNumber(this)">
|
onkeyup="formatNumber(this)">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user