-
Notifications
You must be signed in to change notification settings - Fork 0
/
view_mutual_fund.html
116 lines (97 loc) · 3.73 KB
/
view_mutual_fund.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Investor Dashboard</title>
<link rel="stylesheet" href="portfolio_dashboard.css">
</head>
<body>
<div class="container">
<div id="sidebar_manager-container"></div>
<div class="main">
<div class="topbar">
<div class="toggle">
<ion-icon name="menu-outline"></ion-icon>
</div>
<div class="search">
<label>
<input type="text" placeholder="Search here">
<ion-icon name="search-outline"></ion-icon>
</label>
</div>
<!-- Your main content goes here -->
</div>
<div class="details">
<div class="recentOrders">
<div class="cardHeader">
<h2>View Mutual Funds</h2>
<!-- <a href="#" class="btn">View All</a> -->
</div>
<table>
<thead>
<th> Fund ID</th>
<th> Fund Name</th>
<th> Inception Date</th>
<th> AUM</th>
<th> Current NAV</th>
<th> Expense Ratio</th>
<th> Exit Load</th>
<!-- <th> Manager ID</th> -->
</table>
</div>
</div>
</div>
</div>
<script>
let hoverableLinks = document.querySelectorAll(".hoverable");
function highlightLink() {
hoverableLinks.forEach((link) => {
link.classList.remove("hovered");
});
this.classList.add("hovered");
}
hoverableLinks.forEach((link) => {
link.addEventListener("mouseover", highlightLink);
});
// fetchData.js
function formatTimestamp(timestamp) {
const date = new Date(timestamp);
const day = String(date.getDate()).padStart(2, '0');
const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are 0-based
const year = date.getFullYear();
return `${day}-${month}-${year}`;
}
document.addEventListener("DOMContentLoaded", () => {
const table = document.querySelector("table");
// Replace 'API_URL' with the actual URL of your API endpoint
const apiUrl = "http://localhost:8188/mutualfunds/";
fetch(apiUrl)
.then((response) => response.json())
.then((data) => {
data.forEach((fund) => {
const date = formatTimestamp(fund.inceptionDate);
const row = document.createElement("tr");
row.innerHTML = `
<td>${fund.fundId}</td>
<td>${fund.fundName}</td>
<td>${date}</td>
<td>${fund.assetsUnderManagement}</td>
<td>${fund.currentNAV}</td>
<td>${fund.expenseRatio}</td>
<td>${fund.exitLoad}</td>
`;
table.appendChild(row);
});
})
.catch((error) => {
console.error("Error fetching data:", error);
});
});
</script>
<script src="view_allMF.js"></script>
<script src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
<script src="load_components.js"></script>
</body>
</html>