pngx-sync/app/templates/dashboard.html

{% extends "base.html" %}
{% block title %}Dashboard — pngx-controller{% endblock %}
{% block content %}

<div style="display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; margin-bottom:1rem;">
  <h2 style="margin:0;">Dashboard</h2>
  <div style="display:flex; gap:0.5rem; align-items:center;">
    <button id="sync-btn"
      hx-post="/api/sync"
      hx-swap="none"
      hx-on::after-request="startPolling()"
      class="{% if progress.running %}secondary{% endif %}">
      {% if progress.running %}Syncing…{% else %}⟳ Sync Now{% endif %}
    </button>
  </div>
</div>

<!-- Progress bar -->
<div id="progress-bar" class="{% if progress.running %}active{% endif %}"
     hx-get="/api/sync/running"
     hx-trigger="every 2s"
     hx-target="#progress-inner"
     hx-swap="innerHTML">
  <article style="padding:0.75rem;">
    <div id="progress-inner">
      {% if progress.running %}
        <strong>{{ progress.phase }}</strong>
        {% if progress.docs_total > 0 %}
          — {{ progress.docs_done }} / {{ progress.docs_total }} documents
          <progress value="{{ progress.docs_done }}" max="{{ progress.docs_total }}"></progress>
        {% else %}
          <progress></progress>
        {% endif %}
      {% endif %}
    </div>
  </article>
</div>

<!-- Last sync summary -->
{% if last_run %}
<details>
  <summary>
    Last sync run:
    {% if last_run.finished_at %}
      finished {{ last_run.finished_at.strftime('%Y-%m-%d %H:%M:%S') }} UTC
      &mdash; {{ last_run.docs_synced }} synced, {{ last_run.docs_failed }} failed
      {% if last_run.timed_out %}<span class="badge badge-error">timed out</span>{% endif %}
    {% else %}
      running…
    {% endif %}
  </summary>
  <p>Triggered by: <code>{{ last_run.triggered_by }}</code> &mdash; Run #{{ last_run.id }}</p>
</details>
{% endif %}

<!-- Replica table -->
<h3>Replicas</h3>
{% if replica_rows %}
<div class="overflow-auto">
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>URL</th>
      <th>Status</th>
      <th>Lag</th>
      <th>Last run</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    {% for row in replica_rows %}
    <tr>
      <td><a href="/replicas/{{ row.replica.id }}">{{ row.replica.name }}</a></td>
      <td><small>{{ row.replica.url }}</small></td>
      <td>
        <span class="badge badge-{{ row.status }}">{{ row.status }}</span>
        {% if row.replica.suspended_at %}
          <br><small class="muted">{{ row.replica.consecutive_failures }} failures</small>
        {% endif %}
      </td>
      <td>{{ row.lag }}</td>
      <td>
        {% if row.last_run %}
          <small>
            ✓ {{ row.last_run.docs_synced }}
            {% if row.last_run.docs_failed %} · ✗ <a href="/logs?replica_id={{ row.replica.id }}">{{ row.last_run.docs_failed }}</a>{% endif %}
          </small>
        {% else %}
          <small class="muted">never</small>
        {% endif %}
      </td>
      <td class="actions">
        <a href="/replicas/{{ row.replica.id }}" role="button" class="secondary outline" style="padding:0.2em 0.6em; font-size:0.8em;">Details</a>
        {% if row.replica.suspended_at %}
          <button class="contrast outline" style="padding:0.2em 0.6em; font-size:0.8em;"
            hx-post="/api/replicas/{{ row.replica.id }}/unsuspend"
            hx-on::after-request="window.location.reload()">
            Re-enable
          </button>
        {% endif %}
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>
</div>
{% else %}
<p>No replicas configured. <a href="/replicas">Add one →</a></p>
{% endif %}

<script>
function startPolling() {
  document.getElementById('progress-bar').classList.add('active');
  document.getElementById('sync-btn').textContent = 'Syncing…';
  document.getElementById('sync-btn').setAttribute('disabled', true);
  // polling is driven by hx-trigger="every 2s" on the progress bar
  // stop when running=false
}

// Watch progress updates to hide bar when done
document.body.addEventListener('htmx:afterSettle', function(evt) {
  if (evt.detail.target && evt.detail.target.id === 'progress-inner') {
    // Re-read progress via a quick fetch
    fetch('/api/sync/running').then(r => r.json()).then(data => {
      if (!data.running) {
        document.getElementById('progress-bar').classList.remove('active');
        document.getElementById('sync-btn').textContent = '⟳ Sync Now';
        document.getElementById('sync-btn').removeAttribute('disabled');
      }
    });
  }
});
</script>

{% endblock %}