fix: ajout tuile Facturation Santinova dans onglet Santinova production
This commit is contained in:
parent
98aec3a5a1
commit
c08f8095d7
138
index.html
138
index.html
|
|
@ -240,43 +240,13 @@
|
||||||
margin-top: 6px;
|
margin-top: 6px;
|
||||||
font-size: 0.7rem;
|
font-size: 0.7rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #6366f1;
|
color: #10b981;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 0.8px;
|
letter-spacing: 0.8px;
|
||||||
background: rgba(99,102,241,0.1);
|
background: rgba(16,185,129,0.1);
|
||||||
padding: 3px 10px;
|
padding: 3px 10px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
border: 1px solid rgba(99,102,241,0.2);
|
border: 1px solid rgba(16,185,129,0.2);
|
||||||
}
|
|
||||||
|
|
||||||
/* ===== APP OFFLINE (grisage) ===== */
|
|
||||||
.app-card.offline {
|
|
||||||
opacity: 0.42;
|
|
||||||
pointer-events: none;
|
|
||||||
cursor: not-allowed;
|
|
||||||
filter: grayscale(80%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.app-card.offline .card-image-wrapper {
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-status-badge {
|
|
||||||
display: none;
|
|
||||||
margin-top: 4px;
|
|
||||||
font-size: 0.68rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #ef4444;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.8px;
|
|
||||||
background: rgba(239,68,68,0.12);
|
|
||||||
padding: 2px 9px;
|
|
||||||
border-radius: 10px;
|
|
||||||
border: 1px solid rgba(239,68,68,0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.app-card.offline .card-status-badge {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ===== FOOTER ===== */
|
/* ===== FOOTER ===== */
|
||||||
|
|
@ -347,10 +317,10 @@
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div class="header-title">Portail Applicatif</div>
|
<div class="header-title">Portail Applicatif</div>
|
||||||
<div class="header-subtitle">Environnement de recette</div>
|
<div class="header-subtitle">Environnement de production</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="header-badge">Recette</div>
|
<div class="header-badge">Production</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<!-- TABS NAV -->
|
<!-- TABS NAV -->
|
||||||
|
|
@ -361,7 +331,7 @@
|
||||||
</button>
|
</button>
|
||||||
<button class="tab-btn" onclick="switchTab('santinova', this)">
|
<button class="tab-btn" onclick="switchTab('santinova', this)">
|
||||||
Applications Santinova
|
Applications Santinova
|
||||||
<span class="tab-count">3</span>
|
<span class="tab-count">2</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -375,54 +345,49 @@
|
||||||
<p>Cliquez sur une application pour l'ouvrir dans un nouvel onglet</p>
|
<p>Cliquez sur une application pour l'ouvrir dans un nouvel onglet</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="apps-grid">
|
<div class="apps-grid">
|
||||||
<!-- Gestion des Formations -->
|
|
||||||
<a class="app-card" data-app-id="formation-manager-itinova" href="https://formations.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 -->
|
<!-- Itinova Contacts -->
|
||||||
<a class="app-card" data-app-id="itinova-contacts" href="https://contacts.santinova-soft.org" target="_blank" rel="noopener noreferrer">
|
<a class="app-card" href="https://contacts.santinova-soft.org" target="_blank" rel="noopener noreferrer">
|
||||||
<div class="card-image-wrapper">
|
<div class="card-image-wrapper">
|
||||||
<img src="images/itinova-contacts.png" alt="Itinova Contacts" />
|
<img src="images/itinova-contacts.png" alt="Itinova Contacts" />
|
||||||
</div>
|
</div>
|
||||||
<div class="card-name">Itinova Contacts</div>
|
<div class="card-name">Itinova Contacts</div>
|
||||||
<div class="card-env-badge">Recette</div>
|
<div class="card-env-badge">Production</div>
|
||||||
<div class="card-status-badge">Hors ligne</div>
|
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!-- Itinova Podcasts -->
|
<!-- Itinova Podcasts -->
|
||||||
<a class="app-card" data-app-id="itinova-podcasts" href="https://podcasts.santinova-soft.org" target="_blank" rel="noopener noreferrer">
|
<a class="app-card" href="https://podcasts.santinova-soft.org" target="_blank" rel="noopener noreferrer">
|
||||||
<div class="card-image-wrapper">
|
<div class="card-image-wrapper">
|
||||||
<img src="images/itinova-podcasts.png" alt="Itinova Podcasts" />
|
<img src="images/itinova-podcasts.png" alt="Itinova Podcasts" />
|
||||||
</div>
|
</div>
|
||||||
<div class="card-name">Itinova Podcasts</div>
|
<div class="card-name">Itinova Podcasts</div>
|
||||||
<div class="card-env-badge">Recette</div>
|
<div class="card-env-badge">Production</div>
|
||||||
<div class="card-status-badge">Hors ligne</div>
|
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!-- Veille Stratégique -->
|
<!-- Veille Stratégique -->
|
||||||
<a class="app-card" data-app-id="veille-reglementaire" href="https://veille.santinova-soft.org" target="_blank" rel="noopener noreferrer">
|
<a class="app-card" href="https://veille.santinova-soft.org" target="_blank" rel="noopener noreferrer">
|
||||||
<div class="card-image-wrapper">
|
<div class="card-image-wrapper">
|
||||||
<img src="images/veille-reglementaire.png" alt="Veille Stratégique" />
|
<img src="images/veille-reglementaire.png" alt="Veille Stratégique" />
|
||||||
</div>
|
</div>
|
||||||
<div class="card-name">Veille Stratégique</div>
|
<div class="card-name">Veille Stratégique</div>
|
||||||
<div class="card-env-badge">Recette</div>
|
<div class="card-env-badge">Production</div>
|
||||||
<div class="card-status-badge">Hors ligne</div>
|
</a>
|
||||||
|
<!-- Gestion des Formations -->
|
||||||
|
<a class="app-card" href="https://formations.itinova.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">Production</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!-- Itinova Gestion de Flotte -->
|
<!-- Itinova Gestion de Flotte -->
|
||||||
<a class="app-card" data-app-id="itinova-vehicle-exchange" href="https://flotte.santinova-soft.org" target="_blank" rel="noopener noreferrer">
|
<a class="app-card" href="https://flotte.santinova-soft.org" target="_blank" rel="noopener noreferrer">
|
||||||
<div class="card-image-wrapper">
|
<div class="card-image-wrapper">
|
||||||
<img src="images/itinova-flotte.png" alt="Itinova Gestion de Flotte" />
|
<img src="images/itinova-flotte.png" alt="Itinova Gestion de Flotte" />
|
||||||
</div>
|
</div>
|
||||||
<div class="card-name">Itinova Gestion de Flotte</div>
|
<div class="card-name">Itinova Gestion de Flotte</div>
|
||||||
<div class="card-env-badge">Recette</div>
|
<div class="card-env-badge">Production</div>
|
||||||
<div class="card-status-badge">Hors ligne</div>
|
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -435,14 +400,13 @@
|
||||||
<p>Cliquez sur une application pour l'ouvrir dans un nouvel onglet</p>
|
<p>Cliquez sur une application pour l'ouvrir dans un nouvel onglet</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="apps-grid">
|
<div class="apps-grid">
|
||||||
|
|
||||||
<!-- SONUM -->
|
<!-- SONUM -->
|
||||||
<a class="app-card" data-app-id="sonum" href="https://sonum.santinova-soft.org" target="_blank" rel="noopener noreferrer">
|
<a class="app-card" data-app-id="sonum" href="https://sonum.santinova-soft.org" target="_blank" rel="noopener noreferrer">
|
||||||
<div class="card-image-wrapper">
|
<div class="card-image-wrapper">
|
||||||
<img src="images/sonum.png" alt="SONUM" />
|
<img src="images/sonum.png" alt="SONUM" />
|
||||||
</div>
|
</div>
|
||||||
<div class="card-name">SONUM</div>
|
<div class="card-name">SONUM</div>
|
||||||
<div class="card-env-badge">Recette</div>
|
<div class="card-env-badge">Production</div>
|
||||||
<div class="card-status-badge">Hors ligne</div>
|
<div class="card-status-badge">Hors ligne</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
|
|
@ -452,7 +416,7 @@
|
||||||
<img src="images/demat-facturation-dsi.jpg" alt="Démat. Facturation DSI" />
|
<img src="images/demat-facturation-dsi.jpg" alt="Démat. Facturation DSI" />
|
||||||
</div>
|
</div>
|
||||||
<div class="card-name">Démat. Facturation DSI</div>
|
<div class="card-name">Démat. Facturation DSI</div>
|
||||||
<div class="card-env-badge">Recette</div>
|
<div class="card-env-badge">Production</div>
|
||||||
<div class="card-status-badge">Hors ligne</div>
|
<div class="card-status-badge">Hors ligne</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
|
|
@ -462,7 +426,7 @@
|
||||||
<img src="images/facturation.png" alt="Facturation Santinova" />
|
<img src="images/facturation.png" alt="Facturation Santinova" />
|
||||||
</div>
|
</div>
|
||||||
<div class="card-name">Facturation Santinova</div>
|
<div class="card-name">Facturation Santinova</div>
|
||||||
<div class="card-env-badge">Recette</div>
|
<div class="card-env-badge">Production</div>
|
||||||
<div class="card-status-badge">Hors ligne</div>
|
<div class="card-status-badge">Hors ligne</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
|
|
@ -482,10 +446,8 @@
|
||||||
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// URL de l'API de statut du dashboard (même serveur, port 3001)
|
|
||||||
var DASHBOARD_STATUS_URL = 'https://dashboard.santinova-soft.org/api/public/status';
|
|
||||||
|
|
||||||
function updateTabCounts() {
|
function updateTabCounts() {
|
||||||
|
// Compter les app-card dans chaque panel et mettre à jour les badges
|
||||||
document.querySelectorAll('.tab-btn').forEach(function(btn) {
|
document.querySelectorAll('.tab-btn').forEach(function(btn) {
|
||||||
var onclick = btn.getAttribute('onclick') || '';
|
var onclick = btn.getAttribute('onclick') || '';
|
||||||
var match = onclick.match(/switchTab\('(\w+)'/);
|
var match = onclick.match(/switchTab\('(\w+)'/);
|
||||||
|
|
@ -506,52 +468,10 @@
|
||||||
document.getElementById('panel-' + tabName).classList.add('active');
|
document.getElementById('panel-' + tabName).classList.add('active');
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
// Mise à jour au chargement
|
||||||
* Met à jour l'état visuel des tuiles en fonction des statuts reçus du dashboard.
|
document.addEventListener('DOMContentLoaded', updateTabCounts);
|
||||||
* Une tuile est grisée si son statut est 'offline' ou si le conteneur n'est pas en cours d'exécution.
|
|
||||||
*/
|
|
||||||
function applyStatuses(statuses) {
|
|
||||||
var cards = document.querySelectorAll('.app-card[data-app-id]');
|
|
||||||
cards.forEach(function(card) {
|
|
||||||
var appId = card.getAttribute('data-app-id');
|
|
||||||
var appStatus = statuses.find(function(s) { return s.id === appId; });
|
|
||||||
if (appStatus) {
|
|
||||||
var isOffline = appStatus.status === 'offline' || !appStatus.containerRunning;
|
|
||||||
if (isOffline) {
|
|
||||||
card.classList.add('offline');
|
|
||||||
} else {
|
|
||||||
card.classList.remove('offline');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Interroge le dashboard pour obtenir les statuts et met à jour les tuiles.
|
|
||||||
*/
|
|
||||||
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);
|
|
||||||
})
|
|
||||||
.catch(function(err) {
|
|
||||||
// En cas d'erreur (dashboard inaccessible), on ne grise rien
|
|
||||||
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
|
|
||||||
setInterval(fetchAndApplyStatuses, 30000);
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue