pngx-sync/app/templates/replicas.html

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

<div style="display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; margin-bottom:1.5rem;">
  <div>
    <h2 style="margin:0;">Replicas</h2>
    <small class="muted">Paperless-ngx instances that receive documents from the master.</small>
  </div>
</div>

{% if replicas %}
<div class="overflow-auto">
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>URL</th>
      <th>Status</th>
      <th>Interval</th>
      <th>Last Sync</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    {% for r in replicas %}
    <tr>
      <td><a href="/replicas/{{ r.id }}">{{ r.name }}</a></td>
      <td><small><code>{{ r.url }}</code></small></td>
      <td>
        {% if r.suspended_at %}
          <span class="badge badge-suspended">suspended</span>
          <br><small class="muted">{{ r.consecutive_failures }} failures</small>
        {% elif not r.enabled %}
          <span class="badge badge-pending">disabled</span>
        {% else %}
          <span class="badge badge-ok">enabled</span>
        {% endif %}
      </td>
      <td>
        {% if r.sync_interval_seconds %}{{ r.sync_interval_seconds }}s{% else %}<small class="muted">global</small>{% endif %}
      </td>
      <td>
        {% if r.last_sync_ts %}{{ r.last_sync_ts.strftime('%Y-%m-%d %H:%M') }} UTC{% else %}<small class="muted">never</small>{% endif %}
      </td>
      <td class="actions">
        <a href="/replicas/{{ r.id }}" role="button" class="secondary outline" style="padding:0.2em 0.6em; font-size:0.8em;">Detail</a>
        <button class="outline" style="padding:0.2em 0.6em; font-size:0.8em;"
          hx-post="/api/replicas/{{ r.id }}/test"
          hx-target="#test-result-{{ r.id }}"
          hx-swap="innerHTML">
          Test
        </button>
        {% if r.suspended_at %}
          <button class="contrast outline" style="padding:0.2em 0.6em; font-size:0.8em;"
            hx-post="/api/replicas/{{ r.id }}/unsuspend"
            hx-on::after-request="window.location.reload()">
            Re-enable
          </button>
        {% endif %}
        <button class="secondary outline" style="padding:0.2em 0.6em; font-size:0.8em;"
          onclick="openEditModal({{ r.id }}, '{{ r.name }}', '{{ r.url }}', {{ r.enabled|lower }}, {{ r.sync_interval_seconds or 'null' }})">
          Edit
        </button>
        <button class="contrast outline" style="padding:0.2em 0.6em; font-size:0.8em;"
          hx-delete="/api/replicas/{{ r.id }}"
          hx-confirm="Delete replica {{ r.name }}? This also removes its sync map."
          hx-on::after-request="window.location.reload()">
          Delete
        </button>
        <span id="test-result-{{ r.id }}" style="font-size:0.8em;"></span>
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>
</div>
{% else %}
<p class="muted" style="margin-bottom:1.5rem;">No replicas configured yet.</p>
{% endif %}

<hr style="margin:2rem 0;">

<h3 style="margin-bottom:0.25rem;">Add Replica</h3>
<p style="margin-top:0; margin-bottom:1.5rem;"><small class="muted">The controller will test the connection before saving.</small></p>

{% if env_replicas %}
<div style="margin-bottom:1.25rem; padding:0.75rem 1rem; background:var(--pico-card-background-color); border:1px solid var(--pico-muted-border-color); border-radius:var(--pico-border-radius);">
  <small style="font-weight:600; text-transform:uppercase; letter-spacing:0.05em; color:var(--pico-muted-color);">Detected in pngx.env — not yet added</small>
  <div style="display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:0.5rem;">
    {% for er in env_replicas %}
    {% set er_name = er.safe | lower | replace('_', '-') %}
    <button type="button" class="outline" style="font-size:0.85em; padding:0.3em 0.8em;"
      onclick="prefillAdd('{{ er_name }}', '{{ er.url }}', '{{ er.token }}')">
      + {{ er.safe }} <small style="opacity:0.6; margin-left:0.25em;">{{ er.url }}</small>
    </button>
    {% endfor %}
  </div>
