parker/linklogger
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dashboard functionality increase

Browse Source
This commit is contained in:
Parker M. 2024-11-07 22:44:31 -06:00
parent 62c034261d
commit a9fa55346c
Signed by: parker
GPG Key ID: 505ED36FC12B5D5E
2 changed files with 101 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
app/routes/links_routes.py
View File

@ -61,7 +61,7 @@ async def create_link(
return {"link": link_path, "expire_date": new_link.expire_date} return {"link": link_path, "expire_date": new_link.expire_date}
@router.delete("/{link}", summary="Delete a link") @router.delete("/{link}", summary="Delete a link and all associated logs")
async def delete_link( async def delete_link(
link: Annotated[str, Path(title="Link to delete")], link: Annotated[str, Path(title="Link to delete")],
current_user: Annotated[User, Depends(get_current_user)], current_user: Annotated[User, Depends(get_current_user)],
@ -126,9 +126,13 @@ async def get_link_logs(
return logs return logs
@router.delete("/{link}/logs", summary="Delete logs associated with a link") @router.delete(
async def delete_link_logs( "/{link}/logs/{log_id}",
link: Annotated[str, Path(title="Link to delete logs for")], summary="Delete a specific log associated with a link",
)
async def delete_single_log(
link: Annotated[str, Path(title="Link associated with the log to delete")],
log_id: Annotated[int, Path(title="Log ID to delete")],
current_user: Annotated[User, Depends(get_current_user)], current_user: Annotated[User, Depends(get_current_user)],
db=Depends(get_db), db=Depends(get_db),
): ):
@ -148,9 +152,12 @@ async def delete_link_logs(
detail="Link not associated with your account", detail="Link not associated with your account",
) )
# Get all of the logs # Get the log and delete it
logs = db.query(Log).filter(Log.link == link.link).all() log = db.query(Log).filter(Log.id == log_id).first()
for log in logs: if not log:
raise HTTPException(
status_code=status.HTTP_404_NOT_FOUND, detail="Log not found"
)
db.delete(log) db.delete(log)
db.commit() db.commit()

187
app/templates/dashboard.html
View File

@ -4,46 +4,19 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LinkLogger | Dashboard</title> <title>LinkLogger | Dashboard</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
</head> </head>
<body> <body>
<div> <div>
<!-- Create a table with 4 columns with a total of 1000px width --> <!-- Create a table with 4 columns with a total of 1000px width -->
<table style="width: 1000px; margin: 0 auto;"> <table>
<tr> <tr>
<th style="width: 250px;">Link</th> <th>Link</th>
<th style="width: 250px;">Visits</th> <th>Visits</th>
<th style="width: 250px;">Redirect</th> <th>Redirect</th>
<th style="width: 250px;">Expire Date</th> <th>Expire Date</th>
</tr> </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> </table>
</div> </div>
</body> </body>
@ -58,68 +31,62 @@
} }
div { div {
position: absolute; display: flex;
top: 50%; justify-content: center;
left: 50%; margin-top: 100px;
transform: translate(-50%, -50%);
text-align: center;
font-size: 25px;
color: #ccc;
} }
table { table {
border-collapse: collapse; margin: 20px 0 20px 0;
background-color: #333; text-align: center;
font-size: 25px;
width: 1250px;
color: #ccc; 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; border-collapse: collapse;
overflow: hidden;
} }
.log-table-row th, .log-table-row td { table th {
border: 1px solid #ccc; background-color: #415eac;
padding: 10px;
border: 2px solid #ccc;
}
.link-table-row {
border: 2px solid #ccc;
}
table td {
padding: 10px; padding: 10px;
} }
.log-table-row th { .link-table-row td {
background-color: #444; padding: 20px;
} }
.log-table-row tr:nth-child(even) { .log-table-row table td {
background-color: #444; background-color: #3b4148;
padding: 10px;
} }
.log-table-row tr:nth-child(odd) { .log-table-row table tr {
background-color: #333; 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> </style>
@ -146,24 +113,25 @@
function createRow(index, link, logs) { function createRow(index, link, logs) {
// Create the sub-table with the logs // Create the sub-table with the logs
let subTable = ` let subTable = `
<table style="width: 750px; margin: 0 auto; id=${index}"> <table>
<tr> <tr>
<th style="width: 150px;">ID</th> <th>ID</th>
<th style="width: 150px;">Timestamp</th> <th>Timestamp</th>
<th style="width: 150px;">IP</th> <th>IP</th>
<th style="width: 150px;">Location</th> <th>Location</th>
<th style="width: 150px;">ISP</th> <th colspan="2">ISP</th>
</tr> </tr>
`; `;
// Loop through the logs and create a row for each one // Loop through the logs and create a row for each one
logs.forEach((log, index) => { logs.forEach((log, index) => {
let row = ` let row = `
<tr> <tr id="${log.id}-log">
<td>${logs.length - index}</td> <td>${logs.length - index}</td>
<td>${log.timestamp}</td> <td>${log.timestamp}</td>
<td>${log.ip}</td> <td>${log.ip}</td>
<td>${log.location}</td> <td>${log.location}</td>
<td>${log.isp}</td> <td>${log.isp}</td>
<td><i class="fa-solid fa-trash" id="${log.id}/${link.link}""></i></td>
</tr> </tr>
`; `;
subTable += row; subTable += row;
@ -184,7 +152,7 @@
// Create the HTML for the row with sub-table // Create the HTML for the row with sub-table
let row = ` let row = `
<tr> <tr class="link-table-row">
<td> <td>
<button class="link-button" id="${index}">${link.link}</button> <button class="link-button" id="${index}">${link.link}</button>
</td> </td>
@ -192,8 +160,8 @@
<td>${link.redirect_link}</td> <td>${link.redirect_link}</td>
<td>${expireDate}</td> <td>${expireDate}</td>
</tr> </tr>
<tr class="log-table-row" id="${index}-log"> <tr class="log-table-row" id="${index}-logTR" style="display: none;">
<td colspan="4"> <td colspan="6">
${subTable} ${subTable}
</td> </td>
</tr> </tr>
@ -221,26 +189,41 @@
}); });
} }
function hideLogTables() { // hideLogRows to all log-table-rows
let tables = document.querySelectorAll('table tr table'); function hideLogRows() {
tables.forEach(table => { let logTRs = document.querySelectorAll('.log-table-row');
table.style.display = 'none'; logTRs.forEach(row => {
row.style.display = 'none';
}); });
} }
getData(); // Add event listener to all link buttons
hideLogTables();
// Add event listener to each element with the class of link-button
document.addEventListener('click', (event) => { document.addEventListener('click', (event) => {
if (event.target.classList.contains('link-button')) { if (event.target.classList.contains('link-button')) {
let id = event.target.id; let id = event.target.id;
let table = document.getElementById(`${id}-log`); let logTR = document.getElementById(`${id}-logTR`);
if (table.style.display === 'none') { if (logTR.style.display === 'none') {
table.style.display = 'table-row'; hideLogRows();
logTR.style.display = 'table-row';
} else { } else {
table.style.display = 'none'; logTR.style.display = 'none';
} }
} }
}); });
// Add an event listen to all trash bins
document.addEventListener('click', (event) => {
if (event.target.classList.contains('fa-trash')) {
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> </script>