mehr Infos im Popup (WIP --> CSS fehlt noch)

src/main.js

@@ -2,7 +2,6 @@ import { createStarterKitElement, enhanceStarterKits } from './utils/starterkit-
 import { seededShuffleChildren } from './utils/shuffle-utils.js';
 import { initializeCreateStarterKitPopup } from './utils/create-starterkit.js';
 
-
 let userConsent = null;
 export { userConsent };
 
@@ -10,14 +9,13 @@ async function loadTemplates() {
     const response = await fetch('src/template/template.html');
     const templateHTML = await response.text();
 
-    // Füge die Templates in das DOM ein
     const templateContainer = document.createElement('div');
     templateContainer.innerHTML = templateHTML;
     document.body.appendChild(templateContainer);
 }
 
 document.addEventListener('DOMContentLoaded', async function () {
-    await loadTemplates(); // Templates laden
+    await loadTemplates();
 
     initializeCreateStarterKitPopup();
 
@@ -25,31 +23,26 @@ document.addEventListener('DOMContentLoaded', async function () {
     const shuffleContainers = document.querySelectorAll('.shuffle-container');
     const seed = Date.now();
 
-    // Lade die Haupt-Konfigurationsdatei
     fetch('config.json')
         .then(response => response.json())
         .then(config => {
             const starterkitFiles = config.starterkits;
 
-            // Lade alle StarterKit-Dateien
             return Promise.all(
                 starterkitFiles.map(file => fetch(file).then(res => res.json()))
             );
         })
         .then(starterkits => {
-            // Verarbeite die geladenen StarterKits
             starterkits.forEach(kit => {
                 const kitElement = createStarterKitElement(kit);
                 container.appendChild(kitElement);
             });
 
-            // Shuffle-Logik anwenden
             shuffleContainers.forEach(container => {
                 seededShuffleChildren(container, seed);
             });
 
-            // Zusätzliche Funktionalität für StarterKits hinzufügen
             enhanceStarterKits();
         })
         .catch(error => console.error('Fehler beim Laden der StarterKits:', error));
-});
+});

src/template/template.html

@@ -24,6 +24,19 @@
             <button class="close-popup">×</button>
             <div class="recommendation-popup-header">
                 <h3></h3>
+                <p></p>
+                <div class="starterkit-info">
+                    <div class="profile-count">
+                        <span class="profile-line1">Accounts</span><br>
+                        <span class="profile-line2"></span>
+                    </div>
+                    <div class="autor">
+                        <span class="created-by">created by</span>
+                        <div class="authors-container">
+                            <a class="account" target="_blank"></a>
+                        </div>
+                    </div>
+                </div>
             </div>
             <div id="account-list" class="recommendation-popup-body"></div>
             <div class="loading-spinner" id="loading-spinner"></div>

src/utils/popup-utils.js

@@ -1,11 +1,28 @@
 import { fetchProfile } from './profile-utils.js';
+import { extractHostname, getServerClass } from './instances.js';
 
