gomag-vending/api/app/templates/logs.html

{% extends "base.html" %}
{% block title %}Jurnale Import - GoMag Import{% endblock %}
{% block nav_logs %}active{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h4 class="mb-0">Jurnale Import</h4>
    <div class="d-flex align-items-center gap-2">
        <select class="form-select form-select-sm" id="runSelector" style="min-width: 320px;">
            <option value="">-- Selecteaza un sync run --</option>
        </select>
        <button class="btn btn-sm btn-outline-secondary" onclick="loadRuns()" title="Reincarca lista">
            <i class="bi bi-arrow-clockwise"></i>
        </button>
    </div>
</div>

<!-- Sync Runs Table (always visible) -->
<div class="card mb-4">
    <div class="card-header d-flex justify-content-between align-items-center">
        <span>Sync Runs</span>
        <div id="runsTablePagination" class="d-flex align-items-center gap-2"></div>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead>
                    <tr>
                        <th>Data</th>
                        <th>Status</th>
                        <th>Total</th>
                        <th>OK</th>
                        <th>Fara mapare</th>
                        <th>Erori</th>
                        <th>Durata</th>
                    </tr>
                </thead>
                <tbody id="runsTableBody">
                    <tr><td colspan="7" class="text-center text-muted py-3">Se incarca...</td></tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Run Detail Section (shown when run selected or live sync) -->
<div id="runDetailSection" style="display:none;">

    <!-- Run Summary Bar -->
    <div class="row g-3 mb-3" id="runSummary">
        <div class="col-auto">
            <div class="card stat-card px-3 py-2">
                <div class="stat-value text-primary" id="sum-total" style="font-size:1.25rem;">-</div>
                <div class="stat-label">Total</div>
            </div>
        </div>
        <div class="col-auto">
            <div class="card stat-card px-3 py-2">
                <div class="stat-value text-success" id="sum-imported" style="font-size:1.25rem;">-</div>
                <div class="stat-label">Importate</div>
            </div>
        </div>
        <div class="col-auto">
            <div class="card stat-card px-3 py-2">
                <div class="stat-value text-warning" id="sum-skipped" style="font-size:1.25rem;">-</div>
                <div class="stat-label">Omise</div>
            </div>
        </div>
        <div class="col-auto">
            <div class="card stat-card px-3 py-2">
                <div class="stat-value text-danger" id="sum-errors" style="font-size:1.25rem;">-</div>
                <div class="stat-label">Erori</div>
            </div>
        </div>
        <div class="col-auto">
            <div class="card stat-card px-3 py-2">
                <div class="stat-value text-secondary" id="sum-duration" style="font-size:1.25rem;">-</div>
                <div class="stat-label">Durata</div>
            </div>
        </div>
    </div>

    <!-- Live Feed (visible only during active sync) -->
    <div class="card mb-3" id="liveFeedCard" style="display:none;">
        <div class="card-header">
            <i class="bi bi-broadcast"></i> Live Feed
            <span class="badge bg-danger ms-2 live-pulse">LIVE</span>
        </div>
        <div class="card-body p-0">
            <div class="live-feed" id="liveFeed"></div>
        </div>
    </div>

    <!-- Filter buttons -->
    <div class="mb-3" id="filterRow">
        <div class="btn-group btn-group-sm" role="group">
            <button type="button" class="btn btn-outline-secondary active" data-filter="all">
                <i class="bi bi-list-ul"></i> Toate
            </button>
            <button type="button" class="btn btn-outline-success" data-filter="IMPORTED">
                <i class="bi bi-check-circle"></i> Importate
            </button>
            <button type="button" class="btn btn-outline-warning" data-filter="SKIPPED">
                <i class="bi bi-skip-forward"></i> Fara Mapare
            </button>
            <button type="button" class="btn btn-outline-danger" data-filter="ERROR">
                <i class="bi bi-x-circle"></i> Erori
            </button>
        </div>
        <small class="text-muted ms-3" id="filterCount"></small>
    </div>

    <!-- Orders table -->
    <div class="card">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover mb-0" id="logsTable">
                    <thead>
                        <tr>
                            <th style="width:140px;">Nr. Comanda</th>
                            <th>Client</th>
                            <th style="width:100px;" class="text-center">Nr. Articole</th>
                            <th style="width:120px;">Status</th>
                            <th>Eroare / Detalii</th>
                        </tr>
                    </thead>
                    <tbody id="logsBody">
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Hidden field for pre-selected run from URL/server -->
<input type="hidden" id="preselectedRun" value="{{ selected_run }}">
{% endblock %}

{% block scripts %}
<script src="/static/js/logs.js"></script>
{% endblock %}