animate connection table
This commit is contained in:
parent
1a254bdd10
commit
fd83b89e6d
@ -1,12 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Recent Connections</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link
|
||||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<style>
|
||||
html, body {
|
||||
/* Basic layout */
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@ -20,6 +25,39 @@
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
/* Animate the table body moving down via transform */
|
||||
#connectionsTableBody {
|
||||
transition: transform 0.5s ease-out;
|
||||
transform: translateY(0);
|
||||
}
|
||||
/* Advanced animation for new rows */
|
||||
@keyframes slideIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
.slide-in {
|
||||
animation: slideIn 0.5s ease-out;
|
||||
}
|
||||
/* Animation for disappearing rows */
|
||||
@keyframes slideOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(0.1);
|
||||
}
|
||||
}
|
||||
.slide-out {
|
||||
animation: slideOut 0.5s ease-in forwards;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@ -29,10 +67,18 @@
|
||||
<a class="navbar-brand" href="#">Downloads der letzten 10 Minuten</a>
|
||||
<div class="navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item"><a href="{{ url_for('index') }}" class="nav-link">App</a></li>
|
||||
<li class="nav-item"><a href="{{ url_for('mylinks') }}" class="nav-link">Meine Links</a></li>
|
||||
<li class="nav-item"><a href="{{ url_for('connections') }}" class="nav-link">Verbindungen</a></li>
|
||||
<li class="nav-item"><a href="{{ url_for('dashboard') }}" class="nav-link">Auswertung</a></li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ url_for('index') }}" class="nav-link">App</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ url_for('mylinks') }}" class="nav-link">Meine Links</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ url_for('connections') }}" class="nav-link">Verbindungen</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ url_for('dashboard') }}" class="nav-link">Auswertung</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@ -47,13 +93,13 @@
|
||||
<th>Location</th>
|
||||
<th>User Agent</th>
|
||||
<th>File Path</th>
|
||||
<td>File Size</td>
|
||||
<td>MIME-Typ</td>
|
||||
<td>Cached</td>
|
||||
<th>File Size</th>
|
||||
<th>MIME-Typ</th>
|
||||
<th>Cached</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="connectionsTableBody">
|
||||
<!-- Rows will be dynamically inserted here -->
|
||||
<!-- Rows are dynamically inserted here -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@ -64,17 +110,21 @@
|
||||
<script>
|
||||
const socket = io();
|
||||
|
||||
// Request initial data immediately on connection
|
||||
socket.on('connect', () => {
|
||||
socket.emit('request_initial_data');
|
||||
// Request initial data once connected.
|
||||
socket.on("connect", () => {
|
||||
socket.emit("request_initial_data");
|
||||
});
|
||||
|
||||
socket.on('recent_connections', function(data) {
|
||||
const tbody = document.getElementById('connectionsTableBody');
|
||||
tbody.innerHTML = ''; // Clear previous content
|
||||
|
||||
data.forEach(record => {
|
||||
const row = document.createElement('tr');
|
||||
// Helper: Create a table row.
|
||||
// When applyAnimation is true, the row uses the slide-in animation.
|
||||
function createRow(record, applyAnimation = true) {
|
||||
const row = document.createElement("tr");
|
||||
row.setAttribute("data-timestamp", record.timestamp);
|
||||
if (applyAnimation) {
|
||||
row.classList.add("slide-in");
|
||||
row.addEventListener("animationend", () =>
|
||||
row.classList.remove("slide-in"), { once: true });
|
||||
}
|
||||
row.innerHTML = `
|
||||
<td>${record.timestamp}</td>
|
||||
<td>${record.location}</td>
|
||||
@ -84,8 +134,82 @@
|
||||
<td>${record.mime_typ}</td>
|
||||
<td>${record.cached}</td>
|
||||
`;
|
||||
tbody.appendChild(row);
|
||||
return row;
|
||||
}
|
||||
|
||||
// Update the table body with the new data.
|
||||
// New rows animate in; existing rows simply update.
|
||||
function updateTable(data) {
|
||||
const tbody = document.getElementById("connectionsTableBody");
|
||||
// Map current rows by their timestamp.
|
||||
const currentRows = {};
|
||||
Array.from(tbody.children).forEach(row => {
|
||||
currentRows[row.getAttribute("data-timestamp")] = row;
|
||||
});
|
||||
const fragment = document.createDocumentFragment();
|
||||
data.forEach(record => {
|
||||
let row;
|
||||
if (currentRows[record.timestamp]) {
|
||||
// Existing row: update content without new animation.
|
||||
row = currentRows[record.timestamp];
|
||||
row.innerHTML = `
|
||||
<td>${record.timestamp}</td>
|
||||
<td>${record.location}</td>
|
||||
<td>${record.user_agent}</td>
|
||||
<td>${record.full_path}</td>
|
||||
<td>${record.filesize}</td>
|
||||
<td>${record.mime_typ}</td>
|
||||
<td>${record.cached}</td>
|
||||
`;
|
||||
row.classList.remove("slide-out");
|
||||
} else {
|
||||
// New row: create with slide-in animation.
|
||||
row = createRow(record, true);
|
||||
}
|
||||
fragment.appendChild(row);
|
||||
});
|
||||
tbody.innerHTML = "";
|
||||
tbody.appendChild(fragment);
|
||||
}
|
||||
|
||||
// Animate the table body moving down by the height of a new row before updating.
|
||||
function animateTableWithNewRow(data) {
|
||||
const tbody = document.getElementById("connectionsTableBody");
|
||||
// Identify any new records (by comparing timestamps).
|
||||
const currentTimestamps = new Set(
|
||||
Array.from(tbody.children).map(row => row.getAttribute("data-timestamp"))
|
||||
);
|
||||
const newRecords = data.filter(record => !currentTimestamps.has(record.timestamp));
|
||||
|
||||
if (newRecords.length > 0) {
|
||||
// Create a temporary row to measure its height.
|
||||
const tempRow = createRow(newRecords[0], false);
|
||||
tempRow.style.visibility = "hidden";
|
||||
tbody.appendChild(tempRow);
|
||||
const newRowHeight = tempRow.getBoundingClientRect().height;
|
||||
tempRow.remove();
|
||||
|
||||
// Animate the tbody moving down by the measured height.
|
||||
tbody.style.transform = `translateY(${newRowHeight}px)`;
|
||||
|
||||
// After the transition, update the table and reset the transform.
|
||||
setTimeout(() => {
|
||||
updateTable(data);
|
||||
// Remove the transform instantly.
|
||||
tbody.style.transition = "none";
|
||||
tbody.style.transform = "translateY(0)";
|
||||
// Force reflow to apply the style immediately.
|
||||
void tbody.offsetWidth;
|
||||
tbody.style.transition = "transform 0.5s ease-out";
|
||||
}, 500);
|
||||
} else {
|
||||
updateTable(data);
|
||||
}
|
||||
}
|
||||
|
||||
// Listen for incoming connection data from the server.
|
||||
socket.on("recent_connections", function(data) {
|
||||
animateTableWithNewRow(data);
|
||||
});
|
||||
</script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user