1193 lines
28 KiB
HTML
1193 lines
28 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="id">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Supervisi Monev Pelayanan Ambulans 119</title>
|
||
|
||
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
|
||
<style>
|
||
|
||
body {
|
||
font-size: 11px;
|
||
background: #fff;
|
||
padding: 2rem;
|
||
}
|
||
.section-title {
|
||
background: #dee2e6;
|
||
padding: 4px 8px;
|
||
font-weight: bold;
|
||
margin-top: 1rem;
|
||
}
|
||
.data-label {
|
||
font-weight: 500;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body class="bg-light">
|
||
|
||
<div class="container py-4" style="max-width:1400px;">
|
||
|
||
<div class="card shadow border-0 rounded-4">
|
||
|
||
<div class="card-body p-4 print-area">
|
||
|
||
<!-- HEADER -->
|
||
<div class="text-center border-bottom pb-3 mb-4">
|
||
<h3 class="fw-bold mb-1">
|
||
FORM SUPERVISI MONITORING DAN EVALUASI
|
||
</h3>
|
||
<h5 class="mb-1">
|
||
PELAYANAN AMBULANS 119 PER ORDER/PASIEN
|
||
</h5>
|
||
<small class="text-muted">
|
||
RSUD Dr. Saiful Anwar Malang
|
||
</small>
|
||
</div>
|
||
|
||
<!-- DATA SUPERVISI -->
|
||
<div class="card border mb-4">
|
||
|
||
<div class="card-header bg-secondary text-white fw-bold">
|
||
DATA SUPERVISI
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
|
||
<div class="row g-3">
|
||
|
||
<div class="col-md-6">
|
||
<label class="form-label fw-semibold">
|
||
Supervisor
|
||
</label>
|
||
|
||
<select class="form-select" id="supervisor">
|
||
<option value="">-- Pilih --</option>
|
||
<option>Danang Guritno, S.Kep., Ns.</option>
|
||
<option>Brian Septa SP, A.Md.Kep., S.Kep.</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="col-md-6">
|
||
<label class="form-label fw-semibold">
|
||
Tanggal Supervisi
|
||
</label>
|
||
|
||
<input type="date"
|
||
class="form-control"
|
||
id="tanggalSupervisi">
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
<!-- DATA PASIEN -->
|
||
<div class="card border mb-4">
|
||
|
||
<div class="card-header bg-primary text-white fw-bold">
|
||
DATA PASIEN / PELAYANAN
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
|
||
<div class="row g-3">
|
||
|
||
<div class="col-md-3">
|
||
<label class="form-label fw-semibold">
|
||
Tanggal Pelayanan
|
||
</label>
|
||
|
||
<input type="date"
|
||
class="form-control"
|
||
id="tanggalPelayanan">
|
||
</div>
|
||
|
||
<div class="col-md-3">
|
||
<label class="form-label fw-semibold">
|
||
Nomor Register
|
||
</label>
|
||
|
||
<input type="text"
|
||
class="form-control"
|
||
id="nomorRegister">
|
||
</div>
|
||
|
||
<div class="col-md-3">
|
||
<label class="form-label fw-semibold">
|
||
Nama Pasien
|
||
</label>
|
||
|
||
<input type="text"
|
||
class="form-control"
|
||
id="namaPasien">
|
||
</div>
|
||
|
||
<div class="col-md-3">
|
||
<label class="form-label fw-semibold">
|
||
Jenis Layanan
|
||
</label>
|
||
|
||
<select class="form-select" id="jenisLayanan">
|
||
<option value="">-- Pilih Jenis Layanan --</option>
|
||
|
||
<option value="RFDK – Rumah ke Faskes Dalam Kota">
|
||
RFDK – Rumah ke Faskes Dalam Kota
|
||
</option>
|
||
|
||
<option value="F-FDK – Fasilitas Umum ke Faskes Dalam Kota">
|
||
F-FDK – Fasilitas Umum ke Faskes Dalam Kota
|
||
</option>
|
||
|
||
<option value="AFDK – Antar Faskes Dalam Kota">
|
||
AFDK – Antar Faskes Dalam Kota
|
||
</option>
|
||
|
||
<option value="AFLK – Antar Faskes Luar Kota">
|
||
AFLK – Antar Faskes Luar Kota
|
||
</option>
|
||
|
||
<option value="PDK – Pulang Dalam Kota">
|
||
PDK – Pulang Dalam Kota
|
||
</option>
|
||
|
||
<option value="PLK – Pulang Luar Kota">
|
||
PLK – Pulang Luar Kota
|
||
</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="col-md-12">
|
||
<label class="form-label fw-semibold">
|
||
Tujuan
|
||
</label>
|
||
|
||
<input type="text"
|
||
class="form-control"
|
||
id="tujuan">
|
||
</div>
|
||
|
||
<div class="col-md-2">
|
||
<label class="form-label fw-semibold">
|
||
Armada
|
||
</label>
|
||
|
||
<select class="form-select" id="armada">
|
||
<option value="">-- Pilih Armada --</option>
|
||
<option>Premio</option>
|
||
<option>Commuter</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="col-md-2">
|
||
<label class="form-label fw-semibold">
|
||
Tas Emergensi
|
||
</label>
|
||
|
||
<select class="form-select" id="tasEmergensi">
|
||
<option value="">-- Pilih --</option>
|
||
<option>Tas Emergensi No. 1</option>
|
||
<option>Tas Emergensi No. 2</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="col-md-2">
|
||
<label class="form-label fw-semibold">
|
||
Jenis Pembayaran
|
||
</label>
|
||
|
||
<select class="form-select" id="jenisPembayaran">
|
||
<option value="">-- Pilih --</option>
|
||
<option>Tunai</option>
|
||
<option>BPJS</option>
|
||
<option>Tagihan</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="col-md-3">
|
||
<label class="form-label fw-semibold">
|
||
Total Biaya (Rp)
|
||
</label>
|
||
|
||
<input type="number"
|
||
class="form-control"
|
||
id="totalBiaya">
|
||
</div>
|
||
|
||
<div class="col-md-3">
|
||
<label class="form-label fw-semibold">
|
||
No. Kuitansi
|
||
</label>
|
||
|
||
<input type="text"
|
||
class="form-control"
|
||
id="noKuitansi">
|
||
</div>
|
||
|
||
<!-- KILOMETER -->
|
||
<div class="row g-3 mb-3">
|
||
|
||
<div class="col-md-2">
|
||
<label class="form-label fw-semibold">
|
||
KM Start Pangkalan Ambulans 119
|
||
</label>
|
||
<input type="number"
|
||
class="form-control"
|
||
id="kmAwalMako"
|
||
oninput="hitungKM()">
|
||
</div>
|
||
|
||
<div class="col-md-2">
|
||
<label class="form-label fw-semibold">
|
||
KM Tiba di Lokasi Pasien
|
||
</label>
|
||
<input type="number"
|
||
class="form-control"
|
||
id="kmLokasi"
|
||
oninput="hitungKM()">
|
||
</div>
|
||
|
||
<div class="col-md-2">
|
||
<label class="form-label fw-semibold">
|
||
KM Tiba di Tujuan Pengantaran
|
||
</label>
|
||
<input type="number"
|
||
class="form-control"
|
||
id="kmTujuan"
|
||
oninput="hitungKM()">
|
||
</div>
|
||
|
||
<div class="col-md-2">
|
||
<label class="form-label fw-semibold">
|
||
KM Tiba di Pangkalan Ambulans 119
|
||
</label>
|
||
<input type="number"
|
||
class="form-control"
|
||
id="kmAkhirMako"
|
||
oninput="hitungKM()">
|
||
</div>
|
||
|
||
<div class="col-md-2">
|
||
<label class="form-label fw-semibold">
|
||
KM Total Pelayanan
|
||
</label>
|
||
<input type="number"
|
||
class="form-control bg-light"
|
||
id="kmTotal"
|
||
readonly>
|
||
</div>
|
||
|
||
<div class="col-md-2">
|
||
<label class="form-label fw-semibold">
|
||
KM Terbayar
|
||
</label>
|
||
<input type="number"
|
||
class="form-control bg-light"
|
||
id="kmTerbayar"
|
||
readonly>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- TIM AMBULANS -->
|
||
<div class="card border mb-4">
|
||
|
||
<div class="card-header bg-success text-white fw-bold">
|
||
TIM AMBULANS
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
|
||
<div class="row g-3">
|
||
|
||
<div class="col-md-3">
|
||
<label class="form-label fw-semibold">
|
||
Dokter
|
||
</label>
|
||
|
||
<input list="listDokter"
|
||
class="form-control"
|
||
id="dokter"
|
||
placeholder="Ketik nama dokter">
|
||
|
||
<datalist id="listDokter"></datalist>
|
||
</div>
|
||
|
||
<div class="col-md-3">
|
||
<label class="form-label fw-semibold">
|
||
Kepala Jaga
|
||
</label>
|
||
|
||
<input list="listKepalaJaga"
|
||
class="form-control"
|
||
id="kepalaJaga"
|
||
placeholder="Ketik nama kepala jaga">
|
||
|
||
<datalist id="listKepalaJaga"></datalist>
|
||
</div>
|
||
|
||
<div class="col-md-3">
|
||
<label class="form-label fw-semibold">
|
||
Perawat Pelaksana
|
||
</label>
|
||
|
||
<div id="perawatContainer">
|
||
<input list="listPerawat"
|
||
class="form-control"
|
||
name="perawatPelaksana[]"
|
||
placeholder="Ketik nama perawat">
|
||
</div>
|
||
|
||
<datalist id="listPerawat"></datalist>
|
||
|
||
<div class="mt-2">
|
||
<button type="button"
|
||
class="btn btn-sm btn-outline-primary"
|
||
onclick="tambahDropdownPerawat()">
|
||
➕ Tambah
|
||
</button>
|
||
|
||
<button id="hapusPerawatBtn"
|
||
type="button"
|
||
class="btn btn-sm btn-outline-danger"
|
||
style="display:none"
|
||
onclick="hapusPerawatTambahan()">
|
||
🗑 Hapus
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-3">
|
||
<label class="form-label fw-semibold">
|
||
Driver
|
||
</label>
|
||
|
||
<div id="driverContainer">
|
||
<input list="listDriver"
|
||
class="form-control"
|
||
name="driverAmbulans[]"
|
||
placeholder="Ketik nama driver">
|
||
</div>
|
||
|
||
<datalist id="listDriver"></datalist>
|
||
|
||
<div class="mt-2">
|
||
<button type="button"
|
||
class="btn btn-sm btn-outline-primary"
|
||
onclick="tambahDriver()">
|
||
➕ Tambah
|
||
</button>
|
||
|
||
<button id="hapusDriverBtn"
|
||
type="button"
|
||
class="btn btn-sm btn-outline-danger"
|
||
style="display:none"
|
||
onclick="hapusDriver()">
|
||
🗑 Hapus
|
||
</button>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
</div>
|
||
<!-- CHECKLIST -->
|
||
|
||
<div class="section-title mb-2">
|
||
CHECKLIST 6 FASE PELAYANAN AMBULANS 119
|
||
</div>
|
||
|
||
<div class="table-responsive">
|
||
<table class="table table-bordered table-sm">
|
||
|
||
<thead>
|
||
<tr>
|
||
<th width="5%">No</th>
|
||
<th>Indikator Supervisi</th>
|
||
<th width="8%">Ya</th>
|
||
<th width="8%">Tidak</th>
|
||
</tr>
|
||
</thead>
|
||
|
||
<tbody>
|
||
|
||
<tr class="table-primary">
|
||
<td colspan="4"><b>PENERIMAAN ORDER</b></td>
|
||
</tr>
|
||
<tr>
|
||
<td>1</td>
|
||
<td>Data order dan identitas pasien diterima lengkap</td>
|
||
<td class="text-center"><input type="radio" name="q1" class="nilai"></td>
|
||
<td class="text-center"><input type="radio" name="q1"></td>
|
||
</tr>
|
||
<tr>
|
||
<td>2</td>
|
||
<td>Lokasi/tujuan dan kebutuhan pelayanan teridentifikasi dengan jelas</td>
|
||
<td class="text-center"><input type="radio" name="q2" class="nilai"></td>
|
||
<td class="text-center"><input type="radio" name="q2"></td>
|
||
</tr>
|
||
|
||
<tr class="table-primary">
|
||
<td colspan="4"><b>DISPATCH & PERSIAPAN</b></td>
|
||
</tr>
|
||
<tr>
|
||
<td>3</td>
|
||
<td>Tim ambulans merespon order sesuai ketentuan</td>
|
||
<td class="text-center"><input type="radio" name="q3" class="nilai"></td>
|
||
<td class="text-center"><input type="radio" name="q3"></td>
|
||
</tr>
|
||
<tr>
|
||
<td>4</td>
|
||
<td>Ambulans, alat medis, dan logistik siap operasional</td>
|
||
<td class="text-center"><input type="radio" name="q4" class="nilai"></td>
|
||
<td class="text-center"><input type="radio" name="q4"></td>
|
||
</tr>
|
||
<tr>
|
||
<td>5</td>
|
||
<td>Petugas menggunakan APD sesuai level</td>
|
||
<td class="text-center"><input type="radio" name="q5" class="nilai"></td>
|
||
<td class="text-center"><input type="radio" name="q5"></td>
|
||
</tr>
|
||
<tr class="table-primary">
|
||
<td colspan="4"><b>PENJEMPUTAN / PENERIMAAN PASIEN</b></td>
|
||
</tr>
|
||
<tr>
|
||
<td>6</td>
|
||
<td>Identifikasi pasien dilakukan dengan benar</td>
|
||
<td class="text-center"><input type="radio" name="q6" class="nilai"></td>
|
||
<td class="text-center"><input type="radio" name="q6"></td>
|
||
</tr>
|
||
<tr>
|
||
<td>7</td>
|
||
<td>Kondisi pasien dikaji sebelum transportasi</td>
|
||
<td class="text-center"><input type="radio" name="q7" class="nilai"></td>
|
||
<td class="text-center"><input type="radio" name="q7"></td>
|
||
</tr>
|
||
<tr>
|
||
<td>8</td>
|
||
<td>Pemindahan pasien ke ambulans sesuai prosedur keselamatan</td>
|
||
<td class="text-center"><input type="radio" name="q8" class="nilai"></td>
|
||
<td class="text-center"><input type="radio" name="q8"></td>
|
||
</tr>
|
||
|
||
<tr class="table-primary">
|
||
<td colspan="4"><b>TRANSPORTASI PASIEN</b></td>
|
||
</tr>
|
||
<tr>
|
||
<td>9</td>
|
||
<td>Monitoring pasien selama perjalanan dilakukan sesuai kebutuhan</td>
|
||
<td class="text-center"><input type="radio" name="q9" class="nilai"></td>
|
||
<td class="text-center"><input type="radio" name="q9"></td>
|
||
</tr>
|
||
<tr>
|
||
<td>10</td>
|
||
<td>Tindakan medis/keperawatan selama transportasi terdokumentasi</td>
|
||
<td class="text-center"><input type="radio" name="q10" class="nilai"></td>
|
||
<td class="text-center"><input type="radio" name="q10"></td>
|
||
</tr>
|
||
<tr>
|
||
<td>11</td>
|
||
<td>Keselamatan pasien terjaga selama perjalanan</td>
|
||
<td class="text-center"><input type="radio" name="q11" class="nilai"></td>
|
||
<td class="text-center"><input type="radio" name="q11"></td>
|
||
</tr>
|
||
|
||
<tr class="table-primary">
|
||
<td colspan="4"><b>SERAH TERIMA PASIEN</b></td>
|
||
</tr>
|
||
<tr>
|
||
<td>12</td>
|
||
<td>Serah terima pasien kepada petugas penerima / keluarga pasien dilakukan dengan lengkap</td>
|
||
<td class="text-center"><input type="radio" name="q12" class="nilai"></td>
|
||
<td class="text-center"><input type="radio" name="q12"></td>
|
||
</tr>
|
||
<tr>
|
||
<td>13</td>
|
||
<td>Dokumen dan informasi kondisi pasien disampaikan dengan benar</td>
|
||
<td class="text-center"><input type="radio" name="q13" class="nilai"></td>
|
||
<td class="text-center"><input type="radio" name="q13"></td>
|
||
</tr>
|
||
|
||
<tr class="table-primary">
|
||
<td colspan="4"><b>PENYELESAIAN ORDER</b></td>
|
||
</tr>
|
||
<tr>
|
||
<td>14</td>
|
||
<td>Dokumentasi pelayanan ambulans lengkap dan sesuai</td>
|
||
<td class="text-center"><input type="radio" name="q14" class="nilai"></td>
|
||
<td class="text-center"><input type="radio" name="q14"></td>
|
||
</tr>
|
||
<tr>
|
||
<td>15</td>
|
||
<td>Waktu pelayanan tercatat lengkap pada sistem/formulir</td>
|
||
<td class="text-center"><input type="radio" name="q15" class="nilai"></td>
|
||
<td class="text-center"><input type="radio" name="q15"></td>
|
||
</tr>
|
||
<tr>
|
||
<td>16</td>
|
||
<td>Pembayaran terselesaikan (pasien Umum) / Berkas Klaim BPJS Lenkap (pasien BPJS)</td>
|
||
<td class="text-center"><input type="radio" name="q16" class="nilai"></td>
|
||
<td class="text-center"><input type="radio" name="q16"></td>
|
||
</tr>
|
||
<tr>
|
||
<td>17</td>
|
||
<td>Ambulans sudah dilakukan didekontaminasi dan kembali dalam kondisi siap operasional</td>
|
||
<td class="text-center"><input type="radio" name="q17" class="nilai"></td>
|
||
<td class="text-center"><input type="radio" name="q17"></td>
|
||
</tr>
|
||
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
|
||
<!-- HASIL -->
|
||
<div class="row mt-3">
|
||
|
||
<div class="col-md-4">
|
||
<label class="form-label"><b>Jumlah Ya</b></label>
|
||
<input type="text" id="jumlahYa" class="form-control" readonly>
|
||
</div>
|
||
|
||
<div class="col-md-4">
|
||
<label class="form-label"><b>Nilai (%)</b></label>
|
||
<input type="text" id="nilaiPersen" class="form-control" readonly>
|
||
</div>
|
||
|
||
<div class="col-md-4">
|
||
<label class="form-label"><b>Kategori</b></label>
|
||
<input type="text" id="kategori" class="form-control" readonly>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- TEMUAN -->
|
||
<div class="mt-3">
|
||
<label class="form-label"><b>Temuan / Ketidaksesuaian / Kendala</b></label>
|
||
<textarea class="form-control" rows="3"></textarea>
|
||
</div>
|
||
|
||
<div class="mt-3">
|
||
<label class="form-label"><b>Rekomendasi Perbaikan</b></label>
|
||
<textarea class="form-control" rows="3"></textarea>
|
||
</div>
|
||
|
||
<!-- TTD -->
|
||
<div class="row mt-5 text-center">
|
||
|
||
<div class="col-6">
|
||
Supervisor
|
||
<br><br><br><br>
|
||
<span id="ttdSupervisor">(_____________________)</span>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div class="text-center my-4 no-print">
|
||
|
||
<button class="btn btn-success"
|
||
onclick="previewSupervisi()">
|
||
💾 Simpan & Preview
|
||
</button>
|
||
|
||
<button class="btn btn-secondary"
|
||
onclick="window.location.reload()">
|
||
🔄 Reset
|
||
</button>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<script>
|
||
|
||
function previewSupervisi(){
|
||
|
||
// ======================
|
||
// AMBIL CHECKLIST
|
||
// ======================
|
||
|
||
const checklist = [];
|
||
|
||
for(let i = 1; i <= 17; i++){
|
||
|
||
const jawaban =
|
||
document.querySelector(
|
||
`input[name="q${i}"]:checked`
|
||
);
|
||
|
||
checklist.push({
|
||
|
||
nomor: i,
|
||
|
||
hasil:
|
||
(
|
||
jawaban &&
|
||
jawaban.classList.contains("nilai")
|
||
)
|
||
? "Ya"
|
||
: "Tidak"
|
||
|
||
});
|
||
|
||
}
|
||
|
||
// ======================
|
||
// DATA FORM
|
||
// ======================
|
||
|
||
const data = {
|
||
|
||
supervisor:
|
||
document.getElementById("supervisor").value,
|
||
|
||
tanggalSupervisi:
|
||
document.getElementById("tanggalSupervisi").value,
|
||
|
||
tanggalPelayanan:
|
||
document.getElementById("tanggalPelayanan").value,
|
||
|
||
nomorRegister:
|
||
document.getElementById("nomorRegister").value,
|
||
|
||
namaPasien:
|
||
document.getElementById("namaPasien").value,
|
||
|
||
jenisLayanan:
|
||
document.getElementById("jenisLayanan").value,
|
||
|
||
tujuan:
|
||
document.getElementById("tujuan").value,
|
||
|
||
armada:
|
||
document.getElementById("armada").value,
|
||
|
||
tasEmergensi:
|
||
document.getElementById("tasEmergensi").value,
|
||
|
||
jenisPembayaran:
|
||
document.getElementById("jenisPembayaran").value,
|
||
|
||
totalBiaya:
|
||
document.getElementById("totalBiaya").value,
|
||
|
||
noKuitansi:
|
||
document.getElementById("noKuitansi").value,
|
||
|
||
kmAwalMako:
|
||
document.getElementById("kmAwalMako").value,
|
||
|
||
kmLokasi:
|
||
document.getElementById("kmLokasi").value,
|
||
|
||
kmTujuan:
|
||
document.getElementById("kmTujuan").value,
|
||
|
||
kmAkhirMako:
|
||
document.getElementById("kmAkhirMako").value,
|
||
|
||
kmTotal:
|
||
document.getElementById("kmTotal").value,
|
||
|
||
kmTerbayar:
|
||
document.getElementById("kmTerbayar").value,
|
||
|
||
dokter:
|
||
document.getElementById("dokter").value,
|
||
|
||
kepalaJaga:
|
||
document.getElementById("kepalaJaga").value,
|
||
|
||
perawatPelaksana:
|
||
[...document.querySelectorAll('[name="perawatPelaksana[]"]')]
|
||
.map(x => x.value)
|
||
.filter(x => x),
|
||
|
||
driverAmbulans:
|
||
[...document.querySelectorAll('[name="driverAmbulans[]"]')]
|
||
.map(x => x.value)
|
||
.filter(x => x),
|
||
|
||
jumlahYa:
|
||
document.getElementById("jumlahYa").value,
|
||
|
||
nilaiPersen:
|
||
document.getElementById("nilaiPersen").value,
|
||
|
||
kategori:
|
||
document.getElementById("kategori").value,
|
||
|
||
checklist: checklist,
|
||
|
||
temuan:
|
||
document.querySelectorAll("textarea")[0].value,
|
||
|
||
rekomendasi:
|
||
document.querySelectorAll("textarea")[1].value
|
||
|
||
};
|
||
|
||
localStorage.setItem(
|
||
"dataSupervisi",
|
||
JSON.stringify(data)
|
||
);
|
||
|
||
window.open(
|
||
"preview-supervisi.html",
|
||
"_blank"
|
||
);
|
||
|
||
}
|
||
|
||
|
||
|
||
function loadDatalist(key, datalistId){
|
||
|
||
const datalist = document.getElementById(datalistId);
|
||
|
||
if(!datalist) return;
|
||
|
||
datalist.innerHTML = "";
|
||
|
||
const data = JSON.parse(localStorage.getItem(key) || "[]");
|
||
|
||
data.forEach(nama => {
|
||
|
||
const option = document.createElement("option");
|
||
option.value = nama;
|
||
|
||
datalist.appendChild(option);
|
||
|
||
});
|
||
|
||
}
|
||
|
||
|
||
|
||
// ======================
|
||
// TAMBAH PERAWAT
|
||
// ======================
|
||
|
||
function tambahDropdownPerawat(){
|
||
|
||
const container =
|
||
document.getElementById("perawatContainer");
|
||
|
||
const input =
|
||
document.createElement("input");
|
||
|
||
input.setAttribute("list","listPerawat");
|
||
input.setAttribute("name","perawatPelaksana[]");
|
||
|
||
input.className = "form-control mt-2";
|
||
|
||
container.appendChild(input);
|
||
|
||
document.getElementById(
|
||
"hapusPerawatBtn"
|
||
).style.display = "inline-block";
|
||
|
||
}
|
||
|
||
// ======================
|
||
// HAPUS PERAWAT
|
||
// ======================
|
||
|
||
function hapusPerawatTambahan(){
|
||
|
||
const container =
|
||
document.getElementById("perawatContainer");
|
||
|
||
if(container.children.length > 1){
|
||
container.removeChild(
|
||
container.lastElementChild
|
||
);
|
||
}
|
||
|
||
if(container.children.length <= 1){
|
||
document.getElementById(
|
||
"hapusPerawatBtn"
|
||
).style.display = "none";
|
||
}
|
||
|
||
simpanPerawat();
|
||
|
||
}
|
||
|
||
// ======================
|
||
// TAMBAH DRIVER
|
||
// ======================
|
||
|
||
function tambahDriver(){
|
||
|
||
const container =
|
||
document.getElementById("driverContainer");
|
||
|
||
const input =
|
||
document.createElement("input");
|
||
|
||
input.setAttribute("list","listDriver");
|
||
input.setAttribute("name","driverAmbulans[]");
|
||
|
||
input.className = "form-control mt-2";
|
||
|
||
container.appendChild(input);
|
||
|
||
document.getElementById(
|
||
"hapusDriverBtn"
|
||
).style.display = "inline-block";
|
||
|
||
}
|
||
// ======================
|
||
// HAPUS DRIVER
|
||
// ======================
|
||
|
||
function hapusDriver(){
|
||
|
||
const container =
|
||
document.getElementById("driverContainer");
|
||
|
||
if(container.children.length > 1){
|
||
container.removeChild(
|
||
container.lastElementChild
|
||
);
|
||
}
|
||
|
||
if(container.children.length <= 1){
|
||
document.getElementById(
|
||
"hapusDriverBtn"
|
||
).style.display = "none";
|
||
}
|
||
|
||
simpanDriver();
|
||
|
||
}
|
||
|
||
// ======================
|
||
// HITUNG NILAI
|
||
// ======================
|
||
|
||
document
|
||
.querySelectorAll('input[type=radio]')
|
||
.forEach(item => {
|
||
|
||
item.addEventListener(
|
||
'change',
|
||
hitungNilai
|
||
);
|
||
|
||
});
|
||
|
||
function hitungNilai(){
|
||
|
||
let total =
|
||
document.querySelectorAll(
|
||
'.nilai:checked'
|
||
).length;
|
||
|
||
let persen =
|
||
(total / 17) * 100;
|
||
|
||
let kategori =
|
||
"Perlu Tindak Lanjut";
|
||
|
||
if(persen >= 90){
|
||
kategori = "Sangat Baik";
|
||
}
|
||
else if(persen >= 80){
|
||
kategori = "Baik";
|
||
}
|
||
else if(persen >= 70){
|
||
kategori = "Cukup";
|
||
}
|
||
|
||
document.getElementById(
|
||
"jumlahYa"
|
||
).value =
|
||
total + " / 17";
|
||
|
||
document.getElementById(
|
||
"nilaiPersen"
|
||
).value =
|
||
persen.toFixed(0) + "%";
|
||
|
||
document.getElementById(
|
||
"kategori"
|
||
).value =
|
||
kategori;
|
||
|
||
}
|
||
|
||
// ======================
|
||
// DOKTER
|
||
// ======================
|
||
|
||
document.getElementById("dokter")
|
||
.addEventListener("input", function(){
|
||
|
||
localStorage.setItem(
|
||
"dokter",
|
||
this.value
|
||
);
|
||
|
||
simpanNamaDatalist(
|
||
"masterDokter",
|
||
this.value
|
||
);
|
||
|
||
});
|
||
|
||
// ======================
|
||
// KEPALA JAGA
|
||
// ======================
|
||
|
||
document.getElementById("kepalaJaga")
|
||
.addEventListener("input", function(){
|
||
|
||
const nama =
|
||
this.value.trim();
|
||
|
||
localStorage.setItem(
|
||
"kepalaJaga",
|
||
nama
|
||
);
|
||
|
||
simpanNamaDatalist(
|
||
"masterKepalaJaga",
|
||
nama
|
||
);
|
||
|
||
});
|
||
|
||
// ======================
|
||
// SUPERVISOR
|
||
// ======================
|
||
|
||
document.getElementById("supervisor")
|
||
.addEventListener("change", function(){
|
||
|
||
const nama =
|
||
this.value.trim();
|
||
|
||
localStorage.setItem(
|
||
"supervisor",
|
||
nama
|
||
);
|
||
|
||
document.getElementById(
|
||
"ttdSupervisor"
|
||
).innerHTML =
|
||
nama
|
||
? "<u>" + nama + "</u>"
|
||
: "(_____________________)";
|
||
|
||
});
|
||
|
||
window.addEventListener("load", function(){
|
||
|
||
if (performance.getEntriesByType("navigation")[0]?.type === "reload") {
|
||
|
||
sessionStorage.clear();
|
||
|
||
location.href = location.pathname;
|
||
|
||
}
|
||
|
||
});
|
||
|
||
|
||
function hitungKM() {
|
||
|
||
const kmAwal = Number(document.getElementById("kmAwalMako").value) || 0;
|
||
const kmAkhir = Number(document.getElementById("kmAkhirMako").value) || 0;
|
||
|
||
const kmLokasi = Number(document.getElementById("kmLokasi").value) || 0;
|
||
const kmTujuan = Number(document.getElementById("kmTujuan").value) || 0;
|
||
|
||
// KM TOTAL OPERASIONAL (AKHIR - AWAL)
|
||
let kmTotal = kmAkhir - kmAwal;
|
||
kmTotal = kmTotal < 0 ? 0 : kmTotal;
|
||
|
||
document.getElementById("kmTotal").value = kmTotal;
|
||
|
||
// KM TERBAYAR PASIEN (TUJUAN - LOKASI)
|
||
let kmTerbayar = kmTujuan - kmLokasi;
|
||
kmTerbayar = kmTerbayar < 0 ? 0 : kmTerbayar;
|
||
|
||
document.getElementById("kmTerbayar").value = kmTerbayar;
|
||
}
|
||
|
||
// ======================
|
||
// SIMPAN KE MASTER LIST
|
||
// ======================
|
||
|
||
function simpanNamaDatalist(key, nama){
|
||
|
||
nama = nama.trim();
|
||
|
||
if(!nama) return;
|
||
|
||
let data =
|
||
JSON.parse(
|
||
localStorage.getItem(key) || "[]"
|
||
);
|
||
|
||
if(!data.includes(nama)){
|
||
|
||
data.push(nama);
|
||
|
||
data.sort();
|
||
|
||
localStorage.setItem(
|
||
key,
|
||
JSON.stringify(data)
|
||
);
|
||
|
||
}
|
||
|
||
}
|
||
|
||
// ======================
|
||
// LOAD DATALIST
|
||
// ======================
|
||
|
||
function loadDatalist(key, datalistId){
|
||
|
||
const datalist =
|
||
document.getElementById(datalistId);
|
||
|
||
datalist.innerHTML = "";
|
||
|
||
const data =
|
||
JSON.parse(
|
||
localStorage.getItem(key) || "[]"
|
||
);
|
||
|
||
data.forEach(nama => {
|
||
|
||
const option =
|
||
document.createElement("option");
|
||
|
||
option.value = nama;
|
||
|
||
datalist.appendChild(option);
|
||
|
||
});
|
||
|
||
}
|
||
|
||
// ======================
|
||
// AUTO SIMPAN SEMUA INPUT
|
||
// ======================
|
||
|
||
document.addEventListener("change", function(e){
|
||
|
||
// DOKTER
|
||
if(e.target.id === "dokter"){
|
||
|
||
simpanNamaDatalist(
|
||
"masterDokter",
|
||
e.target.value
|
||
);
|
||
|
||
loadDatalist(
|
||
"masterDokter",
|
||
"listDokter"
|
||
);
|
||
}
|
||
|
||
// KEPALA JAGA
|
||
if(e.target.id === "kepalaJaga"){
|
||
|
||
simpanNamaDatalist(
|
||
"masterKepalaJaga",
|
||
e.target.value
|
||
);
|
||
|
||
loadDatalist(
|
||
"masterKepalaJaga",
|
||
"listKepalaJaga"
|
||
);
|
||
}
|
||
|
||
// PERAWAT
|
||
if(e.target.name === "perawatPelaksana[]"){
|
||
|
||
simpanNamaDatalist(
|
||
"masterPerawat",
|
||
e.target.value
|
||
);
|
||
|
||
loadDatalist(
|
||
"masterPerawat",
|
||
"listPerawat"
|
||
);
|
||
}
|
||
|
||
// DRIVER
|
||
if(e.target.name === "driverAmbulans[]"){
|
||
|
||
simpanNamaDatalist(
|
||
"masterDriver",
|
||
e.target.value
|
||
);
|
||
|
||
loadDatalist(
|
||
"masterDriver",
|
||
"listDriver"
|
||
);
|
||
}
|
||
|
||
});
|
||
|
||
// ======================
|
||
// LOAD AWAL
|
||
// ======================
|
||
|
||
window.addEventListener("DOMContentLoaded", () => {
|
||
|
||
loadDatalist(
|
||
"masterDokter",
|
||
"listDokter"
|
||
);
|
||
|
||
loadDatalist(
|
||
"masterKepalaJaga",
|
||
"listKepalaJaga"
|
||
);
|
||
|
||
loadDatalist(
|
||
"masterPerawat",
|
||
"listPerawat"
|
||
);
|
||
|
||
loadDatalist(
|
||
"masterDriver",
|
||
"listDriver"
|
||
);
|
||
|
||
});
|
||
|
||
</script>
|
||
|
||
</body>
|
||
</html> |