303 lines
10 KiB
JavaScript
303 lines
10 KiB
JavaScript
// views/browser.js — file/folder listing with breadcrumbs, mkdir, upload, delete, rename.
|
|
|
|
import { post, uploadFile, downloadURL } from "../rc.js?v=security-fixes-1";
|
|
import { escapeHtml, toast, formatBytes, formatTime } from "../state.js?v=security-fixes-1";
|
|
import { t } from "../i18n.js?v=security-fixes-1";
|
|
|
|
export async function renderBrowse({ remote, path }) {
|
|
const app = document.getElementById("app");
|
|
if (!remote) {
|
|
app.innerHTML = `<div class="empty"><h3>${t("browser.no_remote_title")}</h3><p><a href="#/remotes">${t("browser.pick_remote")}</a> ${t("browser.no_remote_body")}</p></div>`;
|
|
return;
|
|
}
|
|
|
|
const fs = `${remote}:`;
|
|
|
|
app.innerHTML = `
|
|
<div class="section-head">
|
|
<div>
|
|
<h2>${escapeHtml(remote)}</h2>
|
|
<p class="subtitle">${escapeHtml(path || "(root)")}</p>
|
|
</div>
|
|
<div class="toolbar">
|
|
<input type="file" id="upload-input" multiple style="display:none">
|
|
<button class="btn btn-secondary btn-sm" data-action="mkdir">${t("browser.mkdir")}</button>
|
|
<button class="btn btn-secondary btn-sm" data-action="upload">${t("browser.upload")}</button>
|
|
</div>
|
|
</div>
|
|
<div id="breadcrumbs" class="breadcrumbs"></div>
|
|
<div id="browser-card" class="card-outline">
|
|
<p class="empty">${t("loading.title")}…</p>
|
|
</div>
|
|
`;
|
|
|
|
const breadcrumbsEl = document.getElementById("breadcrumbs");
|
|
renderBreadcrumbs(breadcrumbsEl, remote, path);
|
|
|
|
const card = document.getElementById("browser-card");
|
|
const fileInput = document.getElementById("upload-input");
|
|
|
|
await refreshListing(card, fs, path);
|
|
|
|
app.querySelector('[data-action="mkdir"]').addEventListener("click", () => {
|
|
openModal(
|
|
t("browser.mkdir_title"),
|
|
[
|
|
{ name: "name", label: t("browser.mkdir_field"), type: "text", placeholder: t("browser.mkdir_placeholder") },
|
|
],
|
|
async ({ name }) => {
|
|
if (!name) return;
|
|
const target = path ? `${path}/${name}` : name;
|
|
await post("operations/mkdir", { fs, remote: target });
|
|
toast(t("browser.mkdir_created", name), "success");
|
|
await refreshListing(card, fs, path);
|
|
},
|
|
).catch((e) => toast(`${t("browser.mkdir_failed")}: ${e.message}`, "error"));
|
|
});
|
|
|
|
app.querySelector('[data-action="upload"]').addEventListener("click", () => {
|
|
fileInput.value = "";
|
|
fileInput.click();
|
|
});
|
|
|
|
fileInput.addEventListener("change", async () => {
|
|
const files = Array.from(fileInput.files || []);
|
|
if (files.length === 0) return;
|
|
try {
|
|
await uploadFile(fs, path || "", files);
|
|
toast(t("browser.uploaded", files.length), "success");
|
|
await refreshListing(card, fs, path);
|
|
} catch (e) {
|
|
toast(`${t("browser.upload_failed")}: ${e.message}`, "error");
|
|
}
|
|
});
|
|
}
|
|
|
|
async function refreshListing(card, fs, path) {
|
|
if (!card) return;
|
|
card.innerHTML = `<p class="empty">${t("loading.title")}…</p>`;
|
|
try {
|
|
const res = await post("operations/list", {
|
|
fs,
|
|
remote: path || "",
|
|
opt: { noModTime: false, noMimeType: true, showHash: false },
|
|
});
|
|
const items = (res && res.list) || [];
|
|
renderTable(card, fs, path, items);
|
|
} catch (e) {
|
|
card.innerHTML = `<div class="empty"><h3>${t("error.couldnt_list")}</h3><p>${escapeHtml(e.message)}</p></div>`;
|
|
toast(`${t("browser.browse_failed")}: ${e.message}`, "error");
|
|
}
|
|
}
|
|
|
|
function renderBreadcrumbs(el, remote, path) {
|
|
const segments = (path || "").split("/").filter(Boolean);
|
|
let html = `<a href="#/remotes">${t("nav.remotes")}</a><span class="sep">/</span>`;
|
|
html += `<a href="#/browse/${encodeURIComponent(remote)}">${escapeHtml(remote)}</a>`;
|
|
let acc = "";
|
|
for (let i = 0; i < segments.length; i++) {
|
|
const seg = segments[i];
|
|
acc = acc ? `${acc}/${seg}` : seg;
|
|
const isLast = i === segments.length - 1;
|
|
html += `<span class="sep">/</span>`;
|
|
if (isLast) {
|
|
html += `<span class="current">${escapeHtml(seg)}</span>`;
|
|
} else {
|
|
html += `<a href="#/browse/${encodeURIComponent(remote)}/${acc.split("/").map(encodeURIComponent).join("/")}">${escapeHtml(seg)}</a>`;
|
|
}
|
|
}
|
|
el.innerHTML = html;
|
|
}
|
|
|
|
function renderTable(card, fs, path, items) {
|
|
if (!items || items.length === 0) {
|
|
card.innerHTML = `
|
|
<div class="empty">
|
|
<h3>${t("browser.empty_title")}</h3>
|
|
<p>${t("browser.empty_body")}</p>
|
|
</div>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
items.sort((a, b) => {
|
|
if (a.IsDir !== b.IsDir) return a.IsDir ? -1 : 1;
|
|
return a.Name.localeCompare(b.Name);
|
|
});
|
|
|
|
const parentHref = parentLink(fs, path);
|
|
const rows = items.map((item) => row(fs, path, item)).join("");
|
|
|
|
card.innerHTML = `
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>${t("browser.col.name")}</th>
|
|
<th class="col-num">${t("browser.col.size")}</th>
|
|
<th>${t("browser.col.modified")}</th>
|
|
<th class="col-num">${t("browser.col.actions")}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
${parentHref ? `<tr class="row-dir"><td class="col-name"><a href="${parentHref}">${t("browser.up")}</a></td><td></td><td></td><td></td></tr>` : ""}
|
|
${rows}
|
|
</tbody>
|
|
</table>
|
|
`;
|
|
|
|
card.querySelectorAll("[data-delete]").forEach((btn) => {
|
|
btn.addEventListener("click", () => onDelete(fs, path, btn.dataset.delete));
|
|
});
|
|
card.querySelectorAll("[data-rename]").forEach((btn) => {
|
|
btn.addEventListener("click", () => onRename(fs, path, btn.dataset.rename));
|
|
});
|
|
}
|
|
|
|
function row(fs, path, item) {
|
|
const itemPath = path ? `${path}/${item.Name}` : item.Name;
|
|
if (item.IsDir) {
|
|
const href = `#/browse/${fs.replace(/:$/, "")}/${itemPath.split("/").map(encodeURIComponent).join("/")}`;
|
|
return `
|
|
<tr class="row-dir">
|
|
<td class="col-name"><a href="${href}">${icon("dir")} ${escapeHtml(item.Name)}/</a></td>
|
|
<td class="col-num col-mono">—</td>
|
|
<td class="col-mono">${escapeHtml(formatTime(item.ModTime))}</td>
|
|
<td class="col-num"></td>
|
|
</tr>
|
|
`;
|
|
}
|
|
return `
|
|
<tr>
|
|
<td class="col-name">
|
|
<a href="${escapeAttr(downloadURL(fs, path, item.Name))}" download="${escapeAttr(item.Name)}">${icon("file")} ${escapeHtml(item.Name)}</a>
|
|
</td>
|
|
<td class="col-num col-mono">${escapeHtml(formatBytes(item.Size))}</td>
|
|
<td class="col-mono">${escapeHtml(formatTime(item.ModTime))}</td>
|
|
<td class="col-num">
|
|
<button class="btn btn-secondary btn-sm" data-rename="${escapeHtml(itemPath)}">${t("browser.rename")}</button>
|
|
<button class="btn btn-danger btn-sm" data-delete="${escapeHtml(itemPath)}">${t("browser.delete")}</button>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
}
|
|
|
|
function icon(kind) {
|
|
if (kind === "dir") {
|
|
return `<span style="display:inline-block;width:1em;color:var(--color-primary)">▸</span>`;
|
|
}
|
|
return `<span style="display:inline-block;width:1em;color:var(--color-muted-soft)">📄</span>`;
|
|
}
|
|
|
|
function parentLink(fs, path) {
|
|
if (!path) return "";
|
|
const segments = path.split("/").filter(Boolean);
|
|
segments.pop();
|
|
const parent = segments.join("/");
|
|
const remote = fs.replace(/:$/, "");
|
|
if (!parent) {
|
|
return `#/browse/${encodeURIComponent(remote)}`;
|
|
}
|
|
return `#/browse/${encodeURIComponent(remote)}/${parent.split("/").map(encodeURIComponent).join("/")}`;
|
|
}
|
|
|
|
async function onDelete(fs, path, itemPath) {
|
|
if (!confirm(t("browser.delete_confirm", itemPath))) return;
|
|
try {
|
|
await post("operations/deletefile", { fs, remote: itemPath });
|
|
toast(t("browser.deleted", itemPath), "success");
|
|
await refreshListing(document.getElementById("browser-card"), fs, path);
|
|
} catch (e) {
|
|
toast(`${t("browser.delete_file_failed")}: ${e.message}`, "error");
|
|
}
|
|
}
|
|
|
|
async function onRename(fs, path, itemPath) {
|
|
const segments = itemPath.split("/");
|
|
const oldName = segments.pop();
|
|
try {
|
|
await openModal(
|
|
t("browser.rename_title", oldName),
|
|
[{ name: "name", label: t("browser.rename_field"), type: "text", value: oldName }],
|
|
async ({ name }) => {
|
|
if (!name || name === oldName) return;
|
|
const dir = segments.join("/");
|
|
const dst = dir ? `${dir}/${name}` : name;
|
|
await post("operations/movefile", {
|
|
srcFs: fs,
|
|
srcRemote: itemPath,
|
|
dstFs: fs,
|
|
dstRemote: dst,
|
|
});
|
|
toast(t("browser.renamed", name), "success");
|
|
},
|
|
);
|
|
await refreshListing(document.getElementById("browser-card"), fs, path);
|
|
} catch (e) {
|
|
toast(`${t("browser.rename_failed")}: ${e.message}`, "error");
|
|
}
|
|
}
|
|
|
|
// --- Modal helper ---
|
|
export function openModal(title, fields, onSubmit) {
|
|
return new Promise((resolve) => {
|
|
const root = document.getElementById("modal-root");
|
|
const formHtml = fields
|
|
.map(
|
|
(f) => `
|
|
<div class="field">
|
|
<label>${escapeHtml(f.label)}</label>
|
|
<input class="input" name="${escapeHtml(f.name)}" type="${escapeHtml(f.type || "text")}" value="${escapeHtml(f.value || "")}" placeholder="${escapeHtml(f.placeholder || "")}">
|
|
</div>`,
|
|
)
|
|
.join("");
|
|
|
|
root.innerHTML = `
|
|
<div class="modal-overlay">
|
|
<form class="modal">
|
|
<h3>${escapeHtml(title)}</h3>
|
|
${formHtml}
|
|
<div class="modal-actions">
|
|
<button type="button" class="btn btn-secondary" data-cancel>${t("browser.modal.cancel")}</button>
|
|
<button type="submit" class="btn btn-primary">${t("browser.modal.ok")}</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
`;
|
|
|
|
const overlay = root.querySelector(".modal-overlay");
|
|
const form = root.querySelector("form");
|
|
|
|
const close = () => {
|
|
root.innerHTML = "";
|
|
};
|
|
|
|
overlay.addEventListener("click", (e) => {
|
|
if (e.target === overlay) close();
|
|
});
|
|
form.querySelector("[data-cancel]").addEventListener("click", () => {
|
|
close();
|
|
resolve(null);
|
|
});
|
|
form.addEventListener("submit", async (e) => {
|
|
e.preventDefault();
|
|
const data = {};
|
|
for (const f of fields) {
|
|
data[f.name] = form.elements[f.name].value;
|
|
}
|
|
try {
|
|
await onSubmit(data);
|
|
close();
|
|
resolve(data);
|
|
} catch (err) {
|
|
toast(err.message, "error");
|
|
}
|
|
});
|
|
const first = form.elements[fields[0].name];
|
|
if (first) first.focus();
|
|
});
|
|
}
|
|
|
|
function escapeAttr(s) {
|
|
return escapeHtml(s);
|
|
}
|