frankenbot/templates/tasks.html

{% extends "base.html" %}
{% block title %}Tasks{% endblock %}

{% block content %}
<div class="page-header">
  <h1>Task-Verwaltung</h1>
  <p>Manuelle, orchestrierte und Agent-Tasks</p>
</div>

<div class="row g-4">
  <div class="col-lg-4">
    <div class="card mb-3">
      <div class="card-header bg-success">
        <h5 class="mb-0">Neuen Task erstellen</h5>
      </div>
      <div class="card-body">
        <form method="POST" action="/tasks">
          <div class="mb-3">
            <label for="title" class="form-label">Titel</label>
            <input type="text" class="form-control" id="title" name="title" placeholder="Task-Titel" required>
          </div>
          <div class="mb-3">
            <label for="description" class="form-label">Beschreibung</label>
            <textarea class="form-control" id="description" name="description" rows="3"
              placeholder="Optionale Beschreibung"></textarea>
          </div>
          <div class="mb-3">
            <label for="assigned_agent" class="form-label">Agent (optional)</label>
            <select class="form-select" id="assigned_agent" name="assigned_agent">
              <option value="">— Agent wählen —</option>
              {% for key, agent in agents.items() %}
              <option value="{{ key }}">{{ agent.name }}</option>
              {% endfor %}
            </select>
          </div>
          <button type="submit" class="btn btn-success w-100">Task erstellen</button>
        </form>
      </div>
    </div>
    
    <div class="card">
      <div class="card-header bg-info">
        <h5 class="mb-0">🔄 Auto-Refresh</h5>
      </div>
      <div class="card-body">
        <div class="form-check form-switch">
          <input class="form-check-input" type="checkbox" id="autoRefresh" onchange="toggleAutoRefresh()">
          <label class="form-check-label" for="autoRefresh">Automatisch aktualisieren (alle 30s)</label>
        </div>
      </div>
    </div>
  </div>

  <div class="col-lg-8">
    <div class="card">
      <div class="card-header bg-primary d-flex justify-content-between align-items-center">
        <h5 class="mb-0">Alle Tasks</h5>
        <span class="badge bg-secondary">{{ tasks|length }}</span>
      </div>
      <div class="card-body p-0">
        {% if tasks %}
        <div class="table-responsive">
          <table class="table table-hover mb-0">
            <thead>
              <tr>
                <th>#</th>
                <th>Titel</th>
                <th>Agent</th>
                <th>Status</th>
                <th>Erstellt</th>
                <th>Aktion</th>
              </tr>
            </thead>
            <tbody>
              {% for task in tasks %}
              <tr>
                <td style="color:var(--text-muted);">{{ task.id }}</td>
                <td>
                  <strong>{{ task.title }}</strong>
                  {% if task.type == 'email' %}
                    <span class="badge bg-info ms-1" title="Von: {{ task.reply_to }}">Email</span>
                  {% endif %}
                  {% if task.type == 'orchestrated' %}
                    <span class="badge ms-1" style="background-color:#9333ea;">Orchestriert</span>
                  {% endif %}
                  {% if task.type == 'agent_created' %}
                    <span class="badge bg-warning ms-1">Agent</span>
                  {% endif %}
                  {% if task.description %}
                    <div style="font-size:.75rem;color:var(--text-muted);">
                      {{ task.description[:60] }}{% if task.description|length > 60 %}…{% endif %}
                    </div>
                  {% endif %}
                </td>
                <td style="font-size:.8rem;">{{ task.assigned_agent }}</td>
                <td>
                  {% if task.status == 'pending' %}
                    <span class="badge bg-warning">Pending</span>
                  {% elif task.status == 'in_progress' %}
                    <span class="badge bg-primary">In Progress</span>
                  {% elif task.status == 'completed' %}
                    <span class="badge bg-success">Done</span>
                  {% elif task.status == 'error' %}
                    <span class="badge bg-danger">Fehler</span>
                  {% else %}
                    <span class="badge bg-secondary">{{ task.status }}</span>
                  {% endif %}
                </td>
                <td style="color:var(--text-muted);font-size:.75rem;">{{ task.created }}</td>
                <td>
                  {% if task.type == 'email' %}
                    <span style="color:var(--text-muted);font-size:.75rem;">Auto</span>
                  {% elif task.status == 'pending' %}
                    <a href="/tasks/update/{{ task.id }}/in_progress" class="btn btn-sm btn-primary">Start</a>
                  {% elif task.status == 'in_progress' %}
                    <a href="/tasks/update/{{ task.id }}/completed" class="btn btn-sm btn-success">Fertig</a>
                  {% else %}
                    <span style="color:var(--text-muted);">—</span>
                  {% endif %}
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
        {% else %}
        <div class="text-center py-5" style="color:var(--text-muted);">
          <p style="font-size:2rem;">📋</p>
          <p>Noch keine Tasks. Erstellen Sie den ersten Task!</p>
        </div>
        {% endif %}
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
let autoRefreshInterval = null;

function toggleAutoRefresh() {
  const checkbox = document.getElementById('autoRefresh');
  if (checkbox.checked) {
    autoRefreshInterval = setInterval(() => {
      location.reload();
    }, 30000);
  } else {
    if (autoRefreshInterval) {
      clearInterval(autoRefreshInterval);
      autoRefreshInterval = null;
    }
  }
}
</script>
{% endblock %}