diff --git a/MaquetteWEB/html/CHEF/chef_departement.html b/MaquetteWEB/html/CHEF/chef_departement.html
index c820df4..7299e9b 100644
--- a/MaquetteWEB/html/CHEF/chef_departement.html
+++ b/MaquetteWEB/html/CHEF/chef_departement.html
@@ -7,6 +7,7 @@
<title>Dashboard Chef de département</title>
<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" />
<link rel="stylesheet" href="../../css/CHEF/chef_departement2.css">
</head>
diff --git a/MaquetteWEB/html/CHEF/gestion-edt.html b/MaquetteWEB/html/CHEF/gestion-edt.html
index 67b53e3..2a1dfaa 100644
--- a/MaquetteWEB/html/CHEF/gestion-edt.html
+++ b/MaquetteWEB/html/CHEF/gestion-edt.html
@@ -8,6 +8,7 @@
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="../../css/CHEF/gestion-heures-formation.css">
<link rel="stylesheet" href="../../css/CHEF/chef_departement.css">
+ <link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
<style>
/* Styles pour le modal */
.modal {
diff --git a/MaquetteWEB/html/CHEF/gestion-heures-formation.html b/MaquetteWEB/html/CHEF/gestion-heures-formation.html
index e379cc9..7ec3e18 100644
--- a/MaquetteWEB/html/CHEF/gestion-heures-formation.html
+++ b/MaquetteWEB/html/CHEF/gestion-heures-formation.html
@@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pilotage Budgétaire</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+ <link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
<link rel="stylesheet" href="../../css/CHEF/gestion-heures-formation.css">
<style>
/* Styles pour le modal */
diff --git a/MaquetteWEB/html/CHEF/gestion-heures-professeur.html b/MaquetteWEB/html/CHEF/gestion-heures-professeur.html
index 01b0b0a..7fdc43f 100644
--- a/MaquetteWEB/html/CHEF/gestion-heures-professeur.html
+++ b/MaquetteWEB/html/CHEF/gestion-heures-professeur.html
@@ -7,6 +7,7 @@
<title>Pilotage Budgétaire</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="../../css/CHEF/gestion-heures-professeur.css">
+ <link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
.chart-container {
diff --git a/MaquetteWEB/html/CHEF/mes-informations.html b/MaquetteWEB/html/CHEF/mes-informations.html
index d9b9fd5..9d1c422 100644
--- a/MaquetteWEB/html/CHEF/mes-informations.html
+++ b/MaquetteWEB/html/CHEF/mes-informations.html
@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mes Informations</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+ <link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
<style>
body {
font-family: Arial, sans-serif;
diff --git a/MaquetteWEB/html/CHEF/paiements.html b/MaquetteWEB/html/CHEF/paiements.html
index 73ca619..77b06d7 100644
--- a/MaquetteWEB/html/CHEF/paiements.html
+++ b/MaquetteWEB/html/CHEF/paiements.html
@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pilotage Budgétaire</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+ <link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
<link rel="stylesheet" href="../../css/CHEF/gestion-heures-professeur.css">
<style>
.container {
diff --git a/MaquetteWEB/html/FINANCE/finance.html b/MaquetteWEB/html/FINANCE/finance.html
index f32cdb4..f545f1f 100644
--- a/MaquetteWEB/html/FINANCE/finance.html
+++ b/MaquetteWEB/html/FINANCE/finance.html
@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard Financier</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+ <link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
<link rel="stylesheet" href="../../css/FINANCE/finance.css">
</head>
<body>
diff --git a/MaquetteWEB/html/FINANCE/historique_paiements.html b/MaquetteWEB/html/FINANCE/historique_paiements.html
index 6180a52..fd560e3 100644
--- a/MaquetteWEB/html/FINANCE/historique_paiements.html
+++ b/MaquetteWEB/html/FINANCE/historique_paiements.html
@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Historique des Transactions</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+ <link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
<link rel="stylesheet" href="../../css/FINANCE/finance.css">
<style>
.dashboard-container {
diff --git a/MaquetteWEB/html/FINANCE/mes_informations.html b/MaquetteWEB/html/FINANCE/mes_informations.html
index eaf7d19..a8234e7 100644
--- a/MaquetteWEB/html/FINANCE/mes_informations.html
+++ b/MaquetteWEB/html/FINANCE/mes_informations.html
@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mes Informations</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+ <link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
<style>
body {
font-family: Arial, sans-serif;
diff --git a/MaquetteWEB/html/FINANCE/paiements_en_attente.html b/MaquetteWEB/html/FINANCE/paiements_en_attente.html
index 9741e63..ee9c52f 100644
--- a/MaquetteWEB/html/FINANCE/paiements_en_attente.html
+++ b/MaquetteWEB/html/FINANCE/paiements_en_attente.html
@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Paiements en Attente</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+ <link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
<link rel="stylesheet" href="../../css/FINANCE/finance.css">
<style>
diff --git a/MaquetteWEB/html/FINANCE/rapports_financiers.html b/MaquetteWEB/html/FINANCE/rapports_financiers.html
index 397ac31..bba1981 100644
--- a/MaquetteWEB/html/FINANCE/rapports_financiers.html
+++ b/MaquetteWEB/html/FINANCE/rapports_financiers.html
@@ -5,6 +5,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Index des Rapports Financiers</title>
+ <link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="../../css/FINANCE/style.css">
<style>
diff --git a/MaquetteWEB/html/PROF/enseignant_permanent.html b/MaquetteWEB/html/PROF/enseignant_permanent.html
index 884fae8..59290c1 100644
--- a/MaquetteWEB/html/PROF/enseignant_permanent.html
+++ b/MaquetteWEB/html/PROF/enseignant_permanent.html
@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard enseignant permanent</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+ <link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
<link rel="stylesheet" href="../../css/PROF/enseignant_permanent.css">
</head>
<body>
diff --git a/MaquetteWEB/html/PROF/mes-heures.html b/MaquetteWEB/html/PROF/mes-heures.html
index f8ac88b..0f32285 100644
--- a/MaquetteWEB/html/PROF/mes-heures.html
+++ b/MaquetteWEB/html/PROF/mes-heures.html
@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Suivi des Heures</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+ <link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="stylesheet" href="../../css/PROF/mes-heures.css">
</head>
diff --git a/MaquetteWEB/html/PROF/mes-informations.html b/MaquetteWEB/html/PROF/mes-informations.html
index 261aa7e..9e300cb 100644
--- a/MaquetteWEB/html/PROF/mes-informations.html
+++ b/MaquetteWEB/html/PROF/mes-informations.html
@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mes Informations</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+ <link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
<link rel="stylesheet" href="../../css/PROF/mes-infos.css">
</head>
<body>
diff --git a/MaquetteWEB/html/PROF/notifications.html b/MaquetteWEB/html/PROF/notifications.html
index 7163f4c..9e14c1a 100644
--- a/MaquetteWEB/html/PROF/notifications.html
+++ b/MaquetteWEB/html/PROF/notifications.html
@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Notifications</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+ <link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
<link rel="stylesheet" href="../../css/PROF/enseignant_permanent.css">
<style>
/* Ajout d'un style pour le conteneur des notifications */
diff --git a/MaquetteWEB/html/PROF/paiements.html b/MaquetteWEB/html/PROF/paiements.html
index 38413a2..3ef3ca2 100644
--- a/MaquetteWEB/html/PROF/paiements.html
+++ b/MaquetteWEB/html/PROF/paiements.html
@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Suivi des Paiements</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+ <link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="stylesheet" href="../../css/PROF/paiements.css">
</head>
diff --git a/MaquetteWEB/html/PROF/settings.html b/MaquetteWEB/html/PROF/settings.html
index 595c702..47b21c3 100644
--- a/MaquetteWEB/html/PROF/settings.html
+++ b/MaquetteWEB/html/PROF/settings.html
@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Paramètres Utilisateur</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+ <link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
<link rel="stylesheet" href="../../css/PROF/enseignant_permanent.css">
<style>
.header {
diff --git a/MaquetteWEB/html/RH/candidature.html b/MaquetteWEB/html/RH/candidature.html
index 262bac1..22e2f1c 100644
--- a/MaquetteWEB/html/RH/candidature.html
+++ b/MaquetteWEB/html/RH/candidature.html
@@ -7,6 +7,7 @@
<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">
+ <link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
<title>Gestion des Candidatures</title>
</head>
@@ -32,12 +33,18 @@
<!-- Section utilisateur avec déconnexion -->
<div class="user-section w3-bar-item w3-right">
- <div class="user-name w3-padding-16">
- Alice BERGER
+ <div class="user-name">
+ Alice BERGER
</div>
<div class="logout-container w3-bar-item">
+ <a href="./notifications.html" title="Notifications">
+ <img src="../../media/img/notifs.png" alt="Logo notification">
+ </a>
+ <a href="./settings.html" title="Paramètres">
+ <img src="../../media/img/settings.png" alt="Logo paramètres">
+ </a>
<a href="../../index.html" title="Se déconnecter">
- <img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion" style="width:25px; height:25px;">
+ <img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion">
</a>
</div>
</div>
@@ -45,54 +52,69 @@
<div class="w3-container">
<div class="w3-row">
- <div class="w3-col s10">
+ <div class="w3-col l10 m12 s12"> <!-- Pour large, medium et small devices -->
<h2>Candidatures en Attente de Validation</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">
- <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 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 Nom</button>
+ </div>
+ <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(1)">Trier par Prénom</button>
+ </div>
+ <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(2)">Trier par Formation</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>
- <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>
+
+ <!-- Tableau responsive -->
+ <div class="w3-responsive">
+ <table class="w3-table w3-bordered w3-white">
+ <thead>
+ <tr class="w3-green">
+ <th>Nom</th>
+ <th>Prénom</th>
+ <th>Formation</th>
+ <th>Durée</th>
+ <th>Action</th>
+ </tr>
+ </thead>
+ <tbody id="candidatures-table">
+ <tr>
+ <td>Mike</td>
+ <td>Michel</td>
+ <td>Informatique - BUT1</td>
+ <td>1 semestre (120h)</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>2 semestre (180h)</td>
+ <td>
+ <button class="w3-button w3-green" onclick="consulterDossier('John', 'Williams')">Consulter Dossier</button>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
</div>
+
<!-- Modal pour consulter le dossier de candidature -->
<div id="dossierModal" class="w3-modal">
@@ -108,8 +130,8 @@
<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>
+ <button class="w3-button w3-green w3-margin-bottom" onclick="validerDossier()">Valider Dossier</button>
+ <button class="w3-button w3-red w3-margin-bottom" onclick="refuserDossier()">Refuser Dossier</button>
</div>
</div>
</div>
@@ -131,7 +153,7 @@
<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>
+ <button type="submit" class="w3-button w3-green w3-margin-top w3-margin-bottom">Soumettre l'Offre</button>
</form>
</div>
</div>
diff --git a/MaquetteWEB/html/RH/gestion-heures.html b/MaquetteWEB/html/RH/gestion-heures.html
index 5a18815..915c3b4 100644
--- a/MaquetteWEB/html/RH/gestion-heures.html
+++ b/MaquetteWEB/html/RH/gestion-heures.html
@@ -4,10 +4,11 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Pilotage Budgétaire</title>
+ <title>Heures</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="../../css/RH/style.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+ <link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
<style>
.chart-container {
position: relative;
@@ -113,12 +114,18 @@
<!-- Section utilisateur avec déconnexion -->
<div class="user-section w3-bar-item w3-right">
- <div class="user-name w3-padding-16">
- Alice BERGER
+ <div class="user-name">
+ Alice BERGER
</div>
<div class="logout-container w3-bar-item">
+ <a href="./notifications.html" title="Notifications">
+ <img src="../../media/img/notifs.png" alt="Logo notification">
+ </a>
+ <a href="./settings.html" title="Paramètres">
+ <img src="../../media/img/settings.png" alt="Logo paramètres">
+ </a>
<a href="../../index.html" title="Se déconnecter">
- <img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion" style="width:25px; height:25px;">
+ <img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion">
</a>
</div>
</div>
@@ -135,7 +142,7 @@
<div class="section-header">
<h2>Suivi des demandes de modification d'heures</h2>
</div>
- <div class="card">
+ <div class="card w3-responsive">
<table class="w3-table-all" id="teaching-hours-table">
<thead>
<tr>
@@ -184,65 +191,68 @@
</table>
</div>
-
- <h2>Heures des Professeurs</h2>
- <table class="info-table" id="professorTable">
- <thead>
- <tr>
- <th>Professeur</th>
- <th>Nombre d'heures</th>
- <th>Statut</th>
- <th>Actions</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>Denis MONNERAT</td>
- <td>120h</td>
- <td>Permanents</td>
- <td>
- <button class="action-btn" onclick="toggleDetails(this, 'denis-details')">Voir</button>
- <button class="action-btn" onclick="openModal('Denis MONNERAT')">Modifier</button>
- </td>
- </tr>
- <tr class="details" id="denis-details">
- <td colspan="4">
- <strong>Historique des heures :</strong>
- <ul>
- <li>BUT1 Groupe 1 : 30h</li>
- <li>BUT2 Groupe 2 : 40h</li>
- <li>BUT3 Groupe 1 : 50h</li>
- </ul>
- <div class="chart-container">
- <canvas id="denisChart"></canvas>
- </div>
- </td>
- </tr>
- <tr>
- <td>Maxime MENAULT</td>
- <td>90h</td>
- <td>Vacataire</td>
- <td>
- <button class="action-btn" onclick="toggleDetails(this, 'menault-details')">Voir</button>
- <button class="action-btn" onclick="openModal('Maxime MENAULT')">Modifier</button>
- </td>
- </tr>
- <tr class="details" id="menault-details">
- <td colspan="4">
- <strong>Historique des heures :</strong>
- <ul>
- <li>BUT1 Groupe 1 : 45h</li>
- <li>BUT2 Groupe 3 : 45h</li>
- </ul>
- <div class="chart-container">
- <canvas id="menaultChart"></canvas>
- </div>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
-
+ <div class="w3-container">
+ <h2>Heures des Professeurs</h2>
+
+ <!-- Table des heures des professeurs -->
+ <div class="w3-responsive"> <!-- Classe pour la réactivité -->
+ <table class="info-table" id="professorTable">
+ <thead>
+ <tr>
+ <th>Professeur</th>
+ <th>Nombre d'heures</th>
+ <th>Statut</th>
+ <th>Actions</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Denis MONNERAT</td>
+ <td>120h</td>
+ <td>Permanents</td>
+ <td>
+ <button class="action-btn" onclick="toggleDetails(this, 'denis-details')">Voir</button>
+ <button class="action-btn" onclick="openModal('Denis MONNERAT')">Modifier</button>
+ </td>
+ </tr>
+ <tr class="details" id="denis-details" style="display: none;">
+ <td colspan="4">
+ <strong>Historique des heures :</strong>
+ <ul>
+ <li>BUT1 Groupe 1 : 30h</li>
+ <li>BUT2 Groupe 2 : 40h</li>
+ <li>BUT3 Groupe 1 : 50h</li>
+ </ul>
+ <div class="chart-container">
+ <canvas id="denisChart" width="200" height="100"></canvas>
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td>Maxime MENAULT</td>
+ <td>90h</td>
+ <td>Vacataire</td>
+ <td>
+ <button class="action-btn" onclick="toggleDetails(this, 'menault-details')">Voir</button>
+ <button class="action-btn" onclick="openModal('Maxime MENAULT')">Modifier</button>
+ </td>
+ </tr>
+ <tr class="details" id="menault-details" style="display: none;">
+ <td colspan="4">
+ <strong>Historique des heures :</strong>
+ <ul>
+ <li>BUT1 Groupe 1 : 45h</li>
+ <li>BUT2 Groupe 3 : 45h</li>
+ </ul>
+ <div class="chart-container">
+ <canvas id="menaultChart" width="200" height="100"></canvas>
+ </div>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
<div id="myModal" class="modal">
<div class="modal-content">
@@ -355,7 +365,7 @@
</form>
</div>
-
+</div>
<div class="footer">
<p>© 2024 IUT de Fontainebleau. Tous droits réservés |
@@ -379,14 +389,14 @@
label: 'Heures des Professeurs par Catégorie',
data: heuresParCategorie,
backgroundColor: [
- 'rgba(255, 99, 132, 0.2)',
- 'rgba(54, 162, 235, 0.2)',
- 'rgba(255, 206, 86, 0.2)'
+ 'rgba(255, 99, 132, 0.7)', // Couleur rouge plus foncée
+ 'rgba(54, 162, 235, 0.7)', // Couleur bleue plus foncée
+ 'rgba(255, 206, 86, 0.7)' // Couleur jaune plus foncée
],
borderColor: [
- 'rgba(255, 99, 132, 1)',
- 'rgba(54, 162, 235, 1)',
- 'rgba(255, 206, 86, 1)'
+ 'rgba(255, 99, 132, 1)', // Bordure rouge opaque
+ 'rgba(54, 162, 235, 1)', // Bordure bleue opaque
+ 'rgba(255, 206, 86, 1)' // Bordure jaune opaque
],
borderWidth: 1
}]
@@ -412,14 +422,14 @@
label: 'Répartition des heures',
data: heures,
backgroundColor: [
- 'rgba(255, 99, 132, 0.2)',
- 'rgba(54, 162, 235, 0.2)',
- 'rgba(255, 206, 86, 0.2)'
+ 'rgba(255, 99, 132, 0.7)', // Couleur rouge plus foncée
+ 'rgba(54, 162, 235, 0.7)', // Couleur bleue plus foncée
+ 'rgba(255, 206, 86, 0.7)' // Couleur jaune plus foncée
],
borderColor: [
- 'rgba(255, 99, 132, 1)',
- 'rgba(54, 162, 235, 1)',
- 'rgba(255, 206, 86, 1)'
+ 'rgba(255, 99, 132, 1)', // Bordure rouge opaque
+ 'rgba(54, 162, 235, 1)', // Bordure bleue opaque
+ 'rgba(255, 206, 86, 1)' // Bordure jaune opaque
],
borderWidth: 1
}]
@@ -688,6 +698,18 @@ function deleteVacationOffer(button) {
row.parentElement.removeChild(row);
}
+</script>
+<script>
+ 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>
diff --git a/MaquetteWEB/html/RH/gestion_personnel.html b/MaquetteWEB/html/RH/gestion_personnel.html
index 23baedc..9d67593 100644
--- a/MaquetteWEB/html/RH/gestion_personnel.html
+++ b/MaquetteWEB/html/RH/gestion_personnel.html
@@ -1,242 +1,743 @@
<!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">
- <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <!-- Include W3.CSS -->
<title>Gestion du Personnel</title>
+ <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+ <link rel="stylesheet" href="../../css/VACATAIRE/vacataire.css">
+ <link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
+ <style>
+ /* Styles personnalisés pour la page de gestion */
+ .header {
+ background-color: #0f431f;
+ color: white;
+ padding: 10px 0;
+ text-align: center;
+ }
+ .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;
+ }
+ .employee-table {
+ width: 100%;
+ border-collapse: collapse;
+ margin-top: 20px;
+ }
+ .employee-table th, .employee-table td {
+ border: 1px solid #ccc;
+ padding: 8px;
+ text-align: left;
+ }
+ .employee-table th {
+ background-color: #f8f8f8;
+ }
+ .modal {
+ display: none; /* Hidden by default */
+ position: fixed; /* Stay in place */
+ z-index: 1000; /* Sit on top */
+ left: 0;
+ top: 0;
+ width: 100%; /* Full width */
+ height: 100%; /* Full height */
+ overflow: auto; /* Enable scroll if needed */
+ background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
+ }
+
+ .modal-content {
+ background-color: #fefefe;
+ margin: 15% auto; /* 15% from the top and centered */
+ padding: 20px;
+ border: 1px solid #888;
+ width: 80%; /* Could be more or less, depending on screen size */
+ border-radius: 8px; /* Rounded corners */
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Shadow */
+ animation: fadeIn 0.5s; /* Animation for modal */
+ }
+
+ @keyframes fadeIn {
+ from { opacity: 0; }
+ to { opacity: 1; }
+ }
+
+ .close {
+ color: #aaa;
+ float: right;
+ font-size: 28px;
+ font-weight: bold;
+ }
+
+ .close:hover,
+ .close:focus {
+ color: black;
+ text-decoration: none;
+ cursor: pointer;
+ }
+
+ h2 {
+ color: #333; /* Couleur du texte du titre */
+ }
+
+ label {
+ font-weight: bold; /* Grasset pour les étiquettes */
+ }
+
+ input[type="text"],
+ input[type="email"],
+ input[type="tel"],
+ input[type="date"] {
+ width: 100%; /* Full width */
+ padding: 10px; /* Padding for inputs */
+ margin: 8px 0; /* Margin for inputs */
+ border: 1px solid #ccc; /* Border color */
+ border-radius: 4px; /* Rounded corners */
+ box-sizing: border-box; /* Box sizing */
+ }
+
+ button.btn {
+ background-color: #4CAF50; /* Green */
+ color: white; /* White text */
+ padding: 10px 15px; /* Padding for buttons */
+ border: none; /* No border */
+ border-radius: 4px; /* Rounded corners */
+ cursor: pointer; /* Pointer cursor on hover */
+ transition: background-color 0.3s; /* Transition effect */
+ }
+
+ button.btn:hover {
+ background-color: #45a049; /* Darker green on hover */
+ }
+
+ .view-section {
+ display: none;
+ margin-top: 20px;
+ }
+ </style>
</head>
+<body>
-<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>
-
- <!-- 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-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 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="logout-container w3-bar-item">
- <a href="../../index.html" title="Se déconnecter">
- <img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion" style="width:25px; height:25px;">
- </a>
+
+ <!-- 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-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">
+ Alice BERGER
+ </div>
+ <div class="logout-container w3-bar-item">
+ <a href="./notifications.html" title="Notifications">
+ <img src="../../media/img/notifs.png" alt="Logo notification">
+ </a>
+ <a href="./settings.html" title="Paramètres">
+ <img src="../../media/img/settings.png" alt="Logo paramètres">
+ </a>
+ <a href="../../index.html" title="Se déconnecter">
+ <img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion">
+ </a>
+ </div>
</div>
</div>
-</div>
-
- <main class="w3-container">
- <section>
- <h2>Gestion du personnel</h2>
- <!-- 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">
- <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 Statut</button>
- <button class="w3-button w3-green" onclick="sortTable(3)">Trier par Dernière Intervention</button>
- </div>
-
- <table class="w3-table w3-bordered w3-white">
+ <div class="w3-container">
+ <h2>Gestion du Personnel</h2>
+
+ <!-- Section pour importer et exporter des fichiers CSV -->
+ <div class="w3-margin-bottom">
+ <button class="btn" onclick="importCSV()">Importer données CSV</button>
+ <button class="btn" onclick="exportCSV()">Exporter données CSV</button>
+ </div>
+
+ <!-- Barre de recherche -->
+ <input type="text" id="searchInput" placeholder="Rechercher un employé..." onkeyup="searchEmployees()" class="w3-input w3-border w3-margin-bottom">
+
+ <!-- Table des employés -->
+ <div class="w3-responsive"> <!-- Classe pour la réactivité -->
+ <table class="employee-table" id="employeeTable">
<thead>
- <tr class="w3-green">
- <th>Nom</th>
- <th>Prénom</th>
- <th>Statut</th>
- <th>Statut du paiement</th>
- <th>Dernière Intervention</th>
+ <tr>
+ <th onclick="sortTable(0)">Nom</th>
+ <th onclick="sortTable(1)">Prénom</th>
+ <th onclick="sortTable(2)">Département</th>
+ <th onclick="sortTable(3)">Date de Naissance</th>
+ <th onclick="sortTable(4)">Numéro de Sécurité Sociale</th>
+ <th onclick="sortTable(5)">Sexe</th>
+ <th onclick="sortTable(6)">Adresse</th>
+ <th onclick="sortTable(7)">E-mail</th>
+ <th onclick="sortTable(8)">Téléphone</th>
<th>Actions</th>
</tr>
</thead>
- <tbody id="personnel-table">
+ <tbody>
+ <!-- Exemples de données -->
<tr>
<td>Dupont</td>
<td>Jean</td>
- <td>Professeur Vacataire</td>
- <td>En attente</td>
- <td>01/10/2024</td>
+ <td>Informatique</td>
+ <td>01/01/1980</td>
+ <td>123-45-6789</td>
+ <td>M</td>
+ <td>123 Rue Exemple, Paris</td>
+ <td>jean.dupont@example.com</td>
+ <td>0123456789</td>
<td>
- <button class="w3-button w3-green" onclick="openModal2('Dupont', 'Jean', 'Professeur Vacataire', '01/10/2024')">Modifier</button>
- <button class="w3-button w3-red" onclick="supprimerPersonnel('Dupont', 'Jean')">Supprimer</button>
- <button class="w3-button w3-orange" onclick="voirDetails('Dupont', 'Jean', 'Professeur Vacataire', '01/10/2024')">Voir Détails</button>
+ <button class="btn w3-red" onclick="openEditModal(this)">Modifier</button>
+ <button class="btn" onclick="removeEmployee(this)">Supprimer</button>
+ <button class="btn" onclick="viewPayments('Jean')">Voir Paiements</button>
+ <button class="btn" onclick="viewHours('Jean')">Voir Heures</button>
+ <button class="btn" onclick="viewAidRequests('Jean')">Voir Demandes d'Aide</button>
</td>
</tr>
<tr>
<td>Martin</td>
- <td>Sophie</td>
- <td>Professeur Vacataire</td>
- <td>En attente</td>
- <td>15/09/2024</td>
+ <td>Marie</td>
+ <td>GEA</td>
+ <td>15/05/1985</td>
+ <td>987-65-4321</td>
+ <td>F</td>
+ <td>456 Rue Exemple, Lyon</td>
+ <td>marie.martin@example.com</td>
+ <td>0987654321</td>
<td>
- <button class="w3-button w3-green" onclick="openModal2('Martin', 'Sophie', 'Professeur Vacataire', '15/09/2024')">Modifier</button>
- <button class="w3-button w3-red" onclick="supprimerPersonnel('Martin', 'Sophie')">Supprimer</button>
- <button class="w3-button w3-orange" onclick="voirDetails('Martin', 'Sophie', 'Professeur Vacataire', '15/09/2024')">Voir Détails</button>
+ <button class="btn w3-red" onclick="openEditModal(this)">Modifier</button>
+ <button class="btn" onclick="removeEmployee(this)">Supprimer</button>
+ <button class="btn" onclick="viewPayments('Marie')">Voir Paiements</button>
+ <button class="btn" onclick="viewHours('Marie')">Voir Heures</button>
+ <button class="btn" onclick="viewAidRequests('Marie')">Voir Demandes d'Aide</button>
</td>
</tr>
</tbody>
</table>
- <button class="w3-button w3-green" style="margin-bottom: 10px;" onclick="ajouterPersonnel()">Ajouter un Personnel</button>
- </section>
- </main>
-
- <!-- Modal pour modifier le personnel -->
- <div id="myModal" class="modal w3-modal">
- <div class="w3-modal-content w3-card-4">
- <span class="w3-button w3-display-topright" onclick="closeModal()">×</span>
- <h2 class="w3-green">Modifier le Personnel</h2>
- <form id="edit-form" class="w3-container">
- <label for="nom">Nom:</label>
- <input type="text" id="nom" required class="w3-input w3-border"><br>
- <label for="prenom">Prénom:</label>
- <input type="text" id="prenom" required class="w3-input w3-border"><br>
- <label for="statut">Statut:</label>
- <input type="text" id="statut" required class="w3-input w3-border"><br>
- <label for="intervention">Dernière Intervention:</label>
- <input type="date" id="intervention" required class="w3-input w3-border"><br>
- <button type="submit" class="w3-button w3-green">Enregistrer</button>
- </form>
</div>
</div>
- <!-- Modal pour voir les détails du personnel -->
- <div id="detailModal" class="modal w3-modal">
- <div class="w3-modal-content w3-card-4">
- <span class="w3-button w3-display-topright" onclick="closeDetailModal()">×</span>
- <h2 class="w3-green">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>
- <ul id="corrections-list"></ul>
- <h3>Documents</h3>
- <ul id="documents-list"></ul>
- <h3>Statut</h3>
- <p id="statut-detail"></p>
- <button class="w3-button w3-green" onclick="lancerProcedurePaiement()">Lancer la Procédure de Paiement</button>
+ <!-- Modal pour modifier les informations d'un employé -->
+ <div id="editModal" class="modal">
+ <div class="modal-content">
+ <span class="close" onclick="closeModal()">×</span>
+ <h2>Modifier l'Employé</h2>
+ <label for="editName">Nom :</label>
+ <input type="text" id="editName"><br>
+ <label for="editFirstName">Prénom :</label>
+ <input type="text" id="editFirstName"><br>
+ <label for="editDepartment">Département :</label>
+ <input type="text" id="editDepartment"><br>
+ <label for="editBirthdate">Date de Naissance :</label>
+ <input type="date" id="editBirthdate"><br>
+ <label for="editSSN">Numéro de Sécurité Sociale :</label>
+ <input type="text" id="editSSN"><br>
+ <label for="editGender">Sexe :</label>
+ <select id="editGender">
+ <option value="M">Masculin</option>
+ <option value="F">Féminin</option>
+ <option value="Autre">Autre</option>
+ </select><br>
+ <label for="editAddress">Adresse :</label>
+ <input type="text" id="editAddress"><br>
+ <label for="editEmail">E-mail :</label>
+ <input type="email" id="editEmail"><br>
+ <label for="editPhone">Téléphone :</label>
+ <input type="tel" id="editPhone"><br>
+ <button class="btn" onclick="saveEmployee()">Enregistrer</button>
+ </div>
+ </div>
+
+ <div id="paymentModal" class="modal">
+ <div class="modal-content">
+ <span class="close" onclick="closePaymentModal()">×</span>
+ <h2>Historique des Paiements</h2>
+ <div class="table-container">
+ <table>
+ <thead>
+ <tr>
+ <th>Date</th>
+ <th>Montant (Brut)</th>
+ <th>Statut</th>
+ <th>Actions</th>
+ </tr>
+ </thead>
+ <tbody id="paymentHistory">
+ <!-- Les paiements seront ajoutés ici dynamiquement -->
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+
+ <div id="hoursModal" class="modal">
+ <div class="modal-content">
+ <span class="close" onclick="closeHoursModal()">×</span>
+ <h2>Historique des Heures Travaillées</h2>
+ <div class="table-container">
+ <table id="hoursTable" class="w3-table w3-bordered w3-striped">
+ <thead>
+ <tr>
+ <th onclick="sortTable(0)">Date ▲</th> <!-- Triable -->
+ <th>Matière</th>
+ <th>Type d'Intervention</th>
+ <th onclick="sortTable(3)">Volume Horaire ▲</th> <!-- Triable -->
+ <th onclick="sortTable(4)">Heures Travaillées ▲</th> <!-- Triable -->
+ <th>Actions</th>
+ </tr>
+ </thead>
+ <tbody id="hoursTableBody">
+ <!-- Les lignes seront générées dynamiquement avec JavaScript -->
+ </tbody>
+ </table>
+ </div>
</div>
</div>
- <div class="w3-container w3-center w3-padding-16 w3-text-white" style="background-color: #0f431f;">
+ <!-- Modal pour afficher l'historique des demandes d'aide -->
+ <div id="aidRequestsModal" class="modal">
+ <div class="modal-content">
+ <span class="close" onclick="closeAidRequestsModal()">×</span>
+ <h2>Historique des Demandes d'Aide</h2>
+ <div class="table-container">
+ <table id="aidRequestsTable" class="w3-table w3-bordered w3-striped">
+ <thead>
+ <tr>
+ <th>Date de Demande</th>
+ <th>Matière</th>
+ <th>Type de Demande</th>
+ <th>Statut</th>
+ <th>Actions</th>
+ </tr>
+ </thead>
+ <tbody id="aidRequestsTableBody">
+ <!-- Les lignes seront générées dynamiquement avec JavaScript -->
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+ </div>
+
+
+ <div class="footer">
<p>© 2024 IUT de Fontainebleau. Tous droits réservés |
- <a href="../mentions_legales.html" class="w3-text-white">Mentions légales</a>
+ <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
+<script>
+ // Variables globales pour stocker les informations des employés
+ const employees = [
+ {
+ name: 'Dupont',
+ firstName: 'Jean',
+ department: 'Informatique',
+ birthdate: '1980-01-01',
+ ssn: '1 85 04 25 311 114 26',
+ gender: 'M',
+ address: '123 Rue des exemples, Paris',
+ email: 'jean.dupont@u-pec.fr',
+ phone: '06.02.54.15.85'
+ },
+ {
+ name: 'Martin',
+ firstName: 'Marie',
+ department: 'GEA',
+ birthdate: '1985-05-15',
+ ssn: '2 85 04 25 311 114 26',
+ gender: 'F',
+ address: '456 Rue des développeurs, Lyon',
+ email: 'marie.martin@u-pec.fr',
+ phone: '07.68.54.14.85'
+ }
+ ];
- 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
+ const allHours = {
+ "Jean": [
+ { date: "2024-01-15", subject: "Mathématiques", interventionType: "Cours", volume: "3h", workedHours: "3h" },
+ { date: "2024-01-20", subject: "Physique", interventionType: "TD", volume: "2h", workedHours: "2h" },
+ { date: "2024-02-15", subject: "Informatique", interventionType: "TP", volume: "4h", workedHours: "4h" },
+ { date: "2024-03-05", subject: "Chimie", interventionType: "Cours", volume: "2h", workedHours: "2h" },
+ { date: "2024-03-10", subject: "Mathématiques", interventionType: "Cours", volume: "1h", workedHours: "1h" },
+ { date: "2024-04-01", subject: "Biologie", interventionType: "TD", volume: "2h", workedHours: "2h" },
+ ],
+ "Marie": [
+ { date: "2024-01-12", subject: "Économie", interventionType: "Cours", volume: "3h", workedHours: "3h" },
+ { date: "2024-01-22", subject: "Gestion", interventionType: "TP", volume: "2h", workedHours: "2h" },
+ { date: "2024-02-18", subject: "Droit", interventionType: "TD", volume: "4h", workedHours: "4h" },
+ { date: "2024-03-15", subject: "Informatique", interventionType: "Cours", volume: "2h", workedHours: "2h" },
+ ],
+ };
- rows.sort((a, b) => {
- const aText = a.cells[columnIndex].textContent.trim();
- const bText = b.cells[columnIndex].textContent.trim();
+ const allAidRequests = {
+ "Jean": [
+ { requestDate: "2024-01-10", subject: "Mathématiques", requestType: "Problème d'heures", status: "En attente" },
+ { requestDate: "2024-02-12", subject: "Informatique", requestType: "Problèmes de paiements", status: "Résolue" },
+ ],
+ "Marie": [
+ { requestDate: "2024-01-05", subject: "Économie", requestType: "Problème d'heures", status: "Résolue" },
+ { requestDate: "2024-01-22", subject: "Gestion", requestType: "Problèmes de paiements", status: "En attente" },
+ ],
+ };
- if (columnIndex === 3) { // Date column (Dernière Intervention)
- return direction * (new Date(aText) - new Date(bText));
- }
- return direction * aText.localeCompare(bText);
- });
+ function editHour(button) {
+ const row = button.closest("tr");
+ const date = row.cells[0].innerText;
+ const subject = row.cells[1].innerText;
+ const interventionType = row.cells[2].innerText;
+ const volume = row.cells[3].innerText;
+ const workedHours = row.cells[4].innerText;
- rows.forEach(row => table.appendChild(row)); // Re-append sorted rows
+ // Logique de modification des heures
+ const newSubject = prompt("Modifier la matière:", subject);
+ if (newSubject) {
+ row.cells[1].innerText = newSubject; // Met à jour la matière
}
- function filterTable() {
- const input = document.getElementById("search-input");
- const filter = input.value.toLowerCase();
- const table = document.getElementById("personnel-table");
- const rows = table.getElementsByTagName("tr");
+ }
- for (let i = 0; i < rows.length; i++) {
- const cells = rows[i].getElementsByTagName("td");
- let rowVisible = false;
+ function viewAidRequests(firstName) {
+ const aidRequestsContent = document.getElementById('aidRequestsTableBody');
+ aidRequestsContent.innerHTML = ""; // Réinitialiser le tableau
+ const aidRequests = allAidRequests[firstName] || [];
- for (let j = 0; j < cells.length; j++) {
- if (cells[j].textContent.toLowerCase().includes(filter)) {
- rowVisible = true;
+ // Boucle à travers les demandes d'aide pour remplir le tableau
+ aidRequests.forEach((entry) => {
+ const row = document.createElement("tr");
+ row.innerHTML = `
+ <td>${entry.requestDate}</td>
+ <td>${entry.subject}</td>
+ <td>${entry.requestType}</td>
+ <td>${entry.status}</td>
+ <td>
+ <button class="btn" onclick="editAidRequest(this)">Modifier</button>
+ <button class="btn" onclick="removeAidRequest(this)">Supprimer</button>
+ </td>
+ `;
+ aidRequestsContent.appendChild(row);
+ });
+
+ document.getElementById('aidRequestsModal').style.display = "block";
+ }
+
+ function editAidRequest(button) {
+ const row = button.closest("tr");
+ const requestDate = row.cells[0].innerText;
+ const subject = row.cells[1].innerText;
+ const requestType = row.cells[2].innerText;
+ const status = row.cells[3].innerText;
+
+ // Logique de modification de la demande
+ const newSubject = prompt("Modifier la matière:", subject);
+ if (newSubject) {
+ row.cells[1].innerText = newSubject; // Met à jour la matière
+ }
+
+ // Vous pouvez ajouter plus de prompts pour les autres colonnes si nécessaire
+ }
+
+ function removeAidRequest(button) {
+ const row = button.closest("tr");
+ row.parentNode.removeChild(row);
+ }
+
+ function removeHour(button) {
+ const row = button.closest("tr");
+ row.parentNode.removeChild(row);
+ }
+
+ function viewHours(firstName) {
+ const hoursContent = document.getElementById('hoursTableBody');
+ hoursContent.innerHTML = ""; // Réinitialiser le tableau
+ const hours = allHours[firstName] || [];
+
+ // Boucle à travers les heures pour remplir le tableau
+ hours.forEach((entry) => {
+ const row = document.createElement("tr");
+ row.innerHTML = `
+ <td>${entry.date}</td>
+ <td>${entry.subject}</td>
+ <td>${entry.interventionType}</td>
+ <td>${entry.volume}</td>
+ <td>${entry.workedHours}</td>
+ <td>
+ <button class="btn" onclick="editHour(this)">Modifier</button>
+ <button class="btn" onclick="removeHour(this)">Supprimer</button>
+ </td>
+ `;
+ hoursContent.appendChild(row);
+ });
+
+ document.getElementById('hoursModal').style.display = "block";
+ }
+
+ // Fonction pour ouvrir le modal d'édition
+ function openEditModal(button) {
+ const row = button.closest('tr');
+ const index = Array.from(row.parentNode.children).indexOf(row);
+ const employee = employees[index];
+
+ // Remplir le modal avec les données de l'employé
+ document.getElementById('editName').value = employee.name;
+ document.getElementById('editFirstName').value = employee.firstName;
+ document.getElementById('editDepartment').value = employee.department;
+ document.getElementById('editBirthdate').value = employee.birthdate;
+ document.getElementById('editSSN').value = employee.ssn;
+ document.getElementById('editGender').value = employee.gender;
+ document.getElementById('editAddress').value = employee.address;
+ document.getElementById('editEmail').value = employee.email;
+ document.getElementById('editPhone').value = employee.phone;
+
+ // Afficher le modal
+ document.getElementById('editModal').style.display = "block";
+ }
+
+ // Fonction pour fermer le modal
+ function closeModal() {
+ document.getElementById('editModal').style.display = "none";
+ }
+
+ // Fonction pour enregistrer les modifications
+ function saveEmployee() {
+ const name = document.getElementById('editName').value;
+ const firstName = document.getElementById('editFirstName').value;
+ const department = document.getElementById('editDepartment').value;
+ const birthdate = document.getElementById('editBirthdate').value;
+ const ssn = document.getElementById('editSSN').value;
+ const gender = document.getElementById('editGender').value;
+ const address = document.getElementById('editAddress').value;
+ const email = document.getElementById('editEmail').value;
+ const phone = document.getElementById('editPhone').value;
+
+ // Logique pour mettre à jour les données de l'employé
+ const index = Array.from(document.querySelectorAll('#employeeTable tbody tr')).findIndex(row => row.querySelector('td').textContent === name);
+ employees[index] = { name, firstName, department, birthdate, ssn, gender, address, email, phone };
+
+ // Mettre à jour la table
+ updateEmployeeTable();
+
+ // Fermer le modal
+ closeModal();
+ }
+
+ // Fonction pour mettre à jour la table des employés
+ function updateEmployeeTable() {
+ const tbody = document.querySelector('#employeeTable tbody');
+ tbody.innerHTML = ''; // Vider le contenu actuel
+
+ employees.forEach(employee => {
+ const row = document.createElement('tr');
+ row.innerHTML = `
+ <td>${employee.name}</td>
+ <td>${employee.firstName}</td>
+ <td>${employee.department}</td>
+ <td>${employee.birthdate}</td>
+ <td>${employee.ssn}</td>
+ <td>${employee.gender}</td>
+ <td>${employee.address}</td>
+ <td>${employee.email}</td>
+ <td>${employee.phone}</td>
+ <td>
+ <button class="btn" onclick="openEditModal(this)">Modifier</button>
+ <button class="btn" onclick="removeEmployee(this)">Supprimer</button>
+ <button class="btn" onclick="viewPayments('${employee.firstName}')">Voir Paiements</button>
+ <button class="btn" onclick="viewHours('${employee.firstName}')">Voir Heures</button>
+ <button class="btn" onclick="viewAidRequests('${employee.firstName}')">Voir Demandes d'Aide</button>
+ </td>
+ `;
+ tbody.appendChild(row);
+ });
+ }
+
+ // Fonction pour supprimer un employé
+ function removeEmployee(button) {
+ const row = button.closest('tr');
+ const index = Array.from(row.parentNode.children).indexOf(row);
+ employees.splice(index, 1); // Supprimer l'employé du tableau
+ updateEmployeeTable(); // Mettre à jour la table
+ }
+
+ // Fonction de recherche
+ function searchEmployees() {
+ const input = document.getElementById('searchInput').value.toLowerCase();
+ const table = document.getElementById('employeeTable');
+ const rows = table.getElementsByTagName('tr');
+
+ for (let i = 1; i < rows.length; i++) {
+ const cells = rows[i].getElementsByTagName('td');
+ let found = false;
+ for (let j = 0; j < cells.length; j++) {
+ if (cells[j].textContent.toLowerCase().includes(input)) {
+ found = true;
+ break;
+ }
+ }
+ rows[i].style.display = found ? '' : 'none';
+ }
+ }
+
+ // Fonction pour trier la table
+ function sortTable(n) {
+ const table = document.getElementById("employeeTable");
+ let switching = true;
+ let shouldSwitch, dir = "asc", switchcount = 0;
+ while (switching) {
+ switching = false;
+ const rows = table.rows;
+ for (let i = 1; i < (rows.length - 1); i++) {
+ shouldSwitch = false;
+ const x = rows[i].getElementsByTagName("TD")[n];
+ const y = rows[i + 1].getElementsByTagName("TD")[n];
+ if (dir === "asc") {
+ if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
+ shouldSwitch = true;
+ break;
+ }
+ } else if (dir === "desc") {
+ if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
+ shouldSwitch = true;
break;
}
}
- rows[i].style.display = rowVisible ? "" : "none"; // Show or hide row
}
- }
-
- function openModal2(nom, prenom, statut, intervention) {
- // Populate the modal with the data
- 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"; // Show modal
- }
-
- function closeModal() {
- document.getElementById("myModal").style.display = "none"; // Hide modal
- }
-
- function closeDetailModal() {
- document.getElementById("detailModal").style.display = "none"; // Hide detail modal
- }
-
- function ajouterPersonnel() {
- // Logic to add personnel
- alert("Ajouter personnel n'est pas encore implémentée.");
- }
-
- function supprimerPersonnel(nom, prenom) {
- // Logic to delete personnel
- alert(`Suppression de ${prenom} ${nom} n'est pas encore implémentée.`);
- }
-
- function voirDetails(nom, prenom, statut, intervention) {
- // Populate the detail modal with personnel details
- const detailInfo = `Nom: ${nom}, Prénom: ${prenom}, Statut: ${statut}, Dernière Intervention: ${intervention}`;
- document.getElementById("detail-info").textContent = detailInfo;
- document.getElementById("heures-a-payer").textContent = "Heures à payer : 10h"; // Example data
- document.getElementById("statut-detail").textContent = "Statut: En attente"; // Example data
- document.getElementById("detailModal").style.display = "block"; // Show detail modal
- }
-
- function lancerProcedurePaiement() {
- alert("Procédure de paiement lancée."); // Example action
- }
-
- 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');
+ if (shouldSwitch) {
+ rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
+ switching = true;
+ switchcount++;
} else {
- menu.classList.add('w3-hide-small');
+ if (switchcount === 0 && dir === "asc") {
+ dir = "desc";
+ switching = true;
+ }
}
}
- </script>
-</body>
+ }
+ // Fonctions pour afficher les paiements, les heures et les demandes d'aide
+ function viewPayments(firstName) {
+ const paymentHistory = document.getElementById("paymentHistory");
+ paymentHistory.innerHTML = ""; // Réinitialiser l'historique
+
+ // Simuler des données de paiements
+ const payments = [
+ { date: "2024-01-15", amount: "1500€", status: "Validé" },
+ { date: "2024-02-15", amount: "1500€", status: "Validé" },
+ { date: "2024-03-15", amount: "1500€", status: "En attente" },
+ ];
+
+ payments.forEach((payment, index) => {
+ const row = document.createElement("tr");
+ row.innerHTML = `
+ <td>${payment.date}</td>
+ <td>${payment.amount}</td>
+ <td class="${payment.status === 'Validé' ? 'status-valide' : 'status-attente'}">${payment.status}</td>
+ <td>
+ <button class="btn" onclick="editPayment(${index})">Modifier</button>
+ <button class="btn" onclick="launchPayment(${index})">Lancer le Paiement</button>
+ </td>
+ `;
+ paymentHistory.appendChild(row);
+ });
+
+ document.getElementById("paymentModal").style.display = "block";
+ }
+
+
+ function editPayment(index) {
+ const paymentHistory = [
+ { date: "2024-01-15", amount: "1500€", status: "Validé" },
+ { date: "2024-02-15", amount: "1500€", status: "Validé" },
+ { date: "2024-03-15", amount: "1500€", status: "En attente" },
+ ];
+
+ const payment = paymentHistory[index];
+ const newAmount = prompt("Modifier le montant:", payment.amount);
+
+ if (newAmount) {
+ paymentHistory[index].amount = newAmount; // Mettre à jour le montant
+ alert(`Montant mis à jour: ${newAmount}`);
+ viewPayments(paymentHistory[index].firstName); // Actualiser l'historique
+ }
+ }
+
+ function launchPayment(index) {
+ const paymentHistory = [
+ { date: "2024-01-15", amount: "1500€", status: "Validé" },
+ { date: "2024-02-15", amount: "1500€", status: "Validé" },
+ { date: "2024-03-15", amount: "1500€", status: "En attente" },
+ ];
+
+ const payment = paymentHistory[index];
+
+ if (payment.status === "En attente") {
+ // Logique pour lancer le paiement ici
+ alert(`Paiement de ${payment.amount} lancé pour le ${payment.date}`);
+ payment.status = "Validé"; // Mettre à jour le statut
+ viewPayments(paymentHistory[index].firstName); // Actualiser l'historique
+ } else {
+ alert("Ce paiement est déjà validé.");
+ }
+ }
+
+ function closePaymentModal() {
+ document.getElementById("paymentModal").style.display = "none";
+ }
+
+ function closeHoursModal() {
+ document.getElementById('hoursModal').style.display = "none";
+ }
+
+ function closeAidRequestsModal() {
+ document.getElementById('aidRequestsModal').style.display = "none";
+ }
+
+ // Initialiser la table des employés
+ updateEmployeeTable();
+
+
+ function importCSV() {
+ alert("On demande à l'utilisateur de choisir un fichier .csv et ensuite on modifiera les tableaux en conséquences !");
+ }
+
+ function exportCSV() {
+ alert("On lancera le téléchargement d'un fichier CSV avec les données présentes dans les tableaux !");
+ }
+</script>
+<script>
+ 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>
</html>
diff --git a/MaquetteWEB/html/RH/mes-informations.html b/MaquetteWEB/html/RH/mes-informations.html
index 571f234..68a4b54 100644
--- a/MaquetteWEB/html/RH/mes-informations.html
+++ b/MaquetteWEB/html/RH/mes-informations.html
@@ -7,6 +7,7 @@
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="../../css/RH/rh.css">
<link rel="stylesheet" href="../../css/RH/style.css">
+ <link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
<style>
body {
font-family: Arial, sans-serif;
@@ -251,22 +252,36 @@
</head>
<body>
- <div class="header">
- <div class="logo-container">
- <img src="../../media/img/logoWhite.png" alt="Logo Accueil">
+ <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">
+ Alice BERGER
+ </div>
+ <div class="logout-container w3-bar-item">
+ <a href="./notifications.html" title="Notifications">
+ <img src="../../media/img/notifs.png" alt="Logo notification">
+ </a>
+ <a href="./settings.html" title="Paramètres">
+ <img src="../../media/img/settings.png" alt="Logo paramètres">
+ </a>
<a href="../../index.html" title="Se déconnecter">
<img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion">
</a>
@@ -514,6 +529,18 @@
}
</script>
+<script>
+ 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>
</html>
diff --git a/MaquetteWEB/html/RH/notifications.html b/MaquetteWEB/html/RH/notifications.html
new file mode 100644
index 0000000..24d9c6f
--- /dev/null
+++ b/MaquetteWEB/html/RH/notifications.html
@@ -0,0 +1,156 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Notifications</title>
+ <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+ <link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
+ <link rel="stylesheet" href="../../css/RH/style.css">
+ <link rel="stylesheet" href="../../css/RH/rh.css">
+ <style>
+ /* Ajout d'un style pour le conteneur des notifications */
+ #notifications-container {
+ border: 1px solid #ccc; /* Bordure autour du conteneur */
+ border-radius: 8px; /* Coins arrondis */
+ padding: 16px; /* Espacement intérieur */
+ margin-top: 16px; /* Espacement supérieur */
+ max-height: 300px; /* Hauteur maximale */
+ overflow-y: auto; /* Ajout de défilement si le contenu dépasse */
+ background-color: #f9f9f9; /* Couleur de fond */
+ }
+
+ /* Amélioration de l'apparence des notifications */
+ .alert, .success {
+ margin: 8px 0; /* Marge entre les notifications */
+ }
+ </style>
+</head>
+<body class="w3-light-grey">
+
+ <!-- Header -->
+ <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>
+
+ <!-- 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-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">
+ Alice BERGER
+ </div>
+ <div class="logout-container w3-bar-item">
+ <a href="./notifications.html" title="Notifications">
+ <img src="../../media/img/notifs.png" alt="Logo notification">
+ </a>
+ <a href="./settings.html" title="Paramètres">
+ <img src="../../media/img/settings.png" alt="Logo paramètres">
+ </a>
+ <a href="../../index.html" title="Se déconnecter">
+ <img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion">
+ </a>
+ </div>
+ </div>
+ </div>
+
+ <!-- Alertes et Notifications -->
+ <div class="w3-container w3-white w3-card-4 w3-margin-bottom">
+ <h2 class="w3-text-dark-gray">Alertes et Notifications</h2>
+ <div id="notifications-container">
+ <!-- Notifications -->
+ <div class="w3-panel w3-red alert">
+ <span class="w3-closebtn close" onclick="removeNotification(this);">×</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="w3-panel w3-green success">
+ <span class="w3-closebtn close" onclick="removeNotification(this);">×</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>
+
+ <!-- Bouton pour tout effacer -->
+ <button id="clear-notifications" class="w3-button w3-dark-grey w3-margin-top w3-margin-bottom" onclick="clearAllNotifications();">Tout effacer</button>
+
+ <!-- Message quand aucune notification n'est présente -->
+ <div id="no-notifications-message" class="w3-hide w3-padding-16 w3-text-gray">
+ <p>Vous n'avez pas de notifications pour le moment !</p>
+ </div>
+ </div>
+
+ <!-- Footer -->
+ <footer id="footer" class="w3-center w3-padding w3-text-white footer" style="background-color: #0f431f;">
+ <p>© 2024 IUT de Fontainebleau. Tous droits réservés |
+ <a href="../mentions_legales.html">Mentions légales</a>
+ </p>
+ </footer>
+
+ <script>
+ function removeNotification(element) {
+ // Supprime la notification
+ const notification = element.parentElement;
+ notification.style.display = 'none';
+
+ // Vérifier s'il reste des notifications
+ checkNotifications();
+ }
+
+ function clearAllNotifications() {
+ const notifications = document.getElementById('notifications-container');
+ let hasNotifications = false;
+
+ // Cacher toutes les notifications
+ Array.from(notifications.children).forEach(notification => {
+ if (notification.style.display !== 'none') {
+ notification.style.display = 'none';
+ hasNotifications = true; // Au moins une notification a été cachée
+ }
+ });
+
+ // Vérifier s'il reste des notifications
+ if (hasNotifications) {
+ checkNotifications(); // Vérifie les notifications restantes
+ }
+ }
+
+ function checkNotifications() {
+ const notifications = document.getElementById('notifications-container');
+ const noNotificationsMessage = document.getElementById('no-notifications-message');
+ const visibleNotifications = Array.from(notifications.children).some(notification => notification.style.display !== 'none');
+
+ if (!visibleNotifications) {
+ noNotificationsMessage.classList.remove('w3-hide');
+ document.getElementById('clear-notifications').style.display = 'none'; // Cacher le bouton "Tout effacer"
+ } else {
+ noNotificationsMessage.classList.add('w3-hide');
+ document.getElementById('clear-notifications').style.display = 'block'; // Montrer le bouton "Tout effacer"
+ }
+ }
+ </script>
+ <script>
+ 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>
+</html>
diff --git a/MaquetteWEB/html/RH/rh.html b/MaquetteWEB/html/RH/rh.html
index 54194c0..c4ae47b 100644
--- a/MaquetteWEB/html/RH/rh.html
+++ b/MaquetteWEB/html/RH/rh.html
@@ -3,9 +3,10 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Dashboard Vacataire</title>
+ <title>Dashboard RH</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="../../css/VACATAIRE/vacataire.css">
+ <link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
<style>
.header {
background-color: #0f431f;
@@ -46,22 +47,37 @@
</head>
<body>
- <div class="header">
- <div class="logo-container">
- <img src="../../media/img/logoWhite.png" alt="Logo Accueil">
+
+ <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">
+ Alice BERGER
+ </div>
+ <div class="logout-container w3-bar-item">
+ <a href="./notifications.html" title="Notifications">
+ <img src="../../media/img/notifs.png" alt="Logo notification">
+ </a>
+ <a href="./settings.html" title="Paramètres">
+ <img src="../../media/img/settings.png" alt="Logo paramètres">
+ </a>
<a href="../../index.html" title="Se déconnecter">
<img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion">
</a>
@@ -93,7 +109,7 @@
<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>
+ <p><a href="./gestion-heures.html" class="btn">Voir Détails</a></p>
</div>
@@ -127,5 +143,18 @@
</p>
</div>
+ <script>
+ 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>
</html>
diff --git a/MaquetteWEB/html/RH/settings.html b/MaquetteWEB/html/RH/settings.html
new file mode 100644
index 0000000..ae8b7e6
--- /dev/null
+++ b/MaquetteWEB/html/RH/settings.html
@@ -0,0 +1,251 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Paramètres Utilisateur</title>
+ <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+ <link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
+ <link rel="stylesheet" href="../../css/RH/style.css">
+ <style>
+ .header {
+ background-color: #0f431f; /* Couleur par défaut */
+ color: white;
+ }
+ footer {
+ background-color: #0f431f; /* Couleur par défaut */
+ color: white;
+ }
+ .logo-container img {
+ width: 200px;
+ height: 50px;
+ }
+ .categories a {
+ font-weight: bold;
+ }
+ .btn {
+ background-color: #0f431f;
+ }
+ .btn:hover {
+ background-color: #0b3317;
+ }
+ /* Style par défaut */
+ body {
+ font-family: Arial, sans-serif;
+ }
+
+ /* Mode Daltonien et autres troubles visuels */
+ body.daltonien {
+ background-color: #e8f4ff; /* Meilleure visibilité pour le texte */
+ color: #2c2c2c;
+ }
+ .header {
+ background-color: #0f431f; /* Couleur par défaut */
+ }
+
+ body.daltonien .header {
+ background-color: #3b3a3a; /* Couleur plus neutre */
+ }
+
+ /* Couleur du footer en mode daltonien */
+ body.daltonien #footer {
+ background-color: #3b3a3a; /* Couleur plus neutre */
+ }
+
+ .daltonien .btn {
+ background-color: #31302d; /* Couleur facilement visible */
+ }
+
+ .daltonien .btn:hover {
+ background-color: #242321;
+ }
+
+ /* Grossissement des textes */
+ body.large-text {
+ font-size: 1.2em;
+ }
+ body.xlarge-text {
+ font-size: 1.5em;
+ }
+ </style>
+</head>
+<body class="w3-light-grey" id="main-body">
+
+ <!-- Header -->
+ <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>
+
+ <!-- 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-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">
+ Alice BERGER
+ </div>
+ <div class="logout-container w3-bar-item">
+ <a href="./notifications.html" title="Notifications">
+ <img src="../../media/img/notifs.png" alt="Logo notification">
+ </a>
+ <a href="./settings.html" title="Paramètres">
+ <img src="../../media/img/settings.png" alt="Logo paramètres">
+ </a>
+ <a href="../../index.html" title="Se déconnecter">
+ <img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion">
+ </a>
+ </div>
+ </div>
+ </div>
+
+ <!-- Paramètres de l'utilisateur -->
+ <div class="w3-content w3-padding-16">
+ <div class="w3-container w3-white w3-card-4 w3-padding-large">
+ <h2 class="w3-text-dark-gray">Paramètres de communication et d'accessibilité</h2>
+
+ <form class="w3-container w3-padding-16">
+ <!-- Notifications par Email -->
+ <div class="w3-section">
+ <label class="w3-text-dark-gray"><b>Notifications par Email</b></label>
+ <p>Recevez des notifications par e-mail concernant les heures, paiements, et plus.</p>
+ <input class="w3-check" type="checkbox" id="email-notifications" checked>
+ <label for="email-notifications">Activer les notifications par email</label>
+ </div>
+
+ <hr class="w3-divider"> <!-- Séparation -->
+
+ <!-- Notifications par SMS -->
+ <div class="w3-section">
+ <label class="w3-text-dark-gray"><b>Notifications par SMS</b></label>
+ <p>Recevez des notifications par SMS sur votre téléphone mobile.</p>
+ <input class="w3-check" type="checkbox" id="sms-notifications">
+ <label for="sms-notifications">Activer les notifications par SMS</label>
+ </div>
+
+ <hr class="w3-divider"> <!-- Séparation -->
+
+ <!-- Préférences de Langue -->
+ <div class="w3-section">
+ <label class="w3-text-dark-gray"><b>Langue de Communication</b></label>
+ <select class="w3-select" name="language" id="language">
+ <option value="fr" selected>Français</option>
+ <option value="en">Anglais</option>
+ </select>
+ </div>
+
+ <hr class="w3-divider"> <!-- Séparation -->
+
+ <!-- Fréquence de réception des emails -->
+ <div class="w3-section">
+ <label class="w3-text-dark-gray"><b>Fréquence des emails de notification</b></label>
+ <select class="w3-select" name="email-frequency" id="email-frequency">
+ <option value="instant">Immédiatement</option>
+ <option value="daily">Quotidiennement</option>
+ <option value="weekly" selected>Hebdomadairement</option>
+ </select>
+ </div>
+
+ <hr class="w3-divider"> <!-- Séparation -->
+
+ <!-- Mode Daltonien -->
+ <div class="w3-section">
+ <label class="w3-text-dark-gray"><b>Mode Daltonien</b></label>
+ <p>Améliore les contrastes et les couleurs pour mieux correspondre aux besoins des personnes atteintes de troubles visuels.</p>
+ <input class="w3-check" type="checkbox" id="daltonien-mode" onchange="toggleDaltonienMode()">
+ <label for="daltonien-mode">Activer le mode Daltonien</label>
+ </div>
+
+ <hr class="w3-divider"> <!-- Séparation -->
+
+ <!-- Changer la police -->
+ <div class="w3-section">
+ <label class="w3-text-dark-gray"><b>Changer la police</b></label>
+ <select class="w3-select" name="font" id="font" onchange="changeFont()">
+ <option value="Arial" selected>Arial</option>
+ <option value="Verdana">Verdana</option>
+ <option value="Georgia">Georgia</option>
+ <option value="Tahoma">Tahoma</option>
+ </select>
+ </div>
+
+ <hr class="w3-divider"> <!-- Séparation -->
+
+ <!-- Grossir le texte -->
+ <div class="w3-section">
+ <label class="w3-text-dark-gray"><b>Agrandir le texte</b></label>
+ <select class="w3-select" name="text-size" id="text-size" onchange="changeTextSize()">
+ <option value="normal" selected>Normal</option>
+ <option value="large">Grand</option>
+ <option value="xlarge">Très Grand</option>
+ </select>
+ </div>
+
+ <hr class="w3-divider"> <!-- Séparation -->
+
+ <!-- Sauvegarder les modifications -->
+ <button type="submit" class="w3-button w3-round w3-margin-top btn w3-text-white" style="background-color: #0f431f;">Sauvegarder les modifications</button>
+ </form>
+ </div>
+ </div>
+
+ <!-- Footer -->
+ <footer id="footer" class="w3-center w3-padding w3-text-white footer">
+ <p>© 2024 IUT de Fontainebleau. Tous droits réservés |
+ <a href="../mentions_legales.html">Mentions légales</a>
+ </p>
+ </footer>
+
+ <!-- Script pour changer la police et la taille du texte -->
+ <script>
+ function toggleDaltonienMode() {
+ const body = document.getElementById('main-body');
+ const daltonienMode = document.getElementById('daltonien-mode').checked;
+ if (daltonienMode) {
+ body.classList.add('daltonien');
+ } else {
+ body.classList.remove('daltonien');
+ }
+ }
+
+
+ function changeFont() {
+ const selectedFont = document.getElementById('font').value;
+ document.body.style.fontFamily = selectedFont;
+ }
+
+ function changeTextSize() {
+ const textSize = document.getElementById('text-size').value;
+ document.body.classList.remove('large-text', 'xlarge-text');
+ if (textSize === 'large') {
+ document.body.classList.add('large-text');
+ } else if (textSize === 'xlarge') {
+ document.body.classList.add('xlarge-text');
+ }
+ }
+ </script>
+ <script>
+ 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>
+</html>
diff --git a/MaquetteWEB/html/mentions_legales.html b/MaquetteWEB/html/mentions_legales.html
index 17b89e5..d101550 100644
--- a/MaquetteWEB/html/mentions_legales.html
+++ b/MaquetteWEB/html/mentions_legales.html
@@ -7,6 +7,7 @@
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="../css/mentions_legales.css">
+ <link rel="icon" href="../media/img/logoIcon.ico" type="image/x-icon" />
</head>
<body>
diff --git a/MaquetteWEB/index.html b/MaquetteWEB/index.html
index 0ee4abf..b933312 100644
--- a/MaquetteWEB/index.html
+++ b/MaquetteWEB/index.html
@@ -7,6 +7,7 @@
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="css/index.css">
+ <link rel="icon" href="./media/img/logoIcon.ico" type="image/x-icon" />
</head>
<body>
diff --git a/MaquetteWEB/media/img/logoIcon.ico b/MaquetteWEB/media/img/logoIcon.ico
new file mode 100644
index 0000000..97805f8
Binary files /dev/null and b/MaquetteWEB/media/img/logoIcon.ico differ