manus-admin/portail-santinova
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Manus
2026-07-24 10:25:38 +00:00
parent e1595193e9
commit 608f4ffbf8
1 changed files with 88 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

253
index.html
View File

@@ -99,9 +99,7 @@
top: 1px;
}
.tab-btn:hover {
color: #c5c8d8;
}
.tab-btn:hover { color: #c5c8d8; }
.tab-btn.active {
color: #ffffff;
@@ -137,9 +135,7 @@
width: 100%;
}
.tab-panel {
display: none;
}
.tab-panel { display: none; }
.tab-panel.active {
display: block;
@@ -163,10 +159,7 @@
margin-bottom: 10px;
}
.section-header p {
color: #8b8fa8;
font-size: 1rem;
}
.section-header p { 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 {
transform: translateY(-8px) scale(1.03);
}
.app-card:hover { 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 {
color: #ffffff;
}
.app-card:hover .card-name { color: #ffffff; }
.card-image-wrapper {
width: 180px;
@@ -257,9 +246,7 @@
filter: grayscale(80%);
}
.app-card.offline .card-image-wrapper {
box-shadow: none;
}
.app-card.offline .card-image-wrapper { 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 {
display: inline-block;
.app-card.offline .card-status-badge { 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">
<!-- 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 id="grid-itinova" class="apps-grid">
<div class="loading-msg">Chargement des applications…</div>
</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">
<!-- 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 id="grid-santinova" class="apps-grid">
<div class="loading-msg">Chargement des applications…</div>
</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]');
cards.forEach(function(card) {
document.querySelectorAll('.app-card[data-app-id]').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) {
if (!response.ok) throw new Error('HTTP ' + response.status);
return response.json();
})
.then(function(statuses) {
applyStatuses(statuses);
.then(function(r) {
if (!r.ok) throw new Error('HTTP ' + r.status);
return r.json();
})
.then(applyStatuses)
.catch(function(err) {
console.warn('[Portail] Impossible de récupérer les statuts:', err.message);
});
}
document.addEventListener('DOMContentLoaded', function() {
updateTabCounts();
// Premier appel immédiat
fetchAndApplyStatuses();
// Polling toutes les 30 secondes
// Charger les apps au démarrage
loadApps();
// Polling statuts 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>