ui rehaul
This commit is contained in:
Ludwig Lehnert
+18
-53
@@ -1,6 +1,6 @@
|
||||
"use strict";
|
||||
|
||||
const state = { session: null, timer: null, groups: null, storage: null, activity: null };
|
||||
const state = { session: null, timer: null, storage: null, activity: null };
|
||||
const loginView = document.querySelector("#login-view");
|
||||
const appView = document.querySelector("#app-view");
|
||||
const content = document.querySelector("#content");
|
||||
@@ -8,6 +8,13 @@ const nav = document.querySelector("#navigation");
|
||||
const toast = document.querySelector("#toast");
|
||||
|
||||
const esc = value => String(value ?? "").replace(/[&<>'"]/g, char => ({"&":"&","<":"<",">":">","'":"'",'"':"""}[char]));
|
||||
function actionIcon(action) {
|
||||
const paths = {
|
||||
download: '<path d="M12 3v12m-5-5 5 5 5-5"/><path d="M5 16v4h14v-4"/>',
|
||||
restore: '<path d="M3 11a9 9 0 1 1 2.6 7"/><path d="M3 4v7h7"/>',
|
||||
};
|
||||
return `<svg class="action-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">${paths[action]}</svg>`;
|
||||
}
|
||||
const bytes = value => {
|
||||
let number = Number(value || 0);
|
||||
const units = ["B", "kB", "MB", "GB", "TB", "PB"];
|
||||
@@ -25,7 +32,6 @@ const utcTime = value => {
|
||||
return `${pad(date.getUTCDate())}.${pad(date.getUTCMonth() + 1)}.${date.getUTCFullYear()} ${pad(date.getUTCHours())}:${pad(date.getUTCMinutes())}:${pad(date.getUTCSeconds())} UTC`;
|
||||
};
|
||||
const actionLabel = value => ({read: "Lesen", write: "Schreiben", move: "Umbenennen", delete: "Löschen"}[value] || value || "—");
|
||||
const nodeTypeLabel = value => ({group: "Gruppe", user: "Benutzer", computer: "Computer", unknown: "Unbekannt"}[value] || value);
|
||||
const backupStateLabel = value => ({starting: "Startet", running: "Läuft", completed: "Abgeschlossen", failed: "Fehlgeschlagen", waiting: "Wartet", disabled: "Deaktiviert"}[value] || value || "Unbekannt");
|
||||
function backupMessage(data) {
|
||||
const message = String(data.message || "");
|
||||
@@ -103,7 +109,6 @@ function routeFor(path) {
|
||||
if (path.startsWith("/storage/data")) return "storage-data";
|
||||
if (path.startsWith("/storage/users")) return "storage-users";
|
||||
if (path.startsWith("/access")) return "access";
|
||||
if (path.startsWith("/shares")) return "shares";
|
||||
if (path.startsWith("/reconciliation")) return "reconciliation";
|
||||
if (path.startsWith("/activity/fslogix")) return "activity-fslogix";
|
||||
if (path.startsWith("/activity")) return "activity";
|
||||
@@ -119,6 +124,7 @@ async function navigate(path, replace = false) {
|
||||
if (replace && state.currentPath) history.replaceState({}, "", state.currentPath);
|
||||
return;
|
||||
}
|
||||
if (path === "/shares" || path.startsWith("/shares/")) { path = "/access"; replace = true; }
|
||||
state.accessDirty = false;
|
||||
state.currentPath = path;
|
||||
clearInterval(state.timer);
|
||||
@@ -130,7 +136,6 @@ async function navigate(path, replace = false) {
|
||||
setLoading();
|
||||
try {
|
||||
if (route === "overview") await renderOverview();
|
||||
if (route === "shares") await renderShares();
|
||||
if (route === "access") await renderAccess();
|
||||
if (route === "reconciliation") await renderReconciliation();
|
||||
if (route === "storage-data") await renderStorage("data");
|
||||
@@ -193,46 +198,6 @@ function usageTable(rows, type) {
|
||||
}).join("")}</tbody></table></div>`;
|
||||
}
|
||||
|
||||
function nodeMatches(node, query) {
|
||||
if (!query) return true;
|
||||
if (`${node.name} ${node.sam} ${node.type} ${nodeTypeLabel(node.type)}`.toLowerCase().includes(query)) return true;
|
||||
return (node.members || []).some(child => nodeMatches(child, query));
|
||||
}
|
||||
|
||||
function treeNodes(nodes, query = "") {
|
||||
return nodes.filter(node => nodeMatches(node, query)).map(node => {
|
||||
const children = treeNodes(node.members || [], query);
|
||||
const title = `<span class="kind">${esc(nodeTypeLabel(node.type))}</span> <strong>${esc(node.name)}</strong>${node.sam && node.sam !== node.name ? ` <span class="muted">${esc(node.sam)}</span>` : ""}${node.cycle ? ` ${badge("Zyklus", "warn")}` : ""}`;
|
||||
return children ? `<details ${query ? "open" : ""}><summary>${title}</summary>${children}</details>` : `<div class="leaf">${title}</div>`;
|
||||
}).join("");
|
||||
}
|
||||
|
||||
async function renderShares() {
|
||||
const data = await api("/api/groups");
|
||||
state.groups = data;
|
||||
const groups = data.groups || [];
|
||||
content.innerHTML = `<div class="shares-view">` + pageHead("Dateifreigaben", "Verwaltete Ordner und ihre individuellen Benutzerberechtigungen.", `<span class="muted">Verzeichnisstand ${esc(utcTime(data.fetchedAt))}</span>`) + `
|
||||
${data.truncated ? `<p>${badge("Ergebnis gekürzt", "warn")} Mitgliedschaftsliste ist unvollständig.</p>` : ""}
|
||||
<section class="split shares-split">
|
||||
<article class="panel"><div class="panel-head"><h2>Datenordner</h2><span>${groups.length}</span></div><input id="group-filter" type="search" placeholder="Ordner oder Benutzer filtern"><ul id="group-list" class="list"></ul></article>
|
||||
<article class="panel"><div id="tree-panel"></div></article>
|
||||
</section></div>`;
|
||||
const list = document.querySelector("#group-list");
|
||||
const tree = document.querySelector("#tree-panel");
|
||||
let selected = groups[0] || null;
|
||||
let query = "";
|
||||
const draw = () => {
|
||||
const visible = groups.filter(group => `${group.name} ${group.sam} ${group.folder}`.toLowerCase().includes(query) || group.members.some(node => nodeMatches(node, query)));
|
||||
if (selected && !visible.includes(selected)) selected = visible[0] || null;
|
||||
list.innerHTML = visible.length ? visible.map(group => `<li><button class="select-row ${group === selected ? "active" : ""}" data-guid="${esc(group.guid)}"><span><strong>${esc(group.folder)}</strong><br><span class="muted">${esc(group.sam)}</span></span><span>${group.userCount} Benutzer</span></button></li>`).join("") : empty("Kein Ordner entspricht dem Filter.");
|
||||
if (!selected) tree.innerHTML = empty("Datenordner auswählen.");
|
||||
else tree.innerHTML = `<div class="panel-head"><div><h2>${esc(selected.folder)}</h2><span class="muted">${esc(selected.sam)} · ${selected.userCount} wirksame Benutzer</span></div>${selected.active ? badge("Aktiv") : badge("Archiviert", "warn")}</div><div class="tree">${treeNodes(selected.members, query) || empty("Keine Benutzer mit Zugriff")}</div>`;
|
||||
list.querySelectorAll("button[data-guid]").forEach(button => button.addEventListener("click", () => { selected = groups.find(group => group.guid === button.dataset.guid); draw(); }));
|
||||
};
|
||||
document.querySelector("#group-filter").addEventListener("input", event => { query = event.target.value.trim().toLowerCase(); draw(); });
|
||||
draw();
|
||||
}
|
||||
|
||||
const permissionLabels = ["Kein Zugriff", "Lesen", "Lesen + Ändern", "Lesen + Ändern + Löschen"];
|
||||
|
||||
async function renderAccess() {
|
||||
@@ -284,7 +249,7 @@ async function renderAccess() {
|
||||
try {
|
||||
data = await api("/api/access", {method: "POST", body: JSON.stringify(body)});
|
||||
if (body.action === "create-folder") {
|
||||
folderFilter = "active"; query = ""; userQuery = ""; userFilter = "all";
|
||||
folderFilter = "active"; query = "";
|
||||
folderId = data.folders.find(item => item.name === body.name.trim())?.id;
|
||||
}
|
||||
if (body.action === "archive-folder") folderFilter = "archived";
|
||||
@@ -310,11 +275,11 @@ async function renderAccess() {
|
||||
}
|
||||
}
|
||||
|
||||
function dialog(title, explanation, label, action, initial = null, danger = false) {
|
||||
function dialog(title, explanation, label, action, initial = null, danger = false, icon = null) {
|
||||
const modal = document.createElement("dialog");
|
||||
modal.className = "access-dialog";
|
||||
modal.setAttribute("aria-label", title);
|
||||
modal.innerHTML = `<form><h2>${esc(title)}</h2><p>${esc(explanation)}</p>${initial !== null ? `<label>Name<input value="${esc(initial)}" maxlength="120" required autofocus></label>` : ""}<div class="access-dialog-actions"><button type="button" data-cancel>Abbrechen</button><button type="submit" class="${danger ? "access-danger" : ""}">${esc(label)}</button></div></form>`;
|
||||
modal.innerHTML = `<form><h2>${esc(title)}</h2><p>${esc(explanation)}</p>${initial !== null ? `<label>Name<input value="${esc(initial)}" maxlength="120" required autofocus></label>` : ""}<div class="access-dialog-actions"><button type="button" data-cancel>Abbrechen</button><button type="submit" class="${danger ? "access-danger" : ""} ${icon ? "icon-button" : ""}"${icon ? ` aria-label="${esc(label)}" title="${esc(label)}"` : ""}>${icon ? actionIcon(icon) : esc(label)}</button></div></form>`;
|
||||
document.body.append(modal);
|
||||
modal.querySelector("[data-cancel]").addEventListener("click", () => modal.close());
|
||||
modal.addEventListener("close", () => modal.remove());
|
||||
@@ -335,11 +300,11 @@ async function renderAccess() {
|
||||
root.querySelector("#access-list").innerHTML = items.length ? items.map(item => {
|
||||
const count = item.permissions.filter(rule => rule.level > 0).length;
|
||||
const subtitle = item.active ? `${count} Benutzer` : "Archiviert";
|
||||
return `<button type="button" class="select-row access-list-item ${item.id === folderId ? "active" : ""}" data-select="${esc(item.id)}" aria-pressed="${item.id === folderId}"><strong>${esc(item.name)}</strong><small>${esc(subtitle)}</small></button>`;
|
||||
return `<button type="button" class="select-row access-list-item ${item.id === folderId ? "active" : ""}" data-select="${esc(item.id)}" aria-pressed="${item.id === folderId}"><strong title="${esc(item.name)}">${esc(item.name)}</strong><small>${esc(subtitle)}</small></button>`;
|
||||
}).join("") : `<div class="access-empty">${query ? "Keine Treffer. Suchbegriff ändern." : "Keine Ordner in dieser Ansicht."}</div>`;
|
||||
root.querySelectorAll("[data-select]").forEach(button => button.addEventListener("click", () => {
|
||||
if (button.dataset.select === folderId || !canLeave()) return;
|
||||
folderId = button.dataset.select; userQuery = ""; userFilter = "all";
|
||||
folderId = button.dataset.select;
|
||||
loadDraft(); drawList(); drawDetail();
|
||||
}));
|
||||
}
|
||||
@@ -374,7 +339,7 @@ async function renderAccess() {
|
||||
detail.innerHTML = data.folders.length ? '<div class="access-empty"><h2 id="access-folder-title">Kein Ordner in dieser Ansicht</h2><p>Den Ordnerstatus wechseln oder einen neuen Ordner anlegen.</p></div>' : '<div class="access-empty"><h2 id="access-folder-title">Ersten Ordner anlegen</h2><p>Mit „Neuer Ordner“ beginnen. Anschließend die Rechte für einzelne AD-Benutzer festlegen.</p></div>';
|
||||
return;
|
||||
}
|
||||
detail.innerHTML = `<header class="access-detail-head"><div><h2 id="access-folder-title">${esc(selected.name)}</h2><p>${selected.active ? "Zugriff für jeden AD-Benutzer einzeln festlegen. Ohne Zuweisung kein Zugriff." : "Dieser Ordner ist archiviert und für Benutzer nicht erreichbar. Gespeicherte Rechte gelten nach dem Wiederherstellen."}</p></div><button type="button" id="access-archive" class="link-button">${selected.active ? "Archivieren" : "Wiederherstellen"}</button></header>
|
||||
detail.innerHTML = `<header class="access-detail-head"><div><h2 id="access-folder-title">${esc(selected.name)}</h2><p>${selected.active ? "Zugriff für jeden AD-Benutzer einzeln festlegen. Ohne Zuweisung kein Zugriff." : "Dieser Ordner ist archiviert und für Benutzer nicht erreichbar. Gespeicherte Rechte gelten nach dem Wiederherstellen."}</p></div><button type="button" id="access-archive" class="${selected.active ? "link-button" : "icon-button"}"${selected.active ? "" : ' aria-label="Wiederherstellen" title="Wiederherstellen"'}>${selected.active ? "Archivieren" : actionIcon("restore")}</button></header>
|
||||
<section class="access-section"><div class="access-section-head"><h3>Benutzerrechte</h3></div>
|
||||
<div class="access-filter-row"><label><span class="sr-only">Benutzer suchen</span><input id="access-user-search" type="search" placeholder="Name oder Benutzername suchen" value="${esc(userQuery)}"></label><label><span class="sr-only">Zugriff filtern</span><select id="access-user-filter"><option value="all">Alle Benutzer</option><option value="granted">${selected.active ? "Mit Zugriff" : "Mit gespeicherten Rechten"}</option><option value="hidden">${selected.active ? "Ohne Zugriff" : "Ohne gespeicherte Rechte"}</option></select></label></div>
|
||||
<p id="access-user-count" class="muted" role="status"></p>
|
||||
@@ -388,7 +353,7 @@ async function renderAccess() {
|
||||
detail.querySelector("#access-discard").addEventListener("click", () => { loadDraft(); drawDetail(); });
|
||||
detail.querySelector("#access-archive").addEventListener("click", () => {
|
||||
if (!canLeave()) return;
|
||||
dialog(selected.active ? "Ordner archivieren?" : "Ordner wiederherstellen?", selected.active ? `„${selected.name}“ wird für Benutzer ausgeblendet. Alle Dateien bleiben erhalten.` : `„${selected.name}“ wird mit den gespeicherten Rechten wieder freigegeben.`, selected.active ? "Archivieren" : "Wiederherstellen", () => save({action: selected.active ? "archive-folder" : "restore-folder", id: selected.id}), null, selected.active);
|
||||
dialog(selected.active ? "Ordner archivieren?" : "Ordner wiederherstellen?", selected.active ? `„${selected.name}“ wird für Benutzer ausgeblendet. Alle Dateien bleiben erhalten.` : `„${selected.name}“ wird mit den gespeicherten Rechten wieder freigegeben.`, selected.active ? "Archivieren" : "Wiederherstellen", () => save({action: selected.active ? "archive-folder" : "restore-folder", id: selected.id}), null, selected.active, selected.active ? null : "restore");
|
||||
});
|
||||
drawUsers(); updateDirty();
|
||||
}
|
||||
@@ -403,7 +368,7 @@ async function renderAccess() {
|
||||
if (!canLeave()) { event.target.value = folderFilter; return; }
|
||||
folderFilter = event.target.value;
|
||||
const visible = data.folders.filter(item => folderFilter === "all" || item.active === (folderFilter === "active"));
|
||||
if (!visible.some(item => item.id === folderId)) { folderId = visible[0]?.id; userQuery = ""; userFilter = "all"; }
|
||||
if (!visible.some(item => item.id === folderId)) folderId = visible[0]?.id;
|
||||
loadDraft(); drawList(); drawDetail();
|
||||
});
|
||||
root.querySelector("#access-create").addEventListener("click", () => {
|
||||
@@ -524,7 +489,7 @@ async function renderTrash() {
|
||||
<td class="path">${esc(item.path)}</td>
|
||||
<td class="numeric">${bytes(item.size)}</td>
|
||||
<td class="timestamp">${esc(utcTime(item.expiresAt))}</td>
|
||||
<td><div class="row-actions"><a class="button" href="/api/trash/download?id=${encodeURIComponent(item.id)}" download>Herunterladen</a><button type="button" data-restore="${esc(item.id)}">Wiederherstellen</button></div></td>
|
||||
<td><div class="row-actions"><a class="button icon-button" href="/api/trash/download?id=${encodeURIComponent(item.id)}" download aria-label="Herunterladen" title="Herunterladen">${actionIcon("download")}</a><button type="button" class="icon-button" data-restore="${esc(item.id)}" aria-label="Wiederherstellen" title="Wiederherstellen">${actionIcon("restore")}</button></div></td>
|
||||
</tr>`).join("");
|
||||
}
|
||||
const shown = result.items.length.toLocaleString("de-DE");
|
||||
|
||||
@@ -26,7 +26,6 @@
|
||||
<div class="brand">Dateiserver</div>
|
||||
<nav id="navigation" aria-label="Hauptnavigation">
|
||||
<a href="/overview" data-route="overview">Übersicht</a>
|
||||
<a href="/shares" data-route="shares">Dateifreigaben</a>
|
||||
<a href="/access" data-route="access">Zugriffsverwaltung</a>
|
||||
<a href="/reconciliation" data-route="reconciliation">Freigabenabgleich</a>
|
||||
<a href="/storage/data" data-route="storage-data">Datenbelegung</a>
|
||||
|
||||
+3
-15
@@ -9,6 +9,8 @@ body { margin: 0; min-height: 100vh; }
|
||||
a { color: #0645ad; }
|
||||
button, input, select { font: inherit; }
|
||||
button, .button { display: inline-block; padding: .4rem .7rem; border: 1px solid #777; color: #111; background: #eee; cursor: pointer; text-decoration: none; white-space: nowrap; }
|
||||
button.icon-button, .button.icon-button { display: inline-flex; align-items: center; justify-content: center; min-width: 2.4rem; min-height: 2.4rem; padding: .4rem; flex-shrink: 0; }
|
||||
.action-icon { display: block; width: 20px; height: 20px; }
|
||||
button:disabled { color: #777; cursor: wait; }
|
||||
input, select { width: 100%; padding: .4rem; border: 1px solid #999; background: #fff; }
|
||||
button:focus, input:focus, select:focus, a:focus { outline: 2px solid #0645ad; outline-offset: 1px; }
|
||||
@@ -44,12 +46,6 @@ nav a.active { font-weight: bold; background: #ddd; }
|
||||
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .7rem; }
|
||||
.panel-head h2 { margin: 0; }
|
||||
.split { display: grid; grid-template-columns: minmax(260px, .7fr) minmax(380px, 1.3fr); gap: 1rem; }
|
||||
.shares-view { display: flex; height: calc(100vh - 4.5rem); height: calc(100dvh - 4.5rem); min-height: 0; flex-direction: column; }
|
||||
.shares-split { min-height: 0; flex: 1; }
|
||||
.shares-split > .panel { display: flex; min-height: 0; margin-bottom: 0; flex-direction: column; }
|
||||
.shares-split .list { min-height: 0; flex: 1; overflow-y: auto; }
|
||||
.shares-split #tree-panel { display: flex; height: 100%; min-height: 0; flex-direction: column; }
|
||||
.shares-split .tree { min-height: 0; max-height: none; flex: 1; overflow-y: auto; }
|
||||
.filters { display: grid; grid-template-columns: repeat(6, minmax(110px, 1fr)); gap: .6rem; margin-bottom: 1rem; align-items: end; }
|
||||
.filters .wide { grid-column: span 2; }
|
||||
.table-wrap { width: 100%; overflow-x: auto; }
|
||||
@@ -65,16 +61,9 @@ th, td { padding: .5rem; border-bottom: 1px solid #ccc; vertical-align: top; }
|
||||
.toolbar { display: flex; flex-wrap: wrap; gap: .5rem; }
|
||||
.toolbar input { max-width: 340px; }
|
||||
.row-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
|
||||
.list { margin: 0; padding: 0; list-style: none; }
|
||||
.select-row { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: .5rem; border: 0; border-bottom: 1px solid #ccc; background: #fff; text-align: left; }
|
||||
.select-row.active { font-weight: bold; background: #eee; }
|
||||
.select-row span:last-child { color: #555; font-size: .85rem; }
|
||||
.tree { max-height: 65vh; overflow: auto; }
|
||||
.tree details { margin-left: 1rem; padding-left: .5rem; border-left: 1px solid #bbb; }
|
||||
.tree > details { margin-left: 0; border-left: 0; }
|
||||
.tree summary, .tree .leaf { padding: .2rem 0; }
|
||||
.tree .leaf { margin-left: 1.5rem; }
|
||||
.tree .kind { display: inline-block; min-width: 4.5rem; color: #555; }
|
||||
.empty { padding: 1rem 0; color: #666; }
|
||||
progress { width: 100%; }
|
||||
.usage-bar { min-width: 160px; }
|
||||
@@ -89,7 +78,6 @@ progress { width: 100%; }
|
||||
.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.filters { grid-template-columns: repeat(3, minmax(120px, 1fr)); }
|
||||
.split { grid-template-columns: 1fr; }
|
||||
.shares-split { grid-template-rows: repeat(2, minmax(0, 1fr)); }
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.sidebar { display: none; z-index: 5; }
|
||||
@@ -115,7 +103,7 @@ progress { width: 100%; }
|
||||
.access-search, .access-status-filter { margin: 0 .8rem .65rem; }
|
||||
.access-list { border-top: 1px solid #ccc; max-height: 60vh; overflow-y: auto; }
|
||||
.access-list .access-list-item { grid-template-columns: minmax(0,1fr) auto; align-items: center; padding: .5rem .7rem; white-space: normal; }
|
||||
.access-list-item strong { font-weight: inherit; overflow-wrap: anywhere; }
|
||||
.access-list-item strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: inherit; }
|
||||
.access-list-item small { color: #555; font-size: .85rem; font-weight: normal; text-align: right; }
|
||||
.access-detail-head { display: flex; gap: 1rem; justify-content: space-between; align-items: start; padding: .8rem; }
|
||||
.access-detail-head h2 { margin: 0 0 .3rem; overflow-wrap: anywhere; }
|
||||
|
||||
Reference in New Issue
Block a user