//############################################ FAKE TABLE FOR INITIAL LOADING THE PAGE ######### document.addEventListener('DOMContentLoaded', () => { async function fetchFakeTable() { try { const response = await fetch("https://cdn.afterprime.com/jsons/symbols_all.json"); if (!response.ok) { throw new Error('Network response was not ok ' + response.statusText); } const symbols = await response.json(); const filterSymbols = symbols.filter(symbol => symbol.instrument === 'crypto'); const tableBody = document.getElementById('fakeRowsCrypto'); let htmlString = ''; filterSymbols.forEach(symbol => { htmlString += `

${ symbol.instrument === 'forex' ? `

` : `

` }

${symbol.id} ${symbol.name}

Trade `; }); tableBody.innerHTML = htmlString; } catch (error) { console.error('Failed to fetch stock data:', error); } } fetchFakeTable(); }); //############################################ FAKE TABLE FOR INITIAL LOADING THE PAGE ######### window.onload = function () { let ids = []; const fakeTable = document.getElementById('fakeTableCrypto'); const firstTable = document.getElementById('fetchedDataTableCrypto'); async function fetchData(){ try{ const response = await fetch("https://cdn.afterprime.com/jsons/symbols_all.json"); // Check if the response is OK (status code 200-299) if (!response.ok) { throw new Error('Network response was not ok ' + response.statusText); } const symbols = await response.json(); const filterSymbols = symbols.filter(symbol => symbol.instrument === 'crypto'); ids = filterSymbols.map(symbol => symbol.id); const tableBody = document.getElementById('dynamicRowsCrypto'); let htmlString = ''; filterSymbols.forEach(symbol => { htmlString += `

${ symbol.instrument === 'forex' ? `

` : `

` }

${symbol.id} ${symbol.name}

Trade `; }); tableBody.innerHTML = htmlString; } catch(error){ console.error('Failed to fetch stock data:', error); } } fetchData(); //############# Functions Starts ############################## function getPrice(asset, ask, bid, as, bs) { const bidPriceId = document.getElementById("" + asset + 'BID'); const askPriceId = document.getElementById("" + asset + 'ASK'); const spreadId = document.getElementById("" + asset + 'S'); const numToString = bid.toString(); const decimalPart = numToString.split('.')[1]; const lengthOfDecimal = decimalPart ? decimalPart.length : 0; if (lengthOfDecimal <= 5) { spreadId.innerHTML = ((ask - bid) * 10000).toFixed(2); } else { spreadId.innerHTML = ((ask - bid) * 10000).toFixed(2); } if (lengthOfDecimal < 4) { //spreadId.innerHTML = ((ask - bid) * 100).toFixed(2); spreadId.innerHTML = ((ask - bid)).toFixed(2); } if (lengthOfDecimal == 4) { bidPriceId.innerHTML = formatAndWrapLastTwoDigits(bid, 5); askPriceId.innerHTML = formatAndWrapLastTwoDigits(ask, 5); } else if (lengthOfDecimal == 2) { bidPriceId.innerHTML = formatAndWrapLastTwoDigits(bid, 3); askPriceId.innerHTML = formatAndWrapLastTwoDigits(ask, 3); } else { bidPriceId.innerHTML = defaultWrap(bid); askPriceId.innerHTML = defaultWrap(ask); } } //####################### Wrapping last 2 digits with tag function formatAndWrapLastTwoDigits(num, toFix) { // Format the number to three decimal places let formattedNumber = num.toFixed(toFix); // Find the position to wrap last two digits let integerPart = formattedNumber.slice(0, -2); // Everything except the last two digits let lastTwoDigits = formattedNumber.slice(-2); // The last two digits // Wrap the last two digits in a tag return `${integerPart}${lastTwoDigits}`; } function defaultWrap(num) { // Format the number to three decimal places let formattedNumber = num.toString(); // Find the position to wrap last two digits let integerPart = formattedNumber.slice(0, -2); // Everything except the last two digits let lastTwoDigits = formattedNumber.slice(-2); // The last two digits // Wrap the last two digits in a tag return `${integerPart}${lastTwoDigits}`; } //####################### End of the all vital functions ########################## if ("WebSocket" in window) { // Let us open a web socket var ws = new ReconnectingWebSocket("wss://pricefeed.afterprime.com/price?symbol=all"); ws.timeoutInterval = 200; ws.onopen = function () { // Web Socket is connected, send data using send() ws.send("Connect"); document.getElementById("pricingTable").style.display = "block"; }; ws.onmessage = function (evt) { setTimeout(() => { fakeTable.style.display = 'none'; firstTable.classList.add('visible'); }, 1000); var received_msg = evt.data; //alert(received_msg); const res = JSON.parse(received_msg); const filteredInstruments = res.filter(item => item.id.includes('@Local_Execution')); //console.log(filteredInstruments); for (const obj of filteredInstruments) { obj.id = obj.id.replace('@Local_Execution', ''); console.log('Items:', obj.id); if (ids.includes(obj.id)) { getPrice(obj.id,obj.ap,obj.bp,obj.as,obj.bs); } } }; ws.onclose = function () { // websocket is closed. //alert("Connection is closed..."); }; } else { item.innerHTML = "Your browser does not support WebSockets."; } }