diff options
Diffstat (limited to 'app/templates/dashboard.html')
| -rw-r--r-- | app/templates/dashboard.html | 238 |
1 files changed, 0 insertions, 238 deletions
diff --git a/app/templates/dashboard.html b/app/templates/dashboard.html deleted file mode 100644 index fa7458a..0000000 --- a/app/templates/dashboard.html +++ /dev/null @@ -1,238 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <title>LinkLogger | Dashboard</title> - - <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet"> - <script src="/static/js/jwt.js"></script> -</head> -<body> - <div> - <!-- Create a table with 4 columns with a total of 1000px width --> - <table> - <tr style="border: 2px solid #ccc;"> - <th>Link</th> - <th>Visits</th> - <th>Redirect</th> - <th>Expire Date</th> - </tr> - </table> - </div> -</body> -</html> - -<style> - body { - margin: 0; - padding: 0; - font-family: Arial, sans-serif; - background-color: #2c3338; - } - - div { - display: flex; - justify-content: center; - margin-top: 100px; - } - - - table { - margin: 20px 0 20px 0; - text-align: center; - font-size: 25px; - width: 1000px; - color: #ccc; - border-collapse: collapse; - overflow: hidden; - } - - /* Center all sub tables */ - .log-table-row table { - margin: 0 auto; - } - - .log-table-row table { - width: 90%; - } - - table th { - background-color: #415eac; - border: 2px solid #ccc; - padding: 10px; - } - - .link-table-row { - border: 2px solid #ccc; - } - - table td { - padding: 10px; - } - - .link-table-row td { - padding: 20px; - } - - .log-table-row table td { - background-color: #3b4148; - padding: 10px; - } - - .log-table-row table tr { - border: 2px solid #ccc; - } - - .link-button { - background-color: #3b4148; - color: #ccc; - border: none; - padding: 10px; - cursor: pointer; - font-size: 25px; - border-radius: 5px; - } - - .fa-trash:hover { - color: rgb(238, 86, 86); - cursor: pointer; - } - -</style> - -<script> - function createRow(index, link, logs) { - // Create the sub-table with the logs - let subTable = ` - <table> - <tr> - <th>ID</th> - <th>Timestamp</th> - <th>IP</th> - <th>Location</th> - <th colspan="2">ISP</th> - </tr> - `; - // Loop through the logs and create a row for each one - logs.forEach((log, index) => { - let logTimestamp = new Date(log.timestamp).toLocaleString('en-US', { - year: 'numeric', - month: '2-digit', - day: '2-digit', - hour: '2-digit', - minute: '2-digit', - second: '2-digit', - hour12: false - }).replace(',', ''); - - let row = ` - <tr id="${log.id}-log"> - <td>${logs.length - index}</td> - <td>${logTimestamp}</td> - <td>${log.ip}</td> - <td>${log.location}</td> - <td>${log.isp}</td> - <td><i class="fa-solid fa-trash" id="${log.id}/${link.link}""></i></td> - </tr> - `; - subTable += row; - }); - subTable += '</table>'; - - // 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 - }); - - // Create the HTML for the row with sub-table - let row = ` - <tr class="link-table-row"> - <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}-logTR" style="display: none;"> - <td colspan="6"> - ${subTable} - </td> - </tr> - `; - return row; - } - - - - async function getData() { - const links = await accessAPI(`/links`, 'GET') - if (!links) { - throw new Error('Failed to fetch links'); - } - // Links is an Array of objects with the link data - // Loop through the links and create a row for each one - // Do not use async because then the order or data in the - // table will change from time to time - for (let i = 0; i < links.length; i++) { - let link = links[i]; - let logs = await accessAPI(`/links/${link.link}/logs`, 'GET') - if (!logs) { - throw new Error('Failed to fetch logs'); - } - let row = createRow(i, link, logs); - document.querySelector('table').innerHTML += row; - } - } - - // hideLogRows to all log-table-rows - function hideLogRows() { - let logTRs = document.querySelectorAll('.log-table-row'); - logTRs.forEach(row => { - row.style.display = 'none'; - }); - } - - // Add event listener to all link buttons - document.addEventListener('click', (event) => { - if (event.target.classList.contains('link-button')) { - let id = event.target.id; - let logTR = document.getElementById(`${id}-logTR`); - if (logTR.style.display === 'none') { - // Hide any open log tables - hideLogRows(); - logTR.style.display = 'table-row'; - } else { - logTR.style.display = 'none'; - } - } - }); - - // Add an event listen to all trash bins - document.addEventListener('click', (event) => { - if (event.target.classList.contains('fa-trash')) { - // Confirm the user wants to delete the log - let confirmDelete = confirm('Are you sure you want to delete this log?'); - if (confirmDelete) { - let id = event.target.id; - let link = id.split('/')[1]; - let logId = id.split('/')[0]; - fetch(`/api/links/${link}/logs/${logId}`, { - method: 'DELETE' - }); - let logRow = document.getElementById(`${logId}-log`) - logRow.remove(); - } - } - }); - - getData(); -</script>
\ No newline at end of file |