update UI figma terbaru
This commit is contained in:
renaldybrada
@@ -39,7 +39,7 @@ if ($_SERVER['REQUEST_METHOD'] == "POST") {
|
||||
|
||||
</head>
|
||||
|
||||
<body class="bg-light">
|
||||
<body class="bg-white">
|
||||
|
||||
<div class="container mt-4">
|
||||
|
||||
@@ -51,7 +51,7 @@ if ($_SERVER['REQUEST_METHOD'] == "POST") {
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-md-4 position-relative">
|
||||
<div class="col-md-6 position-relative">
|
||||
<label>DPJP Operator</label>
|
||||
<input
|
||||
type="text"
|
||||
@@ -72,21 +72,16 @@ if ($_SERVER['REQUEST_METHOD'] == "POST") {
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="col-md-6">
|
||||
<label>Asisten Operator</label>
|
||||
<input class="form-control" name="asisten_operator">
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<label>Instrumentir</label>
|
||||
<input class="form-control" name="instrumentir">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="row mt-3">
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="col-md-6">
|
||||
<label>DPJP Anastesi</label>
|
||||
<input
|
||||
type="text"
|
||||
@@ -104,43 +99,52 @@ if ($_SERVER['REQUEST_METHOD'] == "POST") {
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="col-md-6">
|
||||
<label>Asisten Anastesi</label>
|
||||
<input class="form-control" name="asisten_anastesi">
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
</div>
|
||||
|
||||
<div class="row mt-3">
|
||||
<div class="col-md-6">
|
||||
<label>Tanggal Pembedahan</label>
|
||||
<input type="date" class="form-control" name="tgl_bedah" id="tgl_bedah" required>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<label>Instrumentir</label>
|
||||
<input class="form-control" name="instrumentir">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- DIAGNOSA -->
|
||||
|
||||
<div class="row mt-3">
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="col-md-12">
|
||||
<label>Diagnosa Pra Bedah</label>
|
||||
<textarea class="form-control" name="diag_pre"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
</div>
|
||||
|
||||
<div class="row mt-3">
|
||||
<div class="col-md-12">
|
||||
<label>Diagnosa Pasca Bedah</label>
|
||||
<textarea class="form-control" name="diag_post"></textarea>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- TINDAKAN OPERATIF -->
|
||||
|
||||
<div class="section-title">Tindakan Operatif</div>
|
||||
|
||||
<div id="tindakanContainer" class="container border pl-3">
|
||||
<div id="tindakanContainer" class="container">
|
||||
|
||||
<div class="row my-2 tindakanRow position-relative">
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="col-md-10">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control tindakanSearch"
|
||||
@@ -163,228 +167,144 @@ if ($_SERVER['REQUEST_METHOD'] == "POST") {
|
||||
|
||||
<!-- DETAIL OPERASI -->
|
||||
|
||||
<div class="row my-3 d-flex flex-column">
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-3">
|
||||
<label>Jenis Tindakan Operasi</label>
|
||||
</div>
|
||||
<div class="container bg-light my-4 py-2">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<label>Jenis Tindakan Operasi</label>
|
||||
<select class="form-select" name="jenis_tindakan">
|
||||
<option>Kecil</option>
|
||||
<option>Sedang</option>
|
||||
<option>Besar</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-3">
|
||||
<label>Kode Billing</label>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<input class="form-control" name="kode_billing">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-3">
|
||||
<label>Jenis Anastesi</label>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<select class="form-select" name="jenis_anastesi">
|
||||
<option>General</option>
|
||||
<option>Lokal</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<label>Sistem Pelayanan</label>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label>Sistem Pelayanan</label>
|
||||
<select class="form-select" name="sistem_pelayanan">
|
||||
<option>Emergency</option>
|
||||
<option>Elektif</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- OPERASI TIME -->
|
||||
|
||||
</div>
|
||||
<div class="row mt-4 mb-3">
|
||||
<div class="col-md-4">
|
||||
<label>Operasi Mulai</label>
|
||||
<input type="datetime-local" name="operasi_mulai" id="op_mulai" class="form-control">
|
||||
</div>
|
||||
|
||||
<!-- OPERASI TIME -->
|
||||
|
||||
<!-- <div class="section-title">Waktu Operasi</div> -->
|
||||
|
||||
<div class="row mt-4 mb-3">
|
||||
<div class="col-md-4">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<label>Operasi Mulai</label>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<input type="datetime-local" name="operasi_mulai" id="op_mulai" class="form-control">
|
||||
<div class="col-md-4">
|
||||
<label>Lama Operasi</label>
|
||||
<div class="input-group">
|
||||
<input type="number" name="lama_operasi" id="lama_op" class="form-control">
|
||||
<span class="input-group-text">menit</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<label>Operasi Selesai</label>
|
||||
<input type="datetime-local" name="operasi_selesai" id="op_selesai" class="form-control" disabled>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<label>Lama Operasi</label>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<div class="input-group">
|
||||
<input type="number" name="lama_operasi" id="lama_op" class="form-control">
|
||||
<span class="input-group-text">menit</span>
|
||||
</div>
|
||||
<!-- PEMBIUSAN TIME-->
|
||||
|
||||
<div class="row mt-4 mb-3">
|
||||
<div class="col-md-4">
|
||||
<label>Pembiusan Mulai</label>
|
||||
<input type="datetime-local" name="pembiusan_mulai" id="bius_mulai" class="form-control">
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<label>Lama Pembiusan</label>
|
||||
<div class="input-group">
|
||||
<input type="number" name="lama_pembiusan" id="lama_bius" class="form-control">
|
||||
<span class="input-group-text">menit</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<label>Operasi Selesai</label>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<input type="datetime-local" name="operasi_selesai" id="op_selesai" class="form-control" disabled>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label>Pembiusan Selesai</label>
|
||||
<input type="datetime-local" name="pembiusan_selesai" id="bius_selesai" class="form-control" disabled>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- PEMBIUSAN TIME-->
|
||||
|
||||
<!-- <div class="section-title">Pembiusan</div> -->
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<label>Pembiusan Mulai</label>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<input type="datetime-local" name="pembiusan_mulai" id="bius_mulai" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<label>Lama Pembiusan</label>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<div class="input-group">
|
||||
<input type="number" name="lama_pembiusan" id="lama_bius" class="form-control">
|
||||
<span class="input-group-text">menit</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<label>Pembiusan Selesai</label>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<input type="datetime-local" name="pembiusan_selesai" id="bius_selesai" class="form-control" disabled>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- OBG -->
|
||||
|
||||
<!-- <div class="section-title">Data OBG</div> -->
|
||||
<div class="row mt-3">
|
||||
|
||||
<div class="row my-3 d-flex flex-column">
|
||||
|
||||
<div class="row my-3">
|
||||
<div class="col-md-3">
|
||||
<label>Jenis Pelayanan</label>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<select class="form-select" name="jenis_pelayanan">
|
||||
<option>Bersih</option>
|
||||
<option>Kotor</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label>Jenis Pelayanan</label>
|
||||
<select class="form-select" name="jenis_pelayanan">
|
||||
<option>Bersih</option>
|
||||
<option>Kotor</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-3">
|
||||
<label>Operasi Ke</label>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<input class="form-control" name="operasi_ke">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label>Operasi Ke</label>
|
||||
<input class="form-control" name="operasi_ke">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-3">
|
||||
<label>Keterangan Lahir</label>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="container bg-light my-4 py-2">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<label>Keterangan Lahir (OBG)</label>
|
||||
<select class="form-select" name="ket_lahir">
|
||||
<option>Lahir Hidup</option>
|
||||
<option>Lahir Mati</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-3">
|
||||
<label>Apgar Score</label>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="col-md-6">
|
||||
<label>Apgar Score (OBG)</label>
|
||||
<input class="form-control" name="apgar">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-3">
|
||||
<label>Berat Badan</label>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="row mt-3">
|
||||
<div class="col-md-6">
|
||||
<label>Berat Badan Bayi Lahir (OBG)</label>
|
||||
<div class="input-group">
|
||||
<input class="form-control" name="bb">
|
||||
<span class="input-group-text">gram</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-3">
|
||||
<label>Waktu Lahir</label>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<input class="form-control" name="waktu_lahir">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<label>Uraian Operasi</label>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<textarea class="form-control" id="fr_uraian_operasi" name="uraian"></textarea>
|
||||
<label>Waktu Lahir (OBG)</label>
|
||||
<input class="form-control" name="waktu_lahir">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- DARAH MASUK -->
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Jumlah Pendarahan
|
||||
<!-- URAIAN SUNEDITOR -->
|
||||
<div class="row mt-3">
|
||||
<div class="col-md-12">
|
||||
<label>Uraian Operasi</label>
|
||||
<textarea class="form-control" id="fr_uraian_operasi" name="uraian"></textarea>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
</div>
|
||||
|
||||
<!-- DARAH MASUK -->
|
||||
<div class="row mt-3">
|
||||
<div class="col-md-6">
|
||||
<label>Komplikasi Selama Pembedahan</label>
|
||||
<input class="form-control" name="komplikasi_pembedahan">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label>Jumlah Pendarahan</label>
|
||||
<div class="input-group">
|
||||
<input class="form-control" type="number" name="sum_darah">
|
||||
<span class="input-group-text">cc</span>
|
||||
@@ -392,21 +312,20 @@ if ($_SERVER['REQUEST_METHOD'] == "POST") {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mt-3">
|
||||
<div class="col-md-3">Jenis & Jumlah Darah Masuk</div>
|
||||
|
||||
<div class="col-md-9" id="darahContainer">
|
||||
<div class="row my-4 py-2 bg-light">
|
||||
<label>Jenis & Jumlah Darah Masuk</label>
|
||||
<div class="col-md-12 mt-2" id="darahContainer">
|
||||
|
||||
<div class="row darahRow mb-2">
|
||||
|
||||
<div class="col-md-5">
|
||||
<div class="col-md-6">
|
||||
<div class="input-group">
|
||||
<input class="form-control" name="jumlah_darah[]" type="number">
|
||||
<span class="input-group-text">cc</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-5">
|
||||
<div class="col-md-4">
|
||||
<select name="jenis_darah[]" class="form-select">
|
||||
<option>PRC</option>
|
||||
<option>WB</option>
|
||||
@@ -425,101 +344,59 @@ if ($_SERVER['REQUEST_METHOD'] == "POST") {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- FILE IMPLANT -->
|
||||
|
||||
<div class="section-title">Implant</div>
|
||||
<div class="row d-flex flex-column mt-3 border py-3" id="implantSection">
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-3">
|
||||
<label>Merek</label>
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<input class="form-control" type="file" id="merek">
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<p>*Format: JPG, PNG | Maks: 1MB</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-3">
|
||||
<label>Nama Implant</label>
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<input class="form-control" type="file" id="implant">
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<p>*Format: JPG, PNG | Maks: 1MB</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-3">
|
||||
<label>Stiker / Nomor Register Implant</label>
|
||||
</div>
|
||||
<div class="col-md-9">
|
||||
<input class="form-control" id="stiker">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-3">
|
||||
<label>Nama Pendamping Implant</label>
|
||||
</div>
|
||||
<div class="col-md-9">
|
||||
<input class="form-control" id="pendamping_implant">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12 d-flex justify-content-end">
|
||||
<button type="button" id="btnSimpanImplant" class="btn btn-primary mt-3">Simpan</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TABLE IMPLANT -->
|
||||
<div class="mt-4">
|
||||
|
||||
<!-- <h5>Daftar Implant</h5> -->
|
||||
|
||||
<table class="table table-bordered table-striped">
|
||||
|
||||
<thead class="table-primary">
|
||||
<tr>
|
||||
<th>Merek</th>
|
||||
<th>Nama Implant</th>
|
||||
<th>Stiker</th>
|
||||
<th>Pendamping</th>
|
||||
<th>Aksi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody id="tableImplantBody">
|
||||
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
|
||||
</div>
|
||||
<!-- IMPLANT -->
|
||||
|
||||
<div class="row">
|
||||
<table class="table table-bordered align-middle bg-light">
|
||||
<thead class="table-primary text-center">
|
||||
<tr>
|
||||
<th>No</th>
|
||||
<th>Merek</th>
|
||||
<th>Nama Implant</th>
|
||||
<th>Stiker / Nomor Register Implant</th>
|
||||
<th>Nama Pendamping Implant</th>
|
||||
<th>Gambar</th>
|
||||
<th>Aksi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="tableBodyImplant">
|
||||
<tr>
|
||||
<td class="text-center row-number">1</td>
|
||||
<td><input type="text" name="merek[]"></td>
|
||||
<td><input type="text" name="nama_implant[]"></td>
|
||||
<td><input type="text" name="nomor_implant[]"></td>
|
||||
<td><input type="text" name="pendamping[]"></td>
|
||||
<td>
|
||||
<input type="file" name="gambar[]" class="form-control form-control-sm">
|
||||
<small class="text-muted">Format: JPG, PNG | Maks: 1MB</small>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<button type="button" class="btn btn-success btn-sm" onclick="addRowImplant()">+</button>
|
||||
<button type="button" class="btn btn-danger btn-sm" onclick="deleteRowImplant(this)">🗑</button>
|
||||
<button type="button" class="btn btn-primary btn-sm" onclick="moveUpImplant(this)">↑</button>
|
||||
<button type="button" class="btn btn-primary btn-sm" onclick="moveDownImplant(this)">↓</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- SPECIMEN / JARINGAN -->
|
||||
|
||||
<div class="row mt-3 border py-3">
|
||||
<div class="col-md-3">Specimen / Jaringan dikirim ke</div>
|
||||
<div class="row mt-3 py-3">
|
||||
<label>Specimen / Jaringan dikirim ke</label>
|
||||
|
||||
<div class="col-md-9" id="specimenContainer">
|
||||
<div class="col-md-12 mt-2" id="specimenContainer">
|
||||
|
||||
<div class="row specimenRow mb-2">
|
||||
|
||||
<div class="col-md-5">
|
||||
<div class="col-md-6">
|
||||
<div class="input-group">
|
||||
<input class="form-control" name="jumlah_specimen[]" type="text">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-5">
|
||||
<div class="col-md-4">
|
||||
<select name="jenis_specimen[]" class="form-select">
|
||||
<option>PA</option>
|
||||
<option>Mikrobiologi</option>
|
||||
@@ -917,21 +794,6 @@ if ($_SERVER['REQUEST_METHOD'] == "POST") {
|
||||
|
||||
/* darah */
|
||||
|
||||
// function sumDarah() {
|
||||
|
||||
// let inputs = document.querySelectorAll('input[name="jumlah_darah[]"]')
|
||||
// let total = 0
|
||||
|
||||
// inputs.forEach(input => {
|
||||
// let val = parseFloat(input.value)
|
||||
// if (!isNaN(val)) {
|
||||
// total += val
|
||||
// }
|
||||
// })
|
||||
|
||||
// document.querySelector('input[name="sum_darah"]').value = total
|
||||
// }
|
||||
|
||||
document.addEventListener("click", e => {
|
||||
|
||||
if (e.target.classList.contains("addDarah")) {
|
||||
@@ -950,21 +812,12 @@ if ($_SERVER['REQUEST_METHOD'] == "POST") {
|
||||
|
||||
if (rows.length > 1) {
|
||||
e.target.closest(".darahRow").remove()
|
||||
sumDarah()
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
document.addEventListener("input", function(e) {
|
||||
|
||||
if (e.target.name === "jumlah_darah[]") {
|
||||
sumDarah()
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
/* specimen */
|
||||
|
||||
document.addEventListener("click", e => {
|
||||
@@ -993,61 +846,65 @@ if ($_SERVER['REQUEST_METHOD'] == "POST") {
|
||||
|
||||
/* Tabel implant */
|
||||
|
||||
document.getElementById("btnSimpanImplant").addEventListener("click", function() {
|
||||
let tableBody = document.getElementById("tableBodyImplant")
|
||||
|
||||
let merekInput = document.getElementById("merek")
|
||||
let implantInput = document.getElementById("implant")
|
||||
let stiker = document.getElementById("stiker").value
|
||||
let pendamping = document.getElementById("pendamping_implant").value
|
||||
|
||||
let merekFile = merekInput.files[0]
|
||||
let implantFile = implantInput.files[0]
|
||||
|
||||
if (merekFile == undefined || implantFile == undefined || stiker == '' || pendamping == '') {
|
||||
alert('form implant harus diisi')
|
||||
return
|
||||
}
|
||||
|
||||
let merekName = merekFile ? merekFile.name : "-"
|
||||
let implantName = implantFile ? implantFile.name : "-"
|
||||
|
||||
let tbody = document.getElementById("tableImplantBody")
|
||||
|
||||
let row = document.createElement("tr")
|
||||
|
||||
row.innerHTML = `
|
||||
<td>${merekName}</td>
|
||||
<td>${implantName}</td>
|
||||
<td>${stiker}</td>
|
||||
<td>${pendamping}</td>
|
||||
<td>
|
||||
<button class="btn btn-sm btn-danger btnDelete">Hapus</button>
|
||||
function createRowImplant(index) {
|
||||
return `
|
||||
<tr>
|
||||
<td class="text-center row-number">${index}</td>
|
||||
<td><input type="text" name="merek[]"></td>
|
||||
<td><input type="text" name="nama_implant[]"></td>
|
||||
<td><input type="text" name="nomor_implant[]"></td>
|
||||
<td><input type="text" name="pendamping[]"></td>
|
||||
<td>
|
||||
<input type="file" name="gambar[]" class="form-control form-control-sm">
|
||||
<small class="text-muted">Format: JPG, PNG | Maks: 1MB</small>
|
||||
</td>
|
||||
`
|
||||
|
||||
tbody.appendChild(row)
|
||||
|
||||
clearForm()
|
||||
|
||||
})
|
||||
|
||||
function clearForm() {
|
||||
|
||||
document.getElementById("merek").value = ""
|
||||
document.getElementById("implant").value = ""
|
||||
document.getElementById("stiker").value = ""
|
||||
document.getElementById("pendamping_implant").value = ""
|
||||
<td class="text-center">
|
||||
<button type="button" class="btn btn-success btn-sm" onclick="addRowImplant()">+</button>
|
||||
<button type="button" class="btn btn-danger btn-sm deleteImplant" onclick="deleteRowImplant(this)">🗑</button>
|
||||
<button type="button"class="btn btn-primary btn-sm upImplant" onclick="moveUpImplant(this)">↑</button>
|
||||
<button type="button" class="btn btn-primary btn-sm downImplant" onclick="moveDownImplant(this)">↓</button>
|
||||
</td>
|
||||
</tr>
|
||||
`
|
||||
}
|
||||
|
||||
document.addEventListener("click", function(e) {
|
||||
function addRowImplant() {
|
||||
let rowCount = tableBody.rows.length + 1
|
||||
tableBody.insertAdjacentHTML("beforeend", createRowImplant(rowCount))
|
||||
reindex()
|
||||
}
|
||||
|
||||
if (e.target.classList.contains("btnDelete")) {
|
||||
|
||||
e.target.closest("tr").remove()
|
||||
function deleteRowImplant(btn) {
|
||||
let row = btn.closest("tr")
|
||||
row.remove()
|
||||
reindex()
|
||||
}
|
||||
|
||||
function moveUpImplant(btn) {
|
||||
let row = btn.closest("tr")
|
||||
let prev = row.previousElementSibling
|
||||
if (prev) {
|
||||
row.parentNode.insertBefore(row, prev)
|
||||
reindex()
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
function moveDownImplant(btn) {
|
||||
let row = btn.closest("tr")
|
||||
let next = row.nextElementSibling
|
||||
if (next) {
|
||||
row.parentNode.insertBefore(next, row)
|
||||
reindex()
|
||||
}
|
||||
}
|
||||
|
||||
function reindex() {
|
||||
[...tableBody.rows].forEach((row, i) => {
|
||||
row.querySelector(".row-number").innerText = i + 1
|
||||
})
|
||||
}
|
||||
|
||||
/* Modal Riwayat*/
|
||||
document.getElementById("btnRiwayat").addEventListener("click", function(){
|
||||
@@ -1098,7 +955,7 @@ if ($_SERVER['REQUEST_METHOD'] == "POST") {
|
||||
|
||||
let formData = new FormData(form)
|
||||
formData.set("uraian", frUraianOperasi.getContents())
|
||||
|
||||
|
||||
// const plainObject = Object.fromEntries(formData.entries());
|
||||
|
||||
// console.log("form value: ", plainObject)
|
||||
|
||||
Reference in New Issue
Block a user