</div>
{% endif %}

<div style="display:grid; grid-template-columns:1fr 360px; gap:2rem; align-items:start;">

  <!-- Add form -->
  <article style="margin:0; padding:1.5rem;">
    <form id="add-replica-form" onsubmit="submitAddReplica(event)">
      <div style="display:grid; grid-template-columns:1fr 1fr; gap:1rem;">
        <label>
          Display name
          <input type="text" name="name" required placeholder="e.g. berlin-office">
          <small class="muted">Short identifier shown in the dashboard.</small>
        </label>
        <label>
          Instance URL
          <input type="url" name="url" required placeholder="http://100.x.x.x:8000">
          <small class="muted">Must be reachable from this controller.</small>
        </label>
      </div>
      <div style="display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:0.5rem;">
        <label>
          API token
          <input type="password" name="api_token" required autocomplete="off">
          <small class="muted">From Paperless → Settings → API → Auth Tokens.</small>
        </label>
        <label>
          Sync interval
          <input type="number" name="sync_interval_seconds" placeholder="Leave blank to use global" min="60">
          <small class="muted">Seconds between syncs. Overrides the global setting.</small>
        </label>
      </div>
      <div style="margin-top:1rem;">
        <label style="display:flex; align-items:center; gap:0.5rem; cursor:pointer;">
          <input type="checkbox" name="enabled" checked style="margin:0;">
          Enable immediately after adding
        </label>
      </div>
      <div id="add-test-result" style="margin:0.75rem 0; min-height:1.5em;"></div>
      <button type="submit" style="margin-bottom:0;">Add Replica</button>
    </form>
  </article>

  <!-- Help sidebar -->
  <aside>
    <article style="margin:0; padding:1.25rem; background:var(--pico-card-sectionning-background-color);">
      <p style="margin:0 0 1rem; font-weight:600; font-size:0.95em;">Before you add a replica</p>

      <ol style="margin:0 0 1.25rem; padding-left:1.25rem; display:flex; flex-direction:column; gap:0.75rem;">
        <li>
          <strong>Verify reachability</strong><br>
          <small class="muted">The replica's URL must be reachable from this controller. On Tailscale, use the replica's Tailscale IP and port.</small>
        </li>
        <li>
          <strong>Generate an API token</strong><br>
          <small class="muted">In the replica's Paperless UI go to <strong>Settings → API → Auth Tokens</strong> and create a token for a superuser account.</small>
        </li>
        <li>
          <strong>Decide on sync interval</strong><br>
          <small class="muted">Leave blank to use the global interval (set in Settings). Override per-replica if this instance needs a different cadence.</small>
        </li>
      </ol>

      <hr style="margin:1rem 0;">

      <p style="margin:0 0 0.5rem; font-weight:600; font-size:0.9em;">Replica already has documents?</p>
      <p style="margin:0; font-size:0.875em; color:var(--pico-muted-color);">
        Add it normally — then open its <strong>Detail</strong> page and run
        <strong>Reconcile</strong> before the first sync. Reconcile matches
        existing documents to the master without re-uploading them, preventing
        duplicates.
      </p>
    </article>

    <article style="margin:0.75rem 0 0; padding:1rem 1.25rem; border-left:3px solid var(--pico-primary);">
      <p style="margin:0; font-size:0.875em;">
        <strong>What gets synced?</strong><br>
        <span class="muted">Documents, tags, correspondents, document types, and custom fields.
        The master always wins — replicas are read-only by convention.</span>
      </p>
    </article>
  </aside>

</div>

