2024-10-16 18:19:14 +02:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="fr">
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<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="stylesheet" href="../../css/CHEF/gestion-heures-professeur.css">
|
2024-10-18 19:07:09 +02:00
|
|
|
<link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
|
2024-10-16 18:19:14 +02:00
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
|
|
|
<style>
|
|
|
|
|
.chart-container {
|
|
|
|
|
position: relative;
|
|
|
|
|
margin: 20px 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
max-width: 1200px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sortable {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.arrow {
|
|
|
|
|
margin-left: 5px;
|
|
|
|
|
font-size: 0.8em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.up {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.status-correct {
|
|
|
|
|
color: green;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.status-incorrect {
|
|
|
|
|
color: orange;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.status-pending {
|
|
|
|
|
color: red;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.popup2 {
|
|
|
|
|
display: none;
|
|
|
|
|
position: fixed;
|
|
|
|
|
left: 50%;
|
|
|
|
|
top: 50%;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
border: 2px solid #ccc;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
z-index: 10;
|
|
|
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.modal {
|
|
|
|
|
display: none; /* Hidden by default */
|
|
|
|
|
position: fixed; /* Stay in place */
|
|
|
|
|
z-index: 1; /* Sit on top */
|
|
|
|
|
left: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
width: 100%; /* Full width */
|
|
|
|
|
height: 100%; /* Full height */
|
|
|
|
|
overflow: auto; /* Enable scroll if needed */
|
|
|
|
|
background-color: rgb(0, 0, 0); /* Fallback color */
|
|
|
|
|
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 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.close {
|
|
|
|
|
color: #aaa;
|
|
|
|
|
float: right;
|
|
|
|
|
font-size: 28px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.close:hover,
|
|
|
|
|
.close:focus {
|
|
|
|
|
color: black;
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
|
2024-10-23 20:08:31 +02:00
|
|
|
<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;">
|
2024-10-16 18:19:14 +02:00
|
|
|
</div>
|
2024-10-23 20:08:31 +02:00
|
|
|
|
|
|
|
|
<!-- 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>
|
2024-10-16 18:19:14 +02:00
|
|
|
</div>
|
2024-10-23 20:08:31 +02:00
|
|
|
|
|
|
|
|
<!-- Section utilisateur avec déconnexion -->
|
|
|
|
|
<div class="user-section w3-right w3-hide-small w3-hide-medium">
|
2024-10-16 18:19:14 +02:00
|
|
|
<div class="user-name">
|
|
|
|
|
Florent MADELAINE
|
|
|
|
|
</div>
|
2024-10-23 20:08:31 +02:00
|
|
|
<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>
|
2024-10-16 18:19:14 +02:00
|
|
|
<a href="../../index.html" title="Se déconnecter">
|
2024-10-23 20:08:31 +02:00
|
|
|
<img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion" style="width:24px; height:24px;">
|
2024-10-16 18:19:14 +02:00
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="container">
|
|
|
|
|
|
2024-10-23 20:08:31 +02:00
|
|
|
<input type="text" id="searchBar" class="search-bar" placeholder="Rechercher un professeur...">
|
2024-10-16 18:19:14 +02:00
|
|
|
|
|
|
|
|
<div class="info-card">
|
|
|
|
|
<div class="section-header">
|
|
|
|
|
<h2>Suivi des demandes de modification d'heures</h2>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card">
|
2024-10-23 20:08:31 +02:00
|
|
|
<table class="w3-table-all w3-responsive" id="teaching-hours-table">
|
2024-10-16 18:19:14 +02:00
|
|
|
<thead>
|
|
|
|
|
<tr>
|
|
|
|
|
<th class="sortable" onclick="sortTable(0)">Nom de l'enseignant <span class="arrow">▲</span><span class="arrow up">▼</span></th>
|
|
|
|
|
<th class="sortable" onclick="sortTable(1)">Période <span class="arrow">▲</span><span class="arrow up">▼</span></th>
|
|
|
|
|
<th class="sortable" onclick="sortTable(2)">Contrat <span class="arrow">▲</span><span class="arrow up">▼</span></th>
|
|
|
|
|
<th class="sortable" onclick="sortTable(3)">Type d'heure <span class="arrow">▲</span><span class="arrow up">▼</span></th>
|
|
|
|
|
<th class="sortable" onclick="sortTable(4)">Heures déclarées <span class="arrow">▲</span><span class="arrow up">▼</span></th>
|
|
|
|
|
<th class="sortable" onclick="sortTable(5)">Heures validées <span class="arrow">▲</span><span class="arrow up">▼</span></th>
|
|
|
|
|
<th class="sortable" onclick="sortTable(6)">Statut <span class="arrow">▲</span><span class="arrow up">▼</span></th>
|
|
|
|
|
<th>Action</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody id="teaching-hours">
|
|
|
|
|
<tr>
|
|
|
|
|
<td>Denis MONNERAT</td>
|
|
|
|
|
<td>Novembre 2024</td>
|
|
|
|
|
<td>CDI</td>
|
|
|
|
|
<td>CM</td>
|
|
|
|
|
<td>25</td>
|
|
|
|
|
<td>23</td>
|
|
|
|
|
<td class="status-incorrect">Correction demandée</td>
|
|
|
|
|
<td><button class="w3-button w3-brown" onclick="openPopup(this)">Modifier</button></td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>Maxime MENAULT</td>
|
|
|
|
|
<td>Décembre 2024</td>
|
|
|
|
|
<td>Vacation</td>
|
|
|
|
|
<td>TD</td>
|
|
|
|
|
<td>20</td>
|
|
|
|
|
<td>20</td>
|
|
|
|
|
<td class="status-correct">Validé</td>
|
|
|
|
|
<td><button class="w3-button w3-brown" onclick="openPopup(this)">Modifier</button></td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>Fréderic GERVAIS</td>
|
|
|
|
|
<td>Décembre 2024</td>
|
|
|
|
|
<td>CDI</td>
|
|
|
|
|
<td>TP</td>
|
|
|
|
|
<td>15</td>
|
|
|
|
|
<td>15</td>
|
|
|
|
|
<td class="status-correct">Validé</td>
|
|
|
|
|
<td><button class="w3-button w3-brown" onclick="openPopup(this)">Modifier</button></td>
|
|
|
|
|
</tr>
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<h2>Heures des Professeurs</h2>
|
2024-10-23 20:08:31 +02:00
|
|
|
<div class="w3-responsive"> <!-- Conteneur responsive -->
|
|
|
|
|
<table class="w3-table w3-bordered w3-striped info-table" id="professorTable">
|
2024-10-16 18:19:14 +02:00
|
|
|
<thead>
|
|
|
|
|
<tr>
|
2024-10-23 20:08:31 +02:00
|
|
|
<th>Professeur</th>
|
|
|
|
|
<th>Nombre d'heures prévus</th>
|
|
|
|
|
<th>Nombre d'heures</th>
|
|
|
|
|
<th>Statut</th>
|
|
|
|
|
<th>Actions</th>
|
2024-10-16 18:19:14 +02:00
|
|
|
</tr>
|
|
|
|
|
</thead>
|
2024-10-23 20:08:31 +02:00
|
|
|
<tbody>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>Denis MONNERAT</td>
|
|
|
|
|
<td>110h</td>
|
|
|
|
|
<td>120h</td>
|
|
|
|
|
<td>Permanents</td>
|
|
|
|
|
<td>
|
|
|
|
|
<button class="w3-button w3-brown action-btn" onclick="toggleDetails(this, 'denis-details')">Voir</button>
|
|
|
|
|
<button class="w3-button w3-blue 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><strong>BUT1 Groupe 1 :</strong> 30h<br> <strong>Matières : </strong>SCR / Mathématiques / DEV<br></li><br>
|
|
|
|
|
<li><strong>BUT2 Groupe 2 :</strong> 40h<br> <strong>Matières : </strong>SCR / Mathématiques<br></li><br>
|
|
|
|
|
<li><strong>BUT3 Groupe 1 :</strong> 50h<br> <strong>Matières : </strong>SCR / Mathématiques<br></li>
|
|
|
|
|
</ul>
|
|
|
|
|
<div class="chart-container">
|
|
|
|
|
<canvas id="denisChart"></canvas>
|
|
|
|
|
</div>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>Maxime MENAULT</td>
|
|
|
|
|
<td>100h</td>
|
|
|
|
|
<td>90h</td>
|
|
|
|
|
<td>Vacataire</td>
|
|
|
|
|
<td>
|
|
|
|
|
<button class="w3-button w3-brown action-btn" onclick="toggleDetails(this, 'menault-details')">Voir</button>
|
|
|
|
|
<button class="w3-button w3-blue 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><strong>BUT1 Groupe 1 :</strong> 45h<br> <strong>Matières : </strong>SCR<br></li><br>
|
|
|
|
|
<li><strong>BUT2 Groupe 3 :</strong> 45h<br> <strong>Matières : </strong>SCR<br></li>
|
|
|
|
|
</ul>
|
|
|
|
|
<div class="chart-container">
|
|
|
|
|
<canvas id="menaultChart"></canvas>
|
|
|
|
|
</div>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
2024-10-16 18:19:14 +02:00
|
|
|
</tbody>
|
|
|
|
|
</table>
|
2024-10-23 20:08:31 +02:00
|
|
|
</div></div>
|
2024-10-16 18:19:14 +02:00
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Graphique Principal -->
|
|
|
|
|
<div class="chart-container">
|
|
|
|
|
<canvas id="mainChart"></canvas>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2024-10-23 20:08:31 +02:00
|
|
|
<div id="myModal" class="modal w3-modal">
|
|
|
|
|
<div class="modal-content w3-card-4">
|
|
|
|
|
<span class="close w3-button w3-display-topright" onclick="closeModal()">×</span>
|
|
|
|
|
<h2 class="w3-text-brown">Ajouter des heures</h2>
|
|
|
|
|
<p id="professorName" class="w3-text-grey"></p>
|
2024-10-16 18:19:14 +02:00
|
|
|
|
2024-10-23 20:08:31 +02:00
|
|
|
<label class="w3-text-brown"><b>Type de cours :</b></label>
|
|
|
|
|
<div class="w3-margin-bottom">
|
|
|
|
|
<input type="checkbox" id="cm" name="courseType" value="CM" class="w3-check">
|
|
|
|
|
<label for="cm">CM</label>
|
|
|
|
|
|
|
|
|
|
<input type="checkbox" id="td" name="courseType" value="TD" class="w3-check">
|
|
|
|
|
<label for="td">TD</label>
|
|
|
|
|
|
|
|
|
|
<input type="checkbox" id="tp" name="courseType" value="TP" class="w3-check">
|
|
|
|
|
<label for="tp">TP</label>
|
|
|
|
|
|
|
|
|
|
<input type="checkbox" id="suivi" name="courseType" value="SUIVI" class="w3-check">
|
|
|
|
|
<label for="suivi">SUIVI</label>
|
|
|
|
|
</div>
|
2024-10-16 18:19:14 +02:00
|
|
|
|
2024-10-23 20:08:31 +02:00
|
|
|
<label for="hours" class="w3-text-brown"><b>Nombre d'heures :</b></label>
|
|
|
|
|
<input type="number" id="hours" name="hours" class="w3-input w3-border" placeholder="Ex: 1.5" step="0.5" min="0" required><br>
|
2024-10-16 18:19:14 +02:00
|
|
|
|
2024-10-23 20:08:31 +02:00
|
|
|
<label for="subject" class="w3-text-brown"><b>Choisissez une formation :</b></label>
|
|
|
|
|
<select id="subject" name="subject" class="w3-select w3-border" required>
|
|
|
|
|
<option value="" disabled selected>Sélectionnez une formation</option>
|
2024-10-16 18:19:14 +02:00
|
|
|
<option value="but1fi">BUT1 Informatique FI</option>
|
|
|
|
|
<option value="but2fi">BUT2 Informatique FI</option>
|
|
|
|
|
<option value="but2fa">BUT2 Informatique FA</option>
|
|
|
|
|
</select>
|
|
|
|
|
<br><br>
|
|
|
|
|
|
2024-10-23 20:08:31 +02:00
|
|
|
<label for="matiere" class="w3-text-brown"><b>Choisissez une matière :</b></label>
|
|
|
|
|
<select id="matiere" name="matiere" class="w3-select w3-border" required>
|
|
|
|
|
<option value="" disabled selected>Sélectionnez une matière</option>
|
2024-10-16 18:19:14 +02:00
|
|
|
<option value="SCR">SCR</option>
|
|
|
|
|
<option value="Mathématiques">Mathématiques</option>
|
|
|
|
|
<option value="DEV">DEV</option>
|
|
|
|
|
<option value="EGOD">EGOD</option>
|
|
|
|
|
<option value="EC">EC</option>
|
|
|
|
|
<option value="BD">BD</option>
|
|
|
|
|
<option value="Anglais">Anglais</option>
|
|
|
|
|
</select>
|
|
|
|
|
<br><br>
|
|
|
|
|
|
2024-10-23 20:08:31 +02:00
|
|
|
<button class="w3-button w3-brown" onclick="addHours()">Ajouter</button>
|
2024-10-16 18:19:14 +02:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2024-10-23 20:08:31 +02:00
|
|
|
|
|
|
|
|
|
2024-10-16 18:19:14 +02:00
|
|
|
|
|
|
|
|
<div id="confirmModal" class="modal">
|
|
|
|
|
<div class="modal-content">
|
|
|
|
|
<span class="close" onclick="closeConfirmModal()">×</span>
|
2024-10-23 20:08:31 +02:00
|
|
|
<h2 class="w3-text-green"><strong>Confirmation</strong></h2>
|
2024-10-16 18:19:14 +02:00
|
|
|
<p>La demande de modification d'heures a été envoyée au service RH avec succès.</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2024-10-23 20:08:31 +02:00
|
|
|
|
2024-10-16 18:19:14 +02:00
|
|
|
<div class="popup2" id="popup-form">
|
|
|
|
|
<h3>Modifier les heures</h3>
|
|
|
|
|
<form id="form-popup">
|
|
|
|
|
<label for="validated-hours">Heures validées :</label>
|
|
|
|
|
<input type="number" id="validated-hours" class="w3-input" min="0" max="100" value="0">
|
|
|
|
|
<br>
|
|
|
|
|
<label for="status">Statut :</label>
|
|
|
|
|
<select id="status" class="w3-select" onchange="updateButtonColor()">
|
|
|
|
|
<option value="Validé" class="status-correct">Validé</option>
|
|
|
|
|
<option value="Correction demandée" class="status-incorrect">Correction demandée</option>
|
|
|
|
|
<option value="Refusé" class="status-pending">Refusé</option>
|
|
|
|
|
</select>
|
|
|
|
|
<br><br>
|
|
|
|
|
|
|
|
|
|
<!-- Ajout du champ commentaire -->
|
|
|
|
|
<label for="comment">Commentaire :</label>
|
|
|
|
|
<textarea id="comment" class="w3-input" rows="4" placeholder="Ajouter un commentaire..."></textarea>
|
|
|
|
|
<br><br>
|
|
|
|
|
|
|
|
|
|
<button type="button" class="w3-button w3-green btn-validate" onclick="validateHours()">Valider</button>
|
|
|
|
|
<button type="button" class="w3-button w3-red" onclick="closePopup()">Annuler</button>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="footer">
|
|
|
|
|
<p>© 2024 IUT de Fontainebleau. Tous droits réservés |
|
|
|
|
|
<a href="../mentions_legales.html">Mentions légales</a>
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
// Données pour le graphique principal
|
|
|
|
|
const categories = ['Vacataires', 'Permanents', 'Chercheurs'];
|
|
|
|
|
const heuresParCategorie = [90, 120, 80]; // Exemple de données
|
|
|
|
|
|
|
|
|
|
// Fonction pour initialiser le graphique principal
|
|
|
|
|
function initMainChart() {
|
|
|
|
|
const ctx = document.getElementById('mainChart').getContext('2d');
|
|
|
|
|
new Chart(ctx, {
|
|
|
|
|
type: 'bar',
|
|
|
|
|
data: {
|
|
|
|
|
labels: categories,
|
|
|
|
|
datasets: [{
|
|
|
|
|
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)'
|
|
|
|
|
],
|
|
|
|
|
borderColor: [
|
|
|
|
|
'rgba(255, 99, 132, 1)',
|
|
|
|
|
'rgba(54, 162, 235, 1)',
|
|
|
|
|
'rgba(255, 206, 86, 1)'
|
|
|
|
|
],
|
|
|
|
|
borderWidth: 1
|
|
|
|
|
}]
|
|
|
|
|
},
|
|
|
|
|
options: {
|
|
|
|
|
scales: {
|
|
|
|
|
y: {
|
|
|
|
|
beginAtZero: true
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Fonction pour initialiser le graphique d'un professeur
|
|
|
|
|
function initProfessorChart(professor, heures) {
|
|
|
|
|
const ctx = document.getElementById(professor + 'Chart').getContext('2d');
|
|
|
|
|
new Chart(ctx, {
|
|
|
|
|
type: 'pie',
|
|
|
|
|
data: {
|
|
|
|
|
labels: ['BUT1', 'BUT2', 'BUT3'], // Exemple de matières
|
|
|
|
|
datasets: [{
|
|
|
|
|
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)'
|
|
|
|
|
],
|
|
|
|
|
borderColor: [
|
|
|
|
|
'rgba(255, 99, 132, 1)',
|
|
|
|
|
'rgba(54, 162, 235, 1)',
|
|
|
|
|
'rgba(255, 206, 86, 1)'
|
|
|
|
|
],
|
|
|
|
|
borderWidth: 1
|
|
|
|
|
}]
|
|
|
|
|
},
|
|
|
|
|
options: {
|
|
|
|
|
responsive: true,
|
|
|
|
|
plugins: {
|
|
|
|
|
legend: {
|
|
|
|
|
position: 'top',
|
|
|
|
|
},
|
|
|
|
|
title: {
|
|
|
|
|
display: true,
|
|
|
|
|
text: 'Heures de ' + professor
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function openModal(professor) {
|
|
|
|
|
document.getElementById('professorName').textContent = "Ajouter des heures pour " + professor;
|
|
|
|
|
document.getElementById('myModal').style.display = 'block';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function closeModal() {
|
|
|
|
|
document.getElementById('myModal').style.display = 'none';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function addHours() {
|
|
|
|
|
const hours = document.getElementById('hours').value;
|
|
|
|
|
const formation = document.getElementById('subject').value;
|
|
|
|
|
const matiere = document.getElementById('matiere').value;
|
|
|
|
|
|
|
|
|
|
if (hours && formation && matiere) {
|
|
|
|
|
closeModal();
|
|
|
|
|
openConfirmModal();
|
|
|
|
|
} else {
|
|
|
|
|
alert("Veuillez remplir toutes les informations.");
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function openConfirmModal() {
|
|
|
|
|
document.getElementById('confirmModal').style.display = 'block';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function closeConfirmModal() {
|
|
|
|
|
document.getElementById('confirmModal').style.display = 'none';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Fonction de recherche des professeurs
|
|
|
|
|
function searchProfessor() {
|
|
|
|
|
const input = document.getElementById("searchBar").value.toLowerCase();
|
|
|
|
|
const table = document.getElementById("professorTable");
|
|
|
|
|
const rows = table.getElementsByTagName("tr");
|
|
|
|
|
|
|
|
|
|
for (let i = 1; i < rows.length; i++) {
|
|
|
|
|
const cells = rows[i].getElementsByTagName("td");
|
|
|
|
|
if (cells.length > 0) {
|
|
|
|
|
const professorName = cells[0].innerText.toLowerCase();
|
|
|
|
|
if (professorName.includes(input)) {
|
|
|
|
|
rows[i].style.display = "";
|
|
|
|
|
} else {
|
|
|
|
|
rows[i].style.display = "none";
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Toggle details and change button text
|
|
|
|
|
function toggleDetails(button, detailId) {
|
|
|
|
|
const detailsRow = document.getElementById(detailId);
|
|
|
|
|
if (detailsRow.style.display === "none" || detailsRow.style.display === "") {
|
|
|
|
|
detailsRow.style.display = "table-row";
|
|
|
|
|
button.textContent = "Fermer"; // Change the button text to "Fermer"
|
|
|
|
|
|
|
|
|
|
// Initialiser le graphique du professeur
|
|
|
|
|
if (button.parentElement.parentElement.cells[0].innerText === "Denis MONNERAT") {
|
|
|
|
|
initProfessorChart('denis', [10, 40, 70]); // Exemples d'heures
|
|
|
|
|
} else if (button.parentElement.parentElement.cells[0].innerText === "Maxime MENAULT") {
|
|
|
|
|
initProfessorChart('menault', [45, 45, 0]); // Exemples d'heures
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
detailsRow.style.display = "none";
|
|
|
|
|
button.textContent = "Voir"; // Change the button text back to "Voir"
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Initialiser le graphique principal au chargement de la page
|
|
|
|
|
window.onload = initMainChart;
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
let currentRow; // Garde une trace de la ligne à modifier
|
|
|
|
|
let lastSortedColumnIndex = -1;
|
|
|
|
|
let lastSortDirection = 'asc';
|
|
|
|
|
|
|
|
|
|
// Fonction pour ouvrir la pop-up
|
|
|
|
|
function openPopup(button) {
|
|
|
|
|
currentRow = button.parentElement.parentElement;
|
|
|
|
|
document.getElementById("validated-hours").value = currentRow.cells[4].textContent;
|
|
|
|
|
document.getElementById("status").value = currentRow.cells[6].textContent; // Correction ici pour le statut
|
|
|
|
|
updateButtonColor(); // Mettre à jour la couleur du bouton
|
|
|
|
|
document.getElementById("popup-form").style.display = 'block';
|
|
|
|
|
document.getElementById("overlay").style.display = 'block';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Fonction pour fermer la pop-up
|
|
|
|
|
function closePopup() {
|
|
|
|
|
document.getElementById("popup-form").style.display = 'none';
|
|
|
|
|
document.getElementById("overlay").style.display = 'none';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Fonction pour changer la couleur du bouton en fonction du statut
|
|
|
|
|
function updateButtonColor() {
|
|
|
|
|
const status = document.getElementById("status").value;
|
|
|
|
|
const button = document.querySelector('.btn-validate');
|
|
|
|
|
|
|
|
|
|
button.classList.remove('validé', 'correction-demandée', 'refusé'); // Retirer toutes les classes
|
|
|
|
|
|
|
|
|
|
if (status === "Validé") {
|
|
|
|
|
button.classList.add('validé');
|
|
|
|
|
button.style.backgroundColor = 'green'; // Vert
|
|
|
|
|
} else if (status === "Correction demandée") {
|
|
|
|
|
button.classList.add('correction-demandée');
|
|
|
|
|
button.style.backgroundColor = 'orange'; // Orange
|
|
|
|
|
} else {
|
|
|
|
|
button.classList.add('refusé');
|
|
|
|
|
button.style.backgroundColor = 'red'; // Rouge
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Fonction pour valider et mettre à jour les heures et le statut
|
|
|
|
|
function validateHours() {
|
|
|
|
|
let validatedHours = document.getElementById("validated-hours").value;
|
|
|
|
|
let status = document.getElementById("status").value;
|
|
|
|
|
|
|
|
|
|
// Mettre à jour les valeurs dans le tableau
|
|
|
|
|
currentRow.cells[4].textContent = validatedHours;
|
|
|
|
|
currentRow.cells[6].textContent = status; // Correction ici pour le statut
|
|
|
|
|
|
|
|
|
|
// Appliquer les couleurs du statut
|
|
|
|
|
if (status === "Validé") {
|
|
|
|
|
currentRow.cells[6].className = "status-correct";
|
|
|
|
|
} else if (status === "Correction demandée") {
|
|
|
|
|
currentRow.cells[6].className = "status-incorrect";
|
|
|
|
|
} else {
|
|
|
|
|
currentRow.cells[6].className = "status-pending";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Afficher un message de confirmation
|
|
|
|
|
alert("Heures validées et statut mis à jour!");
|
|
|
|
|
|
|
|
|
|
// Fermer la pop-up
|
|
|
|
|
closePopup();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Fonction pour trier le tableau
|
|
|
|
|
function sortTable(columnIndex) {
|
|
|
|
|
const table = document.getElementById("teaching-hours-table");
|
|
|
|
|
const tbody = table.getElementsByTagName("tbody")[0];
|
|
|
|
|
const rows = Array.from(tbody.getElementsByTagName("tr"));
|
|
|
|
|
|
|
|
|
|
// Déterminer la direction du tri
|
|
|
|
|
let direction = 'asc';
|
|
|
|
|
if (lastSortedColumnIndex === columnIndex) {
|
|
|
|
|
direction = lastSortDirection === 'asc' ? 'desc' : 'asc';
|
|
|
|
|
}
|
|
|
|
|
lastSortedColumnIndex = columnIndex;
|
|
|
|
|
lastSortDirection = direction;
|
|
|
|
|
|
|
|
|
|
// Tri des lignes
|
|
|
|
|
rows.sort((a, b) => {
|
|
|
|
|
const aText = a.cells[columnIndex].textContent.trim();
|
|
|
|
|
const bText = b.cells[columnIndex].textContent.trim();
|
|
|
|
|
|
|
|
|
|
if (direction === 'asc') {
|
|
|
|
|
return aText > bText ? 1 : -1;
|
|
|
|
|
} else {
|
|
|
|
|
return aText < bText ? 1 : -1;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Ajout des lignes triées au tableau
|
|
|
|
|
rows.forEach(row => tbody.appendChild(row));
|
|
|
|
|
|
|
|
|
|
// Mettre à jour les flèches
|
|
|
|
|
updateSortArrows(columnIndex, direction);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Fonction pour mettre à jour les flèches de tri
|
|
|
|
|
function updateSortArrows(columnIndex, direction) {
|
|
|
|
|
const headers = document.querySelectorAll("th.sortable");
|
|
|
|
|
headers.forEach((header, index) => {
|
|
|
|
|
const arrows = header.querySelectorAll('.arrow');
|
|
|
|
|
arrows[0].style.display = (index === columnIndex && direction === 'asc') ? 'inline' : 'none'; // Flèche vers le haut
|
|
|
|
|
arrows[1].style.display = (index === columnIndex && direction === 'desc') ? 'inline' : 'none'; // Flèche vers le bas
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let currentVacationRow = null;
|
|
|
|
|
|
|
|
|
|
// Ouvrir la modal pour ajouter une nouvelle offre de vacation
|
|
|
|
|
function openVacationModal() {
|
|
|
|
|
document.getElementById('vacationModal').style.display = 'block';
|
|
|
|
|
document.getElementById('modal-title').textContent = "Ajouter une Offre de Vacation";
|
|
|
|
|
document.getElementById('offerName').value = '';
|
|
|
|
|
document.getElementById('offerDate').value = '';
|
|
|
|
|
document.getElementById('offerType').value = '';
|
|
|
|
|
document.getElementById('update-btn').style.display = 'none';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Fermer la modal
|
|
|
|
|
function closeVacationModal() {
|
|
|
|
|
document.getElementById('vacationModal').style.display = 'none';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Ajouter une nouvelle offre de vacation
|
|
|
|
|
function addVacationOffer() {
|
|
|
|
|
const offerName = document.getElementById('offerName').value;
|
|
|
|
|
const offerDescription = document.getElementById('offerDescription').value;
|
|
|
|
|
const offerDate = document.getElementById('offerDate').value;
|
|
|
|
|
const offerHours = document.getElementById('offerHours').value;
|
|
|
|
|
|
|
|
|
|
const offerTypes = [];
|
|
|
|
|
if (document.getElementById('cm').checked) offerTypes.push('CM');
|
|
|
|
|
if (document.getElementById('td').checked) offerTypes.push('TD');
|
|
|
|
|
if (document.getElementById('tp').checked) offerTypes.push('TP');
|
|
|
|
|
if (document.getElementById('suivi').checked) offerTypes.push('Suivi');
|
|
|
|
|
|
|
|
|
|
// Here you would add the logic to store or process the vacation offer.
|
|
|
|
|
console.log('Offer Name:', offerName);
|
|
|
|
|
console.log('Description:', offerDescription);
|
|
|
|
|
console.log('Date:', offerDate);
|
|
|
|
|
console.log('Hours:', offerHours);
|
|
|
|
|
console.log('Types:', offerTypes.join(', '));
|
|
|
|
|
|
|
|
|
|
// Close the modal after adding
|
|
|
|
|
closeVacationModal();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Éditer une offre de vacation
|
|
|
|
|
function editVacationOffer(button) {
|
|
|
|
|
currentVacationRow = button.parentElement.parentElement;
|
|
|
|
|
document.getElementById('offerName').value = currentVacationRow.cells[0].textContent;
|
|
|
|
|
document.getElementById('offerDate').value = currentVacationRow.cells[1].textContent;
|
|
|
|
|
document.getElementById('offerType').value = currentVacationRow.cells[2].textContent;
|
|
|
|
|
|
|
|
|
|
document.getElementById('modal-title').textContent = "Modifier l'Offre de Vacation";
|
|
|
|
|
document.getElementById('update-btn').style.display = 'block';
|
|
|
|
|
document.getElementById('vacationModal').style.display = 'block';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Mettre à jour une offre de vacation
|
|
|
|
|
function updateVacationOffer() {
|
|
|
|
|
if (currentVacationRow) {
|
|
|
|
|
currentVacationRow.cells[0].textContent = document.getElementById('offerName').value;
|
|
|
|
|
currentVacationRow.cells[1].textContent = document.getElementById('offerDate').value;
|
|
|
|
|
currentVacationRow.cells[2].textContent = document.getElementById('offerType').value;
|
|
|
|
|
closeVacationModal();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Supprimer une offre de vacation
|
|
|
|
|
function deleteVacationOffer(button) {
|
|
|
|
|
const row = button.parentElement.parentElement;
|
|
|
|
|
row.parentElement.removeChild(row);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</script>
|
2024-10-23 20:08:31 +02:00
|
|
|
<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>
|
|
|
|
|
|
2024-10-16 18:19:14 +02:00
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|
