MAGANG_TB_dan_PNP_2023/dashboard-admin
3
0
Fork 2
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

fix input dropdown kecamatan, add address input, add start and fresh camera button

Browse Source
This commit is contained in:
Fadiyah Putri Sri Lestari 2023-09-10 23:00:45 +07:00
parent 8ffde277fa
commit b9c9252728
3 changed files with 264 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
public/assets/css/login_register/style.css
View File

@ -26,6 +26,10 @@ input[type="text"] {
outline: 0; outline: 0;
} }
video {
background: primary;
}
.container { .container {
position: relative; position: relative;
width: 100%; width: 100%;
@ -357,22 +361,23 @@ form p {
@media (max-width: 1100px) { @media (max-width: 1100px) {
.container { .container {
min-height: 800px; min-height: 1000px;
height: 100vh; height: 100vh;
} }
.container.sign-up-mode .right-panel { form.sign-in-form {
padding-top: 0; justify-content: start;
} }
.header { .header {
padding: 0px; padding: 0;
} }
.header ul li div { .header ul li div {
padding: 0 1.2rem; padding: 0 1.2rem;
} }
.signin-signup { .signin-signup {
width: 100%; width: 100%;
top: 95%; top: 95%;
@ -393,8 +398,6 @@ form p {
.panel { .panel {
flex-direction: row; flex-direction: row;
justify-content: space-around; justify-content: space-around;
align-items: center;
padding: 2.5rem 8%;
grid-column: 1 / 2; grid-column: 1 / 2;
} }
@ -446,7 +449,7 @@ form p {
.container.sign-up-mode:before { .container.sign-up-mode:before {
transform: translate(-50%, 100%); transform: translate(-50%, 100%);
bottom: 32%; bottom: 26%;
right: initial; right: initial;
} }
@ -471,9 +474,13 @@ form p {
} }
} }
@media (max-width: 700px) { @media (max-width: 740px) {
form { .form_4 div {
padding: 0 1.5rem; width: 90%;
}
.btns_wrap .common_btns.form_4_btns {
width: 90%;
} }
.image { .image {
@ -509,7 +516,6 @@ form p {
.header { .header {
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: 1rem 0;
} }
.header ul { .header ul {
@ -925,10 +931,8 @@ form p {
background-color: #900c3e; background-color: #900c3e;
} }
#webcamKtp {
height: 30vh; #webcamKtp,
border-radius: 1rem;
}
#webcamEkyc { #webcamEkyc {
height: 30vh; height: 30vh;
border-radius: 1rem; border-radius: 1rem;

295
public/assets/js/login_register/app.js
View File

@ -139,69 +139,163 @@ document.addEventListener("DOMContentLoaded", function () {
const videoElementKtp = document.getElementById("webcamKtp"); const videoElementKtp = document.getElementById("webcamKtp");
const captureButtonKtp = document.getElementById("captureButtonKtp"); const captureButtonKtp = document.getElementById("captureButtonKtp");
const fotoInputKtp = document.getElementById("fotoKtp"); const fotoInputKtp = document.getElementById("fotoKtp");
const startButtonKtp = document.getElementById("startButtonKtp");
const refreshButtonKtp = document.getElementById("refreshButtonKtp");
const videoElementEkyc = document.getElementById("webcamEkyc"); const videoElementEkyc = document.getElementById("webcamEkyc");
const captureButtonEkyc = document.getElementById("captureButtonEkyc"); const captureButtonEkyc = document.getElementById("captureButtonEkyc");
const fotoInputEkyc = document.getElementById("fotoEkyc"); const fotoInputEkyc = document.getElementById("fotoEkyc");
const startButtonEkyc = document.getElementById("startButtonEkyc");
const refreshButtonEkyc = document.getElementById("refreshButtonEkyc");
navigator.mediaDevices let ktpStream = null;
.getUserMedia({ let ekycStream = null;
video: true
})
.then(function (stream) {
videoElementKtp.srcObject = stream;
})
.catch(function (error) {
console.error("Gagal mengakses kamera: ", error);
});
captureButtonKtp.addEventListener("click", function () { // Fungsi untuk menyalakan kamera
const canvas = document.createElement("canvas"); function turnOnCamera(stream, videoElement, startButton) {
const context = canvas.getContext("2d"); videoElement.srcObject = stream;
canvas.width = videoElementKtp.videoWidth; startButton.textContent = "Matikan Kamera";
canvas.height = videoElementKtp.videoHeight; videoElement.style.display = "block"; // Tampilkan video
context.drawImage(videoElementKtp, 0, 0, canvas.width, canvas.height); }
const fotoDataUrl = canvas.toDataURL("image/jpeg");
// Set nilai foto input hidden dengan data URL // Fungsi untuk mematikan kamera
fotoInputKtp.value = fotoDataUrl; 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
}
// Tampilkan preview foto // Fungsi untuk menghapus hasil foto
const fotoPreview = document.getElementById("foto-preview"); function clearPhoto(fotoInput, fotoPreview) {
fotoPreview.innerHTML = '<img src="' + fotoDataUrl + '" alt="Foto">'; fotoInput.value = "";
fotoPreview.innerHTML = "";
}
// // Hentikan akses kamera setelah mengambil foto startButtonKtp.addEventListener("click", function () {
// stream.getTracks().forEach((track) => track.stop()); 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 })
.then(function (stream) {
ktpStream = stream;
turnOnCamera(ktpStream, videoElementKtp, startButtonKtp);
})
.catch(function (error) {
console.error("Gagal mengakses kamera: ", error);
});
}
}); });
navigator.mediaDevices startButtonEkyc.addEventListener("click", function () {
.getUserMedia({ if (ekycStream) {
video: true // Matikan kamera jika sudah aktif
}) turnOffCamera(ekycStream, videoElementEkyc, startButtonEkyc);
.then(function (stream) { // Hapus hasil foto
videoElementEkyc.srcObject = stream; clearPhoto(fotoInputEkyc, document.getElementById("foto-preview-ekyc"));
}) ekycStream = null;
.catch(function (error) { } else {
console.error("Gagal mengakses kamera: ", error); // 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;
canvas.height = videoElementKtp.videoHeight;
context.drawImage(videoElementKtp, 0, 0, canvas.width, canvas.height);
const fotoDataUrl = canvas.toDataURL("image/jpeg");
fotoInputKtp.value = fotoDataUrl;
const fotoPreview = document.getElementById("foto-preview-ktp");
fotoPreview.innerHTML = '<img src="' + fotoDataUrl + '" alt="Foto">';
// Matikan kamera setelah mengambil foto
turnOffCamera(ktpStream, videoElementKtp, startButtonKtp);
}
});
captureButtonEkyc.addEventListener("click", function () { captureButtonEkyc.addEventListener("click", function () {
const canvas = document.createElement("canvas"); if (ekycStream) {
const context = canvas.getContext("2d"); const canvas = document.createElement("canvas");
canvas.width = videoElementEkyc.videoWidth; const context = canvas.getContext("2d");
canvas.height = videoElementEkyc.videoHeight; canvas.width = videoElementEkyc.videoWidth;
context.drawImage(videoElementEkyc, 0, 0, canvas.width, canvas.height); canvas.height = videoElementEkyc.videoHeight;
const fotoDataUrl = canvas.toDataURL("image/jpeg"); 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;
fotoInputEkyc.value = fotoDataUrl;
// Tampilkan preview foto const fotoPreview = document.getElementById("foto-preview-ekyc");
const fotoPreview = document.getElementById("foto-preview"); fotoPreview.innerHTML = '<img src="' + fotoDataUrl + '" alt="Foto">';
fotoPreview.innerHTML = '<img src="' + fotoDataUrl + '" alt="Foto">';
// // Hentikan akses kamera setelah mengambil foto // Matikan kamera setelah mengambil foto
// stream.getTracks().forEach((track) => track.stop()); turnOffCamera(ekycStream, videoElementEkyc, startButtonEkyc);
}
}); });
}); });
/****************************************** /******************************************
@ -267,14 +361,12 @@ $(document).ready(function () {
* AJAX DROPDOWN SELECT PROVINSI, KABUPATEN & KECAMATAN * AJAX DROPDOWN SELECT PROVINSI, KABUPATEN & KECAMATAN
******************************************/ ******************************************/
$(document).ready(function () { $(document).ready(function () {
// Inisialisasi select2 untuk selectProv
$("#selectProv").select2({ $("#selectProv").select2({
placeholder: 'Pilih Provinsi', placeholder: 'Pilih Provinsi',
ajax: { ajax: {
url: $("#selectProv").data("url"), url: $("#selectProv").data("url"),
processResults: function ({ processResults: function ({ data }) {
data
}) {
return { return {
results: $.map(data, function (item) { results: $.map(data, function (item) {
return { return {
@ -282,21 +374,63 @@ $(document).ready(function () {
text: item.name 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 () { $("#selectProv").change(function () {
let id = $('#selectProv').val(); 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({ $("#selectRegenc").select2({
placeholder: 'Pilih Wilayah', placeholder: 'Pilih Wilayah',
ajax: { ajax: {
url: "/selectRegenc/" + id, url: "/selectRegenc/" + id, // Isi dengan URL yang sesuai
processResults: function ({ processResults: function ({ data }) {
data
}) {
return { return {
results: $.map(data, function (item) { results: $.map(data, function (item) {
return { return {
@ -304,31 +438,40 @@ $(document).ready(function () {
text: item.name text: item.name
} }
}) })
} };
} }
} }
}); });
}); });
$("#selectRegenc").change(function () {
let id = $('#selectRegenc').val();
$("#selectDistric").select2({ // Event listener untuk perubahan pada selectRegenc
placeholder: 'Pilih Kota', $("#selectRegenc").change(function () {
ajax: { let id = $('#selectRegenc').val();
url: "/selectDistric/" + id,
processResults: function ({ data }) { // Mengosongkan pilihan di selectDistric
return { $("#selectDistric").empty();
results: $.map(data, function (item) {
return { // Menghapus properti 'disabled' pada selectDistric
id: item.id, $("#selectDistric").prop("disabled", false);
text: item.name
} // 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
}
})
};
}
}
});
});
}); });
/****************************************** /******************************************
* END AJAX DROPDOWN SELECT PROVINSI, KABUPATEN & KECAMATAN * END AJAX DROPDOWN SELECT PROVINSI, KABUPATEN & KECAMATAN

45
resources/views/auth/sign-in_sign-up.blade.php
View File

@ -52,6 +52,11 @@
background-color: #900c3e !important; background-color: #900c3e !important;
color: #fff !important; color: #fff !important;
} }
#foto-preview-ktp,
#foto-preview-ekyc {
width: 300px
}
</style> </style>
</head> </head>
@ -201,7 +206,7 @@
</select> </select>
</div> </div>
</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> </form>
</div> </div>
@ -214,34 +219,32 @@
<div class="slider-container"> <div class="slider-container">
<div class="slider"> <div class="slider">
<div class="slide fade"> <div class="slide fade">
<form id="bukuTamuForm" method="POST" enctype="multipart/form-data"> <form id="bukuTamuFormKtp" method="POST" enctype="multipart/form-data">
<div <div style="display: flex; flex-direction: column; align-items: center">
style=" display: flex; flex-direction: column; align-items: center">
<h3 style="">KTP Anda</h3> <h3 style="">KTP Anda</h3>
<div id="webcam-container"> <video id="webcamKtp" autoplay playsinline></video>
<video id="webcamKtp" autoplay playsinline> <div id="foto-preview-ktp"></div>
<div id="foto-preview"></div>
</video>
</div>
<input type="hidden" id="fotoKtp" name="foto"> <input type="hidden" id="fotoKtp" name="foto">
<button type="button" class="btn-foto" <div style="display: flex; margin-top: 1rem">
id="captureButtonKtp">Ambil Foto</button> <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> </div>
</form> </form>
</div> </div>
<div class="slide fade"> <div class="slide fade">
<form id="bukuTamuForm" method="POST" enctype="multipart/form-data"> <form id="bukuTamuFormEkyc" method="POST" enctype="multipart/form-data">
<div <div style="display: flex; flex-direction: column; justify-content: center; align-items: center">
style="display: flex; flex-direction: column; justify-content: center; align-items: center">
<h3>E-KYC Anda</h3> <h3>E-KYC Anda</h3>
<div id="webcam-container"> <video id="webcamEkyc" autoplay playsinline></video>
<video id="webcamEkyc" autoplay playsinline> <div id="foto-preview-ekyc"></div>
<div id="foto-preview"></div>
</video>
</div>
<input type="hidden" id="fotoEkyc" name="foto"> <input type="hidden" id="fotoEkyc" name="foto">
<button type="button" class="btn-foto" <div style="display: flex; margin-top: 1rem">
id="captureButtonEkyc">Ambil Foto</button> <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> </div>
</form> </form>
</div> </div>