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

edit back the timestamp and add kepadatan

Browse Source
This commit is contained in:
kicap
2025-07-17 03:37:06 +08:00
parent ec6f214d96
commit 94b62b36ba
4 changed files with 32 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
templates/index.html
View File

@ -58,6 +58,7 @@
<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">🚗 kepadatan trafik saat ini: <span id="kepadatan" class="loading">Loading...</span></div>
</div>
<h2>📋 10 Entri Kendaraan Terakhir</h2>
@ -80,27 +81,23 @@
<script>
function formatToMakassar(utcStr) {
const options = {
timeZone: 'Asia/Makassar',
year: 'numeric',
month: 'short',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
weekday: 'short',
hour12: false,
};
function ubahTanggalKeBahasaIndonesia(tanggalString) {
const hariIndonesia = [
"Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu"
];
const date = new Date(utcStr);
const formatter = new Intl.DateTimeFormat('en-US', options);
const parts = formatter.formatToParts(date);
const date = new Date(tanggalString);
if (isNaN(date.getTime())) return "Format tanggal tidak valid";
const get = (type) => parts.find(p => p.type === type)?.value;
const hari = hariIndonesia[date.getDay()];
const tanggal = date.getDate().toString().padStart(2, "0");
const bulan = date.toLocaleString("en-US", { month: "short" }); // tetap pakai format "Jul"
const tahun = date.getFullYear();
const jam = date.toTimeString().split(" ")[0]; // ambil HH:MM:SS
return `${get('weekday')}, ${get('day')} ${get('month')} ${get('year')} ${get('hour')}:${get('minute')}:${get('second')} GMT+8`;
return `${hari}, ${tanggal} ${bulan} ${tahun} ${jam}`;
}
async function loadData() {
try {
const response = await fetch('/get_video');
@ -110,6 +107,14 @@
document.getElementById('total-entries').textContent = data.total_entries;
document.getElementById('vehicle-zone').textContent = data.vehicles_in_zone;
if (data.vehicles_in_zone <= 2) {
document.getElementById('kepadatan').textContent = 'Kepadatan sepi';
} else if (data.vehicles_in_zone <= 5) {
document.getElementById('kepadatan').textContent = 'Kepadatan sedang';
} else {
document.getElementById('kepadatan').textContent = 'Kepadatan tinggi';
}
// Populate table
const tbody = document.getElementById('log-table-body');
tbody.innerHTML = '';
@ -120,7 +125,7 @@
<td>${entry.id}</td>
<td>${entry.vehicle_id}</td>
<td>${entry.direction}</td>
<td>${formatToMakassar(entry.timestamp)}</td>
<td>${ubahTanggalKeBahasaIndonesia(entry.timestamp)}</td>
<td>${entry.speed.toFixed(1)}</td>
`;
tbody.appendChild(row);