v0.11.9 UI Polish Fixes for backup section

- Fix 1: margin-bottom 1rem→1.5rem on .deploy-cross-drive
- Fix 2: info tooltip on "Módszer"; rename restic to "Titkosított mentés"
- Fix 3: replace disabled checkbox with green/gray dot status indicator
- Fix 4: progressive disclosure — dest/method/schedule selects disabled
  until "Engedélyezve" checked; backend preserves config when disabling
- Fix 5: remove all emoji from deploy.html and backups.html backup sections

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-02-17 16:12:06 +01:00
parent a56448f7c9
commit a4713c054b
6 changed files with 182 additions and 42 deletions
+50 -21
View File
@@ -62,7 +62,7 @@
{{end}}
{{if .StaleData}}
<div class="deploy-stale-data">
<h4>🗑️ Korábbi adatok</h4>
<h4>Korábbi adatok</h4>
<p class="form-hint" style="margin-bottom:1rem">
Az alkalmazás adatainak másolata megtalálható egy másik tárolón is.
Ez általában áthelyezés után marad hátra.
@@ -84,7 +84,7 @@
</div>
</div>
<button class="btn btn-sm btn-danger" onclick="deleteStaleData('{{$.Meta.Slug}}', '{{.Path}}', this)">
🗑️ Korábbi adatok törlése
Korábbi adatok törlése
</button>
</div>
{{end}}
@@ -95,13 +95,17 @@
{{if .AlreadyDeployed}}
{{if .StorageInfo}}
<div class="deploy-cross-drive">
<h4>🔒 Biztonsági mentés</h4>
<h4>Biztonsági mentés</h4>
<div class="cross-drive-nightly">
<label class="toggle">
<input type="checkbox" id="app-backup-enabled" {{if .AppBackupEnabled}}checked{{end}} disabled>
<div class="cross-drive-nightly-status">
{{if .AppBackupEnabled}}
<span class="nightly-status-indicator nightly-enabled"></span>
{{else}}
<span class="nightly-status-indicator nightly-disabled"></span>
{{end}}
<span class="toggle-label">Napi mentésbe foglalás (restic, helyi)</span>
</label>
</div>
<span class="form-hint" style="display:block;margin-top:.25rem">
Az alkalmazás adatai bekerülnek az éjszakai biztonsági mentésbe.
<a href="/backups" style="color:var(--accent-blue)">Beállítás a mentési oldalon</a>
@@ -113,7 +117,7 @@
<p style="font-weight:500;margin-bottom:1rem">Másolat másik meghajtóra:</p>
{{if .BackupDestWarning}}
<div class="alert alert-warning" style="margin-bottom:1rem">⚠️ {{.BackupDestWarning}}</div>
<div class="alert alert-warning" style="margin-bottom:1rem">{{.BackupDestWarning}}</div>
{{end}}
{{if not .BackupDestPaths}}
@@ -128,13 +132,15 @@
<span class="settings-label">Engedélyezve</span>
<label class="toggle" style="margin:0">
<input type="checkbox" name="cross_drive_enabled" id="cross-drive-enabled"
{{if and .CrossDriveConfig .CrossDriveConfig.Enabled}}checked{{end}}>
{{if and .CrossDriveConfig .CrossDriveConfig.Enabled}}checked{{end}}
onchange="toggleCrossDriveFields()">
<span class="toggle-label">Igen</span>
</label>
</div>
<div class="settings-row">
<span class="settings-label">Cél tárhely</span>
<select name="cross_drive_dest" class="form-control" style="max-width:20rem">
<select name="cross_drive_dest" id="cd-dest" class="form-control cross-drive-field" style="max-width:20rem"
{{if not (and .CrossDriveConfig .CrossDriveConfig.Enabled)}}disabled{{end}}>
{{range .BackupDestPaths}}
<option value="{{.Path}}"
{{if and $.CrossDriveConfig (eq $.CrossDriveConfig.DestinationPath .Path)}}selected{{end}}>
@@ -145,19 +151,34 @@
</select>
</div>
<div class="settings-row">
<span class="settings-label">Módszer</span>
<select name="cross_drive_method" class="form-control" style="max-width:20rem">
<span class="settings-label">
Módszer
<span class="info-tooltip" tabindex="0">
<span class="info-icon">i</span>
<span class="info-tooltip-text">
<strong>Egyszerű másolat (rsync):</strong> Tükörszerű másolat, a fájlok közvetlenül böngészhetők.
Nem titkosított, nem verziózott — mindig a legfrissebb állapotot tartalmazza.
<br><br>
<strong>Titkosított mentés (restic):</strong> Titkosított, tömörített, verziózott mentés.
Korábbi állapotok visszaállíthatók. Nem böngészhető közvetlenül —
visszaállításhoz a vezérlőpult szükséges.
</span>
</span>
</span>
<select name="cross_drive_method" id="cd-method" class="form-control cross-drive-field" style="max-width:20rem"
{{if not (and .CrossDriveConfig .CrossDriveConfig.Enabled)}}disabled{{end}}>
<option value="rsync" {{if and .CrossDriveConfig (eq .CrossDriveConfig.Method "rsync")}}selected{{end}}>
Egyszerű másolat (rsync)
</option>
<option value="restic" {{if and .CrossDriveConfig (eq .CrossDriveConfig.Method "restic")}}selected{{end}}>
Verziózott mentés (restic)
Titkosított mentés (restic)
</option>
</select>
</div>
<div class="settings-row">
<span class="settings-label">Ütemezés</span>
<select name="cross_drive_schedule" class="form-control" style="max-width:20rem">
<select name="cross_drive_schedule" id="cd-schedule" class="form-control cross-drive-field" style="max-width:20rem"
{{if not (and .CrossDriveConfig .CrossDriveConfig.Enabled)}}disabled{{end}}>
<option value="daily" {{if and .CrossDriveConfig (eq .CrossDriveConfig.Schedule "daily")}}selected{{end}}>
Naponta (03:30)
</option>
@@ -175,7 +196,7 @@
{{if .CrossDriveConfig.LastRun}}
<div class="form-hint" style="margin-bottom:.75rem">
Utolsó futás: {{.CrossDriveConfig.LastRun}}
{{if eq .CrossDriveConfig.LastStatus "ok"}}Sikeres{{else if eq .CrossDriveConfig.LastStatus "error"}}Hiba: {{.CrossDriveConfig.LastError}}{{else if eq .CrossDriveConfig.LastStatus "running"}}Fut...{{end}}
{{if eq .CrossDriveConfig.LastStatus "ok"}}Sikeres{{else if eq .CrossDriveConfig.LastStatus "error"}}Hiba: {{.CrossDriveConfig.LastError}}{{else if eq .CrossDriveConfig.LastStatus "running"}}Fut...{{end}}
{{if .CrossDriveConfig.LastDuration}} ({{.CrossDriveConfig.LastDuration}}){{end}}
{{if .CrossDriveConfig.LastSizeHuman}} — {{.CrossDriveConfig.LastSizeHuman}}{{end}}
</div>
@@ -194,7 +215,7 @@
</form>
<div class="form-hint" style="margin-top:.75rem;color:var(--text-muted)">
⚠️ A cél meghajtó legyen más fizikai eszköz, mint az alkalmazás adattárolója.
A cél meghajtó legyen más fizikai eszköz, mint az alkalmazás adattárolója.
</div>
{{end}}
</div>
@@ -353,6 +374,14 @@
</div>
<script>
function toggleCrossDriveFields() {
var enabled = document.getElementById('cross-drive-enabled').checked;
var fields = document.querySelectorAll('.cross-drive-field');
for (var i = 0; i < fields.length; i++) {
fields[i].disabled = !enabled;
}
}
function triggerCrossDriveBackup(stackName, btn) {
btn.disabled = true;
btn.textContent = 'Mentés folyamatban...';
@@ -365,7 +394,7 @@ function triggerCrossDriveBackup(stackName, btn) {
btn.textContent = 'Mentés most';
return;
}
btn.textContent = 'Mentés folyamatban...';
btn.textContent = 'Mentés folyamatban...';
// Poll status
var poll = setInterval(function() {
fetch('/api/stacks/' + stackName + '/cross-backup/status')
@@ -376,9 +405,9 @@ function triggerCrossDriveBackup(stackName, btn) {
clearInterval(poll);
var status = s.data.last_status;
if (status === 'ok') {
btn.textContent = 'Mentés kész';
btn.textContent = 'Mentés kész';
} else {
btn.textContent = 'Hiba';
btn.textContent = 'Hiba';
alert('Hiba: ' + (s.data.last_error || 'Ismeretlen hiba'));
}
setTimeout(function() { location.reload(); }, 2000);
@@ -439,12 +468,12 @@ function deleteStaleData(stackName, stalePath, btn) {
if (!data.ok) {
alert('Hiba: ' + (data.error || 'Ismeretlen hiba'));
btn.disabled = false;
btn.textContent = '🗑️ Korábbi adatok törlése';
btn.textContent = 'Korábbi adatok törlése';
return;
}
var msg = 'Korábbi adatok törölve!\n\nFelszabadított hely: ' + (data.freed_human || '?');
var msg = 'Korábbi adatok törölve!\n\nFelszabadított hely: ' + (data.freed_human || '?');
if (data.errors && data.errors.length > 0) {
msg += '\n\n⚠️ Néhány hiba történt:\n' + data.errors.join('\n');
msg += '\n\nNéhány hiba történt:\n' + data.errors.join('\n');
}
alert(msg);
// Remove the stale data card from DOM