fix(form): perbaiki tampilan form input

- Memperbaiki kesalahan tampilan pada elemen input.
This commit is contained in:
Daeng Deni Mardaeni
2025-01-21 15:10:17 +07:00
parent b2b8c0e9cd
commit fde505a5b2

View File

@@ -1,269 +1,268 @@
<!-- Informasi Tata Ruang --> <!-- Informasi Tata Ruang -->
<div class="card border border-agi-100 w-full "> <div class="card border border-agi-100 w-full ">
<div class="card-header bg-agi-50"> <div class="card-header bg-agi-50">
<h3 class="card-title uppercase"> <h3 class="card-title uppercase">
Informasi Dinas Tata Ruang Informasi Dinas Tata Ruang
</h3> </h3>
</div> </div>
<div class="card-body"> <div class="card-body">
<!-- Informasi Tata Ruang Form --> <!-- Informasi Tata Ruang Form -->
<div class="grid gap-5"> <div class="grid gap-5">
@php @php
$inputDinasTata = [ $inputDinasTata = [
[ [
'label' => 'Peruntukan', 'label' => 'Peruntukan',
'name' => 'peruntukan', 'name' => 'peruntukan',
'index' => 0, 'index' => 0,
'value' => old( 'value' => old(
'peruntukan', 'peruntukan',
isset($forminspeksi['fakta']['peruntukan']) ? $forminspeksi['fakta']['peruntukan'] : '', isset($forminspeksi['fakta']['peruntukan']) ? $forminspeksi['fakta']['peruntukan'] : '',
), ),
], ],
[ [
'label' => 'KDB', 'label' => 'KDB',
'name' => 'kdb', 'name' => 'kdb',
'index' => 1, 'index' => 1,
'value' => old( 'value' => old(
'kdb', 'kdb',
isset($forminspeksi['fakta']['kdb']) ? $forminspeksi['fakta']['kdb'] : '', isset($forminspeksi['fakta']['kdb']) ? $forminspeksi['fakta']['kdb'] : '',
), ),
], ],
[ [
'label' => 'KDH', 'label' => 'KDH',
'name' => 'kdh', 'name' => 'kdh',
'index' => 2, 'index' => 2,
'value' => old( 'value' => old(
'kdh', 'kdh',
isset($forminspeksi['fakta']['kdh']) ? $forminspeksi['fakta']['kdh'] : '', isset($forminspeksi['fakta']['kdh']) ? $forminspeksi['fakta']['kdh'] : '',
), ),
], ],
[ [
'label' => 'GSB', 'label' => 'GSB',
'name' => 'gsb', 'name' => 'gsb',
'index' => 3, 'index' => 3,
'value' => old( 'value' => old(
'gsb', 'gsb',
isset($forminspeksi['fakta']['gsb']) ? $forminspeksi['fakta']['gsb'] : '', isset($forminspeksi['fakta']['gsb']) ? $forminspeksi['fakta']['gsb'] : '',
), ),
], ],
[ [
'label' => 'Max Lantai', 'label' => 'Max Lantai',
'name' => 'max_lantai', 'name' => 'max_lantai',
'index' => 4, 'index' => 4,
'value' => old( 'value' => old(
'max_lantai', 'max_lantai',
isset($forminspeksi['fakta']['max_lantai']) ? $forminspeksi['fakta']['max_lantai'] : '', isset($forminspeksi['fakta']['max_lantai']) ? $forminspeksi['fakta']['max_lantai'] : '',
), ),
], ],
[ [
'label' => 'KLB', 'label' => 'KLB',
'name' => 'klb', 'name' => 'klb',
'index' => 5, 'index' => 5,
'value' => old( 'value' => old(
'klb', 'klb',
isset($forminspeksi['fakta']['klb']) ? $forminspeksi['fakta']['klb'] : '', isset($forminspeksi['fakta']['klb']) ? $forminspeksi['fakta']['klb'] : '',
), ),
], ],
[ [
'label' => 'GSS', 'label' => 'GSS',
'name' => 'gss', 'name' => 'gss',
'index' => 6, 'index' => 6,
'value' => old( 'value' => old(
'gss', 'gss',
isset($forminspeksi['fakta']['gss']) ? $forminspeksi['fakta']['gss'] : '', isset($forminspeksi['fakta']['gss']) ? $forminspeksi['fakta']['gss'] : '',
), ),
], ],
[ [
'label' => 'Pelebaran Jalan', 'label' => 'Pelebaran Jalan',
'name' => 'pelebaran_jalan', 'name' => 'pelebaran_jalan',
'index' => 7, 'index' => 7,
'value' => old( 'value' => old(
'pelebaran_jalan', 'pelebaran_jalan',
isset($forminspeksi['fakta']['pelebaran_jalan']) isset($forminspeksi['fakta']['pelebaran_jalan'])
? $forminspeksi['fakta']['pelebaran_jalan'] ? $forminspeksi['fakta']['pelebaran_jalan']
: '', : '',
), ),
], ],
[ [
'label' => 'Nama Petugas TK', 'label' => 'Nama Petugas TK',
'name' => 'nama_petugas', 'name' => 'nama_petugas',
'index' => 8, 'index' => 8,
'value' => old( 'value' => old(
'nama_petugas', 'nama_petugas',
isset($forminspeksi['fakta']['nama_petugas']) isset($forminspeksi['fakta']['nama_petugas'])
? $forminspeksi['fakta']['nama_petugas'] ? $forminspeksi['fakta']['nama_petugas']
: '', : '',
), ),
], ],
]; ];
@endphp @endphp
@if (count($inputDinasTata) > 0) @if (count($inputDinasTata) > 0)
@foreach ($inputDinasTata as $item) @foreach ($inputDinasTata as $item)
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label class="form-label max-w-56">{{ $item['label'] }}</label> <label class="form-label max-w-56">{{ $item['label'] }}</label>
<div class="flex flex-wrap items-baseline w-full"> <div class="flex flex-wrap items-baseline w-full">
<input type="text" name="{{ $item['name'] }}" class="input" <input type="text" name="{{ $item['name'] }}" class="input"
placeholder="Masukkan {{ $item['label'] }}" value="{{ $item['value'] }}"> placeholder="Masukkan {{ $item['label'] }}" value="{{ $item['value'] }}">
@error($item['name']) @error($item['name'])
<em class="alert text-danger text-sm"></em> <em class="alert text-danger text-sm"></em>
@enderror @enderror
</div> </div>
</div> </div>
@endforeach @endforeach
@endif @endif
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label class="form-label max-w-56"> <label class="form-label max-w-56">
<span class="form-label">Gistaru</span> <span class="form-label">Gistaru</span>
</label> </label>
<div class="input-group w-full flex gap-2"> <div class="input-group w-full flex gap-2">
<input class="name_rute" type="hidden" name="name_rute" value="rute"> <input class="name_rute" type="hidden" name="name_rute" value="rute">
<div class="w-full"> <div class="w-full">
<input id="inputGistaru" type="file" name="foto_gistaru" <input id="inputGistaru" type="file" name="foto_gistaru"
class="file-input file-input-bordered w-full" class="file-input file-input-bordered w-full"
accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff,.tif,.webp,.svg" accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff,.tif,.webp,.svg"
onchange="previewImage(this, 'gistaru-preview')"> onchange="previewImage(this, 'gistaru-preview')">
<img id="gistaru-preview" <img id="gistaru-preview"
src="{{ asset('storage/' . (isset($forminspeksi['foto_gistaru']) ? $forminspeksi['foto_gistaru'] : '')) }}" src="{{ asset('storage/' . (isset($forminspeksi['foto_gistaru']) ? $forminspeksi['foto_gistaru'] : '')) }}"
alt="Foto Bhumi" class="mt-2 max-w-full h-auto" alt="Foto Bhumi" class="mt-2 max-w-full h-auto"
style="{{ isset($forminspeksi['foto_gistaru']) ? '' : 'display: none;' }} max-width: 30rem;" /> style="{{ isset($forminspeksi['foto_gistaru']) ? '' : 'display: none;' }} max-width: 30rem;"/>
</div> </div>
<a href="https://gistaru.atrbpn.go.id/rtronline" type="button" class="btn btn-light" <a href="https://gistaru.atrbpn.go.id/rtronline" type="button" class="btn btn-light"
target="_blank"> target="_blank">
<i class="ki-filled ki-map"></i> Gistaru <i class="ki-filled ki-map"></i> Gistaru
</a> </a>
</div> </div>
</div> </div>
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label class="form-label max-w-56"> <label class="form-label max-w-56">
<span class="form-label ">Bhumi</span> <span class="form-label ">Bhumi</span>
</label> </label>
<div class="input-group w-full flex gap-2"> <div class="input-group w-full flex gap-2">
<input class="name_rute" type="hidden" name="name_rute" value="rute"> <input class="name_rute" type="hidden" name="name_rute" value="rute">
<div class="w-full grid gap-2"> <div class="w-full grid gap-2">
<input id="inputBhumi" type="file" name="foto_bhumi" <input id="inputBhumi" type="file" name="foto_bhumi"
class="file-input file-input-bordered w-full " class="file-input file-input-bordered w-full "
accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff,.tif,.webp,.svg" accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff,.tif,.webp,.svg"
onchange="previewImage(this, 'bhumi-preview')"> onchange="previewImage(this, 'bhumi-preview')">
<img id="bhumi-preview" <img id="bhumi-preview"
src="{{ asset('storage/' . (isset($forminspeksi['foto_bhumi']) ? $forminspeksi['foto_bhumi'] : '')) }}" src="{{ asset('storage/' . (isset($forminspeksi['foto_bhumi']) ? $forminspeksi['foto_bhumi'] : '')) }}"
alt="Foto Bhumi" class="mt-2 max-w-full h-auto" alt="Foto Bhumi" class="mt-2 max-w-full h-auto"
style="{{ isset($forminspeksi['foto_bhumi']) ? ' ' : 'display: none;' }} max-width: 30rem;" /> style="{{ isset($forminspeksi['foto_bhumi']) ? ' ' : 'display: none;' }} max-width: 30rem;"/>
</div> </div>
<a href="https://bhumi.atrbpn.go.id/peta" type="button" class="btn btn-light" target="_blank"> <a href="https://bhumi.atrbpn.go.id/peta" type="button" class="btn btn-light" target="_blank">
<i class="ki-filled ki-map"></i> Bhumi <i class="ki-filled ki-map"></i> Bhumi
</a> </a>
</div> </div>
</div> </div>
@if (isset($link_url_region->regions->url)) @if (isset($link_url_region->regions->url))
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label class="form-label max-w-56"> <label class="form-label max-w-56">
<span class="form-label">{{ $link_url_region->regions->name_url }}</span> <span class="form-label">{{ $link_url_region->regions->name_url }}</span>
</label> </label>
<div class="input-group w-full flex gap-2"> <div class="input-group w-full flex gap-2">
<input class="name_rute" type="hidden" name="name_rute" value="rute"> <input class="name_rute" type="hidden" name="name_rute" value="rute">
<div class="w-full"> <div class="w-full">
<input id="inputArgisRegion" type="file" name="foto_argis_region" <input id="inputArgisRegion" type="file" name="foto_argis_region"
class="file-input file-input-bordered w-full" class="file-input file-input-bordered w-full"
accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff,.tif,.webp,.svg" accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff,.tif,.webp,.svg"
onchange="previewImage(this, 'argis-region-preview')"> onchange="previewImage(this, 'argis-region-preview')">
<img id="argis-region-preview" <img id="argis-region-preview"
src="{{ asset('storage/' . (isset($forminspeksi['foto_argis_region']) ? $forminspeksi['foto_argis_region'] : '')) }}" src="{{ asset('storage/' . (isset($forminspeksi['foto_argis_region']) ? $forminspeksi['foto_argis_region'] : '')) }}"
alt="Foto Argis Region" class="mt-2 max-w-full h-auto" alt="Foto Argis Region" class="mt-2 max-w-full h-auto"
style="{{ isset($forminspeksi['foto_argis_region']) ? '' : 'display: none;' }} max-width: 30rem;"> style="{{ isset($forminspeksi['foto_argis_region']) ? '' : 'display: none;' }} max-width: 30rem;">
</div> </div>
<a href="{{ $link_url_region->regions->url }}" type="button" class="btn btn-light" <a href="{{ $link_url_region->regions->url }}" type="button" class="btn btn-light"
target="_blank"> target="_blank">
<i class="ki-filled ki-map"></i> <i class="ki-filled ki-map"></i>
{{ $link_url_region->regions->name_url }} {{ $link_url_region->regions->name_url }}
</a> </a>
</div> </div>
</div> </div>
@endif @endif
</div> </div>
<!-- Upload Photo Button --> <!-- Upload Photo Button -->
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5" style="margin-top: 20px"> <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5" style="margin-top: 20px">
<label for="" class="form-label max-w-56 text-sm font-medium text-gray-700">Upload Peta</label> <label for="" class="form-label max-w-56 text-sm font-medium text-gray-700">Upload Peta</label>
<div class="w-full grid gap-5"> <div class="w-full grid gap-5">
<div class="input-group w-full flex gap-2"> <div class="input-group w-full flex gap-2">
<input id="foto_tempat" type="file" name="foto_tempat" <input id="foto_tempat" type="file" name="foto_tempat"
class="file-input file-input-bordered w-full" class="file-input file-input-bordered w-full"
accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff,.tif,.webp,.svg" accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff,.tif,.webp,.svg"
onchange="previewImage(this, 'foto_tempat-preview')"> onchange="previewImage(this, 'foto_tempat-preview')">
<button type="button" id="btnCamera" class="btn btn-light" data-modal-toggle="#cameraModal"> <button type="button" id="btnCamera" class="btn btn-light" data-modal-toggle="#cameraModal">
<i class="ki-outline ki-abstract-33"></i> Camera <i class="ki-outline ki-abstract-33"></i> Camera
</button> </button>
</div> </div>
@if($forminspeksi) @if($forminspeksi)
@if(is_array($forminspeksi['foto_tempat'])) @if(is_array($forminspeksi['foto_tempat']))
@if(count($forminspeksi['foto_tempat']) > 0) @if(count($forminspeksi['foto_tempat']) > 0)
<img id="foto_tempat-preview" <img id="foto_tempat-preview"
src="{{ isset($forminspeksi['foto_tempat']) ? asset('storage/' . (is_array($forminspeksi['foto_tempat']) ? $forminspeksi['foto_tempat'][0] : $forminspeksi['foto_tempat'])) : '' }}" src="{{ isset($forminspeksi['foto_tempat']) ? asset('storage/' . (is_array($forminspeksi['foto_tempat']) ? $forminspeksi['foto_tempat'][0] : $forminspeksi['foto_tempat'])) : '' }}"
alt="Foto Tempat" class="mt-2 max-w-full h-auto" alt="Foto Tempat" class="mt-2 max-w-full h-auto"
style="{{ isset($forminspeksi['foto_tempat']) ? '' : 'display: none;' }} max-width: 30rem;"> style="{{ isset($forminspeksi['foto_tempat']) ? '' : 'display: none;' }} max-width: 30rem;">
@endif @endif
@else @else
<img id="foto_tempat-preview" <img id="foto_tempat-preview"
src="{{ asset('storage/'. (isset($forminspeksi['foto_tempat'])? $forminspeksi['foto_tempat'] : '')) }}" src="{{ asset('storage/'. (isset($forminspeksi['foto_tempat'])? $forminspeksi['foto_tempat'] : '')) }}"
alt="Foto Tempat" class="mt-2 max-w-full h-auto" alt="Foto Tempat" class="mt-2 max-w-full h-auto"
style="{{ isset($forminspeksi['foto_tempat']) ? '' : 'display: none;' }} max-width: 30rem;"> style="{{ isset($forminspeksi['foto_tempat']) ? '' : 'display: none;' }} max-width: 30rem;">
@endif @endif
@endif @endif
@endif </div>
</div> </div>
</div>
<!-- Notes Section --> <!-- Notes Section -->
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5" style="margin-top: 20px"> <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5" style="margin-top: 20px">
<label class="form-label lg:form-label max-w-56 ">Catatan yang Perlu Diperhatikan <label class="form-label lg:form-label max-w-56 ">Catatan yang Perlu Diperhatikan
</label> </label>
<div class="w-full"> <div class="w-full">
<div id="keterangan-container" class="flex items-baseline flex-wrap gap-2.5 w-full"> <div id="keterangan-container" class="flex items-baseline flex-wrap gap-2.5 w-full">
@if (!empty($forminspeksi['fakta']['keterangan']) && is_array($forminspeksi['fakta']['keterangan'])) @if (!empty($forminspeksi['fakta']['keterangan']) && is_array($forminspeksi['fakta']['keterangan']))
@foreach ($forminspeksi['fakta']['keterangan'] as $index => $item) @foreach ($forminspeksi['fakta']['keterangan'] as $index => $item)
<div class="keterangan flex items-center gap-2 mt-2 textarea-group w-full"> <div class="keterangan flex items-center gap-2 mt-2 textarea-group w-full">
<textarea name="keterangan[]" class="textarea mt-2" placeholder="Masukkan catatan penting" rows="3">{{ old("keterangan.$index", $item) }}</textarea> <textarea name="keterangan[]" class="textarea mt-2" placeholder="Masukkan catatan penting" rows="3">{{ old("keterangan.$index", $item) }}</textarea>
<button class="btn btn-danger btn-sm remove-btn" type="button" <button class="btn btn-danger btn-sm remove-btn" type="button"
style="display: none;"> style="display: none;">
<i class="ki-outline ki-trash"></i> <i class="ki-outline ki-trash"></i>
</button> </button>
</div> </div>
@endforeach @endforeach
@else @else
<div class="keterangan flex items-center gap-2 mt-2 textarea-group w-full"> <div class="keterangan flex items-center gap-2 mt-2 textarea-group w-full">
<textarea name="keterangan[]" class="textarea mt-2" placeholder="Masukkan catatan penting" rows="3"></textarea> <textarea name="keterangan[]" class="textarea mt-2" placeholder="Masukkan catatan penting" rows="3"></textarea>
<button class="btn btn-danger btn-sm remove-btn" type="button" <button class="btn btn-danger btn-sm remove-btn" type="button"
style="display: none;"> style="display: none;">
<i class="ki-outline ki-trash"></i> <i class="ki-outline ki-trash"></i>
</button> </button>
<em id="error-keterangan" class="alert text-danger text-sm"></em> <em id="error-keterangan" class="alert text-danger text-sm"></em>
</div> </div>
@endif @endif
</div> </div>
<button type="button" onclick="addClonableItem('keterangan-container', 'keterangan')" <button type="button" onclick="addClonableItem('keterangan-container', 'keterangan')"
class="btn btn-primary btn-sm mt-5 "> class="btn btn-primary btn-sm mt-5 ">
<i class="ki-outline ki-plus"></i> <i class="ki-outline ki-plus"></i>
</button> </button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
@include('lpj::surveyor.components.modal-kamera') @include('lpj::surveyor.components.modal-kamera')
@push('scripts') @push('scripts')
@include('lpj::surveyor.js.camera-editor') @include('lpj::surveyor.js.camera-editor')
@endpush @endpush