{% extends "base.html" %} {% block content %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Workers Dashboard</title>

    <script>
      let autoRefreshEnabled = true;
      let autoRefreshInterval = null;
      const protocol = "{{ protocol }}";
      const host = window.location.host;
      const prefix = "{{ prefix }}";
      const baseurl = protocol + "://" + host + prefix;

      function showNotification(message) {
        const notification = document.createElement("div");
        notification.className = "notification";
        notification.textContent = message;

        document.body.appendChild(notification);

        setTimeout(() => {
          document.body.removeChild(notification);
        }, 3000);
      }

      function showErrorNotification(message) {
        const notification = document.createElement("div");
        notification.className = "error-notification";
        notification.textContent = message;

        document.body.appendChild(notification);

        setTimeout(() => {
          document.body.removeChild(notification);
        }, 3000);
      }

      function toggleAutorefresh() {
        autoRefreshEnabled = !autoRefreshEnabled;
        if (autoRefreshEnabled) {
          autoRefreshInterval = setInterval(updateData, 5000);
          showNotification("Autorefresh enabled");
        } else {
          clearInterval(autoRefreshInterval);
          showNotification("Autorefresh disabled");
        }
      }

      $(document).ready(function () {
        $("#autorefresh-switch").on("change", function () {
          toggleAutorefresh();
        });

        autoRefreshEnabled = $("#autorefresh-switch").is(":checked");
        if (autoRefreshEnabled) {
          autoRefreshInterval = setInterval(updateData, 5000);
        }
      });

      function updateData() {
        if (autoRefreshEnabled) {
          $.ajax({
            url: baseurl + "/workers/json",
            type: "GET",
            dataType: "json",
            success: function (data) {
              updateTable(data);
            },
            error: function (error) {
              console.error("Error fetching data: ", error);
              showErrorNotification("Error fetching workers data");
            },
          });
        }
      }

      function updateTable(data) {
        var tableBody = $("#workers tbody");
        tableBody.empty();

        $.each(data, function (index, worker) {
          var row = $("<tr>");
          row.append($("<td>").text(worker.name));
          if (worker.current_job !== "Idle") {
            var jobLink = $("<a>")
              .attr("href", baseurl + "/jobs/" + worker.current_job_id)
              .text(worker.current_job);
            row.append($("<td>").append(jobLink));
          } else {
            row.append($("<td>").text(worker.current_job));
          }

          var queuesCell = $("<td>");
          $.each(worker.queues, function (queueIndex, queue) {
            queuesCell.append(queue);
            if (queueIndex < worker.queues.length - 1) {
              queuesCell.append(", ");
            }
          });
          row.append(queuesCell);
          row.append($("<td>").text(worker.successful_job_count));
          row.append($("<td>").text(worker.failed_job_count));

          tableBody.append(row);
        });
      }

      if (autoRefreshEnabled) {
        setInterval(updateData, 5000);
      }
    </script>
  </head>

  <body>
    <div class="h2-section">
      <h2>Workers</h2>
      <div class="custom-switch">
        <input
          type="checkbox"
          class="custom-control-input"
          id="autorefresh-switch"
          checked
        />
        <label class="custom-control-label"> Autorefresh </label>
      </div>
    </div>
    <div class="section">
      <table id="workers">
        <thead>
          <tr>
            <th>Name</th>
            <th>Current Job</th>
            <th>Queues</th>
            <th>Successful jobs</th>
            <th>Failed jobs</th>
          </tr>
        </thead>
        <tbody>
          {% for worker in worker_data %}
          <tr>
            <td>{{ worker.name }}</td>
            <td>
              {% if worker.current_job != 'Idle' %}
              <a href="{{baseurl}}/job/{{ worker.current_job_id }}"
                >{{ worker.current_job }}</a
              >
              {% else %} {{ worker.current_job }} {% endif %}
            </td>
            <td>
              {% for queue_name in worker.queues %} {{ queue_name }} {% if not
              loop.last %}, {% endif %} {% endfor %}
            </td>
            {% for queue_name in worker.queues %} {{ queue_name }}
            <td>
              <a
                href="{{baseurl}}/jobs/?state=successful&queue_name={{queue_name}}"
              >
                {{ worker.successful_job_count }}
              </a>
            </td>
            <td>
              <a href="{{baseurl}}/jobs/?state=failed&queue_name={{queue_name}}"
                >{{ worker.failed_job_count }}</a
              >
            </td>
            {% endfor %}
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </body>
</html>
{% endblock %}
