M_Viper/Git-Manager-Gui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 10 Wiki Activity

Update from Git Manager GUI

Browse Source
This commit is contained in:
M_Viper
2026-03-24 21:38:23 +01:00
parent 12dbdbb28e
commit a1f7c66f67
3 changed files with 1383 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
renderer/index.html
View File

@@ -198,26 +198,42 @@
</div>
</section>
<section class="settings-panel settings-panel--system">
<section class="settings-panel settings-panel--backups">
<div class="settings-panel-header">
<div>
<h3>System</h3>
<p>Verhalten beim Windows-Start steuern.</p>
<h3>💽 Lokale Backups</h3>
<p>Automatische lokale Backups in einen Zielordner.</p>
</div>
</div>
<div class="settings-toggle-list">
<label class="settings-toggle-row" for="settingAutostart">
<label class="settings-toggle-row" for="settingAutoBackup">
<span class="settings-toggle-info">
<span class="settings-toggle-title">🚀 Mit Windows starten</span>
<span class="settings-toggle-desc">Startet die App automatisch beim Anmelden, minimiert im System-Tray.</span>
<span class="settings-toggle-title">🔄 Auto-Backup nach Push</span>
<span class="settings-toggle-desc">Erstellt automatisch vor jedem Upload ein lokales Backup im gewählten Zielordner.</span>
</span>
<span class="toggle-switch">
<input type="checkbox" id="settingAutostart">
<input type="checkbox" id="settingAutoBackup">
<span class="toggle-track"></span>
</span>
</label>
</div>
<button id="btnOpenBackupManagement" style="
width: 100%;
padding: 12px;
background: linear-gradient(135deg, rgba(0,212,255,0.1), rgba(100,200,255,0.05));
border: 1px solid rgba(0,212,255,0.3);
border-radius: 6px;
color: var(--accent-primary);
cursor: pointer;
font-weight: 500;
margin-top: 12px;
">
💾 Backup-Verwaltung öffnen →
</button>
</section>
</div>
<div class="settings-column settings-column--right">
@@ -239,6 +255,27 @@
</div>
</section>
<section class="settings-panel settings-panel--system">
<div class="settings-panel-header">
<div>
<h3>System</h3>
<p>Verhalten beim Windows-Start steuern.</p>
</div>
</div>
<div class="settings-toggle-list">
<label class="settings-toggle-row" for="settingAutostart">
<span class="settings-toggle-info">
<span class="settings-toggle-title">🚀 Mit Windows starten</span>
<span class="settings-toggle-desc">Startet die App automatisch beim Anmelden, minimiert im System-Tray.</span>
</span>
<span class="toggle-switch">
<input type="checkbox" id="settingAutostart">
<span class="toggle-track"></span>
</span>
</label>
</div>
</section>
<section class="settings-panel settings-panel--app">
<div class="settings-panel-header">
<div>
@@ -465,6 +502,72 @@
</div>
</div>
<!-- Backup Management Modal -->
<div id="backupManagementModal" class="hidden">
<div class="backup-management-card">
<div class="backup-modal-header">
<h2 style="margin: 0; display: flex; align-items: center; gap: 10px; font-size: 18px;">
<span>📦</span> Backup-Verwaltung
</h2>
<button id="btnCloseBackupModal" class="backup-modal-close" title="Schließen">✕</button>
</div>
<div class="backup-modal-body">
<div class="backup-credentials-section" style="display: flex;">
<div class="backup-input-group">
<label for="backupSourceSelect">Backup-Quelle (aus vorhandenen Projekten)</label>
<select id="backupSourceSelect">
<option value="">-- Wähle aus vorhandenen Projekten --</option>
</select>
<small style="color: var(--text-muted); font-size: 11px;">
Option "Alles komplett sichern" erstellt Backups aller verfügbaren Git-Projekte im gewählten Zielordner.
</small>
</div>
</div>
<!-- Local Credentials -->
<div id="localCredentials" class="backup-credentials-section">
<div class="backup-input-group">
<label for="localBackupFolder">Backup-Zielordner</label>
<div style="display: grid; grid-template-columns: 1fr auto; gap: 8px;">
<input id="localBackupFolder" type="text" placeholder="C:/Backups/GitManager" readonly>
<button id="btnPickLocalBackupFolder" class="backup-btn backup-btn-secondary" type="button" style="min-width: 120px;">📁 Ordner wählen</button>
</div>
</div>
</div>
<!-- Section Divider -->
<div style="height: 1px; background: rgba(88, 213, 255, 0.2); margin: 8px 0;"></div>
<!-- Backup List Section -->
<div style="margin-top: 16px;">
<h3 style="margin: 0 0 12px 0; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--accent-primary);">📋 Gespeicherte Backups</h3>
<div id="backupListContainer" style="
background: rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 6px;
max-height: 250px;
overflow-y: auto;
min-height: 100px;
display: flex;
align-items: center;
justify-content: center;
">
<div style="padding: 16px; text-align: center; color: var(--text-muted); font-size: 13px;">
⏳ Lade Liste... oder keine Backups vorhanden
</div>
</div>
<!-- Backup Action Buttons -->
<div class="backup-modal-buttons">
<button id="btnCreateBackupNow" class="backup-btn backup-btn-primary" style="flex: 1;">➕ Backup erstellen</button>
<button id="btnRefreshBackupsList" class="backup-btn backup-btn-secondary" style="flex: 1;">🔄 Aktualisieren</button>
</div>
</div>
</div>
</div>
</div>
</div> <script src="renderer.js"></script>
</body>
</html>

815
renderer/renderer.js
View File

