kicap/traffic-monitoring-new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change timestamp

Browse Source
This commit is contained in:
kicap
2025-07-16 20:19:27 +08:00
parent 40a4cbaafc
commit c2691fa35e
1 changed files with 28 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
templates/index.html
View File

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Traffic Monitor</title> <title>Traffic Monitor</title>
@ -29,7 +30,8 @@
background-color: white; background-color: white;
} }
th, td { th,
td {
border: 1px solid #ccc; border: 1px solid #ccc;
padding: 8px 12px; padding: 8px 12px;
text-align: center; text-align: center;
@ -48,12 +50,14 @@
} }
</style> </style>
</head> </head>
<body> <body>
<h1>Monitoring Trafik</h1> <h1>Monitoring Trafik</h1>
<div id="stats"> <div id="stats">
<div class="stat">🔢 Total Entri Log Kendaraan: <span id="total-entries" class="loading">Loading...</span></div> <div class="stat">🔢 Total Entri Log Kendaraan: <span id="total-entries" class="loading">Loading...</span></div>
<div class="stat">🚗 Kendaraan yang Saat Ini Berada di Antara Jalur: <span id="vehicle-zone" class="loading">Loading...</span></div> <div class="stat">🚗 Kendaraan yang Saat Ini Berada di Antara Jalur: <span id="vehicle-zone"
class="loading">Loading...</span></div>
</div> </div>
<h2>📋 10 Entri Kendaraan Terakhir</h2> <h2>📋 10 Entri Kendaraan Terakhir</h2>
@ -68,11 +72,29 @@
</tr> </tr>
</thead> </thead>
<tbody id="log-table-body"> <tbody id="log-table-body">
<tr><td colspan="5" class="loading">Loading data...</td></tr> <tr>
<td colspan="5" class="loading">Loading data...</td>
</tr>
</tbody> </tbody>
</table> </table>
<script> <script>
const utcString = "Wed, 16 Jul 2025 20:17:45 GMT";
const date = new Date(utcString);
// Format to Asia/Makassar timezone
const formatter = new Intl.DateTimeFormat('en-US', {
timeZone: 'Asia/Makassar',
year: 'numeric',
month: 'short',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
weekday: 'short',
hour12: false,
});
async function loadData() { async function loadData() {
try { try {
const response = await fetch('/get_video'); const response = await fetch('/get_video');
@ -92,7 +114,7 @@
<td>${entry.id}</td> <td>${entry.id}</td>
<td>${entry.vehicle_id}</td> <td>${entry.vehicle_id}</td>
<td>${entry.direction}</td> <td>${entry.direction}</td>
<td>${entry.timestamp}</td> <td>${formatter.format(entry.timestamp)}</td>
<td>${entry.speed.toFixed(1)}</td> <td>${entry.speed.toFixed(1)}</td>
`; `;
tbody.appendChild(row); tbody.appendChild(row);
@ -111,4 +133,5 @@
setInterval(loadData, 5000); setInterval(loadData, 5000);
</script> </script>
</body> </body>
</html> </html>