autocensup/templates/core/task_page.html

{% extends "base.html" %}

{% block title %}{{ label }} | Autocensup{% endblock %}
{% block page_pretitle %}Tarefas assincronas{% endblock %}
{% block page_title %}{{ label }}{% endblock %}

{% block content %}
  {% csrf_token %}
  <div
    id="task-app"
    data-operacao="{{ operacao }}"
    data-start-url="{% url 'start_task' operacao %}"
    data-status-url-base="{% url 'task_status' 'PLACEHOLDER' %}"
    data-initial-task-id="{{ task_id }}"
  >
    <div class="row row-cards">
      <div class="col-lg-6">
        <div class="card">
          <div class="card-body">
            {% if operacao == "pessoas-ingressantes" %}
              <div class="mb-3">
                <label class="form-label" for="primeiro_ano">Ano de referencia</label>
                <input type="number" id="primeiro_ano" class="form-control" value="{{ selected_year }}">
              </div>
            {% elif operacao == "vinculos-censup" %}
              <div class="mb-3">
                <label class="form-label" for="ano">Ano do censo</label>
                <input type="number" id="ano" class="form-control" value="{{ selected_year }}">
              </div>
            {% endif %}
            <button id="btn-iniciar" type="button" class="btn btn-primary" {% if task_id %}disabled{% endif %}>
              <i class="ti ti-player-play me-2"></i>
              Iniciar
            </button>
            <span id="status-label" class="text-secondary ms-2"></span>
          </div>
          <div class="card-body border-top">
            <div class="progress mb-2" style="height: 1.5rem;">
              <div
                id="progress-bar"
                class="progress-bar"
                role="progressbar"
                style="width: 0%"
              >
                <span id="progress-text"></span>
              </div>
            </div>
            <div id="progress-message" class="text-secondary small"></div>
            <div id="result-box" class="mt-3"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}

{% block scripts %}
  <script>
    (function () {
      const app = document.getElementById("task-app");
      const operacao = app.dataset.operacao;
      const startUrl = app.dataset.startUrl;
      const statusUrlBase = app.dataset.statusUrlBase;
      let taskId = app.dataset.initialTaskId || null;
      let polling = null;

      const btn = document.getElementById("btn-iniciar");
      const statusLabel = document.getElementById("status-label");
      const progressBar = document.getElementById("progress-bar");
      const progressText = document.getElementById("progress-text");
      const progressMessage = document.getElementById("progress-message");
      const resultBox = document.getElementById("result-box");

      function getCsrfToken() {
        const match = document.cookie.match(/csrftoken=([^;]+)/);
        return match ? match[1] : "";
      }

      function setBusy(busy) {
        btn.disabled = busy;
        btn.innerHTML = busy
          ? '<i class="ti ti-loader-2 me-2"></i>Em andamento...'
          : '<i class="ti ti-player-play me-2"></i>Iniciar';
      }

      function stopPolling() {
        if (polling) {
          clearInterval(polling);
          polling = null;
        }
      }

      function updateProgress(data) {
        if (data.state === "PROGRESS" && data.meta) {
          const total = data.meta.total || 0;
          const processed = data.meta.processed || 0;
          const pct = total > 0 ? Math.round((processed / total) * 100) : 0;
          progressBar.style.width = pct + "%";
          progressText.textContent = pct + "%";
          progressMessage.textContent =
            processed + "/" + total + " - " + (data.meta.message || "");
          statusLabel.textContent = "Em andamento";
          setBusy(true);
        } else if (data.state === "SUCCESS") {
          progressBar.style.width = "100%";
          progressText.textContent = "100%";
          statusLabel.textContent = "Concluido";
          setBusy(false);
          resultBox.innerHTML =
            '<pre class="bg-light p-2 rounded">' +
            JSON.stringify(data.result, null, 2) +
            "</pre>";
          stopPolling();
        } else if (data.state === "FAILURE") {
          statusLabel.textContent = "Falhou";
          setBusy(false);
          resultBox.innerHTML =
            '<div class="text-danger">' +
            (data.error || "Erro desconhecido") +
            "</div>";
          stopPolling();
        } else {
          statusLabel.textContent = "Iniciando...";
          setBusy(true);
        }
      }

      function poll() {
        fetch(statusUrlBase.replace("PLACEHOLDER", taskId))
          .then((response) => response.json())
          .then(updateProgress)
          .catch(() => {});
      }

      function startPolling() {
        poll();
        polling = setInterval(poll, 2000);
      }

      btn.addEventListener("click", function () {
        setBusy(true);
        statusLabel.textContent = "Iniciando...";
        const formData = new FormData();
        if (operacao === "pessoas-ingressantes") {
          formData.append(
            "primeiro_ano",
            document.getElementById("primeiro_ano").value
          );
        } else if (operacao === "vinculos-censup") {
          formData.append("ano", document.getElementById("ano").value);
        }
        fetch(startUrl, {
          method: "POST",
          headers: { "X-CSRFToken": getCsrfToken() },
          body: formData,
        })
          .then((response) => response.json())
          .then((data) => {
            taskId = data.task_id;
            if (data.already_running) {
              statusLabel.textContent = "Ja em andamento - acompanhando...";
            }
            startPolling();
          });
      });

      if (taskId) {
        startPolling();
      }
    })();
  </script>
{% endblock %}