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>
                    {% elseif job.status == 'ABORTED' %}
                        <span class="badge bg-dark">ABORTED</span>
                    {% else %}
                        <span class="badge bg-secondary">{{ job.status }}</span>
                    {% endif %}
                </span>
            </div>

            <div class="mb-2">
                <strong>Dokument:</strong>
                {% if job.documentId %}
                    <a href="{{ path('admin_document_show', {id: job.documentId}) }}"
                       class="text-light">
                        {{ job.documentId }}
                    </a>
                {% else %}
                    -
                {% endif %}
            </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">
                    {{ job.finishedAt ? job.finishedAt|date('d.m.Y H:i:s') : '-' }}
                </span>
            </div>

            <div class="mb-2">
                <strong>Gestartet von:</strong>
                {{ job.startedBy ? job.startedBy.email : '-' }}
            </div>

            <div id="job-loader"
                 class="mt-3"
                 style="{% if job.status in ['QUEUED','RUNNING'] %}{% else %}display:none;{% endif %}">
                <div class="d-flex align-items-center gap-2">
                    <div class="spinner-border spinner-border-sm text-info" role="status"></div>
                    <div>
                        <strong>Prozess 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="{% if job.status == 'FAILED' %}{% else %}display:none;{% endif %}">
                {% if job.errorMessage %}
                    <strong>Fehler:</strong><br>
                    {{ job.errorMessage }}
                {% endif %}
            </div>

        </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 if (status === 'ABORTED')
                    html = '<span class="badge bg-dark">ABORTED</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 %}