Ordner durchklicken, statt den Pfad zu wissen
Beim Anlegen einer Mediathek verlangte das Feld den Pfad im Container — nicht den auf dem NAS. Diese Unterscheidung kennt nur, wer die Compose-Datei selbst geschrieben hat, und ein Tippfehler darin ergibt eine leere Mediathek ohne erkennbaren Grund. Neben dem Feld steht jetzt ein Knopf, der die Ordner des Servers im selben Dialog aufklappt: Pfadzeile in anklickbaren Stücken, Unterordner darunter, unten der Knopf mit dem gewählten Pfad darauf. Im selben Dialog und nicht in einem zweiten darüber: zwei gestapelte Dialoge sind beim Schliessen immer eine Frage zu viel. Das Feld bleibt tippbar. Wer den Pfad kennt, ist damit schneller, und bei einem tiefen Baum ist es die einzige geduldschonende Möglichkeit. An der Wurzel bleiben /proc, /sys, /usr und Verwandte aussen vor. Das ist keine Absperrung — wer den Pfad kennt, tippt ihn weiterhin ein —, sondern eine Liste aus zwanzig Einträgen, von denen achtzehn nie eine Mediathek enthalten, ist unbrauchbar. Ein Ordner ohne Leserecht wird gemeldet, nicht geworfen. Ohne das flöge eine UnauthorizedAccessException bis in die Antwort und würde zur 500, während die ehrliche Auskunft lautet: den darfst du nicht lesen. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Scarriffle
co-authored by
Claude Opus 5
Claude Opus 5
parent
64fb61f2dc
commit
b25c7a4712
@@ -418,6 +418,20 @@ export const laufendeWiedergaben = () =>
|
||||
|
||||
export const serverzustand = () => anfrage<Serverzustand>('/system/status');
|
||||
|
||||
/** Ein Ordner im Dateisystem des Servers, zum Durchklicken. */
|
||||
export type Ordnerstand = {
|
||||
path: string;
|
||||
/** `null` an der Wurzel — dann gibt es kein „eine Ebene hoch". */
|
||||
parent: string | null;
|
||||
entries: { name: string; path: string }[];
|
||||
/** Warum die Liste leer ist — oder `null`, wenn sie es nicht ist. */
|
||||
note: string | null;
|
||||
};
|
||||
|
||||
/** Listet Unterordner. Ohne Pfad fängt der Server bei etwas Sinnvollem an. */
|
||||
export const ordner = (pfad?: string) =>
|
||||
anfrage<Ordnerstand>('/system/folders' + (pfad ? `?path=${encodeURIComponent(pfad)}` : ''));
|
||||
|
||||
export const servernameSetzen = (name: string) =>
|
||||
anfrage<void>('/system/name', { method: 'PUT', body: JSON.stringify({ name }) });
|
||||
|
||||
|
||||
+165
-2
@@ -1,5 +1,6 @@
|
||||
import { icons } from './icons';
|
||||
import { knopf } from './util';
|
||||
import { ordner, type Ordnerstand } from './api';
|
||||
|
||||
/* Dialoge über dem Inhalt statt Blöcken darin.
|
||||
*
|
||||
@@ -9,7 +10,7 @@ import { knopf } from './util';
|
||||
* Vorlesesoftware kündigt ihn als Dialog an. Jede Zeile, die das selbst
|
||||
* baut, ist eine Zeile, die es schlechter kann. */
|
||||
|
||||
export type Feldart = 'text' | 'password' | 'number';
|
||||
export type Feldart = 'text' | 'password' | 'number' | 'ordner';
|
||||
|
||||
export type Dialogfeld = {
|
||||
name: string;
|
||||
@@ -71,7 +72,10 @@ export function dialog(optionen: {
|
||||
const eingaben = new Map<string, HTMLInputElement | HTMLSelectElement>();
|
||||
|
||||
(optionen.felder ?? []).forEach(f => {
|
||||
const block = document.createElement('label');
|
||||
// **Ein `<label>` nur dort, wo genau ein Bedienelement darin sitzt.**
|
||||
// Umschliesst es zusätzlich einen Knopf, löst jeder Klick darauf auch
|
||||
// das Label aus und schiebt den Fokus ins Textfeld zurück.
|
||||
const block = document.createElement(f.art === 'ordner' ? 'div' : 'label');
|
||||
block.className = 'dlg-feld';
|
||||
|
||||
const titel = document.createElement('span');
|
||||
@@ -100,6 +104,14 @@ export function dialog(optionen: {
|
||||
block.prepend(e);
|
||||
titel.remove();
|
||||
block.append(titel);
|
||||
} else if (f.art === 'ordner') {
|
||||
const e = document.createElement('input');
|
||||
e.className = 'feld';
|
||||
e.type = 'text';
|
||||
e.value = f.wert ?? '';
|
||||
e.placeholder = f.platzhalter ?? '';
|
||||
eingaben.set(f.name, e);
|
||||
block.appendChild(ordnerfeld(e));
|
||||
} else {
|
||||
const e = document.createElement('input');
|
||||
e.className = 'feld';
|
||||
@@ -179,6 +191,157 @@ export function dialog(optionen: {
|
||||
});
|
||||
}
|
||||
|
||||
/** Ein Textfeld mit Ordnerauswahl daneben.
|
||||
*
|
||||
* **Das Feld bleibt tippbar.** Wer den Pfad kennt, ist damit schneller als
|
||||
* mit jedem Durchklicken — und bei einem tiefen Baum ist es die einzige
|
||||
* geduldschonende Möglichkeit. Der Knopf ist ein Angebot, keine Pflicht.
|
||||
*
|
||||
* **Die Auswahl klappt im selben Dialog auf**, statt einen zweiten darüber
|
||||
* zu legen. Zwei gestapelte Dialoge sind beim Schliessen immer eine Frage
|
||||
* zu viel: welcher geht jetzt zu?
|
||||
*/
|
||||
function ordnerfeld(eingabe: HTMLInputElement): HTMLElement {
|
||||
const huelle = document.createElement('div');
|
||||
huelle.className = 'ordnerfeld';
|
||||
|
||||
const zeile = document.createElement('div');
|
||||
zeile.className = 'ordnerzeile';
|
||||
const auf = knopf('Durchsuchen', 'btn');
|
||||
auf.type = 'button';
|
||||
auf.prepend(rahmenIcon(icons.ordner));
|
||||
zeile.append(eingabe, auf);
|
||||
|
||||
const baum = document.createElement('div');
|
||||
baum.className = 'ordnerbaum hidden';
|
||||
|
||||
const kopf = document.createElement('div');
|
||||
kopf.className = 'ordnerkopf';
|
||||
const hoch = document.createElement('button');
|
||||
hoch.type = 'button';
|
||||
hoch.className = 'rund';
|
||||
hoch.innerHTML = icons.hoch;
|
||||
hoch.setAttribute('aria-label', 'Eine Ebene höher');
|
||||
const pfad = document.createElement('div');
|
||||
pfad.className = 'ordnerpfad';
|
||||
kopf.append(hoch, pfad);
|
||||
|
||||
const liste = document.createElement('div');
|
||||
liste.className = 'ordnerliste';
|
||||
|
||||
const fuss = document.createElement('div');
|
||||
fuss.className = 'ordnerfuss';
|
||||
const waehlen = knopf('Diesen Ordner wählen', 'btn btn-primary');
|
||||
waehlen.type = 'button';
|
||||
fuss.appendChild(waehlen);
|
||||
|
||||
baum.append(kopf, liste, fuss);
|
||||
huelle.append(zeile, baum);
|
||||
|
||||
let hier: Ordnerstand | null = null;
|
||||
|
||||
async function gehe(ziel?: string): Promise<void> {
|
||||
liste.innerHTML = '<div class="spinner"></div>';
|
||||
try {
|
||||
hier = await ordner(ziel);
|
||||
} catch (fehler) {
|
||||
liste.innerHTML = '';
|
||||
liste.appendChild(hinweiszeile((fehler as Error).message));
|
||||
return;
|
||||
}
|
||||
zeichne();
|
||||
}
|
||||
|
||||
function zeichne(): void {
|
||||
if (!hier) return;
|
||||
hoch.disabled = hier.parent === null;
|
||||
waehlen.textContent = `„${hier.path}" wählen`;
|
||||
|
||||
// Der Pfad in anklickbaren Stücken — ein Sprung nach oben ist damit
|
||||
// einer, nicht fünf.
|
||||
pfad.innerHTML = '';
|
||||
const teile = hier.path.split('/').filter(t => t.length > 0);
|
||||
// Die Wurzel trägt ihren Strich selbst und bekommt deshalb keinen
|
||||
// Trenner angehängt — sonst steht dort „/ / media".
|
||||
const wurzel = pfadstueck('/', '/');
|
||||
wurzel.classList.add('wurzel');
|
||||
pfad.appendChild(wurzel);
|
||||
let bisher = '';
|
||||
teile.forEach(t => {
|
||||
bisher += '/' + t;
|
||||
pfad.appendChild(pfadstueck(t, bisher));
|
||||
});
|
||||
|
||||
liste.innerHTML = '';
|
||||
if (hier.entries.length === 0) {
|
||||
liste.appendChild(hinweiszeile(hier.note ?? 'Keine Unterordner.'));
|
||||
return;
|
||||
}
|
||||
hier.entries.forEach(e => {
|
||||
const z = document.createElement('button');
|
||||
z.type = 'button';
|
||||
z.className = 'ordnereintrag';
|
||||
z.innerHTML = icons.ordner;
|
||||
const name = document.createElement('span');
|
||||
name.textContent = e.name;
|
||||
z.appendChild(name);
|
||||
z.onclick = () => void gehe(e.path);
|
||||
liste.appendChild(z);
|
||||
});
|
||||
}
|
||||
|
||||
function pfadstueck(text: string, ziel: string): HTMLElement {
|
||||
const b = document.createElement('button');
|
||||
b.type = 'button';
|
||||
b.className = 'pfadstueck';
|
||||
b.textContent = text;
|
||||
b.onclick = () => void gehe(ziel);
|
||||
return b;
|
||||
}
|
||||
|
||||
function hinweiszeile(text: string): HTMLElement {
|
||||
const d = document.createElement('div');
|
||||
d.className = 'winzig';
|
||||
d.textContent = text;
|
||||
return d;
|
||||
}
|
||||
|
||||
auf.onclick = () => {
|
||||
const offen = !baum.classList.toggle('hidden');
|
||||
auf.textContent = offen ? 'Zuklappen' : 'Durchsuchen';
|
||||
auf.prepend(rahmenIcon(icons.ordner));
|
||||
// Da anfangen, wo im Feld schon etwas steht — sonst beim Server.
|
||||
if (offen && !hier) void gehe(eingabe.value.trim() || undefined);
|
||||
};
|
||||
|
||||
hoch.onclick = () => { if (hier?.parent) void gehe(hier.parent); };
|
||||
|
||||
waehlen.onclick = () => {
|
||||
if (!hier) return;
|
||||
eingabe.value = hier.path;
|
||||
baum.classList.add('hidden');
|
||||
auf.textContent = 'Durchsuchen';
|
||||
auf.prepend(rahmenIcon(icons.ordner));
|
||||
eingabe.focus();
|
||||
};
|
||||
|
||||
// **Enter darf hier nicht den Dialog abschicken.** Der Dialog lauscht
|
||||
// auf seinem Körper und drückt bei Enter den Bestätigen-Knopf; in der
|
||||
// Ordnerauswahl soll Enter den fokussierten Ordner öffnen und sonst
|
||||
// nichts.
|
||||
baum.addEventListener('keydown', e => { if (e.key === 'Enter') e.stopPropagation(); });
|
||||
|
||||
return huelle;
|
||||
}
|
||||
|
||||
/** Ein Icon als Element — `innerHTML` würde den Text des Knopfes löschen. */
|
||||
function rahmenIcon(svg: string): HTMLElement {
|
||||
const s = document.createElement('span');
|
||||
s.className = 'icon';
|
||||
s.innerHTML = svg;
|
||||
return s;
|
||||
}
|
||||
|
||||
/** Fragt einmal nach — für alles, was etwas wegnimmt. */
|
||||
export function nachfragen(optionen: {
|
||||
titel: string;
|
||||
|
||||
@@ -14,6 +14,11 @@ const rahmen = (inhalt: string, gefuellt = false): string =>
|
||||
|
||||
export const icons = {
|
||||
start: rahmen('<path d="M3 10.5 12 3l9 7.5"/><path d="M5 9.5V21h14V9.5"/>'),
|
||||
/** Ordner — fürs Durchklicken durch das Dateisystem. */
|
||||
ordner: rahmen('<path d="M3 7.5A1.5 1.5 0 0 1 4.5 6h4.3a1.5 1.5 0 0 1 1.07.45L11.4 7.6"'
|
||||
+ ' /><path d="M3 7.5h16.5A1.5 1.5 0 0 1 21 9v8.5a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 17.5Z"/>'),
|
||||
/** Winkel nach oben — eine Ebene zurück im Baum. */
|
||||
hoch: rahmen('<path d="m6 14 6-6 6 6"/>'),
|
||||
/** Filmstreifen — für eine Filmmediathek. */
|
||||
filme: rahmen('<rect x="3" y="4" width="18" height="16" rx="2"/>'
|
||||
+ '<path d="M7 4v16M17 4v16M3 9h4M3 15h4M17 9h4M17 15h4"/>'),
|
||||
|
||||
@@ -567,3 +567,70 @@ h2 { font-size: 19px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 var(
|
||||
.detail-text h1 { font-size: 26px; }
|
||||
#topbar .suchfeld { max-width: none; }
|
||||
}
|
||||
|
||||
/* --- Ordnerauswahl ------------------------------------------------------
|
||||
*
|
||||
* Klappt im Dialog auf, statt einen zweiten darüberzulegen. Die Höhe ist
|
||||
* begrenzt und scrollt: ein Verzeichnis mit zweihundert Unterordnern würde
|
||||
* den Dialog sonst über den Bildschirmrand schieben. */
|
||||
|
||||
.ordnerfeld { display: flex; flex-direction: column; gap: var(--s-snug); }
|
||||
|
||||
.ordnerzeile { display: flex; gap: var(--s-snug); }
|
||||
.ordnerzeile .feld { flex: 1; min-width: 0; }
|
||||
.ordnerzeile .btn { flex: none; gap: 6px; }
|
||||
|
||||
.ordnerbaum {
|
||||
border: 1px solid var(--line); border-radius: var(--r-control);
|
||||
background: var(--canvas); overflow: hidden;
|
||||
}
|
||||
|
||||
.ordnerkopf {
|
||||
display: flex; align-items: center; gap: var(--s-snug);
|
||||
padding: var(--s-snug); border-bottom: 1px solid var(--line);
|
||||
}
|
||||
.ordnerkopf .rund { width: 30px; height: 30px; flex: none; }
|
||||
.ordnerkopf .rund svg { width: 16px; height: 16px; }
|
||||
.ordnerkopf .rund:disabled { opacity: .35; }
|
||||
|
||||
/* Der Pfad scrollt waagerecht statt umzubrechen — ein tiefer Pfad soll die
|
||||
Kopfzeile nicht dreizeilig machen. */
|
||||
.ordnerpfad {
|
||||
display: flex; align-items: center; gap: 2px;
|
||||
overflow-x: auto; scrollbar-width: none; min-width: 0;
|
||||
}
|
||||
.ordnerpfad::-webkit-scrollbar { display: none; }
|
||||
.ordnerpfad .pfadstueck {
|
||||
background: none; border: 0; padding: 2px 5px; border-radius: 4px;
|
||||
color: var(--text-dim); font-size: 12px; white-space: nowrap;
|
||||
}
|
||||
.ordnerpfad .pfadstueck:hover { background: var(--elevated); color: var(--text); }
|
||||
.ordnerpfad .pfadstueck:not(:last-child)::after { content: '/'; margin-left: 5px; color: var(--text-faint); }
|
||||
.ordnerpfad .pfadstueck.wurzel::after { content: none; }
|
||||
|
||||
.ordnerliste {
|
||||
max-height: 220px; overflow-y: auto;
|
||||
display: flex; flex-direction: column; padding: var(--s-tight);
|
||||
}
|
||||
.ordnerliste .winzig { padding: var(--s-regular); }
|
||||
|
||||
.ordnereintrag {
|
||||
display: flex; align-items: center; gap: var(--s-snug);
|
||||
background: none; border: 0; border-radius: 5px;
|
||||
padding: 7px var(--s-snug); text-align: left;
|
||||
color: var(--text-dim); font-size: 13px;
|
||||
}
|
||||
.ordnereintrag svg { width: 17px; height: 17px; color: var(--text-faint); }
|
||||
.ordnereintrag:hover { background: var(--elevated); color: var(--text); }
|
||||
.ordnereintrag:hover svg { color: var(--accent); }
|
||||
|
||||
.ordnerfuss {
|
||||
padding: var(--s-snug); border-top: 1px solid var(--line);
|
||||
display: flex; justify-content: flex-end;
|
||||
}
|
||||
/* Der Knopf trägt den ganzen Pfad — bei einem langen muss er kürzen dürfen,
|
||||
sonst wächst der Dialog mit. */
|
||||
.ordnerfuss .btn {
|
||||
max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -164,7 +164,7 @@ function bibliotheksbereich(geaendert: () => void): HTMLElement {
|
||||
auswahl: [{ wert: 'Movies', text: 'Filme' }, { wert: 'Shows', text: 'Serien' }],
|
||||
},
|
||||
{
|
||||
name: 'pfad', beschriftung: 'Ordner',
|
||||
name: 'pfad', beschriftung: 'Ordner', art: 'ordner',
|
||||
platzhalter: '/media/Filme',
|
||||
hinweis: 'Der Pfad im Container, nicht der auf dem NAS — '
|
||||
+ 'also das, was in der Compose-Datei hinter dem Doppelpunkt steht.',
|
||||
|
||||
Reference in New Issue
Block a user