v0.12.0: simplify backup page app data section

Replace the complex "Alkalmazás adatok" form (checkboxes, paths, volumes,
save button) with a clean read-only status list. Each app shows its name
(linked to its deploy page) and a simple status: Aktív / Inaktív / N/A.

Also include ALL deployed stacks in the list (not just HDD-capable ones),
so apps without user data appear with N/A status.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-02-17 16:35:26 +01:00
parent 6b27753b40
commit 2b01e09579
3 changed files with 67 additions and 76 deletions
+1 -4
View File
@@ -96,10 +96,7 @@ func DiscoverAppData(provider StackDataProvider, backupPrefs map[string]bool, di
info.BackupEnabled = backupPrefs[stack.Name]
// Only include apps that have some data to show
if info.HasHDDData || len(info.DockerVolumes) > 0 {
result = append(result, info)
}
result = append(result, info)
}
return result
+18 -38
View File
@@ -233,53 +233,33 @@
{{end}}
</div>
<!-- Section 4: App data backup toggles -->
<!-- Section 4: App data backup status (read-only) -->
{{if .Backup.AppDataInfo}}
<div class="backup-section-card">
<h3>Alkalmazás adatok</h3>
<p class="backup-section-desc">Az alkalmazások felhasználói adatainak biztonsági mentése.</p>
<form method="POST" action="/settings/app-backup">
<div class="app-backup-list">
{{range .Backup.AppDataInfo}}
<div class="app-backup-item">
<div class="app-backup-header">
<p class="backup-section-desc">Az alkalmazások felhasználói adatainak mentési állapota. Beállítás az alkalmazás oldalán.</p>
<div class="app-backup-list">
{{range .Backup.AppDataInfo}}
<div class="app-backup-item">
<div class="app-backup-header">
<a href="/stacks/{{.StackName}}/deploy" class="app-backup-name-link">{{.DisplayName}}</a>
<div class="app-backup-status-row">
{{if .HasHDDData}}
<label class="app-backup-toggle">
<input type="checkbox" name="backup_{{.StackName}}" value="on" {{if .BackupEnabled}}checked{{end}}>
<span class="app-backup-name">{{.DisplayName}}</span>
</label>
{{else}}
<div class="app-backup-toggle">
<span class="app-backup-disabled-icon"></span>
<span class="app-backup-name">{{.DisplayName}}</span>
</div>
{{end}}
<div style="display:flex;align-items:center;gap:.5rem">
{{if .StorageLabel}}<span class="meta-badge meta-badge-storage">{{.StorageLabel}}</span>{{end}}
{{if .HasHDDData}}<span class="app-backup-size mono">{{.HDDSizeHuman}}</span>{{end}}
</div>
</div>
<div class="app-backup-details">
{{range .HDDPaths}}
<div class="app-backup-path mono">{{.HostPath}} {{if .Exists}}({{.SizeHuman}}){{else}}<span class="relative-time">(nem létezik)</span>{{end}}</div>
{{end}}
{{range .DockerVolumes}}
<div class="app-backup-volume">Docker kötet: {{.Name}} <span class="relative-time">(nem mentett)</span></div>
{{end}}
{{if .HasDBDump}}
<div class="app-backup-dbinfo">Adatbázis mentés naponta (DB dump)</div>
{{if .BackupEnabled}}
<span class="app-backup-size mono">{{.HDDSizeHuman}}</span>
<span class="app-backup-status app-backup-active">Aktív</span>
{{else}}
<span class="app-backup-status app-backup-inactive">Inaktív</span>
{{end}}
{{else}}
<span class="app-backup-status app-backup-na">N/A</span>
{{end}}
</div>
</div>
{{end}}
</div>
<div class="app-backup-actions">
<button type="submit" class="btn btn-sm btn-primary">Mentés</button>
</div>
<div class="app-backup-notice">
<span class="relative-time">Docker kötetek mentése jelenleg nem támogatott. Az adatbázisokat az automatikus DB dump menti naponta.</span>
</div>
</form>
{{end}}
</div>
</div>
{{end}}
+48 -34
View File
@@ -1804,7 +1804,7 @@ a.stat-card:hover {
color: var(--text-primary);
}
/* --- Backup page: App backup toggles --- */
/* --- Backup page: App backup status (read-only) --- */
.backup-section-desc {
color: var(--text-secondary);
font-size: .85rem;
@@ -1826,54 +1826,68 @@ a.stat-card:hover {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: .25rem;
}
.app-backup-toggle {
.app-backup-name-link {
font-weight: 500;
font-size: .9rem;
color: var(--text-primary);
text-decoration: none;
}
.app-backup-name-link:hover {
color: var(--accent-blue);
text-decoration: underline;
}
.app-backup-status-row {
display: flex;
align-items: center;
gap: .5rem;
cursor: pointer;
}
.app-backup-toggle input[type="checkbox"] {
accent-color: var(--accent-blue);
}
.app-backup-name {
font-weight: 500;
font-size: .9rem;
}
.app-backup-disabled-icon {
color: var(--text-muted);
font-size: .9rem;
width: 16px;
text-align: center;
}
.app-backup-size {
font-size: .8rem;
color: var(--text-muted);
}
.app-backup-details {
padding-left: 1.5rem;
}
.app-backup-path {
.app-backup-status {
font-size: .8rem;
color: var(--text-secondary);
padding: .1rem 0;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: .35rem;
}
.app-backup-volume {
font-size: .8rem;
.app-backup-status::before {
content: '';
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.app-backup-active {
color: var(--green);
}
.app-backup-active::before {
background: var(--green);
box-shadow: 0 0 4px rgba(35, 134, 54, 0.4);
}
.app-backup-inactive {
color: var(--text-muted);
padding: .1rem 0;
}
.app-backup-dbinfo {
font-size: .8rem;
.app-backup-inactive::before {
border: 1px solid var(--text-muted);
background: transparent;
width: 6px;
height: 6px;
}
.app-backup-na {
color: var(--text-muted);
padding: .1rem 0;
}
.app-backup-actions {
margin-top: .75rem;
}
.app-backup-notice {
margin-top: .75rem;
.app-backup-na::before {
content: '—';
width: auto;
height: auto;
border-radius: 0;
background: none;
border: none;
box-shadow: none;
font-size: .8rem;
}