From 8033e935726b1f6bf5cf412ccf80b2b024e43ee8 Mon Sep 17 00:00:00 2001 From: Agung Gumelar Date: Wed, 11 Oct 2023 02:30:25 +0000 Subject: [PATCH] Update assets/js/scripts.js Fixing NIK and Add Function Change Endppoint Form --- assets/js/scripts.js | 142 ++++++++++++++++++++++++++++++------------- 1 file changed, 101 insertions(+), 41 deletions(-) diff --git a/assets/js/scripts.js b/assets/js/scripts.js index 50dbf6a..7ec8fd1 100644 --- a/assets/js/scripts.js +++ b/assets/js/scripts.js @@ -1,23 +1,109 @@ -// Toggle NIK +// Feature: Toggle NIK $("#jenis-nasabah").on("change", function () { - const jenis = parseInt($(this).val()); + const jenisNasabah = parseInt($(this).val()); const nik = $("#nik").parent(); - if (jenis == 0) { + // Check value of jenis nasabah + if (jenisNasabah == 0) { nik.removeClass("d-none").addClass("fade-in"); $("#nik").attr("disabled", false); + + nik.on("animationend", function () { + nik.removeClass("fade-in"); + nik.off("animationend"); + }); } else { nik.addClass("fade-out"); + $("#nik").attr("disabled", true); nik.on("animationend", function () { nik.addClass("d-none").removeClass("fade-out"); - $("#nik").attr("disabled", true); nik.off("animationend"); }); } }); -// Toggle Password +// Feature: Input NIK hanya nomor dan tidak boleh lebih dari 16 karakter +$("#nik").on("input", function () { + // Menghapus semua karakter yang bukan angka + $(this).val($(this).val().replace(/\D/g, "")); + + // Memastikan panjang input tidak melebihi 16 karakter + if ($(this).val().length > 16) { + $(this).val($(this).val().slice(0, 16)); + } +}); + +// Feature: Toggle jenis Akun +$("#jenisAkun").on("click", function () { + const teksJenis = $("#text-jenis-akun"); + const deskripsiJenis = $("#deskripsi-jenis-akun"); + const labelNama = $("#label-nama"); + const jenisNasabah = $("#jenis-nasabah").parent(); + const jenisNasabahValue = $("#jenis-nasabah").val(); + const jenisBankSampah = $("#jenis-bank-sampah").parent(); + const nik = $("#nik").parent(); + const isBankSampah = $(this).is(":checked"); + + if (isBankSampah) { + // Action for Bank Sampah + teksJenis.text("Bank Sampah"); + deskripsiJenis.text( + "Daftarkan Bank Sampah anda sekarang untuk lingkungan yang lebih indah 🌳" + ); + labelNama.text("Nama Bank Sampah"); + + jenisBankSampah.removeClass("d-none"); + jenisNasabah.addClass("d-none"); + + if (!nik.hasClass("d-none")) { + nik.addClass("fade-out"); + $("#nik").attr("disabled", true); + + nik.on("animationend", function () { + nik.addClass("d-none").removeClass("fade-out"); + nik.off("animationend"); + }); + } + + changeSubmitRegister(isBankSampah); + } else { + // Action for Nasabah + teksJenis.text("Nasabah"); + deskripsiJenis.text( + "Buat akun nasabah pertama anda dan mulai menabung di E-Bank Sampah 🗑️" + ); + labelNama.text("Nama Lengkap"); + + jenisBankSampah.addClass("d-none"); + jenisNasabah.removeClass("d-none"); + + // Check value of janis nasabah + if (jenisNasabahValue == 0) { + nik.removeClass("d-none").addClass("fade-in"); + $("#nik").attr("disabled", false); + + nik.on("animationend", function () { + nik.removeClass("fade-in"); + nik.off("animationend"); + }); + } else { + if (!nik.hasClass("d-none")) { + nik.addClass("fade-out"); + $("#nik").attr("disabled", true); + + nik.on("animationend", function () { + nik.addClass("d-none").removeClass("fade-out"); + nik.off("animationend"); + }); + } + } + + changeSubmitRegister(isBankSampah); + } +}); + +// Feature: Toggle Password $("#togglePassword").on("click", function () { const $passwordField = $("#password"); const passwordFieldType = $passwordField.attr("type"); @@ -29,41 +115,15 @@ $("#togglePassword").on("click", function () { } }); -$("#nik").on("input", function () { - // Menghapus semua karakter yang bukan angka - $(this).val($(this).val().replace(/\D/g, "")); +// Feature: Submit Register +function changeSubmitRegister(isBankSampah) { + // Change this string endpoint API + const endpointNasabah = "/api/register/nasabah"; + const endpointBankSampah = "/api/register/bank-sampah"; - // Memastikan panjang input tidak melebihi 16 karakter - if ($(this).val().length > 16) { - $(this).val($(this).val().slice(0, 16)); - } -}); + const form = $("#form-register"); -// Toggle jenis Akun -$("#jenisAkun").on("click", function () { - const teksJenis = $("#text-jenis-akun"); - const deskripsiJenis = $("#deskripsi-jenis-akun"); - const labelNama = $("#label-nama"); - const jenisNasabah = $("#jenis-nasabah").parent(); - const jenisBankSampah = $("#jenis-bank-sampah").parent(); - - if ($(this).is(":checked")) { - // Action buat Bank Sampah - teksJenis.text("Bank Sampah"); - deskripsiJenis.text( - "Daftarkan Bank Sampah anda sekarang untuk lingkungan yang lebih indah 🌳" - ); - labelNama.text("Nama Bank Sampah"); - jenisBankSampah.removeClass("d-none"); - jenisNasabah.addClass("d-none"); - } else { - // Action buat Nasabah - teksJenis.text("Nasabah"); - deskripsiJenis.text( - "Buat akun nasabah pertama anda dan mulai menabung di E-Bank Sampah 🗑️" - ); - labelNama.text("Nama Lengkap"); - jenisBankSampah.addClass("d-none"); - jenisNasabah.removeClass("d-none"); - } -}); + isBankSampah + ? form.attr("action", endpointBankSampah) + : form.attr("action", endpointNasabah); +}