@@ -3,6 +3,8 @@ const $ = id => document.getElementById(id);
let selectedFolder = null;
let giteaCache = {};
let currentLocalProjects = [];
let backupGitRepos = [];
/* ================================================
FAVORITEN & ZULETZT GEÖFFNET — State & Helpers
@@ -1415,6 +1417,132 @@ function ensureProgressUI() {
document.body.appendChild(container);
}
function ensureBackupRunOverlay() {
if ($('backupRunOverlay')) return;
const overlay = document.createElement('div');
overlay.id = 'backupRunOverlay';
overlay.style.cssText = `
position: fixed;
inset: 0;
z-index: 10001;
background: rgba(5, 10, 18, 0.58);
backdrop-filter: blur(4px);
display: none;
align-items: center;
justify-content: center;
padding: 16px;
`;
const card = document.createElement('div');
card.style.cssText = `
width: min(520px, 96vw);
background: linear-gradient(180deg, rgba(16, 26, 44, 0.96), rgba(12, 20, 34, 0.96));
border: 1px solid rgba(88, 213, 255, 0.26);
border-radius: 12px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
padding: 18px 18px 16px;
color: #fff;
`;
const header = document.createElement('div');
header.style.cssText = 'display:flex;align-items:center;gap:10px;margin-bottom:10px;font-weight:700;font-size:14px;color:#9de8ff;';
const spinner = document.createElement('div');
spinner.style.cssText = `
width: 16px;
height: 16px;
border: 2px solid rgba(88, 213, 255, 0.25);
border-top-color: #58d5ff;
border-radius: 50%;
animation: backupSpin 0.9s linear infinite;
`;
const title = document.createElement('span');
title.textContent = 'Backup laeuft... bitte warten';
header.appendChild(spinner);
header.appendChild(title);
const detail = document.createElement('div');
detail.id = 'backupRunOverlayText';
detail.style.cssText = 'font-size:13px;color:#d8eaff;margin-bottom:10px;min-height:20px;';
detail.textContent = 'Initialisiere Backup...';
const percent = document.createElement('div');
percent.id = 'backupRunOverlayPercent';
percent.style.cssText = 'font-size:12px;color:#9fc6dc;margin-bottom:8px;text-align:right;';
percent.textContent = '0%';
const barWrap = document.createElement('div');
barWrap.style.cssText = 'height:10px;background:rgba(255,255,255,0.10);border-radius:999px;overflow:hidden;';
const bar = document.createElement('div');
bar.id = 'backupRunOverlayBar';
bar.style.cssText = 'height:100%;width:0%;background:linear-gradient(90deg, #58d5ff, #5c87ff);transition:width 200ms ease-out;';
barWrap.appendChild(bar);
card.appendChild(header);
card.appendChild(detail);
card.appendChild(percent);
card.appendChild(barWrap);
overlay.appendChild(card);
document.body.appendChild(overlay);
if (!$('backupOverlayAnimationStyle')) {
const style = document.createElement('style');
style.id = 'backupOverlayAnimationStyle';
style.textContent = '@keyframes backupSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }';
document.head.appendChild(style);
}
}
function mapBackupProgressText(rawText, percentValue) {
const text = String(rawText || '').toLowerCase();
const percent = Math.min(100, Math.max(0, Math.round(Number(percentValue) || 0)));
if (percent >= 100) return 'Finalisiere Backup...';
if (text.includes('upload')) return 'Upload laeuft...';
if (text.includes('download')) return 'Dateien werden heruntergeladen...';
if (text.includes('git')) return 'Git-Projekte werden gesammelt...';
if (text.includes('erstelle backup') || text.includes('backup wird erstellt')) return 'Backup wird erstellt...';
if (percent <= 8) return 'Vorbereitung laeuft...';
if (percent <= 35) return 'Dateien werden gesammelt...';
if (percent <= 85) return 'Daten werden verarbeitet...';
return 'Finalisiere Backup...';
}
function showBackupRunOverlay(text) {
ensureBackupRunOverlay();
const overlay = $('backupRunOverlay');
const detail = $('backupRunOverlayText');
const percent = $('backupRunOverlayPercent');
const bar = $('backupRunOverlayBar');
if (detail) detail.textContent = text || 'Backup wird vorbereitet...';
if (percent) percent.textContent = '0%';
if (bar) bar.style.width = '0%';
if (overlay) overlay.style.display = 'flex';
}
function updateBackupRunOverlay(percentValue, text) {
const overlay = $('backupRunOverlay');
if (!overlay || overlay.style.display === 'none') return;
const clamped = Math.min(100, Math.max(0, Math.round(Number(percentValue) || 0)));
const detail = $('backupRunOverlayText');
const percent = $('backupRunOverlayPercent');
const bar = $('backupRunOverlayBar');
if (detail) detail.textContent = mapBackupProgressText(text, clamped);
if (percent) percent.textContent = `${clamped}%`;
if (bar) bar.style.width = `${clamped}%`;
}
function hideBackupRunOverlay() {
const overlay = $('backupRunOverlay');
if (!overlay) return;
setTimeout(() => {
overlay.style.display = 'none';
}, 250);
}
function showProgress(percent, text) {
ensureProgressUI();
const container = $('folderProgressContainer');
@@ -1423,6 +1551,7 @@ function showProgress(percent, text) {
if (txt) txt.innerText = text || '';
if (bar) bar.style.width = `${Math.min(100, Math.max(0, percent))}%`;
if (container) container.style.display = 'block';
updateBackupRunOverlay(percent, text);
}
function hideProgress() {
@@ -2730,6 +2859,11 @@ async function refreshLocalTree(folder) {
exclude: ['node_modules', '.git'],
maxDepth: 5
});
currentLocalProjects = Array.isArray(res.tree)
? res.tree.filter(node => node && node.isDirectory)
: [];
populateBackupSourceOptions();
const grid = $('explorerGrid');
if (!grid) return;
@@ -2741,6 +2875,8 @@ async function refreshLocalTree(folder) {
}
if (!res.tree || res.tree.length === 0) {
currentLocalProjects = [];
populateBackupSourceOptions();
grid.innerHTML = '<div style="grid-column: 1/-1; text-align: center; padding: 40px; color: var(--text-muted);">Keine Dateien gefunden</div>';
return;
}
@@ -2805,9 +2941,17 @@ async function pushLocalFolder() {
const branch = $('branchSelect')?.value || 'main';
const repoName = $('repoName')?.value;
const platform = $('platform')?.value;
const savedCreds = await window.electronAPI.loadCredentials();
const autoBackup = Boolean(savedCreds && savedCreds.autoBackupEnabled);
const backupTarget = String((savedCreds && savedCreds.backupPrefLocalFolder) || '').trim();
setStatus('Pushing...');
showProgress(0, 'Starting push...');
if (autoBackup) {
showBackupRunOverlay('Auto-Backup wird erstellt...');
showProgress(0, 'Auto-Backup wird erstellt...');
} else {
showProgress(0, 'Starting push...');
}
try {
const res = await window.electronAPI.pushProject({
@@ -2815,19 +2959,26 @@ async function pushLocalFolder() {
branch,
repoName,
platform,
commitMessage: message
commitMessage: message,
autoBackup,
backupTarget
});
if (res.ok) {
setStatus('Push succeeded');
if (autoBackup) {
showSuccess('Vorab-Backup OK, Upload erfolgreich ✓');
} else {
showSuccess('Upload erfolgreich ✓');
}
} else {
showError('Push failed: ' + (res.error || 'Unknown error'));
showError('Upload fehlgeschlagen: ' + (res.error || 'Unbekannter Fehler'));
}
} catch (error) {
console.error('Push error:', error);
showError('Push failed');
showError('Upload fehlgeschlagen');
} finally {
hideProgress();
hideBackupRunOverlay();
}
}
@@ -3492,6 +3643,47 @@ function showInputModal({ title, label, defaultValue, confirmText, onConfirm })
modal.onclick = (e) => { if (e.target === modal) modal.remove(); };
}
function showActionConfirmModal({ title, message, confirmText = 'Bestätigen', danger = false }) {
return new Promise((resolve) => {
const modal = document.createElement('div');
modal.className = 'modal confirm-modal';
modal.style.zIndex = '99999';
modal.innerHTML = `
<div class="modalContent card confirm-modal-content">
<h2 class="confirm-modal-title">${danger ? '🗑️' : 'ℹ️'} ${escapeHtml(title || 'Bestätigung')}</h2>
<p class="confirm-modal-message">${escapeHtml(message || '')}</p>
<div class="modal-buttons confirm-modal-buttons">
<button id="actionConfirmOk" class="confirm-modal-btn ${danger ? 'confirm-modal-btn--danger' : 'confirm-modal-btn--primary'}">${escapeHtml(confirmText)}</button>
<button id="actionConfirmCancel" class="confirm-modal-btn confirm-modal-btn--secondary">Abbrechen</button>
</div>
</div>
`;
document.body.appendChild(modal);
const okBtn = modal.querySelector('#actionConfirmOk');
const cancelBtn = modal.querySelector('#actionConfirmCancel');
if (okBtn) okBtn.focus();
const closeWith = (result) => {
modal.remove();
resolve(result);
};
if (okBtn) okBtn.onclick = () => closeWith(true);
if (cancelBtn) cancelBtn.onclick = () => closeWith(false);
modal.addEventListener('keydown', (e) => {
if (e.key === 'Escape') closeWith(false);
if (e.key === 'Enter') closeWith(true);
});
modal.onclick = (e) => {
if (e.target === modal) closeWith(false);
};
});
}
/* -------------------------
HELPER FUNCTIONS
------------------------- */
@@ -4400,6 +4592,30 @@ window.addEventListener('DOMContentLoaded', async () => {
showProgress(p.percent, `Download: ${p.processed}/${p.total}`);
});
if (window.electronAPI.onPrePushBackupStatus) {
window.electronAPI.onPrePushBackupStatus((payload) => {
if (!payload || !payload.stage) return;
if (payload.stage === 'backup-start') {
setStatus('Auto-Backup wird erstellt...');
showBackupRunOverlay('Auto-Backup wird erstellt...');
showProgress(8, 'Auto-Backup wird erstellt...');
} else if (payload.stage === 'backup-done') {
setStatus('Vorab-Backup erstellt. Upload startet...');
showProgress(22, 'Vorab-Backup erstellt. Upload startet...');
showInfo('Vorab-Backup OK, Upload startet...');
} else if (payload.stage === 'upload-start') {
setStatus('Upload läuft...');
showProgress(30, 'Upload läuft...');
} else if (payload.stage === 'backup-failed') {
const errorMsg = payload.error ? `Auto-Backup fehlgeschlagen: ${payload.error}` : 'Auto-Backup fehlgeschlagen.';
setStatus('Auto-Backup fehlgeschlagen');
showError(errorMsg);
hideBackupRunOverlay();
}
});
}
if (window.electronAPI.onRetryQueueUpdated) {
window.electronAPI.onRetryQueueUpdated((payload) => {
const size = payload && typeof payload.size === 'number' ? payload.size : 0;
@@ -4431,7 +4647,596 @@ window.addEventListener('DOMContentLoaded', async () => {
setStatus('Ready');
initUpdater(); // Updater initialisieren
updateNavigationUI();
// ═══════════════════════════════════════════════════════════
// ✅ BACKUP MANAGEMENT MODAL - EVENT HANDLERS
// ═══════════════════════════════════════════════════════════
// Button zum Öffnen des Backup-Modals
if ($('btnOpenBackupManagement')) {
$('btnOpenBackupManagement').onclick = async () => {
const modal = $('backupManagementModal');
if (modal) modal.classList.remove('hidden');
await loadBackupUiPrefs();
await ensureBackupSourcesLoaded();
populateBackupSourceOptions();
const repoName = getActiveBackupRepoName();
if (repoName) {
setStatus(`Backup-Verwaltung: ${repoName}`);
}
await refreshBackupAuthStatus();
loadBackupList();
};
}
// Schließen-Button im Modal
if ($('btnCloseBackupModal')) {
$('btnCloseBackupModal').onclick = () => {
const modal = $('backupManagementModal');
if (modal) modal.classList.add('hidden');
};
}
const localCredentialsSection = $('localCredentials');
if (localCredentialsSection) {
localCredentialsSection.style.display = 'flex';
}
// 🚀 CREATE BACKUP NOW - Button
if ($('btnCreateBackupNow')) {
$('btnCreateBackupNow').onclick = async () => {
const source = getSelectedBackupSource();
const repoName = source?.repoName || getActiveBackupRepoName();
if (!repoName) {
showWarning('Kein Repository erkannt. Bitte zuerst ein Repository öffnen oder einen Projektordner wählen.');
return;
}
const provider = 'local';
const closeBackupModalForRun = () => {
const modal = $('backupManagementModal');
if (modal) modal.classList.add('hidden');
};
if (provider === 'local' && source && (source.kind === 'gitea-repo' || source.kind === 'gitea-all')) {
const destination = $('localBackupFolder')?.value?.trim() || '';
if (!destination) {
showWarning('Bitte zuerst den Backup-Zielordner auswählen.');
return;
}
closeBackupModalForRun();
setStatus('Lade Projekte von Git und sichere lokal...');
const btn = $('btnCreateBackupNow');
const oldText = btn.textContent;
btn.disabled = true;
showBackupRunOverlay('Lade Projekte von Git und sichere lokal...');
showProgress(0, 'Lade Projekte von Git...');
try {
const res = await window.electronAPI.exportGiteaProjectsToLocal(
source.kind === 'gitea-all'
? { mode: 'all', destination }
: { mode: 'single', owner: source.owner, repo: source.repo, destination }
);
if (res?.ok) {
updateBackupRunOverlay(100, 'Finalisiere Backup...');
const reposCount = res.repositoryCount || (Array.isArray(res.repositories) ? res.repositories.length : 0);
showSuccess(`✓ Git-Backup abgeschlossen: ${reposCount} Projekte in ${destination}`);
setStatus('Komplett-Backup abgeschlossen');
} else {
showError('Komplett-Backup fehlgeschlagen: ' + (res?.error || 'Unbekannter Fehler'));
}
} catch (error) {
showError('Komplett-Backup fehlgeschlagen: ' + (error?.message || String(error)));
} finally {
hideProgress();
hideBackupRunOverlay();
btn.disabled = false;
btn.textContent = oldText;
}
return;
}
const sourcePath = source?.projectPath || selectedFolder || '';
if (!sourcePath) {
showWarning('Bitte Backup-Quelle aus der Liste auswählen.');
return;
}
closeBackupModalForRun();
setStatus('Erstelle Backup...');
const btn = $('btnCreateBackupNow');
const oldText = btn.textContent;
btn.disabled = true;
showBackupRunOverlay('Lokales Backup wird erstellt...');
showProgress(0, 'Erstelle Backup...');
try {
const res = await window.electronAPI.createCloudBackup({
repoName,
projectPath: sourcePath
});
if (res?.ok) {
updateBackupRunOverlay(100, 'Finalisiere Backup...');
showSuccess('✓ Backup erfolgreich erstellt!');
setStatus('Backup abgeschlossen');
// Lade Backup-Liste neu
setTimeout(loadBackupList, 500);
} else {
showError('Backup fehlgeschlagen: ' + (res?.error || 'Unbekannter Fehler'));
}
} catch (error) {
showError('Fehler: ' + (error?.message || String(error)));
} finally {
hideProgress();
hideBackupRunOverlay();
btn.disabled = false;
btn.textContent = oldText;
}
};
}
// 🔄 REFRESH BACKUP LIST - Button
if ($('btnRefreshBackupsList')) {
$('btnRefreshBackupsList').onclick = loadBackupList;
}
if ($('backupSourceSelect')) {
$('backupSourceSelect').addEventListener('change', async () => {
const key = $('backupSourceSelect')?.value || '';
if (key) {
await saveBackupUiPrefs({ backupPrefSourceSelection: key });
}
await refreshBackupAuthStatus();
loadBackupList();
});
}
if ($('btnPickLocalBackupFolder')) {
$('btnPickLocalBackupFolder').onclick = async () => {
try {
const folder = await window.electronAPI.selectFolder();
if (!folder) return;
const input = $('localBackupFolder');
if (input) input.value = folder;
await saveBackupUiPrefs({ backupPrefLocalFolder: folder });
await ensureBackupSourcesLoaded();
populateBackupSourceOptions();
await refreshBackupAuthStatus();
await loadBackupList();
} catch (error) {
showError('Ordnerauswahl fehlgeschlagen: ' + (error?.message || String(error)));
}
};
}
// 📋 Handler für Auto-Backup Toggle
if ($('settingAutoBackup')) {
$('settingAutoBackup').addEventListener('change', async (e) => {
try {
const enabled = e.target.checked;
const creds = await window.electronAPI.loadCredentials();
if (creds) {
await window.electronAPI.saveCredentials({
...creds,
autoBackupEnabled: enabled
});
showInfo(enabled ? '✓ Auto-Backup aktiviert' : '✓ Auto-Backup deaktiviert');
}
} catch (error) {
console.error('Error toggling auto-backup:', error);
}
});
}
// Listener für Backup Created Events (von IPC)
if (window.electronAPI.onBackupCreated) {
window.electronAPI.onBackupCreated((data) => {
if (data?.ok) {
showSuccess(`📦 Backup erstellt: ${data.filename}`);
logActivity('info', `Backup erstellt: ${data.filename} (${data.size} bytes)`);
loadBackupList();
}
});
}
});
// ═══════════════════════════════════════════════════════════
// HELPER FUNCTIONS - BACKUP
// ═══════════════════════════════════════════════════════════
function getBackupCredentialsFromUI(provider) {
if (!provider) return null;
const creds = {};
let isValid = true;
if (provider === 'local') {
creds.basePath = $('localBackupFolder')?.value?.trim();
isValid = !!creds.basePath;
}
return isValid ? creds : null;
}
async function refreshBackupAuthStatus() {
const el = $('backupAuthStatus');
if (!el) return;
const repoName = getActiveBackupRepoName();
const provider = 'local';
if (!repoName) {
el.textContent = 'Status: Kein Repository erkannt';
el.style.color = 'var(--warning)';
return;
}
try {
const res = await window.electronAPI.getBackupAuthStatus({ repoName, provider });
if (res?.ok && res.connected) {
const sourceLabel = res.source === 'repo'
? 'projektbezogen'
: (res.source === 'global' ? 'global gespeichert' : 'aktiv');
el.textContent = `Status: Verbunden (${sourceLabel})`;
el.style.color = 'var(--success)';
} else {
el.textContent = 'Status: Nicht verbunden - einmalig verbinden erforderlich';
el.style.color = 'var(--warning)';
}
} catch (_) {
el.textContent = 'Status: Verbindung konnte nicht geprüft werden';
el.style.color = 'var(--danger)';
}
}
function getActiveBackupRepoName() {
const selectedSource = getSelectedBackupSource();
if (selectedSource && selectedSource.repoName) return selectedSource.repoName;
if (currentState && currentState.repo) return currentState.repo;
const inputRepo = $('repoName')?.value?.trim();
if (inputRepo) return inputRepo;
if (selectedFolder) {
const folderName = selectedFolder.split(/[\\/]/).pop();
if (folderName) return folderName;
}
return '';
}
function getSelectedBackupSource() {
const key = $('backupSourceSelect')?.value || '';
if (!key) return null;
if (key === '__ALL_GIT__') {
return {
key,
kind: 'gitea-all',
repoName: 'all-git-projects',
label: 'Alles komplett sichern (Git)'
};
}
if (key.startsWith('repo::')) {
const payload = key.slice(6);
const [owner, repo] = payload.split('/');
const name = repo || 'projekt';
return {
key,
kind: 'gitea-repo',
owner,
repo,
repoName: name,
label: name
};
}
return null;
}
async function ensureBackupSourcesLoaded() {
try {
const res = await window.electronAPI.listGiteaRepos();
if (!res || !res.ok || !Array.isArray(res.repos)) {
backupGitRepos = [];
return;
}
backupGitRepos = res.repos.map(r => ({
owner: (r.owner && (r.owner.login || r.owner.username)) || '',
repo: r.name || ''
})).filter(r => r.owner && r.repo);
} catch (_) {}
}
function populateBackupSourceOptions() {
const select = $('backupSourceSelect');
if (!select) return;
const prevValue = select.value || '';
const prefValue = select.dataset.prefValue || '';
const keepValue = prevValue || prefValue;
const opts = [];
opts.push({ value: '', text: '-- Wähle aus vorhandenen Projekten --' });
if (backupGitRepos.length > 0) {
opts.push({ value: '__ALL_GIT__', text: '🧩 Alles komplett sichern (alle Git-Projekte)' });
}
const repos = [...backupGitRepos].sort((a, b) => `${a.owner}/${a.repo}`.localeCompare(`${b.owner}/${b.repo}`, 'de'));
repos.forEach(node => {
opts.push({
value: `repo::${node.owner}/${node.repo}`,
text: `📦 ${node.owner}/${node.repo}`
});
});
if (keepValue && keepValue.startsWith('repo::') && !opts.some(o => o.value === keepValue)) {
try {
const decoded = keepValue.slice(6);
opts.push({ value: keepValue, text: `📌 ${decoded} (zuletzt)` });
} catch (_) {}
}
select.innerHTML = opts
.map(o => `<option value="${o.value}">${o.text}</option>`)
.join('');
if (keepValue && opts.some(o => o.value === keepValue)) {
select.value = keepValue;
} else if (opts.length > 1) {
select.value = opts[1].value;
} else {
select.value = '';
}
}
async function loadBackupUiPrefs() {
try {
const creds = await window.electronAPI.loadCredentials();
if (!creds) return;
const localFolder = String(creds.backupPrefLocalFolder || '').trim();
const sourceSelection = String(creds.backupPrefSourceSelection || '').trim();
const localFolderEl = $('localBackupFolder');
if (localFolderEl && localFolder && !localFolderEl.value) {
localFolderEl.value = localFolder;
}
const sourceSelectEl = $('backupSourceSelect');
if (sourceSelectEl && sourceSelection) {
sourceSelectEl.dataset.prefValue = sourceSelection;
}
} catch (_) {}
}
async function saveBackupUiPrefs(patch) {
try {
const creds = await window.electronAPI.loadCredentials();
const current = creds || {};
await window.electronAPI.saveCredentials({ ...current, ...patch });
} catch (_) {}
}
async function loadBackupList() {
const repoName = getActiveBackupRepoName();
if (!repoName) {
const container = $('backupListContainer');
if (container) {
container.innerHTML = '<div style="padding: 16px; color: var(--text-muted);">Kein Repository erkannt</div>';
}
return;
}
const provider = 'local';
const credentials = getBackupCredentialsFromUI(provider);
// Optionaler Komfort: Wenn neue Credentials eingetragen sind, automatisch speichern.
if (credentials) {
try {
await window.electronAPI.setupBackupProvider({ repoName, provider, credentials });
} catch (_) {
// Wenn kein vollständiges Formular vorhanden ist, versuchen wir mit gespeicherter Konfiguration weiter.
}
}
setStatus('Lade Backup-Liste...');
showProgress(0, 'Lade Backups...');
try {
const res = await window.electronAPI.listCloudBackups({ repoName, provider });
hideProgress();
const container = $('backupListContainer');
if (!container) return;
if (!res?.ok) {
container.innerHTML = `<div style="padding: 16px; color: var(--danger);">Fehler beim Laden: ${res?.error || 'Unbekannt'}</div>`;
return;
}
const backups = res.backups || [];
if (backups.length === 0) {
container.innerHTML = '<div style="padding: 16px; color: var(--text-muted);">Noch keine Backups vorhanden</div>';
return;
}
container.innerHTML = '';
const baseNameCounts = new Map();
backups.forEach((b) => {
const name = getBackupDisplayName(b.filename || b.name || '');
if (!name) return;
baseNameCounts.set(name, (baseNameCounts.get(name) || 0) + 1);
});
backups.forEach((backup, index) => {
const backupFilename = backup.filename || backup.name || '';
const baseDisplayName = getBackupDisplayName(backupFilename) || `Backup ${index + 1}`;
const duplicateCount = baseNameCounts.get(baseDisplayName) || 0;
const displaySuffix = duplicateCount > 1 ? ` • ${formatTimeOnly(backup.modifiedTime || backup.date)}` : '';
const backupDisplayName = `${baseDisplayName}${displaySuffix}`;
const item = document.createElement('div');
item.className = 'backup-list-item';
const info = document.createElement('div');
info.className = 'backup-list-info';
const filename = document.createElement('div');
filename.textContent = backupDisplayName;
filename.title = backupFilename || backupDisplayName;
filename.className = 'backup-list-name';
const meta = document.createElement('div');
meta.className = 'backup-list-meta';
meta.textContent = `Größe: ${formatBytes(backup.size)} • ${new Date(backup.modifiedTime || new Date()).toLocaleString('de-DE')}`;
info.appendChild(filename);
info.appendChild(meta);
const buttons = document.createElement('div');
buttons.className = 'backup-list-actions';
// Download-Button
const btnRestore = document.createElement('button');
btnRestore.className = 'backup-list-action backup-list-action--restore';
btnRestore.textContent = '⬇️ Wiederherstellen';
btnRestore.onclick = async () => {
if (!backupFilename) {
showError('Backup-Dateiname fehlt.');
return;
}
const proceedRestore = await showActionConfirmModal({
title: 'Backup wiederherstellen',
message: `Backup "${backupFilename}" wirklich wiederherstellen? Vorhandene Dateien werden überschrieben.`,
confirmText: 'Wiederherstellen'
});
if (!proceedRestore) return;
await restoreBackup(backupFilename, repoName);
};
// Delete-Button
const btnDelete = document.createElement('button');
btnDelete.className = 'backup-list-action backup-list-action--delete';
btnDelete.textContent = '🗑️ Löschen';
btnDelete.onclick = async () => {
if (!backupFilename) {
showError('Backup-Dateiname fehlt.');
return;
}
const proceedDelete = await showActionConfirmModal({
title: 'Backup löschen',
message: `Backup "${backupFilename}" wirklich löschen?`,
confirmText: 'Löschen',
danger: true
});
if (!proceedDelete) return;
await deleteBackup(backupFilename, repoName);
};
buttons.appendChild(btnRestore);
buttons.appendChild(btnDelete);
item.appendChild(info);
item.appendChild(buttons);
container.appendChild(item);
});
setStatus(`${backups.length} Backups gefunden`);
} catch (error) {
hideProgress();
setStatus('Fehler beim Laden der Backups');
const container = $('backupListContainer');
if (container) container.innerHTML = `<div style="padding: 16px; color: var(--danger);">Fehler: ${error?.message || 'Unbekannt'}</div>`;
}
}
async function restoreBackup(filename, repoName) {
if (!selectedFolder) {
showWarning('Bitte zuerst einen lokalen Ordner auswählen');
return;
}
setStatus('Stelle Backup wieder her...');
showProgress(0, `Lade ${filename}...`);
try {
const res = await window.electronAPI.restoreCloudBackup({
repoName,
filename,
targetPath: selectedFolder
});
hideProgress();
if (res?.ok) {
showSuccess(`✓ Backup "${filename}" wiederhergestellt`);
if (selectedFolder) refreshLocalTree(selectedFolder);
} else {
showError('Wiederherstellung fehlgeschlagen: ' + (res?.error || 'Unbekannt'));
}
} catch (error) {
hideProgress();
showError('Fehler: ' + (error?.message || String(error)));
}
}
async function deleteBackup(filename, repoName) {
setStatus('Lösche Backup...');
try {
const res = await window.electronAPI.deleteCloudBackup({
repoName,
filename
});
if (res?.ok) {
showSuccess(`✓ Backup gelöscht`);
loadBackupList();
} else {
showError('Löschen fehlgeschlagen: ' + (res?.error || 'Unbekannt'));
}
} catch (error) {
showError('Fehler: ' + (error?.message || String(error)));
}
}
function formatBytes(bytes) {
if (!bytes || bytes === 0) return '0 B';
const k = 1024;
const sizes = ['B', 'KB', 'MB', 'GB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
}
function getBackupDisplayName(filename) {
const raw = String(filename || '').trim();
if (!raw) return '';
const normalized = raw.replace(/\.zip$/i, '');
const match = normalized.match(/^(.*?)-backup-\d{8}-\d{6}(?:-[^-]+)?$/i);
if (match && match[1]) {
return match[1];
}
return normalized;
}
function formatTimeOnly(input) {
if (!input) return '--:--:--';
const date = new Date(input);
if (Number.isNaN(date.getTime())) return '--:--:--';
return date.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
}
/* ================================
RELEASE MANAGEMENT UI FUNCTIONS
Füge dies zu renderer.js hinzu

463
renderer/style.css
View File

@@ -1904,6 +1904,60 @@ input[type="checkbox"] {
.activity-heatmap-card.collapsed .activity-heatmap-body {
display: none;
}
.confirm-modal .confirm-modal-content {
max-width: 460px;
border: 1px solid rgba(88, 213, 255, 0.22);
background:
linear-gradient(180deg, rgba(16, 29, 51, 0.96), rgba(10, 19, 34, 0.98));
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.38);
}
.confirm-modal-title {
margin: 0;
font-size: 20px;
}
.confirm-modal-message {
margin: 10px 0 0;
color: var(--text-secondary);
line-height: 1.5;
}
.confirm-modal-buttons {
margin-top: 18px;
}
.confirm-modal-btn {
min-height: 40px;
border-radius: var(--radius-md);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.1px;
}
.confirm-modal-btn--primary {
border: 1px solid rgba(88, 213, 255, 0.34);
background: linear-gradient(135deg, rgba(88, 213, 255, 0.22), rgba(92, 135, 255, 0.2));
color: #b9f2ff;
}
.confirm-modal-btn--primary:hover {
border-color: rgba(88, 213, 255, 0.6);
background: linear-gradient(135deg, rgba(88, 213, 255, 0.34), rgba(92, 135, 255, 0.3));
}
.confirm-modal-btn--danger {
border: 1px solid rgba(239, 68, 68, 0.45);
background: linear-gradient(180deg, rgba(62, 22, 22, 0.92), rgba(42, 14, 14, 0.96));
color: #ffc1c1;
}
.confirm-modal-btn--danger:hover {
border-color: rgba(239, 68, 68, 0.72);
background: linear-gradient(180deg, rgba(82, 28, 28, 0.95), rgba(54, 18, 18, 0.98));
color: #ffe0e0;
}
.confirm-modal-btn--secondary {
border: 1px solid rgba(255, 255, 255, 0.24);
background: rgba(255, 255, 255, 0.06);
color: var(--text-primary);
}
.confirm-modal-btn--secondary:hover {
border-color: rgba(255, 255, 255, 0.4);
background: rgba(255, 255, 255, 0.12);
}
.activity-heatmap-months {
margin-left: calc(var(--hm-weekday-col) + var(--hm-grid-gap));
@@ -3238,4 +3292,413 @@ body.compact-mode .file-type-badge {
.fav-chip[draggable="true"] {
cursor: grab;
}
/* ═══════════════════════════════════════════════════════════
✅ BACKUP MANAGEMENT MODAL - STYLES
═══════════════════════════════════════════════════════════ */
#backupManagementModal {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: 99999;
backdrop-filter: blur(4px);
}
#backupManagementModal.hidden {
display: none;
}
.backup-management-card {
background: var(--bg-secondary);
border: 1px solid rgba(88, 213, 255, 0.2);
border-radius: var(--radius-lg);
width: 90%;
max-width: 700px;
max-height: 85vh;
display: flex;
flex-direction: column;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
animation: slideUp 0.3s ease-out;
overflow: hidden;
}
.backup-modal-header {
padding: 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
justify-content: space-between;
align-items: center;
}
.backup-modal-header h2 {
font-size: 18px;
font-weight: 700;
margin: 0;
color: var(--text-primary);
}
.backup-modal-close {
background: transparent;
border: none;
color: var(--text-muted);
font-size: 20px;
cursor: pointer;
padding: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
transition: all var(--transition-fast);
}
.backup-modal-close:hover {
background: rgba(255, 255, 255, 0.1);
color: var(--accent-primary);
}
.backup-modal-body {
flex: 1;
overflow-y: auto;
padding: 20px;
display: flex;
flex-direction: column;
gap: 16px;
}
.backup-modal-body::-webkit-scrollbar {
width: 10px;
}
.backup-modal-body::-webkit-scrollbar-track {
background: rgba(9, 20, 39, 0.75);
border-left: 1px solid rgba(88, 213, 255, 0.12);
}
.backup-modal-body::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, rgba(88, 213, 255, 0.55), rgba(92, 135, 255, 0.55));
border-radius: 10px;
border: 2px solid rgba(9, 20, 39, 0.9);
}
.backup-modal-body::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, rgba(88, 213, 255, 0.8), rgba(92, 135, 255, 0.8));
}
/* Provider Selection */
.backup-provider-select {
display: flex;
flex-direction: column;
gap: 8px;
}
.backup-provider-select label {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--accent-primary);
}
#backupProviderSelect {
padding: 10px 12px;
background: var(--bg-tertiary);
border: 1px solid rgba(88, 213, 255, 0.25);
border-radius: var(--radius-md);
color: var(--text-primary);
font-size: 13px;
font-family: inherit;
cursor: pointer;
transition: all var(--transition-fast);
}
#backupProviderSelect:hover {
border-color: rgba(88, 213, 255, 0.4);
background: rgba(19, 33, 58, 0.8);
}
#backupProviderSelect:focus {
outline: none;
border-color: var(--accent-primary);
box-shadow: 0 0 0 3px rgba(88, 213, 255, 0.15);
background: rgba(19, 33, 58, 0.9);
}
#backupProviderSelect option {
background: var(--bg-secondary);
color: var(--text-primary);
padding: 8px;
}
/* Credentials Sections */
.backup-credentials-section {
display: none;
padding: 12px;
background: linear-gradient(135deg, rgba(88, 213, 255, 0.08) 0%, rgba(122, 81, 255, 0.05) 100%);
border: 1px solid rgba(88, 213, 255, 0.2);
border-radius: var(--radius-md);
gap: 12px;
flex-direction: column;
animation: slideDown 0.2s ease-out;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.backup-credentials-section.active {
display: flex;
}
.backup-credentials-section input,
.backup-credentials-section textarea,
.backup-credentials-section select {
padding: 9px 10px;
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 6px;
color: var(--text-primary);
font-size: 12px;
font-family: inherit;
transition: all var(--transition-fast);
}
.backup-credentials-section input::placeholder {
color: rgba(174, 189, 216, 0.35);
}
.backup-credentials-section input:focus,
.backup-credentials-section textarea:focus,
.backup-credentials-section select:focus {
outline: none;
border-color: var(--accent-primary);
box-shadow: 0 0 0 3px rgba(88, 213, 255, 0.12);
background: rgba(0, 0, 0, 0.4);
}
.backup-credentials-section select option {
background: var(--bg-secondary);
color: var(--text-primary);
}
.backup-input-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.backup-input-group label {
font-size: 11px;
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.3px;
}
/* Buttons */
.backup-modal-buttons {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: center;
padding: 16px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.backup-btn {
padding: 10px 16px;
border-radius: var(--radius-md);
border: none;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all var(--transition-fast);
min-width: 120px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
font-family: inherit;
}
.backup-btn-primary {
background: var(--accent-gradient);
color: #000;
box-shadow: 0 4px 12px rgba(88, 213, 255, 0.25);
}
.backup-btn-primary:hover {
box-shadow: 0 8px 20px rgba(88, 213, 255, 0.35);
transform: translateY(-2px);
}
.backup-btn-primary:active {
transform: translateY(0);
box-shadow: 0 2px 8px rgba(88, 213, 255, 0.25);
}
.backup-btn-secondary {
background: transparent;
border: 1.5px solid rgba(88, 213, 255, 0.35);
color: var(--text-primary);
transition: all var(--transition-fast);
}
.backup-btn-secondary:hover {
background: rgba(88, 213, 255, 0.12);
border-color: var(--accent-primary);
color: var(--accent-primary);
box-shadow: 0 4px 12px rgba(88, 213, 255, 0.15);
transform: translateY(-1px);
}
.backup-btn-secondary:active {
transform: translateY(0);
}
.backup-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none !important;
}
/* Backup List */
#backupListContainer {
background: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.15) 100%);
border: 1px solid rgba(88, 213, 255, 0.15);
border-radius: var(--radius-md);
max-height: 250px;
overflow-y: auto;
min-height: 100px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.backup-list-item {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
transition: background var(--transition-fast);
width: 100%;
}
.backup-list-info {
flex: 1 1 auto;
min-width: 0;
}
.backup-list-name {
font-weight: 600;
margin-bottom: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.backup-list-meta {
color: var(--text-muted);
font-size: 12px;
}
.backup-list-actions {
flex: 0 0 auto;
display: flex;
gap: 8px;
align-items: center;
}
.backup-list-action {
appearance: none;
border-radius: 8px;
padding: 7px 12px;
font-size: 12px;
font-weight: 600;
border: 1px solid rgba(88, 213, 255, 0.28);
background: linear-gradient(180deg, rgba(20, 34, 58, 0.92), rgba(12, 24, 44, 0.92));
color: var(--text-primary);
cursor: pointer;
transition: all var(--transition-fast);
white-space: nowrap;
}
.backup-list-action:hover {
border-color: rgba(88, 213, 255, 0.6);
background: linear-gradient(180deg, rgba(30, 52, 86, 0.94), rgba(15, 30, 56, 0.94));
}
.backup-list-action--delete {
color: #ff9f9f;
border-color: rgba(239, 68, 68, 0.35);
}
.backup-list-action--delete:hover {
color: #ffd6d6;
border-color: rgba(239, 68, 68, 0.65);
background: linear-gradient(180deg, rgba(72, 24, 24, 0.88), rgba(48, 14, 14, 0.9));
}
@media (max-width: 760px) {
.backup-list-item {
flex-direction: column;
align-items: stretch;
}
.backup-list-actions {
width: 100%;
justify-content: flex-end;
flex-wrap: wrap;
}
.backup-list-action {
flex: 1 1 auto;
text-align: center;
min-width: 130px;
}
}
.backup-list-item:hover {
background: rgba(88, 213, 255, 0.1);
}
.backup-list-item:last-child {
border-bottom: none;
}
/* Scrollbar Styling */
#backupListContainer::-webkit-scrollbar {
width: 8px;
}
#backupListContainer::-webkit-scrollbar-track {
background: transparent;
}
#backupListContainer::-webkit-scrollbar-thumb {
background: rgba(88, 213, 255, 0.2);
border-radius: 4px;
}
#backupListContainer::-webkit-scrollbar-thumb:hover {
background: rgba(88, 213, 255, 0.4);
}