-
handleOpen(node)}
- role="button"
- tabIndex={0}
- onKeyDown={(event) => {
- if (event.key === 'Enter') handleOpen(node);
- }}
- >
- {hasChildren ? (
-
{
- event.stopPropagation();
- toggleFolder(node.path || '');
- }}
- onKeyDown={(event) => {
- if (event.key === 'Enter') {
- event.stopPropagation();
- toggleFolder(node.path || '');
- }
- }}
- aria-label="Toggle"
- >
- {isExpanded ? : }
-
- ) : (
-
- )}
-
-
-
-
{node.name}
- {tagCount > 0 && (
-
- {tagCount}
-
- )}
-
- {isExpanded &&
- hasChildren &&
- childFolders.map((child) => renderFolderTree(child, depth + 1))}
-
-
-
-
-
-
-
-
-
-
- {error && {error}
}
- {activeNfc && dismissedNfcKey !== getNfcKey(activeNfc) && (
-
-
-
- {activeNfc.uid &&
- tags.find((tag) => tag.uid === activeNfc.uid && !tag.media_path)
- ? 'Leerer Tag erkannt'
- : 'Neuer Tag erkannt'}
-
-
- {activeNfc.uid ? (
- <>
- UID erkannt: {activeNfc.uid}
-
- ) : (
- <>keine UID erkannt
- )}
-
- {activeNfc.uid &&
- lastHardwareUid.uid === activeNfc.uid &&
- lastHardwareUid.hardwareUid && (
-
- Hardware-UID erkannt: {lastHardwareUid.hardwareUid}
-
- )}
- {!activeNfc.uid && activeNfc.hardwareUid && (
-
- Hardware-UID erkannt: {activeNfc.hardwareUid}
-
- )}
- {activeNfc.uid && tags.find((tag) => tag.uid === activeNfc.uid) && (
-
- Dieser Tag ist bekannt, aber noch nicht zugewiesen.
-
- )}
-
-
-
-
- {
- if (event.index <= tagStepMax) {
- setTagStep(event.index);
- return;
- }
- tagStepperRef.current?.setActiveStep(tagStep);
- }}
- >
-
-
-
- setScanTagUid(event.target.value)}
- readOnly={tagUidMode === 'keep'}
- placeholder="Tag-ID (10 Zeichen)"
- className="p-inputtext-sm"
- />
-
-
setScanTagLabel(event.target.value)}
- placeholder="Label (optional)"
- className="p-inputtext-sm is-hidden"
- />
-
-
- setScanMediaPath(event.value)}
- options={collectTopLevelFolders(mediaTree).map((folderPath) => ({
- label: folderPath,
- value: folderPath,
- }))}
- placeholder="Medienordner waehlen"
- filter
- className="p-inputtext-sm"
- disabled={!tagStepOneDone}
- />
-
-
-
-
-
Zusammenfassung
-
- System-UID
- {scanTagUid || '-'}
- UID-Modus
- {tagUidMode === 'keep' ? 'Beibehalten' : 'Neu vergeben'}
- Label
- {scanTagLabel?.trim() || '-'}
- Medienordner
- {scanMediaPath || 'Spaeter zuordnen'}
- Hardware-UID
-
- {lastHardwareUid.uid === activeNfc?.uid && lastHardwareUid.hardwareUid
- ? lastHardwareUid.hardwareUid
- : activeNfc?.hardwareUid || '-'}
-
-
-
-
-
-
-
-
-
-
- )}
-
-
-
-
-
-
-
-
- {activeModal === 'new-folder' && (
-
{
- setActiveModal('');
- setUploadAfterCreate(false);
- setPendingUploadFiles([]);
- setUploadSize(0);
- setUploadNameError('');
- setTagDeleteTarget('');
- }}
- >
-
event.stopPropagation()}
- ref={modalRef}
- >
-
{uploadAfterCreate ? 'Upload vorbereiten' : 'Neuen Ordner anlegen'}
-
{
- setNewFolderName(event.target.value);
- if (uploadNameError) setUploadNameError('');
- }}
- placeholder={
- uploadAfterCreate && !currentPath
- ? 'Ordnername'
- : uploadAfterCreate
- ? 'Optionaler Ordnername (leer = aktueller Ordner)'
- : 'Ordnername'
- }
- className="p-inputtext-sm"
- />
- {uploadAfterCreate && uploadNameError && (
- {uploadNameError}
- )}
- {uploadAfterCreate && (
- <>
- {
- const audioFiles = (event.files || []).filter((file) =>
- file.type.startsWith('audio/')
- );
- setPendingUploadFiles(audioFiles);
- const nextSize = audioFiles.reduce((sum, file) => sum + file.size, 0);
- setUploadSize(nextSize);
- setActiveUploadLabel(
- audioFiles.length
- ? `Upload: ${audioFiles.length} Datei(en)`
- : ''
- );
- }}
- uploadHandler={(event) => {
- const audioFiles = (event.files || []).filter((file) =>
- file.type.startsWith('audio/')
- );
- setPendingUploadFiles(audioFiles);
- const nextSize = audioFiles.reduce((sum, file) => sum + file.size, 0);
- setUploadSize(nextSize);
- setActiveUploadLabel(
- audioFiles.length
- ? `Upload: ${audioFiles.length} Datei(en)`
- : ''
- );
- handleCreateFolder(audioFiles);
- }}
- onClear={() => {
- setPendingUploadFiles([]);
- setUploadSize(0);
- }}
- emptyTemplate={
-
-
-
- Drag and Drop Audio Here
-
-
- Gesamt: {formatSize(uploadSize)}
-
-
- Gesamt: {formatSize(uploadSize)}
-
- {pendingUploadFiles.length} Datei(en)
-
-
- )}
-
- )}
-
-
-
-
- )}
-
- {activeModal === 'rename' && (
-
{
- setActiveModal('');
- setRenameName('');
- }}
- >
-
event.stopPropagation()}
- ref={modalRef}
- >
-
Umbenennen
-
setRenameName(event.target.value)}
- placeholder="Neuer Name"
- className="p-inputtext-sm"
- />
-
-
-
-
- )}
-
- {activeModal === 'delete' && (
-
{
- setActiveModal('');
- }}
- >
-
event.stopPropagation()}
- ref={modalRef}
- >
-
Eintraege loeschen
-
{selectedPaths.length} Eintraege werden geloescht.
-
-
-
-
- )}
-
- {activeModal === 'move' && (
-
{
- setActiveModal('');
- setMoveTarget('');
- }}
- >
-
event.stopPropagation()}
- ref={modalRef}
- >
-
Verschieben
-
setMoveTarget(event.value)}
- options={[
- { label: 'media/', value: '__root__' },
- ...collectFolderPaths(mediaTree).map((folder) => ({
- label: folder,
- value: folder,
- })),
- ]}
- placeholder="Zielordner waehlen"
- filter
- className="p-inputtext-sm"
- />
-
-
-
-
- )}
-
- {activeModal === 'tag-delete' && (
-
{
- setActiveModal('');
- setTagDeleteTarget('');
- }}
- >
-
event.stopPropagation()}
- ref={modalRef}
- >
-
Tag entfernen
-
- Soll der Tag komplett geloescht werden oder nur die Medienzuweisung?
-
-
-
-
-
- )}
-
- {boxDeleteTarget && (
-
setBoxDeleteTarget('')}
- >
-
event.stopPropagation()}
- ref={modalRef}
- >
-
Box entfernen
-
Soll die Box wirklich entkoppelt werden?
-
-
-
-
- )}
-
- {boxDetailsOpen && (
-
{
- setBoxDetailsOpen(false);
- setBoxDetailsError('');
- setBoxDetailsData(null);
- }}
- role="presentation"
- >
-
event.stopPropagation()}>
-
-
Box Details
-
-
- {boxDetailsLoading &&
Details werden geladen...
}
- {boxDetailsError &&
{boxDetailsError}
}
- {!boxDetailsLoading && !boxDetailsError && boxDetailsData && (
-
-
-
Box
-
ID: {boxDetailsData.box_id}
-
- Firmware: {boxDetailsData.firmware_version || '0.0.0'}
-
-
-
-
-
Settings
-
- Max Volume: {boxDetailsData.settings?.max_volume ?? '-'}
-
-
- Default Volume: {boxDetailsData.settings?.default_volume ?? '-'}
-
-
-
-
-
Gespeicherte WLANs
- {Array.isArray(boxDetailsData.wifi_profiles) &&
- boxDetailsData.wifi_profiles.length > 0 ? (
- boxDetailsData.wifi_profiles.map((profile) => (
-
- {profile.ssid} (prio {profile.priority ?? 0})
-
- ))
- ) : (
-
Keine Profile.
- )}
-
-
-
-
Tags
- {boxDetailsData.tags && Object.keys(boxDetailsData.tags).length > 0 ? (
- Object.entries(boxDetailsData.tags).map(([uid, tag]) => (
-
- {uid}: {tag?.path || '-'}
-
- ))
- ) : (
-
Keine Tags.
- )}
-
-
-
-
Server
-
- Active URL: {boxDetailsData.active_server_url || '-'}
-
-
- Last SSID: {boxDetailsData.last_ssid || '-'}
-
- {boxDetailsData.server_bindings &&
- Object.keys(boxDetailsData.server_bindings).length > 0 ? (
- Object.entries(boxDetailsData.server_bindings).map(
- ([ssid, binding]) => (
-
- {ssid}: {binding?.server_url || '-'}
-
- )
- )
- ) : (
-
Keine Bindings.
- )}
-
-
- )}
-
-
-
- )}
-
- {activeModal === 'import-tag' && (
-
-
-
-
Tag vom Box-Speicher uebertragen
-
-
-
-
setImportTargetFolder(event.target.value)}
- placeholder="z. B. grimm_volume_3"
- className="p-inputtext-sm"
- />
- {uploadInProgress && (
-
- )}
-
-
-
-
-
- )}
-
- {showSessionSheet && (
-
setShowSessionSheet(false)}
- >
-
event.stopPropagation()}
- >
-
- ToolHub
-
- {drawerTab === 'boxes' && (
- <>
- {paired.length === 0 && (
-
Keine gepairten Boxen.
- )}
-
- {paired.map((box) => {
- const isActive = selectedId === box.box_id;
- const label = (box.alias || box.box_id || '').slice(0, 2).toUpperCase();
- const availability = getAvailability(box.last_seen);
- return (
-
- );
- })}
-
-
- )}
- {drawerTab === 'system' && (
-
{systemPanels}
- )}
-
-
-
-
-
-
- )}
-