Sultan
/
invoiceninja
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix timer

This commit is contained in:
cnohall 2025-03-11 13:19:09 +09:00
parent a942a8efd1
commit d56cf40522
1 changed files with 73 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

144
resources/js/clients/payments/blockonomics.js vendored
View File

@ -16,7 +16,8 @@ class Blockonomics {
// Bind the method to the instance // Bind the method to the instance
this.copyToClipboard = this.copyToClipboard.bind(this); this.copyToClipboard = this.copyToClipboard.bind(this);
this.refreshBTCPrice = this.refreshBTCPrice.bind(this); this.refreshBTCPrice = this.refreshBTCPrice.bind(this);
this.fetchAndDisplayQRCode = this.fetchAndDisplayQRCode.bind(this);
this.startTimer = this.startTimer.bind(this);
} }
copyToClipboard(elementId, passedElement, shouldGrabNextElementSibling) { copyToClipboard(elementId, passedElement, shouldGrabNextElementSibling) {
@ -48,6 +49,54 @@ class Blockonomics {
}, 5000); }, 5000);
} }
async fetchAndDisplayQRCode (newBtcAmount = null) {
try {
const btcAddress = document.querySelector('meta[name="btc_address"]').content;
const btcAmount = newBtcAmount || '{{$btc_amount}}';
const qrString = encodeURIComponent(`bitcoin:${btcAddress}?amount=${btcAmount}`);
const response = await fetch(`/api/v1/get-blockonomics-qr-code?qr_string=${qrString}`);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const svgText = await response.text();
document.getElementById('qrcode-container').innerHTML = svgText;
} catch (error) {
console.error('Error fetching QR code:', error);
document.getElementById('qrcode-container').textContent = 'Error loading QR code';
}
};
startTimer = (seconds) => {
const countDownDate = new Date().getTime() + seconds * 1000;
document.getElementById("countdown").innerHTML = "10" + ":" + "00" + " min";
const updateCountdown = () => {
const now = new Date().getTime();
const distance = countDownDate - now;
const isRefreshing = document.getElementsByClassName("btc-value")[0].innerHTML.includes("Refreshing");
if (isRefreshing) {
return;
}
if (distance < 0) {
refreshBTCPrice();
return;
}
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
const formattedMinutes = String(minutes).padStart(2, '0');
const formattedSeconds = String(seconds).padStart(2, '0');
document.getElementById("countdown").innerHTML = formattedMinutes + ":" + formattedSeconds + " min";
}
clearInterval(window.countdownInterval);
window.countdownInterval = setInterval(updateCountdown, 1000);
}
async refreshBTCPrice() { async refreshBTCPrice() {
const refreshIcon = document.querySelector('.icon-refresh'); const refreshIcon = document.querySelector('.icon-refresh');
refreshIcon.classList.add('rotating'); refreshIcon.classList.add('rotating');
@ -90,8 +139,8 @@ class Blockonomics {
openInWalletLink.href = `bitcoin:${btcAddress}?amount=${newBtcAmount}`; openInWalletLink.href = `bitcoin:${btcAddress}?amount=${newBtcAmount}`;
// fetch and display the new QR code // fetch and display the new QR code
fetchAndDisplayQRCode(newBtcAmount); await this.fetchAndDisplayQRCode(newBtcAmount);
startTimer(600); // Restart timer for 10 minutes (600 seconds) this.startTimer(600); // Restart timer for 10 minutes (600 seconds)
} }
} finally { } finally {
refreshIcon.classList.remove('rotating'); refreshIcon.classList.remove('rotating');
@ -102,77 +151,30 @@ class Blockonomics {
handle() { handle() {
window.copyToClipboard = this.copyToClipboard; window.copyToClipboard = this.copyToClipboard;
window.refreshBTCPrice = this.refreshBTCPrice; window.refreshBTCPrice = this.refreshBTCPrice;
window.fetchAndDisplayQRCode = this.fetchAndDisplayQRCode;
window.startTimer = this.startTimer;
const startTimer = (seconds) => { const connectToWebsocket = () => {
const countDownDate = new Date().getTime() + seconds * 1000;
document.getElementById("countdown").innerHTML = "10" + ":" + "00" + " min";
const updateCountdown = () => {
const now = new Date().getTime();
const distance = countDownDate - now;
const isRefreshing = document.getElementsByClassName("btc-value")[0].innerHTML.includes("Refreshing");
if (isRefreshing) {
return;
}
if (distance < 0) {
refreshBTCPrice();
return;
}
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
const formattedMinutes = String(minutes).padStart(2, '0');
const formattedSeconds = String(seconds).padStart(2, '0');
document.getElementById("countdown").innerHTML = formattedMinutes + ":" + formattedSeconds + " min";
}
clearInterval(window.countdownInterval);
window.countdownInterval = setInterval(updateCountdown, 1000);
}
const connectToWebsocket = () => {
const btcAddress = document.querySelector('meta[name="btc_address"]').content;
const webSocketUrl = `wss://www.blockonomics.co/payment/${btcAddress}`;
const ws = new WebSocket(webSocketUrl);
ws.onmessage = function (event) {
const data = JSON.parse(event.data);
console.log('Payment status:', data.status);
const isPaymentUnconfirmed = data.status === 0;
const isPaymentPartiallyConfirmed = data.status === 1;
// TODO: Do we need to handle Payment confirmed status?
// This usually takes too long to happen, so we can just wait for the unconfirmed status?
if (isPaymentUnconfirmed || isPaymentPartiallyConfirmed) {
document.querySelector('input[name="txid"]').value = data.txid || '';
document.getElementById('server-response').submit();
}
}
};
const fetchAndDisplayQRCode = async (newBtcAmount = null) => {
try {
const btcAddress = document.querySelector('meta[name="btc_address"]').content; const btcAddress = document.querySelector('meta[name="btc_address"]').content;
const btcAmount = newBtcAmount || '{{$btc_amount}}'; const webSocketUrl = `wss://www.blockonomics.co/payment/${btcAddress}`;
const qrString = encodeURIComponent(`bitcoin:${btcAddress}?amount=${btcAmount}`); const ws = new WebSocket(webSocketUrl);
const response = await fetch(`/api/v1/get-blockonomics-qr-code?qr_string=${qrString}`);
if (!response.ok) { ws.onmessage = function (event) {
throw new Error(`HTTP error! status: ${response.status}`); const data = JSON.parse(event.data);
console.log('Payment status:', data.status);
const isPaymentUnconfirmed = data.status === 0;
const isPaymentPartiallyConfirmed = data.status === 1;
// TODO: Do we need to handle Payment confirmed status?
// This usually takes too long to happen, so we can just wait for the unconfirmed status?
if (isPaymentUnconfirmed || isPaymentPartiallyConfirmed) {
document.querySelector('input[name="txid"]').value = data.txid || '';
document.getElementById('server-response').submit();
}
} }
const svgText = await response.text(); };
document.getElementById('qrcode-container').innerHTML = svgText; startTimer(600); // Start timer for 10 minutes (600 seconds)
} catch (error) { connectToWebsocket();
console.error('Error fetching QR code:', error); fetchAndDisplayQRCode();
document.getElementById('qrcode-container').textContent = 'Error loading QR code';
}
};
startTimer(600); // Start timer for 10 minutes (600 seconds)
connectToWebsocket();
fetchAndDisplayQRCode();
} }
} }