PeopleCounter/static/js/main.js

// WebSocket connection and real-time UI updates
const socket = io();

// Default maximum occupancy threshold (can be configured)
const MAX_OCCUPANCY = 10;

// DOM elements
const occupancyValue = document.getElementById('occupancyValue');
const occupancyStatus = document.getElementById('occupancyStatus');
const occupancyCard = document.getElementById('occupancyCard');
const enteredValue = document.getElementById('enteredValue');
const exitedValue = document.getElementById('exitedValue');
const resetButton = document.getElementById('resetButton');
const statusIndicator = document.getElementById('statusIndicator');
const videoStream = document.getElementById('videoStream');

// Connection status
let isConnected = false;

// WebSocket event handlers
socket.on('connect', () => {
    console.log('Connected to server');
    isConnected = true;
    updateConnectionStatus(true);
});

socket.on('disconnect', () => {
    console.log('Disconnected from server');
    isConnected = false;
    updateConnectionStatus(false);
});

// Handle count updates from server
socket.on('count_update', (data) => {
    updateCounts(data);
});

// Handle reset confirmation
socket.on('reset_confirmation', (data) => {
    console.log('Counts reset:', data);
    // Counts will be updated via count_update event
});

// Update count displays
function updateCounts(counts) {
    const { total_entered, total_exited, current_occupancy } = counts;
    
    // Update values with animation
    updateValue(enteredValue, total_entered);
    updateValue(exitedValue, total_exited);
    updateValue(occupancyValue, current_occupancy);
    
    // Update occupancy status and styling
    updateOccupancyStatus(current_occupancy);
}

// Update a single value with animation
function updateValue(element, newValue) {
    const oldValue = parseInt(element.textContent) || 0;
    if (oldValue !== newValue) {
        element.classList.add('updated');
        element.textContent = newValue;
        setTimeout(() => {
            element.classList.remove('updated');
        }, 200);
    }
}

// Update occupancy status based on current count
function updateOccupancyStatus(occupancy) {
    // Remove all status classes
    occupancyCard.classList.remove('warning', 'danger');
    statusIndicator.classList.remove('warning', 'danger');
    
    // Update status text and styling
    if (occupancy >= MAX_OCCUPANCY) {
        occupancyStatus.textContent = 'OVER LIMIT';
        occupancyCard.classList.add('danger');
        statusIndicator.classList.add('danger');
    } else if (occupancy >= MAX_OCCUPANCY * 0.8) {
        occupancyStatus.textContent = 'High';
        occupancyCard.classList.add('warning');
        statusIndicator.classList.add('warning');
    } else if (occupancy >= MAX_OCCUPANCY * 0.5) {
        occupancyStatus.textContent = 'Moderate';
        occupancyCard.classList.remove('warning', 'danger');
        statusIndicator.classList.remove('warning', 'danger');
    } else {
        occupancyStatus.textContent = 'Normal';
        occupancyCard.classList.remove('warning', 'danger');
        statusIndicator.classList.remove('warning', 'danger');
    }
}

// Update connection status indicator
function updateConnectionStatus(connected) {
    if (connected) {
        statusIndicator.style.background = '#4caf50';
        statusIndicator.title = 'Connected';
    } else {
        statusIndicator.style.background = '#f44336';
        statusIndicator.title = 'Disconnected';
    }
}

// Handle reset button click
resetButton.addEventListener('click', () => {
    if (confirm('Are you sure you want to reset all counts?')) {
        socket.emit('reset_counts');
    }
});

// Handle video stream errors
videoStream.addEventListener('error', () => {
    console.error('Error loading video stream');
    videoStream.src = '';  // Clear src to prevent repeated errors
    // Optionally show an error message
    const errorMsg = document.createElement('div');
    errorMsg.className = 'error-message';
    errorMsg.textContent = 'Unable to load video stream. Please check camera connection.';
    errorMsg.style.cssText = 'position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; background: rgba(244, 67, 54, 0.9); padding: 20px; border-radius: 10px;';
    document.querySelector('.video-container').appendChild(errorMsg);
});

// Periodic check for connection (fallback)
setInterval(() => {
    if (!isConnected && socket.connected === false) {
        console.log('Attempting to reconnect...');
    }
}, 5000);

// Initialize
console.log('People Counter frontend initialized');