🔧 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>
|
||||
|
||||
@include('lpj::assetsku.includenya')
|
||||
<div class="w-full grid gap-5 lg:gap-7.5 mx-auto">
|
||||
<div class="card border border-agi-100 min-w-full">
|
||||
<div class="grid gap-5 mx-auto w-full lg:gap-7.5">
|
||||
<div class="min-w-full border card border-agi-100">
|
||||
<div class="card-header bg-agi-50">
|
||||
<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">
|
||||
<i class="ki-filled ki-exit-left"></i> Back
|
||||
</a>
|
||||
@@ -41,13 +41,13 @@
|
||||
<div id="denah-container">
|
||||
@if (isset($formDenah['denahs']) && is_array($formDenah['denahs']) && count($formDenah['denahs']) > 0)
|
||||
@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 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">
|
||||
<span class="form-label">Upload Denah (Foto/PDF)</span>
|
||||
</label>
|
||||
<div class="w-full grid gap-5">
|
||||
<div class="grid gap-5 w-full">
|
||||
<!-- Preview Container -->
|
||||
<div class="preview-container-{{ $index }}">
|
||||
@if (isset($denah['foto_denah']))
|
||||
@@ -68,9 +68,9 @@
|
||||
@endif
|
||||
</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[]"
|
||||
class="file-input file-input-bordered w-full"
|
||||
class="w-full file-input file-input-bordered"
|
||||
data-index="{{ $index }}" accept=".jpg,.jpeg,.png,.pdf"
|
||||
onchange="previewFile(this)">
|
||||
</div>
|
||||
@@ -78,26 +78,26 @@
|
||||
</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="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">
|
||||
<span class="form-label">Nama Denah</span>
|
||||
</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'] ?? '' }}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<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">
|
||||
<span class="form-label"> Luas</span>
|
||||
</label>
|
||||
<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²' : '' }}"
|
||||
onkeyup="formatNumber(this)">
|
||||
</div>
|
||||
@@ -115,45 +115,45 @@
|
||||
@endforeach
|
||||
@else
|
||||
<!-- 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 -->
|
||||
<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">
|
||||
<span class="form-label">Upload Denah (Foto/PDF)</span>
|
||||
</label>
|
||||
<div class="w-full grid gap-5">
|
||||
<div class="grid gap-5 w-full">
|
||||
<div class="preview-container-0">
|
||||
<!-- Preview akan ditampilkan di sini -->
|
||||
</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[]"
|
||||
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)">
|
||||
</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="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">
|
||||
<span class="form-label">Nama Denah</span>
|
||||
</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 class="w-full">
|
||||
<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">
|
||||
<span class="form-label"> Luas</span>
|
||||
</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)">
|
||||
</div>
|
||||
</div>
|
||||
@@ -164,18 +164,19 @@
|
||||
</div>
|
||||
|
||||
|
||||
<div class="w-full p-4">
|
||||
<div class="p-4 w-full">
|
||||
<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">
|
||||
<span class="form-label">Total Luas</span>
|
||||
</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 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()">
|
||||
<span id="saveButtonText">Save</span>
|
||||
</button>
|
||||
@@ -240,19 +241,34 @@
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* Menghitung total luas dari semua input denah
|
||||
* Mendukung format angka dengan koma sebagai pemisah desimal
|
||||
* dan menghapus format ribuan (titik) sebelum perhitungan
|
||||
*/
|
||||
function calculateTotalLuas() {
|
||||
let totalLuas = 0;
|
||||
|
||||
const luasInputs = document.querySelectorAll('input[name="luas_denah[]"]');
|
||||
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)) {
|
||||
totalLuas += value;
|
||||
}
|
||||
});
|
||||
|
||||
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[]
|
||||
@@ -271,17 +287,17 @@
|
||||
denahItem.className = 'denah-item grid gap-5 mb-5 border p-4 rounded';
|
||||
denahItem.innerHTML = `
|
||||
<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">
|
||||
<span class="form-label">Upload Denah (Foto/PDF)</span>
|
||||
</label>
|
||||
<div class="w-full grid gap-5">
|
||||
<div class="grid gap-5 w-full">
|
||||
<div class="preview-container-${index}">
|
||||
<!-- Preview akan ditampilkan di sini -->
|
||||
</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[]"
|
||||
class="file-input file-input-bordered w-full"
|
||||
class="w-full file-input file-input-bordered"
|
||||
data-index="${index}"
|
||||
accept=".jpg,.jpeg,.png,.pdf"
|
||||
onchange="previewFile(this)">
|
||||
@@ -289,25 +305,25 @@
|
||||
</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="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">
|
||||
<span class="form-label">Nama Denah</span>
|
||||
</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 class="w-full">
|
||||
<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">
|
||||
<span class="form-label"> Luas</span>
|
||||
</label>
|
||||
<input type="text" name="luas_denah[]"
|
||||
class="input w-full number-format"
|
||||
class="w-full input number-format"
|
||||
onkeyup="formatNumber(this)">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user