aboutsummaryrefslogtreecommitdiff
path: root/app/templates/dashboard.html
diff options
context:
space:
mode:
authorParker <contact@pkrm.dev>2024-11-07 01:44:42 -0600
committerParker <contact@pkrm.dev>2024-11-07 01:44:42 -0600
commit6fafa9f387e9d540c4a01d5a316c7bf72076d2fc (patch)
treead7a5cc6f7aa55a581293960b7de3231791be5b5 /app/templates/dashboard.html
parent4c1dd74db3f9ac37134db13c8e5a499a9f37594a (diff)
Work on dashboard functionality
Diffstat (limited to 'app/templates/dashboard.html')
-rw-r--r--app/templates/dashboard.html241
1 files changed, 198 insertions, 43 deletions
diff --git a/app/templates/dashboard.html b/app/templates/dashboard.html
index c2c9ebc..c65b62b 100644
--- a/app/templates/dashboard.html
+++ b/app/templates/dashboard.html
@@ -7,15 +7,44 @@
</head>
<body>
<div>
- <!-- Create a table with 5 columns with a total of 750px width -->
- <table style="width: 750px; margin: 0 auto;">
+ <!-- Create a table with 4 columns with a total of 1000px width -->
+ <table style="width: 1000px; margin: 0 auto;">
<tr>
- <th style="width: 150px;">ID</th>
- <th style="width: 150px;">Timestamp</th>
- <th style="width: 150px;">IP</th>
- <th style="width: 150px;">Location</th>
- <th style="width: 150px;">ISP</th>
+ <th style="width: 250px;">Link</th>
+ <th style="width: 250px;">Visits</th>
+ <th style="width: 250px;">Redirect</th>
+ <th style="width: 250px;">Expire Date</th>
</tr>
+
+ <!-- Create a table row for each link -->
+ <!-- <tr>
+ <td>(Link)</td>
+ <td>(Visits)</td>
+ <td>(Redirect)</td>
+ <td>(Expire Date)</td>
+ <td class="log-table-row"> -->
+ <!-- Create a sub table that will be opened when the link is clicked -->
+ <!-- <table style="width: 750px; margin: 0 auto;">
+ <tr>
+ <th style="width: 150px;">ID</th>
+ <th style="width: 150px;">Timestamp</th>
+ <th style="width: 150px;">IP</th>
+ <th style="width: 150px;">Location</th>
+ <th style="width: 150px;">ISP</th>
+ </tr> -->
+
+ <!-- Create a table row for each log -->
+ <!-- <tr>
+ <td>(ID)</td>
+ <td>(Timestamp)</td>
+ <td>(IP)</td>
+ <td>(Location)</td>
+ <td>(ISP)</td>
+ </tr>
+ </table>
+ </td>
+ </tr> -->
+ </table>
</div>
</body>
</html>
@@ -37,55 +66,181 @@
font-size: 25px;
color: #ccc;
}
+
+ table {
+ border-collapse: collapse;
+ background-color: #333;
+ color: #ccc;
+ }
+
+ th, td {
+ border: 1px solid #ccc;
+ padding: 10px;
+ }
+
+ th {
+ background-color: #444;
+ }
+
+ tr:nth-child(even) {
+ background-color: #444;
+ }
+
+ tr:nth-child(odd) {
+ background-color: #333;
+ }
+
+ .log-table-row {
+ display: none;
+ }
+
+ .log-table-row td {
+ padding: 0;
+ }
+
+ .log-table-row table {
+ width: 100%;
+ border-collapse: collapse;
+ }
+
+ .log-table-row th, .log-table-row td {
+ border: 1px solid #ccc;
+ padding: 10px;
+ }
+
+ .log-table-row th {
+ background-color: #444;
+ }
+
+ .log-table-row tr:nth-child(even) {
+ background-color: #444;
+ }
+
+ .log-table-row tr:nth-child(odd) {
+ background-color: #333;
+ }
+
+
</style>
<script>
+ async function fetchLinks() {
+ const response = await fetch('/api/links');
+ if (!response.ok) {
+ throw new Error('Failed to fetch links');
+ }
+ const links = await response.json();
+ return links;
+ }
- // Function to get a cookie by name
- function getCookie(name) {
- const value = `; ${document.cookie}`;
- const parts = value.split(`; ${name}=`);
- if (parts.length === 2) return parts.pop().split(';').shift();
- return null;
+ async function fetchLogs(link) {
+ const response = await fetch(`/api/links/${link}/logs`);
+ if (!response.ok) {
+ throw new Error('Failed to fetch logs');
+ }
+ const logs = await response.json();
+ return logs;
}
- // On window load
- window.onload = async () => {
- const data = await fetch('/api/links/3MY70/logs', {
- method: 'GET',
+ function createRow(index, link, logs) {
+ // Create the sub-table with the logs
+ let subTable = `
+ <table style="width: 750px; margin: 0 auto; id=${index}">
+ <tr>
+ <th style="width: 150px;">ID</th>
+ <th style="width: 150px;">Timestamp</th>
+ <th style="width: 150px;">IP</th>
+ <th style="width: 150px;">Location</th>
+ <th style="width: 150px;">ISP</th>
+ </tr>
+ `;
+ // Loop through the logs and create a row for each one
+ logs.forEach((log, index) => {
+ let row = `
+ <tr>
+ <td>${logs.length - index}</td>
+ <td>${log.timestamp}</td>
+ <td>${log.ip}</td>
+ <td>${log.location}</td>
+ <td>${log.isp}</td>
+ </tr>
+ `;
+ subTable += row;
});
+ subTable += '</table>';
- const logs = await data.json();
+ // Convert the link expire timestamp to a readable date
+ let date = new Date(link.expire_date);
+ let expireDate = date.toLocaleTimeString('en-US', {
+ month: 'short',
+ day: 'numeric',
+ year: 'numeric',
+ hour: '2-digit',
+ minute: '2-digit',
+ second: '2-digit',
+ hour12: false
+ });
- const table = document.querySelector('table');
+ // Create the HTML for the row with sub-table
+ let row = `
+ <tr>
+ <td>
+ <button class="link-button" id="${index}">${link.link}</button>
+ </td>
+ <td>${logs.length}</td>
+ <td>${link.redirect_link}</td>
+ <td>${expireDate}</td>
+ </tr>
+ <tr class="log-table-row" id="${index}-log">
+ <td colspan="4">
+ ${subTable}
+ </td>
+ </tr>
+ `;
+ return row;
+ }
- // For every log, add a row to the table
- counter = 1;
- logs.forEach(log => {
- const row = document.createElement('tr');
- let date = new Date(log.timestamp);
- let readableDate = date.toLocaleTimeString('en-US', {
- month: 'short',
- day: 'numeric',
- year: 'numeric',
- hour: '2-digit',
- minute: '2-digit',
- second: '2-digit',
- hour12: false
- }
- );
-
- row.innerHTML = `
- <td>${counter++}</td>
- <td>${readableDate}</td>
- <td>${log.ip}</td>
- <td>${log.location}</td>
- <td>${log.isp}</td>
- `;
- table.appendChild(row);
+ async function getData() {
+ let links = fetchLinks();
+ links = await links;
+
+ console.log(links);
+ // Links is an Array of objects with the link data
+ // Loop through the links and create a row for each one
+ links.forEach(async (link, index) => {
+ // Fetch the logs for the link
+ let logs = await fetchLogs(link.link);
+ logs = await logs;
+ // Create the entire row with sub-table and logs
+ let row = createRow(index, link, logs);
+ // Add the new table row to the main table
+ document.querySelector('table').innerHTML += row;
});
}
+
+ function hideLogTables() {
+ let tables = document.querySelectorAll('table tr table');
+ tables.forEach(table => {
+ table.style.display = 'none';
+ });
+ }
+
+ getData();
+ hideLogTables();
+
+ // Add event listener to each element with the class of link-button
+ document.addEventListener('click', (event) => {
+ if (event.target.classList.contains('link-button')) {
+ let id = event.target.id;
+ let table = document.getElementById(`${id}-log`);
+ if (table.style.display === 'none') {
+ table.style.display = 'table-row';
+ } else {
+ table.style.display = 'none';
+ }
+ }
+ });
</script> \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-07-18 13:03:30 +0000