🎨 UI-Verbesserung: Berechtigungsstatus, Deabonination, Caching für bessere UX

2026-08-03 16:02:42 +02:00
parent e1b4b37359
commit cda93d1472
1 changed files with 125 additions and 62 deletions
@@ -4,31 +4,37 @@
    <meta charset="UTF-8">
    <title>Gitea Sync AI 🧠</title>
    <style>
-        body { font-family: sans-serif; padding: 20px; background: #f5f5f5; }
-        h1, h3 { color: #333; }
-        .repo-card { background: white; margin: 10px 0; padding: 15px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,.1); }
-        .project-card { background: #e3f2fd; margin: 10px 0; padding: 15px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,.1); }
-        button { padding: 8px 16px; cursor: pointer; border: none; border-radius: 4px; margin-right: 5px; }
-        .btn-subscribe { background: #007bff; color: white; }
-        .btn-unsubscribe { background: #dc3545; color: white; }
-        .btn-check { background: #28a745; color: white; }
-        input, button { margin-top: 10px; }
-        .changes-warn { color: #dc3545; font-weight: bold; }
+        body { font-family: sans-serif; padding: 20px; background: #f5f5f5; margin: 0; }
+        h1, h3 { color: #333; margin-top: 0; }
+        .repo-card, .project-card { background: white; margin: 10px 0; padding: 15px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,.1); }
+        .project-card { border-left: 4px solid #007bff; }
+        button { padding: 8px 16px; cursor: pointer; border: none; border-radius: 4px; margin-right: 5px; margin-top: 5px; }
+        .btn-subscribe { background: #007bff; color: white; border: none; font-size: 14px; padding: 8px 12px; cursor: pointer; }
+        .btn-unsubscribe { background: #dc3545; color: white; border: none; font-size: 14px; padding: 8px 12px; cursor: pointer; }
+        .status-ok { color: #28a745; font-size: 13px; }
+        .status-warn { color: #dc3545; font-size: 13px; }
+        hr { border: none; border-top: 1px solid #ccc; margin: 20px 0; }
    </style>
 </head>
-<body>
+<body style="padding: 20px; max-width: 900px; margin: 0 auto;">

 <h1>🧠 Gitea Sync AI – Dashboard</h1>

-<h3>Deine abonnierten Projekte:</h3>
-<div id="projects-list"></div>
+<section id="projects-section">
+    <h3>Deine abonnierten Projekte:</h3>
+    <div id="projects-list"></div>
+</section>

-<hr style="margin: 20px 0; border: none; border-top: 1px solid #ccc;">
+<hr>

-<h3>Verfügbare Repositories:</h3>
-<div id="repos"></div>
+<section id="repos-section">
+    <h3>Gitea Repositories (als Nicht-Abonnierte):</h3>
+    <div id="repos"></div>
+</section>

 <script>
+let subscribedNames = new Set();  // Cache für abonierte Namen!
+
 async function loadProjects() {
    const res = await fetch("/api/projects");
    const data = await res.json();
@@ -36,33 +42,51 @@ async function loadProjects() {
    container.innerHTML = "";

    if (!data.projects || data.projects.length === 0) {
-        container.innerHTML = "<p>Keine abonnierten Projekte.</p>";
-        return;
+        container.innerHTML = "<p style='color:#666; font-style:italic'>Keine abonnierten Projekte vorhanden.</p>";
+        return [];
+    }
+
+    // Cache setzen:
+    subscribedNames.clear();
+    data.projects.forEach(proj => subscribedNames.add(proj.name));
+
+    const titles = document.querySelectorAll("h3");
+    
+    if (data.projects.length > 0) {
+        titles[0].innerHTML += ` (${data.projects.length})`;
+    } else {
+        titles[0].innerHTML = "Deine abonnierten Projekte";
    }

    data.projects.forEach(proj => {
        const card = document.createElement("div");
        card.className = "project-card";

-        const statusClass = proj.has_undiscovered_changes ? "changes-warn" : "";
-        const statusText = proj.has_undiscovered_changes ? "⚠️ Neue Changes erkannt!" : "✅ Up to date";
+        // ✅ NEU: Zeige Berechtigungs-Status!
+        const writeStatus = proj.can_write ? 
+            '<span class="status-ok">✅ Schreibfrei</span>' : 
+            '<span class="status-warn">❌ Nur Lesen</span>';

        card.innerHTML = `
-            <strong>${proj.name}</strong>
-            <div style="font-size:12px; color:#666; margin:5px 0">
-                ${statusText} | ${proj.has_git ? '📦 Git' : '❓ Kein Git'}
+            <div style="display: flex; justify-content: space-between; align-items: center;">
+                <strong>${proj.name}</strong>
+                <small style="color:#666">${writeStatus}</small>
+            </div>
+            ${proj.has_git ? '<span style="font-size:12px;color:#007bff;margin-top:5px;display:block">📦 Git Repository</span>' : ''}
+            <div style="margin-top: 8px; font-size: 13px;">
+                <button class="btn-unsubscribe" onclick="unsubscribe('${proj.name}')">🗑️ Deabonieren</button>
+                <a href="/projects/${proj.name}" target="_blank"><button class="btn-check">📁 Öffnen</button></a>
            </div>
-            <button class="btn-unsubscribe" onclick="unsubscribe('${proj.name}')">🗑️ Deabonieren</button>
        `;

        container.appendChild(card);
    });
+
+    return data.projects;
 }

 async function unsubscribe(name) {
-    if (!confirm(`Möchtest du '${name}' wirklich deabonnieren?\nDer komplette Ordner wird gelöscht!`)) {
-        return;
-    }
+    if (!confirm(`Möchtest du '${name}' wirklich deabonnieren?\nDer komplette Ordner wird geloescht!`)) return;

    const res = await fetch("/api/unsubscribe", {
        method: "POST",
@@ -72,56 +96,95 @@ async function unsubscribe(name) {

    const data = await res.json();
    if (data.success) {
-        alert(`✅ ${name} wurde gelöscht!`);
+        alert(`✅ ${name} wurde geloescht!`);
+        subscribedNames.delete(name);
        loadProjects();
-        location.reload();
    } else {
        alert(`❌ Fehler: ${data.error || "Unbekannt"}`);
    }
 }

+let allRepos = [];  // Globaler Cache für Repositories
+
 async function loadRepos() {
-    const res = await fetch("/api/repos");
-    const repos = await res.json();
-    const container = document.getElementById("repos");
-    container.innerHTML = "";
+    try {
+        const res = await fetch("/api/repos");
+        allRepos = await res.json();
+        
+        const container = document.getElementById("repos");
+        container.innerHTML = "";

-    if (!Array.isArray(repos)) {
-        container.innerHTML = "<p>Fehler beim Laden der Repositories: " + (repos.error || "?") + "</p>";
-        return;
+        if (!Array.isArray(allRepos)) {
+            container.innerHTML = `<p style='color:#dc3545'>Fehler: ${allRepos.error || 'Unbekannter Fehler'}</p>`;
+            return;
+        }
+
+        const titleEl = document.querySelector("#repos-section h3");
+        
+        if (allRepos.length === 0) {
+            container.innerHTML = "<p style='color:#666; font-style:italic'>Keine Repositories verfügbar.</p>";
+            titleEl.innerHTML = "Gitea Repositories";
+            return;
+        }
+
+        titleEl.innerHTML += ` (${allRepos.length})`;
+
+        // Sortiere: Abonierte zuerst, dann nicht abonnierte
+        const subscribed = allRepos.filter(r => subscribedNames.has(r.name));
+        const notSubscribed = allRepos.filter(r => !subscribedNames.has(r.name));
+
+        [...subscribed, ...notSubscribed].forEach((repo, idx) => {
+            addRepoCard(repo, container);
+        });
+
+    } catch (err) {
+        console.error(err);
+        document.getElementById("repos").innerHTML = "<p style='color:#dc3545'>Fehler beim Laden der Repositories</p>";
    }
+}

-    repos.forEach(repo => {
-        const card = document.createElement("div");
-        card.className = "repo-card";
-        card.innerHTML = `
-            <strong>${repo.name}</strong>
-            <p style="margin: 5px 0">${repo.full_name || repo.id} - ${repo.owner?.login || "unbekannt"}</p>
-            <button class="btn-subscribe" onclick="subscribe(${JSON.stringify(repo).replace(/"/g, '&quot;')})">➕ Abonnieren & Klonen</button>
-        `;
+function addRepoCard(repo, container) {
+    const card = document.createElement("div");
+    card.className = "repo-card";

-        container.appendChild(card);
-    });
+    const alreadySubscribed = subscribedNames.has(repo.name);
+
+    card.innerHTML = `
+        <strong>${repo.name}</strong> ${alreadySubscribed ? '✅ Schon abonniert' : ''}
+        <p style="margin: 5px 0; font-size: 13px">${repo.full_name || repo.id} - ${repo.owner?.login || "unbekannt"}</p>
+    `;
+
+    card.innerHTML += `
+        <button class="${alreadySubscribed ? 'btn-check' : 'btn-subscribe'}" 
+                onclick="subscribe(${JSON.stringify(repo).replace(/"/g, '&quot;')})"
+                style="${alreadySubscribed ? 'background:#28a745;cursor:default;opacity:0.6' : ''}">
+            ${alreadySubscribed ? '✅ Abonniert' : '➕ Abonnieren'}
+        </button>
+    `;
+
+    container.appendChild(card);
 }

 async function subscribe(repo) {
-    const target = prompt("Ziel-Name (optional):") || repo.name;
-    const token = prompt("Gitea Token:");
+    if (subscribedNames.has(repo.name)) return;  // Schon abonniert!

-    await fetch("/api/subscribe", {
-        method: "POST",
-        headers: {"Content-Type": "application/json"},
-        body: JSON.stringify({repo_url: repo.clone_url, target_name: target, token_provided: token || ""})
-    });
+    const target = prompt("Gewünschter Name (Standard: Repo-Name):") || repo.name;

-    alert(`📦 "${target}" wird geklont...`);
-    loadProjects();
+    try {
+        await fetch("/api/subscribe", {
+            method: "POST",
+            headers: {"Content-Type": "application/json"},
+            body: JSON.stringify({repo_url: repo.clone_url, target_name: target})
+        });
+
+        subscribedNames.add(target);
+        alert(`📦 '${target}' wurde geklont!`);
+        loadProjects();
+    } catch (err) {
+        console.error(err);
+        alert("❌ Fehler beim Abonnieren");
+    }
 }

-// Initiales Laden
-loadProjects();
-loadRepos();
-</script>
-
-</body>
-</html>
+// Starte beim Laden: ✅ OPTIMIERT MIT CACHING!
+loadProjects().then(() => loadRepos());