Update from Git Manager GUI

2026-02-02 20:00:57 +01:00
parent 7d18161141
commit 94e8c21e9b
3 changed files with 204 additions and 14 deletions
--- a/renderer/index.html
+++ b/renderer/index.html
@@ -8,7 +8,6 @@
 </head>
 <body>
  <div id="app">
-    <!-- Toolbar -->
    <div id="toolbar">
      <div class="tool-group">
        <button id="btnSettings" title="Einstellungen">⚙️ Settings</button>
@@ -31,14 +30,11 @@
      <span id="status" class="status">Bereit</span>
    </div>

-    <!-- Main Content -->
    <main id="main">
      <div id="explorerGrid" class="explorer-grid">
-        <!-- Dynamic content loaded here -->
        </div>
    </main>

-    <!-- Settings Modal -->
    <div id="settingsModal" class="modal hidden">
      <div class="modalContent card">
        <h2>⚙️ Einstellungen</h2>
@@ -58,6 +54,23 @@
          <input id="giteaURL" type="text" placeholder="https://gitea.example.com">
        </div>
        
+        <div class="input-group" style="margin-top: 30px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.1);">
+          <label>App Version</label>
+          <div style="display: flex; gap: 12px; align-items: center;">
+            <input id="appVersion" type="text" readonly style="flex: 1; background: rgba(255,255,255,0.05); cursor: not-allowed;">
+            <button id="btnCheckUpdates" style="
+              background: linear-gradient(135deg, #00d4ff, #8b5cf6);
+              color: #000;
+              border: none;
+              padding: 10px 20px;
+              border-radius: 8px;
+              font-weight: 600;
+              cursor: pointer;
+              white-space: nowrap;
+            ">🔄 Nach Updates suchen</button>
+          </div>
+        </div>
+        
        <div class="modal-buttons">
          <button id="btnSaveSettings">Speichern</button>
          <button id="btnCloseSettings" class="secondary">Abbrechen</button>
@@ -65,7 +78,6 @@
      </div>
    </div>

-    <!-- Repo Action Modal -->
    <div id="repoActionModal" class="modal hidden">
      <div class="modalContent card">
        <h2>🚀 Neues Repository erstellen</h2>
@@ -113,7 +125,6 @@
      </div>
    </div>

-    <!-- File Editor Modal -->
    <div id="fileEditorModal" class="modal hidden">
      <div class="file-editor-card">
        <div class="file-editor-header">
@@ -128,10 +139,8 @@
          </div>
        </div>

-        <!-- Tab Bar -->
        <div id="fileEditorTabs" class="file-editor-tabs"></div>

-        <!-- Search Bar -->
        <div id="searchBar" class="search-bar hidden">
          <input id="searchInput" type="text" class="search-input" placeholder="Suchen...">
          <input id="replaceInput" type="text" class="search-input" placeholder="Ersetzen...">
@@ -141,11 +150,9 @@
          <span id="searchInfo" class="search-info">0/0</span>
        </div>
        
-        <!-- Editor Container mit Line Numbers -->
        <div class="file-editor-container">
          <div id="lineNumbers" class="line-numbers"></div>
          <textarea id="fileEditorContent" class="file-editor-textarea" placeholder="Dateiinhalt..."></textarea>
-          <!-- Image Preview -->
          <div id="imagePreview" class="image-preview hidden"></div>
        </div>
        
@@ -162,8 +169,40 @@
        </div>
      </div>
    </div>
+
+    <div id="updateModal" class="modal hidden">
+      <div class="modalContent card" style="max-width: 450px; border: 1px solid var(--accent-primary); box-shadow: 0 0 30px rgba(0, 212, 255, 0.2);">
+        <div style="display: flex; align-items: center; gap: 20px; margin-bottom: 20px;">
+          <div style="font-size: 3rem; filter: drop-shadow(0 0 10px var(--accent-primary));">🚀</div>
+          <div>
+            <h2 style="margin: 0; background: var(--accent-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Update verfügbar!</h2>
+            <p id="updateVersionInfo" style="color: var(--text-secondary); margin: 5px 0 0 0; font-family: monospace;"></p>
+          </div>
        </div>
        
-  <script src="renderer.js"></script>
+        <div class="input-group">
+          <label style="color: var(--accent-primary); font-size: 0.8rem; letter-spacing: 1px;">RELEASE NOTES</label>
+          <div id="updateChangelog" style="
+            background: rgba(0,0,0,0.25);
+            padding: 15px;
+            border-radius: 8px;
+            max-height: 180px;
+            overflow-y: auto;
+            font-size: 0.9rem;
+            line-height: 1.6;
+            color: var(--text-primary);
+            border: 1px solid rgba(255,255,255,0.05);
+            white-space: pre-wrap;
+          "></div>
+        </div>
+
+        <div class="modal-buttons" style="margin-top: 25px; gap: 12px;">
+          <button id="btnStartUpdate" class="accent-btn" style="flex: 2; height: 45px; font-weight: bold;">🚀 Jetzt installieren</button>
+          <button id="btnIgnoreUpdate" class="secondary" style="flex: 1; height: 45px;">Später</button>
+        </div>
+      </div>
+    </div>
+
+  </div> <script src="renderer.js"></script>
 </body>
 </html>
--- a/renderer/renderer.js
+++ b/renderer/renderer.js
@@ -314,7 +314,52 @@ async function updateEditor() {
                imgSrc = 'file:///' + currentActiveTab.replace(/\\/g, '/');
            }
            
-            imagePreview.innerHTML = `<img src="${imgSrc}" alt="${tab.name}" onerror="this.style.display='none'; this.parentElement.innerHTML='<div style=\\"color: var(--text-muted); text-align: center;\\">Bild konnte nicht geladen werden</div>';">`;
+            // Erstelle Bild-Element mit verbesserter Darstellung
+            const img = document.createElement('img');
+            img.src = imgSrc;
+            img.alt = tab.name;
+            img.style.cssText = `
+                max-width: 100%;
+                max-height: 85vh;
+                width: auto;
+                height: auto;
+                display: block;
+                margin: 0 auto;
+                object-fit: contain;
+                cursor: zoom-in;
+            `;
+            
+            // Click zum Zoomen (Original-Größe)
+            let isZoomed = false;
+            img.onclick = function() {
+                if (isZoomed) {
+                    img.style.maxWidth = '100%';
+                    img.style.maxHeight = '85vh';
+                    img.style.cursor = 'zoom-in';
+                    isZoomed = false;
+                } else {
+                    img.style.maxWidth = 'none';
+                    img.style.maxHeight = 'none';
+                    img.style.cursor = 'zoom-out';
+                    isZoomed = true;
+                }
+            };
+            
+            img.onerror = function() {
+                imagePreview.innerHTML = '<div style="color: var(--text-muted); text-align: center; padding: 40px;">Bild konnte nicht geladen werden</div>';
+            };
+            
+            // Container für zentrierte Anzeige
+            imagePreview.innerHTML = '';
+            imagePreview.style.cssText = `
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                min-height: 400px;
+                overflow: auto;
+                padding: 20px;
+            `;
+            imagePreview.appendChild(img);
        }
    } else {
        // Zeige Text Editor
@@ -1728,6 +1773,7 @@ window.addEventListener('DOMContentLoaded', async () => {
    setupGlobalDropZone();

    setStatus('Ready');
+    initUpdater(); // Updater initialisieren
    updateNavigationUI();
 });
 /* ================================
@@ -2957,4 +3003,82 @@ document.addEventListener('keydown', (e) => {
        }
    }
 });
+/* ========================================
+   UPDATER FUNKTIONEN (Optimiert & Synchronisiert)
+   ======================================== */

+async function initUpdater() {
+    try {
+        const versionRes = await window.electronAPI.getAppVersion();
+        if (versionRes && versionRes.ok && $('appVersion')) {
+            $('appVersion').value = versionRes.version;
+        }
+    } catch (error) {
+        console.error('[Renderer] Fehler beim Laden der Version:', error);
+    }
+    
+    // Manueller Check Button in Settings
+    if ($('btnCheckUpdates')) {
+        $('btnCheckUpdates').onclick = async () => {
+            const btn = $('btnCheckUpdates');
+            const originalHTML = btn.innerHTML;
+            btn.innerHTML = '⏳ Suche...';
+            btn.disabled = true;
+            
+            try {
+                await window.electronAPI.checkForUpdates();
+                setStatus('Update-Suche abgeschlossen');
+            } catch (error) {
+                setStatus('Fehler bei der Update-Prüfung');
+            } finally {
+                setTimeout(() => {
+                    btn.innerHTML = originalHTML;
+                    btn.disabled = false;
+                }, 1500);
+            }
+        };
+    }
+}
+
+// Event-Listener für das Update-Modal
+if (window.electronAPI.onUpdateAvailable) {
+    window.electronAPI.onUpdateAvailable((info) => {
+        const modal = $('updateModal');
+        const versionInfo = $('updateVersionInfo');
+        const changelog = $('updateChangelog');
+        
+        if (versionInfo) versionInfo.innerText = `Version ${info.version} verfügbar!`;
+        if (changelog) changelog.innerText = info.body || 'Keine Release-Notes vorhanden.';
+        if (modal) modal.classList.remove('hidden');
+
+        // Button: Jetzt installieren
+        const updateBtn = $('btnStartUpdate');
+        if (updateBtn) {
+            updateBtn.onclick = () => {
+                if (modal) modal.classList.add('hidden');
+                setStatus('Download gestartet...');
+                // Aufruf der korrekten Preload-Funktion
+                window.electronAPI.startUpdateDownload(info.asset);
+            };
+        }
+
+        // Button: Später
+        const ignoreBtn = $('btnIgnoreUpdate');
+        if (ignoreBtn) {
+            ignoreBtn.onclick = () => { if (modal) modal.classList.add('hidden'); };
+        }
+    });
+}
+
+// AM ENDE DER DATEI: Initialisierung beim Start
+document.addEventListener('DOMContentLoaded', () => {
+    // 1. Basis-Setup (Settings-Feld füllen etc.)
+    initUpdater();
+
+    // 2. AUTOMATISCHER UPDATE-CHECK BEIM START
+    // Wir warten 3 Sekunden, damit die App in Ruhe laden kann
+    setTimeout(() => {
+        console.log("[Auto-Updater] Suche im Hintergrund nach Updates...");
+        window.electronAPI.checkForUpdates(); 
+    }, 3000);
+});
--- a/renderer/style.css
+++ b/renderer/style.css
@@ -1384,3 +1384,30 @@ progress::-moz-progress-bar {
    opacity: 1;
  }
 }
+
+.update-card {
+    max-width: 400px !important;
+    border: 1px solid var(--accent-primary);
+    box-shadow: 0 0 20px rgba(0, 212, 255, 0.2);
+}
+
+.update-header {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    margin-bottom: 15px;
+}
+
+.update-icon { font-size: 2rem; }
+
+.changelog-box {
+    background: var(--bg-primary);
+    padding: 10px;
+    border-radius: 8px;
+    margin: 15px 0;
+    max-height: 150px;
+    overflow-y: auto;
+    font-size: 0.9rem;
+    color: var(--text-secondary);
+    border: 1px solid rgba(255,255,255,0.05);
+}