first commit

2025-07-16 07:13:43 +08:00
commit aa90d3a455
18 changed files with 1410 additions and 0 deletions
--- a/templates/index.html
+++ b/templates/index.html
@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Traffic Monitor</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 30px;
+            background-color: #f4f4f4;
+        }
+
+        h1 {
+            color: #333;
+        }
+
+        #stats {
+            margin-bottom: 20px;
+        }
+
+        .stat {
+            font-size: 18px;
+            margin-bottom: 10px;
+        }
+
+        table {
+            border-collapse: collapse;
+            width: 100%;
+            background-color: white;
+        }
+
+        th, td {
+            border: 1px solid #ccc;
+            padding: 8px 12px;
+            text-align: center;
+        }
+
+        th {
+            background-color: #eee;
+        }
+
+        tr:nth-child(even) {
+            background-color: #f9f9f9;
+        }
+
+        .loading {
+            color: #888;
+        }
+    </style>
+</head>
+<body>
+    <h1>🚦 Traffic Logger Dashboard</h1>
+
+    <div id="stats">
+        <div class="stat">🔢 Total Vehicle Log Entries: <span id="total-entries" class="loading">Loading...</span></div>
+        <div class="stat">🚗 Vehicles Currently Between Lines: <span id="vehicle-zone" class="loading">Loading...</span></div>
+    </div>
+
+    <h2>📋 Last 10 Vehicle Entries</h2>
+    <table>
+        <thead>
+            <tr>
+                <th>ID</th>
+                <th>Vehicle ID</th>
+                <th>Direction</th>
+                <th>Timestamp</th>
+                <th>Speed (km/h)</th>
+            </tr>
+        </thead>
+        <tbody id="log-table-body">
+            <tr><td colspan="5" class="loading">Loading data...</td></tr>
+        </tbody>
+    </table>
+
+    <script>
+        async function loadData() {
+            try {
+                const response = await fetch('/get_video');
+                const data = await response.json();
+
+                // Update stats
+                document.getElementById('total-entries').textContent = data.total_entries;
+                document.getElementById('vehicle-zone').textContent = data.vehicles_in_zone;
+
+                // Populate table
+                const tbody = document.getElementById('log-table-body');
+                tbody.innerHTML = '';
+
+                data.last_10_entries.forEach(entry => {
+                    const row = document.createElement('tr');
+                    row.innerHTML = `
+                        <td>${entry.id}</td>
+                        <td>${entry.vehicle_id}</td>
+                        <td>${entry.direction}</td>
+                        <td>${entry.timestamp}</td>
+                        <td>${entry.speed.toFixed(1)}</td>
+                    `;
+                    tbody.appendChild(row);
+                });
+
+            } catch (err) {
+                console.error('Error loading data:', err);
+                document.getElementById('log-table-body').innerHTML = `<tr><td colspan="5">Error loading data</td></tr>`;
+            }
+        }
+
+        // Initial load
+        loadData();
+
+        // Refresh every 10 seconds
+        setInterval(loadData, 5000);
+    </script>
+</body>
+</html>