conference/templates/staff/scan.html

{% extends "base.html" %}

{% block title %}{{ 'scan_qr'|t }} - {{ event.name }}{% endblock %}

{% block content %}
<div class="scan-page staff-scan-page">
    <div class="scan-header">
        <h1>{{ event.name }}</h1>
        <p>{{ 'qr_scanner_checkin'|t }}</p>
        <a href="{{ url_for('staff_event_dashboard', event_id=event.id) }}" class="btn btn-outline"><i data-lucide="arrow-left"></i> {{ 'back_to_dashboard'|t }}</a>
    </div>

    <div class="scanner-container">
        <div id="qr-reader" class="qr-reader"></div>
        <div id="scan-result" class="scan-result hidden">
            <div class="result-icon" id="result-icon"></div>
            <h2 id="result-title"></h2>
            <p id="result-message"></p>
            <button id="scan-again" class="btn btn-primary"><i data-lucide="scan-line"></i> {{ 'scan_again'|t }}</button>
        </div>
    </div>

    <div class="scan-stats">
        <div class="stat">
            <span class="stat-number" id="total-count">{{ attendees|length }}</span>
            <span class="stat-label">{{ 'total'|t }}</span>
        </div>
        <div class="stat">
            <span class="stat-number" id="checked-in-count">{{ attendees|selectattr('checked_in')|list|length }}</span>
            <span class="stat-label">{{ 'checked_in'|t }}</span>
        </div>
        <div class="stat">
            <span class="stat-number" id="remaining-count">{{ attendees|rejectattr('checked_in')|list|length }}</span>
            <span class="stat-label">{{ 'remaining'|t }}</span>
        </div>
    </div>

    <div class="recent-checkins">
        <h3>{{ 'recent_checkins'|t }}</h3>
        <ul id="recent-list">
            <li class="empty-state"><i data-lucide="users"></i> {{ 'no_checkins_yet'|t }}</li>
        </ul>
    </div>
</div>

<script src="https://unpkg.com/html5-qrcode@2.3.8/html5-qrcode.min.js"></script>
<script>
const eventId = {{ event.id }};
let html5QrCode;
let scanning = true;

function getAttendeeName(attendeeId) {
    const attendees = {{ attendees|tojson }};
    const attendee = attendees.find(a => a.id === attendeeId);
    return attendee ? `${attendee.first_name} ${attendee.last_name}` : `Attendee #${attendeeId}`;
}

function updateStats() {
    const attendees = {{ attendees|tojson }};
    const total = attendees.length;
    const checkedIn = attendees.filter(a => a.checked_in).length;
    document.getElementById('total-count').textContent = total;
    document.getElementById('checked-in-count').textContent = checkedIn;
    document.getElementById('remaining-count').textContent = total - checkedIn;
}

function addRecentCheckin(name) {
    const list = document.getElementById('recent-list');
    const emptyState = list.querySelector('.empty-state');
    if (emptyState) emptyState.remove();

    const li = document.createElement('li');
    const time = new Date().toLocaleTimeString();
    li.innerHTML = `<span class="attendee-name">${name}</span><span class="checkin-time"><i data-lucide="check"></i> ${time}</span>`;
    list.insertBefore(li, list.firstChild);

    while (list.children.length > 10) {
        list.removeChild(list.lastChild);
    }

    lucide.createIcons();
}

async function checkInAttendee(attendeeId) {
    try {
        const response = await fetch(`/organizer/event/${eventId}/checkin/${attendeeId}`, {
            method: 'POST'
        });

        const data = await response.json();
        const resultDiv = document.getElementById('scan-result');
        const icon = document.getElementById('result-icon');
        const title = document.getElementById('result-title');
        const message = document.getElementById('result-message');

        icon.className = 'result-icon';
        icon.innerHTML = '';

        if (data.success) {
            document.getElementById('qr-reader').style.display = 'none';
            resultDiv.classList.remove('hidden');

            if (data.already_checked_in) {
                icon.classList.add('duplicate');
                icon.innerHTML = '<i data-lucide="clock"></i>';
                title.textContent = '{{ "already_checked_in"|t }}';
                message.textContent = `${data.attendee_name} {{ "was_already_checked_in"|t }}`;
            } else {
                icon.classList.add('success');
                icon.innerHTML = '<i data-lucide="check-circle"></i>';
                title.textContent = '{{ "checked_in"|t }}!';
                message.textContent = `{{ "success_checked_in"|t }} ${data.attendee_name}`;
                addRecentCheckin(data.attendee_name);
                updateStats();
            }
        } else {
            icon.classList.add('error');
            icon.innerHTML = '<i data-lucide="x-circle"></i>';
            title.textContent = '{{ "error"|t }}';
            message.textContent = data.error || '{{ "failed_checkin"|t }}';
        }

        lucide.createIcons();
        scanning = false;
    } catch (error) {
        console.error('Check-in error:', error);
        showToast('{{ "error_checking_in"|t }}', 'error');
    }
}

