242 lines
12 KiB
HTML
242 lines
12 KiB
HTML
|
<!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="https://www.w3schools.com/w3css/4/w3.css">
|
||
|
|
<link rel="stylesheet" href="../../css/CHEF/chef_departement.css">
|
||
|
|
<link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
|
||
|
|
<title>Gestion des offres de vacation</title>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<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:150px; height:40px;">
|
||
|
|
</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>
|
||
|
|
|
||
|
|
<!-- Catégories dans le header -->
|
||
|
|
<div id="menu" class="categories w3-hide-small w3-hide-medium w3-bar-item">
|
||
|
|
<a href="./chef_departement.html" class="w3-bar-item w3-button">Accueil</a>
|
||
|
|
<a href="./gestion-heures-professeur.html" class="w3-bar-item w3-button">Professeurs</a>
|
||
|
|
<a href="./vacataire.html" class="w3-bar-item w3-button">Vacation</a>
|
||
|
|
<a href="./gestion-heures-formation.html" class="w3-bar-item w3-button">Formations</a>
|
||
|
|
<a href="./paiement.html" class="w3-bar-item w3-button">Paiements</a>
|
||
|
|
<a href="./budget.html" class="w3-bar-item w3-button">Budget</a>
|
||
|
|
<a href="./mes-informations.html" class="w3-bar-item w3-button">Mes informations</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Section utilisateur avec déconnexion -->
|
||
|
|
<div class="user-section w3-right w3-hide-small w3-hide-medium">
|
||
|
|
<div class="user-name">
|
||
|
|
Florent MADELAINE
|
||
|
|
</div>
|
||
|
|
<div class="logout-container w3-bar-item">
|
||
|
|
<a href="./notifications.html" title="Notifications">
|
||
|
|
<img src="../../media/img/notifs.png" alt="Logo notification" style="width:24px; height:24px;">
|
||
|
|
</a>
|
||
|
|
<a href="./settings.html" title="Paramètres">
|
||
|
|
<img src="../../media/img/settings.png" alt="Logo paramètres" style="width:24px; height:24px;">
|
||
|
|
</a>
|
||
|
|
<a href="../../index.html" title="Se déconnecter">
|
||
|
|
<img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion" style="width:24px; height:24px;">
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Menu mobile caché au départ -->
|
||
|
|
<div id="mobileMenu" class="w3-bar-block w3-hide w3-hide-large w3-dark-blue">
|
||
|
|
<a href="./chef_departement.html" class="w3-bar-item w3-button">Accueil</a>
|
||
|
|
<a href="./gestion-heures-professeur.html" class="w3-bar-item w3-button">Professeurs</a>
|
||
|
|
<a href="./vacataire.html" class="w3-bar-item w3-button">Vacation</a>
|
||
|
|
<a href="./gestion-heures-formation.html" class="w3-bar-item w3-button">Formations</a>
|
||
|
|
<a href="./paiement.html" class="w3-bar-item w3-button">Paiements</a>
|
||
|
|
<a href="./budget.html" class="w3-bar-item w3-button">Budget</a>
|
||
|
|
<a href="./mes-informations.html" class="w3-bar-item w3-button">Mes informations</a>
|
||
|
|
|
||
|
|
<!-- Section utilisateur pour mobile -->
|
||
|
|
<div class="w3-bar-item w3-border-top w3-margin-top">
|
||
|
|
<div class="user-name">Florent MADELAINE</div>
|
||
|
|
<a href="./notifications.html" title="Notifications">
|
||
|
|
<img src="../../media/img/notifs.png" alt="Logo notification" style="width:24px; height:24px;">
|
||
|
|
</a>
|
||
|
|
<a href="./settings.html" title="Paramètres">
|
||
|
|
<img src="../../media/img/settings.png" alt="Logo paramètres" style="width:24px; height:24px;">
|
||
|
|
</a>
|
||
|
|
<a href="../../index.html" title="Se déconnecter">
|
||
|
|
<img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion" style="width:24px; height:24px;">
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="w3-container">
|
||
|
|
<div class="w3-row">
|
||
|
|
<div class="w3-col l10 m12 s12"> <!-- Pour large, medium et small devices -->
|
||
|
|
<h2>Gestion des offres de vacation</h2>
|
||
|
|
</div>
|
||
|
|
</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>
|
||
|
|
<!-- Conteneur de tri -->
|
||
|
|
<div class="w3-margin-bottom w3-row">
|
||
|
|
<!-- Boutons empilés sur les petits écrans -->
|
||
|
|
<div class="w3-col l2 m6 s12 w3-margin-bottom" style="padding-right: 8px;">
|
||
|
|
<button class="w3-button w3-green w3-block w3-small" style="padding: 5px;" onclick="sortTable(0)">Trier par date de publication</button>
|
||
|
|
</div>
|
||
|
|
<div class="w3-col l2 m6 s12 w3-margin-bottom">
|
||
|
|
<button class="w3-button w3-blue w3-block w3-small" style="padding: 5px;" onclick="openVacationModal()">Ajouter une Offre de Vacation</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<!-- Tableau responsive -->
|
||
|
|
<div class="w3-responsive w3-margin-bottom">
|
||
|
|
<table class="w3-table w3-bordered w3-white">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>Formation</th>
|
||
|
|
<th>Durée</th>
|
||
|
|
<th>Date de publication</th>
|
||
|
|
<th>Action</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody id="candidatures-table">
|
||
|
|
<tr>
|
||
|
|
<td>Informatique - BUT1</td>
|
||
|
|
<td>1 semestre (120h)</td>
|
||
|
|
<td>23/02/2023</td>
|
||
|
|
<td>
|
||
|
|
<button class="w3-button w3-green" onclick="editOffer(this)">Modifier</button>
|
||
|
|
<button class="w3-button w3-red" onclick="deleteOffer(this)">Supprimer</button>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Mathématiques - BUT GEA</td>
|
||
|
|
<td>2 semestre (180h)</td>
|
||
|
|
<td>12/02/2023</td>
|
||
|
|
<td>
|
||
|
|
<button class="w3-button w3-green" onclick="editOffer(this)">Modifier</button>
|
||
|
|
<button class="w3-button w3-red" onclick="deleteOffer(this)">Supprimer</button>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<!-- Modal pour ajouter une offre de vacation -->
|
||
|
|
<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">Formation :</label>
|
||
|
|
<input type="text" id="diplome" name="diplome" required class="w3-input w3-border">
|
||
|
|
|
||
|
|
<label for="diplomee">Diplôme requis :</label>
|
||
|
|
<input type="text" id="diplomee" name="diplomee" 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 w3-margin-top w3-margin-bottom">Soumettre l'Offre</button>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="w3-container w3-center w3-padding-16 w3-text-white" style="background-color: #5e3a19;">
|
||
|
|
<p>© 2024 IUT de Fontainebleau. Tous droits réservés |
|
||
|
|
<a href="../mentions_legales.html" class="w3-text-white">Mentions légales</a>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// Fonction pour modifier une offre
|
||
|
|
function editOffer(button) {
|
||
|
|
// Récupérer la ligne de l'offre
|
||
|
|
var row = button.closest("tr");
|
||
|
|
// Récupérer les informations de l'offre
|
||
|
|
var formation = row.cells[0].innerText;
|
||
|
|
var duree = row.cells[1].innerText;
|
||
|
|
var datePublication = row.cells[2].innerText;
|
||
|
|
|
||
|
|
// Vous pourriez ici remplir le formulaire du modal avec ces données
|
||
|
|
document.getElementById("diplome").value = formation; // Remplacer par le bon champ
|
||
|
|
// Vous devriez aussi gérer la durée et la description
|
||
|
|
|
||
|
|
// Ouvrir le modal
|
||
|
|
openVacationModal();
|
||
|
|
}
|
||
|
|
|
||
|
|
// Fonction pour supprimer une offre
|
||
|
|
function deleteOffer(button) {
|
||
|
|
var row = button.closest("tr");
|
||
|
|
row.parentNode.removeChild(row); // Supprimer la ligne du tableau
|
||
|
|
}
|
||
|
|
|
||
|
|
// Fonction pour ouvrir le modal d'ajout
|
||
|
|
function openVacationModal() {
|
||
|
|
document.getElementById("vacationModal").style.display = "block";
|
||
|
|
}
|
||
|
|
|
||
|
|
// Fonction pour fermer le modal d'ajout
|
||
|
|
function closeVacationModal() {
|
||
|
|
document.getElementById("vacationModal").style.display = "none";
|
||
|
|
}
|
||
|
|
|
||
|
|
// Événement pour le formulaire d'ajout
|
||
|
|
document.getElementById("vacation-form").onsubmit = function(event) {
|
||
|
|
event.preventDefault(); // Empêcher le rechargement de la page
|
||
|
|
|
||
|
|
// Récupérer les valeurs du formulaire
|
||
|
|
var diplome = document.getElementById("diplome").value;
|
||
|
|
var description = document.getElementById("description").value;
|
||
|
|
var duree = document.getElementById("duree").value;
|
||
|
|
|
||
|
|
// Ajouter la nouvelle ligne au tableau
|
||
|
|
var table = document.getElementById("candidatures-table");
|
||
|
|
var newRow = table.insertRow();
|
||
|
|
newRow.innerHTML = `<td>${diplome}</td>
|
||
|
|
<td>${duree} jours</td>
|
||
|
|
<td>${new Date().toLocaleDateString()}</td>
|
||
|
|
<td>
|
||
|
|
<button class="w3-button w3-green" onclick="editOffer(this)">Modifier</button>
|
||
|
|
<button class="w3-button w3-red" onclick="deleteOffer(this)">Supprimer</button>
|
||
|
|
</td>`;
|
||
|
|
|
||
|
|
// Fermer le modal après l'ajout
|
||
|
|
closeVacationModal();
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
function toggleMenu() {
|
||
|
|
var x = document.getElementById("mobileMenu");
|
||
|
|
if (x.className.indexOf("w3-show") == -1) {
|
||
|
|
x.className += " w3-show";
|
||
|
|
} else {
|
||
|
|
x.className = x.className.replace(" w3-show", "");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|