Add update notification: Version tab in settings + banner

d3nn3s08 · claude · d3nn3s08 · commit ae28bd73b58b · 2026-04-06T07:52:26.000+02:00
- VERSION file (0.1.6) als Basis für Versionsvergleich
- /api/version/check und /api/version/current Endpoints
- Update-Kanal (stable/beta) in DB-Settings speicherbar
- settings.html: neuer "Version" Tab mit Kanal-Auswahl + Update-Button
- layout.html: dezenter Banner wenn neue Version verfügbar (dismissible)
- settings.js: update_channel Radio-Handler

Co-Authored-By: Claude Sonnet 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/VERSION b/VERSION
@@ -0,0 +1 @@
+0.1.6
diff --git a/app/main.py b/app/main.py
@@ -116,6 +116,7 @@ def init_admin():
 from app.routes.monitoring_routes import router as monitoring_router
 from app.routes.bambu_cloud_routes import router as bambu_cloud_router
 from app.routes.mmu_routes import router as mmu_router  # Happy Hare MMU
+from app.routes.version_routes import router as version_router  # Update-Check
 
 from app.websocket.log_stream import stream_log
 from sqlmodel import Session, select
@@ -664,6 +665,7 @@ async def get_response(self, path: str, scope):
 app.include_router(externe_spule_router)
 app.include_router(bambu_cloud_router)  # Bambu Cloud Integration
 app.include_router(mmu_router)          # Happy Hare MMU Integration
+app.include_router(version_router)      # Update-Check
 
 
 # -----------------------------------------------------
diff --git a/app/routes/settings_routes.py b/app/routes/settings_routes.py
@@ -34,6 +34,7 @@
     "enable_file_selection_dialog": "false",
     "enable_multi_color_tracking": "true",
     "enable_ftp_gcode_download": "true",