function onScanSuccess(decodedText) {
    if (!scanning) return;

    // Check if it's a plain attendee code (10 alphanumeric characters)
    const codeMatch = decodedText.match(/^[A-Z0-9]{10}$/i);
    if (codeMatch) {
        // It's an attendee code - use the new endpoint
        checkInByCode(codeMatch[0]);
        return;
    }

    const parts = decodedText.split(':');
    if (parts.length === 3 && parts[0] === 'NETEVENT') {
        const qrEventId = parseInt(parts[1]);
        const attendeeId = parseInt(parts[2]);

        if (qrEventId === eventId) {
            checkInAttendee(attendeeId);
        } else {
            showToast('{{ "qr_different_event"|t }}', 'error');
        }
    } else {
        const match = decodedText.match(/\/organizer\/event\/(\d+)\/checkin\/(\d+)/);
        if (match) {
            const qrEventId = parseInt(match[1]);
            const attendeeId = parseInt(match[2]);
            if (qrEventId === eventId) {
                checkInAttendee(attendeeId);
            } else {
                showToast('{{ "qr_different_event"|t }}', 'error');
            }
        } else {
            // QR format not recognized
        }
    }
}

async function checkInByCode(attendeeCode) {
    try {
        const response = await fetch(`/organizer/event/${eventId}/checkin/code`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ attendee_code: attendeeCode })
        });

        const data = await response.json();
        const resultDiv = document.getElementById('scan-result');
        const icon = document.getElementById('result-icon');
        const title = document.getElementById('result-title');
        const message = document.getElementById('result-message');

        icon.className = 'result-icon';
        icon.innerHTML = '';

        if (data.success) {
            document.getElementById('qr-reader').style.display = 'none';
            resultDiv.classList.remove('hidden');

            if (data.already_checked_in) {
                icon.classList.add('duplicate');
                icon.innerHTML = '<i data-lucide="clock"></i>';
                title.textContent = '{{ "already_checked_in"|t }}';
                message.textContent = `${data.attendee_name} {{ "was_already_checked_in"|t }}`;
            } else {
                icon.classList.add('success');
                icon.innerHTML = '<i data-lucide="check-circle"></i>';
                title.textContent = '{{ "checked_in"|t }}!';
                message.textContent = `{{ "success_checked_in"|t }} ${data.attendee_name}`;
                addRecentCheckin(data.attendee_name);
                updateStats();
            }
        } else {
            icon.classList.add('error');
            icon.innerHTML = '<i data-lucide="x-circle"></i>';
            title.textContent = '{{ "error"|t }}';
            message.textContent = data.error || '{{ "failed_checkin"|t }}';
        }

        lucide.createIcons();
        scanning = false;
    } catch (error) {
        console.error('Check-in error:', error);
        showToast('{{ "error_checking_in"|t }}', 'error');
    }
}

function startScanner() {
    html5QrCode = new Html5Qrcode("qr-reader");

    html5QrCode.start(
        { facingMode: "environment" },
        {
            fps: 10,
            qrbox: { width: 250, height: 250 }
        },
        onScanSuccess,
        (errorMessage) => {
        }
    ).catch(err => {
        console.error('Camera error:', err);
        showToast('{{ "camera_permission_error"|t }}', 'error');
    });
}

function resetScanner() {
    document.getElementById('qr-reader').style.display = 'block';
    document.getElementById('scan-result').classList.add('hidden');
    scanning = true;
}

document.getElementById('scan-again').addEventListener('click', resetScanner);

window.addEventListener('DOMContentLoaded', startScanner);
</script>
{% endblock %}