mirror of
https://gitlab.com/sarlink/kyc.git
synced 2025-04-20 02:07:00 +00:00
271 lines
10 KiB
JavaScript
271 lines
10 KiB
JavaScript
|
|
const blacklistedChars = /\s,/g;
|
|
|
|
let macAddressElements = [];
|
|
|
|
function saveCustomerName() {
|
|
localStorage.setItem("customer_name", document.getElementById("customer_name").value);
|
|
document.getElementById("customer_name").value = localStorage.getItem("customer_name")
|
|
}
|
|
|
|
function savePhoneNumber() {
|
|
localStorage.setItem("phone_number", document.getElementById("phone_number").value);
|
|
document.getElementById("phone_number").value = localStorage.getItem("phone_number")
|
|
}
|
|
|
|
function saveMACAddresses() {
|
|
localStorage.setItem("mac_address", macAddressElements.map(macAddressElement => document.getElementById(macAddressElement).value).join(","));
|
|
document.getElementById("mac_address").value = localStorage.getItem("mac_address")
|
|
}
|
|
|
|
function saveDeviceNames() {
|
|
localStorage.setItem("device_name", macAddressElements.map(macAddressElement => document.getElementById(`${macAddressElement}_device`).value).join(","));
|
|
document.getElementById("device_name").value = localStorage.getItem("device_name")
|
|
}
|
|
|
|
function saveIsRoaming() {
|
|
localStorage.setItem("is_roaming", macAddressElements.map(macAddressElement => document.getElementById(`${macAddressElement}_roaming`).checked).join(","));
|
|
document.getElementById("is_roaming").value = localStorage.getItem("is_roaming")
|
|
setPricing()
|
|
}
|
|
|
|
function saveIsGaming() {
|
|
localStorage.setItem("is_gaming", macAddressElements.map(macAddressElement => document.getElementById(`${macAddressElement}_gaming`).checked).join(","));
|
|
document.getElementById("is_gaming").value = localStorage.getItem("is_gaming")
|
|
setPricing()
|
|
}
|
|
|
|
function addMACAddress(macAddress = "", deviceName = "", isRoaming = false, isGaming = false) {
|
|
let nextIndex = macAddressElements.length;
|
|
let nextMacAddressElement = `mac_address_${nextIndex}`;
|
|
while (macAddressElements.includes(nextMacAddressElement)) {
|
|
nextIndex += 1;
|
|
nextMacAddressElement = `mac_address_${nextIndex}`;
|
|
}
|
|
// const template = `
|
|
// <div id="${nextMacAddressElement}_container" class="w-full">
|
|
// <div class="join w-full mt-4">
|
|
// <div class="w-full flex flex-row justify-stretch">
|
|
// <div class="flex-grow">
|
|
// <input id="${nextMacAddressElement}" class="input input-bordered join-item w-full"
|
|
// value="${macAddress}"
|
|
// placeholder="00:00:00:00:00:00" oninput="validateMACAddress('${nextMacAddressElement}')"
|
|
// onchange="saveMACAddresses()" />
|
|
// </div>
|
|
// <div class="flex-grow">
|
|
// <input id="${nextMacAddressElement}_device" class="input input-bordered join-item w-full"
|
|
// value="${deviceName}"
|
|
// onchange="saveMACAddresses()" placeholder="iphone-12"
|
|
// onclick="fillDeviceName('${nextMacAddressElement}')" />
|
|
// </div>
|
|
// </div>
|
|
// <button class="indicator" onclick="event.preventDefault();removeMACAddress('${nextMacAddressElement}')">
|
|
// <span class="indicator-item badge badge-error">-</span>
|
|
// </button>
|
|
// </div>
|
|
// <div class="join align-middle mt-2">
|
|
// <button class="btn join-item btn-accent" onclick="event.preventDefault()">Add-ons</button>
|
|
// <input class="join-item btn" type="checkbox" id="${nextMacAddressElement}_roaming" onchange="saveIsRoaming()"
|
|
// ${isRoaming === "true" ? "checked" : ""}
|
|
// aria-label="Roaming" />
|
|
// <input class="join-item btn" type="checkbox" id="${nextMacAddressElement}_gaming" onchange="saveIsGaming()"
|
|
// ${isGaming === "true" ? "checked" : ""}
|
|
// aria-label="Gaming" />
|
|
// </div>
|
|
// </div>`;
|
|
|
|
let template = document.getElementById("template_container").outerHTML;
|
|
template = template.replace(/template/g, nextMacAddressElement);
|
|
template = template.replace(/{mac_address}/g, macAddress);
|
|
template = template.replace(/{device_name}/g, deviceName);
|
|
template = template.replace(/{roaming}/g, isRoaming === "true" ? "checked" : "");
|
|
template = template.replace(/{gaming}/g, isGaming === "true" ? "checked" : "");
|
|
|
|
// document.getElementById("mac_addresses").innerHTML += template;
|
|
document.getElementById("mac_addresses").insertAdjacentHTML("beforeend", template)
|
|
document.getElementById(`${nextMacAddressElement}_container`).classList.remove("hidden");
|
|
macAddressElements.push(nextMacAddressElement)
|
|
setPricing()
|
|
}
|
|
|
|
function removeMACAddress(id) {
|
|
if (!macAddressElements.includes(id)) return;
|
|
|
|
macAddressElements = macAddressElements.filter((macAddressElement) => macAddressElement !== id);
|
|
document.getElementById(`${id}_container`).remove()
|
|
|
|
saveMACAddresses();
|
|
saveDeviceNames();
|
|
saveIsGaming();
|
|
saveIsRoaming();
|
|
}
|
|
|
|
function recoverForm() {
|
|
const customerName = document.getElementById("customer_name");
|
|
const phoneNumber = document.getElementById("phone_number");
|
|
// const macAddress = document.getElementById("mac_address");
|
|
// const deviceName = document.getElementById("device_name");
|
|
// const isRoaming = document.getElementById("is_roaming");
|
|
// const isGaming = document.getElementById("is_gaming");
|
|
|
|
customerName.value = localStorage.getItem("customer_name") || "";
|
|
phoneNumber.value = localStorage.getItem("phone_number") || "";
|
|
// macAddress.value = localStorage.getItem("mac_address") || "";
|
|
// deviceName.value = localStorage.getItem("device_name") || "";
|
|
// isRoaming.value = localStorage.getItem("is_roaming") === "true";
|
|
// isGaming.value = localStorage.getItem("is_gaming") === "true";
|
|
|
|
const macAddresses = (localStorage.getItem("mac_address") || "").split(",");
|
|
const deviceNames = (localStorage.getItem("device_name") || "").split(",");
|
|
const isRoaming = (localStorage.getItem("is_roaming") || "").split(",");
|
|
const isGaming = (localStorage.getItem("is_gaming") || "").split(",");
|
|
macAddresses.forEach((macAddress, index) => {
|
|
addMACAddress(macAddress, deviceNames[index], isRoaming[index], isGaming[index]);
|
|
});
|
|
}
|
|
|
|
function saveForm() {
|
|
saveCustomerName();
|
|
savePhoneNumber();
|
|
saveMACAddresses();
|
|
saveDeviceNames();
|
|
saveIsRoaming();
|
|
saveIsGaming();
|
|
}
|
|
|
|
function saveHiddenForm() {
|
|
saveMACAddresses();
|
|
saveDeviceNames();
|
|
saveIsRoaming();
|
|
saveIsGaming();
|
|
}
|
|
|
|
function clearForm() {
|
|
if (!confirm("This will remove all the data that is currently filled out. Do you want to continue?")) return;
|
|
|
|
localStorage.removeItem("customer_name");
|
|
document.getElementById("customer_name").value = "";
|
|
for (const macAddressElement of macAddressElements) {
|
|
removeMACAddress(macAddressElement)
|
|
}
|
|
}
|
|
|
|
function setPricing() {
|
|
const amountLabel = document.getElementById("amount");
|
|
|
|
const amount = (normalPrice * macAddressElements.length) + (roamingPrice * document.querySelectorAll("input[id$='_roaming']:checked").length) + (gamingPrice * document.querySelectorAll("input[id$='_gaming']:checked").length);
|
|
|
|
amountLabel.textContent = `${amount} ${currency}`;
|
|
}
|
|
|
|
function fillDeviceName(id) {
|
|
let deviceType = "";
|
|
const macAddress = document.getElementById(id).value;
|
|
// now we find out which format it is
|
|
// 35:df:61 = customerfirstname-android
|
|
// 3A-DF-61 = customerfirstname-laptop
|
|
// 3A:DF:61 = customerfirstname-iphone
|
|
const macAddressRegex = new RegExp(
|
|
/^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$/
|
|
);
|
|
if (macAddress === macAddress.toLowerCase()) {
|
|
deviceType = "android";
|
|
} else if (macAddress === macAddress.replace(/:/g, "-")) {
|
|
deviceType = "laptop";
|
|
} else if (macAddress === macAddress.toUpperCase()) {
|
|
deviceType = "iphone";
|
|
} else {
|
|
deviceType = "phone";
|
|
}
|
|
|
|
const fullName = document.getElementById("customer_name").value;
|
|
const kebabCase = fullName.split(" ")[0].toLowerCase();
|
|
// const kebabCase = fullName.toLowerCase().replace(/\s/g, "-");
|
|
const deviceName = `${kebabCase}-${deviceType}`.toLowerCase();
|
|
|
|
const deviceNameInput = document.getElementById(`${id}_device`);
|
|
if (!deviceNameInput.value) deviceNameInput.value = deviceName;
|
|
|
|
saveDeviceNames()
|
|
}
|
|
|
|
function validateMACAddress(id) {
|
|
var macAddress = document.getElementById(id);
|
|
macAddress.setCustomValidity("");
|
|
macAddress.classList.remove("input-error");
|
|
macAddress.classList.remove("input-success");
|
|
if (!macAddress.value || macAddress.value === "") return false;
|
|
macAddress.value = macAddress.value.replace(blacklistedChars, ":");
|
|
var macAddressRegex = new RegExp(
|
|
/^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$/
|
|
);
|
|
const macAddressValue = macAddress.value;
|
|
if (!macAddressRegex.test(macAddressValue)) {
|
|
macAddress.classList.add("input-error");
|
|
macAddress.setCustomValidity("Invalid MAC Address");
|
|
macAddress.reportValidity();
|
|
return false;
|
|
}
|
|
macAddress.classList.add("input-success");
|
|
macAddress.reportValidity();
|
|
fillDeviceName(id);
|
|
return true;
|
|
}
|
|
|
|
function validateDeviceName(id) {
|
|
const deviceName = document.getElementById(`${id}_device`);
|
|
deviceName.value = deviceName.value.toLowerCase().replace(blacklistedChars, "-")
|
|
deviceName.setCustomValidity("");
|
|
deviceName.classList.remove("input-error");
|
|
deviceName.classList.remove("input-success");
|
|
|
|
// any custom validation
|
|
|
|
deviceName.classList.add("input-success");
|
|
return true;
|
|
}
|
|
|
|
function validateForm() {
|
|
const macAddressValid = macAddressElements.map(macAddressElement => validateMACAddress(macAddressElement)).every(r => r === true);
|
|
const customerName = document.getElementById("customer_name");
|
|
customerName.classList.remove("input-error");
|
|
// customerName.setCustomValidity("");
|
|
const deviceName = document.getElementById("device_name");
|
|
deviceName.classList.remove("input-error");
|
|
// deviceName.setCustomValidity("");
|
|
const transferReceipt = document.getElementById("transfer_receipt");
|
|
transferReceipt.classList.remove("input-error");
|
|
// transferReceipt.setCustomValidity("");
|
|
|
|
if (customerName.value === "") {
|
|
customerName.classList.add("input-error");
|
|
// customerName.setCustomValidity("Customer Name is required");
|
|
// customerName.reportValidity();
|
|
}
|
|
|
|
if (deviceName.value === "") {
|
|
deviceName.classList.add("input-error");
|
|
// deviceName.setCustomValidity("Device Name is required");
|
|
// deviceName.reportValidity();
|
|
}
|
|
|
|
if (transferReceipt.files.length === 0) {
|
|
transferReceipt.classList.add("input-error");
|
|
// transferReceipt.setCustomValidity("Transfer Receipt is required");
|
|
// transferReceipt.reportValidity();
|
|
}
|
|
|
|
saveForm();
|
|
|
|
return (
|
|
macAddressValid &&
|
|
customerName.value !== "" &&
|
|
deviceName.value !== "" &&
|
|
transferReceipt.files.length > 0
|
|
);
|
|
}
|
|
|
|
window.onload = () => {
|
|
recoverForm();
|
|
setPricing();
|
|
}; |