michael/URBM
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compact snapshot path lists

Browse Source
This commit is contained in:
Mikei386
2026-06-21 14:15:23 +02:00
parent f3f846bdfa
commit 8c8771f82e
8 changed files with 32 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webgui/URBM.page
+4 -4
View File
@@ -9,12 +9,12 @@ Tag="URBM Unraid Restic Backup Manager backup snapshots restore"
<?php
$pluginRoot = '/plugins/urbm';
?>
<link rel="stylesheet" href="<?= $pluginRoot ?>/assets/urbm.css?v=20260621r002">
<link rel="stylesheet" href="<?= $pluginRoot ?>/assets/urbm.css?v=20260621r003">
<div id="urbm-app" data-api="<?= $pluginRoot ?>/api.php">
<header class="bu-header">
<div class="bu-brand">
<img class="bu-logo" src="<?= $pluginRoot ?>/images/urbm.png?v=20260621r002" alt="URBM-Logo">
<div><h1>URBM <span class="bu-version">2026.06.21.r002</span></h1><p>Restic Backup Manager für Unraid</p></div>
<img class="bu-logo" src="<?= $pluginRoot ?>/images/urbm.png?v=20260621r003" alt="URBM-Logo">
<div><h1>URBM <span class="bu-version">2026.06.21.r003</span></h1><p>Restic Backup Manager für Unraid</p></div>
</div>
<div id="bu-health" class="bu-health" tabindex="0" data-tooltip="Zeigt, ob die URBM-Hintergrundkomponente erreichbar ist. Beispiel: 'Daemon online' bedeutet, dass Jobs gestartet werden können.">Verbindung wird hergestellt...</div>
</header>
@@ -32,4 +32,4 @@ $pluginRoot = '/plugins/urbm';
<div id="bu-tooltip" role="tooltip" aria-hidden="true"></div>
</div>
<script>window.URBM_CSRF = <?= json_encode($var['csrf_token'] ?? '') ?>;</script>
<script src="<?= $pluginRoot ?>/assets/urbm-2026.06.21.r002.js"></script>
<script src="<?= $pluginRoot ?>/assets/urbm-2026.06.21.r003.js"></script>
webgui/assets/urbm.css
+8
View File
@@ -167,6 +167,14 @@
.bu-table th, .bu-table td { border-bottom: 1px solid var(--bu-border); color: var(--bu-text); padding: 12px 8px; text-align: left; vertical-align: top; }
.bu-table th { color: var(--bu-text); font-size: 13px; font-weight: 700; letter-spacing: .03em; opacity: .76; text-transform: uppercase; }
.bu-table-scroll { max-width: 100%; overflow-x: auto; }
.bu-snapshot-table { table-layout: fixed; }
.bu-snapshot-id { width: 90px; }
.bu-snapshot-time { width: 175px; }
.bu-snapshot-host { width: 130px; }
.bu-snapshot-actions { width: 145px; }
.bu-path-list { display: flex; flex-wrap: wrap; gap: 5px; max-width: 100%; min-width: 0; }
.bu-path-chip, .bu-path-more { background: var(--bu-panel-alt); border: 1px solid var(--bu-border); border-radius: 999px; color: var(--bu-text); display: inline-block; font-size: 12px; line-height: 1.25; max-width: 260px; overflow: hidden; padding: 4px 8px; text-overflow: ellipsis; white-space: nowrap; }
.bu-path-more { color: var(--bu-muted); font-weight: 700; }
.bu-runs-table { table-layout: fixed; }
.bu-runs-table .bu-run-task { width: 18%; }
.bu-runs-table .bu-run-status { width: 9%; }
webgui/assets/urbm.js
+8 -2
View File
@@ -628,8 +628,14 @@
function renderSnapshots() {
const options = state.config.repositories.map(r=>`<option value="${esc(r.id)}">${esc(r.name)}</option>`).join('');
const rows = state.snapshots.map(s=>`<tr><td>${esc(s.short_id||s.id)}</td><td>${esc(new Date(s.time).toLocaleString())}</td><td>${esc(s.hostname)}</td><td>${esc((s.paths||[]).join(', '))}</td><td>${button('Durchsuchen',`browse:${s.id}`)}</td></tr>`).join('');
return `<div class="bu-toolbar"><h2>Snapshots</h2><div class="bu-actions"><select id="bu-snapshot-repo">${options}</select>${button('Laden','load-snapshots','primary')}</div></div><section class="bu-card">${rows?`<table class="bu-table"><thead><tr><th>Snapshot</th><th>Zeitpunkt</th><th>Host</th><th>Pfade</th><th></th></tr></thead><tbody>${rows}</tbody></table>`:'<div class="bu-empty">Repository auswählen und Snapshots laden.</div>'}</section>${state.selectedSnapshot ? renderFileBrowser() : ''}`;
const pathList = paths => {
paths = paths || [];
const visible = paths.slice(0, 4).map(path=>`<span class="bu-path-chip" title="${esc(path)}">${esc(path)}</span>`).join('');
const more = paths.length > 4 ? `<span class="bu-path-more" title="${esc(paths.slice(4).join('\n'))}">+${paths.length-4} weitere</span>` : '';
return `<div class="bu-path-list" title="${esc(paths.join('\n'))}">${visible}${more || (!paths.length ? '<span class="bu-muted">Keine Pfade</span>' : '')}</div>`;
};
const rows = state.snapshots.map(s=>`<tr><td>${esc(s.short_id||s.id)}</td><td>${esc(new Date(s.time).toLocaleString())}</td><td>${esc(s.hostname)}</td><td>${pathList(s.paths)}</td><td>${button('Durchsuchen',`browse:${s.id}`)}</td></tr>`).join('');
return `<div class="bu-toolbar"><h2>Snapshots</h2><div class="bu-actions"><select id="bu-snapshot-repo">${options}</select>${button('Laden','load-snapshots','primary')}</div></div><section class="bu-card">${rows?`<div class="bu-table-scroll"><table class="bu-table bu-snapshot-table"><colgroup><col class="bu-snapshot-id"><col class="bu-snapshot-time"><col class="bu-snapshot-host"><col class="bu-snapshot-paths"><col class="bu-snapshot-actions"></colgroup><thead><tr><th>Snapshot</th><th>Zeitpunkt</th><th>Host</th><th>Pfade</th><th></th></tr></thead><tbody>${rows}</tbody></table></div>`:'<div class="bu-empty">Repository auswählen und Snapshots laden.</div>'}</section>${state.selectedSnapshot ? renderFileBrowser() : ''}`;
}
function snapshotItemPath(item) {