-export function createRecommendationPopup(accounts, title) {
+export function createRecommendationPopup(accounts, title, authors, description) {
     const template = document.getElementById('popup-template').content.cloneNode(true);
 
     const popup = template.querySelector('.recommendation-popup');
     popup.querySelector('h3').textContent = title;
 
+    // Beschreibung hinzufügen
+    const descriptionElement = popup.querySelector('.recommendation-popup-header p');
+    if (descriptionElement) {
+        descriptionElement.textContent = description;
+    } else {
+        console.warn('Kein Element für die Beschreibung im Popup-Template gefunden.');
+    }
+
+    // Zeige die Anzahl der Accounts
+    const profileCount = popup.querySelector('.profile-line2');
+    profileCount.textContent = `${accounts.length}`;
+
+    // Autoren hinzufügen mit der ausgelagerten Funktion
+    const authorsContainer = popup.querySelector('.authors-container');
+    populateAuthorsContainer(authorsContainer, authors);
+
     const closeButton = popup.querySelector('.close-popup');
     closeButton.addEventListener('click', () => popup.remove());
 
@@ -58,3 +75,50 @@ export function createRecommendationPopup(accounts, title) {
 
     return popup;
 }
+
+
+export function populateAuthorsContainer(authorsContainer, authors) {
+    if (!authorsContainer) {
+        console.error('Fehlendes Element: .authors-container. Bitte prüfen!');
+        return;
+    }
+
+    authorsContainer.innerHTML = ''; // Sicherstellen, dass der Container leer ist
+
+    if (authors && authors.length > 0) {
+        const authorsToShow = authors.slice(0, 2); // Maximal zwei Autoren
+        const additionalAuthorsCount = authors.length - authorsToShow.length;
+
+        authorsToShow.forEach(author => {
+            const authorLink = document.createElement('a');
+            authorLink.href = author;
+            authorLink.classList.add('account');
+            authorLink.target = '_blank'; // Damit die Links ein neues Fenster öffnen
+
+            fetchProfile(author, { updateElement: authorLink }).then(() => {
+                const avatarImage = authorLink.querySelector('.account-avatar');
+                if (avatarImage) {
+                    authorLink.textContent = '';
+                    authorLink.appendChild(avatarImage);
+
+                    // Hinzufügen der server-class für den Avatar-Rahmen
+                    const hostname = extractHostname(author);
+                    const serverClass = getServerClass(hostname);
+                    if (serverClass) {
+                        avatarImage.classList.add(serverClass);
+                    }
+                }
+            });
+
+            authorsContainer.appendChild(authorLink);
+        });
+
+        // Hinweis auf zusätzliche Autoren
+        if (additionalAuthorsCount > 0) {
+            const additionalAuthorsText = document.createElement('span');
+            additionalAuthorsText.classList.add('additional-authors');
+            additionalAuthorsText.textContent = `+ ${additionalAuthorsCount}`;
+            authorsContainer.appendChild(additionalAuthorsText);
+        }
+    }
+}

src/utils/starterkit-utils.js

@@ -1,5 +1,5 @@
 import { fetchProfile } from './profile-utils.js';
-import { createRecommendationPopup } from './popup-utils.js';
+import { createRecommendationPopup, populateAuthorsContainer } from './popup-utils.js';
 import { getServerClass, extractHostname } from './instances.js';
 import { showConsentPopup, getUserConsent, setUserConsent } from './consent-utils.js';
 
@@ -15,51 +15,14 @@ export function createStarterKitElement(kit) {
     const profileCount = kitElement.querySelector('.profile-count');
     profileCount.querySelector('.profile-line2').textContent = `${kit.accounts.length}`;
 
-    // Hinzufügen der Autoren mit 'created by'
+    // Hinzufügen der Autoren mit 'created by' über die neue Funktion
     const authorsContainer = kitElement.querySelector('.authors-container');
     if (!authorsContainer) {
         console.error('Fehlendes Element: .authors-container im Template. Bitte prüfen!');
         return kitElement; // Gibt das unvollständige Element zurück
     }
 
-    authorsContainer.innerHTML = ''; // Sicherstellen, dass der Container leer ist
+    populateAuthorsContainer(authorsContainer, kit.authors); // Nutzt die ausgelagerte Funktion
-
-    if (kit.authors && kit.authors.length > 0) {
-        const authorsToShow = kit.authors.slice(0, 2); // Maximal zwei Autoren
-        const additionalAuthorsCount = kit.authors.length - authorsToShow.length;
-
-        authorsToShow.forEach(author => {
-            const authorLink = document.createElement('a');
-            authorLink.href = author;
-            authorLink.classList.add('account');
-            authorLink.target = '_blank'; // Damit die Links wie im Template ein neues Fenster öffnen
-
-            fetchProfile(author, { updateElement: authorLink }).then(() => {
-                const avatarImage = authorLink.querySelector('.account-avatar');
-                if (avatarImage) {
-                    authorLink.textContent = '';
-                    authorLink.appendChild(avatarImage);
-
-                    // Hinzufügen der server-class für den Avatar-Rahmen
-                    const hostname = extractHostname(author);
-                    const serverClass = getServerClass(hostname);
-                    if (serverClass) {
-                        avatarImage.classList.add(serverClass);
-                    }
-                }
-            });
-
-            authorsContainer.appendChild(authorLink);
-        });
-
-        // Hinweis auf zusätzliche Autoren
-        if (additionalAuthorsCount > 0) {
-            const additionalAuthorsText = document.createElement('span');
-            additionalAuthorsText.classList.add('additional-authors');
-            additionalAuthorsText.textContent = `+ ${additionalAuthorsCount}`;
-            authorsContainer.appendChild(additionalAuthorsText);
-        }
-    }
 
     kitElement.dataset.accounts = JSON.stringify(kit.accounts);
 
@@ -112,7 +75,10 @@ export function enhanceStarterKits() {
 // Funktion zum Laden der StarterKit-Profile
 function loadStarterKitProfiles(kit) {
     const title = kit.querySelector('h3').textContent;
+    const description = kit.querySelector('p').textContent; // Beschreibung auslesen
     const accounts = JSON.parse(kit.dataset.accounts || '[]');
-    const popup = createRecommendationPopup(accounts, title);
+    const authors = Array.from(kit.querySelectorAll('.authors-container .account')).map(author => author.href);
+
+    const popup = createRecommendationPopup(accounts, title, authors, description);
     document.body.appendChild(popup);
 }