W3 CSS
This commit is contained in:
@@ -6,187 +6,140 @@
|
||||
<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">
|
||||
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.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">
|
||||
<body class="w3-light-grey">
|
||||
|
||||
<div class="header w3-bar w3-card-4 w3-dark-blue">
|
||||
<!-- Logo pour retourner à l'accueil -->
|
||||
<div class="logo-container w3-bar-item">
|
||||
<img src="../../media/img/logoWhite.png" alt="Logo Accueil" class="w3-image" style="width:200px; height:50px;">
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<!-- Bouton burger pour petit écran -->
|
||||
<a href="javascript:void(0)" class="w3-bar-item w3-button w3-hide-large w3-right w3-padding-16" onclick="toggleMenu()">☰</a>
|
||||
|
||||
<div class="user-section">
|
||||
<div class="user-name">Alice BERGER</div>
|
||||
<div class="logout-container">
|
||||
<!-- Catégories dans le header -->
|
||||
<div id="menu" class="categories w3-hide-small w3-bar-item">
|
||||
<a href="./rh.html" class="w3-bar-item w3-button">Accueil</a>
|
||||
<a href="./gestion_personnel.html" class="w3-bar-item w3-button">Gestion du personnel</a>
|
||||
<a href="./gestion-heures.html" class="w3-bar-item w3-button">Heures</a>
|
||||
<a href="./candidature.html" class="w3-bar-item w3-button">Candidatures</a>
|
||||
<a href="./mes-informations.html" class="w3-bar-item w3-button">Mes informations et documents</a>
|
||||
</div>
|
||||
|
||||
<!-- Section utilisateur avec déconnexion -->
|
||||
<div class="user-section w3-bar-item w3-right">
|
||||
<div class="user-name w3-padding-16">
|
||||
Alice BERGER
|
||||
</div>
|
||||
<div class="logout-container w3-bar-item">
|
||||
<a href="../../index.html" title="Se déconnecter">
|
||||
<img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion">
|
||||
<img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion" style="width:25px; height:25px;">
|
||||
</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 class="w3-container">
|
||||
<div class="w3-row">
|
||||
<div class="w3-col s10">
|
||||
<h2>Candidatures en Attente de Validation</h2>
|
||||
</div>
|
||||
</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>
|
||||
<!-- Barre de recherche -->
|
||||
<div class="w3-margin-bottom">
|
||||
<input type="text" id="search-input" placeholder="Rechercher par nom" oninput="filterTable()" class="w3-input w3-border">
|
||||
</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>
|
||||
<!-- Conteneur de tri -->
|
||||
<div class="w3-margin-bottom">
|
||||
<button class="w3-button w3-green" onclick="sortTable(0)">Trier par Nom</button>
|
||||
<button class="w3-button w3-green" onclick="sortTable(1)">Trier par Prénom</button>
|
||||
<button class="w3-button w3-green" onclick="sortTable(2)">Trier par Formation</button>
|
||||
<button class="w3-button w3-green" onclick="openVacationModal()">Ajouter une Offre de Vacation</button>
|
||||
</div>
|
||||
|
||||
<table class="w3-table w3-bordered w3-white">
|
||||
<thead>
|
||||
<tr class="w3-green">
|
||||
<th>Nom</th>
|
||||
<th>Prénom</th>
|
||||
<th>Formation</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="candidatures-table">
|
||||
<tr>
|
||||
<td>Mike</td>
|
||||
<td>Michel</td>
|
||||
<td>Informatique - BUT1</td>
|
||||
<td>
|
||||
<button class="w3-button w3-green" onclick="consulterDossier('Mike', 'Michel')">Consulter Dossier</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Williams</td>
|
||||
<td>Mathématiques - BUT GEA</td>
|
||||
<td>
|
||||
<button class="w3-button w3-green" onclick="consulterDossier('John', 'Williams')">Consulter Dossier</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Ajoutez d'autres lignes ici -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- 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 id="dossierModal" class="w3-modal">
|
||||
<div class="w3-modal-content">
|
||||
<span class="w3-button w3-display-topright" onclick="closeDossierModal()">×</span>
|
||||
<div class="w3-container">
|
||||
<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="w3-input w3-border" id="commentaire" rows="4" placeholder="Ajouter un commentaire sur ce dossier..."></textarea><br>
|
||||
<button class="w3-button w3-lime" style="margin-bottom: 10px;" onclick="ajouterCommentaire()">Ajouter Commentaire</button>
|
||||
</div>
|
||||
<div>
|
||||
<button class="w3-button w3-green" onclick="validerDossier()">Valider Dossier</button>
|
||||
<button class="w3-button w3-red" onclick="refuserDossier()">Refuser Dossier</button>
|
||||
</div>
|
||||
</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 id="vacationModal" class="w3-modal">
|
||||
<div class="w3-modal-content">
|
||||
<span class="w3-button w3-display-topright" onclick="closeVacationModal()">×</span>
|
||||
<div class="w3-container">
|
||||
<h2>Ajouter une Offre de Vacation</h2>
|
||||
<form id="vacation-form">
|
||||
<label for="diplome">Diplôme requis :</label>
|
||||
<input type="text" id="diplome" name="diplome" required class="w3-input w3-border">
|
||||
|
||||
<label for="description">Description :</label>
|
||||
<textarea id="description" name="description" rows="4" required class="w3-input w3-border"></textarea>
|
||||
|
||||
<label for="duree">Durée (en jours) :</label>
|
||||
<input type="number" id="duree" name="duree" min="1" required class="w3-input w3-border">
|
||||
|
||||
<button type="submit" class="w3-button w3-green">Soumettre l'Offre</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="footer">
|
||||
<div class="w3-container w3-center w3-padding-16 w3-text-white" style="background-color: #0f431f;">
|
||||
<p>© 2024 IUT de Fontainebleau. Tous droits réservés |
|
||||
<a href="../mentions_legales.html">Mentions légales</a>
|
||||
<a href="../mentions_legales.html" class="w3-text-white">Mentions légales</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -230,32 +183,29 @@
|
||||
<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
|
||||
<li><a href="">Justificatif de domicile.pdf</a></li>
|
||||
`;
|
||||
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
|
||||
document.getElementById("commentaire").value = ""; // Réinitialiser le champ
|
||||
}
|
||||
|
||||
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() {
|
||||
@@ -264,16 +214,25 @@
|
||||
|
||||
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.
|
||||
});
|
||||
document.getElementById("vacation-form").onsubmit = function (event) {
|
||||
event.preventDefault(); // Empêche le rechargement de la page
|
||||
alert("Offre de vacation ajoutée !");
|
||||
closeVacationModal();
|
||||
};
|
||||
|
||||
function toggleMenu() {
|
||||
var menu = document.getElementById('menu');
|
||||
var nom = document.getElementById('user-section');
|
||||
if (menu.classList.contains('w3-hide-small')) {
|
||||
menu.classList.remove('w3-hide-small');
|
||||
menu.classList.remove('user-section');
|
||||
} else {
|
||||
menu.classList.add('w3-hide-small');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user