MtoRagSystem/templates/admin/job/show.html.twig

{% extends 'admin/base.html.twig' %}

{% block title %}Ingest Job{% endblock %}

{% block body %}

    <a href="{{ path('admin_jobs') }}"
       class="btn btn-sm btn-outline-light mb-3">
        ← Zurück
    </a>

    <h1 class="h4 mb-4">Ingest Job</h1>

    <div class="card bg-black text-info  border-secondary">
        <div class="card-body">

            <div class="mb-2">
                <strong>ID:</strong> {{ job.id }}
            </div>

            <div class="mb-2">
                <strong>Typ:</strong> {{ job.type }}
            </div>

            <div class="mb-2">
                <strong>Status:</strong>
                <span id="job-status-badge">
                {% if job.status == 'COMPLETED' %}
                    <span class="badge bg-success">COMPLETED</span>
                {% elseif job.status == 'QUEUED' %}
                    <span class="badge bg-secondary">QUEUED</span>
                {% elseif job.status == 'RUNNING' %}
                    <span class="badge bg-warning text-dark">RUNNING</span>
                {% elseif job.status == 'FAILED' %}
                    <span class="badge bg-danger">FAILED</span>
                {% else %}
                    <span class="badge bg-secondary">{{ job.status }}</span>
                {% endif %}
                </span>
            </div>

            <div class="mb-2">
                <strong>Dokument:</strong>
                <a href="/admin/documents/{{ job.documentId }}" class="text-light">{{ job.documentId ?? '-' }}</a>
            </div>

            <div class="mb-2">
                <strong>Version:</strong>
                {{ job.documentVersionId ?? '-' }}
            </div>

            <div class="mb-2">
                <strong>Gestartet:</strong>
                {{ job.startedAt|date('d.m.Y H:i:s') }}
            </div>

            <div class="mb-2">
                <strong>Beendet:</strong>
                <span id="job-finished-at">
                    {% if job.finishedAt %}
                        {{ job.finishedAt|date('d.m.Y H:i:s') }}
                    {% else %}
                        -
                    {% endif %}
                </span>
            </div>

            <div class="mb-2">
                <strong>Gestartet von:</strong>
                {% if job.startedBy %}
                    {{ job.startedBy.email }}
                {% else %}
                    -
                {% endif %}
            </div>

            <div id="job-loader" class="mt-3" style="display:none;">
                <div class="d-flex align-items-center gap-2">
                    <div class="spinner-border spinner-border-sm text-info" role="status"></div>
                    <div>
                        <strong>Ingest läuft…</strong><br>
                        <small class="text-secondary">Diese Seite aktualisiert den Status automatisch.</small>
                    </div>
                </div>
            </div>

            <div id="job-error" class="alert alert-danger mt-3" style="display:none;"></div>

                {% if job.errorMessage %}
                    <div class="alert alert-danger mt-3">
                        <strong>Fehler:</strong><br>
                        {{ job.errorMessage }}
                    </div>
                {% endif %}

                {% if job.logPath %}
                    <div class="mt-3">
                        <strong>Log Datei:</strong><br>
                        <code>{{ job.logPath }}</code>
                    </div>
                {% endif %}

            </div>
    </div>

    <script>
        (function () {
            const statusUrl = {{ path('admin_job_status', {id: job.id})|json_encode|raw }};
            const badgeWrap = document.getElementById('job-status-badge');
            const finishedAtEl = document.getElementById('job-finished-at');
            const loaderEl = document.getElementById('job-loader');
            const errorEl = document.getElementById('job-error');

            let timer = null;

            function stopPolling() {
                if (timer !== null) {
                    clearInterval(timer);
                    timer = null;
                }
            }

            function setBadge(status) {
                let html = '';
                if (status === 'COMPLETED') html = '<span class="badge bg-success">COMPLETED</span>';
                else if (status === 'QUEUED') html = '<span class="badge bg-secondary">QUEUED</span>';
                else if (status === 'RUNNING') html = '<span class="badge bg-warning text-dark">RUNNING</span>';
                else if (status === 'FAILED') html = '<span class="badge bg-danger">FAILED</span>';
                else html = '<span class="badge bg-secondary">' + status + '</span>';
                badgeWrap.innerHTML = html;
            }

            async function poll() {
                try {
                    const res = await fetch(statusUrl);
                    if (!res.ok) return;

                    const data = await res.json();
                    const status = (data.status || '').toUpperCase();

                    setBadge(status);
                    finishedAtEl.textContent = data.finishedAt
                        ? new Date(data.finishedAt).toLocaleString('de-DE')
                        : '-';

                    if (status === 'QUEUED' || status === 'RUNNING') {
                        loaderEl.style.display = '';
                    } else {
                        loaderEl.style.display = 'none';
                        stopPolling();
                    }

                    if (status === 'FAILED' && data.errorMessage) {
                        errorEl.style.display = '';
                        errorEl.innerHTML = '<strong>Fehler:</strong><br>' + data.errorMessage;
                    }

                } catch (e) {
                    stopPolling();
                }
            }

            timer = setInterval(poll, 1000);
            poll();
        })();

    </script>

{% endblock %}