Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Arbre Généalogique</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .network { | |
| width: 100%; | |
| height: 70vh; | |
| border: 1px solid #374151; | |
| border-radius: 0.5rem; | |
| background-color: #1f2937; | |
| } | |
| .person-card { | |
| transition: all 0.3s ease; | |
| } | |
| .person-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3); | |
| } | |
| .search-highlight { | |
| background-color: rgba(234, 179, 8, 0.3); | |
| border: 1px solid rgba(234, 179, 8, 0.5); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-gray-200 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <header class="mb-8"> | |
| <h1 class="text-4xl font-bold text-center text-indigo-400 mb-2">Arbre Généalogique</h1> | |
| <p class="text-center text-gray-400">Explorez et gérez votre histoire familiale</p> | |
| </header> | |
| <div class="grid grid-cols-1 lg:grid-cols-4 gap-6"> | |
| <!-- Sidebar --> | |
| <div class="lg:col-span-1 bg-gray-800 p-6 rounded-lg shadow-lg"> | |
| <div class="mb-6"> | |
| <h2 class="text-xl font-semibold mb-4 text-indigo-300">Rechercher</h2> | |
| <div class="relative"> | |
| <input type="text" id="searchInput" placeholder="Nom, prénom..." | |
| class="w-full bg-gray-700 border border-gray-600 rounded-md py-2 px-4 text-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <button id="searchBtn" class="absolute right-2 top-2 text-gray-400 hover:text-indigo-400"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h2 class="text-xl font-semibold mb-4 text-indigo-300">Ajouter un membre</h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-300 mb-1">Type de relation</label> | |
| <select id="relationType" class="w-full bg-gray-700 border border-gray-600 rounded-md py-2 px-3 text-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <option value="parent">Parent</option> | |
| <option value="spouse">Conjoint</option> | |
| <option value="sibling">Frère/Sœur</option> | |
| <option value="child">Enfant</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-300 mb-1">Membre existant</label> | |
| <select id="existingMember" class="w-full bg-gray-700 border border-gray-600 rounded-md py-2 px-3 text-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <option value="">Sélectionner un membre</option> | |
| </select> | |
| </div> | |
| <button id="addMemberBtn" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-2 px-4 rounded-md transition duration-300 flex items-center justify-center"> | |
| <i class="fas fa-user-plus mr-2"></i> Ajouter | |
| </button> | |
| </div> | |
| </div> | |
| <div> | |
| <h2 class="text-xl font-semibold mb-4 text-indigo-300">Statistiques</h2> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="bg-gray-700 p-3 rounded-lg text-center"> | |
| <p class="text-2xl font-bold text-indigo-400" id="totalMembers">0</p> | |
| <p class="text-xs text-gray-400">Membres</p> | |
| </div> | |
| <div class="bg-gray-700 p-3 rounded-lg text-center"> | |
| <p class="text-2xl font-bold text-indigo-400" id="generations">0</p> | |
| <p class="text-xs text-gray-400">Générations</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="lg:col-span-3 space-y-6"> | |
| <div class="network" id="familyTree"></div> | |
| <div class="bg-gray-800 p-6 rounded-lg shadow-lg" id="memberDetails" style="display: none;"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <h2 class="text-2xl font-bold text-indigo-300" id="memberName">Détails du membre</h2> | |
| <button id="editMemberBtn" class="text-gray-400 hover:text-indigo-400"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="md:col-span-1"> | |
| <div class="bg-gray-700 rounded-lg overflow-hidden"> | |
| <img id="memberPhoto" src="https://via.placeholder.com/300x300?text=Photo" alt="Photo" class="w-full h-auto"> | |
| </div> | |
| </div> | |
| <div class="md:col-span-2"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> | |
| <div> | |
| <p class="text-sm text-gray-400">Date de naissance</p> | |
| <p class="font-medium" id="memberBirthDate">Inconnue</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-400">Lieu de naissance</p> | |
| <p class="font-medium" id="memberBirthPlace">Inconnu</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-400">Date de décès</p> | |
| <p class="font-medium" id="memberDeathDate">-</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-400">Profession</p> | |
| <p class="font-medium" id="memberOccupation">Inconnue</p> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <p class="text-sm text-gray-400">Biographie</p> | |
| <p class="font-medium" id="memberBio">Aucune information biographique disponible.</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-400 mb-2">Relations</p> | |
| <div class="flex flex-wrap gap-2" id="memberRelations"> | |
| <!-- Relations will be added here --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Edit Member Modal --> | |
| <div id="editModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-gray-800 rounded-lg p-6 w-full max-w-2xl"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xl font-bold text-indigo-300">Modifier le membre</h3> | |
| <button id="closeModalBtn" class="text-gray-400 hover:text-white"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <form id="editMemberForm" class="space-y-4"> | |
| <input type="hidden" id="editMemberId"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-300 mb-1">Prénom</label> | |
| <input type="text" id="editFirstName" class="w-full bg-gray-700 border border-gray-600 rounded-md py-2 px-3 text-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-300 mb-1">Nom</label> | |
| <input type="text" id="editLastName" class="w-full bg-gray-700 border border-gray-600 rounded-md py-2 px-3 text-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-300 mb-1">Date de naissance</label> | |
| <input type="date" id="editBirthDate" class="w-full bg-gray-700 border border-gray-600 rounded-md py-2 px-3 text-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-300 mb-1">Lieu de naissance</label> | |
| <input type="text" id="editBirthPlace" class="w-full bg-gray-700 border border-gray-600 rounded-md py-2 px-3 text-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-300 mb-1">Date de décès</label> | |
| <input type="date" id="editDeathDate" class="w-full bg-gray-700 border border-gray-600 rounded-md py-2 px-3 text-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-300 mb-1">Profession</label> | |
| <input type="text" id="editOccupation" class="w-full bg-gray-700 border border-gray-600 rounded-md py-2 px-3 text-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-300 mb-1">Biographie</label> | |
| <textarea id="editBio" rows="3" class="w-full bg-gray-700 border border-gray-600 rounded-md py-2 px-3 text-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500"></textarea> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-300 mb-1">Photo URL</label> | |
| <input type="text" id="editPhotoUrl" class="w-full bg-gray-700 border border-gray-600 rounded-md py-2 px-3 text-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| </div> | |
| <div class="flex justify-end space-x-3 pt-4"> | |
| <button type="button" id="deleteMemberBtn" class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-md transition duration-300"> | |
| <i class="fas fa-trash mr-2"></i> Supprimer | |
| </button> | |
| <button type="submit" class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-md transition duration-300"> | |
| <i class="fas fa-save mr-2"></i> Enregistrer | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Sample family data | |
| const familyData = { | |
| nodes: [ | |
| { id: 1, label: "Jean Dupont\n(1920-2005)", shape: "circularImage", image: "https://randomuser.me/api/portraits/men/1.jpg", | |
| birthDate: "1920-05-15", deathDate: "2005-11-20", birthPlace: "Paris, France", occupation: "Ingénieur", | |
| bio: "Fondateur de l'entreprise familiale. A servi pendant la Seconde Guerre mondiale." }, | |
| { id: 2, label: "Marie Martin\n(1925-2010)", shape: "circularImage", image: "https://randomuser.me/api/portraits/women/1.jpg", | |
| birthDate: "1925-08-22", deathDate: "2010-03-10", birthPlace: "Lyon, France", occupation: "Infirmière", | |
| bio: "A travaillé à l'hôpital local pendant 40 ans. Passionnée de jardinage." }, | |
| { id: 3, label: "Pierre Dupont\n(1950-)", shape: "circularImage", image: "https://randomuser.me/api/portraits/men/2.jpg", | |
| birthDate: "1950-07-30", deathDate: "", birthPlace: "Paris, France", occupation: "Médecin", | |
| bio: "Spécialiste en cardiologie. A publié plusieurs articles médicaux." }, | |
| { id: 4, label: "Sophie Lambert\n(1955-)", shape: "circularImage", image: "https://randomuser.me/api/portraits/women/2.jpg", | |
| birthDate: "1955-02-14", deathDate: "", birthPlace: "Marseille, France", occupation: "Professeure", | |
| bio: "Enseigne la littérature française à l'université. Auteur de deux romans." }, | |
| { id: 5, label: "Thomas Dupont\n(1980-)", shape: "circularImage", image: "https://randomuser.me/api/portraits/men/3.jpg", | |
| birthDate: "1980-11-05", deathDate: "", birthPlace: "Lyon, France", occupation: "Avocat", | |
| bio: "Spécialisé en droit des affaires. Marié avec deux enfants." }, | |
| { id: 6, label: "Julie Bernard\n(1982-)", shape: "circularImage", image: "https://randomuser.me/api/portraits/women/3.jpg", | |
| birthDate: "1982-04-18", deathDate: "", birthPlace: "Toulouse, France", occupation: "Architecte", | |
| bio: "A conçu plusieurs bâtiments primés. Passionnée d'art moderne." }, | |
| { id: 7, label: "Lucas Dupont\n(2010-)", shape: "circularImage", image: "https://randomuser.me/api/portraits/men/4.jpg", | |
| birthDate: "2010-09-12", deathDate: "", birthPlace: "Lyon, France", occupation: "Étudiant", | |
| bio: "Élève au lycée. Passionné de football et de programmation." }, | |
| { id: 8, label: "Emma Dupont\n(2012-)", shape: "circularImage", image: "https://randomuser.me/api/portraits/women/4.jpg", | |
| birthDate: "2012-03-25", deathDate: "", birthPlace: "Lyon, France", occupation: "Étudiante", | |
| bio: "Aime la danse et la musique. Souhaite devenir vétérinaire." }, | |
| { id: 9, label: "Claire Dupont\n(1952-)", shape: "circularImage", image: "https://randomuser.me/api/portraits/women/5.jpg", | |
| birthDate: "1952-12-03", deathDate: "", birthPlace: "Paris, France", occupation: "Artiste", | |
| bio: "Peintre renommée. Expositions internationales." }, | |
| { id: 10, label: "Jacques Leroy\n(1948-)", shape: "circularImage", image: "https://randomuser.me/api/portraits/men/5.jpg", | |
| birthDate: "1948-06-19", deathDate: "", birthPlace: "Nice, France", occupation: "Journaliste", | |
| bio: "Correspondant à l'étranger pendant 20 ans. Maintenant à la retraite." } | |
| ], | |
| edges: [ | |
| { from: 1, to: 2, label: "marié", dashes: false, color: { color: "#818cf8" } }, | |
| { from: 1, to: 3, label: "père" }, | |
| { from: 2, to: 3, label: "mère" }, | |
| { from: 3, to: 4, label: "marié", dashes: false, color: { color: "#818cf8" } }, | |
| { from: 3, to: 5, label: "père" }, | |
| { from: 4, to: 5, label: "mère" }, | |
| { from: 5, to: 6, label: "marié", dashes: false, color: { color: "#818cf8" } }, | |
| { from: 5, to: 7, label: "père" }, | |
| { from: 6, to: 7, label: "mère" }, | |
| { from: 5, to: 8, label: "père" }, | |
| { from: 6, to: 8, label: "mère" }, | |
| { from: 1, to: 9, label: "père" }, | |
| { from: 2, to: 9, label: "mère" }, | |
| { from: 9, to: 10, label: "marié", dashes: false, color: { color: "#818cf8" } } | |
| ] | |
| }; | |
| // Initialize the network | |
| let network = null; | |
| let selectedNodeId = null; | |
| let allNodes = [...familyData.nodes]; | |
| let allEdges = [...familyData.edges]; | |
| function initFamilyTree() { | |
| const container = document.getElementById('familyTree'); | |
| const options = { | |
| nodes: { | |
| borderWidth: 2, | |
| size: 40, | |
| color: { | |
| border: '#4f46e5', | |
| background: '#1f2937', | |
| highlight: { | |
| border: '#f59e0b', | |
| background: '#1f2937' | |
| } | |
| }, | |
| font: { | |
| color: '#e5e7eb', | |
| size: 14, | |
| face: 'sans-serif', | |
| strokeWidth: 0, | |
| align: 'center' | |
| }, | |
| shadow: { | |
| enabled: true, | |
| color: 'rgba(0,0,0,0.5)', | |
| size: 10, | |
| x: 5, | |
| y: 5 | |
| } | |
| }, | |
| edges: { | |
| width: 2, | |
| color: { | |
| color: '#6b7280', | |
| highlight: '#f59e0b', | |
| hover: '#f59e0b' | |
| }, | |
| smooth: { | |
| type: 'cubicBezier', | |
| forceDirection: 'vertical' | |
| }, | |
| font: { | |
| color: '#9ca3af', | |
| size: 12, | |
| strokeWidth: 0, | |
| align: 'middle' | |
| }, | |
| arrows: { | |
| to: false, | |
| from: false | |
| }, | |
| selectionWidth: 3 | |
| }, | |
| layout: { | |
| hierarchical: { | |
| direction: 'UD', | |
| sortMethod: 'directed', | |
| nodeSpacing: 150, | |
| levelSeparation: 150 | |
| } | |
| }, | |
| physics: { | |
| hierarchicalRepulsion: { | |
| nodeDistance: 200 | |
| }, | |
| solver: 'hierarchicalRepulsion' | |
| }, | |
| interaction: { | |
| hover: true, | |
| multiselect: false, | |
| navigationButtons: true, | |
| keyboard: true | |
| } | |
| }; | |
| // Create the network | |
| network = new vis.Network(container, { nodes: allNodes, edges: allEdges }, options); | |
| // Event listeners | |
| network.on("selectNode", function(params) { | |
| selectedNodeId = params.nodes[0]; | |
| showMemberDetails(selectedNodeId); | |
| }); | |
| network.on("deselectNode", function() { | |
| selectedNodeId = null; | |
| document.getElementById('memberDetails').style.display = 'none'; | |
| }); | |
| // Populate existing members dropdown | |
| updateExistingMembersDropdown(); | |
| updateStats(); | |
| } | |
| function showMemberDetails(nodeId) { | |
| const member = allNodes.find(n => n.id === nodeId); | |
| if (!member) return; | |
| document.getElementById('memberName').textContent = member.label.split('\n')[0]; | |
| document.getElementById('memberPhoto').src = member.image; | |
| document.getElementById('memberBirthDate').textContent = member.birthDate || 'Inconnue'; | |
| document.getElementById('memberBirthPlace').textContent = member.birthPlace || 'Inconnu'; | |
| document.getElementById('memberDeathDate').textContent = member.deathDate || '-'; | |
| document.getElementById('memberOccupation').textContent = member.occupation || 'Inconnue'; | |
| document.getElementById('memberBio').textContent = member.bio || 'Aucune information biographique disponible.'; | |
| // Find relations | |
| const relationsContainer = document.getElementById('memberRelations'); | |
| relationsContainer.innerHTML = ''; | |
| // Find spouses | |
| const spouseEdges = allEdges.filter(e => | |
| (e.from === nodeId || e.to === nodeId) && e.label === 'marié' | |
| ); | |
| spouseEdges.forEach(edge => { | |
| const spouseId = edge.from === nodeId ? edge.to : edge.from; | |
| const spouse = allNodes.find(n => n.id === spouseId); | |
| if (spouse) { | |
| const relationElement = document.createElement('div'); | |
| relationElement.className = 'bg-gray-700 px-3 py-1 rounded-full text-sm flex items-center'; | |
| relationElement.innerHTML = ` | |
| <span class="text-indigo-300 mr-1">Conjoint:</span> | |
| <span>${spouse.label.split('\n')[0]}</span> | |
| `; | |
| relationsContainer.appendChild(relationElement); | |
| } | |
| }); | |
| // Find parents | |
| const parentEdges = allEdges.filter(e => | |
| e.to === nodeId && (e.label === 'père' || e.label === 'mère') | |
| ); | |
| parentEdges.forEach(edge => { | |
| const parent = allNodes.find(n => n.id === edge.from); | |
| if (parent) { | |
| const relationType = edge.label === 'père' ? 'Père' : 'Mère'; | |
| const relationElement = document.createElement('div'); | |
| relationElement.className = 'bg-gray-700 px-3 py-1 rounded-full text-sm flex items-center'; | |
| relationElement.innerHTML = ` | |
| <span class="text-indigo-300 mr-1">${relationType}:</span> | |
| <span>${parent.label.split('\n')[0]}</span> | |
| `; | |
| relationsContainer.appendChild(relationElement); | |
| } | |
| }); | |
| // Find children | |
| const childEdges = allEdges.filter(e => | |
| e.from === nodeId && (e.label === 'père' || e.label === 'mère') | |
| ); | |
| childEdges.forEach(edge => { | |
| const child = allNodes.find(n => n.id === edge.to); | |
| if (child) { | |
| const relationElement = document.createElement('div'); | |
| relationElement.className = 'bg-gray-700 px-3 py-1 rounded-full text-sm flex items-center'; | |
| relationElement.innerHTML = ` | |
| <span class="text-indigo-300 mr-1">Enfant:</span> | |
| <span>${child.label.split('\n')[0]}</span> | |
| `; | |
| relationsContainer.appendChild(relationElement); | |
| } | |
| }); | |
| // Find siblings | |
| const siblingEdges = allEdges.filter(e => | |
| (e.from === nodeId || e.to === nodeId) && e.label === 'frère/sœur' | |
| ); | |
| siblingEdges.forEach(edge => { | |
| const siblingId = edge.from === nodeId ? edge.to : edge.from; | |
| const sibling = allNodes.find(n => n.id === siblingId); | |
| if (sibling) { | |
| const relationElement = document.createElement('div'); | |
| relationElement.className = 'bg-gray-700 px-3 py-1 rounded-full text-sm flex items-center'; | |
| relationElement.innerHTML = ` | |
| <span class="text-indigo-300 mr-1">Frère/Sœur:</span> | |
| <span>${sibling.label.split('\n')[0]}</span> | |
| `; | |
| relationsContainer.appendChild(relationElement); | |
| } | |
| }); | |
| document.getElementById('memberDetails').style.display = 'block'; | |
| } | |
| function updateExistingMembersDropdown() { | |
| const dropdown = document.getElementById('existingMember'); | |
| dropdown.innerHTML = '<option value="">Sélectionner un membre</option>'; | |
| allNodes.forEach(node => { | |
| const option = document.createElement('option'); | |
| option.value = node.id; | |
| option.textContent = node.label.split('\n')[0]; | |
| dropdown.appendChild(option); | |
| }); | |
| } | |
| function updateStats() { | |
| document.getElementById('totalMembers').textContent = allNodes.length; | |
| // Calculate generations (simplified) | |
| let maxGeneration = 1; | |
| allNodes.forEach(node => { | |
| const generation = calculateGeneration(node.id); | |
| if (generation > maxGeneration) { | |
| maxGeneration = generation; | |
| } | |
| }); | |
| document.getElementById('generations').textContent = maxGeneration; | |
| } | |
| function calculateGeneration(nodeId, currentGen = 1) { | |
| // Find parents | |
| const parentEdges = allEdges.filter(e => | |
| e.to === nodeId && (e.label === 'père' || e.label === 'mère') | |
| ); | |
| if (parentEdges.length === 0) { | |
| return currentGen; | |
| } | |
| let maxParentGen = 0; | |
| parentEdges.forEach(edge => { | |
| const parentGen = calculateGeneration(edge.from, currentGen + 1); | |
| if (parentGen > maxParentGen) { | |
| maxParentGen = parentGen; | |
| } | |
| }); | |
| return maxParentGen; | |
| } | |
| function searchMember() { | |
| const searchTerm = document.getElementById('searchInput').value.toLowerCase(); | |
| if (!searchTerm) return; | |
| // Reset all nodes | |
| const updatedNodes = allNodes.map(node => { | |
| const newNode = {...node}; | |
| newNode.color = { | |
| border: '#4f46e5', | |
| background: '#1f2937' | |
| }; | |
| newNode.font = { | |
| color: '#e5e7eb' | |
| }; | |
| return newNode; | |
| }); | |
| // Find matching nodes | |
| const matchingNodes = allNodes.filter(node => | |
| node.label.toLowerCase().includes(searchTerm) | |
| ); | |
| if (matchingNodes.length > 0) { | |
| // Highlight matching nodes | |
| matchingNodes.forEach(match => { | |
| const nodeIndex = updatedNodes.findIndex(n => n.id === match.id); | |
| if (nodeIndex !== -1) { | |
| updatedNodes[nodeIndex].color = { | |
| border: '#f59e0b', | |
| background: '#1f2937' | |
| }; | |
| updatedNodes[nodeIndex].font = { | |
| color: '#f59e0b' | |
| }; | |
| } | |
| }); | |
| // Focus on first match | |
| network.selectNodes([matchingNodes[0].id]); | |
| network.focus(matchingNodes[0].id, { | |
| animation: { | |
| duration: 1000, | |
| easingFunction: 'easeInOutQuad' | |
| } | |
| }); | |
| } | |
| network.setData({ nodes: updatedNodes, edges: allEdges }); | |
| } | |
| function addMember() { | |
| const relationType = document.getElementById('relationType').value; | |
| const existingMemberId = parseInt(document.getElementById('existingMember').value); | |
| if (!existingMemberId) { | |
| alert('Veuillez sélectionner un membre existant'); | |
| return; | |
| } | |
| // Generate new member data | |
| const newId = allNodes.length > 0 ? Math.max(...allNodes.map(n => n.id)) + 1 : 1; | |
| const newMember = { | |
| id: newId, | |
| label: "Nouveau Membre\n()", | |
| shape: "circularImage", | |
| image: "https://via.placeholder.com/300x300?text=Nouveau", | |
| birthDate: "", | |
| deathDate: "", | |
| birthPlace: "", | |
| occupation: "", | |
| bio: "" | |
| }; | |
| // Add the new member | |
| allNodes.push(newMember); | |
| // Add the relationship | |
| if (relationType === 'parent') { | |
| allEdges.push({ from: newId, to: existingMemberId, label: 'père' }); | |
| } else if (relationType === 'spouse') { | |
| allEdges.push({ from: newId, to: existingMemberId, label: 'marié', dashes: false, color: { color: "#818cf8" } }); | |
| } else if (relationType === 'sibling') { | |
| allEdges.push({ from: newId, to: existingMemberId, label: 'frère/sœur' }); | |
| } else if (relationType === 'child') { | |
| allEdges.push({ from: existingMemberId, to: newId, label: 'père' }); | |
| } | |
| // Update the visualization | |
| network.setData({ nodes: allNodes, edges: allEdges }); | |
| // Update dropdown and stats | |
| updateExistingMembersDropdown(); | |
| updateStats(); | |
| // Select and show the new member | |
| network.selectNodes([newId]); | |
| showMemberDetails(newId); | |
| // Open edit modal for the new member | |
| openEditModal(newId); | |
| } | |
| function openEditModal(nodeId) { | |
| const member = allNodes.find(n => n.id === nodeId); | |
| if (!member) return; | |
| document.getElementById('editModal').classList.remove('hidden'); | |
| document.getElementById('editMemberId').value = nodeId; | |
| const nameParts = member.label.split('\n')[0].split(' '); | |
| document.getElementById('editFirstName').value = nameParts[0] || ''; | |
| document.getElementById('editLastName').value = nameParts.slice(1).join(' ') || ''; | |
| document.getElementById('editBirthDate').value = member.birthDate || ''; | |
| document.getElementById('editBirthPlace').value = member.birthPlace || ''; | |
| document.getElementById('editDeathDate').value = member.deathDate || ''; | |
| document.getElementById('editOccupation').value = member.occupation || ''; | |
| document.getElementById('editBio').value = member.bio || ''; | |
| document.getElementById('editPhotoUrl').value = member.image || ''; | |
| } | |
| function closeEditModal() { | |
| document.getElementById('editModal').classList.add('hidden'); | |
| } | |
| function saveMemberChanges(e) { | |
| e.preventDefault(); | |
| const nodeId = parseInt(document.getElementById('editMemberId').value); | |
| const memberIndex = allNodes.findIndex(n => n.id === nodeId); | |
| if (memberIndex === -1) return; | |
| const firstName = document.getElementById('editFirstName').value.trim(); | |
| const lastName = document.getElementById('editLastName').value.trim(); | |
| const birthDate = document.getElementById('editBirthDate').value; | |
| const birthPlace = document.getElementById('editBirthPlace').value.trim(); | |
| const deathDate = document.getElementById('editDeathDate').value; | |
| const occupation = document.getElementById('editOccupation').value.trim(); | |
| const bio = document.getElementById('editBio').value.trim(); | |
| const photoUrl = document.getElementById('editPhotoUrl').value.trim(); | |
| // Update member data | |
| const updatedMember = { | |
| ...allNodes[memberIndex], | |
| label: `${firstName} ${lastName}\n(${birthDate ? birthDate.split('-')[0] : ''}${deathDate ? '-' + deathDate.split('-')[0] : ''})`, | |
| birthDate: birthDate || '', | |
| birthPlace: birthPlace || '', | |
| deathDate: deathDate || '', | |
| occupation: occupation || '', | |
| bio: bio || '', | |
| image: photoUrl || 'https://via.placeholder.com/300x300?text=Photo' | |
| }; | |
| allNodes[memberIndex] = updatedMember; | |
| // Update the visualization | |
| network.setData({ nodes: allNodes, edges: allEdges }); | |
| // Update dropdown and stats | |
| updateExistingMembersDropdown(); | |
| updateStats(); | |
| // If this was the selected member, update the details view | |
| if (selectedNodeId === nodeId) { | |
| showMemberDetails(nodeId); | |
| } | |
| closeEditModal(); | |
| } | |
| function deleteMember() { | |
| if (!confirm('Êtes-vous sûr de vouloir supprimer ce membre?')) return; | |
| const nodeId = parseInt(document.getElementById('editMemberId').value); | |
| // Remove the node and all connected edges | |
| allNodes = allNodes.filter(n => n.id !== nodeId); | |
| allEdges = allEdges.filter(e => e.from !== nodeId && e.to !== nodeId); | |
| // Update the visualization | |
| network.setData({ nodes: allNodes, edges: allEdges }); | |
| // Update dropdown and stats | |
| updateExistingMembersDropdown(); | |
| updateStats(); | |
| // Hide details if showing the deleted member | |
| if (selectedNodeId === nodeId) { | |
| document.getElementById('memberDetails').style.display = 'none'; | |
| selectedNodeId = null; | |
| } | |
| closeEditModal(); | |
| } | |
| // Initialize when DOM is loaded | |
| document.addEventListener('DOMContentLoaded', function() { | |
| initFamilyTree(); | |
| // Event listeners | |
| document.getElementById('searchBtn').addEventListener('click', searchMember); | |
| document.getElementById('searchInput').addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') searchMember(); | |
| }); | |
| document.getElementById('addMemberBtn').addEventListener('click', addMember); | |
| document.getElementById('editMemberBtn').addEventListener('click', function() { | |
| if (selectedNodeId) openEditModal(selectedNodeId); | |
| }); | |
| document.getElementById('closeModalBtn').addEventListener('click', closeEditModal); | |
| document.getElementById('editMemberForm').addEventListener('submit', saveMemberChanges); | |
| document.getElementById('deleteMemberBtn').addEventListener('click', deleteMember); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=iamTheFoxCoder/mon-espace" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |