Ajouts des dernières modification
This commit is contained in:
stiti
429
MaquetteWEB/html/CHEF/budget.html
Normal file
429
MaquetteWEB/html/CHEF/budget.html
Normal file
@@ -0,0 +1,429 @@
|
||||
<!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>
|
||||
|
||||
<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>
|
||||
|
||||
<!-- 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>
|
||||
Reference in New Issue
Block a user