upload volledige repo
This commit is contained in:
kodi
@@ -0,0 +1,468 @@
|
||||
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();
|
||||
Reference in New Issue
Block a user