test-resab/frontend/pages/tindakan.html
2025-04-27 23:29:32 +07:00

478 lines
22 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>RSAB Sys - Tindakan</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdn.datatables.net/2.2.2/css/dataTables.bootstrap5.css"
/>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.datatables.net/2.2.2/js/dataTables.js"></script>
<script src="https://cdn.datatables.net/2.2.2/js/dataTables.bootstrap5.js"></script>
<style>
body {
overflow-x: hidden;
}
.sidebar {
min-height: 100vh;
background: #343a40;
color: #fff;
}
.sidebar a {
color: #adb5bd;
text-decoration: none;
display: block;
padding: 10px;
}
.sidebar a:hover {
background: #495057;
color: #fff;
}
.header {
background: #f8f9fa;
padding: 10px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.content {
padding: 20px;
}
</style>
</head>
<body>
<div class="d-flex">
<!-- Sidebar -->
<div class="sidebar p-3">
<h4>RSAB Sys</h4>
<hr />
<div class="accordion" id="sidebarAccordion">
<!-- Master Data -->
<div class="accordion-item bg-transparent border-0">
<h2 class="accordion-header">
<button
class="accordion-button collapsed bg-transparent text-white"
type="button"
data-bs-toggle="collapse"
data-bs-target="#masterDataCollapse"
>
Master Data
</button>
</h2>
<div
id="masterDataCollapse"
class="accordion-collapse collapse"
data-bs-parent="#sidebarAccordion"
>
<div class="accordion-body p-0">
<a href="./users">User</a>
<a href="./pegawai">Pegawai</a>
<a href="./tindakan">Tindakan</a>
<a href="./pasien">Pasien</a>
<a href="./ruangpelayanan">Ruang Pelayanan</a>
</div>
</div>
</div>
<!-- Transaksi -->
<div class="accordion-item bg-transparent border-0">
<h2 class="accordion-header">
<button
class="accordion-button collapsed bg-transparent text-white"
type="button"
data-bs-toggle="collapse"
data-bs-target="#transaksiCollapse"
>
Transaksi
</button>
</h2>
<div
id="transaksiCollapse"
class="accordion-collapse collapse"
data-bs-parent="#sidebarAccordion"
>
<div class="accordion-body p-0">
<a href="./registrasi">Registrasi</a>
<a href="./transaksi">Transaksi</a>
</div>
</div>
</div>
<!-- Laporan -->
<div class="accordion-item bg-transparent border-0">
<h2 class="accordion-header">
<button
class="accordion-button collapsed bg-transparent text-white"
type="button"
data-bs-toggle="collapse"
data-bs-target="#laporanCollapse"
>
Laporan
</button>
</h2>
<div
id="laporanCollapse"
class="accordion-collapse collapse"
data-bs-parent="#sidebarAccordion"
>
<div class="accordion-body p-0">
<a href="./laporan_jumlah_pasien"
>Laporan Jumlah Pasien Mendaftar</a
>
<a href="./laporan_pendapatan"
>Laporan Pendapatan Perhari</a
>
</div>
</div>
</div>
</div>
</div>
<div class="flex-grow-1">
<div class="header">
<h5>Data Tindakan</h5>
<div class="dropdown">
<button
class="btn btn-light dropdown-toggle"
type="button"
id="profileDropdown"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<i class="bi bi-person-circle"></i> Profile
</button>
<ul
class="dropdown-menu dropdown-menu-end"
aria-labelledby="profileDropdown"
>
<li>
<a class="dropdown-item" href="#">Profile</a>
</li>
<li><hr class="dropdown-divider" /></li>
<li>
<a
class="dropdown-item"
href="#"
id="logoutButton"
>Logout</a
>
</li>
</ul>
</div>
</div>
<div class="content">
<div class="d-flex justify-content-between">
<h4>Data Tindakan</h4>
<button
type="button"
id="addButton"
class="btn btn-primary"
>
Tambah Tindakan
</button>
</div>
<table
id="data-table"
class="table table-striped table-hover table-bordered mt-3"
>
<thead>
<tr>
<th>No</th>
<th>Nama Tindakan</th>
<th>Tarif Tindakan</th>
<th>Aksi</th>
</tr>
</thead>
<tbody id="tindakanTable"></tbody>
</table>
</div>
</div>
</div>
<div
class="modal fade"
id="modal-show"
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="titleModal"></h1>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body"></div>
<div class="modal-footer"></div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
$("#logoutButton").click(function () {
localStorage.removeItem("accessToken");
localStorage.removeItem("fullname");
window.location.href = "/login.html";
});
$(document).ready(function () {
var accessToken = localStorage.getItem("accessToken");
if (!accessToken) {
window.location.href = "./../index.html";
}
});
$(document).ready(function () {
var accessToken = localStorage.getItem("accessToken");
$.ajax({
url: "http://localhost:4400/api/tindakan/",
method: "GET",
contentType: "application/json",
dataType: "json",
crossDomain: true,
headers: {
Authorization: "Bearer " + accessToken,
},
success: function (result) {
let isiData = "";
if (result.metadata.code === 200) {
let tindakanData = result.response;
$.each(tindakanData, function (index, tindakan) {
isiData += `<tr>
<td>${index + 1}</td>
<td>${tindakan.namatindakan}</td>
<td>Rp. ${tindakan.tariftindakan.toLocaleString("id-ID")}</td>
<td>
<button type="button" id="deleteButton" class="btn btn-sm btn-danger" data-tindakan-id="${
tindakan.idtindakan
}">Hapus</button>
<button type="button" id="editButton" class="btn btn-sm btn-warning" data-tindakan-id="${
tindakan.idtindakan
}">Edit</button>
</td>
</tr>`;
});
} else {
isiData = `<tr><td colspan="6">${result.metadata.message}</td></tr>`;
}
$("#tindakanTable").html(isiData);
$(document).on("click", "#deleteButton", function (e) {
var tindakanId = $(this).data("tindakan-id");
e.preventDefault();
var konfirmasi = confirm(
"Apakah Anda yakin ingin menghapus Tindakan ini?"
);
if (konfirmasi) {
$.ajax({
url:
"http://localhost:4400/api/tindakan/tindakan_id/" +
tindakanId,
method: "DELETE",
contentType: "application/json",
dataType: "json",
crossDomain: true,
headers: {
Authorization: "Bearer " + accessToken,
},
success: function (result) {
if (result.metadata.code === 200) {
alert(result.metadata.message);
location.reload();
} else {
alert(result.metadata.message);
}
},
error: function (xhr) {
alert("Error: " + xhr.responseText);
},
});
}
});
$(document).on("click", "#editButton", function (e) {
var tindakanId = $(this).data("tindakan-id");
$.ajax({
url:
"http://localhost:4400/api/tindakan/tindakan_id/" +
tindakanId,
method: "GET",
contentType: "application/json",
dataType: "json",
crossDomain: true,
headers: {
Authorization: "Bearer " + accessToken,
},
success: function (result) {
if (result.metadata.code === 200) {
let tindakan = result.response;
$("#titleModal").text("Edit Tindakan");
$("#modal-show").modal("show");
$("#modal-show .modal-body").html(
`
<form id="editForm">
<div class="mb-3">
<label for="namatindakan" class="form-label">Nama Tindakan</label>
<input type="text" class="form-control" id="namatindakan" value="${
tindakan.namatindakan
}" required>
</div>
<div class="mb-3">
<label for="tariftindakan" class="form-label">Tarif Tindakan</label>
<input type="text" class="form-control" id="tariftindakan" value="${
tindakan.tariftindakan
}" required>
</div>
</form>
`
);
$("#modal-show .modal-footer").html(
`
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" id="updateButton" class="btn btn-primary">Update</button>
`
);
$("#updateButton").click(function () {
let namatindakan = $("#namatindakan").val();
let tariftindakan = $("#tariftindakan").val();
$.ajax({
url:
"http://localhost:4400/api/tindakan/tindakan_id/" +
tindakanId,
method: "PUT",
contentType: "application/json",
dataType: "json",
crossDomain: true,
headers: {
Authorization:
"Bearer " + accessToken,
},
data: JSON.stringify({
namatindakan: namatindakan.trim(),
tariftindakan: parseInt(tariftindakan, 10),
}),
success: function (result) {
if (
result.metadata.code ===
200
) {
alert(
result.metadata
.message
);
location.reload();
} else {
alert(
result.metadata
.message
);
}
},
error: function (xhr) {
alert(
"Error: " +
xhr.responseText
);
},
});
});
} else {
alert(result.metadata.msg);
}
},
error: function (xhr) {
alert("Error: " + xhr.responseText);
},
});
});
$("#data-table").DataTable();
},
});
$("#addButton").click(function () {
$("#titleModal").text("Tambah Tindakan");
$("#modal-show").modal("show");
$("#modal-show .modal-body").html(
`
<form id="addForm">
<div class="mb-3">
<label for="tindakan" class="form-label">Nama Tindakan</label>
<input type="text" class="form-control" id="namatindakan" required>
</div>
<div class="mb-3">
<label for="tariftindakan" class="form-label">Tarif Tindakan</label>
<input type="text" class="form-control" id="tariftindakan" required>
</div>
</form>
`
);
$("#modal-show .modal-footer").html(
`
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="saveButton">Save</button>
`
);
$("#saveButton").click(function () {
var namatindakan = $("#namatindakan").val();
var tariftindakan = $("#tariftindakan").val();
$.ajax({
url: "http://localhost:4400/api/tindakan/",
method: "POST",
contentType: "application/json",
dataType: "json",
crossDomain: true,
headers: {
Authorization: "Bearer " + accessToken,
},
data: JSON.stringify({
namatindakan: namatindakan.trim(),
tariftindakan: tariftindakan.trim(),
}),
success: function (result) {
if (result.metadata.code === 200) {
alert(result.metadata.message);
$("#modal-show").modal("hide");
setTimeout(() => {
window.location.reload();
}, 1500);
} else {
alert(result.metadata.msg);
}
},
error: function (xhr) {
alert("Error: " + xhr.responseText);
},
});
});
});
});
</script>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css"
rel="stylesheet"
/>
</body>
</html>