search dropdown

This commit is contained in:
Sveemaaa 2026-05-09 10:15:46 +07:00
parent 6c4e46b542
commit b2de8c4905
7 changed files with 77 additions and 77 deletions

View File

@ -31,9 +31,6 @@ public function up(): void
$table->string('hasil'); $table->string('hasil');
$table->decimal('zs_tbu', 5, 2)->nullable(); $table->decimal('zs_tbu', 5, 2)->nullable();
$table->decimal('bmi', 5, 2)->nullable(); $table->decimal('bmi', 5, 2)->nullable();
$table->decimal('zs_bmi_u', 5, 2)->nullable();
$table->string('status_gizi_bmi', 100)->nullable();
$table->timestamps(); $table->timestamps();
}); });

View File

@ -22,7 +22,7 @@ public function up(): void
'Ibu hamil gizi kurang', 'Ibu hamil gizi kurang',
'Ibu hamil gizi normal', 'Ibu hamil gizi normal',
'Ibu hamil gizi lebih', 'Ibu hamil gizi lebih',
'Ibu hamil obesitas', 'Ibu hamil obesitas'
])->nullable(); ])->nullable();
$table->timestamps(); $table->timestamps();
}); });

View File

@ -38,7 +38,7 @@ public function up(): void
'Ibu hamil gizi kurang', 'Ibu hamil gizi kurang',
'Ibu hamil gizi normal', 'Ibu hamil gizi normal',
'Ibu hamil gizi lebih', 'Ibu hamil gizi lebih',
'Ibu hamil obesitas', 'Ibu hamil obesitas'
])->nullable(); ])->nullable();
$table->timestamps(); $table->timestamps();

View File

@ -1,33 +0,0 @@
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\DB;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*/
public function up(): void
{
DB::statement("ALTER TABLE edukasi MODIFY kategori ENUM(
'Sangat Pendek',
'Pendek',
'Normal',
'Ibu hamil gizi kurang',
'Ibu hamil gizi normal',
'Ibu hamil gizi lebih',
'Ibu hamil obesitas'
) NULL");
}
/**
* Reverse the migrations.
*/
public function down(): void
{
//
}
};

View File

@ -19,6 +19,12 @@
<link href="{{ asset('assets/vendor/simple-datatables/style.css') }}" rel="stylesheet"> <link href="{{ asset('assets/vendor/simple-datatables/style.css') }}" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" /> <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link href="{{ asset('assets/css/style.css') }}" rel="stylesheet"> <link href="{{ asset('assets/css/style.css') }}" rel="stylesheet">
<!-- jQuery dulu -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Baru Select2 -->
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<!-- CSS Select2 di head -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet"/>
<style> <style>
html { html {

View File

@ -49,17 +49,16 @@
<div class="col-md-6 mb-3"> <div class="col-md-6 mb-3">
<label class="form-label fw-semibold">Nama Balita</label> <label class="form-label fw-semibold">Nama Balita</label>
<div class="input-group"> <select name="balita_id" id="balita_id" class="form-select custom-input" required>
<span class="input-group-text bg-white border-end-0"><i class="bi bi-search text-muted"></i></span> <option value="" selected disabled></option>
<select name="balita_id" id="balita_id" class="form-select border-start-0 custom-input select2" required> @foreach($balita as $b)
<option value="" selected disabled>Cari nama balita...</option> <option value="{{ $b->id }}"
@foreach($balita as $b) data-tgl="{{ $b->tgl_lahir }}"
<option value="{{ $b->id }}" data-tgl="{{ $b->tgl_lahir }}" data-jk="{{ $b->jenis_kelamin }}"> data-jk="{{ $b->jenis_kelamin }}">
{{ $b->nama }} {{ $b->nama }}
</option> </option>
@endforeach @endforeach
</select> </select>
</div>
</div> </div>
<div class="col-md-6 mb-3"> <div class="col-md-6 mb-3">
@ -127,26 +126,46 @@
</style> </style>
<script> <script>
// JavaScript kamu tetap sama, logikanya sudah benar $(document).ready(function() {
// Inisialisasi Select2
$('#balita_id').select2({
placeholder: 'Cari nama balita...',
allowClear: true,
width: '100%'
});
// Event change untuk Select2 harus pakai .on('change')
$('#balita_id').on('change', function() {
updateData();
});
// Event change tanggal tetap sama
document.getElementById("tanggal_ukur").addEventListener("change", updateData);
});
function updateData() { function updateData() {
let sel = document.getElementById("balita_id"); let sel = document.getElementById("balita_id");
let opt = sel.options[sel.selectedIndex]; let opt = sel.options[sel.selectedIndex];
if (opt.value) { if (opt && opt.value) {
let jk = opt.getAttribute("data-jk"); let jk = opt.getAttribute("data-jk");
document.getElementById("jk_display").value = (jk == 1) ? "Laki-laki" : "Perempuan"; document.getElementById("jk_display").value = (jk == 1) ? "Laki-laki" : "Perempuan";
document.getElementById("jk_input").value = jk; document.getElementById("jk_input").value = jk;
let tglLahir = new Date(opt.getAttribute("data-tgl")); let tglLahir = new Date(opt.getAttribute("data-tgl"));
let tglUkur = new Date(document.getElementById("tanggal_ukur").value); let tglUkur = new Date(document.getElementById("tanggal_ukur").value);
let totalBulan = (tglUkur.getFullYear() - tglLahir.getFullYear()) * 12 + (tglUkur.getMonth() - tglLahir.getMonth()); let totalBulan = (tglUkur.getFullYear() - tglLahir.getFullYear()) * 12
+ (tglUkur.getMonth() - tglLahir.getMonth());
if (tglUkur.getDate() < tglLahir.getDate()) totalBulan--; if (tglUkur.getDate() < tglLahir.getDate()) totalBulan--;
document.getElementById("usia_display").value = (totalBulan < 0 ? 0 : totalBulan) + " Bulan"; document.getElementById("usia_display").value = (totalBulan < 0 ? 0 : totalBulan) + " Bulan";
document.getElementById("usia_input").value = (totalBulan < 0 ? 0 : totalBulan); document.getElementById("usia_input").value = (totalBulan < 0 ? 0 : totalBulan);
} else {
document.getElementById("jk_display").value = '';
document.getElementById("jk_input").value = '';
document.getElementById("usia_display").value = '';
document.getElementById("usia_input").value = '';
} }
} }
document.getElementById("balita_id").addEventListener("change", updateData);
document.getElementById("tanggal_ukur").addEventListener("change", updateData);
</script> </script>
@endsection @endsection

