Ajouts de la maquette web sur le nouveau git (suite au bug de l'ancien répertoire git
This commit is contained in:
		
							
								
								
									
										279
									
								
								MaquetteWEB/html/RH/candidature.html
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										279
									
								
								MaquetteWEB/html/RH/candidature.html
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,279 @@
 | 
			
		||||
<!DOCTYPE html>
 | 
			
		||||
<html lang="fr">
 | 
			
		||||
 | 
			
		||||
<head>
 | 
			
		||||
    <meta charset="UTF-8">
 | 
			
		||||
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 | 
			
		||||
    <link rel="stylesheet" href="../../css/RH/style.css">
 | 
			
		||||
    <link rel="stylesheet" href="../../css/RH/rh.css">
 | 
			
		||||
    <title>Gestion des Candidatures</title>
 | 
			
		||||
    <style>
 | 
			
		||||
        /* Ajout de styles pour la barre de recherche et le tri */
 | 
			
		||||
        .search-container {
 | 
			
		||||
            margin-bottom: 20px;
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        .sort-container {
 | 
			
		||||
            margin-bottom: 20px;
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        .sort-button {
 | 
			
		||||
            margin-right: 5px;
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        .modal-content {
 | 
			
		||||
            max-height: 80vh;
 | 
			
		||||
            overflow-y: auto;
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        .comment-container {
 | 
			
		||||
            margin-top: 20px;
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        /* Styles pour la pop-up d'ajout d'offre de vacation */
 | 
			
		||||
        .vacation-modal {
 | 
			
		||||
            display: none; /* Masquer par défaut */
 | 
			
		||||
            position: fixed;
 | 
			
		||||
            z-index: 1;
 | 
			
		||||
            left: 0;
 | 
			
		||||
            top: 0;
 | 
			
		||||
            width: 100%;
 | 
			
		||||
            height: 100%;
 | 
			
		||||
            overflow: auto;
 | 
			
		||||
            background-color: rgb(0,0,0);
 | 
			
		||||
            background-color: rgba(0,0,0,0.4);
 | 
			
		||||
            padding-top: 60px;
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        .vacation-modal-content {
 | 
			
		||||
            background-color: #fefefe;
 | 
			
		||||
            margin: 5% auto;
 | 
			
		||||
            padding: 20px;
 | 
			
		||||
            border: 1px solid #888;
 | 
			
		||||
            width: 80%;
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        .validationDossier{
 | 
			
		||||
            margin-top: 25px;
 | 
			
		||||
            background-color: green;
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        .refusDossier{
 | 
			
		||||
            background-color: rgb(128, 0, 0);
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        .commentairee{
 | 
			
		||||
            width: 100%;
 | 
			
		||||
            height: 100%;
 | 
			
		||||
            box-sizing: border-box;
 | 
			
		||||
        }
 | 
			
		||||
    </style>
 | 
			
		||||
</head>
 | 
			
		||||
 | 
			
		||||
<body>
 | 
			
		||||
    <div class="header">
 | 
			
		||||
        <div class="logo-container">
 | 
			
		||||
            <img src="../../media/img/logoWhite.png" alt="Logo Accueil">
 | 
			
		||||
        </div>
 | 
			
		||||
 | 
			
		||||
        <div class="categories">
 | 
			
		||||
            <a href="./rh.html">Accueil</a>
 | 
			
		||||
            <a href="./gestion_personnel.html">Gestion du personnel</a>
 | 
			
		||||
            <a href="./candidature.html">Candidatures</a>
 | 
			
		||||
            <a href="./mes-informations.html">Mes informations et documents</a>
 | 
			
		||||
        </div>
 | 
			
		||||
 | 
			
		||||
        <div class="user-section">
 | 
			
		||||
            <div class="user-name">Alice BERGER</div>
 | 
			
		||||
            <div class="logout-container">
 | 
			
		||||
                <a href="../../index.html" title="Se déconnecter">
 | 
			
		||||
                    <img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion">
 | 
			
		||||
                </a>
 | 
			
		||||
            </div>
 | 
			
		||||
        </div>
 | 
			
		||||
    </div>
 | 
			
		||||
 | 
			
		||||
    <main>
 | 
			
		||||
        <section>
 | 
			
		||||
            <h2>Candidatures en Attente de Validation</h2>
 | 
			
		||||
 | 
			
		||||
            <!-- Barre de recherche -->
 | 
			
		||||
            <div class="search-container">
 | 
			
		||||
                <input type="text" id="search-input" placeholder="Rechercher par nom" oninput="filterTable()">
 | 
			
		||||
            </div>
 | 
			
		||||
 | 
			
		||||
            <!-- Conteneur de tri -->
 | 
			
		||||
            <div class="sort-container">
 | 
			
		||||
                <button class="sort-button" onclick="sortTable(0)">Trier par Nom</button>
 | 
			
		||||
                <button class="sort-button" onclick="sortTable(1)">Trier par Prénom</button>
 | 
			
		||||
                <button class="sort-button" onclick="sortTable(2)">Trier par Formation</button>
 | 
			
		||||
                <button class="sort-button" onclick="openVacationModal()">Ajouter une Offre de Vacation</button>
 | 
			
		||||
            </div>
 | 
			
		||||
 | 
			
		||||
            <table>
 | 
			
		||||
                <thead>
 | 
			
		||||
                    <tr>
 | 
			
		||||
                        <th>Nom</th>
 | 
			
		||||
                        <th>Prénom</th>
 | 
			
		||||
                        <th>Formation Demandée</th>
 | 
			
		||||
                        <th>Action</th>
 | 
			
		||||
                    </tr>
 | 
			
		||||
                </thead>
 | 
			
		||||
                <tbody id="candidatures-table">
 | 
			
		||||
                    <tr>
 | 
			
		||||
                        <td>Mike</td>
 | 
			
		||||
                        <td>Michel</td>
 | 
			
		||||
                        <td>Informatique - BUT1</td>
 | 
			
		||||
                        <td>
 | 
			
		||||
                            <button onclick="consulterDossier('Mike', 'Michel')">Consulter Dossier</button>
 | 
			
		||||
                        </td>
 | 
			
		||||
                    </tr>
 | 
			
		||||
                    <tr>
 | 
			
		||||
                        <td>John</td>
 | 
			
		||||
                        <td>Williams</td>
 | 
			
		||||
                        <td>Mathématiques - BUT GEA</td>
 | 
			
		||||
                        <td>
 | 
			
		||||
                            <button onclick="consulterDossier('John', 'Williams')">Consulter Dossier</button>
 | 
			
		||||
                        </td>
 | 
			
		||||
                    </tr>
 | 
			
		||||
                    <!-- Ajoutez d'autres lignes ici -->
 | 
			
		||||
                </tbody>
 | 
			
		||||
            </table>
 | 
			
		||||
        </section>
 | 
			
		||||
    </main>
 | 
			
		||||
 | 
			
		||||
    <!-- Modal pour consulter le dossier de candidature -->
 | 
			
		||||
    <div id="dossierModal" class="modal">
 | 
			
		||||
        <div class="modal-content">
 | 
			
		||||
            <span class="close" onclick="closeDossierModal()">×</span>
 | 
			
		||||
            <h2>Dossier de Candidature : <span id="dossier-nom"></span> <span id="dossier-prenom"></span></h2>
 | 
			
		||||
            <h3>Pièces Justificatives :</h3>
 | 
			
		||||
            <ul id="pieces-list"></ul>
 | 
			
		||||
            <div class="comment-container">
 | 
			
		||||
                <h3>Commentaire :</h3>
 | 
			
		||||
                <textarea class="commentairee" rows="4" placeholder="Ajouter un commentaire sur ce dossier..."></textarea><br>
 | 
			
		||||
                <button onclick="ajouterCommentaire()">Ajouter Commentaire</button>
 | 
			
		||||
            </div>
 | 
			
		||||
            <div>
 | 
			
		||||
                <button class="validationDossier" onclick="validerDossier()">Valider Dossier</button>
 | 
			
		||||
                <button class="refusDossier" onclick="refuserDossier()">Refuser Dossier</button>
 | 
			
		||||
            </div>
 | 
			
		||||
        </div>
 | 
			
		||||
    </div>
 | 
			
		||||
 | 
			
		||||
    <!-- Modal pour ajouter une offre de vacation -->
 | 
			
		||||
    <div id="vacationModal" class="vacation-modal">
 | 
			
		||||
        <div class="vacation-modal-content">
 | 
			
		||||
            <span class="close" onclick="closeVacationModal()">×</span>
 | 
			
		||||
            <h2>Ajouter une Offre de Vacation</h2>
 | 
			
		||||
            <form id="vacation-form">
 | 
			
		||||
                <label for="diplome">Diplôme requis :</label><br>
 | 
			
		||||
                <input type="text" id="diplome" name="diplome" required><br><br>
 | 
			
		||||
                
 | 
			
		||||
                <label for="description">Description :</label><br>
 | 
			
		||||
                <textarea id="description" name="description" rows="4" required></textarea><br><br>
 | 
			
		||||
                
 | 
			
		||||
                
 | 
			
		||||
                <label for="duree">Durée (en jours) :</label><br>
 | 
			
		||||
                <input type="number" id="duree" name="duree" min="1" required><br><br>
 | 
			
		||||
                
 | 
			
		||||
                <button type="submit">Soumettre l'Offre</button>
 | 
			
		||||
            </form>
 | 
			
		||||
        </div>
 | 
			
		||||
    </div>
 | 
			
		||||
    
 | 
			
		||||
 | 
			
		||||
    <div class="footer">
 | 
			
		||||
        <p>© 2024 IUT de Fontainebleau. Tous droits réservés | 
 | 
			
		||||
            <a href="../mentions_legales.html">Mentions légales</a>
 | 
			
		||||
        </p>
 | 
			
		||||
    </div>
 | 
			
		||||
 | 
			
		||||
    <script>
 | 
			
		||||
        const sortOrder = [true, true, true]; // État du tri pour chaque colonne
 | 
			
		||||
 | 
			
		||||
        function sortTable(columnIndex) {
 | 
			
		||||
            const table = document.getElementById("candidatures-table");
 | 
			
		||||
            const rows = Array.from(table.rows);
 | 
			
		||||
            const direction = sortOrder[columnIndex] ? 1 : -1; // Déterminer la direction du tri
 | 
			
		||||
            sortOrder[columnIndex] = !sortOrder[columnIndex]; // Basculer l'ordre de tri pour le prochain clic
 | 
			
		||||
 | 
			
		||||
            rows.sort((a, b) => {
 | 
			
		||||
                const aText = a.cells[columnIndex].textContent.trim();
 | 
			
		||||
                const bText = b.cells[columnIndex].textContent.trim();
 | 
			
		||||
                return direction * aText.localeCompare(bText);
 | 
			
		||||
            });
 | 
			
		||||
 | 
			
		||||
            // Réattacher les lignes triées au tableau
 | 
			
		||||
            rows.forEach(row => table.appendChild(row));
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        function filterTable() {
 | 
			
		||||
            const input = document.getElementById("search-input").value.toLowerCase();
 | 
			
		||||
            const table = document.getElementById("candidatures-table");
 | 
			
		||||
            const rows = Array.from(table.rows);
 | 
			
		||||
 | 
			
		||||
            rows.forEach(row => {
 | 
			
		||||
                const cells = Array.from(row.cells);
 | 
			
		||||
                const match = cells[0].textContent.toLowerCase().includes(input) || 
 | 
			
		||||
                              cells[1].textContent.toLowerCase().includes(input);
 | 
			
		||||
                row.style.display = match ? "" : "none";
 | 
			
		||||
            });
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        function consulterDossier(nom, prenom) {
 | 
			
		||||
            document.getElementById("dossier-nom").textContent = nom;
 | 
			
		||||
            document.getElementById("dossier-prenom").textContent = prenom;
 | 
			
		||||
            const piecesList = document.getElementById("pieces-list");
 | 
			
		||||
            piecesList.innerHTML = `
 | 
			
		||||
                <li><a href="">CV - ${prenom} ${nom}.pdf</a></li>
 | 
			
		||||
                <li><a href="">Diplôme - Licence Informatique.pdf</a></li>
 | 
			
		||||
                <li><a href="">Lettre de motivation.pdf</a></li>
 | 
			
		||||
                <li><a href="">Justificatif d'expérience.pdf</a></li>
 | 
			
		||||
            `; // Remplacer par les vraies données
 | 
			
		||||
            document.getElementById("dossierModal").style.display = "block";
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        function closeDossierModal() {
 | 
			
		||||
            document.getElementById("dossierModal").style.display = "none";
 | 
			
		||||
            document.getElementById("commentaire").value = ""; // Réinitialiser le champ de commentaire
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        function ajouterCommentaire() {
 | 
			
		||||
            const commentaire = document.getElementById("commentaire").value;
 | 
			
		||||
            alert(`Commentaire ajouté : ${commentaire}`);
 | 
			
		||||
            // Logic to handle the comment addition can be implemented here
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        function validerDossier() {
 | 
			
		||||
            alert("Dossier validé !");
 | 
			
		||||
            closeDossierModal();
 | 
			
		||||
            // Logic to handle the validation of the dossier can be implemented here
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        function refuserDossier() {
 | 
			
		||||
            alert("Dossier refusé !");
 | 
			
		||||
            closeDossierModal();
 | 
			
		||||
            // Logic to handle the refusal of the dossier can be implemented here
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        function openVacationModal() {
 | 
			
		||||
            document.getElementById("vacationModal").style.display = "block";
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        function closeVacationModal() {
 | 
			
		||||
            document.getElementById("vacationModal").style.display = "none";
 | 
			
		||||
            document.getElementById("vacation-form").reset(); // Réinitialiser le formulaire
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        // Gestion de la soumission du formulaire d'offre de vacation
 | 
			
		||||
        document.getElementById("vacation-form").addEventListener("submit", function(event) {
 | 
			
		||||
            event.preventDefault(); // Empêcher le rechargement de la page
 | 
			
		||||
            alert("Offre de vacation soumise !");
 | 
			
		||||
            closeVacationModal(); // Fermer la pop-up après soumission
 | 
			
		||||
            // Ici, vous pouvez ajouter le code pour traiter l'envoi du formulaire, comme envoyer les données à un serveur.
 | 
			
		||||
        });
 | 
			
		||||
    </script>
 | 
			
		||||
</body>
 | 
			
		||||
 | 
			
		||||
</html>
 | 
			
		||||
							
								
								
									
										261
									
								
								MaquetteWEB/html/RH/gestion_personnel.html
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										261
									
								
								MaquetteWEB/html/RH/gestion_personnel.html
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,261 @@
 | 
			
		||||
<!DOCTYPE html>
 | 
			
		||||
<html lang="fr">
 | 
			
		||||
 | 
			
		||||
<head>
 | 
			
		||||
    <meta charset="UTF-8">
 | 
			
		||||
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 | 
			
		||||
    <link rel="stylesheet" href="../../css/RH/style.css">
 | 
			
		||||
    <link rel="stylesheet" href="../../css/RH/rh.css">
 | 
			
		||||
    <title>Gestion du Personnel</title>
 | 
			
		||||
    <style>
 | 
			
		||||
        /* Ajout de styles pour la barre de recherche et le tri */
 | 
			
		||||
        .search-container {
 | 
			
		||||
            margin-bottom: 20px;
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        .sort-container {
 | 
			
		||||
            margin-bottom: 20px;
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        .sort-button {
 | 
			
		||||
            margin-right: 5px;
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        .modal-content {
 | 
			
		||||
            max-height: 80vh;
 | 
			
		||||
            overflow-y: auto;
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        .supprimerBouton{
 | 
			
		||||
            background-color: rgb(128, 0, 0);
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        .voirDetailBouton{
 | 
			
		||||
            background-color: rgb(255, 140, 0);
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        .modifierBouton{
 | 
			
		||||
            background-color: #28A745;
 | 
			
		||||
        }
 | 
			
		||||
    </style>
 | 
			
		||||
</head>
 | 
			
		||||
 | 
			
		||||
<body>
 | 
			
		||||
    <div class="header">
 | 
			
		||||
        <div class="logo-container">
 | 
			
		||||
            <img src="../../media/img/logoWhite.png" alt="Logo Accueil">
 | 
			
		||||
        </div>
 | 
			
		||||
 | 
			
		||||
        <div class="categories">
 | 
			
		||||
            <a href="./rh.html">Accueil</a>
 | 
			
		||||
            <a href="./gestion_personnel.html">Gestion du personnel</a>
 | 
			
		||||
            <a href="./candidature.html">Candidatures</a>
 | 
			
		||||
            <a href="./mes-informations.html">Mes informations et documents</a>
 | 
			
		||||
        </div>
 | 
			
		||||
 | 
			
		||||
        <div class="user-section">
 | 
			
		||||
            <div class="user-name">Alice BERGER</div>
 | 
			
		||||
            <div class="logout-container">
 | 
			
		||||
                <a href="../../index.html" title="Se déconnecter">
 | 
			
		||||
                    <img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion">
 | 
			
		||||
                </a>
 | 
			
		||||
            </div>
 | 
			
		||||
        </div>
 | 
			
		||||
    </div>
 | 
			
		||||
 | 
			
		||||
    <main>
 | 
			
		||||
        <section>
 | 
			
		||||
            <h2>Gestion du personnel</h2>
 | 
			
		||||
            <!-- Barre de recherche -->
 | 
			
		||||
            <div class="search-container">
 | 
			
		||||
                <input type="text" id="search-input" placeholder="Rechercher par nom" oninput="filterTable()">
 | 
			
		||||
            </div>
 | 
			
		||||
 | 
			
		||||
            <!-- Conteneur de tri -->
 | 
			
		||||
            <div class="sort-container">
 | 
			
		||||
                <button class="sort-button" onclick="sortTable(0)">Trier par Nom</button>
 | 
			
		||||
                <button class="sort-button" onclick="sortTable(1)">Trier par Prénom</button>
 | 
			
		||||
                <button class="sort-button" onclick="sortTable(2)">Trier par Statut</button>
 | 
			
		||||
                <button class="sort-button" onclick="sortTable(3)">Trier par Dernière Intervention</button>
 | 
			
		||||
            </div>
 | 
			
		||||
 | 
			
		||||
            <table>
 | 
			
		||||
                <thead>
 | 
			
		||||
                    <tr>
 | 
			
		||||
                        <th>Nom</th>
 | 
			
		||||
                        <th>Prénom</th>
 | 
			
		||||
                        <th>Statut</th>
 | 
			
		||||
                        <th>Dernière Intervention</th>
 | 
			
		||||
                        <th>Actions</th>
 | 
			
		||||
                    </tr>
 | 
			
		||||
                </thead>
 | 
			
		||||
                <tbody id="personnel-table">
 | 
			
		||||
                    <tr>
 | 
			
		||||
                        <td>Dupont</td>
 | 
			
		||||
                        <td>Jean</td>
 | 
			
		||||
                        <td>Professeur Vacataire</td>
 | 
			
		||||
                        <td>01/10/2024</td>
 | 
			
		||||
                        <td>
 | 
			
		||||
                            <button class="modifierBouton" onclick="openModal('Dupont', 'Jean', 'Professeur Vacataire', '01/10/2024')">Modifier</button>
 | 
			
		||||
                            <button class="supprimerBouton" onclick="supprimerPersonnel('Dupont', 'Jean')">Supprimer</button>
 | 
			
		||||
                            <button class="voirDetailBouton" onclick="voirDetails('Dupont', 'Jean', 'Professeur Vacataire', '01/10/2024')">Voir Détails</button>
 | 
			
		||||
                        </td>
 | 
			
		||||
                    </tr>
 | 
			
		||||
                    <tr>
 | 
			
		||||
                        <td>Martin</td>
 | 
			
		||||
                        <td>Sophie</td>
 | 
			
		||||
                        <td>Professeur Vacataire</td>
 | 
			
		||||
                        <td>15/09/2024</td>
 | 
			
		||||
                        <td>
 | 
			
		||||
                            <button class="modifierBouton" onclick="openModal('Martin', 'Sophie', 'Professeur Vacataire', '15/09/2024')">Modifier</button>
 | 
			
		||||
                            <button class="supprimerBouton" onclick="supprimerPersonnel('Martin', 'Sophie')">Supprimer</button>
 | 
			
		||||
                            <button class="voirDetailBouton" onclick="voirDetails('Martin', 'Sophie', 'Professeur Vacataire', '15/09/2024')">Voir Détails</button>
 | 
			
		||||
                        </td>
 | 
			
		||||
                    </tr>
 | 
			
		||||
                    <!-- Ajoutez d'autres lignes ici -->
 | 
			
		||||
                </tbody>
 | 
			
		||||
            </table>
 | 
			
		||||
            <button onclick="ajouterPersonnel()">Ajouter un Personnel</button>
 | 
			
		||||
        </section>
 | 
			
		||||
    </main>
 | 
			
		||||
 | 
			
		||||
    <!-- Modal pour modifier le personnel -->
 | 
			
		||||
    <div id="myModal" class="modal">
 | 
			
		||||
        <div class="modal-content">
 | 
			
		||||
            <span class="close" onclick="closeModal()">×</span>
 | 
			
		||||
            <h2>Modifier le Personnel</h2>
 | 
			
		||||
            <form id="edit-form">
 | 
			
		||||
                <label for="nom">Nom:</label>
 | 
			
		||||
                <input type="text" id="nom" required><br>
 | 
			
		||||
                <label for="prenom">Prénom:</label>
 | 
			
		||||
                <input type="text" id="prenom" required><br>
 | 
			
		||||
                <label for="statut">Statut:</label>
 | 
			
		||||
                <input type="text" id="statut" required><br>
 | 
			
		||||
                <label for="intervention">Dernière Intervention:</label>
 | 
			
		||||
                <input type="date" id="intervention" required><br>
 | 
			
		||||
                <button type="submit">Enregistrer</button>
 | 
			
		||||
            </form>
 | 
			
		||||
        </div>
 | 
			
		||||
    </div>
 | 
			
		||||
 | 
			
		||||
    <!-- Modal pour voir les détails du personnel -->
 | 
			
		||||
    <div id="detailModal" class="modal">
 | 
			
		||||
        <div class="modal-content">
 | 
			
		||||
            <span class="close" onclick="closeDetailModal()">×</span>
 | 
			
		||||
            <h2>Détails de Personnel</h2>
 | 
			
		||||
            <p id="detail-info"></p>
 | 
			
		||||
            <h3>Heures à Payer</h3>
 | 
			
		||||
            <p id="heures-a-payer"></p>
 | 
			
		||||
            <h3>Demandes de Corrections d'Heures</h3>
 | 
			
		||||
            <ul id="corrections-list"></ul>
 | 
			
		||||
            <h3>Documents</h3>
 | 
			
		||||
            <ul id="documents-list"></ul>
 | 
			
		||||
            <h3>Statut</h3>
 | 
			
		||||
            <p id="statut-detail"></p>
 | 
			
		||||
            <h3>Historique des Heures</h3>
 | 
			
		||||
            <ul id="historique-list"></ul>
 | 
			
		||||
            <h3>Coordonnées</h3>
 | 
			
		||||
            <p id="coordonnees"></p>
 | 
			
		||||
            <button onclick="lancerProcedurePaiement()">Lancer la Procédure de Paiement</button>
 | 
			
		||||
            <button onclick="modifierHeures()">Modifier les Heures</button>
 | 
			
		||||
           
 | 
			
		||||
        </div>
 | 
			
		||||
    </div>
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
<div class="footer">
 | 
			
		||||
    <p>© 2024 IUT de Fontainebleau. Tous droits réservés | 
 | 
			
		||||
        <a href="../mentions_legales.html">Mentions légales</a>
 | 
			
		||||
    </p>
 | 
			
		||||
</div>
 | 
			
		||||
 | 
			
		||||
    <script>
 | 
			
		||||
        let sortOrder = [true, true, true, true]; // Array to keep track of sort order for each column
 | 
			
		||||
 | 
			
		||||
        function sortTable(columnIndex) {
 | 
			
		||||
            const table = document.getElementById("personnel-table");
 | 
			
		||||
            const rows = Array.from(table.rows);
 | 
			
		||||
            const direction = sortOrder[columnIndex] ? 1 : -1; // Determine sorting direction
 | 
			
		||||
            sortOrder[columnIndex] = !sortOrder[columnIndex]; // Toggle sort order for the next click
 | 
			
		||||
 | 
			
		||||
            rows.sort((a, b) => {
 | 
			
		||||
                const aText = a.cells[columnIndex].textContent.trim();
 | 
			
		||||
                const bText = b.cells[columnIndex].textContent.trim();
 | 
			
		||||
 | 
			
		||||
                if (columnIndex === 3) { // Date column
 | 
			
		||||
                    return direction * (new Date(aText) - new Date(bText));
 | 
			
		||||
                } else {
 | 
			
		||||
                    return direction * aText.localeCompare(bText);
 | 
			
		||||
                }
 | 
			
		||||
            });
 | 
			
		||||
 | 
			
		||||
            // Reattach sorted rows to the table
 | 
			
		||||
            rows.forEach(row => table.appendChild(row));
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        function filterTable() {
 | 
			
		||||
            const input = document.getElementById("search-input").value.toLowerCase();
 | 
			
		||||
            const table = document.getElementById("personnel-table");
 | 
			
		||||
            const rows = Array.from(table.rows);
 | 
			
		||||
 | 
			
		||||
            rows.forEach(row => {
 | 
			
		||||
                const cells = Array.from(row.cells);
 | 
			
		||||
                const match = cells[0].textContent.toLowerCase().includes(input) || 
 | 
			
		||||
                              cells[1].textContent.toLowerCase().includes(input);
 | 
			
		||||
                row.style.display = match ? "" : "none";
 | 
			
		||||
            });
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        function openModal(nom, prenom, statut, intervention) {
 | 
			
		||||
            document.getElementById("nom").value = nom;
 | 
			
		||||
            document.getElementById("prenom").value = prenom;
 | 
			
		||||
            document.getElementById("statut").value = statut;
 | 
			
		||||
            document.getElementById("intervention").value = intervention;
 | 
			
		||||
            document.getElementById("myModal").style.display = "block";
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        function closeModal() {
 | 
			
		||||
            document.getElementById("myModal").style.display = "none";
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        function supprimerPersonnel(nom, prenom) {
 | 
			
		||||
            if (confirm(`Êtes-vous sûr de vouloir supprimer ${prenom} ${nom} ?`)) {
 | 
			
		||||
                const row = event.target.closest("tr");
 | 
			
		||||
                row.parentNode.removeChild(row);
 | 
			
		||||
            }
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        function voirDetails(nom, prenom, statut, intervention) {
 | 
			
		||||
            // Remplir les détails du personnel ici
 | 
			
		||||
            document.getElementById("detail-info").textContent = `Nom: ${nom}, Prénom: ${prenom}, Statut: ${statut}, Dernière Intervention: ${intervention}`;
 | 
			
		||||
            document.getElementById("heures-a-payer").textContent = "10 heures"; // Remplacer par les vraies données
 | 
			
		||||
            document.getElementById("corrections-list").innerHTML = "<li><a href=\"#\">Pas assez d'heures</a> : 19/10/2024</li>"; // Remplacer par les vraies données
 | 
			
		||||
            document.getElementById("documents-list").innerHTML = "<li><a href=\"#\">Contrat de travail</a></li><li><a href=\"#\">CV</a></li><li><a href=\"#\">Diplôme</a></li><li><a href=\"#\">Justificatif d'expérience</a></li>"; // Remplacer par les vraies données
 | 
			
		||||
            document.getElementById("statut-detail").textContent = statut;
 | 
			
		||||
            document.getElementById("historique-list").innerHTML = "<li>CM - SCR - 19/10/2024 - 12h30</li><li>TP - DEV - 19/10/2024 - 15h30</li>"; // Remplacer par les vraies données
 | 
			
		||||
            document.getElementById("coordonnees").textContent = `${prenom}.${nom}@u-pec.fr`;
 | 
			
		||||
            document.getElementById("detailModal").style.display = "block";
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        function closeDetailModal() {
 | 
			
		||||
            document.getElementById("detailModal").style.display = "none";
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        function ajouterPersonnel() {
 | 
			
		||||
            // Logic to add personnel goes here
 | 
			
		||||
            alert("Fonctionnalité à venir !");
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        function lancerProcedurePaiement() {
 | 
			
		||||
            alert("Lancement de la procédure de paiement...");
 | 
			
		||||
            // Logic to launch payment process goes here
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        function modifierHeures() {
 | 
			
		||||
            alert("Modification des heures...");
 | 
			
		||||
            // Logic to modify hours goes here
 | 
			
		||||
        }
 | 
			
		||||
    </script>
 | 
			
		||||
</body>
 | 
			
		||||
 | 
			
		||||
</html>
 | 
			
		||||
							
								
								
									
										518
									
								
								MaquetteWEB/html/RH/mes-informations.html
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										518
									
								
								MaquetteWEB/html/RH/mes-informations.html
									
									
									
									
									
										Normal file
									
								
							
										
											
												File diff suppressed because it is too large
												Load Diff
											
										
									
								
							
							
								
								
									
										130
									
								
								MaquetteWEB/html/RH/rh.html
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										130
									
								
								MaquetteWEB/html/RH/rh.html
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,130 @@
 | 
			
		||||
<!DOCTYPE html>
 | 
			
		||||
<html lang="fr">
 | 
			
		||||
<head>
 | 
			
		||||
    <meta charset="UTF-8">
 | 
			
		||||
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 | 
			
		||||
    <title>Dashboard Vacataire</title>
 | 
			
		||||
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
 | 
			
		||||
    <link rel="stylesheet" href="../../css/VACATAIRE/vacataire.css">
 | 
			
		||||
    <style>
 | 
			
		||||
        .header {
 | 
			
		||||
            background-color: #0f431f;
 | 
			
		||||
            color: white;
 | 
			
		||||
            padding: 10px 0;
 | 
			
		||||
            text-align: center;
 | 
			
		||||
        }
 | 
			
		||||
        .section-header {
 | 
			
		||||
            background-color: #f8f8f8;
 | 
			
		||||
            padding: 10px;
 | 
			
		||||
            border-left: 5px solid #0f431f;
 | 
			
		||||
            margin-bottom: 20px;
 | 
			
		||||
        }
 | 
			
		||||
        .footer {
 | 
			
		||||
            text-align: center;
 | 
			
		||||
            padding: 10px 0;
 | 
			
		||||
            margin-top: 20px;
 | 
			
		||||
            background-color: #0f431f;
 | 
			
		||||
            color: white;
 | 
			
		||||
        }
 | 
			
		||||
        .btn {
 | 
			
		||||
            padding: 10px 15px;
 | 
			
		||||
            background-color: #0f431f;
 | 
			
		||||
            color: white;
 | 
			
		||||
            text-decoration: none;
 | 
			
		||||
            border-radius: 5px;
 | 
			
		||||
            display: inline-block;
 | 
			
		||||
        }
 | 
			
		||||
        .btn:hover {
 | 
			
		||||
            background-color: #0b3116;
 | 
			
		||||
        }
 | 
			
		||||
        .summary, .upcoming-sessions, .important-documents, .feedback, .events {
 | 
			
		||||
            margin-bottom: 20px;
 | 
			
		||||
            padding: 15px;
 | 
			
		||||
            border: 1px solid #ccc;
 | 
			
		||||
        }
 | 
			
		||||
    </style>
 | 
			
		||||
</head>
 | 
			
		||||
<body>
 | 
			
		||||
 | 
			
		||||
    <div class="header">
 | 
			
		||||
        <div class="logo-container">
 | 
			
		||||
            <img src="../../media/img/logoWhite.png" alt="Logo Accueil">
 | 
			
		||||
        </div>
 | 
			
		||||
 | 
			
		||||
        <div class="categories">
 | 
			
		||||
            <a href="./rh.html">Accueil</a>
 | 
			
		||||
            <a href="./gestion_personnel.html">Gestion du personnel</a>
 | 
			
		||||
            <a href="./candidature.html">Candidatures</a>
 | 
			
		||||
            <a href="./mes-informations.html">Mes informations et documents</a>
 | 
			
		||||
        </div>
 | 
			
		||||
 | 
			
		||||
        <div class="user-section">
 | 
			
		||||
            <div class="user-name">Alice BERGER</div>
 | 
			
		||||
            <div class="logout-container">
 | 
			
		||||
                <a href="../../index.html" title="Se déconnecter">
 | 
			
		||||
                    <img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion">
 | 
			
		||||
                </a>
 | 
			
		||||
            </div>
 | 
			
		||||
        </div>
 | 
			
		||||
    </div>
 | 
			
		||||
 | 
			
		||||
    <div class="dashboard-container">
 | 
			
		||||
        <!-- Alertes et Notifications -->
 | 
			
		||||
        <div class="section-header" id="notifications-section">
 | 
			
		||||
            <h2>Alertes et Notifications</h2>
 | 
			
		||||
        </div>
 | 
			
		||||
        <div id="notifications-container">
 | 
			
		||||
            <!-- Notifications -->
 | 
			
		||||
            <div class="alert">
 | 
			
		||||
                <span class="close" onclick="this.parentElement.style.display='none';">×</span>
 | 
			
		||||
                <p><strong>Validation de Candidature :</strong> Une nouvelle candidature a été soumise pour l'offre de vacation n°383. Veuillez la consulter et valider dans les plus brefs délais dans (la candidature expire dans 26 jours) : <a href="./candidature.html">Candidatures</a>.</p>
 | 
			
		||||
            </div>
 | 
			
		||||
            <div class="success">
 | 
			
		||||
                <span class="close" onclick="this.parentElement.style.display='none';">×</span>
 | 
			
		||||
                <p><strong>Demande de paiement :</strong> Le service financier a procédé au paiement de Jean DUPONT. Vous pouvez consulter les détails : <a href="gestion_personnel.html">Gestion du personnel</a>.</p>
 | 
			
		||||
            </div>
 | 
			
		||||
        </div>
 | 
			
		||||
 | 
			
		||||
        <!-- Résumé des Heures -->
 | 
			
		||||
        <div class="section-header">
 | 
			
		||||
            <h2>Résumé des Heures</h2>
 | 
			
		||||
        </div>
 | 
			
		||||
        <div class="summary">
 | 
			
		||||
            <p><strong>Heures Travaillées :</strong> 120 heures</p>
 | 
			
		||||
            <p><strong>Heures à Payer :</strong> 30 heures</p>
 | 
			
		||||
            <p><a href="./gestion_personnel.html" class="btn">Voir Détails</a></p>
 | 
			
		||||
        </div>
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
        <!-- Événements à Venir -->
 | 
			
		||||
        <div class="section-header">
 | 
			
		||||
            <h2>Événements à Venir</h2>
 | 
			
		||||
        </div>
 | 
			
		||||
        <div class="events">
 | 
			
		||||
            <ul>
 | 
			
		||||
                <li>Réunion des RH : 30 Octobre 2024</li>
 | 
			
		||||
                <li>Formation sur l'Utilisation des Outils Numériques : 5 Novembre 2024</li>
 | 
			
		||||
            </ul>
 | 
			
		||||
        </div>
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
        <!-- Script pour gérer l'affichage des notifications -->
 | 
			
		||||
        <script>
 | 
			
		||||
            const notificationsContainer = document.getElementById('notifications-container');
 | 
			
		||||
            const notificationsSection = document.getElementById('notifications-section');
 | 
			
		||||
 | 
			
		||||
            // Vérifiez si le conteneur des notifications est vide
 | 
			
		||||
            if (notificationsContainer.childElementCount === 0) {
 | 
			
		||||
                notificationsSection.style.display = 'none'; // Masquer la section si aucune notification
 | 
			
		||||
            }
 | 
			
		||||
        </script>
 | 
			
		||||
    </div>
 | 
			
		||||
 | 
			
		||||
    <div class="footer">
 | 
			
		||||
        <p>© 2024 IUT de Fontainebleau. Tous droits réservés | 
 | 
			
		||||
            <a href="../mentions_legales.html">Mentions légales</a>
 | 
			
		||||
        </p>
 | 
			
		||||
    </div>
 | 
			
		||||
 | 
			
		||||
</body>
 | 
			
		||||
</html>
 | 
			
		||||
		Reference in New Issue
	
	Block a user