rclone_gui/webgui/web/assets/js/views/remotes.js

// views/remotes.js — connector-tile grid of configured remotes with CRUD.

import { post } from "../rc.js";
import { getState, setState, toast } from "../state.js";

export async function renderRemotes() {
  const app = document.getElementById("app");
  if (!app) return;

  app.innerHTML = `
    <div class="section-head">
      <div>
        <h2>Remotes</h2>
        <p class="subtitle">Configured cloud storage providers. Click a tile to browse, hover for edit/delete.</p>
      </div>
      <a class="btn btn-primary btn-sm" href="#/configure/new">New remote</a>
    </div>
    <div id="remote-grid" class="connector-grid">
      <p class="empty" style="grid-column:1/-1">Loading remotes…</p>
    </div>
  `;

  const grid = document.getElementById("remote-grid");

  try {
    const [listRes, dumpRes] = await Promise.all([
      post("config/listremotes"),
      post("config/dump"),
    ]);
    const names = (listRes && listRes.remotes) || [];
    const dump = dumpRes || {};
    const remotes = names.map((name) => ({
      name,
      type: (dump[name] && dump[name].type) || "unknown",
    }));

    setState({ remotes });

    if (remotes.length === 0) {
      grid.innerHTML = `
        <div class="empty" style="grid-column:1/-1">
          <h3>No remotes configured</h3>
          <p>Click <strong>New remote</strong> above to add one from this GUI.</p>
        </div>
      `;
      return;
    }

    grid.innerHTML = remotes
      .map(
        (r) => `
        <a class="connector-tile tile-with-actions" href="#/browse/${encodeURIComponent(r.name)}">
          <span class="tile-name">${escapeHtml(r.name)}</span>
          <span class="badge">${escapeHtml(r.type)}</span>
          <div class="tile-actions">
            <button type="button" title="Edit" data-edit="${escapeHtml(r.name)}">✎</button>
            <button type="button" title="Delete" class="danger" data-delete="${escapeHtml(r.name)}">🗑</button>
          </div>
        </a>
      `,
      )
      .join("");

    // Wire action buttons
    grid.querySelectorAll("[data-edit]").forEach((btn) => {
      btn.addEventListener("click", (e) => {
        e.preventDefault();
        e.stopPropagation();
        location.hash = `#/configure/edit/${encodeURIComponent(btn.dataset.edit)}`;
      });
    });
    grid.querySelectorAll("[data-delete]").forEach((btn) => {
      btn.addEventListener("click", async (e) => {
        e.preventDefault();
        e.stopPropagation();
        const name = btn.dataset.delete;
        if (!confirm(`Delete remote ${name}? This cannot be undone.`)) return;
        try {
          await post("config/delete", { name });
          toast(`Deleted ${name}`, "success");
          await renderRemotes();
        } catch (err) {
          toast(`Delete failed: ${err.message}`, "error");
        }
      });
    });
  } catch (e) {
    grid.innerHTML = `
      <div class="empty" style="grid-column:1/-1">
        <h3>Couldn’t reach rclone</h3>
        <p>${escapeHtml(e.message)}</p>
      </div>
    `;
    toast(`Failed to load remotes: ${e.message}`, "error");
  }
}

function escapeHtml(s) {
  return String(s)
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#39;");
}