Ajouts des dernières modifs

This commit is contained in:
Moncef STITI 2024-10-17 15:45:20 +02:00
parent cad70b9d8e
commit 6e3f952f55
6 changed files with 769 additions and 23 deletions

@ -86,15 +86,11 @@
<!-- Popup pour pièces justificatives -->
<div id="justificatifForm" class="justificatif-form popup">
<h3>Téléchargez vos pièces justificatives</h3>
<p>Veuillez télécharger le document suivant :</p>
<ul>
<li>Contrat de travail actuel</li>
</ul>
<input type="file" id="justificatif" name="justificatif" required>
<button id="submitJustificatif" onclick="submitJustificatif()">Soumettre</button>
<button onclick="closeJustificatifPopup()">Annuler</button>
<h3>Confirmation de soumission</h3>
<p>Votre demande a bien été prise en compte !</p>
<button onclick="closeJustificatifPopup()">Fermer</button>
</div>
<div class="section-header">
<h2>Prochaines heures</h2>

@ -79,6 +79,7 @@
<div class="categories">
<a href="./rh.html">Accueil</a>
<a href="./gestion_personnel.html">Gestion du personnel</a>
<a href="./gestion-heures.html">Heures</a>
<a href="./candidature.html">Candidatures</a>
<a href="./mes-informations.html">Mes informations et documents</a>
</div>

File diff suppressed because it is too large Load Diff

@ -21,9 +21,27 @@
margin-right: 5px;
}
.modal {
display: none; /* Caché par défaut */
position: fixed; /* Positionnement fixe pour rester visible lors du défilement */
z-index: 1000; /* Assurez-vous que le modal est au-dessus d'autres éléments */
left: 0;
top: 0;
width: 100%; /* Pleine largeur */
height: 100%; /* Pleine hauteur */
background-color: rgba(0, 0, 0, 0.5); /* Fond semi-transparent */
}
/* Contenu du modal */
.modal-content {
max-height: 80vh;
overflow-y: auto;
background-color: white;
margin: 10% auto; /* Centrer verticalement */
padding: 20px;
border-radius: 8px;
width: 80%; /* Largeur du modal */
max-width: 600px; /* Largeur maximale */
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3); /* Ombre pour un effet flottant */
font-family: Arial, sans-serif;
}
.supprimerBouton{
@ -37,6 +55,17 @@
.modifierBouton{
background-color: #28A745;
}
ul li a {
text-decoration: none; /* Supprime le soulignement des liens */
color: #007BFF; /* Couleur de lien bleue */
font-weight: bold; /* Met le lien en gras */
}
ul li a:hover {
color: #0056b3; /* Couleur plus foncée au survol */
text-decoration: underline; /* Ajoute le soulignement au survol */
}
</style>
</head>
@ -49,6 +78,7 @@
<div class="categories">
<a href="./rh.html">Accueil</a>
<a href="./gestion_personnel.html">Gestion du personnel</a>
<a href="./gestion-heures.html">Heures</a>
<a href="./candidature.html">Candidatures</a>
<a href="./mes-informations.html">Mes informations et documents</a>
</div>
@ -85,6 +115,7 @@
<th>Nom</th>
<th>Prénom</th>
<th>Statut</th>
<th>Statut du paiement</th>
<th>Dernière Intervention</th>
<th>Actions</th>
</tr>
@ -94,6 +125,7 @@
<td>Dupont</td>
<td>Jean</td>
<td>Professeur Vacataire</td>
<td>En attente</td>
<td>01/10/2024</td>
<td>
<button class="modifierBouton" onclick="openModal('Dupont', 'Jean', 'Professeur Vacataire', '01/10/2024')">Modifier</button>
@ -105,6 +137,7 @@
<td>Martin</td>
<td>Sophie</td>
<td>Professeur Vacataire</td>
<td>En attente</td>
<td>15/09/2024</td>
<td>
<button class="modifierBouton" onclick="openModal('Martin', 'Sophie', 'Professeur Vacataire', '15/09/2024')">Modifier</button>
@ -144,6 +177,7 @@
<span class="close" onclick="closeDetailModal()">&times;</span>
<h2>Détails de Personnel</h2>
<p id="detail-info"></p>
<p id="coordonnees"></p>
<h3>Heures à Payer</h3>
<p id="heures-a-payer"></p>
<h3>Demandes de Corrections d'Heures</h3>
@ -152,12 +186,7 @@
<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>
@ -207,13 +236,20 @@
}
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";
// Mettre à jour le contenu du paragraphe "detail-info" avec des sauts de ligne
const detailInfo = `
<strong>Nom:</strong> ${nom}<br>
<strong>Prénom:</strong> ${prenom}<br>
<strong>Statut:</strong> ${statut}<br>
<strong>Dernière Intervention:</strong> ${intervention}
`;
document.getElementById("detail-info").innerHTML = detailInfo;
// Afficher le modal
document.getElementById("detailModal").style.display = "block";
}
function closeModal() {
document.getElementById("myModal").style.display = "none";
}
@ -225,18 +261,43 @@
}
}
function openModificationModal(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 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("corrections-list").innerHTML = "<li><a href=\"./gestion-heures.html\">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("coordonnees").textContent = `E-mail : ${prenom}.${nom}@u-pec.fr`;
document.getElementById("detailModal").style.display = "block";
}
function voirDetails(nom, prenom, statut, intervention) {
const detailInfo = `
<strong>Nom:</strong> ${nom}<br>
<strong>Prénom:</strong> ${prenom}<br>
<strong>Statut:</strong> ${statut}<br>
<strong>Dernière Intervention:</strong> ${intervention}
`;
document.getElementById("detail-info").innerHTML = detailInfo;
// Afficher le modal des détails
document.getElementById("detailModal").style.display = "block";
document.getElementById("heures-a-payer").textContent = "10 heures"; // Remplacer par les vraies données
document.getElementById("corrections-list").innerHTML = "<li><a href=\"./gestion-heures.html\">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("coordonnees").innerHTML = `<strong>E-mail :</strong> : ${prenom}.${nom}@u-pec.fr`;
}
function closeDetailModal() {
document.getElementById("detailModal").style.display = "none";
}

@ -259,6 +259,7 @@
<div class="categories">
<a href="./rh.html">Accueil</a>
<a href="./gestion_personnel.html">Gestion du personnel</a>
<a href="./gestion-heures.html">Heures</a>
<a href="./candidature.html">Candidatures</a>
<a href="./mes-informations.html">Mes informations et documents</a>
</div>

@ -54,6 +54,7 @@
<div class="categories">
<a href="./rh.html">Accueil</a>
<a href="./gestion_personnel.html">Gestion du personnel</a>
<a href="./gestion-heures.html">Heures</a>
<a href="./candidature.html">Candidatures</a>
<a href="./mes-informations.html">Mes informations et documents</a>
</div>