Modification des vacataires + utilisation de W3 CSS - Commit pour Marwa à cause d'un problème de git
This commit is contained in:
stiti
@@ -10,41 +10,49 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="header">
|
||||
|
||||
<div class="header w3-bar w3-card-4 w3-dark-blue">
|
||||
<!-- Logo pour retourner à l'accueil -->
|
||||
<div class="logo-container">
|
||||
<img src="../../media/img/logoWhite.png" alt="Logo 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 class="categories">
|
||||
<a href="./vacataire.html">Accueil</a>
|
||||
<a href="./mes-heures.html">Heures</a>
|
||||
<a href="./paiements.html">Paiements</a>
|
||||
<a href="./mon-contrat.html">Contrat</a>
|
||||
<a href="./mes-informations.html">Mes informations et documents</a>
|
||||
<div id="menu" class="categories w3-hide-small w3-bar-item">
|
||||
<a href="./vacataire.html" class="w3-bar-item w3-button">Accueil</a>
|
||||
<a href="./mes-heures.html" class="w3-bar-item w3-button">Heures</a>
|
||||
<a href="./paiements.html" class="w3-bar-item w3-button">Paiements</a>
|
||||
<a href="./mon-contrat.html" class="w3-bar-item w3-button">Contrat</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">
|
||||
<div class="user-section w3-bar-item w3-right">
|
||||
<div class="user-name">
|
||||
Maxime MENAULT
|
||||
</div>
|
||||
<div class="logout-container">
|
||||
<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 class="dashboard-container">
|
||||
|
||||
<div class="section-header">
|
||||
<div class="w3-container dashboard-container">
|
||||
<div class="section-header w3-border-bottom w3-padding">
|
||||
<h2>Offres de vacation</h2>
|
||||
</div>
|
||||
<div class="proposition-container">
|
||||
<table class="proposition-table" id="proposalTable">
|
||||
<div class="proposition-container w3-responsive">
|
||||
<table class="w3-table w3-bordered w3-striped proposition-table" id="proposalTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Période</th>
|
||||
@@ -65,8 +73,8 @@
|
||||
<td>CM, TD</td>
|
||||
<td>8h</td>
|
||||
<td>
|
||||
<button class="accept-button" onclick="acceptProposal(this)">Postuler</button>
|
||||
<button class="refuse-button" onclick="confirmRefusal(this)">Refuser</button>
|
||||
<button class="w3-button w3-blue accept-button" onclick="acceptProposal(this)">Postuler</button>
|
||||
<button class="w3-button w3-red refuse-button" onclick="confirmRefusal(this)">Refuser</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@@ -77,146 +85,191 @@
|
||||
<td>TD, TP</td>
|
||||
<td>6h</td>
|
||||
<td>
|
||||
<button class="accept-button" onclick="acceptProposal(this)">Postuler</button>
|
||||
<button class="refuse-button" onclick="confirmRefusal(this)">Refuser</button>
|
||||
<button class="w3-button w3-blue accept-button" onclick="acceptProposal(this)">Postuler</button>
|
||||
<button class="w3-button w3-red refuse-button" onclick="confirmRefusal(this)">Refuser</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Popup pour pièces justificatives -->
|
||||
<div id="justificatifForm" class="justificatif-form popup">
|
||||
<h3>Téléchargez vos pièces justificatives</h3>
|
||||
<p>Veuillez télécharger le document suivant :</p>
|
||||
<ul>
|
||||
<li>Contrat de travail actuel</li>
|
||||
</ul>
|
||||
<input type="file" id="justificatif" name="justificatif" required>
|
||||
<button id="submitJustificatif" onclick="submitJustificatif()">Soumettre</button>
|
||||
<button onclick="closeJustificatifPopup()">Annuler</button>
|
||||
<div id="justificatifForm" class="w3-modal">
|
||||
<div class="w3-modal-content w3-card-4">
|
||||
<header class="w3-container w3-purple">
|
||||
<h3>Téléchargez vos pièces justificatives</h3>
|
||||
</header>
|
||||
<div class="w3-container">
|
||||
<p>Veuillez télécharger votre contrat de travail pour la candidature :</p>
|
||||
<input type="file" id="justificatif" name="justificatif" class="w3-input w3-border" required>
|
||||
</div>
|
||||
<footer class="w3-container">
|
||||
<button id="submitJustificatif" class="w3-button w3-green w3-margin-top w3-margin-bottom" onclick="submitJustificatif()">Soumettre</button>
|
||||
<button class="w3-button w3-red w3-margin-top w3-margin-bottom" onclick="closeJustificatifPopup()">Annuler</button>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-header">
|
||||
<h2>Prochaines heures</h2>
|
||||
</div>
|
||||
<div class="validated-hours-container card">
|
||||
<table class="validated-hours-table" id="validatedTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Période</th>
|
||||
<th>Formation</th>
|
||||
<th>Nom du Cours</th>
|
||||
<th>Semestre</th>
|
||||
<th>Type d'intervention</th>
|
||||
<th>Volume Prévisionnel</th>
|
||||
<th>Statut</th> <!-- Nouvelle colonne pour le statut -->
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="validatedTableBody">
|
||||
<tr>
|
||||
<td>Décembre 2024</td>
|
||||
<td>BUT1</td>
|
||||
<td>Développement Web</td>
|
||||
<td>1</td>
|
||||
<td>CM, TD</td>
|
||||
<td>8h</td>
|
||||
<td class="status-valide">Validé</td> <!-- Statut -->
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Janvier 2025</td>
|
||||
<td>BUT2</td>
|
||||
<td>SCR</td>
|
||||
<td>3</td>
|
||||
<td>TD, TP</td>
|
||||
<td>6h</td>
|
||||
<td class="status-valide">Validé</td> <!-- Statut -->
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Février 2025</td>
|
||||
<td>BUT3</td>
|
||||
<td>Base de données</td>
|
||||
<td>5</td>
|
||||
<td>CM</td>
|
||||
<td>10h</td>
|
||||
<td class="status-valide">Validé</td> <!-- Statut -->
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Mars 2025</td>
|
||||
<td>BUT3</td>
|
||||
<td>IA et Machine Learning</td>
|
||||
<td>6</td>
|
||||
<td>TD, TP</td>
|
||||
<td>12h</td>
|
||||
<td class="status-attente">En attente de traitement</td> <!-- Statut en attente -->
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Avril 2025</td>
|
||||
<td>BUT2</td>
|
||||
<td>Réseaux</td>
|
||||
<td>4</td>
|
||||
<td>CM, TD</td>
|
||||
<td>4h</td>
|
||||
<td class="status-attente">En attente de traitement</td> <!-- Statut en attente -->
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="section-header">
|
||||
<h2>Historique des Heures Travaillées</h2>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="table-container">
|
||||
<table id="hoursTable">
|
||||
<div class="w3-container dashboard-container">
|
||||
<div class="section-header w3-border-bottom w3-padding">
|
||||
<h2>Prochaines heures</h2>
|
||||
</div>
|
||||
<div class="validated-hours-container w3-responsive card">
|
||||
<table class="w3-table w3-bordered w3-striped validated-hours-table" id="validatedTable">
|
||||
<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>
|
||||
<th>Période</th>
|
||||
<th>Formation</th>
|
||||
<th>Nom du Cours</th>
|
||||
<th>Semestre</th>
|
||||
<th>Type d'intervention</th>
|
||||
<th>Volume Prévisionnel</th>
|
||||
<th>Statut</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="hoursTableBody">
|
||||
<!-- Rows will be generated dynamically with JavaScript -->
|
||||
<tbody id="validatedTableBody">
|
||||
<tr>
|
||||
<td>Décembre 2024</td>
|
||||
<td>BUT1</td>
|
||||
<td>Développement Web</td>
|
||||
<td>1</td>
|
||||
<td>CM, TD</td>
|
||||
<td>8h</td>
|
||||
<td class="status-valide">Validé</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Janvier 2025</td>
|
||||
<td>BUT2</td>
|
||||
<td>SCR</td>
|
||||
<td>3</td>
|
||||
<td>TD, TP</td>
|
||||
<td>6h</td>
|
||||
<td class="status-valide">Validé</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Février 2025</td>
|
||||
<td>BUT3</td>
|
||||
<td>Base de données</td>
|
||||
<td>5</td>
|
||||
<td>CM</td>
|
||||
<td>10h</td>
|
||||
<td class="status-valide">Validé</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Mars 2025</td>
|
||||
<td>BUT3</td>
|
||||
<td>IA et Machine Learning</td>
|
||||
<td>6</td>
|
||||
<td>TD, TP</td>
|
||||
<td>12h</td>
|
||||
<td class="status-attente">En attente de traitement</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Avril 2025</td>
|
||||
<td>BUT2</td>
|
||||
<td>Réseaux</td>
|
||||
<td>4</td>
|
||||
<td>CM, TD</td>
|
||||
<td>4h</td>
|
||||
<td class="status-attente">En attente de traitement</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="w3-container dashboard-container">
|
||||
<div class="section-header w3-border-bottom w3-padding">
|
||||
<h2>Historique des Heures Travaillées</h2>
|
||||
</div>
|
||||
|
||||
<div class="card w3-responsive">
|
||||
<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>
|
||||
|
||||
<!-- Pagination Buttons -->
|
||||
<div id="pagination">
|
||||
<button onclick="prevPage()">Précédent</button>
|
||||
<div id="pagination" class="w3-center">
|
||||
<button class="w3-button w3-purple" onclick="prevPage()">Précédent</button>
|
||||
<span id="pageNumber"></span>
|
||||
<button onclick="nextPage()">Suivant</button>
|
||||
</div>
|
||||
<button class="w3-button w3-purple" onclick="nextPage()">Suivant</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-header">
|
||||
<div class="section-header dashboard-container">
|
||||
<h2>Graphique des Heures Travaillées</h2>
|
||||
</div>
|
||||
<div class="chart-container">
|
||||
<div class="dashboard-container">
|
||||
<canvas id="hoursChart"></canvas>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="section-header">
|
||||
|
||||
<div class="section-header dashboard-container">
|
||||
<h2>Signalement de problèmes d'heures</h2>
|
||||
</div>
|
||||
<div class="contact-form">
|
||||
<div class="contact-form dashboard-container">
|
||||
<form id="contactForm">
|
||||
<label for="probleme">Type de problème :</label>
|
||||
<select id="probleme" name="probleme" required>
|
||||
<select id="probleme" name="probleme" class="w3-select" required>
|
||||
<option value="" disabled selected>Choisir un problème</option>
|
||||
<option value="non_paye">Il manque des heures dans mon historique</option>
|
||||
<option value="montant_incorrect">Il y a des heures en trop</option>
|
||||
<option value="montant_incorrect">Il y a des heures en trop dans mon historique</option>
|
||||
<option value="erreur_formation">Erreur dans la formation associée</option>
|
||||
<option value="erreur_type_intervention">Erreur dans le type d'intervention</option>
|
||||
<option value="autre">Autre</option>
|
||||
</select>
|
||||
|
||||
<label for="commentaire">Commentaires :</label>
|
||||
<input type="text" id="commentaire" name="commentaire" placeholder="Décrivez votre problème" required>
|
||||
<label for="mois">Mois concerné :</label>
|
||||
<select id="mois" name="mois" class="w3-select" required>
|
||||
<option value="" disabled selected>Choisir un mois</option>
|
||||
<option value="janvier">Janvier</option>
|
||||
<option value="fevrier">Février</option>
|
||||
<option value="mars">Mars</option>
|
||||
<option value="avril">Avril</option>
|
||||
<option value="mai">Mai</option>
|
||||
<option value="juin">Juin</option>
|
||||
<option value="juillet">Juillet</option>
|
||||
<option value="aout">Août</option>
|
||||
<option value="septembre">Septembre</option>
|
||||
<option value="octobre">Octobre</option>
|
||||
<option value="novembre">Novembre</option>
|
||||
<option value="decembre">Décembre</option>
|
||||
</select>
|
||||
|
||||
<label for="heures">Heures concernées :</label>
|
||||
<select id="heures" name="heures" class="w3-select" required>
|
||||
<option value="" disabled selected>Choisir un nombre d'heures</option>
|
||||
<option value="1">1 heure</option>
|
||||
<option value="2">2 heures</option>
|
||||
<option value="3">3 heures</option>
|
||||
<option value="4">4 heures</option>
|
||||
<option value="5">5 heures</option>
|
||||
<option value="6">6 heures</option>
|
||||
<option value="7">7 heures</option>
|
||||
<option value="8">8 heures</option>
|
||||
<option value="9">9 heures</option>
|
||||
<option value="10">10 heures</option>
|
||||
<option value="autre">Plus de 10 heures</option>
|
||||
</select>
|
||||
|
||||
<label for="commentaire">Commentaires (facultatif) :</label>
|
||||
<input type="text" id="commentaire" name="commentaire" placeholder="Ajoutez des détails supplémentaires" class="w3-input">
|
||||
|
||||
<button type="submit">Soumettre</button>
|
||||
</form>
|
||||
@@ -270,12 +323,12 @@
|
||||
const hoursChart = new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ['Semaine 1', 'Semaine 2', 'Semaine 3', 'Semaine 4'],
|
||||
labels: ['Semestre 1 - 2023', 'Semestre 2 - 2023', 'Semestre 1 - 2024', 'Semestre 2 - 2024'],
|
||||
datasets: [{
|
||||
label: 'Heures Travaillées',
|
||||
data: [5, 10, 7, 8],
|
||||
backgroundColor: 'rgba(75, 192, 192, 0.2)',
|
||||
borderColor: 'rgba(75, 192, 192, 1)',
|
||||
data: [25, 18, 21, 32],
|
||||
backgroundColor: 'rgba(128, 0, 128, 0.6)', // Couleur de fond violet foncé moins transparente
|
||||
borderColor: 'rgba(128, 0, 128, 1)', // Couleur de bord violet foncé
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
@@ -292,7 +345,7 @@
|
||||
x: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Semaines'
|
||||
text: 'Semestres'
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -471,5 +524,18 @@
|
||||
displayTable(currentPage);
|
||||
|
||||
</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>
|
||||
Reference in New Issue
Block a user