renaldybrada
977 lines
33 KiB
PHP
977 lines
33 KiB
PHP
<?php
|
|
|
|
$riwayat = [
|
|
[
|
|
"tanggal" => "3/17/2026, 8:52:26 AM",
|
|
"status" => "Tervalidasi",
|
|
"operator" => " dr.SYAIFULLAH AMISRAGANI, Sp.OT"
|
|
],
|
|
];
|
|
if ($_SERVER['REQUEST_METHOD'] == "POST") {
|
|
echo "<pre>";
|
|
print_r($_POST);
|
|
echo "</pre>";
|
|
}
|
|
|
|
?>
|
|
|
|
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
|
|
<title>Laporan Operasi</title>
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href='/lib/suneditor/dist/css/suneditor.min.css' rel='stylesheet' type='text/css' />
|
|
<style>
|
|
.section-title {
|
|
font-weight: 600;
|
|
margin-top: 25px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.table-riwayat th {
|
|
background: #3fa7e0;
|
|
color: white;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body class="bg-white">
|
|
|
|
<div class="container mt-4">
|
|
|
|
<h4 class="text-center mb-4">FORM LAPORAN OPERASI</h4>
|
|
|
|
<form method="POST" id="formLaporanOperasi" enctype="multipart/form-data">
|
|
|
|
<!-- IDENTITAS -->
|
|
|
|
<div class="row">
|
|
|
|
<div class="col-md-6 position-relative">
|
|
<label>DPJP Operator</label>
|
|
<input
|
|
type="text"
|
|
id="searchDPJP"
|
|
class="form-control"
|
|
placeholder="Cari dokter..."
|
|
autocomplete="off"
|
|
>
|
|
<input type="hidden" name="dpjp_operator" id="dpjp_operator">
|
|
<input type="hidden" name="nama_dpjp_operator" id="nama_dpjp_operator">
|
|
<input type="hidden" name="nip_dpjp_operator" id="nip_dpjp_operator">
|
|
<input type="hidden" name="kode_dpjp_operator" id="kode_dpjp_operator">
|
|
|
|
<div
|
|
id="resultDPJP"
|
|
class="list-group position-absolute w-100"
|
|
style="z-index:1000"
|
|
></div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<label>Asisten Operator</label>
|
|
<input class="form-control" name="asisten_operator">
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="row mt-3">
|
|
|
|
<div class="col-md-6">
|
|
<label>DPJP Anastesi</label>
|
|
<input
|
|
type="text"
|
|
id="searchDokterAnestesi"
|
|
class="form-control"
|
|
placeholder="Cari dokter..."
|
|
autocomplete="off"
|
|
>
|
|
<input type="hidden" name="dpjp_anestesi" id="dpjp_anestesi">
|
|
<input type="hidden" name="nama_dpjp_anestesi" id="nama_dpjp_anestesi">
|
|
<div
|
|
id="resultDokterAnestesi"
|
|
class="list-group position-absolute w-100"
|
|
style="z-index:1000"
|
|
></div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<label>Asisten Anastesi</label>
|
|
<input class="form-control" name="asisten_anastesi">
|
|
</div>
|
|
|
|
</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-12">
|
|
<label>Diagnosa Pra Bedah</label>
|
|
<textarea class="form-control" name="diag_pre"></textarea>
|
|
</div>
|
|
|
|
</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">
|
|
|
|
<div class="row my-2 tindakanRow position-relative">
|
|
|
|
<div class="col-md-10">
|
|
<input
|
|
type="text"
|
|
class="form-control tindakanSearch"
|
|
placeholder="Cari Prosedur"
|
|
autocomplete="off"
|
|
>
|
|
<input type="hidden" name="tindakan_operatif[]" class="tindakanValue">
|
|
|
|
<div class="list-group tindakanResult position-absolute w-100" style="z-index:1000"></div>
|
|
</div>
|
|
|
|
<div class="col-md-2">
|
|
<button type="button" class="btn btn-success addTindakan">+</button>
|
|
<button type="button" class="btn btn-danger removeTindakan">🗑</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- DETAIL OPERASI -->
|
|
|
|
<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 class="col-md-4">
|
|
<label>Jenis Anastesi</label>
|
|
<select class="form-select" name="jenis_anastesi">
|
|
<option>General</option>
|
|
<option>Lokal</option>
|
|
</select>
|
|
</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 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>
|
|
|
|
<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>
|
|
|
|
<!-- 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 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>
|
|
|
|
<!-- OBG -->
|
|
|
|
<div class="row mt-3">
|
|
|
|
<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="col-md-6">
|
|
<label>Operasi Ke</label>
|
|
<input class="form-control" name="operasi_ke">
|
|
</div>
|
|
</div>
|
|
|
|
<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 class="col-md-6">
|
|
<label>Apgar Score (OBG)</label>
|
|
<input class="form-control" name="apgar">
|
|
</div>
|
|
</div>
|
|
|
|
<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 class="col-md-6">
|
|
<label>Waktu Lahir (OBG)</label>
|
|
<input class="form-control" name="waktu_lahir">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 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>
|
|
|
|
<!-- 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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<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-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-4">
|
|
<select name="jenis_darah[]" class="form-select">
|
|
<option>PRC</option>
|
|
<option>WB</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="col-md-2">
|
|
|
|
<button type="button" class="btn btn-success addDarah">+</button>
|
|
<button type="button" class="btn btn-danger removeDarah">🗑</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</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 py-3">
|
|
<label>Specimen / Jaringan dikirim ke</label>
|
|
|
|
<div class="col-md-12 mt-2" id="specimenContainer">
|
|
|
|
<div class="row specimenRow mb-2">
|
|
|
|
<div class="col-md-6">
|
|
<div class="input-group">
|
|
<input class="form-control" name="jumlah_specimen[]" type="text">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<select name="jenis_specimen[]" class="form-select">
|
|
<option>PA</option>
|
|
<option>Mikrobiologi</option>
|
|
<option>Laborat</option>
|
|
<option>Tidak Perlu</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="col-md-2">
|
|
|
|
<button type="button" class="btn btn-success addSpecimen">+</button>
|
|
<button type="button" class="btn btn-danger removeSpecimen">🗑</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</form>
|
|
|
|
<!-- TOMBOL RIWAYAT & SIMPAN LAPORAN -->
|
|
|
|
<div class="row mt-4">
|
|
|
|
<div class="col-md-12 offset-md-0 d-flex justify-content-end ">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<button class="btn btn-secondary" id="btnRiwayat">RIWAYAT LAPORAN OPERASI</button>
|
|
<button class="btn btn-primary" type="submit" id="btnSimpanLaporan">SIMPAN LAPORAN OPERASI</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- RIWAYAT -->
|
|
|
|
<div class="mt-5">
|
|
|
|
<h5>Daftar Riwayat Operasi</h5>
|
|
|
|
<table class="table table-bordered table-riwayat">
|
|
|
|
<thead>
|
|
<tr>
|
|
<th>No</th>
|
|
<th>Tanggal Simpan</th>
|
|
<th>DPJP Operator</th>
|
|
<th>Preview</th>
|
|
<th>Status</th>
|
|
<th>Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody id="tableRiwayatOperasiBody">
|
|
|
|
<?php foreach ($riwayat as $i => $r): ?>
|
|
|
|
<tr>
|
|
|
|
<td><?= $i + 1 ?></td>
|
|
<td><?= $r['tanggal'] ?></td>
|
|
<td><?= $r['operator'] ?></td>
|
|
|
|
<td>
|
|
<button class="btn btn-sm btn-outline-success">👁</button>
|
|
</td>
|
|
|
|
<td>
|
|
|
|
<?php if ($r['status'] == "Tervalidasi"): ?>
|
|
|
|
<span class="badge bg-success">Valid</span>
|
|
|
|
<?php else: ?>
|
|
|
|
<span class="badge bg-warning">Belum Validasi</span>
|
|
|
|
<?php endif ?>
|
|
|
|
</td>
|
|
|
|
<td>
|
|
<?php if ($r['status'] != "Tervalidasi"): ?>
|
|
<button class="btn btn-sm btn-success">Validasi</button>
|
|
<?php endif ?>
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
<?php endforeach ?>
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- MODAL RIWAYAT -->
|
|
<div class="modal fade" id="modalRiwayat" tabindex="-1">
|
|
<div class="modal-dialog modal-lg modal-dialog-scrollable">
|
|
<div class="modal-content">
|
|
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Riwayat Laporan Operasi</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
|
|
<div class="modal-body">
|
|
|
|
<table class="table table-bordered table-striped">
|
|
|
|
<thead class="table-primary">
|
|
<tr>
|
|
<th>No</th>
|
|
<th>Tanggal Simpan</th>
|
|
<th>DPJP Operator</th>
|
|
<th>Status</th>
|
|
<th>Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody id="tableRiwayatBody">
|
|
|
|
<tr>
|
|
<td>1</td>
|
|
<td>28-01-2026 14:18</td>
|
|
<td>dr.SYAIFULLAH AMISRAGANI, Sp.OT</td>
|
|
<td><span class="badge bg-success">Valid</span></td>
|
|
<td>
|
|
<button class="btn btn-sm btn-outline-primary">Preview</button>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>2</td>
|
|
<td>28-01-2026 15:00</td>
|
|
<td>dr.PRADANA NURHADI,Sp.U</td>
|
|
<td><span class="badge bg-warning">Draft</span></td>
|
|
<td>
|
|
<button class="btn btn-sm btn-outline-primary">Preview</button>
|
|
</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<button class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script type='text/javascript' src='/lib/suneditor/dist/suneditor.min.js'></script>
|
|
|
|
<script>
|
|
const frUraianOperasi = SUNEDITOR.create((document.getElementById('fr_uraian_operasi') || 'fr_uraian_operasi'), {
|
|
height: '200px',
|
|
})
|
|
</script>
|
|
|
|
<script>
|
|
const BASEURL = "http://10.10.150.191:8000/dataLaporanOperasi.php";
|
|
|
|
/* SEARCH AND SHOW DPJP*/
|
|
const inputDokter = document.getElementById("searchDPJP")
|
|
const resultDokter = document.getElementById("resultDPJP")
|
|
const hiddenDokter = document.getElementById("dpjp_operator")
|
|
const hiddenNamaDokter = document.getElementById("nama_dpjp_operator")
|
|
const hiddenNipDokter = document.getElementById("nip_dpjp_operator")
|
|
const hiddenKodeDokter = document.getElementById("kode_dpjp_operator")
|
|
|
|
let timer = null
|
|
|
|
inputDokter.addEventListener("input", () => {
|
|
|
|
clearTimeout(timer)
|
|
|
|
let keyword = inputDokter.value
|
|
|
|
if (keyword.length < 2) {
|
|
resultDokter.innerHTML = ""
|
|
return
|
|
}
|
|
|
|
timer = setTimeout(() => {
|
|
|
|
fetch(`${BASEURL}?action=searchDPJP&q=${keyword}`)
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
|
|
resultDokter.innerHTML = ""
|
|
// console.log(data)
|
|
data.data.forEach(d => {
|
|
|
|
let item = document.createElement("button")
|
|
|
|
item.type = "button"
|
|
item.className = "list-group-item list-group-item-action"
|
|
item.textContent = d.namadokter
|
|
|
|
item.onclick = () => {
|
|
|
|
inputDokter.value = d.namadokter
|
|
hiddenDokter.value = d.kddokter
|
|
hiddenNamaDokter.value = d.namadokter
|
|
hiddenNipDokter.value = d.nip
|
|
hiddenKodeDokter.value = d.kode_dpjp
|
|
|
|
resultDokter.innerHTML = ""
|
|
|
|
}
|
|
|
|
resultDokter.appendChild(item)
|
|
|
|
})
|
|
|
|
})
|
|
|
|
}, 300)
|
|
|
|
})
|
|
|
|
/* SEARCH AND SHOW Dokter Anestesi*/
|
|
const inputDokterAnestesi = document.getElementById("searchDokterAnestesi")
|
|
const resultDokterAnestesi = document.getElementById("resultDokterAnestesi")
|
|
const hiddenDokterAnestesi = document.getElementById("dpjp_anestesi")
|
|
const hiddenNamaDokterAnestesi = document.getElementById("nama_dpjp_anestesi")
|
|
|
|
inputDokterAnestesi.addEventListener("input", () => {
|
|
|
|
clearTimeout(timer)
|
|
|
|
let keyword = inputDokterAnestesi.value
|
|
|
|
if (keyword.length < 2) {
|
|
resultDokterAnestesi.innerHTML = ""
|
|
return
|
|
}
|
|
|
|
timer = setTimeout(() => {
|
|
|
|
fetch(`${BASEURL}?action=searchDokterAnestesi&q=${keyword}`)
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
|
|
resultDokterAnestesi.innerHTML = ""
|
|
// console.log(data)
|
|
data.data.forEach(d => {
|
|
|
|
let item = document.createElement("button")
|
|
|
|
item.type = "button"
|
|
item.className = "list-group-item list-group-item-action"
|
|
item.textContent = d.namadokter
|
|
|
|
item.onclick = () => {
|
|
|
|
inputDokterAnestesi.value = d.namadokter
|
|
hiddenDokterAnestesi.value = d.kddokter
|
|
hiddenNamaDokterAnestesi.value = d.namadokter
|
|
|
|
resultDokterAnestesi.innerHTML = ""
|
|
|
|
}
|
|
|
|
resultDokterAnestesi.appendChild(item)
|
|
|
|
})
|
|
|
|
})
|
|
|
|
}, 300)
|
|
|
|
})
|
|
|
|
/* kalkulasi waktu */
|
|
|
|
function calc(start, dur, end) {
|
|
|
|
let s = document.getElementById(start).value
|
|
let d = document.getElementById(dur).value
|
|
|
|
if (!s || !d) return
|
|
|
|
let dt = new Date(s)
|
|
dt.setMinutes(dt.getMinutes() + parseInt(d))
|
|
|
|
let yyyy = dt.getFullYear()
|
|
let mm = String(dt.getMonth() + 1).padStart(2, '0')
|
|
let dd = String(dt.getDate()).padStart(2, '0')
|
|
let hh = String(dt.getHours()).padStart(2, '0')
|
|
let mi = String(dt.getMinutes()).padStart(2, '0')
|
|
|
|
document.getElementById(end).value = `${yyyy}-${mm}-${dd}T${hh}:${mi}`
|
|
|
|
}
|
|
|
|
document.getElementById("op_mulai").onchange = () => calc("op_mulai", "lama_op", "op_selesai")
|
|
document.getElementById("lama_op").oninput = () => calc("op_mulai", "lama_op", "op_selesai")
|
|
|
|
document.getElementById("bius_mulai").onchange = () => calc("bius_mulai", "lama_bius", "bius_selesai")
|
|
document.getElementById("lama_bius").oninput = () => calc("bius_mulai", "lama_bius", "bius_selesai")
|
|
|
|
/* dynamic tindakan */
|
|
let timerTindakan = null
|
|
|
|
document.addEventListener("input", function(e){
|
|
|
|
if (!e.target.classList.contains("tindakanSearch")) return
|
|
|
|
let input = e.target
|
|
let row = input.closest(".tindakanRow")
|
|
let result = row.querySelector(".tindakanResult")
|
|
|
|
clearTimeout(timerTindakan)
|
|
|
|
let keyword = input.value
|
|
|
|
if (keyword.length < 2) {
|
|
result.innerHTML = ""
|
|
return
|
|
}
|
|
|
|
timerTindakan = setTimeout(() => {
|
|
|
|
fetch(`${BASEURL}?action=searchTindakan&q=${keyword}`)
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
|
|
result.innerHTML = ""
|
|
|
|
data.data.forEach(d => {
|
|
|
|
let item = document.createElement("button")
|
|
|
|
item.type = "button"
|
|
item.className = "list-group-item list-group-item-action"
|
|
item.textContent = d.str
|
|
|
|
item.onclick = () => {
|
|
|
|
input.value = d.str
|
|
row.querySelector(".tindakanValue").value = d.code
|
|
|
|
result.innerHTML = ""
|
|
|
|
}
|
|
|
|
result.appendChild(item)
|
|
|
|
})
|
|
|
|
})
|
|
|
|
}, 300)
|
|
|
|
})
|
|
|
|
document.addEventListener("click", function(e){
|
|
|
|
if (e.target.classList.contains("addTindakan")) {
|
|
let row = document.querySelector(".tindakanRow")
|
|
let clone = row.cloneNode(true)
|
|
|
|
clone.querySelector(".tindakanSearch").value = ""
|
|
clone.querySelector(".tindakanValue").value = ""
|
|
clone.querySelector(".tindakanResult").innerHTML = ""
|
|
|
|
row.parentNode.appendChild(clone)
|
|
}
|
|
|
|
// hapus tindakan
|
|
if (e.target.classList.contains("removeTindakan")) {
|
|
|
|
let rows = document.querySelectorAll(".tindakanRow")
|
|
|
|
if (rows.length > 1) {
|
|
e.target.closest(".tindakanRow").remove()
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
/* darah */
|
|
|
|
document.addEventListener("click", e => {
|
|
|
|
if (e.target.classList.contains("addDarah")) {
|
|
|
|
let row = document.querySelector(".darahRow").cloneNode(true)
|
|
|
|
row.querySelector('input[name="jumlah_darah[]"]').value = ""
|
|
|
|
document.getElementById("darahContainer").appendChild(row)
|
|
|
|
}
|
|
|
|
if (e.target.classList.contains("removeDarah")) {
|
|
|
|
let rows = document.querySelectorAll(".darahRow")
|
|
|
|
if (rows.length > 1) {
|
|
e.target.closest(".darahRow").remove()
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
/* specimen */
|
|
|
|
document.addEventListener("click", e => {
|
|
|
|
if (e.target.classList.contains("addSpecimen")) {
|
|
|
|
let row = document.querySelector(".specimenRow").cloneNode(true)
|
|
|
|
row.querySelector('input[name="jumlah_specimen[]"]').value = ""
|
|
|
|
document.getElementById("specimenContainer").appendChild(row)
|
|
|
|
}
|
|
|
|
if (e.target.classList.contains("removeSpecimen")) {
|
|
|
|
let rows = document.querySelectorAll(".specimenRow")
|
|
|
|
if (rows.length > 1) {
|
|
e.target.closest(".specimenRow").remove()
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
/* Tabel implant */
|
|
|
|
let tableBody = document.getElementById("tableBodyImplant")
|
|
|
|
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>
|
|
<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>
|
|
`
|
|
}
|
|
|
|
function addRowImplant() {
|
|
let rowCount = tableBody.rows.length + 1
|
|
tableBody.insertAdjacentHTML("beforeend", createRowImplant(rowCount))
|
|
reindex()
|
|
}
|
|
|
|
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(){
|
|
|
|
let modal = new bootstrap.Modal(document.getElementById("modalRiwayat"))
|
|
modal.show()
|
|
|
|
})
|
|
|
|
/* Tabel Riwayat Operasi */
|
|
document.getElementById("btnSimpanLaporan").addEventListener("click", function() {
|
|
let operatorDPJP = document.getElementById("searchDPJP").value
|
|
let tglBedah = document.getElementById("tgl_bedah")
|
|
let dateNow = new Date()
|
|
|
|
if (tglBedah.value == "") {
|
|
tglBedah.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" })
|
|
alert("Isikan tanggal pembedahan terlebih dahulu")
|
|
return
|
|
}
|
|
|
|
let tbody = document.getElementById("tableRiwayatOperasiBody")
|
|
let row = document.createElement("tr")
|
|
row.innerHTML = `
|
|
<td></td>
|
|
<td>${dateNow.toLocaleString()}</td>
|
|
<td>${operatorDPJP}</td>
|
|
<td>
|
|
<button class="btn btn-sm btn-outline-success">👁</button>
|
|
</td>
|
|
<td>
|
|
<span class="badge bg-warning">Belum Validasi</span>
|
|
</td>
|
|
<td>
|
|
<button class="btn btn-sm btn-success">Validasi</button>
|
|
</td>
|
|
`
|
|
|
|
// tbody.appendChild(row)
|
|
|
|
// tglBedah.value = ""
|
|
})
|
|
|
|
// SUBMIT FORM
|
|
document.getElementById("btnSimpanLaporan").addEventListener("click", async function() {
|
|
|
|
const form = document.getElementById("formLaporanOperasi")
|
|
|
|
let formData = new FormData(form)
|
|
formData.set("uraian", frUraianOperasi.getContents())
|
|
|
|
// const plainObject = Object.fromEntries(formData.entries());
|
|
|
|
// console.log("form value: ", plainObject)
|
|
let res = await fetch(`${BASEURL}?action=postLaporanOperasi`, {
|
|
method: "POST",
|
|
body: formData
|
|
})
|
|
|
|
let data = await res.json()
|
|
|
|
console.log(data)
|
|
|
|
})
|
|
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|