init
This commit is contained in:
renaldybrada
@@ -0,0 +1,727 @@
|
||||
<?php
|
||||
|
||||
$riwayat = [
|
||||
[
|
||||
"tanggal" => "28-01-2026 14:18:59",
|
||||
"operator" => "dr.SYAIFULLAH AMISRAGANI, Sp.OT",
|
||||
"status" => "Tervalidasi"
|
||||
],
|
||||
[
|
||||
"tanggal" => "28-01-2026 14:18:59",
|
||||
"operator" => "dr.PRADANA NURHADI,Sp.U",
|
||||
"status" => "Belum Validasi"
|
||||
]
|
||||
];
|
||||
|
||||
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">
|
||||
<label>DPJP Operator</label>
|
||||
<select class="form-select" name="dpjp_operator">
|
||||
<option>dr.SYAIFULLAH AMISRAGANI, Sp.OT</option>
|
||||
</select>
|
||||
</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>
|
||||
<select class="form-select" name="dpjp_anastesi">
|
||||
<option>dr.FANNIYAH,Sp.An</option>
|
||||
</select>
|
||||
</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">
|
||||
</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">
|
||||
|
||||
<div class="col-md-6">
|
||||
<input class="form-control" name="tindakan_operatif[]" placeholder="Cari Prosedur">
|
||||
</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>Operasi Selesai</label>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<input type="datetime-local" id="op_selesai" class="form-control" disabled>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<label>Lama Operasi (menit)</label>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<input type="number" id="lama_op" class="form-control">
|
||||
</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>Pembiusan Selesai</label>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<input type="datetime-local" id="bius_selesai" class="form-control" disabled>
|
||||
</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">
|
||||
<input type="number" id="lama_bius" class="form-control">
|
||||
</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">
|
||||
<div class="section-title">Uraian Operasi</div>
|
||||
</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="text" name="sum_darah" disabled>
|
||||
<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="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">RIWAYAT LAPORAN OPERASI</button>
|
||||
<button class="btn btn-primary">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>
|
||||
|
||||
<?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>
|
||||
<button class="btn btn-sm btn-success">Validasi</button>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<?php endforeach ?>
|
||||
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 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))
|
||||
|
||||
document.getElementById(end).value = dt.toISOString().slice(0, 16)
|
||||
|
||||
}
|
||||
|
||||
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 */
|
||||
|
||||
document.addEventListener("click", e => {
|
||||
|
||||
if (e.target.classList.contains("addTindakan")) {
|
||||
|
||||
let row = document.querySelector(".tindakanRow").cloneNode(true)
|
||||
document.getElementById("tindakanContainer").appendChild(row)
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
/* darah */
|
||||
|
||||
document.addEventListener("click", e => {
|
||||
|
||||
if (e.target.classList.contains("addDarah")) {
|
||||
|
||||
let row = document.querySelector(".darahRow").cloneNode(true)
|
||||
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)
|
||||
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]
|
||||
|
||||
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()
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user