let allTrades = [];
document.addEventListener("DOMContentLoaded", () => {
loadTradeSummary();
});
function loadTradeSummary() {
fetch("/api/trade_summary", { credentials: "include" })
.then(r => r.json())
.then(trades => {
allTrades = trades;
renderTradeSummary(allTrades);
updateBottomBar(allTrades);
})
.catch(err => console.error("Fehler beim Laden der Trade Summary", err));
}
function renderTradeSummary(trades) {
const container = document.getElementById("tradeSummaryContainer");
container.innerHTML = "";
let grouped = {};
trades.forEach(trade => {
if (!grouped[trade.symbol]) {
grouped[trade.symbol] = [];
}
grouped[trade.symbol].push(trade);
});
for (let symbol in grouped) {
let section = document.createElement("div");
section.className = "coin-section";
let heading = document.createElement("h2");
heading.textContent = symbol;
section.appendChild(heading);
let table = document.createElement("table");
let thead = document.createElement("thead");
thead.innerHTML = `
Symbol |
Amount |
Buy Price |
Invest |
Sell Price |
Profit |
% Profit |
Buy Date |
Sell Date |
`;
table.appendChild(thead);
let tbody = document.createElement("tbody");
grouped[symbol].sort((a, b) => new Date(b.sellDate) - new Date(a.sellDate));
let totalProfit = 0;
let totalBuyCost = 0;
let totalSellValue = 0;
let totalAmount = 0;
grouped[symbol].forEach(trade => {
let row = document.createElement("tr");
let profitClass = trade.profit >= 0 ? "positive" : "negative";
let invest = trade.buyPrice * trade.amount;
row.innerHTML = `
${trade.symbol} |
${trade.amount} |
${trade.buyPrice} |
${invest.toFixed(2)} |
${trade.sellPrice} |
${trade.profit.toFixed(2)} |
${trade.percentProfit.toFixed(2)}% |
${trade.buyDate} |
${trade.sellDate} |
`;
tbody.appendChild(row);
totalProfit += trade.profit;
totalAmount += trade.amount;
totalBuyCost += invest;
totalSellValue += trade.sellPrice * trade.amount;
});
let totalPctProfit = 0;
if (totalBuyCost > 0) {
totalPctProfit = ((totalSellValue - totalBuyCost) / totalBuyCost) * 100;
}
let summaryRow = document.createElement("tr");
summaryRow.className = "summary-row";
let summaryProfitClass = totalProfit >= 0 ? "positive" : "negative";
summaryRow.innerHTML = `
${symbol} (Total) |
${totalAmount} |
- |
${totalBuyCost.toFixed(2)} |
- |
${totalProfit.toFixed(2)} |
${totalPctProfit.toFixed(2)}% |
- |
- |
`;
tbody.appendChild(summaryRow);
table.appendChild(tbody);
section.appendChild(table);
container.appendChild(section);
}
}
function updateBottomBar(trades) {
let totalProfit = 0;
let totalBuyCost = 0;
let totalSellValue = 0;
trades.forEach(tr => {
totalProfit += tr.profit;
totalBuyCost += tr.buyPrice * tr.amount;
totalSellValue += tr.sellPrice * tr.amount;
});
let pctChange = 0;
if (totalBuyCost > 0) {
pctChange = ((totalSellValue - totalBuyCost) / totalBuyCost) * 100;
}
document.getElementById("totalTradeInvest").textContent = totalBuyCost.toFixed(2) + " USDT";
document.getElementById("totalTradeProfit").textContent = totalProfit.toFixed(2) + " USDT";
document.getElementById("totalTradePercentChange").textContent = pctChange.toFixed(2) + "%";
}
function openDateFilterModal() {
document.getElementById("dateFilterModal").style.display = "block";
}
function closeDateFilterModal() {
document.getElementById("dateFilterModal").style.display = "none";
}
function applyDateFilter() {
const radios = document.getElementsByName("dateFilterType");
let filterType = "all";
for (let r of radios) {
if (r.checked) {
filterType = r.value;
break;
}
}
if (filterType === "all") {
renderTradeSummary(allTrades);
updateBottomBar(allTrades);
closeDateFilterModal();
return;
}
const fromDateValue = document.getElementById("filterFromDate").value;
const toDateValue = document.getElementById("filterToDate").value;
let filtered = allTrades.filter(tr => {
let sd = new Date(tr.sellDate);
if (fromDateValue) {
let from = new Date(fromDateValue);
if (sd < from) return false;
}
if (toDateValue) {
let to = new Date(toDateValue);
to.setHours(23,59,59,999);
if (sd > to) return false;
}
return true;
});
renderTradeSummary(filtered);
updateBottomBar(filtered);
closeDateFilterModal();
}