Add Admin.php & Api.php & Functionnal Planets DATABASE

SRC/main.js

@@ -28,11 +28,14 @@ async function fetchData(planetId) {
     tbody.innerHTML = '<tr><td colspan="3">Chargement des données depuis la BDD...</td></tr>';
 
     try {
-        const mockDB = {
-        };
+        const response = await fetch(`api.php?planet=${planetId}`);
         
-        await new Promise(resolve => setTimeout(resolve, 500));
-        const data = mockDB[planetId] || [];
+        if (!response.ok) {
+            const errorData = await response.json().catch(() => ({}));
+            throw new Error(errorData.error || `Erreur HTTP: ${response.status}`);
+        }
+        
+        const data = await response.json();
 
         tbody.innerHTML = '';
 
@@ -41,20 +44,75 @@ async function fetchData(planetId) {
             return;
         }
 
-        data.forEach(row => {
+        const columns = Object.keys(data[0]).filter(col => col.toLowerCase() !== 'copyright');
+        
+        const thead = tbody.parentElement.querySelector('thead');
+        thead.innerHTML = '<tr>' + columns.map(col => {
+            const colLower = col.toLowerCase();
+            const isDesc = colLower.includes('desc') || colLower.includes('expl');
+            const isUrl = colLower.includes('url') || colLower === 'image' || colLower === 'img';
+            
+            let className = '';
+            if (isDesc) className = ' class="col-desc"';
+            else if (isUrl) className = ' class="col-url"';
+            return `<th${className}>${col.toUpperCase()}</th>`;
+        }).join('') + '</tr>';
+
+        data.forEach((row, index) => {
             const tr = document.createElement('tr');
-            tr.innerHTML = `
-                <td>${row.nom}</td>
-                <td><div class="img-placeholder">${row.image}</div></td>
-                <td>${row.date}</td>
-            `;
+            
+            if (index >= 10) {
+                tr.classList.add('hidden-row');
+            }
+            
+            let rowHtml = '';
+            columns.forEach(col => {
+                const colLower = col.toLowerCase();
+                if (colLower.includes('url') || colLower === 'image' || colLower === 'img') {
+                    const url = row[col];
+                    if (url && url.trim() !== '') {
+                        rowHtml += `<td class="col-url">
+                            <a href="${url}" target="_blank" rel="noopener noreferrer" style="color: inherit; text-decoration: underline; font-weight: 500;">
+                                ${url}
+                            </a>
+                        </td>`;
+                    } else {
+                        rowHtml += `<td class="col-url">N/A</td>`;
+                    }
+                } else if (colLower.includes('desc') || colLower.includes('expl')) {
+                    const text = row[col] || '';
+                    let fontSizeStyle = '';
+                    if (text.length > 200) fontSizeStyle = ' font-size: 0.75rem;';
+                    else if (text.length > 100) fontSizeStyle = ' font-size: 0.85rem;';
+                    rowHtml += `<td class="col-desc" style="${fontSizeStyle}">${text}</td>`;
+                } else {
+                    rowHtml += `<td>${row[col]}</td>`;
+                }
+            });
+            tr.innerHTML = rowHtml;
             tbody.appendChild(tr);
         });
 
+        const tableContainer = tbody.closest('.table-container');
+        
+        const existingBtn = tableContainer.querySelector('.show-more-btn');
+        if (existingBtn) existingBtn.remove();
+
+        if (data.length > 10) {
+            const btn = document.createElement('button');
+            btn.innerHTML = 'Voir la suite ⬇';
+            btn.className = 'show-more-btn';
+            btn.onclick = () => {
+                tbody.querySelectorAll('.hidden-row').forEach(row => row.classList.remove('hidden-row'));
+                btn.remove();
+            };
+            tableContainer.appendChild(btn);
+        }
+
         tbody.setAttribute('data-loaded', 'true');
 
     } catch (error) {
         console.error("Erreur de connexion à la BDD :", error);
-        tbody.innerHTML = '<tr><td colspan="3">Erreur lors de la récupération des données.</td></tr>';
+        tbody.innerHTML = `<tr><td colspan="3" style="color: #ff4444;">Erreur technique : ${error.message}</td></tr>`;
     }
 }