generated from nathanwoodburn/python-webserver-template
feat: Update javascript to show USD with dollar symbol
All checks were successful
Build Docker / BuildImage (push) Successful in 32s
All checks were successful
Build Docker / BuildImage (push) Successful in 32s
This commit is contained in:
@@ -122,94 +122,93 @@
|
||||
}
|
||||
|
||||
function populateTable(data) {
|
||||
const tableContainer = document.getElementById('data-table');
|
||||
tableContainer.innerHTML = ''; // Clear previous table data
|
||||
const tableContainer = document.getElementById('data-table');
|
||||
tableContainer.innerHTML = ''; // Clear previous table data
|
||||
|
||||
// Create table elements
|
||||
const table = document.createElement('table');
|
||||
table.style.margin = 'auto';
|
||||
table.style.borderCollapse = 'collapse';
|
||||
table.style.maxWidth = '100%';
|
||||
// Create table elements
|
||||
const table = document.createElement('table');
|
||||
table.style.margin = 'auto';
|
||||
table.style.borderCollapse = 'collapse';
|
||||
table.style.maxWidth = '100%';
|
||||
|
||||
const thead = document.createElement('thead');
|
||||
const tbody = document.createElement('tbody');
|
||||
const thead = document.createElement('thead');
|
||||
const tbody = document.createElement('tbody');
|
||||
|
||||
// Create table header
|
||||
const headerRow = document.createElement('tr');
|
||||
['Name', 'Amount', 'USD Value'].forEach((headerText, index) => {
|
||||
const th = document.createElement('th');
|
||||
th.textContent = headerText;
|
||||
th.style.border = '1px solid #ccc';
|
||||
th.style.padding = '8px 20px';
|
||||
th.style.backgroundColor = '#333';
|
||||
th.style.color = 'white';
|
||||
// Create table header
|
||||
const headerRow = document.createElement('tr');
|
||||
['Name', 'Amount', 'USD Value'].forEach((headerText, index) => {
|
||||
const th = document.createElement('th');
|
||||
th.textContent = headerText;
|
||||
th.style.border = '1px solid #ccc';
|
||||
th.style.padding = '8px 20px';
|
||||
th.style.backgroundColor = '#333';
|
||||
th.style.color = 'white';
|
||||
|
||||
if (headerText === 'USD Value') {
|
||||
th.style.cursor = 'pointer'; // Make it clear this header is clickable
|
||||
th.addEventListener('click', () => sortTableByValue(tbody));
|
||||
if (headerText === 'USD Value') {
|
||||
th.style.cursor = 'pointer'; // Make it clear this header is clickable
|
||||
th.addEventListener('click', () => sortTableByValue(tbody));
|
||||
}
|
||||
|
||||
headerRow.appendChild(th);
|
||||
});
|
||||
thead.appendChild(headerRow);
|
||||
|
||||
// Create table rows
|
||||
for (const token in data) {
|
||||
if (token !== 'total') {
|
||||
const row = document.createElement('tr');
|
||||
|
||||
const nameCell = document.createElement('td');
|
||||
nameCell.textContent = data[token].name;
|
||||
nameCell.style.border = '1px solid #ccc';
|
||||
nameCell.style.padding = '8px 20px';
|
||||
|
||||
const amountCell = document.createElement('td');
|
||||
amountCell.textContent = `${data[token].amount} ${token}`;
|
||||
amountCell.style.border = '1px solid #ccc';
|
||||
amountCell.style.padding = '8px 20px';
|
||||
|
||||
const valueCell = document.createElement('td');
|
||||
valueCell.textContent = `$${data[token].value.toFixed(2)}`;
|
||||
valueCell.style.border = '1px solid #ccc';
|
||||
valueCell.style.padding = '8px 20px';
|
||||
|
||||
row.appendChild(nameCell);
|
||||
row.appendChild(amountCell);
|
||||
row.appendChild(valueCell);
|
||||
tbody.appendChild(row);
|
||||
}
|
||||
}
|
||||
|
||||
table.appendChild(thead);
|
||||
table.appendChild(tbody);
|
||||
tableContainer.appendChild(table);
|
||||
sortTableByValue(tbody);
|
||||
}
|
||||
|
||||
headerRow.appendChild(th);
|
||||
});
|
||||
thead.appendChild(headerRow);
|
||||
// Function to sort table rows by the "Value" column
|
||||
function sortTableByValue(tbody) {
|
||||
const rows = Array.from(tbody.querySelectorAll('tr'));
|
||||
const sortedRows = rows.sort((a, b) => {
|
||||
// Remove `$` and parse the value as float
|
||||
const valueA = parseFloat(a.children[2].textContent.replace('$', '')) || 0;
|
||||
const valueB = parseFloat(b.children[2].textContent.replace('$', '')) || 0;
|
||||
return valueA - valueB;
|
||||
});
|
||||
|
||||
// Create table rows
|
||||
for (const token in data) {
|
||||
if (token !== 'total') {
|
||||
const row = document.createElement('tr');
|
||||
// Reverse order if already sorted in ascending order
|
||||
const isDescending = tbody.getAttribute('data-sort-order') === 'desc';
|
||||
if (!isDescending) {
|
||||
sortedRows.reverse();
|
||||
tbody.setAttribute('data-sort-order', 'desc');
|
||||
} else {
|
||||
tbody.setAttribute('data-sort-order', 'asc');
|
||||
}
|
||||
|
||||
const nameCell = document.createElement('td');
|
||||
nameCell.textContent = data[token].name;
|
||||
nameCell.style.border = '1px solid #ccc';
|
||||
nameCell.style.padding = '8px 20px';
|
||||
|
||||
const amountCell = document.createElement('td');
|
||||
amountCell.textContent = `${data[token].amount} ${token}`;
|
||||
amountCell.style.border = '1px solid #ccc';
|
||||
amountCell.style.padding = '8px 20px';
|
||||
|
||||
const valueCell = document.createElement('td');
|
||||
valueCell.textContent = data[token].value;
|
||||
valueCell.style.border = '1px solid #ccc';
|
||||
valueCell.style.padding = '8px 20px';
|
||||
|
||||
row.appendChild(nameCell);
|
||||
row.appendChild(amountCell);
|
||||
row.appendChild(valueCell);
|
||||
tbody.appendChild(row);
|
||||
// Append sorted rows back to the tbody
|
||||
tbody.innerHTML = '';
|
||||
sortedRows.forEach(row => tbody.appendChild(row));
|
||||
}
|
||||
}
|
||||
|
||||
table.appendChild(thead);
|
||||
table.appendChild(tbody);
|
||||
tableContainer.appendChild(table);
|
||||
sortTableByValue(tbody);
|
||||
}
|
||||
|
||||
// Function to sort table rows by the "Value" column
|
||||
function sortTableByValue(tbody) {
|
||||
const rows = Array.from(tbody.querySelectorAll('tr'));
|
||||
const sortedRows = rows.sort((a, b) => {
|
||||
const valueA = parseFloat(a.children[2].textContent) || 0;
|
||||
const valueB = parseFloat(b.children[2].textContent) || 0;
|
||||
return valueA - valueB;
|
||||
});
|
||||
|
||||
// Reverse order if already sorted in ascending order
|
||||
const isDecending = tbody.getAttribute('data-sort-order') === 'desc';
|
||||
if (!isDecending) {
|
||||
sortedRows.reverse();
|
||||
tbody.setAttribute('data-sort-order', 'desc');
|
||||
} else {
|
||||
tbody.setAttribute('data-sort-order', 'asc');
|
||||
}
|
||||
|
||||
// Append sorted rows back to the tbody
|
||||
tbody.innerHTML = '';
|
||||
sortedRows.forEach(row => tbody.appendChild(row));
|
||||
}
|
||||
|
||||
|
||||
|
||||
async function toggleChart() {
|
||||
isPerTokenView = !isPerTokenView;
|
||||
@@ -224,7 +223,7 @@ function sortTableByValue(tbody) {
|
||||
chartDataTable.addColumn({ type: 'string', role: 'tooltip', 'p': { 'html': false } });
|
||||
chartDataTable.addRows(transformDataForChart(data));
|
||||
|
||||
resizeAndDraw(chart, chartDataTable, options);
|
||||
resizeAndDraw(chart, chartDataTable, options);
|
||||
updateText(!isPerTokenView);
|
||||
populateTable(data);
|
||||
}
|
||||
@@ -250,8 +249,7 @@ function sortTableByValue(tbody) {
|
||||
// Set button event listener
|
||||
document.getElementById('chart-header').addEventListener('click', toggleChart);
|
||||
};
|
||||
</script>
|
||||
</div><a class="btn btn-secondary" role="button" href="https://www.coingecko.com/en/portfolios/public/vault" target="_blank" style="margin: 10px;">View on Coingecko</a>
|
||||
</script></div><a class="btn btn-secondary" role="button" href="https://www.coingecko.com/en/portfolios/public/vault" target="_blank" style="margin: 10px;">View on Coingecko</a>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
@@ -366,7 +364,7 @@ function sortTableByValue(tbody) {
|
||||
<div class="col-lg-6 order-lg-1">
|
||||
<div class="p-5">
|
||||
<h2 class="display-4">3. Sell your tokens</h2>
|
||||
<p>When you want to cash out just sell your tokens back to us at the current token price.</p><a class="btn btn-primary" role="button" href="mailto:vault@woodburn.au">Sell Tokens</a>
|
||||
<p>When you want to cash out just sell your tokens back to me at the current token price.</p><a class="btn btn-primary" role="button" href="mailto:vault@woodburn.au" target="_blank">Contact to sell tokens</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user