feat: portail dynamique - rendu via API /public/apps du dashboard

index.html

@@ -99,9 +99,7 @@
       top: 1px;
     }
 
-    .tab-btn:hover {
+    .tab-btn:hover { color: #c5c8d8; }
-      color: #c5c8d8;
-    }
 
     .tab-btn.active {
       color: #ffffff;
@@ -137,9 +135,7 @@
       width: 100%;
     }
 
-    .tab-panel {
+    .tab-panel { display: none; }
-      display: none;
-    }
 
     .tab-panel.active {
       display: block;
@@ -163,10 +159,7 @@
       margin-bottom: 10px;
     }
 
-    .section-header p {
+    .section-header p { color: #8b8fa8; font-size: 1rem; }
-      color: #8b8fa8;
-      font-size: 1rem;
-    }
 
     /* ===== GRID ===== */
     .apps-grid {
@@ -188,17 +181,13 @@
       transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
     }
 
-    .app-card:hover {
+    .app-card:hover { transform: translateY(-8px) scale(1.03); }
-      transform: translateY(-8px) scale(1.03);
-    }
 
     .app-card:hover .card-image-wrapper {
       box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.1);
     }
 
-    .app-card:hover .card-name {
+    .app-card:hover .card-name { color: #ffffff; }
-      color: #ffffff;
-    }
 
     .card-image-wrapper {
       width: 180px;
@@ -257,9 +246,7 @@
       filter: grayscale(80%);
     }
 
-    .app-card.offline .card-image-wrapper {
+    .app-card.offline .card-image-wrapper { box-shadow: none; }
-      box-shadow: none;
-    }
 
     .card-status-badge {
       display: none;
@@ -275,8 +262,14 @@
       border: 1px solid rgba(239,68,68,0.3);
     }
 
-    .app-card.offline .card-status-badge {
+    .app-card.offline .card-status-badge { display: inline-block; }
-      display: inline-block;
+
+    /* ===== LOADING ===== */
+    .loading-msg {
+      text-align: center;
+      color: #8b8fa8;
+      padding: 60px 0;
+      font-size: 1rem;
     }
 
     /* ===== FOOTER ===== */
@@ -296,24 +289,6 @@
       font-size: 0.8rem;
     }
 
-    .footer-powered span {
-      font-weight: 600;
-      color: #8b8fa8;
-    }
-
-    .footer-logo-placeholder {
-      display: inline-flex;
-      align-items: center;
-      gap: 6px;
-      background: linear-gradient(135deg, #6366f1, #8b5cf6);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      background-clip: text;
-      font-weight: 800;
-      font-size: 0.95rem;
-      letter-spacing: -0.3px;
-    }
-
     /* ===== RESPONSIVE ===== */
     @media (max-width: 768px) {
       header { padding: 20px 24px; }
@@ -355,13 +330,13 @@
 
   <!-- TABS NAV -->
   <div class="tabs-wrapper">
-    <button class="tab-btn active" onclick="switchTab('itinova', this)">
+    <button id="tab-itinova" class="tab-btn active" onclick="switchTab('itinova', this)">
       Applications Itinova
-      <span class="tab-count">5</span>
+      <span class="tab-count" id="count-itinova">…</span>
     </button>
-    <button class="tab-btn" onclick="switchTab('santinova', this)">
+    <button id="tab-santinova" class="tab-btn" onclick="switchTab('santinova', this)">
       Applications Santinova
-      <span class="tab-count">3</span>
+      <span class="tab-count" id="count-santinova">…</span>
     </button>
   </div>
 
@@ -374,58 +349,8 @@
         <h2>Applications Itinova</h2>
         <p>Cliquez sur une application pour l'ouvrir dans un nouvel onglet</p>
       </div>
-      <div class="apps-grid">
+      <div id="grid-itinova" class="apps-grid">
-
+        <div class="loading-msg">Chargement des applications…</div>
-        <!-- Gestion des Formations -->
-        <a class="app-card" data-app-id="formation-manager-itinova" href="https://formations.recette.santinova-soft.org" target="_blank" rel="noopener noreferrer">
-          <div class="card-image-wrapper">
-            <img src="images/formation-manager-itinova.png" alt="Gestion des Formations" />
-          </div>
-          <div class="card-name">Gestion des Formations</div>
-          <div class="card-env-badge">Recette</div>
-          <div class="card-status-badge">Hors ligne</div>
-        </a>
-
-        <!-- Itinova Contacts -->
-        <a class="app-card" data-app-id="itinova-contacts" href="https://contacts.recette.santinova-soft.org" target="_blank" rel="noopener noreferrer">
-          <div class="card-image-wrapper">
-            <img src="images/itinova-contacts.png" alt="Itinova Contacts" />
-          </div>
-          <div class="card-name">Itinova Contacts</div>
-          <div class="card-env-badge">Recette</div>
-          <div class="card-status-badge">Hors ligne</div>
-        </a>
-
-        <!-- Itinova Podcasts -->
-        <a class="app-card" data-app-id="itinova-podcasts" href="https://podcasts.recette.santinova-soft.org" target="_blank" rel="noopener noreferrer">
-          <div class="card-image-wrapper">
-            <img src="images/itinova-podcasts.png" alt="Itinova Podcasts" />
-          </div>
-          <div class="card-name">Itinova Podcasts</div>
-          <div class="card-env-badge">Recette</div>
-          <div class="card-status-badge">Hors ligne</div>
-        </a>
-
-        <!-- Veille Stratégique -->
-        <a class="app-card" data-app-id="veille-reglementaire" href="https://veille.recette.santinova-soft.org" target="_blank" rel="noopener noreferrer">
-          <div class="card-image-wrapper">
-            <img src="images/veille-reglementaire.png" alt="Veille Stratégique" />
-          </div>
-          <div class="card-name">Veille Stratégique</div>
-          <div class="card-env-badge">Recette</div>
-          <div class="card-status-badge">Hors ligne</div>
-        </a>
-
-        <!-- Itinova Gestion de Flotte -->
-        <a class="app-card" data-app-id="itinova-vehicle-exchange" href="https://flotte.recette.santinova-soft.org" target="_blank" rel="noopener noreferrer">
-          <div class="card-image-wrapper">
-            <img src="images/itinova-flotte.png" alt="Itinova Gestion de Flotte" />
-          </div>
-          <div class="card-name">Itinova Gestion de Flotte</div>
-          <div class="card-env-badge">Recette</div>
-          <div class="card-status-badge">Hors ligne</div>
-        </a>
-
       </div>
     </div>
 
@@ -435,48 +360,8 @@
         <h2>Applications Santinova</h2>
         <p>Cliquez sur une application pour l'ouvrir dans un nouvel onglet</p>
       </div>
-      <div class="apps-grid">
+      <div id="grid-santinova" class="apps-grid">
-
+        <div class="loading-msg">Chargement des applications…</div>
-        <!-- SONUM -->
-        <a class="app-card" data-app-id="sonum" href="https://sonum.recette.santinova-soft.org" target="_blank" rel="noopener noreferrer">
-          <div class="card-image-wrapper">
-            <img src="images/sonum.png" alt="SONUM" />
-          </div>
-          <div class="card-name">SONUM</div>
-          <div class="card-env-badge">Recette</div>
-          <div class="card-status-badge">Hors ligne</div>
-        </a>
-
-        <!-- Démat. Facturation DSI -->
-        <a class="app-card" data-app-id="demat-facturation-dsi" href="https://demat-facturation.recette.santinova-soft.org" target="_blank" rel="noopener noreferrer">
-          <div class="card-image-wrapper">
-            <img src="images/demat-facturation-dsi.jpg" alt="Démat. Facturation DSI" />
-          </div>
-          <div class="card-name">Démat. Facturation DSI</div>
-          <div class="card-env-badge">Recette</div>
-          <div class="card-status-badge">Hors ligne</div>
-        </a>
-
-        <!-- Facturation Santinova -->
-        <a class="app-card" data-app-id="facturation-santinova" href="https://facturation.recette.santinova-soft.org" target="_blank" rel="noopener noreferrer">
-          <div class="card-image-wrapper">
-            <img src="images/facturation.png" alt="Facturation Santinova" />
-          </div>
-          <div class="card-name">Facturation Santinova</div>
-          <div class="card-env-badge">Recette</div>
-          <div class="card-status-badge">Hors ligne</div>
-        </a>
-
-        <!-- Studio Portée -->
-        <a class="app-card" data-app-id="studio-portee" href="https://portee.recette.santinova-soft.org" target="_blank" rel="noopener noreferrer">
-          <div class="card-image-wrapper">
-            <img src="images/studio-portee.png" alt="Studio Portée" />
-          </div>
-          <div class="card-name">Studio Portée</div>
-          <div class="card-env-badge">Recette</div>
-          <div class="card-status-badge">Hors ligne</div>
-        </a>
-
       </div>
     </div>
 
@@ -490,23 +375,10 @@
   </footer>
 
   <script>
-    // URL de l'API de statut du dashboard de recette
+    // URL de l'API du dashboard de recette
+    var DASHBOARD_APPS_URL = 'https://dashboard.recette.santinova-soft.org/api/public/apps';
     var DASHBOARD_STATUS_URL = 'https://dashboard.recette.santinova-soft.org/api/public/status';
 
-    function updateTabCounts() {
-      document.querySelectorAll('.tab-btn').forEach(function(btn) {
-        var onclick = btn.getAttribute('onclick') || '';
-        var match = onclick.match(/switchTab\('(\w+)'/);
-        if (!match) return;
-        var panelId = 'panel-' + match[1];
-        var panel = document.getElementById(panelId);
-        if (!panel) return;
-        var count = panel.querySelectorAll('.app-card').length;
-        var badge = btn.querySelector('.tab-count');
-        if (badge) badge.textContent = count;
-      });
-    }
-
     function switchTab(tabName, btn) {
       document.querySelectorAll('.tab-btn').forEach(function(b) { b.classList.remove('active'); });
       document.querySelectorAll('.tab-panel').forEach(function(p) { p.classList.remove('active'); });
@@ -514,12 +386,65 @@
       document.getElementById('panel-' + tabName).classList.add('active');
     }
 
+    /**
+     * Construit une tuile HTML pour une application.
+     */
+    function buildCard(app) {
+      var url = (app.urls && app.urls.recette) ? app.urls.recette : '#';
+      var image = app.image || ('images/' + app.id + '.png');
+      var isOffline = app.status === 'offline' || !app.containerRunning;
+      var offlineClass = isOffline ? ' offline' : '';
+      return '<a class="app-card' + offlineClass + '" data-app-id="' + app.id + '" href="' + url + '" target="_blank" rel="noopener noreferrer">' +
+        '<div class="card-image-wrapper"><img src="' + image + '" alt="' + app.name + '" onerror="this.src=\'images/default.png\'" /></div>' +
+        '<div class="card-name">' + app.name + '</div>' +
+        '<div class="card-env-badge">Recette</div>' +
+        '<div class="card-status-badge">Hors ligne</div>' +
+        '</a>';
+    }
+
+    /**
+     * Charge les apps depuis l'API et construit les grilles.
+     */
+    function loadApps() {
+      fetch(DASHBOARD_APPS_URL, { cache: 'no-store' })
+        .then(function(r) {
+          if (!r.ok) throw new Error('HTTP ' + r.status);
+          return r.json();
+        })
+        .then(function(apps) {
+          var itinovaApps = apps.filter(function(a) { return a.category === 'ITINOVA'; });
+          var santinovaApps = apps.filter(function(a) { return a.category === 'SANTINOVA'; });
+
+          var gridI = document.getElementById('grid-itinova');
+          var gridS = document.getElementById('grid-santinova');
+
+          if (itinovaApps.length === 0) {
+            gridI.innerHTML = '<div class="loading-msg">Aucune application Itinova déployée.</div>';
+          } else {
+            gridI.innerHTML = itinovaApps.map(buildCard).join('');
+          }
+
+          if (santinovaApps.length === 0) {
+            gridS.innerHTML = '<div class="loading-msg">Aucune application Santinova déployée.</div>';
+          } else {
+            gridS.innerHTML = santinovaApps.map(buildCard).join('');
+          }
+
+          document.getElementById('count-itinova').textContent = itinovaApps.length;
+          document.getElementById('count-santinova').textContent = santinovaApps.length;
+        })
+        .catch(function(err) {
+          console.warn('[Portail] Impossible de charger les apps:', err.message);
+          document.getElementById('grid-itinova').innerHTML = '<div class="loading-msg">Erreur de chargement. Veuillez rafraîchir la page.</div>';
+          document.getElementById('grid-santinova').innerHTML = '<div class="loading-msg">Erreur de chargement. Veuillez rafraîchir la page.</div>';
+        });
+    }
+
     /**
      * Met à jour l'état visuel des tuiles en fonction des statuts reçus du dashboard.
      */
     function applyStatuses(statuses) {
-      var cards = document.querySelectorAll('.app-card[data-app-id]');
+      document.querySelectorAll('.app-card[data-app-id]').forEach(function(card) {
-      cards.forEach(function(card) {
         var appId = card.getAttribute('data-app-id');
         var appStatus = statuses.find(function(s) { return s.id === appId; });
         if (appStatus) {
@@ -538,26 +463,24 @@
      */
     function fetchAndApplyStatuses() {
       fetch(DASHBOARD_STATUS_URL, { cache: 'no-store' })
-        .then(function(response) {
+        .then(function(r) {
-          if (!response.ok) throw new Error('HTTP ' + response.status);
+          if (!r.ok) throw new Error('HTTP ' + r.status);
-          return response.json();
+          return r.json();
-        })
-        .then(function(statuses) {
-          applyStatuses(statuses);
         })
+        .then(applyStatuses)
         .catch(function(err) {
           console.warn('[Portail] Impossible de récupérer les statuts:', err.message);
         });
     }
 
     document.addEventListener('DOMContentLoaded', function() {
-      updateTabCounts();
+      // Charger les apps au démarrage
-      // Premier appel immédiat
+      loadApps();
-      fetchAndApplyStatuses();
+      // Polling statuts toutes les 30 secondes
-      // Polling toutes les 30 secondes
       setInterval(fetchAndApplyStatuses, 30000);
+      // Premier check statuts après 3s (laisser le temps aux tuiles d'être rendues)
+      setTimeout(fetchAndApplyStatuses, 3000);
     });
   </script>
-
 </body>
 </html>