Add room details modal with dynamic content rendering

Author: raphaeldfs

index.html

@@ -163,6 +163,15 @@ <h2>Rooms</h2>
         }
     </script>
     <script src="script.js"></script>
+
+    <!-- Room Details Modal -->
+    <div id="room-details-modal" class="modal">
+        <div class="modal-content">
+            <span class="close-button" onclick="closeRoomDetails()">&times;</span>
+            <h3>Détails de la salle</h3>
+            <div id="room-details-content"></div>
+        </div>
+    </div>
 </body>
 
 </html>

script.js

@@ -27,6 +27,7 @@ function renderRooms(rooms) {
         div.className = 'room-item';
         div.dataset.roomId = room.id;
         div.textContent = name;
+        div.onclick = () => clickHandler(room.id);
         container.appendChild(div);
     }
 }
@@ -39,3 +40,68 @@ async function get(path) {
     }
     return await response.json();
 }
+
+async function clickHandler(id) {
+    try {
+        const roomData = await get('rooms/' + id);
+        showRoomDetails(roomData);
+    } catch (err) {
+        console.error('Failed to load room details:', err);
+        alert('Erreur lors du chargement des informations de la salle.');
+    }
+}
+
+function showRoomDetails(roomData) {
+    // Supprimer l'encadré existant s'il y en a un
+    const existingModal = document.getElementById('room-details-modal');
+    if (existingModal) {
+        existingModal.remove();
+    }
+
+    // Créer l'encadré
+    const modal = document.createElement('div');
+    modal.id = 'room-details-modal';
+    modal.style.position = 'fixed';
+    modal.style.top = '50%';
+    modal.style.left = '50%';
+    modal.style.transform = 'translate(-50%, -50%)';
+    modal.style.backgroundColor = 'white';
+    modal.style.border = '1px solid #ccc';
+    modal.style.padding = '20px';
+    modal.style.boxShadow = '0 4px 8px rgba(0,0,0,0.1)';
+    modal.style.zIndex = '1000';
+    modal.style.maxWidth = '400px';
+    modal.style.borderRadius = '8px';
+
+    // Contenu
+    let content = '<h3>Détails de la salle</h3>';
+    for (const [key, value] of Object.entries(roomData)) {
+        if (key === 'classes' && Array.isArray(value)) {
+            content += `<p><strong>${key}:</strong> ${value.map(c => c.name || c.id).join(', ')}</p>`;
+        } else if (key === 'features' && Array.isArray(value)) {
+            content += `<p><strong>${key}:</strong> ${value.map(f => f.name || f.code).join(', ')}</p>`;
+        } else {
+            content += `<p><strong>${key}:</strong> ${value}</p>`;
+        }
+    }
+    content += '<button onclick="closeRoomDetails()">Fermer</button>';
+
+    modal.innerHTML = content;
+
+    // Ajouter au body
+    document.body.appendChild(modal);
+
+    // Fermer en cliquant en dehors
+    modal.addEventListener('click', (e) => {
+        if (e.target === modal) {
+            closeRoomDetails();
+        }
+    });
+}
+
+function closeRoomDetails() {
+    const modal = document.getElementById('room-details-modal');
+    if (modal) {
+        modal.remove();
+    }
+}

style.css

@@ -230,3 +230,51 @@ body, html {
 .rooms-container::-webkit-scrollbar-thumb:hover {
     background: #666;
 }
+
+/* ========================================
+   Room Details Modal
+   ======================================== */
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
+.modal-content {
+    background-color: white;
+    margin: 15% auto;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 80%;
+    max-width: 500px;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    position: relative;
+}
+
+.close-button {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+.close-button:hover,
+.close-button:focus {
+    color: black;
+    text-decoration: none;
+}
+
+#room-details-content p {
+    margin: 10px 0;
+}
+
+#room-details-content strong {
+    color: #333;
+}