+    "update_channel": "stable",
 }
 PRO_CONFIG_DEFAULTS = {
     "debug.config.debug_logging_enabled": "false",
@@ -189,6 +190,7 @@ def get_settings(_: None = Depends(admin_required), session: Session = Depends(g
         "enable_file_selection_dialog": _normalize_bool(enable_file_selection_dialog, default=False),
         "enable_multi_color_tracking": _normalize_bool(enable_multi_color_tracking, default=True),
         "enable_ftp_gcode_download": _normalize_bool(enable_ftp_gcode_download, default=True),
+        "update_channel": get_setting(session, "update_channel", DEFAULTS["update_channel"]) or DEFAULTS["update_channel"],
         "debug.config.debug_logging_enabled": _normalize_bool(debug_logging_enabled, default=False),
         "debug.config.latency_warning_threshold_ms": _normalize_int(
             latency_warning_threshold,
@@ -234,6 +236,7 @@ async def update_settings(payload: dict, _: None = Depends(admin_required), sess
         "enable_file_selection_dialog",
         "enable_multi_color_tracking",
         "enable_ftp_gcode_download",
+        "update_channel",
     }
     if not any(k in payload for k in allowed_keys):
         raise HTTPException(status_code=400, detail="Keine gueltigen Settings uebergeben.")
@@ -402,4 +405,10 @@ async def update_settings(payload: dict, _: None = Depends(admin_required), sess
         normalized = "true" if str(val).lower() in TRUE_VALUES else "false"
         set_setting(session, "enable_ftp_gcode_download", normalized)
 
+    if "update_channel" in payload:
+        channel = str(payload.get("update_channel", "")).lower()
+        if channel not in {"stable", "beta"}:
+            raise HTTPException(status_code=400, detail="update_channel muss stable oder beta sein.")
+        set_setting(session, "update_channel", channel)
+
     return get_settings(session)
diff --git a/app/routes/version_routes.py b/app/routes/version_routes.py
@@ -0,0 +1,106 @@
+"""
+Update-Check Route
+==================
+GET /api/version/check
+  → Vergleicht laufende Version mit der aktuellen GitHub-Version.
+  → Kanal (stable/beta) wird aus der DB-Einstellung "update_channel" gelesen.
+  → Cached 6h damit GitHub nicht zugespammt wird.
+
+GET /api/version/current
+  → Gibt nur die laufende Version zurück (kein GitHub-Request).
+"""
+
+import logging
+import time
+from pathlib import Path
+
+import httpx
+from fastapi import APIRouter, Depends
+from sqlmodel import Session
+
+from app.database import get_session
+from app.routes.settings_routes import get_setting
+
+logger = logging.getLogger("app")
+
+router = APIRouter(prefix="/api/version", tags=["version"])
+
+_CACHE_TTL = 6 * 3600
+_cache: dict = {"latest": None, "fetched_at": 0.0, "channel": None}
+
+_VERSION_URLS = {
+    "beta":   "https://raw.githubusercontent.com/d3nn3s08/FilamentHub/beta/VERSION",
+    "stable": "https://raw.githubusercontent.com/d3nn3s08/FilamentHub/main/VERSION",
+}
+
+
+def _read_current_version() -> str:
+    try:
+        p = Path(__file__).resolve().parent.parent.parent / "VERSION"
+        return p.read_text(encoding="utf-8").strip()
+    except Exception:
+        return "0.0.0"
+
+
+def is_newer_version(current: str, latest: str) -> bool:
+    """True wenn latest > current (semver MAJOR.MINOR.PATCH)."""
+    try:
+        def parts(v: str):
+            return [int(x) for x in v.strip().split(".")]
+        c, l = parts(current), parts(latest)
+        max_len = max(len(c), len(l))
+        c += [0] * (max_len - len(c))
+        l += [0] * (max_len - len(l))
+        return l > c
+    except (ValueError, AttributeError):
+        return False
+
+
+async def _fetch_latest(channel: str) -> str | None:
+    now = time.time()
+    if (
+        _cache["latest"]
+        and _cache["channel"] == channel
+        and (now - _cache["fetched_at"]) < _CACHE_TTL
+    ):
+        return _cache["latest"]
+
+    url = _VERSION_URLS.get(channel, _VERSION_URLS["stable"])
+    try:
+        async with httpx.AsyncClient() as client:
+            resp = await client.get(url, timeout=5.0, follow_redirects=True)
+        if resp.status_code == 200:
+            version = resp.text.strip()
+            _cache.update({"latest": version, "fetched_at": now, "channel": channel})
+            return version
+    except Exception as exc:
+        logger.debug("[Version] GitHub-Check fehlgeschlagen: %s", exc)
+    return None
+
+
+@router.get("/current")
+def get_current_version():
+    return {"version": _read_current_version()}
+
+
+@router.get("/check")
+async def check_for_update(session: Session = Depends(get_session)):
+    channel = get_setting(session, "update_channel", "stable") or "stable"
+    current = _read_current_version()
+    latest  = await _fetch_latest(channel)
+
+    if latest is None:
+        return {
+            "current": current,
+            "latest": None,
+            "update_available": False,
+            "channel": channel,
+            "error": "GitHub nicht erreichbar",
+        }
+
+    return {
+        "current":          current,
+        "latest":           latest,
+        "update_available": is_newer_version(current, latest),
+        "channel":          channel,
+    }
diff --git a/frontend/static/js/settings.js b/frontend/static/js/settings.js
@@ -24,10 +24,10 @@ function resolveUpdateSetting() {
 }
 
 async function bindSettingsControls() {
-    const amsRadios = document.querySelectorAll('input[name="settings_ams_mode"][data-setting="ams_mode"]');
+    const amsRadios     = document.querySelectorAll('input[name="settings_ams_mode"][data-setting="ams_mode"]');
     const debugCheckbox = document.querySelector('input[type="checkbox"][data-setting="debug_ws_logging"]');
-    const debugStatus = document.getElementById("debugStatus");
-    if (!amsRadios.length && !debugCheckbox) return;
+    const channelRadios = document.querySelectorAll('input[name="update_channel"][data-setting="update_channel"]');
+    const debugStatus   = document.getElementById("debugStatus");
 
     const fetchFn = resolveFetchSettings();
     const updateFn = resolveUpdateSetting();
@@ -43,6 +43,9 @@ async function bindSettingsControls() {
                 debugStatus.textContent = `Status: ${debugCheckbox.checked ? "aktiv" : "inaktiv"}`;
             }
         }
+        if (channelRadios.length && settings?.update_channel) {
+            channelRadios.forEach(r => r.checked = r.value === settings.update_channel);
+        }
     } catch (e) {
         console.warn("Settings laden fehlgeschlagen", e);
         if (debugStatus) debugStatus.textContent = "Status: Fehler beim Laden";
@@ -61,4 +64,11 @@ async function bindSettingsControls() {
             debugStatus.textContent = `Status: ${debugCheckbox.checked ? "aktiv" : "inaktiv"}`;
         }
     });
+
+    channelRadios.forEach(radio => {
+        radio.addEventListener("change", async () => {
+            if (!radio.checked) return;
+            await updateFn({ update_channel: radio.value });
+        });
+    });
 }
diff --git a/frontend/templates/layout.html b/frontend/templates/layout.html
@@ -206,6 +206,28 @@
     {# Globale Benachrichtigungen auf allen Seiten #}
     <div id="alert-root" class="alert-container"></div>
 
+    {# Update-Banner #}
+    <div id="fh-update-banner" style="display:none;background:rgba(255,193,101,.1);border-bottom:1px solid rgba(255,193,101,.3);padding:8px 20px;display:none;align-items:center;gap:12px;font-size:13px;color:#ffc165;">
+        <span>&#x2197;</span>
+        <span id="fh-update-text"></span>
+        <a href="/settings" style="color:#ffc165;font-weight:600;text-decoration:underline;">Einstellungen</a>
+        <button onclick="document.getElementById('fh-update-banner').style.display='none';localStorage.setItem('fh_dismissed_ver',document.getElementById('fh-update-text').dataset.ver||'');" style="margin-left:auto;background:none;border:none;color:#ffc165;cursor:pointer;font-size:16px;" title="Schließen">&#x2715;</button>
+    </div>
+    <script>
+    (function(){
+        fetch('/api/version/check').then(function(r){ return r.json(); }).then(function(d){
+            if(!d.update_available) return;
+            var dismissed = localStorage.getItem('fh_dismissed_ver');
+            if(dismissed === d.latest) return;
+            var banner = document.getElementById('fh-update-banner');
+            var txt = document.getElementById('fh-update-text');
+            txt.textContent = 'Neue Version verfügbar: ' + d.latest + ' (du hast ' + d.current + ')';
+            txt.dataset.ver = d.latest;
+            banner.style.display = 'flex';
+        }).catch(function(){});
+    })();
+    </script>
+
     <main class="content">
         {% block header %}
         {% if active_page != "debug" %}
diff --git a/frontend/templates/settings.html b/frontend/templates/settings.html
@@ -3,36 +3,148 @@
 {% set page_subtitle = "Theme, Sprache und weitere Optionen" %}
 
 {% block content %}
-<section class="card-grid">
-    <div class="panel">
-        <p class="eyebrow">AMS Settings</p>
-        <div style="display:flex;flex-direction:column;gap:10px;">
-            <label class="user-menu__option">
-                <input type="radio" name="settings_ams_mode" value="single" data-setting="ams_mode">
-                <span>Single AMS</span>
-            </label>
+
+<style>
+.settings-tabs { display:flex; gap:4px; margin-bottom:20px; border-bottom:1px solid rgba(255,255,255,.1); }
+.settings-tab  { padding:8px 18px; border-radius:8px 8px 0 0; border:1px solid transparent; border-bottom:none; cursor:pointer; font-size:13px; color:var(--text-dim,#9ab4d8); background:transparent; transition:.15s; }
+.settings-tab:hover { color:#fff; background:rgba(255,255,255,.05); }
+.settings-tab.active { color:#fff; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.12); }
+.settings-pane { display:none; }
+.settings-pane.active { display:block; }
+.ver-row { display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
+.ver-badge { padding:3px 10px; border-radius:20px; font-size:12px; font-weight:600; }
+.ver-badge.current { background:rgba(154,180,216,.15); color:#9ab4d8; }
+.ver-badge.ok  { background:rgba(106,228,133,.15); color:#6ae485; }
+.ver-badge.upd { background:rgba(255,193,101,.15); color:#ffc165; }
+#verCheckBtn { padding:7px 16px; border-radius:8px; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.07); color:#fff; cursor:pointer; font-size:13px; }
+#verCheckBtn:hover { background:rgba(255,255,255,.12); }
+#verCheckBtn:disabled { opacity:.5; cursor:default; }
+#verResult { font-size:13px; color:var(--text-dim,#9ab4d8); min-height:20px; }
+</style>
+
+<div class="settings-tabs">
+    <button class="settings-tab active" data-tab="general">Allgemein</button>
+    <button class="settings-tab" data-tab="version">Version</button>
+</div>
+
+<div id="pane-general" class="settings-pane active">
+    <section class="card-grid">
+        <div class="panel">
+            <p class="eyebrow">AMS Settings</p>
+            <div style="display:flex;flex-direction:column;gap:10px;">
+                <label class="user-menu__option">
+                    <input type="radio" name="settings_ams_mode" value="single" data-setting="ams_mode">
+                    <span>Single AMS</span>
+                </label>
+                <label class="user-menu__option">
+                    <input type="radio" name="settings_ams_mode" value="multi" data-setting="ams_mode">
+                    <span>Multi AMS (Experimental)</span>
+                </label>
+            </div>
+        </div>
+        <div class="panel">
+            <p class="eyebrow">Debug</p>
             <label class="user-menu__option">
-                <input type="radio" name="settings_ams_mode" value="multi" data-setting="ams_mode">
-                <span>Multi AMS (Experimental)</span>
+                <input type="checkbox" data-setting="debug_ws_logging">
+                <span>WS JSON Logging aktivieren</span>
+                <span class="tooltip-container">
+                    <span class="tooltip-icon" tabindex="0">i</span>
+                    <span class="tooltip-box">Loggt alle eingehenden WebSocket-Events als JSON zur Fehlersuche. Empfohlen nur für Debug-Zwecke.</span>
+                </span>
             </label>
+            <p class="subtitle" id="debugStatus">Status: unbekannt</p>
+            <a class="user-menu__link" href="/debug">Zum Debug Center</a>
         </div>
-    </div>
-    <div class="panel">
-        <p class="eyebrow">Debug</p>
-        <label class="user-menu__option">
-            <input type="checkbox" data-setting="debug_ws_logging">
-            <span>WS JSON Logging aktivieren</span>
-            <span class="tooltip-container">
-                <span class="tooltip-icon" tabindex="0">i</span>
-                <span class="tooltip-box">Loggt alle eingehenden WebSocket-Events als JSON zur Fehlersuche. Empfohlen nur für Debug-Zwecke.</span>
-            </span>
-        </label>
-        <p class="subtitle" id="debugStatus">Status: unbekannt</p>
-        <a class="user-menu__link" href="/debug">Zum Debug Center</a>
-    </div>
-</section>
+    </section>
+</div>
+
+<div id="pane-version" class="settings-pane">
+    <section class="card-grid">
+        <div class="panel" style="grid-column:1/-1">
+            <p class="eyebrow">Update-Kanal</p>
+            <div style="display:flex;flex-direction:column;gap:10px;margin-bottom:20px;">
+                <label class="user-menu__option">
+                    <input type="radio" name="update_channel" value="stable" data-setting="update_channel">
+                    <span>Stable <span style="color:var(--text-dim);font-size:12px">— getestete Releases (empfohlen)</span></span>
+                </label>
+                <label class="user-menu__option">
+                    <input type="radio" name="update_channel" value="beta" data-setting="update_channel">
+                    <span>Beta <span style="color:var(--text-dim);font-size:12px">— neue Features, kann Bugs enthalten</span></span>
+                </label>
+            </div>
+            <p class="eyebrow">Version</p>
+            <div class="ver-row">
+                <span>Installiert:</span><span class="ver-badge current" id="verCurrent">lädt…</span>
+                <span>Aktuell:</span><span class="ver-badge ok" id="verLatest">—</span>
+            </div>
+            <div style="display:flex;gap:10px;align-items:center;margin-bottom:12px;">
+                <button id="verCheckBtn">Auf Updates prüfen</button>
+                <a style="color:#6ae485;font-size:13px;text-decoration:none" href="https://github.com/d3nn3s08/FilamentHub/releases" target="_blank">Changelog ↗</a>
+            </div>
+            <p id="verResult"></p>
+            <p id="verUpdateLink" style="display:none;margin-top:6px;">
+                <a style="color:#ffc165;font-size:13px;text-decoration:none" href="https://github.com/d3nn3s08/FilamentHub/releases" target="_blank">&#x2197; Zum Release →</a>
+            </p>
+        </div>
+    </section>
+</div>
+
 {% endblock %}
 
 {% block extra_scripts %}
 <script src="{{ url_for('frontend_static', path='js/settings.js') }}"></script>
+<script>
+document.querySelectorAll('.settings-tab').forEach(function(btn) {
+    btn.addEventListener('click', function() {
+        document.querySelectorAll('.settings-tab').forEach(function(b) { b.classList.remove('active'); });
+        document.querySelectorAll('.settings-pane').forEach(function(p) { p.classList.remove('active'); });
+        btn.classList.add('active');
+        document.getElementById('pane-' + btn.dataset.tab).classList.add('active');
+    });
+});
+
+async function loadVersionInfo() {
+    try {
+        var r = await fetch('/api/version/current');
+        var d = await r.json();
+        document.getElementById('verCurrent').textContent = d.version;
+    } catch(e) {}
+}
+
+document.getElementById('verCheckBtn').addEventListener('click', async function() {
+    var btn = this;
+    var result = document.getElementById('verResult');
+    var latest = document.getElementById('verLatest');
+    var updateLink = document.getElementById('verUpdateLink');
+    btn.disabled = true;
+    btn.textContent = 'Prüfe\u2026';
+    result.textContent = '';
+    updateLink.style.display = 'none';
+    try {
+        var r = await fetch('/api/version/check');
+        var d = await r.json();
+        document.getElementById('verCurrent').textContent = d.current;
+        if (d.latest) {
+            latest.textContent = d.latest;
+            if (d.update_available) {
+                latest.className = 'ver-badge upd';
+                result.textContent = 'Update verfügbar!';
+                updateLink.style.display = 'block';
+            } else {
+                latest.className = 'ver-badge ok';
+                result.textContent = '\u2713 FilamentHub ist aktuell.';
+            }
+        } else {
+            result.textContent = d.error || 'GitHub nicht erreichbar.';
+        }
+    } catch(e) {
+        result.textContent = 'Fehler: ' + e.message;
+    } finally {
+        btn.disabled = false;
+        btn.textContent = 'Auf Updates prüfen';
+    }
+});
+
+loadVersionInfo();
+</script>
 {% endblock %}
