1057 lines
34 KiB
PHP
1057 lines
34 KiB
PHP
<?php
|
|
|
|
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">
|
|
|
|
<style>
|
|
.section-title {
|
|
font-weight: 600;
|
|
margin-top: 25px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.table-riwayat th {
|
|
background: #3fa7e0;
|
|
color: white;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body class="bg-light">
|
|
|
|
<div class="container mt-4">
|
|
|
|
<h4 class="text-center mb-4">FORM LAPORAN OPERASI</h4>
|
|
|
|
<form method="POST" enctype="multipart/form-data">
|
|
|
|
<!-- IDENTITAS -->
|
|
|
|
<div class="row">
|
|
|
|
<div class="col-md-4 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">
|
|
<div
|
|
id="resultDPJP"
|
|
class="list-group position-absolute w-100"
|
|
style="z-index:1000"
|
|
></div>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<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">
|
|
<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">
|
|
<div
|
|
id="resultDokterAnestesi"
|
|
class="list-group position-absolute w-100"
|
|
style="z-index:1000"
|
|
></div>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<label>Asisten Anastesi</label>
|
|
<input class="form-control" name="asisten_anastesi">
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<label>Tanggal Pembedahan</label>
|
|
<input type="date" class="form-control" name="tgl_bedah" id="tgl_bedah" required>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- DIAGNOSA -->
|
|
|
|
<div class="row mt-3">
|
|
|
|
<div class="col-md-6">
|
|
<label>Diagnosa Pra Bedah</label>
|
|
<textarea class="form-control" name="diag_pre"></textarea>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<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 class="row my-2 tindakanRow position-relative">
|
|
|
|
<div class="col-md-6">
|
|
<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>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- 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="col-md-4">
|
|
<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">
|
|
<select class="form-select" name="sistem_pelayanan">
|
|
<option>Emergency</option>
|
|
<option>Elektif</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
</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" id="op_mulai" class="form-control">
|
|
</div>
|
|
</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" id="lama_op" 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>Operasi Selesai</label>
|
|
</div>
|
|
<div class="col-md-8">
|
|
<input type="datetime-local" id="op_selesai" class="form-control" disabled>
|
|
</div>
|
|
</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" 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" 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" id="bius_selesai" class="form-control" disabled>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- OBG -->
|
|
|
|
<!-- <div class="section-title">Data OBG</div> -->
|
|
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<div class="row mb-3">
|
|
<div class="col-md-3">
|
|
<label>Keterangan Lahir</label>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<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">
|
|
<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="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" rows="5" name="uraian"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- DARAH MASUK -->
|
|
<div class="row">
|
|
<div class="col-md-3">
|
|
Jumlah Pendarahan
|
|
</div>
|
|
<div class="col-md-4">
|
|
<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 mt-3">
|
|
<div class="col-md-3">Jenis & Jumlah Darah Masuk</div>
|
|
|
|
<div class="col-md-9" id="darahContainer">
|
|
|
|
<div class="row darahRow mb-2">
|
|
|
|
<div class="col-md-5">
|
|
<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">
|
|
<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>
|
|
|
|
<!-- 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>
|
|
|
|
</div>
|
|
|
|
<!-- SPECIMEN / JARINGAN -->
|
|
|
|
<div class="row mt-3 border py-3">
|
|
<div class="col-md-3">Specimen / Jaringan dikirim ke</div>
|
|
|
|
<div class="col-md-9" id="specimenContainer">
|
|
|
|
<div class="row specimenRow mb-2">
|
|
|
|
<div class="col-md-5">
|
|
<div class="input-group">
|
|
<input class="form-control" name="jumlah_specimen[]" type="text">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-5">
|
|
<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>
|
|
const BASEURL = "http://localhost:8080/dataLaporanOperasi.php";
|
|
|
|
/* SEARCH AND SHOW DPJP*/
|
|
const inputDokter = document.getElementById("searchDPJP")
|
|
const resultDokter = document.getElementById("resultDPJP")
|
|
const hiddenDokter = document.getElementById("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
|
|
|
|
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")
|
|
|
|
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
|
|
|
|
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(`http://localhost:8080/dataLaporanOperasi.php?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")) return
|
|
|
|
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)
|
|
|
|
})
|
|
|
|
/* 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")) {
|
|
|
|
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()
|
|
sumDarah()
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
document.addEventListener("input", function(e) {
|
|
|
|
if (e.target.name === "jumlah_darah[]") {
|
|
sumDarah()
|
|
}
|
|
|
|
})
|
|
|
|
/* 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 */
|
|
|
|
document.getElementById("btnSimpanImplant").addEventListener("click", function() {
|
|
|
|
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>
|
|
</td>
|
|
`
|
|
|
|
tbody.appendChild(row)
|
|
|
|
clearForm()
|
|
|
|
})
|
|
|
|
function clearForm() {
|
|
|
|
document.getElementById("merek").value = ""
|
|
document.getElementById("implant").value = ""
|
|
document.getElementById("stiker").value = ""
|
|
document.getElementById("pendamping_implant").value = ""
|
|
}
|
|
|
|
document.addEventListener("click", function(e) {
|
|
|
|
if (e.target.classList.contains("btnDelete")) {
|
|
|
|
e.target.closest("tr").remove()
|
|
|
|
}
|
|
|
|
})
|
|
|
|
/* 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("dpjp_operator").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 = ""
|
|
})
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|