mirror of
https://github.com/Gerald-Ha/HodlEye-Crypto-Price-Tracker.git
synced 2025-06-25 09:11:45 +00:00
Gerald Hasani
f03b405691
"Revamped Alarm Modal with grouped alarms per coin and cleaner layout",
"Improved alignment and responsiveness of alarm input fields",
"Compact alarm boxes with hover effects and subtle delete buttons",
"Alarm modal now retains focus and resets fields after adding an alarm",
"Enter key submits alarm from any input field",
"Prevents duplicate alarms for same coin/price",
"Alarm titles now displayed with center-aligned divider lines",
"Alarm logic improved: server-side checks even without browser",
"Recurring alarms now persist and trigger correctly",
"Alarms are sorted and grouped by symbol and price",
"Last price check is stored per alarm to avoid threshold skips",
"API improved: endpoints usable for external tools (e.g., Windows app)",
"Better error handling and logging for API actions",
"Windows App UI redesigned: modern English layout, centered elements",
"Tray icon with context menu (Open/Exit) and minimize/close behavior",
"All texts and notifications are now in English",
"Auto-reconnect and connection recovery implemented",
"Notification appears if disconnected for more than 2 minutes",
"Resolved issue where HodlEye_Notify could not receive alarms from the 'HodlEye-Crypto-Price-Tracker' Docker container when no browser session was active"
153 lines
4.7 KiB
HTML
153 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
<link rel="icon" type="image/png" href="images/favicon.png" />
|
|
<title>Portfolio: Trade Summary</title>
|
|
<link rel="stylesheet" href="css/portfolio.css" />
|
|
<script defer src="js/trade_summary.js"></script>
|
|
|
|
<style>
|
|
html, body {
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.page-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
}
|
|
.content {
|
|
flex: 1;
|
|
}
|
|
.note-button, .edit-button {
|
|
cursor: pointer;
|
|
margin-left: 5px;
|
|
font-size: 16px;
|
|
}
|
|
.note-button.has-note {
|
|
color: green;
|
|
}
|
|
.note-button.no-note {
|
|
color: red;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="page-container">
|
|
<div class="content">
|
|
<div class="button-grid-container">
|
|
<div class="grid-left">
|
|
<button class="price-btn" onclick="window.location.href='index.html'">Price Tracker</button>
|
|
</div>
|
|
<div class="grid-middle">
|
|
<button onclick="window.location.href='portfolio.html'">Live Portfolio</button>
|
|
<button onclick="window.location.href='portfolio.html'">Add Transaction</button>
|
|
<button>Trade Summary</button>
|
|
</div>
|
|
<div class="grid-right">
|
|
<button onclick="window.location.href='/logout'">Logout</button>
|
|
</div>
|
|
</div>
|
|
|
|
<h1>Trade Summary</h1>
|
|
|
|
<div id="tradeSummaryContainer" class="portfolio-container"></div>
|
|
</div>
|
|
<div class="bottom-bar">
|
|
<div class="bottom-bar-item">
|
|
Invest: <span id="totalTradeInvest">0 USDT</span>
|
|
</div>
|
|
<div class="bottom-bar-item">
|
|
Total Profit/Loss: <span id="totalTradeProfit">0 USDT</span>
|
|
</div>
|
|
<div class="bottom-bar-item">
|
|
% Change: <span id="totalTradePercentChange">0%</span>
|
|
</div>
|
|
<div class="bottom-bar-item">
|
|
<button onclick="openDateFilterModal()">Date</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="dateFilterModal" class="modal">
|
|
<div class="modal-content">
|
|
<span class="close" onclick="closeDateFilterModal()">×</span>
|
|
<h2>Filter time period</h2>
|
|
<div style="margin-top: 1rem;">
|
|
<label>
|
|
<input type="radio" name="dateFilterType" value="all" checked>
|
|
Show all
|
|
</label>
|
|
</div>
|
|
<div style="margin-top: 1rem;">
|
|
<label>
|
|
<input type="radio" name="dateFilterType" value="range">
|
|
From <input type="date" id="filterFromDate">
|
|
To <input type="date" id="filterToDate">
|
|
</label>
|
|
</div>
|
|
<div style="margin-top: 1rem;">
|
|
<button onclick="applyDateFilter()">Apply filter</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="editTradeModal" class="modal">
|
|
<div class="modal-content">
|
|
<span class="close" onclick="closeEditTradeModal()">×</span>
|
|
<h2>Edit Trade</h2>
|
|
<div class="form-row">
|
|
<label for="editTradeAmount">Amount:</label>
|
|
<input type="number" step="0.000001" id="editTradeAmount" />
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="editTradeBuyPrice">Buy Price (USDT):</label>
|
|
<input type="number" step="0.01" id="editTradeBuyPrice" />
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="editTradeSellPrice">Sell Price (USDT):</label>
|
|
<input type="number" step="0.01" id="editTradeSellPrice" />
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="editTradeBuyDate">Buy Date:</label>
|
|
<input type="date" id="editTradeBuyDate" />
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="editTradeSellDate">Sell Date:</label>
|
|
<input type="date" id="editTradeSellDate" />
|
|
</div>
|
|
<div class="edit-buttons">
|
|
<button onclick="saveEditedTrade()">Save</button>
|
|
<button onclick="deleteTrade()">Delete</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="noteModal" class="modal">
|
|
<div class="modal-content">
|
|
<span class="close" onclick="closeNoteModal()">×</span>
|
|
<h2>Note</h2>
|
|
<div class="note-input-row">
|
|
<textarea id="noteText" rows="4" cols="50"></textarea>
|
|
<button onclick="saveNote()">Save</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="deleteTradeConfirmationModal" class="modal">
|
|
<div class="modal-content">
|
|
<span class="close" onclick="closeDeleteTradeConfirmationModal()">×</span>
|
|
<h2>Delete Trade</h2>
|
|
<p>Are you sure you want to delete this trade?</p>
|
|
<div class="edit-buttons">
|
|
<button onclick="confirmDeleteTrade()">Delete</button>
|
|
<button onclick="closeDeleteTradeConfirmationModal()">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|