501 lines
23 KiB
JavaScript
501 lines
23 KiB
JavaScript
// SCRIPT EQUIPE - Remplacement DOM apres chargement
|
|
(function() {
|
|
'use strict';
|
|
|
|
// Fonction pour verifier si on est sur la route team
|
|
function isTeamRoute() {
|
|
var path = window.location.pathname;
|
|
return path === '/team' || path === '/team/' || path.startsWith('/team/');
|
|
}
|
|
|
|
// Fonction pour verifier et initialiser la page team
|
|
function checkAndInitTeamPage() {
|
|
if (!isTeamRoute()) {
|
|
return;
|
|
}
|
|
|
|
// Eviter double initialisation
|
|
if (window.__teamPageInitialized) {
|
|
return;
|
|
}
|
|
window.__teamPageInitialized = true;
|
|
|
|
console.log('EQUIPE: Page team detectee, preparation du remplacement DOM');
|
|
initTeamPage();
|
|
}
|
|
|
|
// Fonction pour charger un script externe
|
|
function loadScript(src) {
|
|
return new Promise(function(resolve, reject) {
|
|
var script = document.createElement('script');
|
|
script.src = src;
|
|
script.onload = resolve;
|
|
script.onerror = reject;
|
|
document.head.appendChild(script);
|
|
});
|
|
}
|
|
|
|
// Fonction pour initialiser la page equipe
|
|
async function initTeamPage() {
|
|
console.log('EQUIPE: Initialisation de la page');
|
|
|
|
// CSS de la page
|
|
var css = '*{margin:0;padding:0;box-sizing:border-box}' +
|
|
'body{font-family:system-ui,sans-serif;background:#1a4d3a;color:#e0e0e0;padding:20px}' +
|
|
'.container{max-width:1400px;margin:0 auto}' +
|
|
'header{text-align:center;margin-bottom:30px;padding:20px;background:rgba(26,77,58,0.5);border-radius:8px}' +
|
|
'h1{color:#4ade80;margin-bottom:10px}' +
|
|
'.tabs{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap}' +
|
|
'.tab-btn{padding:12px 24px;background:rgba(74,222,128,0.2);border:2px solid #4ade80;color:#4ade80;border-radius:6px;cursor:pointer;font-size:14px;font-weight:600}' +
|
|
'.tab-btn:hover{background:rgba(74,222,128,0.3)}' +
|
|
'.tab-btn.active{background:#4ade80;color:#1a4d3a}' +
|
|
'.tab-content{display:none;background:rgba(26,77,58,0.3);border-radius:8px;padding:20px;margin-bottom:20px}' +
|
|
'.tab-content.active{display:block}' +
|
|
'#network-graph{width:100%;height:700px;background:rgba(0,0,0,0.2);border-radius:8px;border:1px solid rgba(74,222,128,0.3)}' +
|
|
'#congestion-matrix{width:100%;height:600px;background:rgba(0,0,0,0.2);border-radius:8px}' +
|
|
'.genesis-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px;margin-bottom:30px}' +
|
|
'.stat-card{background:rgba(74,222,128,0.1);border:1px solid rgba(74,222,128,0.3);border-radius:6px;padding:15px}' +
|
|
'.stat-value{font-size:32px;font-weight:bold;color:#4ade80}' +
|
|
'.stat-label{font-size:14px;color:#a0a0a0;margin-top:5px}' +
|
|
'.member-card{background:rgba(26,77,58,0.5);border:1px solid rgba(74,222,128,0.3);border-radius:6px;padding:15px;margin-bottom:15px}' +
|
|
'.member-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}' +
|
|
'.member-name{font-size:18px;font-weight:bold;color:#4ade80}' +
|
|
'.member-avail{background:rgba(74,222,128,0.2);padding:5px 12px;border-radius:4px;font-size:14px}' +
|
|
'.tech-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}' +
|
|
'.tech-tag{background:rgba(74,222,128,0.2);border:1px solid rgba(74,222,128,0.4);padding:4px 10px;border-radius:4px;font-size:12px}' +
|
|
'.warning-box{background:rgba(255,68,68,0.2);border:1px solid rgba(255,68,68,0.5);border-radius:6px;padding:15px;margin-top:20px}' +
|
|
'.warning-title{color:#ff6b6b;font-weight:bold;margin-bottom:10px}' +
|
|
'.uncovered{background:rgba(255,68,68,0.1);border-left:3px solid #ff6b6b;padding:10px;margin:8px 0;border-radius:4px}' +
|
|
'.legend{display:flex;gap:20px;margin:20px 0;flex-wrap:wrap}' +
|
|
'.legend-item{display:flex;align-items:center;gap:8px}' +
|
|
'.legend-color{width:20px;height:20px;border-radius:4px}' +
|
|
'.loading{text-align:center;padding:40px;color:#4ade80}' +
|
|
'.clickable{cursor:pointer;transition:all 0.2s}' +
|
|
'.clickable:hover{transform:scale(1.02);box-shadow:0 4px 12px rgba(74,222,128,0.3)}' +
|
|
'.profile-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);display:flex;align-items:center;justify-content:center;z-index:9999;animation:fadeIn 0.2s}' +
|
|
'@keyframes fadeIn{from{opacity:0}to{opacity:1}}' +
|
|
'.profile-card{background:#1a4d3a;border:2px solid #4ade80;border-radius:12px;padding:25px;max-width:500px;width:90%;max-height:85vh;overflow-y:auto;position:relative;box-shadow:0 20px 60px rgba(0,0,0,0.5)}' +
|
|
'.profile-card .close-btn{position:absolute;top:15px;right:15px;background:none;border:none;color:#ff6b6b;font-size:28px;cursor:pointer;line-height:1}' +
|
|
'.profile-card .close-btn:hover{color:#ff4444}' +
|
|
'.profile-card h2{color:#4ade80;margin-bottom:5px;font-size:24px}' +
|
|
'.profile-card .role{color:#a0a0a0;font-size:14px;margin-bottom:15px}' +
|
|
'.profile-card .stats{display:flex;gap:15px;flex-wrap:wrap;margin-bottom:20px}' +
|
|
'.profile-card .stat{background:rgba(74,222,128,0.15);padding:8px 12px;border-radius:6px;font-size:13px}' +
|
|
'.profile-card .stat strong{color:#4ade80}' +
|
|
'.profile-card h3{color:#4ade80;font-size:16px;margin:15px 0 10px;border-bottom:1px solid rgba(74,222,128,0.3);padding-bottom:5px}' +
|
|
'.profile-card .skills{display:flex;flex-wrap:wrap;gap:8px}' +
|
|
'.profile-card .skill-tag{padding:5px 10px;border-radius:4px;font-size:12px;background:rgba(74,222,128,0.2);border:1px solid rgba(74,222,128,0.4)}' +
|
|
'.profile-card .skill-tag.expert{background:rgba(74,222,128,0.4);border-color:#4ade80}' +
|
|
'.profile-card .skill-tag.intermediate{background:rgba(57,151,212,0.3);border-color:#3997d4}' +
|
|
'.profile-card .skill-tag.beginner{background:rgba(245,179,54,0.2);border-color:#f5b336}' +
|
|
'.profile-card .interests{display:flex;flex-wrap:wrap;gap:6px}' +
|
|
'.profile-card .interest{background:rgba(136,255,136,0.15);padding:4px 8px;border-radius:4px;font-size:11px;color:#88ff88}' +
|
|
'.profile-card .projects{list-style:none;padding:0}' +
|
|
'.profile-card .projects li{padding:6px 0;border-bottom:1px solid rgba(255,255,255,0.1);font-size:13px}' +
|
|
'.profile-card .projects li:last-child{border-bottom:none}' +
|
|
'.profile-card .bio{color:#c0c0c0;font-size:13px;line-height:1.5;margin-top:15px;font-style:italic}';
|
|
|
|
// HTML de la page
|
|
var html = '<div class="container">' +
|
|
'<header>' +
|
|
'<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px">' +
|
|
'<a href="/" style="color:#4ade80;text-decoration:none;font-size:18px;font-weight:bold">← Retour au Radar</a>' +
|
|
'<div></div>' +
|
|
'</div>' +
|
|
'<h1>Equipe & Technologies</h1>' +
|
|
'<p>Visualisation des competences et identification de l\'equipe de genese MVP</p>' +
|
|
'</header>' +
|
|
'<div class="tabs">' +
|
|
'<button class="tab-btn active" data-tab="network">Graphe Reseau</button>' +
|
|
'<button class="tab-btn" data-tab="congestion">Matrice Congestion</button>' +
|
|
'<button class="tab-btn" data-tab="genesis">Equipe Genese MVP</button>' +
|
|
'</div>' +
|
|
'<div id="network-tab" class="tab-content active">' +
|
|
'<div class="legend">' +
|
|
'<div class="legend-item"><div class="legend-color" style="background:#4ade80"></div><span>Adopt</span></div>' +
|
|
'<div class="legend-item"><div class="legend-color" style="background:#3997d4"></div><span>Trial</span></div>' +
|
|
'<div class="legend-item"><div class="legend-color" style="background:#f5b336"></div><span>Assess</span></div>' +
|
|
'<div class="legend-item"><div class="legend-color" style="background:#e5695e"></div><span>Hold</span></div>' +
|
|
'<div class="legend-item"><div class="legend-color" style="background:#88ff88"></div><span>Membres</span></div>' +
|
|
'</div>' +
|
|
'<div id="network-graph"><div class="loading">Chargement du graphe...</div></div>' +
|
|
'</div>' +
|
|
'<div id="congestion-tab" class="tab-content">' +
|
|
'<h2 style="margin-bottom:20px">Matrice de Congestion - Technologies Adopt</h2>' +
|
|
'<div id="congestion-matrix"><div class="loading">Chargement de la matrice...</div></div>' +
|
|
'</div>' +
|
|
'<div id="genesis-tab" class="tab-content">' +
|
|
'<div id="genesis-team"><div class="loading">Chargement des donnees...</div></div>' +
|
|
'</div>' +
|
|
'</div>';
|
|
|
|
// Injecter le CSS
|
|
var styleEl = document.createElement('style');
|
|
styleEl.textContent = css;
|
|
document.head.appendChild(styleEl);
|
|
|
|
// Modifier le titre
|
|
document.title = 'Equipe & Technologies - Laplank';
|
|
|
|
// Remplacer le contenu du body
|
|
document.body.innerHTML = html;
|
|
document.body.style.cssText = 'font-family:system-ui,sans-serif;background:#1a4d3a;color:#e0e0e0;padding:20px;margin:0';
|
|
|
|
// Ajouter les gestionnaires d'evenements pour les onglets
|
|
document.querySelectorAll('.tab-btn').forEach(function(btn) {
|
|
btn.addEventListener('click', function() {
|
|
var tabName = this.getAttribute('data-tab');
|
|
document.querySelectorAll('.tab-content').forEach(function(t) { t.classList.remove('active'); });
|
|
document.querySelectorAll('.tab-btn').forEach(function(b) { b.classList.remove('active'); });
|
|
document.getElementById(tabName + '-tab').classList.add('active');
|
|
this.classList.add('active');
|
|
|
|
// Redimensionner les graphiques
|
|
if (tabName === 'congestion' && window.congestionChart) {
|
|
setTimeout(function() { window.congestionChart.resize(); }, 100);
|
|
}
|
|
if (tabName === 'network' && window.networkCy) {
|
|
setTimeout(function() { window.networkCy.resize(); }, 100);
|
|
}
|
|
});
|
|
});
|
|
|
|
console.log('EQUIPE: DOM remplace, chargement des bibliotheques...');
|
|
|
|
// Charger les bibliotheques externes
|
|
try {
|
|
await loadScript('https://cdn.jsdelivr.net/npm/cytoscape@3.26.0/dist/cytoscape.min.js');
|
|
console.log('EQUIPE: Cytoscape charge');
|
|
// Utilisation du layout cose integre (pas de plugin externe necessaire)
|
|
|
|
await loadScript('https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js');
|
|
console.log('EQUIPE: ECharts charge');
|
|
|
|
// Charger les donnees
|
|
var response = await fetch('/team-visualization-data.json');
|
|
if (!response.ok) throw new Error('HTTP ' + response.status);
|
|
var data = await response.json();
|
|
console.log('EQUIPE: Donnees chargees:', Object.keys(data));
|
|
|
|
// Stocker les profils pour acces global
|
|
window.__memberProfiles = data.memberProfiles || {};
|
|
|
|
// Initialiser les visualisations
|
|
initNetwork(data);
|
|
initCongestion(data);
|
|
initGenesis(data);
|
|
|
|
} catch (e) {
|
|
console.error('EQUIPE: Erreur:', e);
|
|
var errorMsg = '<div style="padding:20px;background:rgba(255,152,0,0.2);border:1px solid #ff9800;border-radius:8px"><h3 style="color:#ff9800">Erreur de chargement</h3><p>' + e.message + '</p></div>';
|
|
document.getElementById('network-graph').innerHTML = errorMsg;
|
|
document.getElementById('congestion-matrix').innerHTML = errorMsg;
|
|
document.getElementById('genesis-team').innerHTML = errorMsg;
|
|
}
|
|
}
|
|
|
|
// Graphe reseau avec Cytoscape
|
|
function initNetwork(data) {
|
|
if (!data || !data.network) {
|
|
document.getElementById('network-graph').innerHTML = '<div class="loading">Pas de donnees reseau</div>';
|
|
return;
|
|
}
|
|
|
|
window.networkCy = cytoscape({
|
|
container: document.getElementById('network-graph'),
|
|
elements: data.network,
|
|
style: [
|
|
{
|
|
selector: 'node[type="technology"]',
|
|
style: {
|
|
'background-color': 'data(color)',
|
|
'label': 'data(label)',
|
|
'width': function(e) { return 30 + (e.data('coverage') || 0) * 8; },
|
|
'height': function(e) { return 30 + (e.data('coverage') || 0) * 8; },
|
|
'color': '#fff',
|
|
'font-size': '12px',
|
|
'text-outline-width': 2,
|
|
'text-outline-color': '#000',
|
|
'text-wrap': 'wrap',
|
|
'text-max-width': 100
|
|
}
|
|
},
|
|
{
|
|
selector: 'node[type="member"]',
|
|
style: {
|
|
'background-color': '#88ff88',
|
|
'label': 'data(label)',
|
|
'width': function(e) { return 35 + (e.data('availability') || 0) / 2; },
|
|
'height': function(e) { return 35 + (e.data('availability') || 0) / 2; },
|
|
'color': '#fff',
|
|
'font-size': '14px',
|
|
'font-weight': 'bold',
|
|
'text-outline-width': 2,
|
|
'text-outline-color': '#000',
|
|
'shape': 'ellipse'
|
|
}
|
|
},
|
|
{
|
|
selector: 'edge',
|
|
style: {
|
|
'width': function(e) { return 1 + (e.data('weight') || 0.5); },
|
|
'line-color': '#999',
|
|
'opacity': 0.6,
|
|
'curve-style': 'bezier'
|
|
}
|
|
}
|
|
],
|
|
layout: {
|
|
name: 'cose',
|
|
nodeDimensionsIncludeLabels: true,
|
|
idealEdgeLength: 100,
|
|
nodeRepulsion: 4500,
|
|
gravity: 0.25,
|
|
numIter: 1000,
|
|
animate: true,
|
|
animationDuration: 800
|
|
}
|
|
});
|
|
|
|
// Ajouter evenement de clic sur les membres
|
|
window.networkCy.on('tap', 'node[type="member"]', function(evt) {
|
|
var node = evt.target;
|
|
var memberId = node.data('id').replace('member-', '');
|
|
if (window.__memberProfiles && window.__memberProfiles[memberId]) {
|
|
showMemberProfile(memberId, window.__memberProfiles[memberId]);
|
|
}
|
|
});
|
|
|
|
// Style curseur pour les membres
|
|
window.networkCy.on('mouseover', 'node[type="member"]', function() {
|
|
document.body.style.cursor = 'pointer';
|
|
});
|
|
window.networkCy.on('mouseout', 'node[type="member"]', function() {
|
|
document.body.style.cursor = 'default';
|
|
});
|
|
|
|
console.log('EQUIPE: Graphe reseau initialise');
|
|
}
|
|
|
|
// Matrice de congestion avec ECharts
|
|
function initCongestion(data) {
|
|
if (!data || !data.congestionMatrix || data.congestionMatrix.length === 0) {
|
|
document.getElementById('congestion-matrix').innerHTML = '<div class="loading">Pas de donnees matrice</div>';
|
|
return;
|
|
}
|
|
|
|
var chart = echarts.init(document.getElementById('congestion-matrix'));
|
|
window.congestionChart = chart;
|
|
|
|
var techs = data.congestionMatrix.map(function(r) { return r.technology; });
|
|
var members = data.congestionMatrix[0] ? data.congestionMatrix[0].members.map(function(m) { return m.fullName || m.member; }) : [];
|
|
var scatter = [];
|
|
|
|
data.congestionMatrix.forEach(function(row, i) {
|
|
row.members.forEach(function(m, j) {
|
|
if (m.hasSkill) {
|
|
scatter.push({
|
|
value: [j, i],
|
|
member: m.fullName || m.member,
|
|
memberId: m.member,
|
|
tech: row.technology,
|
|
availability: m.availability
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
chart.setOption({
|
|
title: { text: 'Disponibilite des membres sur les technologies Adopt', left: 'center', textStyle: { color: '#e0e0e0' } },
|
|
tooltip: {
|
|
formatter: function(p) {
|
|
return p.data.member + '<br/>Tech: ' + p.data.tech + '<br/>Dispo: ' + p.data.availability + '%';
|
|
}
|
|
},
|
|
grid: { height: '60%', top: '15%' },
|
|
xAxis: { type: 'category', data: members, axisLabel: { rotate: 45, color: '#e0e0e0' }, axisLine: { lineStyle: { color: '#4ade80' } } },
|
|
yAxis: { type: 'category', data: techs, axisLabel: { color: '#e0e0e0' }, axisLine: { lineStyle: { color: '#4ade80' } } },
|
|
visualMap: { min: 0, max: 100, calculable: true, orient: 'horizontal', left: 'center', bottom: '5%', inRange: { color: ['#1a4d3a', '#4ade80', '#86efac'] }, textStyle: { color: '#e0e0e0' } },
|
|
series: [{
|
|
type: 'scatter',
|
|
data: scatter,
|
|
symbolSize: function(d) { return 15 + (d[2] || 0) / 2; },
|
|
itemStyle: { color: '#4ade80', borderColor: '#1a4d3a', borderWidth: 2 },
|
|
label: { show: true, formatter: function(p) { return p.data.availability + '%'; }, color: '#1a4d3a' }
|
|
}]
|
|
});
|
|
|
|
window.addEventListener('resize', function() { chart.resize(); });
|
|
|
|
// Ajouter evenement de clic sur les points (membres)
|
|
chart.on('click', function(params) {
|
|
if (params.data && params.data.memberId) {
|
|
var memberId = params.data.memberId;
|
|
if (window.__memberProfiles && window.__memberProfiles[memberId]) {
|
|
showMemberProfile(memberId, window.__memberProfiles[memberId]);
|
|
}
|
|
}
|
|
});
|
|
|
|
console.log('EQUIPE: Matrice de congestion initialisee');
|
|
}
|
|
|
|
// Equipe de genese
|
|
function initGenesis(data) {
|
|
if (!data || !data.genesisTeam) {
|
|
document.getElementById('genesis-team').innerHTML = '<div class="loading">Pas de donnees equipe</div>';
|
|
return;
|
|
}
|
|
|
|
var g = data.genesisTeam;
|
|
var h = '<div class="genesis-stats">' +
|
|
'<div class="stat-card"><div class="stat-value">' + g.totalMembers + '</div><div class="stat-label">Membres selectionnes</div></div>' +
|
|
'<div class="stat-card"><div class="stat-value">' + g.totalCapacity + '%</div><div class="stat-label">Capacite totale</div></div>' +
|
|
'<div class="stat-card"><div class="stat-value">' + g.averageAvailability + '%</div><div class="stat-label">Disponibilite moyenne</div></div>' +
|
|
'<div class="stat-card"><div class="stat-value">' + g.coveredTechnologies + '/' + g.totalCoreTechnologies + '</div><div class="stat-label">Technologies couvertes</div></div>' +
|
|
'</div>' +
|
|
'<h2 style="margin-bottom:20px;color:#4ade80">Membres de l\'equipe de genese</h2>';
|
|
|
|
if (g.team && g.team.length > 0) {
|
|
g.team.forEach(function(m) {
|
|
h += '<div class="member-card clickable" data-member-id="' + m.member + '">' +
|
|
'<div class="member-header">' +
|
|
'<div><div class="member-name">' + (m.fullName || m.member) + '</div>' +
|
|
'<div style="font-size:12px;color:#a0a0a0;margin-top:4px">' + (m.role || '') + ' - ' + m.seniority + ' - ' + m.coverage + ' technologie(s)</div>' +
|
|
'</div>' +
|
|
'<div class="member-avail">' + m.availability + '% dispo</div>' +
|
|
'</div>' +
|
|
'<div class="tech-list">';
|
|
if (m.technologies) {
|
|
m.technologies.forEach(function(t) {
|
|
h += '<span class="tech-tag">' + t.title + '</span>';
|
|
});
|
|
}
|
|
h += '</div></div>';
|
|
});
|
|
} else {
|
|
h += '<p style="color:#a0a0a0">Aucun membre ne repond aux criteres.</p>';
|
|
}
|
|
|
|
if (g.uncoveredTechnologies && g.uncoveredTechnologies.length > 0) {
|
|
h += '<div class="warning-box"><div class="warning-title">Technologies Adopt non couvertes</div><p style="margin-bottom:10px">Ces technologies critiques ne sont pas maitrisees :</p>';
|
|
g.uncoveredTechnologies.forEach(function(t) {
|
|
h += '<div class="uncovered"><strong>' + t.title + '</strong><div style="font-size:12px;color:#a0a0a0;margin-top:4px">Impact: ' + t.businessImpact + ' - Gap: ' + t.skillGap + ' - Couverture: ' + t.teamCoverage + ' personne(s)</div></div>';
|
|
});
|
|
h += '</div>';
|
|
}
|
|
|
|
document.getElementById('genesis-team').innerHTML = h;
|
|
|
|
// Ajouter les evenements de clic sur les cartes membres
|
|
document.querySelectorAll('.member-card.clickable').forEach(function(card) {
|
|
card.addEventListener('click', function() {
|
|
var memberId = this.getAttribute('data-member-id');
|
|
if (memberId && window.__memberProfiles && window.__memberProfiles[memberId]) {
|
|
showMemberProfile(memberId, window.__memberProfiles[memberId]);
|
|
}
|
|
});
|
|
});
|
|
|
|
console.log('EQUIPE: Equipe de genese initialisee');
|
|
}
|
|
|
|
// Afficher la carte de profil d'un membre
|
|
function showMemberProfile(memberId, profile) {
|
|
if (!profile) {
|
|
console.warn('EQUIPE: Profil non trouve pour', memberId);
|
|
return;
|
|
}
|
|
|
|
// Generer le HTML des competences
|
|
var skillsHtml = '';
|
|
if (profile.skillsDetailed && profile.skillsDetailed.length > 0) {
|
|
skillsHtml = profile.skillsDetailed.map(function(s) {
|
|
var levelClass = s.level || 'beginner';
|
|
var yearsText = s.years ? ' (' + s.years + ' ans)' : '';
|
|
return '<span class="skill-tag ' + levelClass + '">' + s.name + yearsText + '</span>';
|
|
}).join('');
|
|
}
|
|
|
|
// Generer le HTML des interets
|
|
var interestsHtml = '';
|
|
if (profile.interests && profile.interests.length > 0) {
|
|
interestsHtml = profile.interests.map(function(i) {
|
|
return '<span class="interest">' + i + '</span>';
|
|
}).join('');
|
|
}
|
|
|
|
// Generer le HTML des projets
|
|
var projectsHtml = '';
|
|
if (profile.projects && profile.projects.length > 0) {
|
|
projectsHtml = '<ul class="projects">' + profile.projects.map(function(p) {
|
|
return '<li>' + p + '</li>';
|
|
}).join('') + '</ul>';
|
|
}
|
|
|
|
// Generer le HTML des soft skills
|
|
var softSkillsHtml = '';
|
|
if (profile.softSkills && profile.softSkills.length > 0) {
|
|
softSkillsHtml = profile.softSkills.map(function(s) {
|
|
return '<span class="interest">' + s + '</span>';
|
|
}).join('');
|
|
}
|
|
|
|
var modal = document.createElement('div');
|
|
modal.className = 'profile-modal';
|
|
modal.innerHTML =
|
|
'<div class="profile-card">' +
|
|
'<button class="close-btn">×</button>' +
|
|
'<h2>' + (profile.fullName || memberId) + '</h2>' +
|
|
'<p class="role">' + (profile.role || 'Membre de l\'equipe') + '</p>' +
|
|
'<div class="stats">' +
|
|
'<span class="stat"><strong>' + (profile.availability || 0) + '%</strong> disponibilite</span>' +
|
|
'<span class="stat"><strong>' + (profile.yearsExperience || 0) + '</strong> ans exp.</span>' +
|
|
'<span class="stat"><strong>' + (profile.seniorityLevel || 'beginner') + '</strong></span>' +
|
|
(profile.joinDate ? '<span class="stat">Depuis <strong>' + profile.joinDate + '</strong></span>' : '') +
|
|
'</div>' +
|
|
(skillsHtml ? '<h3>Competences techniques</h3><div class="skills">' + skillsHtml + '</div>' : '') +
|
|
(interestsHtml ? '<h3>Centres d\'interet</h3><div class="interests">' + interestsHtml + '</div>' : '') +
|
|
(softSkillsHtml ? '<h3>Soft Skills</h3><div class="interests">' + softSkillsHtml + '</div>' : '') +
|
|
(projectsHtml ? '<h3>Projets</h3>' + projectsHtml : '') +
|
|
(profile.bio ? '<p class="bio">' + profile.bio + '</p>' : '') +
|
|
'</div>';
|
|
|
|
// Fermer au clic sur le fond ou le bouton
|
|
modal.addEventListener('click', function(e) {
|
|
if (e.target === modal || e.target.classList.contains('close-btn')) {
|
|
modal.remove();
|
|
}
|
|
});
|
|
|
|
// Fermer avec Echap
|
|
var escHandler = function(e) {
|
|
if (e.key === 'Escape') {
|
|
modal.remove();
|
|
document.removeEventListener('keydown', escHandler);
|
|
}
|
|
};
|
|
document.addEventListener('keydown', escHandler);
|
|
|
|
document.body.appendChild(modal);
|
|
console.log('EQUIPE: Profil affiche pour', memberId);
|
|
}
|
|
|
|
// Demarrer quand le DOM est pret
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', checkAndInitTeamPage);
|
|
} else {
|
|
checkAndInitTeamPage();
|
|
}
|
|
|
|
// Detecter les navigations Next.js (SPA)
|
|
var lastUrl = location.href;
|
|
new MutationObserver(function() {
|
|
if (location.href !== lastUrl) {
|
|
lastUrl = location.href;
|
|
window.__teamPageInitialized = false;
|
|
checkAndInitTeamPage();
|
|
}
|
|
}).observe(document, { subtree: true, childList: true });
|
|
})();
|