[go: up one dir, main page]
Scribd
Upload
24 views3 pages

2

Uploaded by

Thế
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
24 views3 pages

2

Uploaded by

Thế
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

<!

DOCTYPE html>
<html lang="en">
<head>
{% include "head.html" %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
background: linear-gradient(to bottom, #f0f0f0, #e0e0e0);
margin: 0;
padding: 0;
}
.container-fluid {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 20px;
margin: 20px auto;
max-width: 1200px;
transition: box-shadow 0.3s ease;
}
.container-fluid:hover {
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
.img-thumbnail {
border: 2px solid #ddd;
border-radius: 10px;
max-width: 100%;
height: auto;
}
.data-container {
max-height: 500px;
overflow-y: auto;
border: 1px solid #ddd;
border-radius: 10px;
}
.data-header {
text-align: center;
margin-bottom: 20px;
font-size: 24px;
font-weight: bold;
}
.table {
border-collapse: collapse;
width: 100%;
}
.table, th, td {
border: 1px solid #ddd;
}
.table th, .table td {
padding: 10px;
text-align: left;
}
.table tbody tr:hover {
background-color: #f2f2f2;
transition: background-color 0.3s ease;
}
.loading-indicator {
text-align: center;
padding: 20px;
font-size: 18px;
display: none;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
{% include "navbar.html" %}

<div class="container-fluid">
<div class="row mt-4">
<div class="col-md-8">
<img src="{{ url_for('video_feed') }}" class="img-thumbnail"
alt="Video Feed">
</div>
<div class="col-md-4">
<h3 class="data-header">Data Management</h3>
<div class="loading-indicator">Loading...</div>
<div class="data-container">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Id</th>
<th><i class="fa fa-user"></i> Name</th>
<th><i class="fa fa-star"></i> Position</th>
<th><i class="fa fa-bell"></i> Time</th>
</tr>
</thead>
<tbody id="scandata">
<!-- Your data rows will be loaded here dynamically -->
</tbody>
</table>
</div>
</div>
</div>
</div>

<script type="text/javascript">
$(document).ready(function() {
let lastcnt = 0;
let cnt;
chkNewScan();

function chkNewScan() {
countTodayScan();
setTimeout(chkNewScan, 1000);
}

function countTodayScan() {
$.ajax({
url: '/countTodayScan',
type: 'GET',
dataType: 'json',
success: function(data) {
cnt = data.rowcount;
if (cnt > lastcnt) {
reloadTable();
}

lastcnt = cnt;
},
error: function(result){
console.log('no result!')
}
});
}

function reloadTable() {
$.ajax({
url: '/loadData',
type: 'GET',
dataType: 'json',
success: function(response){
var tbody = $("#scandata");
tbody.empty();

$.each(response, function(index, item) {


if (item.length > 0) {
for (let i = 0; i < item.length; i++) {
tbody.append('<tr>'+
'<td>'+item[i][1]+'</td>'+
'<td>'+item[i][2]+'</td>'+
'<td>'+item[i][3]+'</td>'+
'<td>'+item[i][4]+'</td>'+
'</tr>');
}
}
});
$('.loading-indicator').hide();
},
error: function(result){
console.log('no result!')
}
});
}
});
</script>
</body>
</html>

You might also like