midefos/basicswap
1
0
Fork 0
mirror of https://github.com/basicswap/basicswap.git synced 2025-11-07 11:18:10 +01:00
Code Issues Packages Projects Releases Wiki Activity

ui: Chart API update

Browse Source 
- Updated with a new default Chart API Key
- Implemented Chart error handling
This commit is contained in:
gerlofvanek
2023-12-22 13:26:29 +01:00
parent fb48797298
commit d6ed5ba24c
4 changed files with 77 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
basicswap/templates/offers.html
View File

@@ -59,27 +59,35 @@
{% include 'inc_messages.html' %}
{% if show_chart %}
<section>
<div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden">
<div class="pb-6 border-coolGray-100">
<div class="flex flex-wrap items-center justify-between -m-2">
<div class="w-full pt-2">
<div class="container mt-5 mx-auto">
<div class="pt-6 pb-8 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
<div class="px-6">
<div class="w-full mt-6 pb-6 overflow-x-auto">
<div class="chart-container" style="max-width: 100%;">
<canvas id="coin-chart" style="height: 280px;"></canvas>
</div>
<section class="relative">
<div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden">
<div class="pb-6 border-coolGray-100">
<div class="flex flex-wrap items-center justify-between -m-2">
<div class="w-full pt-2">
<div class="container mt-5 mx-auto relative">
<div class="pt-6 pb-8 bg-coolGray-100 dark:bg-gray-500 rounded-xl container-to-blur">
<div class="px-6">
<div class="w-full mt-6 pb-6 overflow-x-auto">
<div class="chart-container" style="max-width: 100%;">
<canvas id="coin-chart" style="height: 280px;"></canvas>
</div>
</div>
</div>
</div>
<div id="error-overlay" class="error-overlay hidden absolute inset-0 flex items-center justify-center">
<div id="error-content" class="error-content bg-coolGray-100 dark:bg-gray-500 rounded-md p-4 non-blurred">
<p class="text-red-600 font-semibold text-center">Error:</p>
<p class="text-sm text-gray-700 dark:text-gray-300 mt-5 text-center">To review or update your Chart API Key, navigate to <a href="/settings">Settings & Tools > Settings > General (TAB).</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="py-4 overflow-hidden">
<section class="py-4 overflow-hidden container-to-blur">
<div class="container px-4 mx-auto">
<div class="flex flex-wrap -m-3">
<div class="w-full sm:w-1/2 lg:w-1/5 p-3" id="btc-container">
@@ -302,11 +310,19 @@ window.addEventListener('load', function() {
const coins = ['BTC', 'PART', 'XMR', 'LTC', 'FIRO', 'DASH', 'PIVX', 'DOGE'];
coins.forEach(coin => {
fetch(`https://min-api.cryptocompare.com/data/pricemultifull?fsyms=${coin}&tsyms=USD,BTC&api_key=${api_key}`)
.then(response => response.json())
.then(response => {
if (!response.ok) {
throw new Error(`Error fetching data. Status: ${response.status}`);
}
return response.json();
})
.then(data => {
displayCoinData(coin, data);
})
.catch(error => console.error(`Error fetching ${coin} data:`, error));
.catch(error => {
console.error(`Fetching ${coin} data:`, error);
displayErrorMessage(`Unable to fetch data. Please verify your API key or try again later.`);
});
});
updateChart('BTC');
});
@@ -329,6 +345,33 @@ function displayCoinData(coin, data) {
priceChangeContainer.innerHTML = negativePriceChangeHTML(priceChange1h);
}
}
function displayErrorMessage(message) {
const errorContainer = document.getElementById('error-container');
if (errorContainer) {
errorContainer.innerHTML = `<div class="error-message">${message}</div>`;
} else {
document.body.innerHTML += `<div id="error-container" class="error-message">${message}</div>`;
}
}
function displayErrorMessage(message) {
const errorOverlay = document.getElementById('error-overlay');
const errorContent = document.getElementById('error-content');
const containersToBlur = document.querySelectorAll('.container-to-blur');
if (errorOverlay && errorContent) {
errorOverlay.classList.remove('hidden');
errorContent.querySelector('p').textContent = `Error: ${message}`;
containersToBlur.forEach(container => {
container.classList.add('blurred');
});
errorOverlay.classList.add('non-blurred');
}
}
function positivePriceChangeHTML(value) {
return `
<div class="flex flex-wrap items-center py-px px-1 border border-green-500 rounded-full">