97 lines
		
	
	
	
		
			2.6 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
			
		
		
	
	
			97 lines
		
	
	
	
		
			2.6 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
const pinContainer = document.querySelector(".pinpad-container"),
 | 
						|
    pinBox = document.getElementById("PINbox");
 | 
						|
 | 
						|
let pinValue = "";
 | 
						|
let correctSequence = [];
 | 
						|
 | 
						|
const openPinpad = (pinNumber) => {
 | 
						|
    correctSequence = pinNumber.split("");
 | 
						|
    pinBox.value = "";
 | 
						|
    pinValue = "";
 | 
						|
    pinContainer.style.display = "block";
 | 
						|
    setTimeout(() => (pinContainer.style.opacity = 1), 300);
 | 
						|
};
 | 
						|
 | 
						|
const closePinpad = async () => {
 | 
						|
    pinContainer.style.opacity = 0;
 | 
						|
    setTimeout(async () => {
 | 
						|
        pinContainer.style.display = "none";
 | 
						|
        try {
 | 
						|
            await fetch(`https://${GetParentResourceName()}/pinpadExit`, {
 | 
						|
                method: "POST",
 | 
						|
                headers: {
 | 
						|
                    "Content-Type": "application/json",
 | 
						|
                },
 | 
						|
                body: JSON.stringify({ action: "closePinpad" }),
 | 
						|
            });
 | 
						|
        } catch (err) {}
 | 
						|
    }, 300);
 | 
						|
};
 | 
						|
 | 
						|
const addNumber = (num) => {
 | 
						|
    pinValue += num;
 | 
						|
    pinBox.value += "*";
 | 
						|
 | 
						|
    if (pinValue.length === correctSequence.length) {
 | 
						|
        checkSequence();
 | 
						|
    }
 | 
						|
};
 | 
						|
 | 
						|
const checkSequence = async () => {
 | 
						|
    const isCorrect = pinValue === correctSequence.join("");
 | 
						|
    pinValue = "";
 | 
						|
    pinBox.value = "";
 | 
						|
 | 
						|
    try {
 | 
						|
        if (isCorrect) {
 | 
						|
            await postData(`https://${GetParentResourceName()}/pinpadFinish`, { correct: true });
 | 
						|
        } else {
 | 
						|
            await postData(`https://${GetParentResourceName()}/pinpadFinish`, { correct: false });
 | 
						|
        }
 | 
						|
    } catch (err) {}
 | 
						|
    closePinpad();
 | 
						|
};
 | 
						|
 | 
						|
const postData = async (url, data) => {
 | 
						|
    try {
 | 
						|
        await fetch(url, {
 | 
						|
            method: "POST",
 | 
						|
            headers: { "Content-Type": "application/json" },
 | 
						|
            body: JSON.stringify(data),
 | 
						|
        });
 | 
						|
    } catch (err) {}
 | 
						|
};
 | 
						|
 | 
						|
const clearInput = () => {
 | 
						|
    pinValue = "";
 | 
						|
    pinBox.value = "";
 | 
						|
};
 | 
						|
 | 
						|
document.addEventListener("DOMContentLoaded", () => {
 | 
						|
    const pinButtonsContainer = document.getElementById("PINcode");
 | 
						|
    const clearButton = document.getElementById("clearButton");
 | 
						|
 | 
						|
    pinButtonsContainer.addEventListener("click", (event) => {
 | 
						|
        const button = event.target;
 | 
						|
        if (button.classList.contains("PINbutton") && button.id !== "clearButton") {
 | 
						|
            addNumber(button.value);
 | 
						|
        }
 | 
						|
    });
 | 
						|
 | 
						|
    clearButton.addEventListener("click", clearInput);
 | 
						|
});
 | 
						|
 | 
						|
document.addEventListener("keydown", function (event) {
 | 
						|
    const keyName = event.key;
 | 
						|
    if (keyName === "Escape") {
 | 
						|
        closePinpad();
 | 
						|
    }
 | 
						|
});
 | 
						|
 | 
						|
window.addEventListener("message", (event) => {
 | 
						|
    if (event.data.action === "openPinpad") {
 | 
						|
        const pinNumber = event.data.numbers;
 | 
						|
        const pinAsString = pinNumber.toString();
 | 
						|
        openPinpad(pinAsString);
 | 
						|
    }
 | 
						|
});
 |