2024-10-23 20:08:31 +02:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="fr">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>Gestion du Budget - Département Informatique</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/chef_departement.css">
|
|
|
|
|
<style>
|
|
|
|
|
.dashboard-container {
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
}
|
|
|
|
|
.card {
|
|
|
|
|
background-color: white;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
}
|
|
|
|
|
.filter-input {
|
|
|
|
|
width: 300px;
|
|
|
|
|
}
|
|
|
|
|
.footer {
|
|
|
|
|
text-align: center;
|
|
|
|
|
padding: 10px 0;
|
|
|
|
|
background-color: #5e3a19;
|
|
|
|
|
color: white;
|
|
|
|
|
margin-top: 40px;
|
|
|
|
|
}
|
|
|
|
|
.progress-bar {
|
|
|
|
|
width: 100%;
|
|
|
|
|
background-color: #f3f3f3;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
}
|
|
|
|
|
.progress {
|
|
|
|
|
height: 20px;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
.request-buttons {
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
}
|
|
|
|
|
.details-section {
|
|
|
|
|
display: none;
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
}
|
|
|
|
|
.details-section.active {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
.details-content {
|
|
|
|
|
padding: 20px;
|
|
|
|
|
border: 1px solid #ccc;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
background-color: #f9f9f9;
|
|
|
|
|
}
|
|
|
|
|
.chart-container {
|
|
|
|
|
width: 40%;
|
|
|
|
|
clear: both;
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
}
|
|
|
|
|
.request-form {
|
|
|
|
|
margin-top: 30px;
|
|
|
|
|
}
|
|
|
|
|
/* Ajout de marges pour éviter les chevauchements */
|
|
|
|
|
.details-content {
|
|
|
|
|
margin-bottom: 30px;
|
|
|
|
|
}
|
|
|
|
|
/* Bouton pour fermer la section détails */
|
|
|
|
|
.close-btn {
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body class="w3-light-grey">
|
|
|
|
|
|
|
|
|
|
<div class="header w3-bar w3-card-4 w3-dark-blue">
|
|
|
|
|
<!-- Logo pour retourner à l'accueil -->
|
|
|
|
|
<div class="logo-container w3-bar-item">
|
|
|
|
|
<img src="../../media/img/logoWhite.png" alt="Logo Accueil" class="w3-image" style="width:150px; height:40px;">
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Bouton burger pour petit écran -->
|
|
|
|
|
<a href="javascript:void(0)" class="w3-bar-item w3-button w3-hide-large w3-right w3-padding-16" onclick="toggleMenu()">☰</a>
|
|
|
|
|
|
|
|
|
|
<!-- Catégories dans le header -->
|
|
|
|
|
<div id="menu" class="categories w3-hide-small w3-hide-medium w3-bar-item">
|
|
|
|
|
<a href="./chef_departement.html" class="w3-bar-item w3-button">Accueil</a>
|
|
|
|
|
<a href="./gestion-heures-professeur.html" class="w3-bar-item w3-button">Professeurs</a>
|
|
|
|
|
<a href="./vacataire.html" class="w3-bar-item w3-button">Vacation</a>
|
|
|
|
|
<a href="./gestion-heures-formation.html" class="w3-bar-item w3-button">Formations</a>
|
|
|
|
|
<a href="./paiement.html" class="w3-bar-item w3-button">Paiements</a>
|
|
|
|
|
<a href="./budget.html" class="w3-bar-item w3-button">Budget</a>
|
|
|
|
|
<a href="./mes-informations.html" class="w3-bar-item w3-button">Mes informations</a>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Section utilisateur avec déconnexion -->
|
|
|
|
|
<div class="user-section w3-right w3-hide-small w3-hide-medium">
|
|
|
|
|
<div class="user-name">
|
|
|
|
|
Florent MADELAINE
|
|
|
|
|
</div>
|
|
|
|
|
<div class="logout-container w3-bar-item">
|
|
|
|
|
<a href="./notifications.html" title="Notifications">
|
|
|
|
|
<img src="../../media/img/notifs.png" alt="Logo notification" style="width:24px; height:24px;">
|
|
|
|
|
</a>
|
|
|
|
|
<a href="./settings.html" title="Paramètres">
|
|
|
|
|
<img src="../../media/img/settings.png" alt="Logo paramètres" style="width:24px; height:24px;">
|
|
|
|
|
</a>
|
|
|
|
|
<a href="../../index.html" title="Se déconnecter">
|
|
|
|
|
<img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion" style="width:24px; height:24px;">
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Menu mobile caché au départ -->
|
|
|
|
|
<div id="mobileMenu" class="w3-bar-block w3-hide w3-hide-large w3-dark-blue">
|
|
|
|
|
<a href="./chef_departement.html" class="w3-bar-item w3-button">Accueil</a>
|
|
|
|
|
<a href="./gestion-heures-professeur.html" class="w3-bar-item w3-button">Professeurs</a>
|
|
|
|
|
<a href="./vacataire.html" class="w3-bar-item w3-button">Vacation</a>
|
|
|
|
|
<a href="./gestion-heures-formation.html" class="w3-bar-item w3-button">Formations</a>
|
|
|
|
|
<a href="./paiement.html" class="w3-bar-item w3-button">Paiements</a>
|
|
|
|
|
<a href="./budget.html" class="w3-bar-item w3-button">Budget</a>
|
|
|
|
|
<a href="./mes-informations.html" class="w3-bar-item w3-button">Mes informations</a>
|
|
|
|
|
|
|
|
|
|
<!-- Section utilisateur pour mobile -->
|
|
|
|
|
<div class="w3-bar-item w3-border-top w3-margin-top">
|
|
|
|
|
<div class="user-name">Florent MADELAINE</div>
|
|
|
|
|
<a href="./notifications.html" title="Notifications">
|
|
|
|
|
<img src="../../media/img/notifs.png" alt="Logo notification" style="width:24px; height:24px;">
|
|
|
|
|
</a>
|
|
|
|
|
<a href="./settings.html" title="Paramètres">
|
|
|
|
|
<img src="../../media/img/settings.png" alt="Logo paramètres" style="width:24px; height:24px;">
|
|
|
|
|
</a>
|
|
|
|
|
<a href="../../index.html" title="Se déconnecter">
|
|
|
|
|
<img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion" style="width:24px; height:24px;">
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="dashboard-container w3-container">
|
|
|
|
|
<div class="card w3-card">
|
|
|
|
|
<h2>Gestion du Budget - Département Informatique</h2>
|
|
|
|
|
|
|
|
|
|
<div class="filter-section w3-margin-bottom">
|
|
|
|
|
<input type="text" id="nameFilter" class="filter-input w3-input w3-border" placeholder="Rechercher par formation..." oninput="filterTable()"><br>
|
|
|
|
|
</div>
|
|
|
|
|
|
2024-10-26 15:17:51 +02:00
|
|
|
<div class="w3-responsive">
|
2024-10-23 20:08:31 +02:00
|
|
|
<table class="w3-table w3-bordered w3-striped w3-white">
|
|
|
|
|
<thead>
|
|
|
|
|
<tr class="w3-light-grey">
|
|
|
|
|
<th>Formation</th>
|
|
|
|
|
<th>Budget Alloué (€)</th>
|
|
|
|
|
<th>Dépenses Totales (€)</th>
|
|
|
|
|
<th>Budget Restant (€)</th>
|
|
|
|
|
<th>Progression</th>
|
|
|
|
|
<th>Détails</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody id="budgetTableBody">
|
|
|
|
|
<tr>
|
|
|
|
|
<td>BUT Informatique</td>
|
|
|
|
|
<td>50 000</td>
|
|
|
|
|
<td>30 000</td>
|
|
|
|
|
<td>20 000</td>
|
|
|
|
|
<td>
|
|
|
|
|
<div class="progress-bar">
|
|
|
|
|
<div class="progress" style="width: 60%; background-color: #4caf50;">60%</div>
|
|
|
|
|
</div>
|
|
|
|
|
</td>
|
|
|
|
|
<td><button class="w3-button w3-blue" onclick="showDetails('BUT Informatique', 50000, 30000)">Voir Détails</button></td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>Master Informatique</td>
|
|
|
|
|
<td>80 000</td>
|
|
|
|
|
<td>60 000</td>
|
|
|
|
|
<td>20 000</td>
|
|
|
|
|
<td>
|
|
|
|
|
<div class="progress-bar">
|
|
|
|
|
<div class="progress" style="width: 75%; background-color: orange;">75%</div>
|
|
|
|
|
</div>
|
|
|
|
|
</td>
|
|
|
|
|
<td><button class="w3-button w3-blue" onclick="showDetails('Master Informatique', 80000, 60000)">Voir Détails</button></td>
|
|
|
|
|
</tr>
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
2024-10-26 15:17:51 +02:00
|
|
|
</div>
|
2024-10-23 20:08:31 +02:00
|
|
|
|
|
|
|
|
<!-- Section pour afficher des détails -->
|
|
|
|
|
<div class="details-section" id="detailsSection">
|
|
|
|
|
<h2>Détails pour la formation sélectionnée</h2>
|
|
|
|
|
<div class="details-content">
|
|
|
|
|
<p><strong>Formation :</strong> <span id="formationName"></span></p>
|
|
|
|
|
<p><strong>Budget Alloué :</strong> <span id="budgetAllocated"></span> €</p>
|
|
|
|
|
<p><strong>Dépenses :</strong> <span id="budgetSpent"></span> €</p>
|
|
|
|
|
<p><strong>Budget Restant :</strong> <span id="budgetRemaining"></span> €</p>
|
|
|
|
|
<p><strong>Dépenses détaillées :</strong></p>
|
|
|
|
|
<ul id="expenseDetails">
|
|
|
|
|
<!-- Détails des dépenses ajoutés dynamiquement -->
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
<div class="chart-container" id="chartContainer">
|
|
|
|
|
<p><strong>Répartition des dépenses :</strong></p>
|
|
|
|
|
<canvas id="expenseChart"></canvas>
|
|
|
|
|
<p><strong>Évolution du budget :</strong></p>
|
|
|
|
|
<canvas id="progressChart"></canvas>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Bouton pour fermer la section de détails -->
|
|
|
|
|
<button class="w3-button w3-red close-btn" onclick="closeDetails()">Fermer les détails</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="card w3-card request-form">
|
|
|
|
|
<h2>Faire une demande de budget supplémentaire</h2>
|
|
|
|
|
<form id="budgetRequestForm">
|
|
|
|
|
<label for="formation">Formation :</label>
|
|
|
|
|
<select id="formation" class="w3-select" name="formation">
|
|
|
|
|
<option value="BUT Informatique">BUT Informatique</option>
|
|
|
|
|
<option value="Master Informatique">Master Informatique</option>
|
|
|
|
|
</select><br><br>
|
|
|
|
|
|
|
|
|
|
<label for="requestedAmount">Montant demandé (€) :</label>
|
|
|
|
|
<input type="number" id="requestedAmount" class="w3-input" name="requestedAmount" placeholder="Ex : 5000"><br><br>
|
|
|
|
|
|
|
|
|
|
<label for="justification">Justification :</label>
|
|
|
|
|
<textarea id="justification" class="w3-input" name="justification" placeholder="Expliquer la raison de cette demande..."></textarea><br><br>
|
|
|
|
|
|
|
|
|
|
<button class="w3-button w3-green" type="button" onclick="submitRequest()">Soumettre la demande</button>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Section pour afficher les demandes soumises -->
|
|
|
|
|
<div class="card w3-card request-list" id="requestList" style="display: none;">
|
|
|
|
|
<h2>Liste des demandes de budget supplémentaires</h2>
|
|
|
|
|
<table class="w3-table w3-bordered w3-striped w3-white" id="requestTable">
|
|
|
|
|
<thead>
|
|
|
|
|
<tr class="w3-light-grey">
|
|
|
|
|
<th>Formation</th>
|
|
|
|
|
<th>Montant (€)</th>
|
|
|
|
|
<th>Justification</th>
|
|
|
|
|
<th>Actions</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody id="requestTableBody">
|
|
|
|
|
<!-- Les demandes seront ajoutées ici dynamiquement -->
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
</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 src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
|
|
|
<script>
|
|
|
|
|
function showDetails(formation, budgetAllocated, budgetSpent) {
|
|
|
|
|
// Mise à jour des détails de la formation
|
|
|
|
|
|
|
|
|
|
document.getElementById('detailsSection').classList.add('active');
|
|
|
|
|
document.getElementById('formationName').innerText = formation;
|
|
|
|
|
document.getElementById('budgetAllocated').innerText = budgetAllocated;
|
|
|
|
|
document.getElementById('budgetSpent').innerText = budgetSpent;
|
|
|
|
|
document.getElementById('budgetRemaining').innerText = budgetAllocated - budgetSpent;
|
|
|
|
|
|
|
|
|
|
// Simulation des détails de dépenses
|
|
|
|
|
const expenses = [
|
|
|
|
|
{ category: 'Matériel', amount: 15000 },
|
|
|
|
|
{ category: 'Logiciels', amount: 8000 },
|
|
|
|
|
{ category: 'Maintenance', amount: 5000 },
|
|
|
|
|
{ category: 'Formations', amount: 2000 }
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
const expenseDetails = document.getElementById('expenseDetails');
|
|
|
|
|
expenseDetails.innerHTML = ''; // Effacer les anciens détails
|
|
|
|
|
|
|
|
|
|
expenses.forEach(expense => {
|
|
|
|
|
const li = document.createElement('li');
|
|
|
|
|
li.textContent = `${expense.category}: ${expense.amount} €`;
|
|
|
|
|
expenseDetails.appendChild(li);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Afficher les graphiques
|
|
|
|
|
displayCharts(expenses, budgetAllocated, budgetSpent);
|
|
|
|
|
|
|
|
|
|
// Afficher la section des détails
|
|
|
|
|
document.getElementById('detailsSection').classList.add('active');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function displayCharts(expenses, budgetAllocated, budgetSpent) {
|
|
|
|
|
// Répartition des dépenses
|
|
|
|
|
const expenseChartCtx = document.getElementById('expenseChart').getContext('2d');
|
|
|
|
|
new Chart(expenseChartCtx, {
|
|
|
|
|
type: 'pie',
|
|
|
|
|
data: {
|
|
|
|
|
labels: expenses.map(exp => exp.category),
|
|
|
|
|
datasets: [{
|
|
|
|
|
label: 'Dépenses',
|
|
|
|
|
data: expenses.map(exp => exp.amount),
|
|
|
|
|
backgroundColor: ['#ff6384', '#36a2eb', '#cc65fe', '#ffce56']
|
|
|
|
|
}]
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Évolution du budget
|
|
|
|
|
const progressChartCtx = document.getElementById('progressChart').getContext('2d');
|
|
|
|
|
new Chart(progressChartCtx, {
|
|
|
|
|
type: 'line',
|
|
|
|
|
data: {
|
|
|
|
|
labels: ['Août 2024','Septembre 2024', 'Octobre 2024', 'Novembre 2024', 'Maintenant'],
|
|
|
|
|
datasets: [{
|
|
|
|
|
label: 'Évolution des dépenses',
|
|
|
|
|
data: [0, budgetSpent * 0.3, budgetSpent * 0.6, budgetSpent * 0.9, budgetSpent],
|
|
|
|
|
borderColor: '#4caf50',
|
|
|
|
|
fill: false
|
|
|
|
|
}]
|
|
|
|
|
},
|
|
|
|
|
options: {
|
|
|
|
|
responsive: true
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function closeDetails() {
|
|
|
|
|
document.getElementById('detailsSection').classList.remove('active');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function filterTable() {
|
|
|
|
|
const filterValue = document.getElementById('nameFilter').value.toLowerCase();
|
|
|
|
|
const tableRows = document.querySelectorAll('#budgetTableBody tr');
|
|
|
|
|
|
|
|
|
|
tableRows.forEach(row => {
|
|
|
|
|
const formationName = row.cells[0].innerText.toLowerCase();
|
|
|
|
|
if (formationName.includes(filterValue)) {
|
|
|
|
|
row.style.display = '';
|
|
|
|
|
} else {
|
|
|
|
|
row.style.display = 'none';
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<script>
|
|
|
|
|
let requests = [];
|
|
|
|
|
|
|
|
|
|
function submitRequest() {
|
|
|
|
|
const formation = document.getElementById('formation').value;
|
|
|
|
|
const requestedAmount = document.getElementById('requestedAmount').value;
|
|
|
|
|
const justification = document.getElementById('justification').value;
|
|
|
|
|
|
|
|
|
|
if (formation && requestedAmount && justification) {
|
|
|
|
|
const request = {
|
|
|
|
|
id: Date.now(), // Un identifiant unique pour chaque demande
|
|
|
|
|
formation: formation,
|
|
|
|
|
amount: requestedAmount,
|
|
|
|
|
justification: justification
|
|
|
|
|
};
|
|
|
|
|
requests.push(request);
|
|
|
|
|
displayRequests();
|
|
|
|
|
clearForm();
|
|
|
|
|
} else {
|
|
|
|
|
alert('Veuillez remplir tous les champs.');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function displayRequests() {
|
|
|
|
|
const requestTableBody = document.getElementById('requestTableBody');
|
|
|
|
|
const requestListSection = document.getElementById('requestList');
|
|
|
|
|
|
|
|
|
|
// Vider le tableau avant de le remplir à nouveau
|
|
|
|
|
requestTableBody.innerHTML = '';
|
|
|
|
|
|
|
|
|
|
// Afficher ou masquer la section en fonction des demandes
|
|
|
|
|
if (requests.length > 0) {
|
|
|
|
|
requests.forEach(request => {
|
|
|
|
|
const row = document.createElement('tr');
|
|
|
|
|
|
|
|
|
|
row.innerHTML = `
|
|
|
|
|
<td>${request.formation}</td>
|
|
|
|
|
<td>${request.amount}</td>
|
|
|
|
|
<td>${request.justification}</td>
|
|
|
|
|
<td>
|
|
|
|
|
<button class="w3-button w3-red" onclick="deleteRequest(${request.id})">Supprimer</button>
|
|
|
|
|
</td>
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
requestTableBody.appendChild(row);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Afficher la section des demandes
|
|
|
|
|
requestListSection.style.display = 'block';
|
|
|
|
|
} else {
|
|
|
|
|
// Masquer la section des demandes si aucune demande n'existe
|
|
|
|
|
requestListSection.style.display = 'none';
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function clearForm() {
|
|
|
|
|
document.getElementById('formation').value = '';
|
|
|
|
|
document.getElementById('requestedAmount').value = '';
|
|
|
|
|
document.getElementById('justification').value = '';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function deleteRequest(id) {
|
|
|
|
|
requests = requests.filter(request => request.id !== id);
|
|
|
|
|
displayRequests(); // Mettre à jour l'affichage après suppression
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
<script>
|
|
|
|
|
function toggleMenu() {
|
|
|
|
|
var x = document.getElementById("mobileMenu");
|
|
|
|
|
if (x.className.indexOf("w3-show") == -1) {
|
|
|
|
|
x.className += " w3-show";
|
|
|
|
|
} else {
|
|
|
|
|
x.className = x.className.replace(" w3-show", "");
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
