ui: Updates + Cleanup + Added doge in charts + icons.

This commit is contained in:
gerlofvanek
2023-06-28 17:45:41 +02:00
parent 1859eccf0e
commit eb44dc9626
10 changed files with 103 additions and 68 deletions

View File

@@ -269,11 +269,37 @@
</p>
</div>
</div>
<div class="w-full sm:w-1/2 lg:w-1/5 p-3" id="doge-container">
<div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-lg dark:text-white">
<div class="flex items-center mb-2.5">
<img src="/static/images/coins/Doge-20.png" height="20" width="20" class="mr-2">
<p class="text-sm text-neutral-500 font-medium">Dogecoin (DOGE)</p>
</div>
<div class="flex flex-wrap items-center mb-2 -m-1">
<div class="w-auto p-1">
<h3 class="font-heading text-1xl font-semibold">
<div id="doge-price-usd"></div>
</h3>
</div>
<div class="w-auto p-1">
<div id="doge-price-change-container" class="w-auto p-1"></div>
</div>
<div class="w-auto p-1">
<h3 class="text-xs font-semibold">
<div id="doge-price-btc"></div>
</h3>
</div>
</div>
<p class="text-xs text-neutral-400 font-medium">
Volume 24H:<div class="text-xs" id="doge-volume-24h"></div>
</p>
</div>
</div>
</section>
<script>
window.addEventListener('load', function() {
const api_key = '{{chart_api_key}}';
const coins = ['BTC', 'PART', 'XMR', 'LTC', 'FIRO', 'DASH', 'PIVX'];
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())
@@ -323,7 +349,7 @@ function negativePriceChangeHTML(value) {
}
function setActiveContainer(containerId) {
const containerIds = ['btc-container', 'xmr-container', 'part-container', 'pivx-container', 'firo-container', 'dash-container', 'ltc-container'];
const containerIds = ['btc-container', 'xmr-container', 'part-container', 'pivx-container', 'firo-container', 'dash-container', 'ltc-container', 'doge-container'];
const activeClass = 'active-container';
containerIds.forEach(id => {
const container = document.getElementById(id);
@@ -364,6 +390,10 @@ document.getElementById('ltc-container').addEventListener('click', () => {
setActiveContainer('ltc-container');
updateChart('LTC');
});
document.getElementById('doge-container').addEventListener('click', () => {
setActiveContainer('doge-container');
updateChart('DOGE');
});
let coin;
const coinOptions = {