Интерфейс пользователя: как я могу сделать его лучше? [закрыто] ⇐ Python

[Anonymous]

Код: Выделить всё

Price Tracker


.btn-group {
display: flex;
justify-content: center;
}




Price Tracker



const currentDividends = {};

function loadCurrentDividends() {
const savedDividends = localStorage.getItem('currentDividends');
if (savedDividends) {
Object.assign(currentDividends, JSON.parse(savedDividends));
}
}

function saveCurrentDividends() {
localStorage.setItem('currentDividends', JSON.stringify(currentDividends));
}

async function fetchData() {
const response = await fetch('/prices');
const data = await response.json();
for (const indexName in data) {
updateTable(data[indexName], `tracker-${indexName}-body`);
}
saveCurrentDividends(); // Save dividends to localStorage after rendering
}

function updateTable(data, tableBodyId) {
const tableBody = document.querySelector(`#${tableBodyId}`);
for (const future of data.index.futures) {
const key = `${data.index.name}-${future.name}`;
const currentDividend = currentDividends[key] !== undefined ? currentDividends[key] : future.current_dividend;
currentDividends[key] = currentDividend; // Ensure it is saved if not already present

const rowId = `row-${data.index.name}-${future.name}`;
let row = document.getElementById(rowId);

if (!row) {
row = document.createElement('tr');
row.id = rowId;
row.innerHTML = `
${future.name === data.index.futures[0].name ? data.index.name : ''}
${future.name}
${data.index.price.toFixed(2)}
${future.price.toFixed(2)}
${future.difference.toFixed(2)}
${future.initial_dividend.toFixed(2)}
${currentDividend.toFixed(2)}



${(future.price + currentDividend).toFixed(2)}
${data.index.interest_rate.toFixed(2)}
${(data.index.price + future.price + currentDividend + data.index.interest_rate).toFixed(2)}

Update
Clear

`;
tableBody.appendChild(row);
} else {
row.querySelector('.index-price').textContent = data.index.price.toFixed(2);
row.querySelector('.future-price').textContent = future.price.toFixed(2);
row.querySelector('.difference').textContent = future.difference.toFixed(2);
row.querySelector('.total').textContent = (future.price + currentDividend).toFixed(2);
row.querySelector('.interest-rate').textContent = data.index.interest_rate.toFixed(2);
row.querySelector('.calculated').textContent = (data.index.price + future.price + currentDividend + data.index.interest_rate).toFixed(2);
}
}
}

async function updateDividend(index, future) {
const newDividend = parseFloat(document.querySelector(`#dividend-${index}-${future}`).value);
currentDividends[`${index}-${future}`] = newDividend;
saveCurrentDividends();
const response = await fetch('/update_dividend', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ index, future, dividend: newDividend })
});
if (response.ok) {
document.querySelector(`#row-${index}-${future} .current-dividend`).textContent = newDividend.toFixed(2);
fetchData();  // Refresh data
}
}

async function resetDividend(index, future, initialDividend) {
delete currentDividends[`${index}-${future}`];
saveCurrentDividends();
const response = await fetch('/reset_dividend', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ index, future })
});
if (response.ok) {
document.querySelector(`#dividend-${index}-${future}`).value = initialDividend;
document.querySelector(`#row-${index}-${future} .current-dividend`).textContent = initialDividend;
fetchData();  // Refresh data
}
}

function createTables(indices) {
const container = document.querySelector('#trackers');
indices.forEach(indexName => {
const trackerDiv = document.createElement('div');
trackerDiv.id = `tracker-${indexName}`;
trackerDiv.innerHTML = `
Tracker ${indexName}



Index
Future
Index Price
Future Price
Difference
Initial Dividend
Current Dividend
Update Dividend
Total
Interest Rate
Calculated
Actions




`;
container.appendChild(trackerDiv);
});
}

// Load saved dividends from local storage
loadCurrentDividends();

// Fetch the list of indices from the server
fetch('/')
.then(response => response.json())
.then(data => {
createTables(data.indices);
// Fetch data every 2 seconds
setInterval(fetchData, 2000);
fetchData();   // Initial fetch
});

Оптимизация внешнего интерфейса, поэтому я хочу создать пользовательский интерфейс, который постоянно передает данные и отображает данные во внешнем интерфейсе, но проблема в том, что он отображает только df, а это значит, что мне нужно получить все данные сначала, а потом отправить на фронт. Могу ли я найти лучший способ: когда часть обновляется, все остальные поля, которые связаны с расчетом, соответственно изменяются.
Есть ли какой-нибудь способ помочь мне в этом?

Подробнее здесь: https://stackoverflow.com/questions/787 ... -it-better