fix input dropdown kecamatan, add address input, add start and fresh camera button
This commit is contained in:
parent
8ffde277fa
commit
b9c9252728
@ -26,6 +26,10 @@ input[type="text"] {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
video {
|
||||
background: primary;
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
@ -357,22 +361,23 @@ form p {
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.container {
|
||||
min-height: 800px;
|
||||
min-height: 1000px;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.container.sign-up-mode .right-panel {
|
||||
padding-top: 0;
|
||||
form.sign-in-form {
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 0px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.header ul li div {
|
||||
padding: 0 1.2rem;
|
||||
}
|
||||
|
||||
|
||||
.signin-signup {
|
||||
width: 100%;
|
||||
top: 95%;
|
||||
@ -393,8 +398,6 @@ form p {
|
||||
.panel {
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
padding: 2.5rem 8%;
|
||||
grid-column: 1 / 2;
|
||||
}
|
||||
|
||||
@ -446,7 +449,7 @@ form p {
|
||||
|
||||
.container.sign-up-mode:before {
|
||||
transform: translate(-50%, 100%);
|
||||
bottom: 32%;
|
||||
bottom: 26%;
|
||||
right: initial;
|
||||
}
|
||||
|
||||
@ -471,9 +474,13 @@ form p {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
form {
|
||||
padding: 0 1.5rem;
|
||||
@media (max-width: 740px) {
|
||||
.form_4 div {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.btns_wrap .common_btns.form_4_btns {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.image {
|
||||
@ -509,7 +516,6 @@ form p {
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.header ul {
|
||||
@ -925,10 +931,8 @@ form p {
|
||||
background-color: #900c3e;
|
||||
}
|
||||
|
||||
#webcamKtp {
|
||||
height: 30vh;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
#webcamKtp,
|
||||
#webcamEkyc {
|
||||
height: 30vh;
|
||||
border-radius: 1rem;
|
||||
|
||||
@ -139,23 +139,129 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
const videoElementKtp = document.getElementById("webcamKtp");
|
||||
const captureButtonKtp = document.getElementById("captureButtonKtp");
|
||||
const fotoInputKtp = document.getElementById("fotoKtp");
|
||||
const startButtonKtp = document.getElementById("startButtonKtp");
|
||||
const refreshButtonKtp = document.getElementById("refreshButtonKtp");
|
||||
|
||||
const videoElementEkyc = document.getElementById("webcamEkyc");
|
||||
const captureButtonEkyc = document.getElementById("captureButtonEkyc");
|
||||
const fotoInputEkyc = document.getElementById("fotoEkyc");
|
||||
const startButtonEkyc = document.getElementById("startButtonEkyc");
|
||||
const refreshButtonEkyc = document.getElementById("refreshButtonEkyc");
|
||||
|
||||
let ktpStream = null;
|
||||
let ekycStream = null;
|
||||
|
||||
// Fungsi untuk menyalakan kamera
|
||||
function turnOnCamera(stream, videoElement, startButton) {
|
||||
videoElement.srcObject = stream;
|
||||
startButton.textContent = "Matikan Kamera";
|
||||
videoElement.style.display = "block"; // Tampilkan video
|
||||
}
|
||||
|
||||
// Fungsi untuk mematikan kamera
|
||||
function turnOffCamera(stream, videoElement, startButton) {
|
||||
if (stream) {
|
||||
stream.getTracks().forEach((track) => track.stop());
|
||||
videoElement.srcObject = null;
|
||||
}
|
||||
startButton.textContent = "Nyalakan Kamera";
|
||||
videoElement.style.display = "none"; // Sembunyikan video
|
||||
}
|
||||
|
||||
// Fungsi untuk menghapus hasil foto
|
||||
function clearPhoto(fotoInput, fotoPreview) {
|
||||
fotoInput.value = "";
|
||||
fotoPreview.innerHTML = "";
|
||||
}
|
||||
|
||||
startButtonKtp.addEventListener("click", function () {
|
||||
if (ktpStream) {
|
||||
// Matikan kamera jika sudah aktif
|
||||
turnOffCamera(ktpStream, videoElementKtp, startButtonKtp);
|
||||
// Hapus hasil foto
|
||||
clearPhoto(fotoInputKtp, document.getElementById("foto-preview-ktp"));
|
||||
ktpStream = null;
|
||||
} else {
|
||||
// Aktifkan kamera jika belum aktif
|
||||
navigator.mediaDevices
|
||||
.getUserMedia({
|
||||
video: true
|
||||
})
|
||||
.getUserMedia({ video: true })
|
||||
.then(function (stream) {
|
||||
videoElementKtp.srcObject = stream;
|
||||
ktpStream = stream;
|
||||
turnOnCamera(ktpStream, videoElementKtp, startButtonKtp);
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.error("Gagal mengakses kamera: ", error);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
startButtonEkyc.addEventListener("click", function () {
|
||||
if (ekycStream) {
|
||||
// Matikan kamera jika sudah aktif
|
||||
turnOffCamera(ekycStream, videoElementEkyc, startButtonEkyc);
|
||||
// Hapus hasil foto
|
||||
clearPhoto(fotoInputEkyc, document.getElementById("foto-preview-ekyc"));
|
||||
ekycStream = null;
|
||||
} else {
|
||||
// Aktifkan kamera jika belum aktif
|
||||
navigator.mediaDevices
|
||||
.getUserMedia({ video: true })
|
||||
.then(function (stream) {
|
||||
ekycStream = stream;
|
||||
turnOnCamera(ekycStream, videoElementEkyc, startButtonEkyc);
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.error("Gagal mengakses kamera: ", error);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
refreshButtonKtp.addEventListener("click", function () {
|
||||
// Hapus hasil foto jika tombol "Ulang Foto" ditekan
|
||||
clearPhoto(fotoInputKtp, document.getElementById("foto-preview-ktp"));
|
||||
|
||||
if (ktpStream) {
|
||||
// Matikan kamera jika sedang aktif
|
||||
turnOffCamera(ktpStream, videoElementKtp, startButtonKtp);
|
||||
ktpStream = null;
|
||||
}
|
||||
|
||||
// Menyalakan kembali kamera
|
||||
navigator.mediaDevices
|
||||
.getUserMedia({ video: true })
|
||||
.then(function (stream) {
|
||||
ktpStream = stream;
|
||||
turnOnCamera(ktpStream, videoElementKtp, startButtonKtp);
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.error("Gagal mengakses kamera: ", error);
|
||||
});
|
||||
});
|
||||
|
||||
refreshButtonEkyc.addEventListener("click", function () {
|
||||
// Hapus hasil foto jika tombol "Ulang Foto" ditekan
|
||||
clearPhoto(fotoInputEkyc, document.getElementById("foto-preview-ekyc"));
|
||||
|
||||
if (ekycStream) {
|
||||
// Matikan kamera jika sedang aktif
|
||||
turnOffCamera(ekycStream, videoElementEkyc, startButtonEkyc);
|
||||
ekycStream = null;
|
||||
}
|
||||
|
||||
// Menyalakan kembali kamera
|
||||
navigator.mediaDevices
|
||||
.getUserMedia({ video: true })
|
||||
.then(function (stream) {
|
||||
ekycStream = stream;
|
||||
turnOnCamera(ekycStream, videoElementEkyc, startButtonEkyc);
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.error("Gagal mengakses kamera: ", error);
|
||||
});
|
||||
});
|
||||
|
||||
captureButtonKtp.addEventListener("click", function () {
|
||||
if (ktpStream) {
|
||||
const canvas = document.createElement("canvas");
|
||||
const context = canvas.getContext("2d");
|
||||
canvas.width = videoElementKtp.videoWidth;
|
||||
@ -163,29 +269,18 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
context.drawImage(videoElementKtp, 0, 0, canvas.width, canvas.height);
|
||||
const fotoDataUrl = canvas.toDataURL("image/jpeg");
|
||||
|
||||
// Set nilai foto input hidden dengan data URL
|
||||
fotoInputKtp.value = fotoDataUrl;
|
||||
|
||||
// Tampilkan preview foto
|
||||
const fotoPreview = document.getElementById("foto-preview");
|
||||
const fotoPreview = document.getElementById("foto-preview-ktp");
|
||||
fotoPreview.innerHTML = '<img src="' + fotoDataUrl + '" alt="Foto">';
|
||||
|
||||
// // Hentikan akses kamera setelah mengambil foto
|
||||
// stream.getTracks().forEach((track) => track.stop());
|
||||
});
|
||||
|
||||
navigator.mediaDevices
|
||||
.getUserMedia({
|
||||
video: true
|
||||
})
|
||||
.then(function (stream) {
|
||||
videoElementEkyc.srcObject = stream;
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.error("Gagal mengakses kamera: ", error);
|
||||
// Matikan kamera setelah mengambil foto
|
||||
turnOffCamera(ktpStream, videoElementKtp, startButtonKtp);
|
||||
}
|
||||
});
|
||||
|
||||
captureButtonEkyc.addEventListener("click", function () {
|
||||
if (ekycStream) {
|
||||
const canvas = document.createElement("canvas");
|
||||
const context = canvas.getContext("2d");
|
||||
canvas.width = videoElementEkyc.videoWidth;
|
||||
@ -193,15 +288,14 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
context.drawImage(videoElementEkyc, 0, 0, canvas.width, canvas.height);
|
||||
const fotoDataUrl = canvas.toDataURL("image/jpeg");
|
||||
|
||||
// Set nilai foto input hidden dengan data URL
|
||||
fotoInputEkyc.value = fotoDataUrl;
|
||||
|
||||
// Tampilkan preview foto
|
||||
const fotoPreview = document.getElementById("foto-preview");
|
||||
const fotoPreview = document.getElementById("foto-preview-ekyc");
|
||||
fotoPreview.innerHTML = '<img src="' + fotoDataUrl + '" alt="Foto">';
|
||||
|
||||
// // Hentikan akses kamera setelah mengambil foto
|
||||
// stream.getTracks().forEach((track) => track.stop());
|
||||
// Matikan kamera setelah mengambil foto
|
||||
turnOffCamera(ekycStream, videoElementEkyc, startButtonEkyc);
|
||||
}
|
||||
});
|
||||
});
|
||||
/******************************************
|
||||
@ -267,55 +361,11 @@ $(document).ready(function () {
|
||||
* AJAX DROPDOWN SELECT PROVINSI, KABUPATEN & KECAMATAN
|
||||
******************************************/
|
||||
$(document).ready(function () {
|
||||
|
||||
// Inisialisasi select2 untuk selectProv
|
||||
$("#selectProv").select2({
|
||||
placeholder: 'Pilih Provinsi',
|
||||
ajax: {
|
||||
url: $("#selectProv").data("url"),
|
||||
processResults: function ({
|
||||
data
|
||||
}) {
|
||||
return {
|
||||
results: $.map(data, function (item) {
|
||||
return {
|
||||
id: item.id,
|
||||
text: item.name
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$("#selectProv").change(function () {
|
||||
let id = $('#selectProv').val();
|
||||
|
||||
$("#selectRegenc").select2({
|
||||
placeholder: 'Pilih Wilayah',
|
||||
ajax: {
|
||||
url: "/selectRegenc/" + id,
|
||||
processResults: function ({
|
||||
data
|
||||
}) {
|
||||
return {
|
||||
results: $.map(data, function (item) {
|
||||
return {
|
||||
id: item.id,
|
||||
text: item.name
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
$("#selectRegenc").change(function () {
|
||||
let id = $('#selectRegenc').val();
|
||||
|
||||
$("#selectDistric").select2({
|
||||
placeholder: 'Pilih Kota',
|
||||
ajax: {
|
||||
url: "/selectDistric/" + id,
|
||||
processResults: function ({ data }) {
|
||||
return {
|
||||
results: $.map(data, function (item) {
|
||||
@ -324,8 +374,101 @@ $(document).ready(function () {
|
||||
text: item.name
|
||||
}
|
||||
})
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Inisialisasi select2 untuk selectRegenc
|
||||
$("#selectRegenc").select2({
|
||||
placeholder: 'Pilih Kabupaten/Kota',
|
||||
ajax: {
|
||||
url: "", // Isi dengan URL yang sesuai
|
||||
processResults: function ({ data }) {
|
||||
return {
|
||||
results: $.map(data, function (item) {
|
||||
return {
|
||||
id: item.id,
|
||||
text: item.name
|
||||
}
|
||||
})
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Inisialisasi select2 untuk selectDistric
|
||||
$("#selectDistric").select2({
|
||||
placeholder: 'Pilih Kecamatan',
|
||||
ajax: {
|
||||
url: "", // Isi dengan URL yang sesuai
|
||||
processResults: function ({ data }) {
|
||||
return {
|
||||
results: $.map(data, function (item) {
|
||||
return {
|
||||
id: item.id,
|
||||
text: item.name
|
||||
}
|
||||
})
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Event listener untuk perubahan pada selectProv
|
||||
$("#selectProv").change(function () {
|
||||
let id = $('#selectProv').val();
|
||||
|
||||
// Mengosongkan pilihan di selectRegenc dan selectDistric
|
||||
$("#selectRegenc, #selectDistric").empty();
|
||||
|
||||
// Menghapus properti 'disabled' pada selectRegenc dan selectDistric
|
||||
$("#selectRegenc, #selectDistric").prop("disabled", false);
|
||||
|
||||
// Memuat ulang data berdasarkan provinsi yang baru dipilih di selectRegenc
|
||||
$("#selectRegenc").select2({
|
||||
placeholder: 'Pilih Wilayah',
|
||||
ajax: {
|
||||
url: "/selectRegenc/" + id, // Isi dengan URL yang sesuai
|
||||
processResults: function ({ data }) {
|
||||
return {
|
||||
results: $.map(data, function (item) {
|
||||
return {
|
||||
id: item.id,
|
||||
text: item.name
|
||||
}
|
||||
})
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Event listener untuk perubahan pada selectRegenc
|
||||
$("#selectRegenc").change(function () {
|
||||
let id = $('#selectRegenc').val();
|
||||
|
||||
// Mengosongkan pilihan di selectDistric
|
||||
$("#selectDistric").empty();
|
||||
|
||||
// Menghapus properti 'disabled' pada selectDistric
|
||||
$("#selectDistric").prop("disabled", false);
|
||||
|
||||
// Memuat ulang data berdasarkan wilayah yang baru dipilih di selectDistric
|
||||
$("#selectDistric").select2({
|
||||
placeholder: 'Pilih Kecamatan',
|
||||
ajax: {
|
||||
url: "/selectDistric/" + id, // Isi dengan URL yang sesuai
|
||||
processResults: function ({ data }) {
|
||||
return {
|
||||
results: $.map(data, function (item) {
|
||||
return {
|
||||
id: item.id,
|
||||
text: item.name
|
||||
}
|
||||
})
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
@ -52,6 +52,11 @@
|
||||
background-color: #900c3e !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
#foto-preview-ktp,
|
||||
#foto-preview-ekyc {
|
||||
width: 300px
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
@ -201,7 +206,7 @@
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="text" class="input-field" id="alamat" name="alamat" placeholder="Alamat lengkap Anda" cols="50" rows="4" style="width: 190%; padding: 0rem 1rem;" required>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@ -214,34 +219,32 @@
|
||||
<div class="slider-container">
|
||||
<div class="slider">
|
||||
<div class="slide fade">
|
||||
<form id="bukuTamuForm" method="POST" enctype="multipart/form-data">
|
||||
<div
|
||||
style=" display: flex; flex-direction: column; align-items: center">
|
||||
<form id="bukuTamuFormKtp" method="POST" enctype="multipart/form-data">
|
||||
<div style="display: flex; flex-direction: column; align-items: center">
|
||||
<h3 style="">KTP Anda</h3>
|
||||
<div id="webcam-container">
|
||||
<video id="webcamKtp" autoplay playsinline>
|
||||
<div id="foto-preview"></div>
|
||||
</video>
|
||||
</div>
|
||||
<video id="webcamKtp" autoplay playsinline></video>
|
||||
<div id="foto-preview-ktp"></div>
|
||||
<input type="hidden" id="fotoKtp" name="foto">
|
||||
<button type="button" class="btn-foto"
|
||||
id="captureButtonKtp">Ambil Foto</button>
|
||||
<div style="display: flex; margin-top: 1rem">
|
||||
<button type="button" class="btn-foto" id="startButtonKtp" data-state="off">Mulai Kamera</button>
|
||||
<button type="button" class="btn-foto" id="captureButtonKtp">Ambil Foto</button>
|
||||
<button type="button" class="btn-foto" id="refreshButtonKtp">Ulang Foto</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="slide fade">
|
||||
<form id="bukuTamuForm" method="POST" enctype="multipart/form-data">
|
||||
<div
|
||||
style="display: flex; flex-direction: column; justify-content: center; align-items: center">
|
||||
<form id="bukuTamuFormEkyc" method="POST" enctype="multipart/form-data">
|
||||
<div style="display: flex; flex-direction: column; justify-content: center; align-items: center">
|
||||
<h3>E-KYC Anda</h3>
|
||||
<div id="webcam-container">
|
||||
<video id="webcamEkyc" autoplay playsinline>
|
||||
<div id="foto-preview"></div>
|
||||
</video>
|
||||
</div>
|
||||
<video id="webcamEkyc" autoplay playsinline></video>
|
||||
<div id="foto-preview-ekyc"></div>
|
||||
<input type="hidden" id="fotoEkyc" name="foto">
|
||||
<button type="button" class="btn-foto"
|
||||
id="captureButtonEkyc">Ambil Foto</button>
|
||||
<div style="display: flex; margin-top: 1rem">
|
||||
<button type="button" class="btn-foto" id="startButtonEkyc" data-state="off">Mulai Kamera</button>
|
||||
<button type="button" class="btn-foto" id="captureButtonEkyc">Ambil Foto</button>
|
||||
<button type="button" class="btn-foto" id="refreshButtonEkyc">Ulang Foto</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user