View File

@ -51,17 +51,15 @@
<div class="col-md-6 mb-3"> <div class="col-md-6 mb-3">
<label class="form-label fw-semibold">Nama Ibu Hamil</label> <label class="form-label fw-semibold">Nama Ibu Hamil</label>
<div class="input-group"> <select name="ibu_hamil_id" id="ibu_id" class="form-select custom-input" required>
<span class="input-group-text bg-white border-end-0"><i class="bi bi-search text-muted"></i></span> <option value="" selected disabled></option>
<select name="ibu_hamil_id" id="ibu_id" class="form-select border-start-0 custom-input select2" required> @foreach($ibu_hamil as $ibu)
<option value="" selected disabled>Cari nama ibu...</option> <option value="{{ $ibu->id }}"
@foreach($ibu_hamil as $ibu) data-tgl="{{ $ibu->tgl_lahir }}">
<option value="{{ $ibu->id }}" data-tgl="{{ $ibu->tgl_lahir }}"> {{ $ibu->nama }}
{{ $ibu->nama }} </option>
</option> @endforeach
@endforeach </select>
</select>
</div>
</div> </div>
<div class="col-md-6 mb-3"> <div class="col-md-6 mb-3">
@ -132,21 +130,34 @@
</style> </style>
<script> <script>
document.getElementById("ibu_id").addEventListener("change", function() { $(document).ready(function() {
let selected = this.options[this.selectedIndex]; // Inisialisasi Select2
let tgl_lahir = selected.getAttribute("data-tgl"); $('#ibu_id').select2({
placeholder: 'Cari nama ibu hamil...',
allowClear: true,
width: '100%'
});
if(tgl_lahir){ // Event change Select2
let lahir = new Date(tgl_lahir); $('#ibu_id').on('change', function() {
let today = new Date(); let selected = document.getElementById("ibu_id");
let usia = today.getFullYear() - lahir.getFullYear(); let opt = selected.options[selected.selectedIndex];
let m = today.getMonth() - lahir.getMonth(); let tgl_lahir = opt.getAttribute("data-tgl");
if (m < 0 || (m === 0 && today.getDate() < lahir.getDate())) { if (tgl_lahir) {
usia--; let lahir = new Date(tgl_lahir);
let today = new Date();
let usia = today.getFullYear() - lahir.getFullYear();
let m = today.getMonth() - lahir.getMonth();
if (m < 0 || (m === 0 && today.getDate() < lahir.getDate())) {
usia--;
}
document.getElementById("usia").value = usia + " Tahun";
} else {
document.getElementById("usia").value = '';
} }
document.getElementById("usia").value = usia + " Tahun"; });
}
}); });
</script> </script>
@endsection @endsection