kodi
469 lines
13 KiB
JavaScript
469 lines
13 KiB
JavaScript
let state = {
|
|
panes: {
|
|
left: {
|
|
currentPath: "storage1",
|
|
showHidden: false,
|
|
selectedItem: null,
|
|
selectedItems: [],
|
|
},
|
|
right: {
|
|
currentPath: "storage1",
|
|
showHidden: false,
|
|
selectedItem: null,
|
|
selectedItems: [],
|
|
},
|
|
},
|
|
activePane: "left",
|
|
selectedTaskId: null,
|
|
};
|
|
|
|
function paneState(pane) {
|
|
return state.panes[pane];
|
|
}
|
|
|
|
function otherPane(pane) {
|
|
return pane === "left" ? "right" : "left";
|
|
}
|
|
|
|
function activePaneState() {
|
|
return paneState(state.activePane);
|
|
}
|
|
|
|
function setStatus(msg) {
|
|
document.getElementById("status").textContent = msg;
|
|
}
|
|
|
|
function setError(id, msg) {
|
|
document.getElementById(id).textContent = msg || "";
|
|
}
|
|
|
|
function setActionError(action, err) {
|
|
setError("actions-error", `${action}: ${err.message}`);
|
|
}
|
|
|
|
async function apiRequest(method, url, body) {
|
|
const options = { method, headers: {} };
|
|
if (body !== undefined) {
|
|
options.headers["Content-Type"] = "application/json";
|
|
options.body = JSON.stringify(body);
|
|
}
|
|
const response = await fetch(url, options);
|
|
const data = await response.json().catch(() => ({}));
|
|
if (!response.ok) {
|
|
const error = data.error || {};
|
|
throw new Error(error.message || `HTTP ${response.status}`);
|
|
}
|
|
return data;
|
|
}
|
|
|
|
function createButton(text, onClick) {
|
|
const button = document.createElement("button");
|
|
button.textContent = text;
|
|
button.onclick = onClick;
|
|
return button;
|
|
}
|
|
|
|
function setActivePane(pane) {
|
|
state.activePane = pane;
|
|
document.getElementById("active-pane-label").textContent = pane;
|
|
document.getElementById("left-pane").classList.toggle("active-pane", pane === "left");
|
|
document.getElementById("right-pane").classList.toggle("active-pane", pane === "right");
|
|
updateActionButtons();
|
|
}
|
|
|
|
function setSelectedItem(pane, item) {
|
|
const model = paneState(pane);
|
|
model.selectedItem = item;
|
|
model.selectedItems = item ? [item] : [];
|
|
updateActionButtons();
|
|
}
|
|
|
|
function selectedPaths(pane) {
|
|
return paneState(pane).selectedItems.map((item) => item.path);
|
|
}
|
|
|
|
function setSingleSelection(pane, item) {
|
|
setSelectedItem(pane, item);
|
|
}
|
|
|
|
function toggleSelection(pane, item) {
|
|
const model = paneState(pane);
|
|
const index = model.selectedItems.findIndex((selected) => selected.path === item.path);
|
|
if (index >= 0) {
|
|
const removed = model.selectedItems[index];
|
|
model.selectedItems.splice(index, 1);
|
|
if (model.selectedItem && model.selectedItem.path === removed.path) {
|
|
model.selectedItem = model.selectedItems.length > 0 ? model.selectedItems[model.selectedItems.length - 1] : null;
|
|
}
|
|
} else {
|
|
model.selectedItems.push(item);
|
|
model.selectedItem = item;
|
|
}
|
|
updateActionButtons();
|
|
}
|
|
|
|
function updateActionButtons() {
|
|
const selected = activePaneState().selectedItem;
|
|
const hasSelection = Boolean(selected);
|
|
const isFile = hasSelection && selected.kind === "file";
|
|
document.getElementById("rename-btn").disabled = !hasSelection;
|
|
document.getElementById("delete-btn").disabled = !hasSelection;
|
|
document.getElementById("copy-btn").disabled = !isFile;
|
|
document.getElementById("move-btn").disabled = !isFile;
|
|
}
|
|
|
|
function currentParentPath(path) {
|
|
if (!path.includes("/")) {
|
|
return null;
|
|
}
|
|
const segments = path.split("/");
|
|
if (segments.length === 2) {
|
|
return segments[0];
|
|
}
|
|
return segments.slice(0, -1).join("/");
|
|
}
|
|
|
|
function renderBreadcrumbs(pane, path) {
|
|
const nav = document.getElementById(`${pane}-breadcrumbs`);
|
|
nav.innerHTML = "";
|
|
const parts = path.split("/");
|
|
let aggregate = "";
|
|
for (let i = 0; i < parts.length; i += 1) {
|
|
aggregate = i === 0 ? parts[i] : `${aggregate}/${parts[i]}`;
|
|
const crumb = createButton(parts[i], () => {
|
|
setActivePane(pane);
|
|
navigateTo(pane, aggregate);
|
|
});
|
|
crumb.type = "button";
|
|
crumb.onclick = (ev) => {
|
|
ev.preventDefault();
|
|
ev.stopPropagation();
|
|
setActivePane(pane);
|
|
navigateTo(pane, aggregate);
|
|
};
|
|
nav.append(crumb);
|
|
if (i < parts.length - 1) {
|
|
const sep = document.createElement("span");
|
|
sep.textContent = "/";
|
|
nav.append(sep);
|
|
}
|
|
}
|
|
}
|
|
|
|
function formatModified(isoString) {
|
|
if (!isoString) {
|
|
return "-";
|
|
}
|
|
const d = new Date(isoString);
|
|
if (Number.isNaN(d.getTime())) {
|
|
return isoString;
|
|
}
|
|
const date = d.toLocaleDateString(undefined, { year: "2-digit", month: "2-digit", day: "2-digit" });
|
|
const time = d.toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" });
|
|
return `${date} ${time}`;
|
|
}
|
|
|
|
function createBrowseItem(pane, entry, kind) {
|
|
const li = document.createElement("li");
|
|
li.className = "selectable";
|
|
const paths = selectedPaths(pane);
|
|
if (paths.includes(entry.path)) {
|
|
li.classList.add("is-selected");
|
|
}
|
|
|
|
li.onclick = () => {
|
|
setActivePane(pane);
|
|
setSingleSelection(pane, { path: entry.path, name: entry.name, kind });
|
|
loadBrowsePane(pane);
|
|
};
|
|
|
|
const marker = document.createElement("input");
|
|
marker.type = "checkbox";
|
|
marker.className = "select-marker";
|
|
marker.checked = paths.includes(entry.path);
|
|
marker.onclick = (ev) => {
|
|
ev.stopPropagation();
|
|
setActivePane(pane);
|
|
toggleSelection(pane, { path: entry.path, name: entry.name, kind });
|
|
loadBrowsePane(pane);
|
|
};
|
|
li.append(marker);
|
|
|
|
const name = document.createElement("span");
|
|
name.className = `entry-name ${kind === "directory" ? "entry-dir" : "entry-file"}`;
|
|
|
|
if (kind === "directory") {
|
|
const open = document.createElement("button");
|
|
open.className = "dir-link";
|
|
open.textContent = `${entry.name}/`;
|
|
open.type = "button";
|
|
open.onclick = (ev) => {
|
|
ev.stopPropagation();
|
|
setActivePane(pane);
|
|
navigateTo(pane, entry.path);
|
|
};
|
|
name.append(open);
|
|
} else {
|
|
const fileName = document.createElement("span");
|
|
fileName.textContent = entry.name;
|
|
fileName.onclick = (ev) => {
|
|
ev.stopPropagation();
|
|
setActivePane(pane);
|
|
setSingleSelection(pane, { path: entry.path, name: entry.name, kind });
|
|
loadBrowsePane(pane);
|
|
};
|
|
name.append(fileName);
|
|
}
|
|
li.append(name);
|
|
|
|
const size = document.createElement("span");
|
|
size.className = "entry-size";
|
|
size.textContent = kind === "directory" ? "-" : String(entry.size);
|
|
li.append(size);
|
|
|
|
const modified = document.createElement("span");
|
|
modified.className = "entry-modified";
|
|
modified.textContent = formatModified(entry.modified);
|
|
li.append(modified);
|
|
return li;
|
|
}
|
|
|
|
async function loadBrowsePane(pane) {
|
|
setError(`${pane}-browse-error`, "");
|
|
try {
|
|
const model = paneState(pane);
|
|
const query = new URLSearchParams({
|
|
path: model.currentPath,
|
|
show_hidden: String(model.showHidden),
|
|
});
|
|
const data = await apiRequest("GET", `/api/browse?${query.toString()}`);
|
|
model.currentPath = data.path;
|
|
document.getElementById(`${pane}-current-path`).textContent = data.path;
|
|
renderBreadcrumbs(pane, data.path);
|
|
|
|
const items = document.getElementById(`${pane}-items`);
|
|
items.innerHTML = "";
|
|
|
|
const parent = currentParentPath(data.path);
|
|
if (parent) {
|
|
const up = document.createElement("li");
|
|
up.className = "selectable";
|
|
up.append(document.createElement("span"));
|
|
const upName = document.createElement("button");
|
|
upName.type = "button";
|
|
upName.className = "dir-link";
|
|
upName.textContent = "../";
|
|
upName.onclick = () => navigateTo(pane, parent);
|
|
const upNameCell = document.createElement("span");
|
|
upNameCell.className = "entry-name entry-dir";
|
|
upNameCell.append(upName);
|
|
up.append(upNameCell);
|
|
const upSize = document.createElement("span");
|
|
upSize.className = "entry-size";
|
|
upSize.textContent = "-";
|
|
up.append(upSize);
|
|
const upModified = document.createElement("span");
|
|
upModified.className = "entry-modified";
|
|
upModified.textContent = "-";
|
|
up.append(upModified);
|
|
items.append(up);
|
|
}
|
|
|
|
const visiblePaths = new Set();
|
|
for (const entry of data.directories) {
|
|
visiblePaths.add(entry.path);
|
|
items.append(createBrowseItem(pane, entry, "directory"));
|
|
}
|
|
for (const entry of data.files) {
|
|
visiblePaths.add(entry.path);
|
|
items.append(createBrowseItem(pane, entry, "file"));
|
|
}
|
|
|
|
model.selectedItems = model.selectedItems.filter((item) => visiblePaths.has(item.path));
|
|
if (model.selectedItem && !visiblePaths.has(model.selectedItem.path)) {
|
|
model.selectedItem = model.selectedItems.length > 0 ? model.selectedItems[model.selectedItems.length - 1] : null;
|
|
}
|
|
updateActionButtons();
|
|
setStatus(`Loaded ${pane}: ${data.path}`);
|
|
} catch (err) {
|
|
setError(`${pane}-browse-error`, `Browse: ${err.message}`);
|
|
}
|
|
}
|
|
|
|
function navigateTo(pane, path) {
|
|
paneState(pane).currentPath = path;
|
|
setSelectedItem(pane, null);
|
|
loadBrowsePane(pane);
|
|
}
|
|
|
|
async function createFolderForPane(pane) {
|
|
setActivePane(pane);
|
|
const name = window.prompt("Folder name");
|
|
if (!name) {
|
|
return;
|
|
}
|
|
setError(`${pane}-browse-error`, "");
|
|
try {
|
|
await apiRequest("POST", "/api/files/mkdir", {
|
|
parent_path: paneState(pane).currentPath,
|
|
name,
|
|
});
|
|
await loadBrowsePane(pane);
|
|
} catch (err) {
|
|
setError(`${pane}-browse-error`, `Create folder: ${err.message}`);
|
|
}
|
|
}
|
|
|
|
async function createFolderForActivePane() {
|
|
await createFolderForPane(state.activePane);
|
|
}
|
|
|
|
async function renameSelected() {
|
|
const pane = state.activePane;
|
|
const selected = paneState(pane).selectedItem;
|
|
if (!selected) {
|
|
return;
|
|
}
|
|
const newName = window.prompt("New name", selected.name);
|
|
if (!newName) {
|
|
return;
|
|
}
|
|
setError("actions-error", "");
|
|
try {
|
|
await apiRequest("POST", "/api/files/rename", {
|
|
path: selected.path,
|
|
new_name: newName,
|
|
});
|
|
setSelectedItem(pane, null);
|
|
await loadBrowsePane(pane);
|
|
} catch (err) {
|
|
setActionError("Rename", err);
|
|
}
|
|
}
|
|
|
|
async function deleteSelected() {
|
|
const pane = state.activePane;
|
|
const selected = paneState(pane).selectedItem;
|
|
if (!selected) {
|
|
return;
|
|
}
|
|
if (!window.confirm(`Delete ${selected.path}?`)) {
|
|
return;
|
|
}
|
|
setError("actions-error", "");
|
|
try {
|
|
await apiRequest("POST", "/api/files/delete", { path: selected.path });
|
|
setSelectedItem(pane, null);
|
|
await loadBrowsePane(pane);
|
|
} catch (err) {
|
|
setActionError("Delete", err);
|
|
}
|
|
}
|
|
|
|
function defaultDestination(sourcePath, targetBasePath) {
|
|
const sourceName = sourcePath.slice(sourcePath.lastIndexOf("/") + 1);
|
|
return `${targetBasePath}/${sourceName}`;
|
|
}
|
|
|
|
async function startCopySelected() {
|
|
const sourcePane = state.activePane;
|
|
const destinationPane = otherPane(sourcePane);
|
|
const selected = paneState(sourcePane).selectedItem;
|
|
if (!selected || selected.kind !== "file") {
|
|
return;
|
|
}
|
|
const destination = window.prompt(
|
|
"Copy destination (full path)",
|
|
defaultDestination(selected.path, paneState(destinationPane).currentPath),
|
|
);
|
|
if (!destination) {
|
|
return;
|
|
}
|
|
setError("actions-error", "");
|
|
try {
|
|
const result = await apiRequest("POST", "/api/files/copy", {
|
|
source: selected.path,
|
|
destination,
|
|
});
|
|
state.selectedTaskId = result.task_id;
|
|
setStatus(`Copy task queued: ${result.task_id}`);
|
|
await Promise.all([loadBrowsePane("left"), loadBrowsePane("right")]);
|
|
} catch (err) {
|
|
setActionError("Copy", err);
|
|
}
|
|
}
|
|
|
|
async function startMoveSelected() {
|
|
const sourcePane = state.activePane;
|
|
const destinationPane = otherPane(sourcePane);
|
|
const selected = paneState(sourcePane).selectedItem;
|
|
if (!selected || selected.kind !== "file") {
|
|
return;
|
|
}
|
|
const destination = window.prompt(
|
|
"Move destination (full path)",
|
|
defaultDestination(selected.path, paneState(destinationPane).currentPath),
|
|
);
|
|
if (!destination) {
|
|
return;
|
|
}
|
|
setError("actions-error", "");
|
|
try {
|
|
const result = await apiRequest("POST", "/api/files/move", {
|
|
source: selected.path,
|
|
destination,
|
|
});
|
|
state.selectedTaskId = result.task_id;
|
|
setSelectedItem(sourcePane, null);
|
|
setStatus(`Move task queued: ${result.task_id}`);
|
|
await Promise.all([loadBrowsePane("left"), loadBrowsePane("right")]);
|
|
} catch (err) {
|
|
setActionError("Move", err);
|
|
}
|
|
}
|
|
|
|
async function addBookmark() {
|
|
const pane = state.activePane;
|
|
const path = paneState(pane).currentPath;
|
|
const label = window.prompt("Bookmark label", path);
|
|
if (!label) {
|
|
return;
|
|
}
|
|
setError("actions-error", "");
|
|
try {
|
|
await apiRequest("POST", "/api/bookmarks", { path, label });
|
|
setStatus(`Bookmark added for ${path}`);
|
|
} catch (err) {
|
|
setActionError("Add bookmark", err);
|
|
}
|
|
}
|
|
|
|
function setupPaneEvents(pane) {
|
|
document.getElementById(`${pane}-pane`).onclick = () => setActivePane(pane);
|
|
document.getElementById(`${pane}-hidden-toggle`).onchange = (ev) => {
|
|
setActivePane(pane);
|
|
paneState(pane).showHidden = ev.target.checked;
|
|
loadBrowsePane(pane);
|
|
};
|
|
}
|
|
|
|
function setupEvents() {
|
|
setupPaneEvents("left");
|
|
setupPaneEvents("right");
|
|
document.getElementById("rename-btn").onclick = renameSelected;
|
|
document.getElementById("delete-btn").onclick = deleteSelected;
|
|
document.getElementById("copy-btn").onclick = startCopySelected;
|
|
document.getElementById("move-btn").onclick = startMoveSelected;
|
|
document.getElementById("mkdir-btn").onclick = createFolderForActivePane;
|
|
document.getElementById("add-bookmark-btn").onclick = addBookmark;
|
|
}
|
|
|
|
async function init() {
|
|
setError("actions-error", "");
|
|
setActivePane("left");
|
|
setupEvents();
|
|
await Promise.all([loadBrowsePane("left"), loadBrowsePane("right")]);
|
|
}
|
|
|
|
init();
|