heko_webcrawler/app/templates/jobs.html

{% extends "base.html" %}

{% block content %}
<div class="table-container">
    <h2>Ihre Aufträge</h2>
    <table id="jobs-table">
        <thead>
            <tr>
                <th>Dateiname</th>
                <th>Status</th>
                <th>Erstellt am</th>
                <th>Ergebnis</th>
                <th>Aktionen</th>
            </tr>
        </thead>
        <tbody>
            {% for job in jobs %}
            <tr id="job-row-{{ job.id }}">
                <td>{{ job.filename }}</td>
                <td id="status-{{ job.id }}" class="job-status">
                    {{ job.status }}
                </td>
                <td>{{ job.created_at.strftime('%Y-%m-%d %H:%M:%S') }}</td>
                <td id="result-{{ job.id }}">
                    {% if job.result_filename and 'Failed' not in job.status %}
                        <a href="{{ url_for('auth.download_result', job_id=job.id) }}" class="dl-btn">
                            🎯 Gefiltert
                        </a>
                        {% if job.result_filename_raw %}
                        &nbsp;
                        <a href="{{ url_for('auth.download_result_raw', job_id=job.id) }}" class="dl-btn dl-btn-raw">
                            📋 Alle
                        </a>
                        {% endif %}
                    {% elif 'Failed' in job.status %}
                        <span class="status-failed">❌ {{ job.result_filename or 'Fehler' }}</span>
                    {% else %}
                        <span class="status-pending">⏳ Noch nicht verfügbar</span>
                    {% endif %}
                </td>
                <td>
                    {% if 'Failed' in job.status %}
                    <!-- 🆕 Resume Button -->
                    <form action="{{ url_for('auth.resume_job', job_id=job.id) }}" method="POST" style="display:inline;">
                        <button type="submit" class="btn-resume">▶️ Resume</button>
                    </form>
                    {% endif %}
                    <form action="{{ url_for('auth.delete_job', job_id=job.id) }}" method="POST" style="display:inline;">
                        <button type="submit" class="delete-btn">🗑️ Löschen</button>
                    </form>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<style>
.job-status     { font-weight: bold; }
.status-failed  { color: #e74c3c; font-weight: bold; }
.status-pending { color: #888; }

.eta-badge      { display: inline-block; background: #eaf4ff; color: #1a6fa8;
                  border-radius: 10px; padding: 2px 8px; font-size: 0.82em;
                  font-weight: bold; margin-left: 6px; }

.dl-btn         { display: inline-block; padding: 4px 10px; border-radius: 4px;
                  text-decoration: none; font-size: 0.85em; font-weight: bold;
                  background: #27ae60; color: #fff; margin: 2px 1px; transition: background 0.2s; }
.dl-btn:hover   { background: #1e8449; }
.dl-btn-raw     { background: #2980b9; }
.dl-btn-raw:hover { background: #1a5e8a; }

.btn-resume     { background: #e67e22; color: white; border: none;
                  padding: 4px 10px; border-radius: 4px; cursor: pointer;
                  font-size: 0.85em; font-weight: bold; margin-right: 4px; }
.btn-resume:hover { background: #ca6f1e; }
</style>

<script>
// ETA Badge aus Status-String parsen
function parseStatus(status) {
    const parts = status.split('|');
    if (parts.length === 2) {
        return `<span>${parts[0].trim()}</span>
                <span class="eta-badge">${parts[1].trim()}</span>`;
    }
    return status;
}

function renderResult(resultCell, data) {
    const hasFailed   = data.status.includes('Failed') || data.status.includes('❌');
    const hasFiltered = data.result_filename && !hasFailed;
    const hasRaw      = data.result_filename_raw && !hasFailed;

    if (hasFiltered) {
        let html = `<a href="/download/${data.id}" class="dl-btn">🎯 Gefiltert</a>`;
        if (hasRaw) {
            html += ` <a href="/download_raw/${data.id}" class="dl-btn dl-btn-raw">📋 Alle</a>`;
        }
        resultCell.innerHTML = html;
    } else if (hasFailed) {
        resultCell.innerHTML = `<span class="status-failed">❌ ${data.result_filename || 'Fehler'}</span>`;
    } else {
        resultCell.innerHTML = `<span class="status-pending">⏳ Noch nicht verfügbar</span>`;
    }
}

function renderActions(row, data) {
    const actionsCell = row.querySelector('td:last-child');
    const hasFailed = data.status.includes('Failed');
    let html = '';
    if (hasFailed) {
        html += `<form action="/resume_job/${data.id}" method="POST" style="display:inline;">
                    <button type="submit" class="btn-resume">▶️ Resume</button>
                 </form>`;
    }
    html += `<form action="/delete_job/${data.id}" method="POST" style="display:inline;">
                <button type="submit" class="delete-btn">🗑️ Löschen</button>
             </form>`;
    actionsCell.innerHTML = html;
}

function pollJob(jobId) {
    fetch(`/job_status/${jobId}`)
        .then(r => r.json())
        .then(data => {
            const statusCell = document.getElementById(`status-${jobId}`);
            const resultCell = document.getElementById(`result-${jobId}`);
            const row        = document.getElementById(`job-row-${jobId}`);

            statusCell.innerHTML = parseStatus(data.status);
            renderResult(resultCell, data);
            renderActions(row, data);

            const done = data.status.includes('✅') || data.status.includes('Failed') || data.status.includes('❌');
            if (!done) {
                setTimeout(() => pollJob(jobId), 5000);
            }
        })
        .catch(() => setTimeout(() => pollJob(jobId), 10000));
}

document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.job-status').forEach(function (cell) {
        const jobId  = cell.id.split('-')[1];
        const status = cell.textContent.trim();
        cell.innerHTML = parseStatus(status);
        if (!status.includes('✅') && !status.includes('Failed') && !status.includes('❌')) {
            pollJob(jobId);
        }
    });
});
</script>
{% endblock %}