Nenhum local de armazenamento configurado. Crie um para poder configurar backup profiles.
';
return;
}
const STORAGE_TYPE_LABELS = {
'local': 'Local',
'ftp': 'FTP',
'sftp': 'SFTP',
'webdav': 'WebDAV',
'google-drive': 'Google Drive',
};
function storageLocationSummary(loc) {
const type = loc.type || 'local';
if (type === 'local') return `Nenhuma origem configurada. Crie uma para poder conectar a diferentes hosts Docker.
';
applyTranslations();
return;
}
list.innerHTML = `
Nenhum subdiretório encontrado.
';
} else {
html += data.dirs.map((d) =>
`
${indent}${escapeHtml(new Date(b.createdAt).toLocaleString('pt-BR'))}
${escapeHtml(modeLabel)} ${escapeHtml(b.status)} ${escapeHtml((b.containers || []).map((c) => c.containerName).join(', '))}
Restore
`;
}
function groupBackupsByFull(backups) {
const chronological = [...backups].sort((a, b) => new Date(a.createdAt) - new Date(b.createdAt));
const groupMap = new Map();
let currentFullId = null;
for (const backup of chronological) {
if (backup.mode === 'full') {
currentFullId = backup.id;
groupMap.set(currentFullId, { full: backup, incrementals: [] });
} else if (backup.mode === 'incremental') {
const targetId = backup.basedOnFullBackupId || currentFullId;
if (targetId && groupMap.has(targetId)) {
groupMap.get(targetId).incrementals.push(backup);
}
}
}
return [...groupMap.values()].sort((a, b) => new Date(b.full.createdAt) - new Date(a.full.createdAt));
}
async function updateDashboard() {
const allBackups = (await Promise.all(
state.profiles.map((p) => api(`/api/profiles/${p.id}/backups`))
)).flat();
// Last successful
const successful = allBackups
.filter((b) => b.status === 'ok' || b.status === 'partial')
.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
const lastBackupEl = document.querySelector('#lastBackupTime');
if (lastBackupEl) {
lastBackupEl.textContent = String(successful.length);
}
// Failed total
const failed = allBackups.filter((b) => b.status === 'error');
const failedEl = document.querySelector('#failedCount');
if (failedEl) failedEl.textContent = String(failed.length);
// Recent runs table
const recent = [...allBackups]
.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
.slice(0, 20);
const tbody = document.querySelector('#recentRunsBody');
if (!tbody) return;
if (!recent.length) {
tbody.innerHTML = 'Nenhum run encontrado.
#${index + 1}
${escapeHtml(profileName)} ${escapeHtml(b.status === 'ok' ? 'Completed' : b.status)} ${fileCount || '—'}
${sizeStr}
${started}
${duration}
🗑
`;
}).join('');
document.querySelector('#recentRunsBody')?.addEventListener('click', (e) => {
const link = e.target.closest('.profile-link');
if (link) {
e.preventDefault();
navigateTo('profiles');
}
}, { once: true });
}
function formatBytes(bytes) {
if (bytes >= 1e9) return (bytes / 1e9).toFixed(1) + ' GB';
if (bytes >= 1e6) return (bytes / 1e6).toFixed(1) + ' MB';
if (bytes >= 1e3) return (bytes / 1e3).toFixed(1) + ' KB';
return bytes + ' B';
}
async function loadAllRuns() {
const tbody = document.querySelector('#allRunsBody');
if (!tbody) return;
tbody.innerHTML = 'Carregando... Nenhum profile encontrado. Nenhum run encontrado.
${index + 1}
${escapeHtml(profileName)}
${escapeHtml(b.mode || '—')}
${escapeHtml(statusLabel)} ${containers || '—'}
${fileCount || '—'}
${sizeStr}
${escapeHtml(new Date(b.createdAt).toLocaleString('pt-BR'))}
Log
`;
}).join('');
}
async function api(path, options = {}) {
const response = await fetch(path, {
headers: {
...getAuthHeaders(),
...(options.headers || {}),
},
...options,
});
if (response.status === 401) {
authToken = null;
localStorage.removeItem('authToken');
showLoginOverlay();
throw new Error('Sessao expirada. Faca login novamente.');
}
if (response.status === 204) {
return null;
}
const payload = await response.json();
if (!response.ok) {
throw new Error(payload.error || 'Falha na requisicao');
}
return payload;
}
function escapeHtml(value) {
return String(value ?? '')
.replaceAll('&', '&')
.replaceAll('<', '<')
.replaceAll('>', '>')
.replaceAll('"', '"')
.replaceAll("'", ''');
}
function showToast(message, isError = false) {
elements.toast.textContent = message;
elements.toast.classList.remove('hidden', 'error');
if (isError) {
elements.toast.classList.add('error');
}
window.clearTimeout(showToast.timer);
showToast.timer = window.setTimeout(() => {
elements.toast.classList.add('hidden');
}, 3200);
}
function getSelectedContainerIds() {
return [...document.querySelectorAll('input[name="containerIds"]:checked')].map((input) => input.value);
}
const SYSTEM_MOUNT_PREFIXES = ['/dev', '/proc', '/sys', '/run', '/tmp'];
function isMountBlocked(destination) {
return SYSTEM_MOUNT_PREFIXES.some(
(prefix) => destination === prefix || destination.startsWith(prefix + '/'),
);
}
function renderContainers() {
elements.containerCount.textContent = String(state.containers.length);
const eligible = state.containers.filter((container) => container.state !== 'created');
if (!eligible.length) {
elements.containerOptions.innerHTML = 'Nenhum container encontrado.
';
return;
}
const selected = new Set(getSelectedContainerIds());
elements.containerOptions.innerHTML = eligible.map((container) => {
const hasVolumeSelection = Boolean(state.volumeSelections[container.id]?.length);
return `
${escapeHtml(container.name)}
${escapeHtml(container.image)} · ${escapeHtml(container.status)}${hasVolumeSelection ? ` · ${state.volumeSelections[container.id].length} volume(s) selecionado(s)` : ''}
${escapeHtml(container.state)}
`;
}).join('');
}
function backupButtons(profile) {
const isRunning = state.activeRuns.has(profile.id);
return `
Modo do backup
Full
Incremental
${isRunning ? 'Executando...' : 'Run'}
Editar
Excluir
`;
}
function getRunMode(profileId) {
const selector = document.querySelector(`select[data-run-mode="${profileId}"]`);
const value = selector?.value;
return value === 'incremental' ? 'incremental' : 'full';
}
function getProfileScopeLabel(scope) {
return scope === 'container' ? 'container inteiro' : 'somente volumes';
}
async function askVolumeSelection(containerId, containerName, currentSelections) {
let mounts;
try {
mounts = await api(`/api/containers/${encodeURIComponent(containerId)}/mounts`);
} catch (error) {
showToast(`Falha ao buscar volumes de ${containerName}: ${error.message}`, true);
return null;
}
if (!mounts.length) {
showToast(`Container ${containerName} não possui volumes.`, true);
return null;
}
const hasEligible = mounts.some((m) => !isMountBlocked(m.destination));
if (!hasEligible) {
showToast(`Container ${containerName} não possui volumes elegíveis (todos são caminhos de sistema).`, true);
return null;
}
elements.volumePickerSubtitle.textContent = `Container: ${containerName}`;
elements.volumePickerOptions.innerHTML = mounts.map((mount) => {
const blocked = isMountBlocked(mount.destination);
const isChecked = currentSelections
? currentSelections.includes(mount.destination)
: !blocked;
return `
${escapeHtml(mount.destination)}
${escapeHtml(mount.type)} · ${escapeHtml(mount.source || mount.name || '')}${blocked ? ' · sistema (bloqueado)' : ''}
`;
}).join('');
elements.volumePickerModal.classList.remove('hidden');
elements.volumePickerModal.setAttribute('aria-hidden', 'false');
return new Promise((resolve) => {
const closeModal = () => {
elements.volumePickerModal.classList.add('hidden');
elements.volumePickerModal.setAttribute('aria-hidden', 'true');
elements.volumePickerOptions.innerHTML = '';
};
const cleanup = () => {
elements.volumePickerConfirm.removeEventListener('click', onConfirm);
elements.volumePickerClose.removeEventListener('click', onCancel);
elements.volumePickerSelectAll.removeEventListener('click', onSelectAll);
elements.volumePickerModal.removeEventListener('click', onBackdropClick);
};
const onConfirm = () => {
const selected = [...elements.volumePickerOptions.querySelectorAll('input[name="volumePaths"]:checked')]
.map((input) => input.value);
if (!selected.length) {
showToast('Selecione ao menos um volume.', true);
return;
}
cleanup();
closeModal();
resolve(selected);
};
const onCancel = () => {
cleanup();
closeModal();
resolve(null);
};
const onSelectAll = () => {
for (const input of elements.volumePickerOptions.querySelectorAll('input[name="volumePaths"]:not([disabled])')) {
input.checked = true;
}
};
const onBackdropClick = (event) => {
if (event.target.closest('[data-action="close-volume-picker"]')) {
onCancel();
}
};
elements.volumePickerConfirm.addEventListener('click', onConfirm);
elements.volumePickerClose.addEventListener('click', onCancel);
elements.volumePickerSelectAll.addEventListener('click', onSelectAll);
elements.volumePickerModal.addEventListener('click', onBackdropClick);
});
}
async function handleContainerCheck(event) {
const input = event.target.closest('input[name="containerIds"]');
if (!input) {
return;
}
const scope = document.querySelector('input[name="backupScope"]:checked')?.value;
if (scope !== 'volumes') {
return;
}
const containerId = input.value;
const label = input.closest('label');
const containerName = label?.querySelector('strong')?.textContent || containerId.slice(0, 12);
if (!input.checked) {
delete state.volumeSelections[containerId];
renderContainers();
input.checked = false;
return;
}
const currentSelections = state.volumeSelections[containerId] || null;
const selected = await askVolumeSelection(containerId, containerName, currentSelections);
if (selected === null) {
input.checked = false;
return;
}
state.volumeSelections[containerId] = selected;
renderContainers();
const updatedInput = document.querySelector(`input[name="containerIds"][value="${CSS.escape(containerId)}"]`);
if (updatedInput) {
updatedInput.checked = true;
}
}
function askRestoreContainerSelection(profile, backup) {
const restorable = (backup.containers || []).filter((item) => item.status === 'ok');
if (!restorable.length) {
throw new Error('Nao ha containers validos neste backup para restaurar.');
}
elements.restoreModalSubtitle.textContent = `${profile.name} - ${new Date(backup.createdAt).toLocaleString('pt-BR')}`;
elements.restoreContainerOptions.innerHTML = restorable.map((item) => `
${escapeHtml(item.containerName)}
${escapeHtml(item.status)}
`).join('');
elements.restoreModal.classList.remove('hidden');
elements.restoreModal.setAttribute('aria-hidden', 'false');
return new Promise((resolve, reject) => {
const closeModal = () => {
elements.restoreModal.classList.add('hidden');
elements.restoreModal.setAttribute('aria-hidden', 'true');
elements.restoreContainerOptions.innerHTML = '';
};
const cleanup = () => {
elements.restoreModalConfirm.removeEventListener('click', onConfirm);
elements.restoreModalClose.removeEventListener('click', onCancel);
elements.restoreModalSelectAll.removeEventListener('click', onSelectAll);
elements.restoreModal.removeEventListener('click', onBackdropClick);
};
const onConfirm = () => {
const selected = [...elements.restoreContainerOptions.querySelectorAll('input[name="restoreContainerIds"]:checked')]
.map((input) => input.value);
if (!selected.length) {
showToast('Selecione ao menos um container para restaurar.', true);
return;
}
cleanup();
closeModal();
resolve(selected);
};
const onCancel = () => {
cleanup();
closeModal();
resolve(null);
};
const onSelectAll = () => {
for (const input of elements.restoreContainerOptions.querySelectorAll('input[name="restoreContainerIds"]')) {
input.checked = true;
}
};
const onBackdropClick = (event) => {
const closeTrigger = event.target.closest('[data-action="close-restore-modal"]');
if (closeTrigger) {
onCancel();
}
};
elements.restoreModalConfirm.addEventListener('click', onConfirm);
elements.restoreModalClose.addEventListener('click', onCancel);
elements.restoreModalSelectAll.addEventListener('click', onSelectAll);
elements.restoreModal.addEventListener('click', onBackdropClick);
});
}
function formatBackupFailures(backup) {
const failures = (backup.containers || []).filter((item) => item.status === 'error');
if (!failures.length) {
return '';
}
return `
Falhas: ${failures.map((item) => `${escapeHtml(item.containerName || item.containerId || 'container')}: ${escapeHtml(item.error || 'erro desconhecido')}`).join(' | ')}
`;
}
function progressBar(percent) {
const normalized = Math.max(0, Math.min(100, Number(percent) || 0));
return `
`;
}
function renderRunProgress(profileId) {
const run = state.activeRuns.get(profileId);
// Atualiza TODOS os elementos com o atributo (pode existir na aba Profiles E na aba Backups).
const hosts = document.querySelectorAll(`[data-run-progress="${CSS.escape(profileId)}"]`);
if (!hosts.length) {
return;
}
if (!run || !run.progress) {
for (const host of hosts) {
host.innerHTML = '';
host.classList.add('hidden');
}
return;
}
const overall = run.progress.overall || { total: 0, completed: 0, pending: 0, percent: 0 };
const currentContainer = run.progress.currentContainer;
const file = currentContainer?.file || { current: 0, total: 0, percent: 0, currentFile: null };
const containerPercent = Number.isFinite(currentContainer?.percent) ? currentContainer.percent : 0;
const stepLabel = currentContainer?.step || 'aguardando';
const stepMessage = currentContainer?.message || 'Aguardando processamento de arquivo...';
const logs = Array.isArray(currentContainer?.logs) ? currentContainer.logs.slice(-8) : [];
const operation = run?.kind === 'restore' || run?.progress?.operation === 'restore' ? 'restore' : 'backup';
const operationTitle = operation === 'restore' ? 'Progresso do restore' : 'Progresso do backup';
const progressHtml = `
Containers: ${escapeHtml(String(overall.completed))}/${escapeHtml(String(overall.total))} concluido(s)
Faltam ${escapeHtml(String(overall.pending))}
${progressBar(overall.percent)}
Container atual: ${escapeHtml(currentContainer?.containerName || currentContainer?.containerId || '-')}
${escapeHtml(String(Math.round(containerPercent)))}%
${progressBar(containerPercent)}
Arquivos: ${escapeHtml(String(file.current || 0))}/${escapeHtml(String(file.total || 0))}
${escapeHtml(String(Math.round(file.percent || 0)))}%
${progressBar(file.percent || 0)}
Etapa: ${escapeHtml(stepLabel)} · ${escapeHtml(file.currentFile || stepMessage)}
Log detalhado
${escapeHtml(String(logs.length))} evento(s)
${logs.length
? logs.map((line) => `${escapeHtml(line)} `).join('')
: 'Nenhum evento detalhado ainda. '}
`;
for (const host of hosts) {
host.classList.remove('hidden');
host.innerHTML = progressHtml;
}
}
function renderAllRunProgress() {
for (const profile of state.profiles) {
renderRunProgress(profile.id);
}
}
async function pollRun(profileId, runId) {
const doneStatus = new Set(['completed', 'completed-with-errors', 'error']);
while (true) {
const run = await api(`/api/runs/${runId}`);
state.activeRuns.set(profileId, run);
renderRunProgress(profileId);
if (doneStatus.has(run.status)) {
return run;
}
await new Promise((resolve) => {
window.setTimeout(resolve, 700);
});
}
}
function restoreButtons(profile, backups) {
if (!backups.length) {
return 'Nenhum backup executado ainda.
';
}
return `
${backups.map((backup) => `
${escapeHtml(new Date(backup.createdAt).toLocaleString('pt-BR'))}
${escapeHtml(backup.mode)} · ${escapeHtml(getProfileScopeLabel(backup.backupScope))} · ${escapeHtml(backup.status)} · ${escapeHtml(backup.containers.map((item) => item.containerName).join(', '))}
${formatBackupFailures(backup)}
Restore
`).join('')}
`;
}
async function renderProfiles() {
elements.profileCount.textContent = String(state.profiles.length);
if (!state.profiles.length) {
elements.profilesList.innerHTML = 'Nenhum profile salvo.
';
return;
}
const backupsByProfile = await Promise.all(
state.profiles.map(async (profile) => [profile.id, await api(`/api/profiles/${profile.id}/backups`)])
);
const backupMap = new Map(backupsByProfile);
elements.profilesList.innerHTML = state.profiles.map((profile) => `
${escapeHtml(profile.name)}
${escapeHtml(String(profile.containerIds.length))} container(es) · ${escapeHtml(getProfileScopeLabel(profile.backupScope))}
${escapeHtml(profile.backupDir)}
${backupButtons(profile)}
${profile.containerIds.map((containerId) => {
const container = state.containers.find((item) => item.id === containerId);
return `${escapeHtml(container ? container.name : containerId.slice(0, 12))} `;
}).join('')}
Restaurar
${restoreButtons(profile, backupMap.get(profile.id) || [])}
`).join('');
renderAllRunProgress();
}
function resetForm() {
elements.profileForm.reset();
elements.profileId.value = '';
state.volumeSelections = {};
renderContainers();
closeProfileModal();
}
function fillForm(profile) {
elements.profileId.value = profile.id;
elements.profileName.value = profile.name;
populateStorageLocationDropdown();
populateSourceDropdown();
if (profile.storageLocationId) {
elements.storageLocationSelect.value = profile.storageLocationId;
}
if (elements.profileSourceSelect) {
elements.profileSourceSelect.value = profile.sourceId || '';
}
const backupScope = profile.backupScope === 'container' ? 'container' : 'volumes';
document.querySelector(`input[name="backupScope"][value="${backupScope}"]`).checked = true;
state.volumeSelections = Object.assign({}, profile.volumeSelections || {});
renderContainers();
for (const containerId of profile.containerIds) {
const input = document.querySelector(`input[name="containerIds"][value="${containerId}"]`);
if (input) {
input.checked = true;
}
}
openProfileModal('Editar Profile');
}
async function loadContainers() {
state.containers = await api('/api/containers');
renderContainers();
}
async function loadProfiles() {
state.profiles = await api('/api/profiles');
await renderProfiles();
}
async function saveProfile(event) {
event.preventDefault();
const selectedContainerIds = getSelectedContainerIds();
const backupScope = document.querySelector('input[name="backupScope"]:checked').value;
const storageLocationId = elements.storageLocationSelect.value;
if (!storageLocationId) {
showToast('Selecione um local de armazenamento.', true);
return;
}
const volumeSelections = {};
if (backupScope === 'volumes') {
for (const id of selectedContainerIds) {
if (state.volumeSelections[id]?.length) {
volumeSelections[id] = state.volumeSelections[id];
}
}
}
const payload = {
id: elements.profileId.value || undefined,
name: elements.profileName.value,
storageLocationId,
sourceId: elements.profileSourceSelect?.value || undefined,
containerIds: selectedContainerIds,
backupScope,
volumeSelections,
};
try {
await api('/api/profiles', {
method: 'POST',
body: JSON.stringify(payload),
});
closeProfileModal();
await loadProfiles();
resetForm();
showToast('Profile salvo.');
} catch (error) {
showToast(error.message, true);
}
}
async function handleProfileAction(event) {
const button = event.target.closest('button[data-action]');
if (!button) {
return;
}
const { action, profileId, backupId } = button.dataset;
const profile = state.profiles.find((item) => item.id === profileId);
if (!profile) {
return;
}
try {
if (action === 'edit') {
fillForm(profile);
return;
}
if (action === 'delete') {
if (!window.confirm(`Excluir o profile ${profile.name}?`)) {
return;
}
await api(`/api/profiles/${profileId}`, { method: 'DELETE' });
await loadProfiles();
showToast('Profile removido.');
return;
}
if (action === 'run') {
button.disabled = true;
button.textContent = 'Executando...';
const mode = getRunMode(profileId);
let basedOnFullBackupId = null;
if (mode === 'incremental') {
const result = await resolveFullBackupId(profileId, profile);
if (result === undefined) {
// Blocked: no full backup available
button.disabled = false;
button.textContent = 'Run';
return;
}
if (result === null) {
// User cancelled modal
button.disabled = false;
button.textContent = 'Run';
return;
}
basedOnFullBackupId = result;
}
const start = await api(`/api/profiles/${profileId}/run`, { method: 'POST', body: JSON.stringify({ mode, basedOnFullBackupId }) });
state.activeRuns.set(profileId, {
id: start.runId,
profileId,
status: 'running',
progress: {
overall: { total: profile.containerIds.length, completed: 0, pending: profile.containerIds.length, percent: 0 },
currentContainer: null,
},
});
renderRunProgress(profileId);
const run = await pollRun(profileId, start.runId);
state.activeRuns.delete(profileId);
await loadProfiles();
if (run.status === 'error') {
showToast(run.error || 'Falha durante a execucao do backup.', true);
} else {
const backupStatus = run.result?.status;
const failures = (run.result?.containers || []).filter((item) => item.status === 'error');
if (failures.length) {
const details = failures
.map((item) => `${item.containerName || item.containerId || 'container'}: ${item.error || 'erro desconhecido'}`)
.join(' | ');
showToast(`Backup com falhas. ${details}`, true);
} else {
showToast(
backupStatus === 'ok' ? 'Backup concluido.' : 'Backup concluido com falhas parciais.',
backupStatus !== 'ok',
);
}
}
return;
}
if (action === 'restore') {
if (!window.confirm(`Restaurar o backup selecionado para o profile ${profile.name}?`)) {
return;
}
const backups = await api(`/api/profiles/${profileId}/backups`);
const selectedBackup = backups.find((item) => item.id === backupId);
if (!selectedBackup) {
throw new Error('Backup selecionado nao encontrado.');
}
const selectedContainerIds = await askRestoreContainerSelection(profile, selectedBackup);
if (!selectedContainerIds) {
return;
}
button.disabled = true;
button.textContent = 'Restaurando...';
const start = await api(`/api/profiles/${profileId}/restore`, {
method: 'POST',
body: JSON.stringify({ backupId, containerIds: selectedContainerIds }),
});
state.activeRuns.set(profileId, {
id: start.runId,
kind: 'restore',
profileId,
status: 'running',
progress: {
operation: 'restore',
overall: {
total: selectedContainerIds.length,
completed: 0,
pending: selectedContainerIds.length,
percent: 0,
},
currentContainer: null,
},
});
renderRunProgress(profileId);
const run = await pollRun(profileId, start.runId);
state.activeRuns.delete(profileId);
await loadProfiles();
if (!document.querySelector('#view-backups')?.classList.contains('hidden')) {
await renderBackupsView();
}
if (run.status === 'error') {
showToast(run.error || 'Falha durante a execucao do restore.', true);
} else {
const restoreStatus = run.result?.status;
const restoreStatsLines = (run.result?.containers || [])
.filter((item) => item.status === 'ok' && item.stats)
.map((item) => `${item.containerName}: apagados ${item.stats.deleted}, criados ${item.stats.created}, modificados ${item.stats.modified}`);
const failures = (run.result?.containers || []).filter((item) => item.status === 'error');
if (failures.length) {
const details = failures
.map((item) => `${item.containerName || item.containerId || 'container'}: ${item.error || 'erro desconhecido'}`)
.join(' | ');
const statsSummary = restoreStatsLines.length ? ` ${restoreStatsLines.join(' | ')}` : '';
showToast(`Restore com falhas. ${details}.${statsSummary}`, true);
} else {
const summary = restoreStatsLines.length ? ` ${restoreStatsLines.join(' | ')}` : '';
showToast(
`${restoreStatus === 'ok' ? 'Restore concluido.' : 'Restore concluido com falhas parciais.'}${summary}`,
restoreStatus !== 'ok',
);
}
}
}
} catch (error) {
showToast(error.message, true);
} finally {
button.disabled = false;
}
}
// ─── Schedules ────────────────────────────────────────────
const FREQUENCY_LABELS = {
once: 'Única vez',
daily: 'Diária',
weekly: 'Semanal',
monthly: 'Mensal',
};
async function loadSchedules() {
try {
state.schedules = await api('/api/schedules');
renderSchedulesList();
} catch (error) {
showToast(error.message, true);
}
}
function renderSchedulesList() {
const list = document.querySelector('#schedulesList');
if (!list) return;
if (!state.schedules.length) {
list.innerHTML = 'Nenhum agendamento configurado. Crie um para automatizar seus backups.
';
return;
}
list.innerHTML = `
`;
}
async function openScheduleModal(schedule = null) {
const title = document.querySelector('#scheduleModalTitle');
const form = document.querySelector('#scheduleForm');
if (!form || !title) return;
form.reset();
document.querySelector('#scheduleId').value = '';
document.querySelector('#scheduleFullBackupField').classList.add('hidden');
document.querySelector('#scheduleBasedOnFullBackupId').innerHTML =
'Auto (usar o mais recente disponível) ';
const profileSelect = document.querySelector('#scheduleProfileId');
profileSelect.innerHTML = 'Selecione um profile... ' +
state.profiles.map((p) =>
`${escapeHtml(p.name)} `
).join('');
const defaultDate = new Date();
defaultDate.setHours(defaultDate.getHours() + 1, 0, 0, 0);
document.querySelector('#scheduleDateTime').value = defaultDate.toISOString().slice(0, 16);
document.querySelector('#scheduleEnabled').checked = true;
if (schedule) {
title.textContent = 'Editar Agendamento';
document.querySelector('#scheduleId').value = schedule.id;
document.querySelector('#scheduleName').value = schedule.name || '';
profileSelect.value = schedule.profileId;
const modeRadio = document.querySelector(`input[name="scheduleBackupMode"][value="${schedule.backupMode || 'full'}"]`);
if (modeRadio) modeRadio.checked = true;
document.querySelector('#scheduleFrequency').value = schedule.frequency || 'daily';
document.querySelector('#scheduleEnabled').checked = schedule.enabled !== false;
if (schedule.scheduledAt) {
document.querySelector('#scheduleDateTime').value = schedule.scheduledAt.slice(0, 16);
}
if (schedule.backupMode === 'incremental') {
document.querySelector('#scheduleFullBackupField').classList.remove('hidden');
await loadFullBackupsForSchedule(schedule.profileId, schedule.basedOnFullBackupId);
}
} else {
title.textContent = 'Novo Agendamento';
}
document.querySelector('#scheduleFormModal').classList.remove('hidden');
document.querySelector('#scheduleFormModal').setAttribute('aria-hidden', 'false');
}
function closeScheduleModal() {
document.querySelector('#scheduleFormModal').classList.add('hidden');
document.querySelector('#scheduleFormModal').setAttribute('aria-hidden', 'true');
}
async function loadFullBackupsForSchedule(profileId, selectedId = null) {
const select = document.querySelector('#scheduleBasedOnFullBackupId');
if (!select) return;
select.innerHTML = 'Auto (usar o mais recente disponível) ';
if (!profileId) return;
try {
const backups = await api(`/api/profiles/${profileId}/backups`);
const fullBackups = backups
.filter((b) => b.mode === 'full' && (b.status === 'ok' || b.status === 'partial'))
.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
for (const b of fullBackups) {
const label = `${new Date(b.createdAt).toLocaleString('pt-BR')} · ${(b.containers || []).map((c) => c.containerName).join(', ')} · ${b.status}`;
const option = document.createElement('option');
option.value = b.id;
option.textContent = label;
select.appendChild(option);
}
if (selectedId) select.value = selectedId;
} catch {
// Non-fatal
}
}
document.querySelector('#schedulesList')?.addEventListener('change', async (e) => {
const checkbox = e.target.closest('.schedule-toggle');
if (!checkbox) return;
const scheduleId = checkbox.dataset.scheduleId;
try {
await api(`/api/schedules/${scheduleId}/toggle`, {
method: 'PATCH',
body: JSON.stringify({ enabled: checkbox.checked }),
});
showToast(checkbox.checked ? 'Agendamento ativado.' : 'Agendamento pausado.');
await loadSchedules();
} catch (error) {
showToast(error.message, true);
checkbox.checked = !checkbox.checked;
}
});
document.querySelector('#schedulesList')?.addEventListener('click', async (e) => {
const btn = e.target.closest('[data-schedule-action]');
if (!btn) return;
const { scheduleAction, scheduleId } = btn.dataset;
const schedule = state.schedules.find((s) => s.id === scheduleId);
if (!schedule) return;
if (scheduleAction === 'delete') {
if (!window.confirm(`Excluir o agendamento "${schedule.name || 'sem nome'}"?`)) return;
try {
await api(`/api/schedules/${scheduleId}`, { method: 'DELETE' });
await loadSchedules();
showToast('Agendamento removido.');
} catch (error) {
showToast(error.message, true);
}
} else if (scheduleAction === 'edit') {
if (!state.profiles.length) await loadProfiles();
await openScheduleModal(schedule);
}
});
document.querySelector('#openCreateScheduleModal')?.addEventListener('click', async () => {
if (!state.profiles.length) await loadProfiles();
await openScheduleModal();
});
document.querySelector('#scheduleModalClose')?.addEventListener('click', closeScheduleModal);
document.querySelector('#cancelScheduleForm')?.addEventListener('click', closeScheduleModal);
document.querySelector('#scheduleFormModal')?.addEventListener('click', (e) => {
if (e.target.closest('[data-action="close-schedule-modal"]')) closeScheduleModal();
});
document.querySelector('#scheduleProfileId')?.addEventListener('change', async (e) => {
const mode = document.querySelector('input[name="scheduleBackupMode"]:checked')?.value;
if (mode === 'incremental') {
await loadFullBackupsForSchedule(e.target.value, null);
}
});
document.querySelectorAll('input[name="scheduleBackupMode"]').forEach((radio) => {
radio.addEventListener('change', async (e) => {
const fullField = document.querySelector('#scheduleFullBackupField');
if (e.target.value === 'incremental') {
fullField.classList.remove('hidden');
const profileId = document.querySelector('#scheduleProfileId').value;
await loadFullBackupsForSchedule(profileId, null);
} else {
fullField.classList.add('hidden');
}
});
});
document.querySelector('#scheduleForm')?.addEventListener('submit', async (e) => {
e.preventDefault();
const profileId = document.querySelector('#scheduleProfileId').value;
if (!profileId) {
showToast('Selecione um profile.', true);
return;
}
const dateTimeValue = document.querySelector('#scheduleDateTime').value;
if (!dateTimeValue) {
showToast('Informe a data e hora de início.', true);
return;
}
const backupMode = document.querySelector('input[name="scheduleBackupMode"]:checked')?.value || 'full';
const basedOnFullBackupId = backupMode === 'incremental'
? (document.querySelector('#scheduleBasedOnFullBackupId').value || null)
: null;
const payload = {
id: document.querySelector('#scheduleId').value || undefined,
name: document.querySelector('#scheduleName').value.trim(),
profileId,
backupMode,
basedOnFullBackupId,
frequency: document.querySelector('#scheduleFrequency').value,
scheduledAt: new Date(dateTimeValue).toISOString(),
enabled: document.querySelector('#scheduleEnabled').checked,
};
try {
await api('/api/schedules', { method: 'POST', body: JSON.stringify(payload) });
closeScheduleModal();
await loadSchedules();
showToast('Agendamento salvo.');
} catch (error) {
showToast(error.message, true);
}
});
// ─── Login overlay ────────────────────────────────────────
function showLoginOverlay() {
const overlay = document.querySelector('#loginOverlay');
if (!overlay) return;
overlay.classList.remove('hidden');
overlay.setAttribute('aria-hidden', 'false');
document.querySelector('#logoutBtn')?.classList.add('hidden');
}
function hideLoginOverlay() {
const overlay = document.querySelector('#loginOverlay');
if (!overlay) return;
overlay.classList.add('hidden');
overlay.setAttribute('aria-hidden', 'true');
}
document.querySelector('#loginForm')?.addEventListener('submit', async (e) => {
e.preventDefault();
const username = document.querySelector('#loginUsername')?.value || '';
const password = document.querySelector('#loginPassword')?.value || '';
const errorEl = document.querySelector('#loginError');
try {
const result = await fetch('/api/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username, password }),
});
const data = await result.json();
if (!result.ok) {
errorEl?.classList.remove('hidden');
return;
}
errorEl?.classList.add('hidden');
authToken = data.token;
if (authToken) localStorage.setItem('authToken', authToken);
hideLoginOverlay();
document.querySelector('#logoutBtn')?.classList.remove('hidden');
await init();
} catch {
errorEl?.classList.remove('hidden');
}
});
document.querySelector('#logoutBtn')?.addEventListener('click', () => {
authToken = null;
localStorage.removeItem('authToken');
showLoginOverlay();
});
async function checkAuthAndInit() {
try {
const status = await fetch('/api/auth-status').then((r) => r.json());
if (!status.requireAuth) {
hideLoginOverlay();
await init();
return;
}
// Auth required
if (authToken) {
// Try using stored token
const probe = await fetch('/api/profiles', { headers: { 'x-auth-token': authToken } });
if (probe.ok) {
hideLoginOverlay();
document.querySelector('#logoutBtn')?.classList.remove('hidden');
await init();
return;
}
// Token invalid
authToken = null;
localStorage.removeItem('authToken');
}
showLoginOverlay();
} catch {
// If health check fails, still show the app (might be first load)
await init();
}
}
// ─── Settings ─────────────────────────────────────────────
function buildLanguageSelect() {
const select = document.querySelector('#settingsLanguage');
if (!select) return;
select.innerHTML = Object.entries(LOCALE_NAMES).map(([code, name]) =>
`${name} `
).join('');
select.value = currentLang;
}
async function loadSettingsView() {
buildLanguageSelect();
const themeSelect = document.querySelector('#settingsTheme');
if (themeSelect) themeSelect.value = localStorage.getItem('theme') || 'default';
try {
const settings = await api('/api/settings');
const select = document.querySelector('#settingsLanguage');
if (select && settings.language) select.value = settings.language;
const authCheck = document.querySelector('#settingsRequireAuth');
if (authCheck) authCheck.checked = settings.requireAuth;
const authFields = document.querySelector('#authFields');
if (authFields) authFields.classList.toggle('hidden', !settings.requireAuth);
const usernameField = document.querySelector('#settingsUsername');
if (usernameField) usernameField.value = settings.username || '';
} catch {
// Non-fatal: use defaults
}
}
document.querySelector('#settingsRequireAuth')?.addEventListener('change', (e) => {
document.querySelector('#authFields')?.classList.toggle('hidden', !e.target.checked);
});
document.querySelector('#saveSettingsBtn')?.addEventListener('click', async () => {
const language = document.querySelector('#settingsLanguage')?.value || currentLang;
const requireAuth = document.querySelector('#settingsRequireAuth')?.checked || false;
const username = document.querySelector('#settingsUsername')?.value?.trim() || '';
const password = document.querySelector('#settingsPassword')?.value || '';
try {
await api('/api/settings', {
method: 'POST',
body: JSON.stringify({ language, requireAuth, username, password: password || undefined }),
});
currentLang = language;
localStorage.setItem('lang', language);
applyTranslations();
showToast(t('settings.saved'));
} catch (error) {
showToast(error.message, true);
}
});
// ─── About ────────────────────────────────────────────────
function markdownInline(raw) {
return raw
.replace(/&/g, '&').replace(//g, '>')
.replace(/\*\*([^*]+)\*\*/g, '$1 ')
.replace(/`([^`]+)`/g, '$1');
}
function parseChangelogSection(markdown, maxEntries = 4) {
// Extract from ## Changelog (or ## 🗂 Changelog etc.) to next ##
const start = markdown.search(/^##\s+[^\n]*[Cc]hangelog/m);
if (start === -1) return null;
const rest = markdown.slice(start);
const nextSection = rest.slice(1).search(/^## /m);
const section = nextSection === -1 ? rest : rest.slice(0, nextSection + 1);
const lines = section.split('\n');
let html = '';
let inList = false;
let entryCount = 0;
for (const line of lines) {
const h3 = line.match(/^###\s+(.+)/);
const h4 = line.match(/^####\s+(.+)/);
const li = line.match(/^-\s+(.+)/);
if (h3) {
if (entryCount >= maxEntries) break;
if (inList) { html += ''; inList = false; }
html += `${markdownInline(h3[1].replace(/\[([^\]]+)\]/, '$1'))} `;
entryCount += 1;
} else if (h4) {
if (entryCount > maxEntries) break;
if (inList) { html += ''; inList = false; }
html += `${markdownInline(h4[1])} `;
} else if (li) {
if (entryCount > maxEntries) break;
if (!inList) { html += ''; inList = true; }
html += `${markdownInline(li[1])} `;
} else if (line.startsWith('---') || line.startsWith('## ')) {
if (inList) { html += ' '; inList = false; }
}
}
if (inList) html += '';
return html || null;
}
async function loadAboutView() {
const currentVerEl = document.querySelector('#aboutCurrentVersion');
const latestVerEl = document.querySelector('#aboutLatestVersion');
const updateWrap = document.querySelector('#aboutUpdateWrap');
const updateStatus = document.querySelector('#aboutUpdateStatus');
const updateBtn = document.querySelector('#aboutUpdateBtn');
const changelogEl = document.querySelector('#aboutChangelog');
if (latestVerEl) latestVerEl.textContent = t('about.checking');
// Fetch version info and changelog in parallel
const [aboutResult, changelogResult] = await Promise.allSettled([
api('/api/about'),
fetch('https://raw.githubusercontent.com/asabino2/dockerbackup/main/README.md').then((r) => r.text()),
]);
// Version info
if (aboutResult.status === 'fulfilled') {
const about = aboutResult.value;
const current = about.currentVersion || '—';
const latest = about.latestVersion || null;
if (currentVerEl) currentVerEl.textContent = current;
if (latestVerEl) latestVerEl.textContent = latest || '—';
if (updateWrap) updateWrap.classList.remove('hidden');
if (latest && current !== latest) {
if (updateStatus) updateStatus.textContent = t('about.updateAvailable');
if (updateBtn) updateBtn.classList.remove('hidden');
} else if (latest) {
if (updateStatus) updateStatus.textContent = t('about.upToDate');
if (updateBtn) updateBtn.classList.add('hidden');
} else {
if (updateStatus) updateStatus.textContent = t('about.checkError');
if (updateBtn) updateBtn.classList.add('hidden');
}
} else {
if (currentVerEl) currentVerEl.textContent = '—';
if (latestVerEl) latestVerEl.textContent = '—';
showToast(aboutResult.reason?.message || 'Erro ao buscar versão', true);
}
// Changelog from GitHub README
if (changelogEl) {
if (changelogResult.status === 'fulfilled') {
const html = parseChangelogSection(changelogResult.value);
changelogEl.innerHTML = html || 'Changelog não encontrado.
';
} else {
changelogEl.innerHTML = 'Não foi possível carregar o changelog.
';
}
}
}
document.querySelector('#aboutUpdateBtn')?.addEventListener('click', async () => {
const btn = document.querySelector('#aboutUpdateBtn');
const status = document.querySelector('#aboutUpdateStatus');
if (btn) { btn.disabled = true; btn.textContent = t('about.updating'); }
try {
await api('/api/update', { method: 'POST' });
if (status) status.textContent = t('about.updateSuccess');
showToast(t('about.updateSuccess'));
} catch (error) {
if (btn) { btn.disabled = false; btn.textContent = t('about.update'); }
if (status) status.textContent = t('about.updateError');
showToast(error.message, true);
}
});
async function init() {
applyTranslations();
try {
await Promise.all([loadContainers(), loadProfiles(), loadStorageLocations(), loadSources()]);
await updateDashboard();
} catch (error) {
showToast(error.message, true);
}
}
elements.profileForm.addEventListener('submit', saveProfile);
elements.containerOptions.addEventListener('change', handleContainerCheck);
document.querySelector('#refreshContainers').addEventListener('click', init);
document.querySelector('#reloadProfiles').addEventListener('click', loadProfiles);
document.querySelector('#clearForm').addEventListener('click', resetForm);
elements.profilesList.addEventListener('click', handleProfileAction);
document.querySelector('#backupsViewList').addEventListener('click', handleProfileAction);
document.querySelector('#refreshRuns')?.addEventListener('click', () => loadAllRuns());
// Run log modal
document.querySelector('#allRunsBody')?.addEventListener('click', async (e) => {
const btn = e.target.closest('.run-log-btn');
if (!btn) return;
const backupId = btn.dataset.backupId;
if (!backupId) return;
openRunLogModal(backupId);
});
document.querySelector('#runLogModalClose')?.addEventListener('click', () => {
document.querySelector('#runLogModal')?.classList.add('hidden');
});
document.querySelector('#runLogModal')?.addEventListener('click', (e) => {
if (e.target.dataset.action === 'close-run-log-modal') {
document.querySelector('#runLogModal').classList.add('hidden');
}
});
async function openRunLogModal(backupId) {
const modal = document.querySelector('#runLogModal');
const content = document.querySelector('#runLogContent');
if (!modal || !content) return;
modal.classList.remove('hidden');
content.innerHTML = 'Carregando log...
';
try {
const backup = await api(`/api/backups/${encodeURIComponent(backupId)}`);
const containers = backup.containers || [];
if (!containers.length) {
content.innerHTML = 'Nenhum log disponível para este backup.
';
return;
}
let html = '';
for (const c of containers) {
const name = escapeHtml(c.containerName || c.containerId || '?');
const status = escapeHtml(c.status || '—');
html += ``;
html += `
${name} ${status} `;
if (c.error) {
html += `
Erro: ${escapeHtml(c.error)}
`;
}
const logs = c.logs || [];
if (logs.length) {
html += `
${logs.map((l) => escapeHtml(l)).join('\n')} `;
} else {
html += `
Sem log detalhado (backup pode ter sido criado antes desta versão).
`;
}
html += `
Erro ao carregar log: ${escapeHtml(err.message)}
`;
}
}
// Apply translations early (before auth check so login page is translated)
applyTranslations();
checkAuthAndInit();