68 lines
2.4 KiB
JavaScript
68 lines
2.4 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function () {
|
|
const POLLING_INTERVAL = 3000; // 3 seconds
|
|
|
|
const liveRow = document.getElementById('live-crypto-row');
|
|
if (!liveRow) {
|
|
console.error('Live crypto row with ID #live-crypto-row not found.');
|
|
return;
|
|
}
|
|
|
|
// Select cells to update
|
|
const priceCell = liveRow.querySelector('.price');
|
|
const changeCell = liveRow.querySelector('.change');
|
|
const symbolCell = liveRow.querySelector('.symbol');
|
|
const exchangeCell = liveRow.querySelector('.exchange');
|
|
|
|
let lastPrice = 0;
|
|
|
|
async function fetchLivePrice() {
|
|
try {
|
|
const response = await fetch('api/ticker.php');
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP error! Status: ${response.status}`);
|
|
}
|
|
const data = await response.json();
|
|
|
|
if (data.error) {
|
|
throw new Error(`API Error: ${data.error}`);
|
|
}
|
|
|
|
updateRow(data);
|
|
|
|
} catch (error) {
|
|
console.error('Failed to fetch live price:', error);
|
|
// Optionally, display an error state in the UI
|
|
priceCell.textContent = 'Error';
|
|
changeCell.textContent = '--';
|
|
}
|
|
}
|
|
|
|
function updateRow(data) {
|
|
const currentPrice = parseFloat(data.price);
|
|
const priceChange = currentPrice - lastPrice;
|
|
|
|
// Update text content
|
|
priceCell.textContent = `$${currentPrice.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
|
|
symbolCell.textContent = data.symbol.replace('_SPBL', ''); // Clean up symbol name
|
|
exchangeCell.textContent = data.exchange;
|
|
|
|
// Update 24h change
|
|
const changePercent = parseFloat(data.change_24h_percent);
|
|
changeCell.textContent = `${changePercent.toFixed(2)}%`;
|
|
changeCell.classList.toggle('text-success', changePercent >= 0);
|
|
changeCell.classList.toggle('text-danger', changePercent < 0);
|
|
|
|
// Visual flash on price change
|
|
if (lastPrice !== 0 && priceChange !== 0) {
|
|
const flashClass = priceChange > 0 ? 'flash-success' : 'flash-danger';
|
|
priceCell.classList.add(flashClass);
|
|
setTimeout(() => priceCell.classList.remove(flashClass), 750);
|
|
}
|
|
|
|
lastPrice = currentPrice;
|
|
}
|
|
|
|
// Initial fetch and start polling
|
|
fetchLivePrice();
|
|
setInterval(fetchLivePrice, POLLING_INTERVAL);
|
|
}); |