<!-- Edit modal -->
<dialog id="edit-modal">
  <article>
    <header>
      <h3 style="margin:0;">Edit Replica</h3>
    </header>
    <form id="edit-replica-form" onsubmit="submitEditReplica(event)">
      <input type="hidden" name="id">
      <label>Display name <input type="text" name="name" required></label>
      <label>Instance URL <input type="url" name="url" required></label>
      <label>
        API Token
        <input type="password" name="api_token" placeholder="Leave blank to keep current" autocomplete="off">
        <small class="muted">Only fill this if you want to update the token.</small>
      </label>
      <label>
        Sync interval (seconds)
        <input type="number" name="sync_interval_seconds" min="60" placeholder="Leave blank to use global">
      </label>
      <label style="display:flex; align-items:center; gap:0.5rem; cursor:pointer;">
        <input type="checkbox" name="enabled" style="margin:0;"> Enabled
      </label>
      <div id="edit-test-result" style="margin:0.5rem 0; min-height:1.5em;"></div>
      <footer style="display:flex; justify-content:flex-end; gap:0.5rem; padding:0; margin-top:1rem;">
        <button type="button" class="secondary outline" onclick="document.getElementById('edit-modal').close()">Cancel</button>
        <button type="submit">Save Changes</button>
      </footer>
    </form>
  </article>
</dialog>

<script>
function prefillAdd(name, url, token) {
  const form = document.getElementById('add-replica-form');
  form.querySelector('[name=name]').value = name;
  form.querySelector('[name=url]').value = url;
  if (token) form.querySelector('[name=api_token]').value = token;
  form.scrollIntoView({ behavior: 'smooth', block: 'start' });
}

async function submitAddReplica(e) {
  e.preventDefault();
  const form = e.target;
  const data = Object.fromEntries(new FormData(form));
  const body = {
    name: data.name, url: data.url, api_token: data.api_token,
    enabled: form.enabled.checked,
    sync_interval_seconds: data.sync_interval_seconds ? parseInt(data.sync_interval_seconds) : null
  };
  const resultEl = document.getElementById('add-test-result');
  const btn = form.querySelector('button[type=submit]');
  btn.setAttribute('aria-busy', 'true');
  btn.textContent = 'Testing connection…';
  const r = await fetch('/api/replicas', {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify(body)});
  const json = await r.json();
  btn.removeAttribute('aria-busy');
  btn.textContent = 'Add Replica';
  if (r.ok) {
    resultEl.innerHTML = '<span class="badge badge-ok">&#10003; Connected &mdash; ' + (json.doc_count || 0) + ' documents found. Saving&hellip;</span>';
    setTimeout(() => window.location.reload(), 900);
  } else {
    resultEl.innerHTML = '<span class="badge badge-error">&#10007; ' + (json.detail || 'Connection failed') + '</span>';
  }
}

function openEditModal(id, name, url, enabled, interval) {
  const form = document.getElementById('edit-replica-form');
  form.id_field = id;
  form.name.value = name;
  form.url.value = url;
  form.enabled.checked = enabled;
  form.sync_interval_seconds.value = interval || '';
  form.api_token.value = '';
  document.getElementById('edit-modal').showModal();
}

async function submitEditReplica(e) {
  e.preventDefault();
  const form = e.target;
  const id = form.id_field;
  const data = Object.fromEntries(new FormData(form));
  const body = {
    name: data.name, url: data.url,
    enabled: form.enabled.checked,
    sync_interval_seconds: data.sync_interval_seconds ? parseInt(data.sync_interval_seconds) : undefined
  };
  if (data.api_token) body.api_token = data.api_token;
  const resultEl = document.getElementById('edit-test-result');
  const btn = form.querySelector('button[type=submit]');
  btn.setAttribute('aria-busy', 'true');
  btn.textContent = 'Saving…';
  const r = await fetch('/api/replicas/' + id, {method:'PUT', headers:{'Content-Type':'application/json'}, body:JSON.stringify(body)});
  const json = await r.json();
  btn.removeAttribute('aria-busy');
  btn.textContent = 'Save Changes';
  if (r.ok) {
    resultEl.innerHTML = '<span class="badge badge-ok">&#10003; Saved</span>';
    setTimeout(() => window.location.reload(), 700);
  } else {
    resultEl.innerHTML = '<span class="badge badge-error">&#10007; ' + (json.detail || 'Error') + '</span>';
  }
}
</script>

{% endblock %}