Ajouts de la maquette web sur le nouveau git (suite au bug de l'ancien répertoire git
This commit is contained in:
parent
c3d21877df
commit
cad70b9d8e
MaquetteWEB
README.mdindex.html
css
html
CHEF
chef_departement.htmlgestion-edt.htmlgestion-heures-formation.htmlgestion-heures-professeur.htmlmes-informations.htmlpaiements.html
FINANCE
finance.htmlhistorique_paiements.htmlmes_informations.htmlpaiements_en_attente.htmlrapports_financiers.html
PROF
RH
VACATAIRE
mentions_legales.htmljs
media
0
MaquetteWEB/README.md
Normal file
0
MaquetteWEB/README.md
Normal file
222
MaquetteWEB/css/CHEF/chef_departement.css
Normal file
222
MaquetteWEB/css/CHEF/chef_departement.css
Normal file
@ -0,0 +1,222 @@
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
.dashboard-container {
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
}
|
||||
.header {
|
||||
background-color: #592e05;
|
||||
color: white;
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
}
|
||||
.section-header {
|
||||
background-color: #f8f8f8;
|
||||
padding: 10px;
|
||||
border-left: 5px solid #5e3a19;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.card {
|
||||
background-color: white;
|
||||
padding: 15px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
table th, table td {
|
||||
padding: 12px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
table th {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
.alert {
|
||||
padding: 10px;
|
||||
margin-bottom: 20px;
|
||||
background-color: #f44336;
|
||||
color: white;
|
||||
position: relative;
|
||||
}
|
||||
.alert .close {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
}
|
||||
.success {
|
||||
padding: 10px;
|
||||
margin-bottom: 20px;
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
position: relative;
|
||||
}
|
||||
.success .close {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
}
|
||||
.btn {
|
||||
padding: 10px 15px;
|
||||
background-color: #5e3a19;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
display: inline-block;
|
||||
}
|
||||
.btn:hover {
|
||||
background-color: #9c5e24;
|
||||
}
|
||||
.input-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.input-group label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.input-group input, .input-group select {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
}
|
||||
/* Styling for the modern schedule */
|
||||
.schedule-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.schedule-table {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
border-collapse: collapse;
|
||||
border: 1px solid #ddd;
|
||||
background-color: white;
|
||||
}
|
||||
.schedule-table th,
|
||||
.schedule-table td {
|
||||
border: 1px solid #ddd;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
.schedule-table th {
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
}
|
||||
.time-slot {
|
||||
background-color: #f9f9f9;
|
||||
font-weight: bold;
|
||||
width: 70px;
|
||||
}
|
||||
.class {
|
||||
background-color: #e3f2fd;
|
||||
color: #333;
|
||||
border-left: 5px solid #2141f3;
|
||||
text-align: left;
|
||||
padding-left: 10px;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
}
|
||||
.class span {
|
||||
font-size: 0.9em;
|
||||
color: #555;
|
||||
}
|
||||
.no-class {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
.week-navigation {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.week-navigation button {
|
||||
padding: 10px 15px;
|
||||
background-color: #5e3a19;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.week-navigation button:hover {
|
||||
background-color: #9c5e24;
|
||||
}
|
||||
.footer {
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
margin-top: 20px;
|
||||
background-color: #5e3a19;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.dashboard-container {
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
}
|
||||
.header {
|
||||
background-color: #5e3a19;
|
||||
color: white;
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.logo-container img {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.categories {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
margin-left: 50px;
|
||||
}
|
||||
.categories a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
.categories a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.user-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.user-name {
|
||||
margin-right: 15px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.logout-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.logout-container img {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
207
MaquetteWEB/css/CHEF/gestion-heures-formation.css
Normal file
207
MaquetteWEB/css/CHEF/gestion-heures-formation.css
Normal file
@ -0,0 +1,207 @@
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #f4f4f4;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.header {
|
||||
background-color: #5e3a19;
|
||||
color: white;
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.logo-container img {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.categories {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
.categories a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.categories a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.user-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
margin-right: 15px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.logout-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logout-container img {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.info-card {
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||||
margin-bottom: 20px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.info-card h2 {
|
||||
border-bottom: 2px solid #5e3a19;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.info-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.info-table th,
|
||||
.info-table td {
|
||||
padding: 12px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.info-table th {
|
||||
background-color: #f8f8f8;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
color: white;
|
||||
background-color: #5e3a19;
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
margin: 10px 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
background-color: #4a2e13;
|
||||
}
|
||||
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: rgb(0, 0, 0);
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: #fefefe;
|
||||
margin: 5% auto;
|
||||
padding: 20px;
|
||||
border: 1px solid #888;
|
||||
width: 80%;
|
||||
max-width: 400px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.close {
|
||||
color: #aaa;
|
||||
float: right;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.close:hover,
|
||||
.close:focus {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.footer {
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
background-color: #5e3a19;
|
||||
color: white;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.details {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Dropdown menu */
|
||||
.dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: white;
|
||||
min-width: 200px;
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dropdown-content a {
|
||||
color: black;
|
||||
padding: 12px 16px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown-content a:hover {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
.dropdown:hover .dropdown-content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown:hover .dropbtn {
|
||||
background-color: #4a2e13;
|
||||
}
|
||||
206
MaquetteWEB/css/CHEF/gestion-heures-professeur.css
Normal file
206
MaquetteWEB/css/CHEF/gestion-heures-professeur.css
Normal file
@ -0,0 +1,206 @@
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #f4f4f4;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.header {
|
||||
background-color: #5e3a19;
|
||||
color: white;
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.logo-container img {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.categories {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
.categories a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.categories a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.user-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
margin-right: 15px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.logout-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logout-container img {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.info-card {
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||||
margin-bottom: 20px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.info-card h2 {
|
||||
border-bottom: 2px solid #5e3a19;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.info-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.info-table th,
|
||||
.info-table td {
|
||||
padding: 12px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.info-table th {
|
||||
background-color: #f8f8f8;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
color: white;
|
||||
background-color: #5e3a19;
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
margin: 10px 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
background-color: #4a2e13;
|
||||
}
|
||||
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: rgb(0, 0, 0);
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: #fefefe;
|
||||
margin: 5% auto;
|
||||
padding: 20px;
|
||||
border: 1px solid #888;
|
||||
width: 80%;
|
||||
max-width: 400px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.close {
|
||||
color: #aaa;
|
||||
float: right;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.close:hover,
|
||||
.close:focus {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.footer {
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
background-color: #5e3a19;
|
||||
color: white;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.details {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: white;
|
||||
min-width: 200px;
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dropdown-content a {
|
||||
color: black;
|
||||
padding: 12px 16px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown-content a:hover {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
.dropdown:hover .dropdown-content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown:hover .dropbtn {
|
||||
background-color: #4a2e13;
|
||||
}
|
||||
222
MaquetteWEB/css/FINANCE/finance.css
Normal file
222
MaquetteWEB/css/FINANCE/finance.css
Normal file
@ -0,0 +1,222 @@
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
.dashboard-container {
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
}
|
||||
.header {
|
||||
background-color: #20195e;
|
||||
color: white;
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
}
|
||||
.section-header {
|
||||
background-color: #f8f8f8;
|
||||
padding: 10px;
|
||||
border-left: 5px solid #20195e;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.card {
|
||||
background-color: white;
|
||||
padding: 15px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
table th, table td {
|
||||
padding: 12px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
table th {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
.alert {
|
||||
padding: 10px;
|
||||
margin-bottom: 20px;
|
||||
background-color: #f44336;
|
||||
color: white;
|
||||
position: relative;
|
||||
}
|
||||
.alert .close {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
}
|
||||
.success {
|
||||
padding: 10px;
|
||||
margin-bottom: 20px;
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
position: relative;
|
||||
}
|
||||
.success .close {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
}
|
||||
.btn {
|
||||
padding: 10px 15px;
|
||||
background-color: #20195e;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
display: inline-block;
|
||||
}
|
||||
.btn:hover {
|
||||
background-color: #130d47;
|
||||
}
|
||||
.input-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.input-group label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.input-group input, .input-group select {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
}
|
||||
/* Styling for the modern schedule */
|
||||
.schedule-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.schedule-table {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
border-collapse: collapse;
|
||||
border: 1px solid #ddd;
|
||||
background-color: white;
|
||||
}
|
||||
.schedule-table th,
|
||||
.schedule-table td {
|
||||
border: 1px solid #ddd;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
.schedule-table th {
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
}
|
||||
.time-slot {
|
||||
background-color: #f9f9f9;
|
||||
font-weight: bold;
|
||||
width: 70px;
|
||||
}
|
||||
.class {
|
||||
background-color: #e3f2fd;
|
||||
color: #333;
|
||||
border-left: 5px solid #20195e;
|
||||
text-align: left;
|
||||
padding-left: 10px;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
}
|
||||
.class span {
|
||||
font-size: 0.9em;
|
||||
color: #555;
|
||||
}
|
||||
.no-class {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
.week-navigation {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.week-navigation button {
|
||||
padding: 10px 15px;
|
||||
background-color: #5e3a19;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.week-navigation button:hover {
|
||||
background-color: #150f48;
|
||||
}
|
||||
.footer {
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
margin-top: 20px;
|
||||
background-color: #20195e;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.dashboard-container {
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
}
|
||||
.header {
|
||||
background-color: #20195e;
|
||||
color: white;
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.logo-container img {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.categories {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
margin-left: 50px;
|
||||
}
|
||||
.categories a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
.categories a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.user-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.user-name {
|
||||
margin-right: 15px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.logout-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.logout-container img {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
194
MaquetteWEB/css/FINANCE/style.css
Normal file
194
MaquetteWEB/css/FINANCE/style.css
Normal file
@ -0,0 +1,194 @@
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #f4f4f4;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.header {
|
||||
background-color: #20195e;
|
||||
color: white;
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.logo-container img {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.categories {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
.categories a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.categories a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.user-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
margin-right: 15px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.logout-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logout-container img {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.info-card {
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||||
margin-bottom: 20px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.info-card h2 {
|
||||
border-bottom: 2px solid #20195e;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.info-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.info-table th,
|
||||
.info-table td {
|
||||
padding: 12px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.info-table th {
|
||||
background-color: #f8f8f8;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
color: white;
|
||||
background-color: #20195e;
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
margin: 10px 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
background-color: #191351;
|
||||
}
|
||||
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: rgb(0, 0, 0);
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: #fefefe;
|
||||
margin: 5% auto;
|
||||
padding: 20px;
|
||||
border: 1px solid #888;
|
||||
width: 80%;
|
||||
max-width: 400px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
|
||||
.footer {
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
background-color: #20195e;
|
||||
color: white;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.details {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Dropdown menu */
|
||||
.dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: white;
|
||||
min-width: 200px;
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dropdown-content a {
|
||||
color: black;
|
||||
padding: 12px 16px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown-content a:hover {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
.dropdown:hover .dropdown-content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown:hover .dropbtn {
|
||||
background-color: #20195e;
|
||||
}
|
||||
221
MaquetteWEB/css/PROF/enseignant_permanent.css
Normal file
221
MaquetteWEB/css/PROF/enseignant_permanent.css
Normal file
@ -0,0 +1,221 @@
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
.dashboard-container {
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
}
|
||||
.header {
|
||||
background-color: #a17b12;
|
||||
color: white;
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
}
|
||||
.section-header {
|
||||
background-color: #f8f8f8;
|
||||
padding: 10px;
|
||||
border-left: 5px solid #a17b12;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.card {
|
||||
background-color: white;
|
||||
padding: 15px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
table th, table td {
|
||||
padding: 12px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
table th {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
.alert {
|
||||
padding: 10px;
|
||||
margin-bottom: 20px;
|
||||
background-color: #f44336;
|
||||
color: white;
|
||||
position: relative;
|
||||
}
|
||||
.alert .close {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
}
|
||||
.success {
|
||||
padding: 10px;
|
||||
margin-bottom: 20px;
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
position: relative;
|
||||
}
|
||||
.success .close {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
}
|
||||
.btn {
|
||||
padding: 10px 15px;
|
||||
background-color: #a17b12;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
display: inline-block;
|
||||
}
|
||||
.btn:hover {
|
||||
background-color: #644c08;
|
||||
}
|
||||
.input-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.input-group label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.input-group input, .input-group select {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
}
|
||||
/* Styling for the modern schedule */
|
||||
.schedule-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.schedule-table {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
border-collapse: collapse;
|
||||
border: 1px solid #ddd;
|
||||
background-color: white;
|
||||
}
|
||||
.schedule-table th,
|
||||
.schedule-table td {
|
||||
border: 1px solid #ddd;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
.schedule-table th {
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
}
|
||||
.time-slot {
|
||||
background-color: #f9f9f9;
|
||||
font-weight: bold;
|
||||
width: 70px;
|
||||
}
|
||||
.class {
|
||||
background-color: #e3f2fd;
|
||||
color: #333;
|
||||
border-left: 5px solid #2141f3;
|
||||
text-align: left;
|
||||
padding-left: 10px;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
}
|
||||
.class span {
|
||||
font-size: 0.9em;
|
||||
color: #555;
|
||||
}
|
||||
.no-class {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
.week-navigation {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.week-navigation button {
|
||||
padding: 10px 15px;
|
||||
background-color: #a17b12;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.week-navigation button:hover {
|
||||
background-color: #a17b12;
|
||||
}
|
||||
.footer {
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
margin-top: 20px;
|
||||
background-color: #a17b12;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.dashboard-container {
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
}
|
||||
.header {
|
||||
background-color: #a17b12;
|
||||
color: white;
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.logo-container img {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.categories {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
margin-left: 50px;
|
||||
}
|
||||
.categories a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
.categories a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.user-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.user-name {
|
||||
margin-right: 15px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.logout-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.logout-container img {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
299
MaquetteWEB/css/PROF/mes-heures.css
Normal file
299
MaquetteWEB/css/PROF/mes-heures.css
Normal file
@ -0,0 +1,299 @@
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
.dashboard-container {
|
||||
max-width: 1500px;
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
}
|
||||
.header {
|
||||
background-color: #a17b12;
|
||||
color: white;
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
.logo-container img {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.categories {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-left: 50px;
|
||||
}
|
||||
.categories a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
.categories a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.user-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.user-name {
|
||||
margin-right: 15px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.logout-container img {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.section-header {
|
||||
background-color: #f8f8f8;
|
||||
padding: 10px;
|
||||
border-left: 5px solid #a17b12;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.card {
|
||||
background-color: white;
|
||||
padding: 15px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
table th, table td {
|
||||
padding: 12px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
table th {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
.status-valide {
|
||||
color: green;
|
||||
font-weight: bold;
|
||||
}
|
||||
.status-attente {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* Styles pour les graphiques */
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
margin: 20px 0;
|
||||
}
|
||||
/* Styles pour le formulaire */
|
||||
.contact-form {
|
||||
margin-top: 30px;
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.contact-form h3 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.contact-form select, .contact-form input {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
margin: 10px 0;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.contact-form button {
|
||||
background-color: #a17b12;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.contact-form button:hover {
|
||||
background-color: #5f490b;
|
||||
}
|
||||
.footer {
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
margin-top: 20px;
|
||||
background-color: #a17b12;
|
||||
color: white;
|
||||
}
|
||||
/* Styles pour le popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: #fff; /* Blanc */
|
||||
padding: 20px;
|
||||
border: 2px solid #a17b12; /* Bordure couleur thème */
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
|
||||
z-index: 1000;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px; /* Largeur fixe */
|
||||
}
|
||||
.popup h4 {
|
||||
margin: 0 0 15px 0;
|
||||
font-size: 1.5em;
|
||||
color: #a17b12; /* Couleur de texte */
|
||||
}
|
||||
.popup p {
|
||||
font-size: 1.2em;
|
||||
margin: 5px 0; /* Espacement entre les lignes */
|
||||
color: #333; /* Couleur de texte */
|
||||
}
|
||||
.popup button {
|
||||
background-color: #a17b12;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
border-radius: 5px; /* Arrondir les coins */
|
||||
margin-top: 15px; /* Espacement au-dessus du bouton */
|
||||
}
|
||||
.popup button:hover {
|
||||
background-color: #5f490b;
|
||||
}
|
||||
/* Style pour le détail du cours */
|
||||
.details-button {
|
||||
cursor: pointer;
|
||||
color: #a17b12;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.proposition-container {
|
||||
margin-top: 30px;
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.proposition-table th, .proposition-table td {
|
||||
padding: 12px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
.proposition-table th {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
.refuse-button{
|
||||
background-color: #a61414;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 15px;
|
||||
cursor: pointer;
|
||||
margin-right: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.refuse-button:hover{
|
||||
background-color: #590505;
|
||||
}
|
||||
|
||||
.accept-button {
|
||||
background-color: #077712;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 15px;
|
||||
cursor: pointer;
|
||||
margin-right: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.accept-button:hover {
|
||||
background-color: #0d5905;
|
||||
}
|
||||
/* Styles pour le formulaire de pièces justificatives */
|
||||
.justificatif-form {
|
||||
display: none; /* Cacher par défaut */
|
||||
margin-top: 20px;
|
||||
padding: 20px;
|
||||
background-color: #f8f8f8;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/* Styles pour la popup de confirmation */
|
||||
.confirmation-popup {
|
||||
display: none; /* Cacher par défaut */
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.confirmation-content {
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.validated-hours {
|
||||
margin-top: 20px;
|
||||
border-top: 1px solid #ccc;
|
||||
padding-top: 20px;
|
||||
}
|
||||
.validated-hours h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.status-valide {
|
||||
color: green; /* Pour le statut validé */
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.status-attente {
|
||||
color: rgb(255, 136, 0); /* Pour le statut en attente */
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Style général pour le conteneur de pagination */
|
||||
#pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
/* Style pour les boutons Précédent et Suivant */
|
||||
#pagination button {
|
||||
background-color: #a17b12; /* Couleur de fond verte */
|
||||
color: white; /* Couleur du texte */
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
margin: 0 5px; /* Espacement entre les boutons */
|
||||
border-radius: 5px; /* Coins arrondis */
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
/* Hover effect pour les boutons */
|
||||
#pagination button:hover {
|
||||
background-color: #5f490b; /* Couleur plus foncée au survol */
|
||||
}
|
||||
|
||||
/* Style du texte de la page actuelle */
|
||||
#pagination span {
|
||||
font-size: 18px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
/* Désactivation des boutons si nécessaire */
|
||||
#pagination button:disabled {
|
||||
background-color: #cccccc; /* Couleur gris clair si désactivé */
|
||||
cursor: not-allowed;
|
||||
}
|
||||
205
MaquetteWEB/css/PROF/paiements.css
Normal file
205
MaquetteWEB/css/PROF/paiements.css
Normal file
@ -0,0 +1,205 @@
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
.dashboard-container {
|
||||
max-width: 1500px;
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
}
|
||||
.header {
|
||||
background-color: #a17b12;
|
||||
color: white;
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
}
|
||||
.section-header {
|
||||
background-color: #f8f8f8;
|
||||
padding: 10px;
|
||||
border-left: 5px solid #a17b12;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.card {
|
||||
background-color: white;
|
||||
padding: 15px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
table th, table td {
|
||||
padding: 12px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
table th {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
.status-valide {
|
||||
color: green;
|
||||
font-weight: bold;
|
||||
}
|
||||
.status-attente {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* Styles pour les graphiques */
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
margin: 20px 0;
|
||||
}
|
||||
/* Styles pour le formulaire */
|
||||
.contact-form {
|
||||
margin-top: 30px;
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.contact-form h3 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.contact-form select, .contact-form input, .contact-form textarea {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
margin: 10px 0;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.contact-form button {
|
||||
background-color: #a17b12;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.contact-form button:hover {
|
||||
background-color: #5f490b;
|
||||
}
|
||||
.footer {
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
margin-top: 20px;
|
||||
background-color: #a17b12;
|
||||
color: white;
|
||||
}
|
||||
/* Styles pour le popup */
|
||||
/* Styles pour le popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: #fff; /* Blanc */
|
||||
padding: 20px;
|
||||
border: 2px solid #a17b12; /* Bordure couleur thème */
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
|
||||
z-index: 1000;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px; /* Largeur fixe */
|
||||
}
|
||||
.popup h4 {
|
||||
margin: 0 0 15px 0;
|
||||
font-size: 1.5em;
|
||||
color: #a17b12; /* Couleur de texte */
|
||||
}
|
||||
.popup p {
|
||||
font-size: 1.2em;
|
||||
margin: 5px 0; /* Espacement entre les lignes */
|
||||
color: #333; /* Couleur de texte */
|
||||
}
|
||||
.popup button {
|
||||
background-color: #a17b12;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
border-radius: 5px; /* Arrondir les coins */
|
||||
margin-top: 15px; /* Espacement au-dessus du bouton */
|
||||
}
|
||||
.popup button:hover {
|
||||
background-color: #5f490b;
|
||||
}
|
||||
|
||||
.header {
|
||||
background-color: #a17b12;
|
||||
color: white;
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.logo-container img {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.categories {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
margin-left: 50px;
|
||||
}
|
||||
.categories a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
.categories a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.user-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.user-name {
|
||||
margin-right: 15px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.logout-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.logout-container img {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
th[data-sort] {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
padding-right: 20px; /* Espace pour l'icône */
|
||||
}
|
||||
|
||||
/* Icône par défaut (tri croissant) */
|
||||
th::after {
|
||||
content: "▲";
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
font-size: 12px;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
/* Classe pour tri croissant */
|
||||
th.ascending::after {
|
||||
content: "▲"; /* Tri croissant */
|
||||
color: black; /* Icône active */
|
||||
}
|
||||
|
||||
/* Classe pour tri décroissant */
|
||||
th.descending::after {
|
||||
content: "▼"; /* Tri décroissant */
|
||||
color: black; /* Icône active */
|
||||
}
|
||||
136
MaquetteWEB/css/RH/rh.css
Normal file
136
MaquetteWEB/css/RH/rh.css
Normal file
@ -0,0 +1,136 @@
|
||||
|
||||
|
||||
body {
|
||||
font-family: 'Arial', sans-serif;
|
||||
background-color: #f4f4f4;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
|
||||
.logo-container img {
|
||||
height: 50px; /* Ajuster la taille du logo */
|
||||
}
|
||||
|
||||
.categories a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
padding: 10px 15px;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.categories a:hover {
|
||||
background-color: rgba(255, 255, 255, 0.2); /* Effet au survol */
|
||||
}
|
||||
|
||||
/* Section principale */
|
||||
main {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 20px;
|
||||
color: #0f431f; /* Couleur bleu */
|
||||
}
|
||||
|
||||
/* Table */
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 20px;
|
||||
background: white; /* Fond de la table */
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
th, td {
|
||||
padding: 12px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #dddddd; /* Bordure des cellules */
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: #0f431f; /* Couleur des en-têtes */
|
||||
color: white;
|
||||
}
|
||||
|
||||
tr:hover {
|
||||
background-color: #f1f1f1; /* Effet au survol des lignes */
|
||||
}
|
||||
|
||||
/* Boutons */
|
||||
button {
|
||||
background-color: #0f431f;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 15px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
margin-right: 5px; /* Espacement entre les boutons */
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #082d13; /* Couleur au survol */
|
||||
}
|
||||
|
||||
/* Styles pour le pop-up */
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: #fff;
|
||||
margin: 5% auto;
|
||||
padding: 20px;
|
||||
border: 1px solid #888;
|
||||
width: 70%;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.close {
|
||||
color: #aaa;
|
||||
float: right;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.close:hover,
|
||||
.close:focus {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Formulaire */
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
label {
|
||||
margin: 10px 0 5px; /* Espacement autour des labels */
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="date"] {
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 15px; /* Espacement entre les champs */
|
||||
}
|
||||
|
||||
input[type="text"]:focus,
|
||||
input[type="date"]:focus {
|
||||
border-color: #0f431f; /* Couleur de bordure au focus */
|
||||
outline: none; /* Enlève le contour par défaut */
|
||||
}
|
||||
194
MaquetteWEB/css/RH/style.css
Normal file
194
MaquetteWEB/css/RH/style.css
Normal file
@ -0,0 +1,194 @@
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #f4f4f4;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.header {
|
||||
background-color: #0f431f;
|
||||
color: white;
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.logo-container img {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.categories {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
.categories a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.categories a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.user-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
margin-right: 15px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.logout-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logout-container img {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.info-card {
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||||
margin-bottom: 20px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.info-card h2 {
|
||||
border-bottom: 2px solid #0f431f;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.info-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.info-table th,
|
||||
.info-table td {
|
||||
padding: 12px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.info-table th {
|
||||
background-color: #f8f8f8;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
color: white;
|
||||
background-color: #0f431f;
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
margin: 10px 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
background-color: #092d14;
|
||||
}
|
||||
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: rgb(0, 0, 0);
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: #fefefe;
|
||||
margin: 5% auto;
|
||||
padding: 20px;
|
||||
border: 1px solid #888;
|
||||
width: 80%;
|
||||
max-width: 400px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
|
||||
.footer {
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
background-color: #0f431f;
|
||||
color: white;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.details {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Dropdown menu */
|
||||
.dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: white;
|
||||
min-width: 200px;
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dropdown-content a {
|
||||
color: black;
|
||||
padding: 12px 16px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown-content a:hover {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
.dropdown:hover .dropdown-content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown:hover .dropbtn {
|
||||
background-color: #0f431f;
|
||||
}
|
||||
300
MaquetteWEB/css/VACATAIRE/mes-heures.css
Normal file
300
MaquetteWEB/css/VACATAIRE/mes-heures.css
Normal file
@ -0,0 +1,300 @@
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
.dashboard-container {
|
||||
max-width: 1500px;
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
}
|
||||
.header {
|
||||
background-color: #370559;
|
||||
color: white;
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
.logo-container img {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.categories {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-left: 50px;
|
||||
}
|
||||
.categories a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
.categories a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.user-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.user-name {
|
||||
margin-right: 15px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.logout-container img {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.section-header {
|
||||
background-color: #f8f8f8;
|
||||
padding: 10px;
|
||||
border-left: 5px solid #4a0777;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.card {
|
||||
background-color: white;
|
||||
padding: 15px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
table th, table td {
|
||||
padding: 12px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
table th {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
.status-valide {
|
||||
color: green;
|
||||
font-weight: bold;
|
||||
}
|
||||
.status-attente {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* Styles pour les graphiques */
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
margin: 20px 0;
|
||||
}
|
||||
/* Styles pour le formulaire */
|
||||
.contact-form {
|
||||
margin-top: 30px;
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.contact-form h3 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.contact-form select, .contact-form input {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
margin: 10px 0;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.contact-form button {
|
||||
background-color: #4a0777;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.contact-form button:hover {
|
||||
background-color: #370559;
|
||||
}
|
||||
.footer {
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
margin-top: 20px;
|
||||
background-color: #4a0777;
|
||||
color: white;
|
||||
}
|
||||
/* Styles pour le popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: #fff; /* Blanc */
|
||||
padding: 20px;
|
||||
border: 2px solid #4a0777; /* Bordure couleur thème */
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
|
||||
z-index: 1000;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px; /* Largeur fixe */
|
||||
}
|
||||
.popup h4 {
|
||||
margin: 0 0 15px 0;
|
||||
font-size: 1.5em;
|
||||
color: #4a0777; /* Couleur de texte */
|
||||
}
|
||||
.popup p {
|
||||
font-size: 1.2em;
|
||||
margin: 5px 0; /* Espacement entre les lignes */
|
||||
color: #333; /* Couleur de texte */
|
||||
}
|
||||
.popup button {
|
||||
background-color: #4a0777;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
border-radius: 5px; /* Arrondir les coins */
|
||||
margin-top: 15px; /* Espacement au-dessus du bouton */
|
||||
}
|
||||
.popup button:hover {
|
||||
background-color: #370559;
|
||||
}
|
||||
/* Style pour le détail du cours */
|
||||
.details-button {
|
||||
cursor: pointer;
|
||||
color: #4a0777;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.proposition-container {
|
||||
margin-top: 30px;
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.proposition-table th, .proposition-table td {
|
||||
padding: 12px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
.proposition-table th {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
.refuse-button{
|
||||
background-color: #a61414;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 15px;
|
||||
cursor: pointer;
|
||||
margin-right: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.refuse-button:hover{
|
||||
background-color: #590505;
|
||||
}
|
||||
|
||||
.accept-button {
|
||||
background-color: #077712;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 15px;
|
||||
cursor: pointer;
|
||||
margin-right: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.accept-button:hover {
|
||||
background-color: #0d5905;
|
||||
}
|
||||
/* Styles pour le formulaire de pièces justificatives */
|
||||
.justificatif-form {
|
||||
display: none; /* Cacher par défaut */
|
||||
margin-top: 20px;
|
||||
padding: 20px;
|
||||
background-color: #f8f8f8;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/* Styles pour la popup de confirmation */
|
||||
.confirmation-popup {
|
||||
display: none; /* Cacher par défaut */
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.confirmation-content {
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.validated-hours {
|
||||
margin-top: 20px;
|
||||
border-top: 1px solid #ccc;
|
||||
padding-top: 20px;
|
||||
}
|
||||
.validated-hours h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.status-valide {
|
||||
color: green; /* Pour le statut validé */
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.status-attente {
|
||||
color: rgb(255, 136, 0); /* Pour le statut en attente */
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Style général pour le conteneur de pagination */
|
||||
#pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
/* Style pour les boutons Précédent et Suivant */
|
||||
#pagination button {
|
||||
background-color: #4a0777; /* Couleur de fond verte */
|
||||
color: white; /* Couleur du texte */
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
margin: 0 5px; /* Espacement entre les boutons */
|
||||
border-radius: 5px; /* Coins arrondis */
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
/* Hover effect pour les boutons */
|
||||
#pagination button:hover {
|
||||
background-color: #3b085e; /* Couleur plus foncée au survol */
|
||||
}
|
||||
|
||||
/* Style du texte de la page actuelle */
|
||||
#pagination span {
|
||||
font-size: 18px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
/* Désactivation des boutons si nécessaire */
|
||||
#pagination button:disabled {
|
||||
background-color: #cccccc; /* Couleur gris clair si désactivé */
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
205
MaquetteWEB/css/VACATAIRE/paiements.css
Normal file
205
MaquetteWEB/css/VACATAIRE/paiements.css
Normal file
@ -0,0 +1,205 @@
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
.dashboard-container {
|
||||
max-width: 1500px;
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
}
|
||||
.header {
|
||||
background-color: #4a0777;
|
||||
color: white;
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
}
|
||||
.section-header {
|
||||
background-color: #f8f8f8;
|
||||
padding: 10px;
|
||||
border-left: 5px solid #4a0777;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.card {
|
||||
background-color: white;
|
||||
padding: 15px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
table th, table td {
|
||||
padding: 12px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
table th {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
.status-valide {
|
||||
color: green;
|
||||
font-weight: bold;
|
||||
}
|
||||
.status-attente {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* Styles pour les graphiques */
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
margin: 20px 0;
|
||||
}
|
||||
/* Styles pour le formulaire */
|
||||
.contact-form {
|
||||
margin-top: 30px;
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.contact-form h3 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.contact-form select, .contact-form input, .contact-form textarea {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
margin: 10px 0;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.contact-form button {
|
||||
background-color: #4a0777;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.contact-form button:hover {
|
||||
background-color: #370559;
|
||||
}
|
||||
.footer {
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
margin-top: 20px;
|
||||
background-color: #4a0777;
|
||||
color: white;
|
||||
}
|
||||
/* Styles pour le popup */
|
||||
/* Styles pour le popup */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: #fff; /* Blanc */
|
||||
padding: 20px;
|
||||
border: 2px solid #4a0777; /* Bordure couleur thème */
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
|
||||
z-index: 1000;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
width: 300px; /* Largeur fixe */
|
||||
}
|
||||
.popup h4 {
|
||||
margin: 0 0 15px 0;
|
||||
font-size: 1.5em;
|
||||
color: #4a0777; /* Couleur de texte */
|
||||
}
|
||||
.popup p {
|
||||
font-size: 1.2em;
|
||||
margin: 5px 0; /* Espacement entre les lignes */
|
||||
color: #333; /* Couleur de texte */
|
||||
}
|
||||
.popup button {
|
||||
background-color: #4a0777;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
border-radius: 5px; /* Arrondir les coins */
|
||||
margin-top: 15px; /* Espacement au-dessus du bouton */
|
||||
}
|
||||
.popup button:hover {
|
||||
background-color: #370559;
|
||||
}
|
||||
|
||||
.header {
|
||||
background-color: #370559;
|
||||
color: white;
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.logo-container img {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.categories {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
margin-left: 50px;
|
||||
}
|
||||
.categories a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
.categories a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.user-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.user-name {
|
||||
margin-right: 15px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.logout-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.logout-container img {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
th[data-sort] {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
padding-right: 20px; /* Espace pour l'icône */
|
||||
}
|
||||
|
||||
/* Icône par défaut (tri croissant) */
|
||||
th::after {
|
||||
content: "▲";
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
font-size: 12px;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
/* Classe pour tri croissant */
|
||||
th.ascending::after {
|
||||
content: "▲"; /* Tri croissant */
|
||||
color: black; /* Icône active */
|
||||
}
|
||||
|
||||
/* Classe pour tri décroissant */
|
||||
th.descending::after {
|
||||
content: "▼"; /* Tri décroissant */
|
||||
color: black; /* Icône active */
|
||||
}
|
||||
221
MaquetteWEB/css/VACATAIRE/vacataire.css
Normal file
221
MaquetteWEB/css/VACATAIRE/vacataire.css
Normal file
@ -0,0 +1,221 @@
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
.dashboard-container {
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
}
|
||||
.header {
|
||||
background-color: #370559;
|
||||
color: white;
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
}
|
||||
.section-header {
|
||||
background-color: #f8f8f8;
|
||||
padding: 10px;
|
||||
border-left: 5px solid #370559;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.card {
|
||||
background-color: white;
|
||||
padding: 15px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
table th, table td {
|
||||
padding: 12px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
table th {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
.alert {
|
||||
padding: 10px;
|
||||
margin-bottom: 20px;
|
||||
background-color: #f44336;
|
||||
color: white;
|
||||
position: relative;
|
||||
}
|
||||
.alert .close {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
}
|
||||
.success {
|
||||
padding: 10px;
|
||||
margin-bottom: 20px;
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
position: relative;
|
||||
}
|
||||
.success .close {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
}
|
||||
.btn {
|
||||
padding: 10px 15px;
|
||||
background-color: #370559;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
display: inline-block;
|
||||
}
|
||||
.btn:hover {
|
||||
background-color: #5a0bda;
|
||||
}
|
||||
.input-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.input-group label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.input-group input, .input-group select {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
}
|
||||
/* Styling for the modern schedule */
|
||||
.schedule-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.schedule-table {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
border-collapse: collapse;
|
||||
border: 1px solid #ddd;
|
||||
background-color: white;
|
||||
}
|
||||
.schedule-table th,
|
||||
.schedule-table td {
|
||||
border: 1px solid #ddd;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
.schedule-table th {
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
}
|
||||
.time-slot {
|
||||
background-color: #f9f9f9;
|
||||
font-weight: bold;
|
||||
width: 70px;
|
||||
}
|
||||
.class {
|
||||
background-color: #e3f2fd;
|
||||
color: #333;
|
||||
border-left: 5px solid #2141f3;
|
||||
text-align: left;
|
||||
padding-left: 10px;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
}
|
||||
.class span {
|
||||
font-size: 0.9em;
|
||||
color: #555;
|
||||
}
|
||||
.no-class {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
.week-navigation {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.week-navigation button {
|
||||
padding: 10px 15px;
|
||||
background-color: #370559;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.week-navigation button:hover {
|
||||
background-color: #2e0449;
|
||||
}
|
||||
.footer {
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
margin-top: 20px;
|
||||
background-color: #370559;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.dashboard-container {
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
}
|
||||
.header {
|
||||
background-color: #370559;
|
||||
color: white;
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.logo-container img {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.categories {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
margin-left: 50px;
|
||||
}
|
||||
.categories a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
.categories a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.user-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.user-name {
|
||||
margin-right: 15px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.logout-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.logout-container img {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
118
MaquetteWEB/css/index.css
Normal file
118
MaquetteWEB/css/index.css
Normal file
@ -0,0 +1,118 @@
|
||||
body {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
background-color: #bbd6fb; /* Fond bleu clair */
|
||||
color: #333; /* Couleur du texte */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.w3-container {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 36px;
|
||||
color: #0f126b; /* Titre en bleu foncé */
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
p.intro-text {
|
||||
font-size: 20px;
|
||||
color: #555; /* Texte d'intro en gris foncé */
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 20px;
|
||||
justify-items: center;
|
||||
margin-top: 20px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.profile-card {
|
||||
background-color: #ffffff; /* Fond blanc pour les cartes */
|
||||
border: 1px solid #ddd; /* Bordure grise légère */
|
||||
border-radius: 8px;
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
padding: 25px;
|
||||
text-align: center;
|
||||
transition: box-shadow 0.3s;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Ombre pour les cartes */
|
||||
}
|
||||
|
||||
.profile-card:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Ombre plus marquée au survol */
|
||||
opacity: 0.95; /* Légère transparence au survol */
|
||||
}
|
||||
|
||||
.profile-card img {
|
||||
width: 125px;
|
||||
height: 125px;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.profile-card h3 {
|
||||
font-size: 22px;
|
||||
color: #0f126b; /* Couleur du texte des cartes en bleu foncé */
|
||||
margin: 10px 0;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.profile-card p {
|
||||
font-size: 17px;
|
||||
color: #666; /* Couleur du texte en gris foncé */
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
margin-top: 40px;
|
||||
color: #888; /* Couleur du texte en gris clair */
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #0f126b; /* Couleur des liens en bleu foncé */
|
||||
}
|
||||
|
||||
/* Mode sombre */
|
||||
body.dark-mode {
|
||||
background-color: #0d1b2a; /* Fond bleu très foncé */
|
||||
color: #ffffff; /* Couleur du texte en blanc */
|
||||
}
|
||||
|
||||
body.dark-mode h1 {
|
||||
color: #ffffff; /* Titre en blanc */
|
||||
}
|
||||
|
||||
body.dark-mode p.intro-text {
|
||||
color: #e0e0e0; /* Texte d'introduction en gris clair */
|
||||
}
|
||||
|
||||
body.dark-mode .profile-card {
|
||||
background-color: #1c2b4b; /* Cartes en bleu foncé */
|
||||
border: 1px solid #2a4a69; /* Bordure plus sombre en bleu */
|
||||
}
|
||||
|
||||
body.dark-mode .profile-card h3 {
|
||||
color: #ffffff; /* Couleur des titres des cartes en blanc */
|
||||
}
|
||||
|
||||
body.dark-mode .profile-card p {
|
||||
color: #d1d1d1; /* Couleur du texte en gris clair */
|
||||
}
|
||||
|
||||
body.dark-mode footer {
|
||||
color: #cccccc; /* Texte du footer en gris clair */
|
||||
}
|
||||
|
||||
body.dark-mode a {
|
||||
color: #ffffff; /* Lien en blanc */
|
||||
}
|
||||
19
MaquetteWEB/css/mentions_legales.css
Normal file
19
MaquetteWEB/css/mentions_legales.css
Normal file
@ -0,0 +1,19 @@
|
||||
body {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
background-color: #f9f9f9;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
color: #0f1878; /* Bleu */
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.email {
|
||||
font-weight: bold;
|
||||
color: #1631c8;
|
||||
}
|
||||
768
MaquetteWEB/html/CHEF/chef_departement.html
Normal file
768
MaquetteWEB/html/CHEF/chef_departement.html
Normal file
File diff suppressed because it is too large
Load Diff
842
MaquetteWEB/html/CHEF/gestion-edt.html
Normal file
842
MaquetteWEB/html/CHEF/gestion-edt.html
Normal file
File diff suppressed because it is too large
Load Diff
373
MaquetteWEB/html/CHEF/gestion-heures-formation.html
Normal file
373
MaquetteWEB/html/CHEF/gestion-heures-formation.html
Normal file
@ -0,0 +1,373 @@
|
||||
<!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-formation.css">
|
||||
<style>
|
||||
/* Styles pour le modal */
|
||||
.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 */
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
|
||||
.modal-content {
|
||||
background-color: #fefefe;
|
||||
margin: 5% 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;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
position: relative;
|
||||
margin: 20px 0;
|
||||
width: 100%;
|
||||
max-width: 1200px; /* Largeur max du graphique */
|
||||
height: 400px; /* Hauteur du graphique */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="header">
|
||||
<div class="logo-container">
|
||||
<img src="../../media/img/logoWhite.png" alt="Logo Accueil">
|
||||
</div>
|
||||
|
||||
<div class="categories">
|
||||
<a href="./chef_departement.html">Accueil</a>
|
||||
|
||||
<div class="dropdown">
|
||||
<a href="javascript:void(0)" class="dropbtn">Gestion des heures</a>
|
||||
<div class="dropdown-content">
|
||||
<a href="./gestion-heures-professeur.html">Professeur</a>
|
||||
<a href="./gestion-heures-formation.html">Formation</a>
|
||||
<a href="./gestion-edt.html">EDT</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="./paiements.html">Pilotage budgétaire</a>
|
||||
<a href="./mes-informations.html">Mes informations et documents</a>
|
||||
</div>
|
||||
|
||||
<div class="user-section">
|
||||
<div class="user-name">
|
||||
Florent MADELAINE
|
||||
</div>
|
||||
<div class="logout-container">
|
||||
<a href="../../index.html" title="Se déconnecter">
|
||||
<img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<input type="text" id="searchBar" class="search-bar" placeholder="Rechercher une formation..." onkeyup="searchFormation()">
|
||||
|
||||
<div class="info-card">
|
||||
<h2>Détails des Formations</h2>
|
||||
<table class="info-table" id="formationTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Formation</th>
|
||||
<th>Nombre total d'heures</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>BUT1 Informatique</td>
|
||||
<td>400h</td>
|
||||
<td>
|
||||
<button class="action-btn" onclick="toggleDetails(this, 'but1-details')">Voir</button>
|
||||
<button class="action-btn" onclick="openModal('BUT1 Informatique')">Ajouter des heures</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="details" id="but1-details">
|
||||
<td colspan="3">
|
||||
<strong>Détails des heures :</strong>
|
||||
<ul>
|
||||
<li>Maxime MENAULT - Groupe 1 : 30h</li>
|
||||
<li>Denis MONNERAT - Groupe 2 : 45h</li>
|
||||
<li>Période : Semestre 1</li>
|
||||
</ul>
|
||||
<!-- Graphique pour BUT1 Informatique -->
|
||||
<div class="chart-container">
|
||||
<canvas id="but1Chart"></canvas>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>BUT2 Informatique FA</td>
|
||||
<td>600h</td>
|
||||
<td>
|
||||
<button class="action-btn" onclick="toggleDetails(this, 'master-details')">Voir</button>
|
||||
<button class="action-btn" onclick="openModal('BUT2 Informatique FA')">Ajouter des heures</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="details" id="master-details">
|
||||
<td colspan="3">
|
||||
<strong>Détails des heures :</strong>
|
||||
<ul>
|
||||
<li>Maxime MENAULT - Groupe FA : 50h</li>
|
||||
<li>Denis MONNERAT - Groupe FA : 90h</li>
|
||||
<li>Période : Semestre 2</li>
|
||||
</ul>
|
||||
<!-- Graphique pour BUT2 Informatique FA -->
|
||||
<div class="chart-container">
|
||||
<canvas id="masterChart"></canvas>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<canvas id="totalHoursChart"></canvas>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Modal pour ajouter des heures -->
|
||||
<div id="myModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close" onclick="closeModal()">×</span>
|
||||
<h2>Ajouter des heures</h2>
|
||||
<form id="addHoursForm">
|
||||
<label for="professor">Choisissez un professeur :</label>
|
||||
<select id="professor" name="professor">
|
||||
<option value="Denis MONNERAT">Denis MONNERAT (Permanent)</option>
|
||||
<option value="Maxime MENAULT">Maxime MENAULT (Vacataire)</option>
|
||||
</select>
|
||||
<br><br>
|
||||
|
||||
<label for="subject">Choisissez une matière :</label>
|
||||
<select id="subject" name="subject">
|
||||
<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>
|
||||
|
||||
<!-- Nouveau champ pour la date -->
|
||||
<label for="date">Date :</label>
|
||||
<input type="date" id="date" name="date" required>
|
||||
<br><br>
|
||||
|
||||
<!-- Nouveau champ pour l'heure -->
|
||||
<label for="time">Heure de début :</label>
|
||||
<input type="time" id="time" name="time" required>
|
||||
<br><br>
|
||||
|
||||
<!-- Nouveau champ pour l'heure -->
|
||||
<label for="time">Heure de fin :</label>
|
||||
<input type="time" id="time" name="time" required>
|
||||
<br><br>
|
||||
|
||||
<!-- Nouveau champ pour la salle -->
|
||||
<label for="classroom">Salle de classe :</label>
|
||||
<input type="text" id="classroom" name="classroom" placeholder="Ex: 224" required>
|
||||
<br><br>
|
||||
|
||||
<button type="button" onclick="submitHours()">Ajouter</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Modal de confirmation -->
|
||||
<div id="confirmationModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close" onclick="closeConfirmationModal()">×</span>
|
||||
<h2>Confirmation</h2>
|
||||
<p>Les heures ont été ajoutées avec succès.</p>
|
||||
<p>Un e-mail a été envoyé au professeur.</p>
|
||||
</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>
|
||||
// Fonction pour afficher ou masquer les détails d'une formation et changer le texte du bouton
|
||||
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 le texte du bouton en "Fermer"
|
||||
// Dessiner le graphique lorsque les détails sont affichés
|
||||
if (detailId === 'but1-details') {
|
||||
drawChart('but1Chart', 'BUT1 Informatique', [30, 45], ['Maxime MENAULT', 'Denis MONNERAT']);
|
||||
} else if (detailId === 'master-details') {
|
||||
drawChart('masterChart', 'BUT2 Informatique FA', [50, 90], ['Maxime MENAULT', 'Denis MONNERAT']);
|
||||
}
|
||||
} else {
|
||||
detailsRow.style.display = "none";
|
||||
button.textContent = "Voir"; // Remet le texte du bouton à "Voir"
|
||||
}
|
||||
}
|
||||
|
||||
// Fonction de recherche des formations
|
||||
function searchFormation() {
|
||||
const input = document.getElementById("searchBar").value.toLowerCase();
|
||||
const table = document.getElementById("formationTable");
|
||||
const rows = table.getElementsByTagName("tr");
|
||||
|
||||
for (let i = 1; i < rows.length; i++) {
|
||||
const cells = rows[i].getElementsByTagName("td");
|
||||
if (cells.length > 0) {
|
||||
const formationName = cells[0].innerText.toLowerCase();
|
||||
if (formationName.includes(input)) {
|
||||
rows[i].style.display = "";
|
||||
} else {
|
||||
rows[i].style.display = "none";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fonction pour ouvrir le modal pour ajouter des heures
|
||||
function openModal(formationName) {
|
||||
document.getElementById("myModal").style.display = "block";
|
||||
}
|
||||
|
||||
// Fonction pour fermer le modal
|
||||
function closeModal() {
|
||||
document.getElementById("myModal").style.display = "none";
|
||||
document.getElementById("addHoursForm").reset(); // Réinitialiser le formulaire
|
||||
}
|
||||
|
||||
// Fonction pour soumettre les heures ajoutées
|
||||
function submitHours() {
|
||||
const professor = document.getElementById("professor").value;
|
||||
const subject = document.getElementById("subject").value;
|
||||
const hours = document.getElementById("hours").value;
|
||||
|
||||
// Ici, vous pouvez ajouter la logique pour mettre à jour la table des formations
|
||||
// Exemple : ajouter les heures à la table
|
||||
|
||||
// Ouvrir le modal de confirmation
|
||||
document.getElementById("confirmationModal").style.display = "block";
|
||||
|
||||
// Fermer le modal d'ajout d'heures
|
||||
closeModal();
|
||||
}
|
||||
|
||||
// Fonction pour fermer le modal de confirmation
|
||||
function closeConfirmationModal() {
|
||||
document.getElementById("confirmationModal").style.display = "none";
|
||||
}
|
||||
|
||||
// Fonction pour dessiner le graphique
|
||||
function drawChart(chartId, label, data, labels) {
|
||||
const ctx = document.getElementById(chartId).getContext('2d');
|
||||
const myChart = new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
label: label,
|
||||
data: data,
|
||||
backgroundColor: [
|
||||
'rgba(255, 99, 132, 0.2)',
|
||||
'rgba(54, 162, 235, 0.2)',
|
||||
],
|
||||
borderColor: [
|
||||
'rgba(255, 99, 132, 1)',
|
||||
'rgba(54, 162, 235, 1)',
|
||||
],
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Fonction pour dessiner le graphique général
|
||||
function drawTotalHoursChart() {
|
||||
const ctx = document.getElementById('totalHoursChart').getContext('2d');
|
||||
const totalHoursChart = new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ['BUT1 Informatique', 'BUT2 Informatique FA'],
|
||||
datasets: [{
|
||||
label: 'Total d\'heures',
|
||||
data: [400, 600], // Remplacez ces valeurs par le total d'heures pour chaque formation
|
||||
backgroundColor: [
|
||||
'rgba(255, 99, 132, 0.2)',
|
||||
'rgba(54, 162, 235, 0.2)',
|
||||
],
|
||||
borderColor: [
|
||||
'rgba(255, 99, 132, 1)',
|
||||
'rgba(54, 162, 235, 1)',
|
||||
],
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Dessiner le graphique général après le chargement de la page
|
||||
window.onload = function() {
|
||||
drawTotalHoursChart();
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
723
MaquetteWEB/html/CHEF/gestion-heures-professeur.html
Normal file
723
MaquetteWEB/html/CHEF/gestion-heures-professeur.html
Normal file
File diff suppressed because it is too large
Load Diff
582
MaquetteWEB/html/CHEF/mes-informations.html
Normal file
582
MaquetteWEB/html/CHEF/mes-informations.html
Normal file
File diff suppressed because it is too large
Load Diff
296
MaquetteWEB/html/CHEF/paiements.html
Normal file
296
MaquetteWEB/html/CHEF/paiements.html
Normal file
@ -0,0 +1,296 @@
|
||||
<!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>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<link rel="stylesheet" href="../../css/CHEF/gestion-heures-professeur.css">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.section {
|
||||
flex: 1;
|
||||
min-width: 300px;
|
||||
margin: 20px;
|
||||
padding: 20px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.section h2 {
|
||||
text-align: center;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
canvas {
|
||||
max-width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table th, table td {
|
||||
border: 1px solid #ddd;
|
||||
padding: 10px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table th {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
.filters {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.filters select {
|
||||
padding: 8px;
|
||||
font-size: 16px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.filters input {
|
||||
padding: 8px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
margin: 20px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.button-container button {
|
||||
padding: 10px 20px;
|
||||
font-size: 16px;
|
||||
margin: 0 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<div class="logo-container">
|
||||
<img src="../../media/img/logoWhite.png" alt="Logo Accueil">
|
||||
</div>
|
||||
|
||||
<div class="categories">
|
||||
<a href="./chef_departement.html">Accueil</a>
|
||||
|
||||
<div class="dropdown">
|
||||
<a href="javascript:void(0)" class="dropbtn">Gestion des heures</a>
|
||||
<div class="dropdown-content">
|
||||
<a href="./gestion-heures-professeur.html">Professeur</a>
|
||||
<a href="./gestion-heures-formation.html">Formation</a>
|
||||
<a href="./gestion-edt.html">EDT</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="./paiements.html">Pilotage budgétaire</a>
|
||||
<a href="./mes-informations.html">Mes informations et documents</a>
|
||||
</div>
|
||||
|
||||
<div class="user-section">
|
||||
<div class="user-name">
|
||||
Florent MADELAINE
|
||||
</div>
|
||||
<div class="logout-container">
|
||||
<a href="../../index.html" title="Se déconnecter">
|
||||
<img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<!-- Résumé des finances globales -->
|
||||
<div class="section">
|
||||
<h2>Résumé des Finances</h2>
|
||||
<canvas id="budgetOverview"></canvas>
|
||||
</div>
|
||||
|
||||
<!-- Répartition des heures -->
|
||||
<div class="section">
|
||||
<h2>Répartition des Heures</h2>
|
||||
<canvas id="hoursDistribution"></canvas>
|
||||
</div>
|
||||
|
||||
<!-- Bilan des formations -->
|
||||
<div class="section">
|
||||
<h2>Bilan des dépenses mensuels</h2>
|
||||
<canvas id="formationBalance"></canvas>
|
||||
</div>
|
||||
|
||||
<!-- Bilan comptable détaillé -->
|
||||
<div class="section">
|
||||
<h2>Bilan Comptable</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Formation</th>
|
||||
<th>Budget Alloué</th>
|
||||
<th>Budget Utilisé</th>
|
||||
<th>Bénéfices</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>BUT Informatique</td>
|
||||
<td>500 000 €</td>
|
||||
<td>420 000 €</td>
|
||||
<td>80 000 €</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>BUT Génie Mécanique</td>
|
||||
<td>600 000 €</td>
|
||||
<td>580 000 €</td>
|
||||
<td>20 000 €</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Licence Mathématiques</td>
|
||||
<td>300 000 €</td>
|
||||
<td>250 000 €</td>
|
||||
<td>50 000 €</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Button Container -->
|
||||
<div class="button-container">
|
||||
<button id="downloadCharts">Télécharger les Graphiques</button>
|
||||
<button id="downloadCSV">Télécharger en CSV</button>
|
||||
<button id="importCSV">Importer des données CSV</button>
|
||||
</div>
|
||||
|
||||
<!-- Script Chart.js pour les graphiques -->
|
||||
<script>
|
||||
// Résumé des finances globales
|
||||
const ctx1 = document.getElementById('budgetOverview').getContext('2d');
|
||||
const budgetOverview = new Chart(ctx1, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ['Informatique', 'Génie Mécanique', 'Mathématiques', 'Chimie'],
|
||||
datasets: [{
|
||||
label: 'Budget Alloué (€)',
|
||||
data: [500000, 600000, 300000, 450000],
|
||||
backgroundColor: 'rgba(75, 192, 192, 0.2)',
|
||||
borderColor: 'rgba(75, 192, 192, 1)',
|
||||
borderWidth: 1
|
||||
}, {
|
||||
label: 'Budget Utilisé (€)',
|
||||
data: [420000, 580000, 250000, 430000],
|
||||
backgroundColor: 'rgba(255, 99, 132, 0.2)',
|
||||
borderColor: 'rgba(255, 99, 132, 1)',
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Répartition des heures
|
||||
const ctx2 = document.getElementById('hoursDistribution').getContext('2d');
|
||||
const hoursDistribution = new Chart(ctx2, {
|
||||
type: 'pie',
|
||||
data: {
|
||||
labels: ['Permanents', 'Heures Complémentaires', 'Vacataires'],
|
||||
datasets: [{
|
||||
label: 'Heures de travail',
|
||||
data: [60, 25, 15],
|
||||
backgroundColor: [
|
||||
'rgba(54, 162, 235, 0.2)',
|
||||
'rgba(255, 206, 86, 0.2)',
|
||||
'rgba(75, 192, 192, 0.2)'
|
||||
],
|
||||
borderColor: [
|
||||
'rgba(54, 162, 235, 1)',
|
||||
'rgba(255, 206, 86, 1)',
|
||||
'rgba(75, 192, 192, 1)'
|
||||
],
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true
|
||||
}
|
||||
});
|
||||
|
||||
// Bilan des formations
|
||||
const ctx3 = document.getElementById('formationBalance').getContext('2d');
|
||||
const formationBalance = new Chart(ctx3, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Juin'],
|
||||
datasets: [{
|
||||
label: 'BUT Informatique',
|
||||
data: [70000, 90000, 80000, 85000, 90000, 95000],
|
||||
borderColor: 'rgba(75, 192, 192, 1)',
|
||||
backgroundColor: 'rgba(75, 192, 192, 0.2)',
|
||||
fill: true
|
||||
}, {
|
||||
label: 'BUT Génie Mécanique',
|
||||
data: [80000, 82000, 81000, 78000, 84000, 86000],
|
||||
borderColor: 'rgba(153, 102, 255, 1)',
|
||||
backgroundColor: 'rgba(153, 102, 255, 0.2)',
|
||||
fill: true
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Function to download charts as images
|
||||
document.getElementById('downloadCharts').addEventListener('click', function () {
|
||||
const chartIds = ['budgetOverview', 'hoursDistribution', 'formationBalance'];
|
||||
chartIds.forEach(id => {
|
||||
const chart = document.getElementById(id);
|
||||
const link = document.createElement('a');
|
||||
link.href = chart.toDataURL('image/png');
|
||||
link.download = `${id}.png`;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
});
|
||||
});
|
||||
|
||||
// Function to download table data as CSV
|
||||
document.getElementById('downloadCSV').addEventListener('click', function () {
|
||||
const table = document.querySelector('table');
|
||||
const rows = Array.from(table.rows);
|
||||
const csvContent = rows.map(row => Array.from(row.cells).map(cell => cell.textContent).join(",")).join("\n");
|
||||
|
||||
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
|
||||
const link = document.createElement('a');
|
||||
link.href = URL.createObjectURL(blob);
|
||||
link.download = 'bilan_comptable.csv';
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
205
MaquetteWEB/html/FINANCE/finance.html
Normal file
205
MaquetteWEB/html/FINANCE/finance.html
Normal file
@ -0,0 +1,205 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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="stylesheet" href="../../css/FINANCE/finance.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="header">
|
||||
<!-- Logo pour retourner à l'accueil -->
|
||||
<div class="logo-container">
|
||||
<img src="../../media/img/logoWhite.png" alt="Logo Accueil">
|
||||
</div>
|
||||
|
||||
<!-- Catégories dans le header -->
|
||||
<div class="categories">
|
||||
<a href="./finance.html">Accueil</a>
|
||||
<a href="./paiements_en_attente.html">Paiements en attente</a>
|
||||
<a href="./rapports_financiers.html">Rapports Financiers</a>
|
||||
<a href="./historique_paiements.html">Historique des transactions</a>
|
||||
<a href="./mes_informations.html">Mes informations et documents</a>
|
||||
</div>
|
||||
|
||||
<!-- Section utilisateur avec déconnexion -->
|
||||
<div class="user-section">
|
||||
<div class="user-name">
|
||||
Jean DUPONT
|
||||
</div>
|
||||
<div class="logout-container">
|
||||
<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">
|
||||
<!-- Alertes et Notifications -->
|
||||
<div class="section-header" id="notifications-section">
|
||||
<h2>Alertes et Notifications</h2>
|
||||
</div>
|
||||
<div id="notifications-container">
|
||||
<!-- Notifications -->
|
||||
<div class="alert">
|
||||
<span class="close" onclick="this.parentElement.style.display='none';">×</span>
|
||||
<p><strong>Paiements en attente :</strong> Vous avez des paiements qui n'ont pas encore été traités. Merci de vérifier dans : <a href="paiements_en_attente.html">Paiements en attente</a>.</p>
|
||||
</div>
|
||||
<div class="success">
|
||||
<span class="close" onclick="this.parentElement.style.display='none';">×</span>
|
||||
<p><strong>Rapport validé :</strong> Votre dernier rapport financier a été validé. Vous pouvez le consulter dans : <a href="rapports_financiers.html">Rapports Financiers</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Script pour gérer l'affichage des notifications -->
|
||||
<script>
|
||||
const notificationsContainer = document.getElementById('notifications-container');
|
||||
const notificationsSection = document.getElementById('notifications-section');
|
||||
|
||||
// Vérifiez si le conteneur des notifications est vide
|
||||
if (notificationsContainer.childElementCount === 0) {
|
||||
notificationsSection.style.display = 'none'; // Masquer la section si aucune notification
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Paiements en attente -->
|
||||
<div class="section-header">
|
||||
<h2>Paiements en Attente</h2>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="table-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID Transaction</th>
|
||||
<th>Période</th>
|
||||
<th>Montant en Attente (€)</th>
|
||||
<th>Date prévue de paiement</th>
|
||||
<th>Statut</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>002</td>
|
||||
<td>Octobre 2024</td>
|
||||
<td>1200,00</td>
|
||||
<td>15/10/2024</td>
|
||||
<td>En attente</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>003</td>
|
||||
<td>Novembre 2024</td>
|
||||
<td>1800,00</td>
|
||||
<td>15/11/2024</td>
|
||||
<td>En attente</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="button-container" style="text-align: center; margin-top: 20px;">
|
||||
<a href="./paiements_en_attente.html">
|
||||
<button class="button see-more" style="padding: 10px 20px; background-color: #20195e; color: white; border: none; border-radius: 4px; cursor: pointer;">
|
||||
Voir plus
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Rapports Financiers -->
|
||||
<div class="section-header">
|
||||
<h2>Rapports Financiers</h2>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="table-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Rapport</th>
|
||||
<th>Date de création</th>
|
||||
<th>Statut</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Rapport d'Octobre 2024</td>
|
||||
<td>01/10/2024</td>
|
||||
<td>Validé</td>
|
||||
<td><a href="rapports_financiers.html#octobre2024" class="btn">Voir Rapport</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rapport de Novembre 2024</td>
|
||||
<td>01/11/2024</td>
|
||||
<td>En cours</td>
|
||||
<td><a href="#" class="btn">Préparer Rapport</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="button-container" style="text-align: center; margin-top: 20px;">
|
||||
<a href="./rapports_financiers.html">
|
||||
<button class="button see-more" style="padding: 10px 20px; background-color: #20195e; color: white; border: none; border-radius: 4px; cursor: pointer;">
|
||||
Voir plus
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Historique des paiements du personnel -->
|
||||
<div class="section-header">
|
||||
<h2>Historique des Paiements du Personnel</h2>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="table-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Période</th>
|
||||
<th>Personnel</th>
|
||||
<th>Montant (€)</th>
|
||||
<th>Date de Paiement</th>
|
||||
<th>Bulletin de paie</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Septembre 2024</td>
|
||||
<td>Denis MONNERAT (permanent)</td>
|
||||
<td>1800,00</td>
|
||||
<td>01/10/2024</td>
|
||||
<td><a href="https://ensap.gouv.fr" target="_blank" class="btn">Voir Bulletin</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Août 2024</td>
|
||||
<td>Maxime MENAULT (vacataire)</td>
|
||||
<td>870,00</td>
|
||||
<td>01/09/2024</td>
|
||||
<td><a href="https://ensap.gouv.fr" target="_blank" class="btn">Voir Bulletin</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="button-container" style="text-align: center; margin-top: 20px;">
|
||||
<a href="./historique_paiements.html">
|
||||
<button class="button see-more" style="padding: 10px 20px; background-color: #20195e; color: white; border: none; border-radius: 4px; cursor: pointer;">
|
||||
Voir plus
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
202
MaquetteWEB/html/FINANCE/historique_paiements.html
Normal file
202
MaquetteWEB/html/FINANCE/historique_paiements.html
Normal file
@ -0,0 +1,202 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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="stylesheet" href="../../css/FINANCE/style.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;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
th, td {
|
||||
border: 1px solid #ddd;
|
||||
padding: 10px;
|
||||
text-align: left;
|
||||
}
|
||||
th {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
.button {
|
||||
padding: 10px 15px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.block { background-color: #f44336; }
|
||||
.cancel { background-color: #ff9800; }
|
||||
.unblock { background-color: #4caf50; }
|
||||
.send { background-color: #2196F3; }
|
||||
.status-en-attente { background-color: #ffeb3b; color: black; }
|
||||
.status-bloque { background-color: #f44336; color: white; }
|
||||
.status-annule { background-color: #ff9800; color: white; }
|
||||
.status-debloque { background-color: #4caf50; color: white; }
|
||||
.status-envoye { background-color: #2196F3; color: white; }
|
||||
.filter-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.filter-input {
|
||||
padding: 10px;
|
||||
width: 300px;
|
||||
margin-right: 10px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
.filter-button {
|
||||
padding: 10px 15px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.filter-all { background-color: #888; }
|
||||
.filter-waiting { background-color: #ffeb3b; color: black; }
|
||||
.filter-blocked { background-color: #f44336; }
|
||||
.filter-canceled { background-color: #ff9800; }
|
||||
.filter-paid { background-color: #2196F3; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="header">
|
||||
<div class="logo-container">
|
||||
<img src="../../media/img/logoWhite.png" alt="Logo Accueil">
|
||||
</div>
|
||||
<div class="categories">
|
||||
<a href="./finance.html">Accueil</a>
|
||||
<a href="./paiements_en_attente.html">Paiements en attente</a>
|
||||
<a href="./rapports_financiers.html">Rapports Financiers</a>
|
||||
<a href="./historique_paiements.html">Historique des transactions</a>
|
||||
<a href="./mes_informations.html">Mes informations et documents</a>
|
||||
</div>
|
||||
<div class="user-section">
|
||||
<div class="user-name">Jean DUPONT</div>
|
||||
<div class="logout-container">
|
||||
<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="card">
|
||||
<h2>Historique des Transactions</h2>
|
||||
|
||||
<!-- Section de filtre -->
|
||||
<div class="filter-section">
|
||||
<input type="text" id="nameFilter" class="filter-input" placeholder="Rechercher par nom..." oninput="filterTable()">
|
||||
<button class="filter-button filter-all" onclick="filterByStatus('')">Tous</button>
|
||||
<button class="filter-button filter-waiting" onclick="filterByStatus('En attente')">En attente</button>
|
||||
<button class="filter-button filter-blocked" onclick="filterByStatus('Bloqué')">Bloqué</button>
|
||||
<button class="filter-button filter-canceled" onclick="filterByStatus('Annulé')">Annulé</button>
|
||||
<button class="filter-button filter-paid" onclick="filterByStatus('Salaire payer')">Payé</button>
|
||||
</div>
|
||||
|
||||
<!-- Tableau des transactions -->
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID Paiement</th>
|
||||
<th>Nom du Bénéficiaire</th>
|
||||
<th>Montant (€)</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="paymentTableBody">
|
||||
<tr>
|
||||
<td>002</td>
|
||||
<td>Maxime Menault</td>
|
||||
<td>1200,00</td>
|
||||
<td class="status-bloque">Bloqué</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>003</td>
|
||||
<td>Denis Monnerat</td>
|
||||
<td>1800,00</td>
|
||||
<td class="status-envoye">Salaire payer</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>004</td>
|
||||
<td>Sophie Bernard</td>
|
||||
<td>1350,00</td>
|
||||
<td class="status-annule">Annulé</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>005</td>
|
||||
<td>Lucas Leroy</td>
|
||||
<td>2000,00</td>
|
||||
<td class="status-bloque">Bloqué</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>006</td>
|
||||
<td>Julie Robert</td>
|
||||
<td>1600,00</td>
|
||||
<td class="status-envoye">Salaire payer</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>007</td>
|
||||
<td>Emilie Caron</td>
|
||||
<td>1750,00</td>
|
||||
<td class="status-envoye">Salaire payer</td>
|
||||
</tr>
|
||||
</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>
|
||||
// Filtre par nom
|
||||
function filterTable() {
|
||||
const filter = document.getElementById("nameFilter").value.toLowerCase();
|
||||
const rows = document.querySelectorAll("#paymentTableBody tr");
|
||||
rows.forEach(row => {
|
||||
const nameCell = row.cells[1].textContent.toLowerCase();
|
||||
if (nameCell.includes(filter)) {
|
||||
row.style.display = "";
|
||||
} else {
|
||||
row.style.display = "none";
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Filtre par statut
|
||||
function filterByStatus(status) {
|
||||
const rows = document.querySelectorAll("#paymentTableBody tr");
|
||||
rows.forEach(row => {
|
||||
const statusCell = row.cells[3].textContent;
|
||||
if (status === "" || statusCell === status) {
|
||||
row.style.display = "";
|
||||
} else {
|
||||
row.style.display = "none";
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
576
MaquetteWEB/html/FINANCE/mes_informations.html
Normal file
576
MaquetteWEB/html/FINANCE/mes_informations.html
Normal file
File diff suppressed because it is too large
Load Diff
303
MaquetteWEB/html/FINANCE/paiements_en_attente.html
Normal file
303
MaquetteWEB/html/FINANCE/paiements_en_attente.html
Normal file
@ -0,0 +1,303 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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="stylesheet" href="../../css/FINANCE/style.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;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
th, td {
|
||||
border: 1px solid #ddd;
|
||||
padding: 10px;
|
||||
text-align: left;
|
||||
}
|
||||
th {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
.button {
|
||||
padding: 10px 15px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.block { background-color: #f44336; } /* Red */
|
||||
.cancel { background-color: #ff9800; } /* Orange */
|
||||
.unblock { background-color: #4caf50; } /* Green */
|
||||
.send { background-color: #2196F3; } /* Blue */
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0,0,0,0.7);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.popup-content {
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
width: 300px;
|
||||
text-align: center;
|
||||
}
|
||||
.close {
|
||||
background-color: #f44336;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 5px 10px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.confirm {
|
||||
background-color: #4caf50;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 5px 10px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
/* Classes pour les différents statuts */
|
||||
.status-en-attente {
|
||||
background-color: #ffeb3b; /* Jaune pour "En attente" */
|
||||
color: black;
|
||||
}
|
||||
.status-bloque {
|
||||
background-color: #f44336; /* Rouge pour "Bloqué" */
|
||||
color: white;
|
||||
}
|
||||
.status-annule {
|
||||
background-color: #ff9800; /* Orange pour "Annulé" */
|
||||
color: white;
|
||||
}
|
||||
.status-debloque {
|
||||
background-color: #4caf50; /* Vert pour "Débloqué" */
|
||||
color: white;
|
||||
}
|
||||
.status-envoye {
|
||||
background-color: #2196F3; /* Bleu pour "Envoyé" */
|
||||
color: white;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="header">
|
||||
<!-- Logo pour retourner à l'accueil -->
|
||||
<div class="logo-container">
|
||||
<img src="../../media/img/logoWhite.png" alt="Logo Accueil">
|
||||
</div>
|
||||
|
||||
<!-- Catégories dans le header -->
|
||||
<div class="categories">
|
||||
<a href="./finance.html">Accueil</a>
|
||||
<a href="./paiements_en_attente.html">Paiements en attente</a>
|
||||
<a href="./rapports_financiers.html">Rapports Financiers</a>
|
||||
<a href="./historique_paiements.html">Historique des transactions</a>
|
||||
<a href="./mes_informations.html">Mes informations et documents</a>
|
||||
</div>
|
||||
|
||||
<!-- Section utilisateur avec déconnexion -->
|
||||
<div class="user-section">
|
||||
<div class="user-name">
|
||||
Jean DUPONT
|
||||
</div>
|
||||
<div class="logout-container">
|
||||
<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="card">
|
||||
<h2>Liste des paiements en attente de traitement</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID Paiement</th>
|
||||
<th>Nom du Bénéficiaire</th>
|
||||
<th>Montant (€)</th>
|
||||
<th>Status</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="paymentTableBody">
|
||||
<tr>
|
||||
<td>002</td>
|
||||
<td>Maxime Menault (vacataire)</td>
|
||||
<td>1200,00</td>
|
||||
<td id="status-2">En attente</td>
|
||||
<td>
|
||||
<button class="button block" onclick="openPopup('bloquer', 2)">Bloquer</button>
|
||||
<button class="button cancel" onclick="openPopup('annuler', 2)">Annuler</button>
|
||||
<button class="button unblock" onclick="openPopup('débloquer', 2)">Débloquer</button>
|
||||
<button class="button send" onclick="openPopup('envoyer', 2)">Payer</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>003</td>
|
||||
<td>Denis Monnerat (permanent)</td>
|
||||
<td>1800,00</td>
|
||||
<td id="status-3">En attente</td>
|
||||
<td>
|
||||
<button class="button block" onclick="openPopup('bloquer', 3)">Bloquer</button>
|
||||
<button class="button cancel" onclick="openPopup('annuler', 3)">Annuler</button>
|
||||
<button class="button unblock" onclick="openPopup('débloquer', 3)">Débloquer</button>
|
||||
<button class="button send" onclick="openPopup('envoyer', 3)">Payer</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>004</td>
|
||||
<td>Sophie Bernard (vacataire)</td>
|
||||
<td>1350,00</td>
|
||||
<td id="status-4">En attente</td>
|
||||
<td>
|
||||
<button class="button block" onclick="openPopup('bloquer', 4)">Bloquer</button>
|
||||
<button class="button cancel" onclick="openPopup('annuler', 4)">Annuler</button>
|
||||
<button class="button unblock" onclick="openPopup('débloquer', 4)">Débloquer</button>
|
||||
<button class="button send" onclick="openPopup('envoyer', 4)">Payer</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>005</td>
|
||||
<td>Lucas Leroy (permanent)</td>
|
||||
<td>2000,00</td>
|
||||
<td id="status-5">En attente</td>
|
||||
<td>
|
||||
<button class="button block" onclick="openPopup('bloquer', 5)">Bloquer</button>
|
||||
<button class="button cancel" onclick="openPopup('annuler', 5)">Annuler</button>
|
||||
<button class="button unblock" onclick="openPopup('débloquer', 5)">Débloquer</button>
|
||||
<button class="button send" onclick="openPopup('envoyer', 5)">Payer</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>006</td>
|
||||
<td>Julie Robert (permanent)</td>
|
||||
<td>1600,00</td>
|
||||
<td id="status-6">En attente</td>
|
||||
<td>
|
||||
<button class="button block" onclick="openPopup('bloquer', 6)">Bloquer</button>
|
||||
<button class="button cancel" onclick="openPopup('annuler', 6)">Annuler</button>
|
||||
<button class="button unblock" onclick="openPopup('débloquer', 6)">Débloquer</button>
|
||||
<button class="button send" onclick="openPopup('envoyer', 6)">Payer</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>007</td>
|
||||
<td>Emilie Caron (permanent)</td>
|
||||
<td>1750,00</td>
|
||||
<td id="status-7">En attente</td>
|
||||
<td>
|
||||
<button class="button block" onclick="openPopup('bloquer', 7)">Bloquer</button>
|
||||
<button class="button cancel" onclick="openPopup('annuler', 7)">Annuler</button>
|
||||
<button class="button unblock" onclick="openPopup('débloquer', 7)">Débloquer</button>
|
||||
<button class="button send" onclick="openPopup('envoyer', 7)">Payer</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Ajouter plus de lignes ici -->
|
||||
</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>
|
||||
|
||||
<!-- Pop-up pour les actions -->
|
||||
<div id="popup" class="popup">
|
||||
<div class="popup-content">
|
||||
<h3 id="popupTitle">Action</h3>
|
||||
<p id="popupMessage"></p>
|
||||
<button class="close" onclick="closePopup()">Fermer</button>
|
||||
<button class="confirm" onclick="confirmAction()">Confirmer</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let currentAction = '';
|
||||
let currentPaymentId = '';
|
||||
|
||||
function openPopup(action, paymentId) {
|
||||
const popup = document.getElementById('popup');
|
||||
const title = document.getElementById('popupTitle');
|
||||
const message = document.getElementById('popupMessage');
|
||||
|
||||
currentAction = action;
|
||||
currentPaymentId = paymentId;
|
||||
|
||||
title.textContent = action.charAt(0).toUpperCase() + action.slice(1) + ' Paiement';
|
||||
message.textContent = `Êtes-vous sûr de vouloir ${action} le paiement ID ${paymentId} ?`;
|
||||
|
||||
popup.style.display = 'flex';
|
||||
}
|
||||
|
||||
function closePopup() {
|
||||
const popup = document.getElementById('popup');
|
||||
popup.style.display = 'none';
|
||||
}
|
||||
|
||||
function confirmAction() {
|
||||
const statusElement = document.getElementById(`status-${currentPaymentId}`);
|
||||
|
||||
// Réinitialise toutes les classes de statut avant d'ajouter la nouvelle
|
||||
statusElement.classList.remove('status-en-attente', 'status-bloque', 'status-annule', 'status-debloque', 'status-envoye');
|
||||
|
||||
switch(currentAction) {
|
||||
case 'bloquer':
|
||||
statusElement.textContent = 'Bloqué';
|
||||
statusElement.classList.add('status-bloque');
|
||||
break;
|
||||
case 'annuler':
|
||||
statusElement.textContent = 'Annulé';
|
||||
statusElement.classList.add('status-annule');
|
||||
break;
|
||||
case 'débloquer':
|
||||
statusElement.textContent = 'Débloqué';
|
||||
statusElement.classList.add('status-debloque');
|
||||
break;
|
||||
case 'envoyer':
|
||||
statusElement.textContent = 'Salaire payer';
|
||||
statusElement.classList.add('status-envoye');
|
||||
break;
|
||||
default:
|
||||
statusElement.textContent = 'En attente';
|
||||
statusElement.classList.add('status-en-attente');
|
||||
}
|
||||
|
||||
closePopup();
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
158
MaquetteWEB/html/FINANCE/rapports_financiers.html
Normal file
158
MaquetteWEB/html/FINANCE/rapports_financiers.html
Normal file
@ -0,0 +1,158 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Index des Rapports Financiers</title>
|
||||
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
|
||||
<link rel="stylesheet" href="../../css/FINANCE/style.css">
|
||||
<style>
|
||||
.dashboard-container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.index-container {
|
||||
padding: 20px;
|
||||
margin: 20px 0;
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.report-item {
|
||||
padding: 15px;
|
||||
background-color: #e9ecef;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.report-item a {
|
||||
color: #20195e;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.generate-report-section {
|
||||
margin: 20px 0;
|
||||
padding: 15px;
|
||||
background-color: #f1f1f1;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #20195e;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 10px 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #1a1451;
|
||||
}
|
||||
|
||||
label {
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="header">
|
||||
<div class="logo-container">
|
||||
<img src="../../media/img/logoWhite.png" alt="Logo Accueil">
|
||||
</div>
|
||||
<div class="categories">
|
||||
<a href="./finance.html">Accueil</a>
|
||||
<a href="./paiements_en_attente.html">Paiements en attente</a>
|
||||
<a href="./rapports_financiers.html">Rapports Financiers</a>
|
||||
<a href="./historique_paiements.html">Historique des transactions</a>
|
||||
<a href="./mes_informations.html">Mes informations et documents</a>
|
||||
</div>
|
||||
<div class="user-section">
|
||||
<div class="user-name">Jean DUPONT</div>
|
||||
<div class="logout-container">
|
||||
<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">
|
||||
<h2>Historique des rapports financiers</h2>
|
||||
</div>
|
||||
|
||||
<!-- Index des rapports financiers -->
|
||||
<div class="index-container">
|
||||
<div class="report-item">
|
||||
<span>Rapport financier : BUT Informatique - Octobre 2024</span>
|
||||
<a href="chemin/vers/rapport_but_informatique_sem1_2024.pdf" download>Télécharger</a>
|
||||
</div>
|
||||
<div class="report-item">
|
||||
<span>Rapport financier : BUT GEA - Octobre 2024</span>
|
||||
<a href="chemin/vers/rapport_but_gea_sem1_2024.pdf" download>Télécharger</a>
|
||||
</div>
|
||||
<div class="report-item">
|
||||
<span>Rapport financier : BUT Informatique - Septembre 2024</span>
|
||||
<a href="chemin/vers/rapport_but_informatique_sem2_2024.pdf" download>Télécharger</a>
|
||||
</div>
|
||||
<div class="report-item">
|
||||
<span>Rapport financier : BUT GEA - Septembre 2024</span>
|
||||
<a href="chemin/vers/rapport_but_gea_sem2_2024.pdf" download>Télécharger</a>
|
||||
</div>
|
||||
<!-- Ajoutez d'autres rapports ici -->
|
||||
</div>
|
||||
|
||||
<!-- Section pour générer un faux rapport -->
|
||||
<div class="generate-report-section">
|
||||
<h3>Générer un rapport financier</h3>
|
||||
<form id="generateReportForm">
|
||||
<label for="formationSelect">Sélectionnez une formation:</label>
|
||||
<select id="formationSelect" name="formation">
|
||||
<option value="informatique">BUT Informatique</option>
|
||||
<option value="gea">BUT GEA</option>
|
||||
</select><br>
|
||||
<label for="semesterSelect">Sélectionnez un semestre:</label>
|
||||
<select id="semesterSelect" name="semester">
|
||||
<option value="semestre1">Octobre 2024</option>
|
||||
<option value="semestre2">Septembre 2024</option>
|
||||
</select><br><br>
|
||||
<button type="submit">Générer le Rapport</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<p>© 2024 IUT de Fontainebleau. Tous droits réservés |
|
||||
<a href="../mentions_legales.html" style="color: white;">Mentions légales</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.getElementById('generateReportForm').addEventListener('submit', function (event) {
|
||||
event.preventDefault();
|
||||
const formation = document.getElementById('formationSelect').value;
|
||||
const semester = document.getElementById('semesterSelect').value;
|
||||
alert(`Génération d'un rapport financier pour la formation BUT ${formation} - ${semester}`);
|
||||
// Ici, vous pouvez ajouter votre logique pour générer le rapport
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
237
MaquetteWEB/html/PROF/enseignant_permanent.html
Normal file
237
MaquetteWEB/html/PROF/enseignant_permanent.html
Normal file
@ -0,0 +1,237 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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="stylesheet" href="../../css/PROF/enseignant_permanent.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="header">
|
||||
<!-- Logo pour retourner à l'accueil -->
|
||||
<div class="logo-container">
|
||||
<img src="../../media/img/logoWhite.png" alt="Logo Accueil">
|
||||
</div>
|
||||
|
||||
<!-- Catégories dans le header -->
|
||||
<div class="categories">
|
||||
<a href="./enseignant_permanent.html">Accueil</a>
|
||||
<a href="./mes-heures.html">Heures</a>
|
||||
<a href="./paiements.html">Paiements</a>
|
||||
<a href="./mes-informations.html">Mes informations et documents</a>
|
||||
</div>
|
||||
|
||||
<!-- Section utilisateur avec déconnexion -->
|
||||
<div class="user-section">
|
||||
<div class="user-name">
|
||||
Denis MONNERAT
|
||||
</div>
|
||||
<div class="logout-container">
|
||||
<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">
|
||||
<!-- Alertes et Notifications -->
|
||||
<div class="section-header" id="notifications-section">
|
||||
<h2>Alertes et Notifications</h2>
|
||||
</div>
|
||||
<div id="notifications-container">
|
||||
<!-- Notifications -->
|
||||
<div class="alert">
|
||||
<span class="close" onclick="this.parentElement.style.display='none';">×</span>
|
||||
<p><strong>Propositions d'heures en attente :</strong> Vous n'avez toujours pas validé les propositions d'heures. Ces dernières seront automatiquement acceptées dans 3 jours. Merci de le faire au plus vite dans : <a href="mes-heures.html">Mes heures</a>.</p>
|
||||
</div>
|
||||
<div class="success">
|
||||
<span class="close" onclick="this.parentElement.style.display='none';">×</span>
|
||||
<p><strong>Pièces justificatives :</strong> Vos pièces justificatives ont été validées par le responsable pédagogique et sont accessibles dans : <a href="mes-informations.html">Mes informations et documents</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Script pour gérer l'affichage des notifications -->
|
||||
<script>
|
||||
const notificationsContainer = document.getElementById('notifications-container');
|
||||
const notificationsSection = document.getElementById('notifications-section');
|
||||
|
||||
// Vérifiez si le conteneur des notifications est vide
|
||||
if (notificationsContainer.childElementCount === 0) {
|
||||
notificationsSection.style.display = 'none'; // Masquer la section si aucune notification
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Emploi du Temps avec navigation de semaines -->
|
||||
<div class="section-header">
|
||||
<h2>Mon Emploi du Temps</h2>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<!-- Navigation entre semaines -->
|
||||
<div class="week-navigation">
|
||||
<button>« Semaine précédente</button>
|
||||
<p><strong>Semaine du 18 au 24 Novembre 2024</strong></p>
|
||||
<button>Semaine suivante »</button>
|
||||
</div>
|
||||
|
||||
<div class="schedule-container">
|
||||
<table class="schedule-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Heures</th>
|
||||
<th>Lundi</th>
|
||||
<th>Mardi</th>
|
||||
<th>Mercredi</th>
|
||||
<th>Jeudi</th>
|
||||
<th>Vendredi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="time-slot">08:00 - 08:30</td>
|
||||
<td class="no-class"></td>
|
||||
<td class="no-class"></td>
|
||||
<td class="no-class"></td>
|
||||
<td class="no-class"></td>
|
||||
<td class="no-class"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="time-slot">08:30 - 09:00</td>
|
||||
<td class="class">TP - SCR<br><span>Salle 224 - BUT1 Groupe 3</span></td>
|
||||
<td class="no-class"></td>
|
||||
<td class="no-class"></td>
|
||||
<td class="no-class"></td>
|
||||
<td class="no-class"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="time-slot">09:00 - 09:30</td>
|
||||
<td class="class">TP - Mathématiques<br><span>Salle 101 - BUT2 Groupe 1</span></td>
|
||||
<td class="no-class"></td>
|
||||
<td class="no-class"></td>
|
||||
<td class="class">TD - SCR<br><span>Salle 305 - BUT1 Groupe 2</span></td>
|
||||
<td class="no-class"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="time-slot">09:30 - 10:00</td>
|
||||
<td class="no-class"></td>
|
||||
<td class="class">TP - DEV<br><span>Salle 202 - BUT1 Groupe 2</span></td>
|
||||
<td class="no-class"></td>
|
||||
<td class="no-class"></td>
|
||||
<td class="class">TP - DEV<br><span>Salle 202 - BUT1 Groupe 2</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="time-slot">10:00 - 10:30</td>
|
||||
<td class="no-class"></td>
|
||||
<td class="class">TP - DEV<br><span>Salle 202 - BUT1 Groupe 2</span></td>
|
||||
<td class="no-class"></td>
|
||||
<td class="class">TP - SCR<br><span>Salle 305 - BUT1 Groupe 2</span></td>
|
||||
<td class="no-class"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="time-slot">10:30 - 11:00</td>
|
||||
<td class="no-class"></td>
|
||||
<td class="class">TP - DEV<br><span>Salle 202 - BUT1 Groupe 4</span></td>
|
||||
<td class="no-class"></td>
|
||||
<td class="no-class"></td>
|
||||
<td class="no-class"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="time-slot">11:00 - 11:30</td>
|
||||
<td class="no-class"></td>
|
||||
<td class="no-class"></td>
|
||||
<td class="no-class"></td>
|
||||
<td class="no-class"></td>
|
||||
<td class="no-class"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="time-slot">13:00 - 13:30</td>
|
||||
<td class="no-class"></td>
|
||||
<td class="no-class"></td>
|
||||
<td class="no-class"></td>
|
||||
<td class="no-class"></td>
|
||||
<td class="class">TP - DEV<br><span>Salle 225 - BUT1 Groupe 1</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="time-slot">13:30 - 14:00</td>
|
||||
<td class="no-class"></td>
|
||||
<td class="no-class"></td>
|
||||
<td class="no-class"></td>
|
||||
<td class="no-class"></td>
|
||||
<td class="class">TP - DEV<br><span>Salle 225 - BUT1 Groupe 2</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="time-slot">14:00 - 14:30</td>
|
||||
<td class="no-class"></td>
|
||||
<td class="no-class"></td>
|
||||
<td class="no-class"></td>
|
||||
<td class="no-class"></td>
|
||||
<td class="class">TP - DEV<br><span>Salle 225 - BUT1 Groupe 3</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="time-slot">14:30 - 15:00</td>
|
||||
<td class="no-class"></td>
|
||||
<td class="no-class"></td>
|
||||
<td class="no-class"></td>
|
||||
<td class="no-class"></td>
|
||||
<td class="class">TP - DEV<br><span>Salle 225 - BUT1 Groupe 4</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Suivi des Paiements -->
|
||||
<div class="section-header">
|
||||
<h2>Suivi des Paiements</h2>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="table-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Période</th>
|
||||
<th>Heures Payées</th>
|
||||
<th>Montant Brut (€)</th>
|
||||
<th>Date de Paiement</th>
|
||||
<th>Bulletin de paie</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Septembre 2024</td>
|
||||
<td>35h</td>
|
||||
<td>3500,00</td>
|
||||
<td>01/10/2024</td>
|
||||
<td><a href="https://ensap.gouv.fr" target="_blank" class="btn">Voir Bulletin</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Octobre 2024</td>
|
||||
<td>35h</td>
|
||||
<td>3500,00</td>
|
||||
<td>En attente</td>
|
||||
<td><a href="https://ensap.gouv.fr" target="_blank" class="btn">Voir Bulletin</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p><strong>Prochain paiement prévu :</strong> Novembre 2024 (20h restantes)</p>
|
||||
|
||||
<div class="more-payments">
|
||||
<p><a href="./paiements.html" class="btn">Voir tous les paiements</a></p>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
474
MaquetteWEB/html/PROF/mes-heures.html
Normal file
474
MaquetteWEB/html/PROF/mes-heures.html
Normal file
@ -0,0 +1,474 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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">
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<link rel="stylesheet" href="../../css/PROF/mes-heures.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="header">
|
||||
<!-- Logo pour retourner à l'accueil -->
|
||||
<div class="logo-container">
|
||||
<img src="../../media/img/logoWhite.png" alt="Logo Accueil">
|
||||
</div>
|
||||
|
||||
<!-- Catégories dans le header -->
|
||||
<div class="categories">
|
||||
<a href="./enseignant_permanent.html">Accueil</a>
|
||||
<a href="./mes-heures.html">Heures</a>
|
||||
<a href="./paiements.html">Paiements</a>
|
||||
<a href="./mes-informations.html">Mes informations et documents</a>
|
||||
</div>
|
||||
|
||||
<!-- Section utilisateur avec déconnexion -->
|
||||
<div class="user-section">
|
||||
<div class="user-name">
|
||||
Denis MONNERAT
|
||||
</div>
|
||||
<div class="logout-container">
|
||||
<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">
|
||||
<h2>Propositions d'Heures</h2>
|
||||
</div>
|
||||
<div class="proposition-container">
|
||||
<table class="proposition-table" id="proposalTable">
|
||||
<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>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<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>
|
||||
<button class="accept-button" onclick="acceptProposal(this)">Accepter</button>
|
||||
<button class="refuse-button" onclick="confirmRefusal(this)">Refuser</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Janvier 2025</td>
|
||||
<td>BUT2</td>
|
||||
<td>SCR</td>
|
||||
<td>3</td>
|
||||
<td>TD, TP</td>
|
||||
<td>6h</td>
|
||||
<td>
|
||||
<button class="accept-button" onclick="acceptProposal(this)">Accepter</button>
|
||||
<button class="refuse-button" onclick="confirmRefusal(this)">Refuser</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</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>
|
||||
|
||||
<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">
|
||||
<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">
|
||||
<!-- Rows will be generated dynamically with JavaScript -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Pagination Buttons -->
|
||||
<div id="pagination">
|
||||
<button onclick="prevPage()">Précédent</button>
|
||||
<span id="pageNumber"></span>
|
||||
<button onclick="nextPage()">Suivant</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-header">
|
||||
<h2>Graphique des Heures Travaillées</h2>
|
||||
</div>
|
||||
<div class="chart-container">
|
||||
<canvas id="hoursChart"></canvas>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="section-header">
|
||||
<h2>Signalement de problèmes d'heures</h2>
|
||||
</div>
|
||||
<div class="contact-form">
|
||||
<form id="contactForm">
|
||||
<label for="probleme">Type de problème :</label>
|
||||
<select id="probleme" name="probleme" 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="autre">Autre</option>
|
||||
</select>
|
||||
|
||||
<label for="commentaire">Commentaires :</label>
|
||||
<input type="text" id="commentaire" name="commentaire" placeholder="Décrivez votre problème" required>
|
||||
|
||||
<button type="submit">Soumettre</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Popup pour les détails du cours -->
|
||||
<div id="infoPopup" class="popup">
|
||||
<h4>Détails du la journée</h4>
|
||||
<p><strong>Promotion :</strong> <span id="promotion"></span></p>
|
||||
<p><strong>Groupe(s) :</strong> <span id="groupe"></span></p>
|
||||
<p><strong>Salle :</strong> <span id="salle"></span></p>
|
||||
<button onclick="closeInfoPopup()">Fermer</button>
|
||||
</div>
|
||||
|
||||
<!-- Popup pour succès de l'envoi du formulaire -->
|
||||
<div id="popup" class="popup">
|
||||
<img src="https://img.icons8.com/ios-filled/50/155724/checkmark.png" alt="Success Icon">
|
||||
<h4>Signalement Envoyé !</h4>
|
||||
<p>Merci pour votre signalement. Nous allons traiter votre demande dans les plus brefs délais.</p>
|
||||
<button onclick="closePopup()">Fermer</button>
|
||||
</div>
|
||||
|
||||
<!-- Popup de confirmation de refus -->
|
||||
<div id="confirmationPopup" class="confirmation-popup">
|
||||
<div class="confirmation-content">
|
||||
<h4>Confirmer le Refus</h4>
|
||||
<p>Êtes-vous sûr de vouloir refuser cette proposition d'heure ?</p>
|
||||
<button id="confirmRefusalButton" onclick="confirmRefusalAction()">Confirmer</button>
|
||||
<button onclick="closeConfirmationPopup()">Annuler</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="infoPopup" class="popup">
|
||||
<h4>Détails de l'intervention</h4>
|
||||
<p><strong>Promotion :</strong> <span id="popupPromotion"></span></p>
|
||||
<p><strong>Type de Cours :</strong> <span id="popupTypeCours"></span></p>
|
||||
<p><strong>ETD :</strong> <span id="popupETD"></span></p>
|
||||
<p><strong>Montant :</strong> <span id="popupMontant"></span></p>
|
||||
<p><strong>Matière :</strong> <span id="popupMatiere"></span></p>
|
||||
<button onclick="closeInfoPopup()">Fermer</button>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<p>© 2024 IUT de Fontainebleau. Tous droits réservés | <a href="html/mentions_legales.html" style="color: white;">Mentions légales</a></p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Données du graphique
|
||||
const ctx = document.getElementById('hoursChart').getContext('2d');
|
||||
const hoursChart = new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ['Semaine 1', 'Semaine 2', 'Semaine 3', 'Semaine 4'],
|
||||
datasets: [{
|
||||
label: 'Heures Travaillées',
|
||||
data: [5, 10, 7, 8],
|
||||
backgroundColor: 'rgba(75, 192, 192, 0.2)',
|
||||
borderColor: 'rgba(75, 192, 192, 1)',
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Heures'
|
||||
}
|
||||
},
|
||||
x: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Semaines'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
let proposalToRemove; // Variable pour stocker la proposition à supprimer
|
||||
|
||||
// Fonctions pour gérer l'acceptation et le refus
|
||||
function acceptProposal(button) {
|
||||
document.getElementById("justificatifForm").style.display = "block";
|
||||
proposalToRemove = button.closest('tr'); // Stocker la proposition à supprimer
|
||||
}
|
||||
|
||||
function confirmRefusal(button) {
|
||||
proposalToRemove = button.closest('tr');
|
||||
document.getElementById("confirmationPopup").style.display = "flex";
|
||||
}
|
||||
|
||||
function confirmRefusalAction() {
|
||||
proposalToRemove.remove();
|
||||
closeConfirmationPopup();
|
||||
}
|
||||
|
||||
function closeConfirmationPopup() {
|
||||
document.getElementById("confirmationPopup").style.display = "none";
|
||||
}
|
||||
|
||||
function submitJustificatif() {
|
||||
alert("Vos pièces justificatives ont été soumises avec succès.");
|
||||
closeJustificatifPopup(); // Cacher le formulaire
|
||||
|
||||
// Ajouter l'heure validée à la section des heures validées
|
||||
const validatedTableBody = document.getElementById("validatedTableBody");
|
||||
const newRow = document.createElement("tr");
|
||||
const periode = proposalToRemove.cells[0].innerText; // Récupérer la période
|
||||
const formation = proposalToRemove.cells[1].innerText; // Récupérer la formation
|
||||
const nomCours = proposalToRemove.cells[2].innerText; // Récupérer le nom du cours
|
||||
const semestre = proposalToRemove.cells[3].innerText; // Récupérer le semestre
|
||||
const typeIntervention = proposalToRemove.cells[4].innerText; // Récupérer le type d'intervention
|
||||
const volumePrevisionnel = proposalToRemove.cells[5].innerText; // Récupérer le volume prévisionnel
|
||||
|
||||
newRow.innerHTML = `<td>${periode}</td><td>${formation}</td><td>${nomCours}</td><td>${semestre}</td><td>${typeIntervention}</td><td>${volumePrevisionnel}</td><td class="status-attente">En attente de traitement</td> `;
|
||||
validatedTableBody.appendChild(newRow);
|
||||
proposalToRemove.remove(); // Supprimer la proposition de l'affichage
|
||||
}
|
||||
|
||||
function closeJustificatifPopup() {
|
||||
document.getElementById("justificatifForm").style.display = "none";
|
||||
}
|
||||
|
||||
function getRandomBUT() {
|
||||
return "BUT" + Math.floor(Math.random() * 3 + 1); // Génère un nombre aléatoire entre 1 et 3
|
||||
}
|
||||
|
||||
// Gestion des popups
|
||||
function showDetails(promotion, groupes, salle) {
|
||||
document.getElementById("promotion").innerText = promotion;
|
||||
document.getElementById("groupe").innerText = groupes;
|
||||
document.getElementById("salle").innerText = salle;
|
||||
document.getElementById("infoPopup").style.display = "block";
|
||||
}
|
||||
|
||||
function closeInfoPopup() {
|
||||
document.getElementById("infoPopup").style.display = "none";
|
||||
}
|
||||
|
||||
function closePopup() {
|
||||
document.getElementById("popup").style.display = "none";
|
||||
}
|
||||
|
||||
// Gestion de l'envoi du formulaire de contact
|
||||
document.getElementById('contactForm').addEventListener('submit', function(event) {
|
||||
event.preventDefault();
|
||||
document.getElementById("popup").style.display = "block";
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
// Exemple d'un grand nombre d'heures pour l'historique
|
||||
const hoursData = [
|
||||
{ date: '01/02/2024', matiere: 'SCR', type: 'CM', volume: '3 ETD', worked: '4h' },
|
||||
{ date: '05/02/2024', matiere: 'Web Dev', type: 'TP', volume: '2 ETD', worked: '3h' },
|
||||
{ date: '10/02/2024', matiere: 'Mathématiques', type: 'TD', volume: '4 ETD', worked: '5h' },
|
||||
{ date: '15/02/2024', matiere: 'IA', type: 'CM', volume: '2 ETD', worked: '2h' },
|
||||
{ date: '20/02/2024', matiere: 'Python', type: 'TP', volume: '5 ETD', worked: '7h' },
|
||||
// Ajoutez ici un grand nombre de données...
|
||||
{ date: '01/03/2024', matiere: 'Réseaux', type: 'TD', volume: '3 ETD', worked: '4h' },
|
||||
{ date: '10/03/2024', matiere: 'Big Data', type: 'CM', volume: '5 ETD', worked: '6h' },
|
||||
// Plusieurs lignes (simulons jusqu'à 50 lignes ou plus)...
|
||||
{ date: '01/04/2024', matiere: 'Dev Mobile', type: 'TP', volume: '2 ETD', worked: '3h' },
|
||||
{ date: '10/04/2024', matiere: 'Sécurité', type: 'CM', volume: '3 ETD', worked: '5h' },
|
||||
];
|
||||
|
||||
// Variables pour la pagination
|
||||
const rowsPerPage = 5;
|
||||
let currentPage = 1;
|
||||
const totalRows = hoursData.length;
|
||||
const totalPages = Math.ceil(totalRows / rowsPerPage);
|
||||
|
||||
// Fonction pour afficher la table avec pagination
|
||||
function displayTable(page) {
|
||||
const start = (page - 1) * rowsPerPage;
|
||||
const end = start + rowsPerPage;
|
||||
const tableBody = document.getElementById('hoursTableBody');
|
||||
tableBody.innerHTML = ''; // Clear existing rows
|
||||
|
||||
const pageData = hoursData.slice(start, end);
|
||||
pageData.forEach(row => {
|
||||
const tr = document.createElement('tr');
|
||||
tr.innerHTML = `<td>${row.date}</td>
|
||||
<td>${row.matiere}</td>
|
||||
<td>${row.type}</td>
|
||||
<td>${row.volume}</td>
|
||||
<td>${row.worked}</td>
|
||||
<td><span class="details-button" onclick="showDetails('BUT2', '1,2,3', '140')">Plus d'infos</span></td>`;
|
||||
tableBody.appendChild(tr);
|
||||
});
|
||||
|
||||
document.getElementById('pageNumber').innerText = `Page ${page} sur ${totalPages}`;
|
||||
}
|
||||
|
||||
// Fonctions pour naviguer dans la pagination
|
||||
function nextPage() {
|
||||
if (currentPage < totalPages) {
|
||||
currentPage++;
|
||||
displayTable(currentPage);
|
||||
}
|
||||
}
|
||||
|
||||
function prevPage() {
|
||||
if (currentPage > 1) {
|
||||
currentPage--;
|
||||
displayTable(currentPage);
|
||||
}
|
||||
}
|
||||
|
||||
// Fonction de tri pour les colonnes
|
||||
function sortTable(n) {
|
||||
const table = document.getElementById('hoursTable');
|
||||
let rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
|
||||
switching = true;
|
||||
dir = "asc"; // Set the sorting direction to ascending
|
||||
while (switching) {
|
||||
switching = false;
|
||||
rows = table.rows;
|
||||
for (i = 1; i < (rows.length - 1); i++) {
|
||||
shouldSwitch = false;
|
||||
x = rows[i].getElementsByTagName("TD")[n];
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (shouldSwitch) {
|
||||
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
|
||||
switching = true;
|
||||
switchcount++;
|
||||
} else {
|
||||
if (switchcount === 0 && dir === "asc") {
|
||||
dir = "desc";
|
||||
switching = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Initial load
|
||||
displayTable(currentPage);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
541
MaquetteWEB/html/PROF/mes-informations.html
Normal file
541
MaquetteWEB/html/PROF/mes-informations.html
Normal file
File diff suppressed because it is too large
Load Diff
402
MaquetteWEB/html/PROF/paiements.html
Normal file
402
MaquetteWEB/html/PROF/paiements.html
Normal file
@ -0,0 +1,402 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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">
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<link rel="stylesheet" href="../../css/PROF/paiements.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="header">
|
||||
<!-- Logo pour retourner à l'accueil -->
|
||||
<div class="logo-container">
|
||||
<img src="../../media/img/logoWhite.png" alt="Logo Accueil">
|
||||
</div>
|
||||
|
||||
<!-- Catégories dans le header -->
|
||||
<div class="categories">
|
||||
<a href="./enseignant_permanent.html">Accueil</a>
|
||||
<a href="./mes-heures.html">Heures</a>
|
||||
<a href="./paiements.html">Paiements</a>
|
||||
<a href="./mes-informations.html">Mes informations et documents</a>
|
||||
</div>
|
||||
|
||||
<!-- Section utilisateur avec déconnexion -->
|
||||
<div class="user-section">
|
||||
<div class="user-name">
|
||||
Denis MONNERAT
|
||||
</div>
|
||||
<div class="logout-container">
|
||||
<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">
|
||||
<!-- Historique des paiements -->
|
||||
<div class="section-header">
|
||||
<h2>Historique des Paiements</h2>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="table-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-sort="periode">Période</th>
|
||||
<th data-sort="heuresPayees">Heures Payées</th>
|
||||
<th data-sort="montantBrut">Montant Brut (€)</th>
|
||||
<th data-sort="montantNet">Montant Net (€)</th>
|
||||
<th data-sort="datePaiement">Date de Paiement</th>
|
||||
<th data-sort="modePaiement">Mode de Paiement</th>
|
||||
<th data-sort="compteBancaire">Compte Bancaire</th>
|
||||
<th data-sort="statut">Statut</th>
|
||||
<th>Bulletin de Paie</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Février 2024</td>
|
||||
<td>35h</td>
|
||||
<td>3500,00</td>
|
||||
<td>2722,00</td>
|
||||
<td>01/03/2024</td>
|
||||
<td>Virement Bancaire</td>
|
||||
<td>Compte XXXXXX1234</td>
|
||||
<td class="status-valide">Validé</td>
|
||||
<td><a href="https://ensap.gouv.fr" target="_blank" class="btn">Voir Bulletin</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Mars 2024</td>
|
||||
<td>35h</td>
|
||||
<td>3500,00</td>
|
||||
<td>2722,00</td>
|
||||
<td>01/04/2024</td>
|
||||
<td>Virement Bancaire</td>
|
||||
<td>Compte XXXXXX1234</td>
|
||||
<td class="status-valide">Validé</td>
|
||||
<td><a href="https://ensap.gouv.fr" target="_blank" class="btn">Voir Bulletin</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Avril 2024</td>
|
||||
<td>35h</td>
|
||||
<td>3500,00</td>
|
||||
<td>2722,00</td>
|
||||
<td>01/05/2024</td>
|
||||
<td>Virement Bancaire</td>
|
||||
<td>Compte XXXXXX1234</td>
|
||||
<td class="status-valide">Validé</td>
|
||||
<td><a href="https://ensap.gouv.fr" target="_blank" class="btn">Voir Bulletin</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Mai 2024</td>
|
||||
<td>35h</td>
|
||||
<td>3500,00</td>
|
||||
<td>2722,00</td>
|
||||
<td>01/06/2024</td>
|
||||
<td>Virement Bancaire</td>
|
||||
<td>Compte XXXXXX1234</td>
|
||||
<td class="status-valide">Validé</td>
|
||||
<td><a href="https://ensap.gouv.fr" target="_blank" class="btn">Voir Bulletin</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Juin 2024</td>
|
||||
<td>35h</td>
|
||||
<td>3500,00</td>
|
||||
<td>2722,00</td>
|
||||
<td>01/07/2024</td>
|
||||
<td>Virement Bancaire</td>
|
||||
<td>Compte XXXXXX1234</td>
|
||||
<td class="status-valide">Validé</td>
|
||||
<td><a href="https://ensap.gouv.fr" target="_blank" class="btn">Voir Bulletin</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Septembre 2024</td>
|
||||
<td>35h</td>
|
||||
<td>3500,00</td>
|
||||
<td>2722,00</td>
|
||||
<td>01/10/2024</td>
|
||||
<td>Virement Bancaire</td>
|
||||
<td>Compte XXXXXX1234</td>
|
||||
<td class="status-valide">Validé</td>
|
||||
<td><a href="https://ensap.gouv.fr" target="_blank" class="btn">Voir Bulletin</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Octobre 2024</td>
|
||||
<td>35h</td>
|
||||
<td>3500,00</td>
|
||||
<td>2722,00</td>
|
||||
<td>01/11/2024</td>
|
||||
<td>Virement Bancaire</td>
|
||||
<td>Compte XXXXXX1234</td>
|
||||
<td class="status-attente">En attente</td>
|
||||
<td><a href="https://ensap.gouv.fr" target="_blank" class="btn">Voir Bulletin</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p><strong>Prochain paiement prévu :</strong> Novembre 2024 (35h restantes)</p>
|
||||
</div>
|
||||
|
||||
<!-- Graphique des paiements (brut) -->
|
||||
<div class="section-header">
|
||||
<h2>Évolution de vos Paiements</h2>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="chart-container">
|
||||
<canvas id="paymentChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Formulaire pour signaler un problème -->
|
||||
<!-- Formulaire pour signaler un problème -->
|
||||
<div class="section-header">
|
||||
<h2>Signaler un problème de paye</h2>
|
||||
</div>
|
||||
<div class="card contact-form">
|
||||
<h3>Formulaire de signalement</h3>
|
||||
<form id="contactForm">
|
||||
<label for="probleme">Sélectionnez un problème :</label>
|
||||
<select id="probleme" required>
|
||||
<option value="">-- Sélectionner un problème --</option>
|
||||
<option value="noPayment">Je n'ai pas reçu de paiement</option>
|
||||
<option value="wrongAmount">Le montant de mon salaire est inférieur à ce qui était prévu.</option>
|
||||
<option value="duplicatePayment">J'ai reçu un paiement en double</option>
|
||||
<option value="latePayment">Mon paiement est en retard</option>
|
||||
<option value="unjustifiedWithholding">Il y a une retenue sur mon paiement que je ne comprends pas</option>
|
||||
<option value="technicalIssue">J'ai des difficultés à accéder à mes bulletins de salaire en ligne</option>
|
||||
</select>
|
||||
|
||||
<!-- Champs supplémentaires qui s'affichent selon le problème -->
|
||||
<div id="detailsSupplementaires" style="display: none;">
|
||||
<!-- Champ pour sélectionner le mois -->
|
||||
<div id="moisEnQuestion" style="display:none;">
|
||||
<label for="mois">Sélectionner le mois :</label>
|
||||
<select id="mois">
|
||||
<option value="">-- Sélectionner le mois --</option>
|
||||
<option value="fevrier">Février 2024</option>
|
||||
<option value="mars">Mars 2024</option>
|
||||
<option value="avril">Avril 2024</option>
|
||||
<option value="mai">Mai 2024</option>
|
||||
<option value="juin">Juin 2024</option>
|
||||
<option value="septembre">Septembre 2024</option>
|
||||
<option value="octobre">Octobre 2024</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Champ pour indiquer le montant reçu -->
|
||||
<div id="montantRecuSupplementaire" style="display:none;">
|
||||
<label for="montantRecu">Montant reçu (€) :</label>
|
||||
<input type="number" id="montantRecu" placeholder="Montant reçu" />
|
||||
</div>
|
||||
|
||||
<!-- Champ pour indiquer le montant attendu -->
|
||||
<div id="montantAttendu" style="display:none;">
|
||||
<label for="montantAttenduInput">Montant attendu (€) :</label>
|
||||
<input type="number" id="montantAttenduInput" placeholder="Montant attendu" />
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit">Envoyer</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<p>© 2024 IUT de Fontainebleau. Tous droits réservés |
|
||||
<a href="html/mentions_legales.html">Mentions légales</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Popup de confirmation -->
|
||||
<div class="popup" id="popup">
|
||||
<img src="https://img.icons8.com/ios-filled/50/155724/checkmark.png" alt="Coche">
|
||||
<h4>Message envoyé</h4>
|
||||
<p>Votre message a été transmis à la direction. Un email de confirmation vous a été envoyé.</p>
|
||||
<button onclick="fermerPopup()">Fermer</button>
|
||||
</div>
|
||||
|
||||
<!-- Script pour gérer le formulaire et le popup -->
|
||||
<script>
|
||||
document.getElementById('probleme').addEventListener('change', function() {
|
||||
var detailsSupplementaires = document.getElementById('detailsSupplementaires');
|
||||
var montantRecuSupplementaire = document.getElementById('montantRecuSupplementaire');
|
||||
var moisEnQuestion = document.getElementById('moisEnQuestion'); // Champ pour sélectionner le mois
|
||||
var montantAttendu = document.getElementById('montantAttendu'); // Champ pour indiquer le montant attendu
|
||||
|
||||
// Masquer tous les champs au départ
|
||||
detailsSupplementaires.style.display = 'none';
|
||||
montantRecuSupplementaire.style.display = 'none';
|
||||
moisEnQuestion.style.display = 'none';
|
||||
montantAttendu.style.display = 'none';
|
||||
|
||||
// Afficher les champs en fonction du problème sélectionné
|
||||
switch (this.value) {
|
||||
case 'noPayment':
|
||||
detailsSupplementaires.style.display = 'block';
|
||||
moisEnQuestion.style.display = 'block'; // Afficher le champ pour sélectionner le mois
|
||||
break;
|
||||
case 'wrongAmount':
|
||||
detailsSupplementaires.style.display = 'block';
|
||||
montantRecuSupplementaire.style.display = 'block'; // Afficher le montant
|
||||
moisEnQuestion.style.display = 'block'; // Afficher le champ pour sélectionner le mois
|
||||
break;
|
||||
case 'duplicatePayment':
|
||||
detailsSupplementaires.style.display = 'block';
|
||||
moisEnQuestion.style.display = 'block'; // Afficher le champ pour sélectionner le mois
|
||||
montantAttendu.style.display = 'block'; // Afficher le champ pour le montant attendu
|
||||
break;
|
||||
case 'latePayment':
|
||||
detailsSupplementaires.style.display = 'block';
|
||||
moisEnQuestion.style.display = 'block'; // Afficher le champ pour sélectionner le mois
|
||||
break;
|
||||
case 'unjustifiedWithholding':
|
||||
detailsSupplementaires.style.display = 'block';
|
||||
break;
|
||||
case 'technicalIssue':
|
||||
detailsSupplementaires.style.display = 'block';
|
||||
break;
|
||||
default:
|
||||
// Aucune action si aucune valeur valide n'est sélectionnée
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('contactForm').addEventListener('submit', function(event) {
|
||||
event.preventDefault();
|
||||
// Afficher le popup de confirmation
|
||||
document.getElementById('popup').style.display = 'block';
|
||||
});
|
||||
|
||||
function fermerPopup() {
|
||||
document.getElementById('popup').style.display = 'none';
|
||||
// Réinitialiser le formulaire après soumission
|
||||
document.getElementById('contactForm').reset();
|
||||
document.getElementById('detailsSupplementaires').style.display = 'none';
|
||||
}
|
||||
|
||||
// Configuration du graphique Chart.js
|
||||
const ctx = document.getElementById('paymentChart').getContext('2d');
|
||||
const paymentChart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Septembre', 'Octobre'],
|
||||
datasets: [{
|
||||
label: 'Montant Brut (€)',
|
||||
data: [3500, 3500, 3500, 3500, 3500, 3500, 3500],
|
||||
borderColor: 'rgba(75, 192, 192, 1)',
|
||||
backgroundColor: 'rgba(75, 192, 192, 0.2)',
|
||||
fill: true,
|
||||
tension: 0.3,
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
document.querySelectorAll('th[data-sort]').forEach(function (header) {
|
||||
header.addEventListener('click', function () {
|
||||
const table = header.closest('table');
|
||||
const tbody = table.querySelector('tbody');
|
||||
const rowsArray = Array.from(tbody.querySelectorAll('tr'));
|
||||
const index = Array.from(header.parentElement.children).indexOf(header);
|
||||
let order = header.dataset.order || 1;
|
||||
|
||||
// Retirer les classes de tri des autres colonnes
|
||||
document.querySelectorAll('th[data-sort]').forEach(function (th) {
|
||||
th.classList.remove('ascending', 'descending');
|
||||
});
|
||||
|
||||
// Appliquer la classe de tri
|
||||
if (order == 1) {
|
||||
header.classList.add('ascending');
|
||||
header.dataset.order = -1; // Inverser l'ordre pour la prochaine fois
|
||||
} else {
|
||||
header.classList.add('descending');
|
||||
header.dataset.order = 1; // Réinitialiser pour la prochaine fois
|
||||
}
|
||||
|
||||
// Trier les lignes du tableau
|
||||
rowsArray.sort(function (rowA, rowB) {
|
||||
let cellA = rowA.children[index].innerText.trim();
|
||||
let cellB = rowB.children[index].innerText.trim();
|
||||
|
||||
// Gérer les périodes (mois)
|
||||
if (header.dataset.sort === 'periode') {
|
||||
cellA = moisToNumero(cellA);
|
||||
cellB = moisToNumero(cellB);
|
||||
}
|
||||
|
||||
// Gérer les montants numériques avec des virgules
|
||||
else if (!isNaN(cellA.replace(',', '.')) && !isNaN(cellB.replace(',', '.'))) {
|
||||
return (parseFloat(cellA.replace(',', '.')) - parseFloat(cellB.replace(',', '.'))) * order;
|
||||
}
|
||||
|
||||
// Gérer les dates
|
||||
else if (isDate(cellA) && isDate(cellB)) {
|
||||
return (new Date(cellA) - new Date(cellB)) * order;
|
||||
}
|
||||
|
||||
// Gérer les textes (par défaut)
|
||||
else {
|
||||
return cellA.localeCompare(cellB) * order;
|
||||
}
|
||||
|
||||
return (cellA - cellB) * order;
|
||||
});
|
||||
|
||||
// Réorganiser les lignes dans le tableau
|
||||
rowsArray.forEach(function (row) {
|
||||
tbody.appendChild(row);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Fonction pour convertir les mois en numéros pour faciliter le tri
|
||||
function moisToNumero(mois) {
|
||||
const moisIndex = {
|
||||
"Janvier": 1,
|
||||
"Février": 2,
|
||||
"Mars": 3,
|
||||
"Avril": 4,
|
||||
"Mai": 5,
|
||||
"Juin": 6,
|
||||
"Juillet": 7,
|
||||
"Août": 8,
|
||||
"Septembre": 9,
|
||||
"Octobre": 10,
|
||||
"Novembre": 11,
|
||||
"Décembre": 12
|
||||
};
|
||||
|
||||
// Extraire le mois et l'année du texte (ex: "Février 2024")
|
||||
const [moisNom, annee] = mois.split(' ');
|
||||
return new Date(annee, moisIndex[moisNom] - 1); // Créer un objet Date
|
||||
}
|
||||
|
||||
// Fonction pour vérifier si un texte est une date valide
|
||||
function isDate(dateString) {
|
||||
return !isNaN(Date.parse(dateString));
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
279
MaquetteWEB/html/RH/candidature.html
Normal file
279
MaquetteWEB/html/RH/candidature.html
Normal file
@ -0,0 +1,279 @@
|
||||
<!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">
|
||||
<title>Gestion des Candidatures</title>
|
||||
<style>
|
||||
/* Ajout de styles pour la barre de recherche et le tri */
|
||||
.search-container {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.sort-container {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.sort-button {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.comment-container {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
/* Styles pour la pop-up d'ajout d'offre de vacation */
|
||||
.vacation-modal {
|
||||
display: none; /* Masquer par défaut */
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: rgb(0,0,0);
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
.vacation-modal-content {
|
||||
background-color: #fefefe;
|
||||
margin: 5% auto;
|
||||
padding: 20px;
|
||||
border: 1px solid #888;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.validationDossier{
|
||||
margin-top: 25px;
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.refusDossier{
|
||||
background-color: rgb(128, 0, 0);
|
||||
}
|
||||
|
||||
.commentairee{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="header">
|
||||
<div class="logo-container">
|
||||
<img src="../../media/img/logoWhite.png" alt="Logo Accueil">
|
||||
</div>
|
||||
|
||||
<div class="categories">
|
||||
<a href="./rh.html">Accueil</a>
|
||||
<a href="./gestion_personnel.html">Gestion du personnel</a>
|
||||
<a href="./candidature.html">Candidatures</a>
|
||||
<a href="./mes-informations.html">Mes informations et documents</a>
|
||||
</div>
|
||||
|
||||
<div class="user-section">
|
||||
<div class="user-name">Alice BERGER</div>
|
||||
<div class="logout-container">
|
||||
<a href="../../index.html" title="Se déconnecter">
|
||||
<img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main>
|
||||
<section>
|
||||
<h2>Candidatures en Attente de Validation</h2>
|
||||
|
||||
<!-- Barre de recherche -->
|
||||
<div class="search-container">
|
||||
<input type="text" id="search-input" placeholder="Rechercher par nom" oninput="filterTable()">
|
||||
</div>
|
||||
|
||||
<!-- Conteneur de tri -->
|
||||
<div class="sort-container">
|
||||
<button class="sort-button" onclick="sortTable(0)">Trier par Nom</button>
|
||||
<button class="sort-button" onclick="sortTable(1)">Trier par Prénom</button>
|
||||
<button class="sort-button" onclick="sortTable(2)">Trier par Formation</button>
|
||||
<button class="sort-button" onclick="openVacationModal()">Ajouter une Offre de Vacation</button>
|
||||
</div>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Nom</th>
|
||||
<th>Prénom</th>
|
||||
<th>Formation Demandée</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="candidatures-table">
|
||||
<tr>
|
||||
<td>Mike</td>
|
||||
<td>Michel</td>
|
||||
<td>Informatique - BUT1</td>
|
||||
<td>
|
||||
<button onclick="consulterDossier('Mike', 'Michel')">Consulter Dossier</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Williams</td>
|
||||
<td>Mathématiques - BUT GEA</td>
|
||||
<td>
|
||||
<button onclick="consulterDossier('John', 'Williams')">Consulter Dossier</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Ajoutez d'autres lignes ici -->
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- Modal pour consulter le dossier de candidature -->
|
||||
<div id="dossierModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close" onclick="closeDossierModal()">×</span>
|
||||
<h2>Dossier de Candidature : <span id="dossier-nom"></span> <span id="dossier-prenom"></span></h2>
|
||||
<h3>Pièces Justificatives :</h3>
|
||||
<ul id="pieces-list"></ul>
|
||||
<div class="comment-container">
|
||||
<h3>Commentaire :</h3>
|
||||
<textarea class="commentairee" rows="4" placeholder="Ajouter un commentaire sur ce dossier..."></textarea><br>
|
||||
<button onclick="ajouterCommentaire()">Ajouter Commentaire</button>
|
||||
</div>
|
||||
<div>
|
||||
<button class="validationDossier" onclick="validerDossier()">Valider Dossier</button>
|
||||
<button class="refusDossier" onclick="refuserDossier()">Refuser Dossier</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal pour ajouter une offre de vacation -->
|
||||
<div id="vacationModal" class="vacation-modal">
|
||||
<div class="vacation-modal-content">
|
||||
<span class="close" onclick="closeVacationModal()">×</span>
|
||||
<h2>Ajouter une Offre de Vacation</h2>
|
||||
<form id="vacation-form">
|
||||
<label for="diplome">Diplôme requis :</label><br>
|
||||
<input type="text" id="diplome" name="diplome" required><br><br>
|
||||
|
||||
<label for="description">Description :</label><br>
|
||||
<textarea id="description" name="description" rows="4" required></textarea><br><br>
|
||||
|
||||
|
||||
<label for="duree">Durée (en jours) :</label><br>
|
||||
<input type="number" id="duree" name="duree" min="1" required><br><br>
|
||||
|
||||
<button type="submit">Soumettre l'Offre</button>
|
||||
</form>
|
||||
</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>
|
||||
const sortOrder = [true, true, true]; // État du tri pour chaque colonne
|
||||
|
||||
function sortTable(columnIndex) {
|
||||
const table = document.getElementById("candidatures-table");
|
||||
const rows = Array.from(table.rows);
|
||||
const direction = sortOrder[columnIndex] ? 1 : -1; // Déterminer la direction du tri
|
||||
sortOrder[columnIndex] = !sortOrder[columnIndex]; // Basculer l'ordre de tri pour le prochain clic
|
||||
|
||||
rows.sort((a, b) => {
|
||||
const aText = a.cells[columnIndex].textContent.trim();
|
||||
const bText = b.cells[columnIndex].textContent.trim();
|
||||
return direction * aText.localeCompare(bText);
|
||||
});
|
||||
|
||||
// Réattacher les lignes triées au tableau
|
||||
rows.forEach(row => table.appendChild(row));
|
||||
}
|
||||
|
||||
function filterTable() {
|
||||
const input = document.getElementById("search-input").value.toLowerCase();
|
||||
const table = document.getElementById("candidatures-table");
|
||||
const rows = Array.from(table.rows);
|
||||
|
||||
rows.forEach(row => {
|
||||
const cells = Array.from(row.cells);
|
||||
const match = cells[0].textContent.toLowerCase().includes(input) ||
|
||||
cells[1].textContent.toLowerCase().includes(input);
|
||||
row.style.display = match ? "" : "none";
|
||||
});
|
||||
}
|
||||
|
||||
function consulterDossier(nom, prenom) {
|
||||
document.getElementById("dossier-nom").textContent = nom;
|
||||
document.getElementById("dossier-prenom").textContent = prenom;
|
||||
const piecesList = document.getElementById("pieces-list");
|
||||
piecesList.innerHTML = `
|
||||
<li><a href="">CV - ${prenom} ${nom}.pdf</a></li>
|
||||
<li><a href="">Diplôme - Licence Informatique.pdf</a></li>
|
||||
<li><a href="">Lettre de motivation.pdf</a></li>
|
||||
<li><a href="">Justificatif d'expérience.pdf</a></li>
|
||||
`; // Remplacer par les vraies données
|
||||
document.getElementById("dossierModal").style.display = "block";
|
||||
}
|
||||
|
||||
function closeDossierModal() {
|
||||
document.getElementById("dossierModal").style.display = "none";
|
||||
document.getElementById("commentaire").value = ""; // Réinitialiser le champ de commentaire
|
||||
}
|
||||
|
||||
function ajouterCommentaire() {
|
||||
const commentaire = document.getElementById("commentaire").value;
|
||||
alert(`Commentaire ajouté : ${commentaire}`);
|
||||
// Logic to handle the comment addition can be implemented here
|
||||
}
|
||||
|
||||
function validerDossier() {
|
||||
alert("Dossier validé !");
|
||||
closeDossierModal();
|
||||
// Logic to handle the validation of the dossier can be implemented here
|
||||
}
|
||||
|
||||
function refuserDossier() {
|
||||
alert("Dossier refusé !");
|
||||
closeDossierModal();
|
||||
// Logic to handle the refusal of the dossier can be implemented here
|
||||
}
|
||||
|
||||
function openVacationModal() {
|
||||
document.getElementById("vacationModal").style.display = "block";
|
||||
}
|
||||
|
||||
function closeVacationModal() {
|
||||
document.getElementById("vacationModal").style.display = "none";
|
||||
document.getElementById("vacation-form").reset(); // Réinitialiser le formulaire
|
||||
}
|
||||
|
||||
// Gestion de la soumission du formulaire d'offre de vacation
|
||||
document.getElementById("vacation-form").addEventListener("submit", function(event) {
|
||||
event.preventDefault(); // Empêcher le rechargement de la page
|
||||
alert("Offre de vacation soumise !");
|
||||
closeVacationModal(); // Fermer la pop-up après soumission
|
||||
// Ici, vous pouvez ajouter le code pour traiter l'envoi du formulaire, comme envoyer les données à un serveur.
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
261
MaquetteWEB/html/RH/gestion_personnel.html
Normal file
261
MaquetteWEB/html/RH/gestion_personnel.html
Normal file
@ -0,0 +1,261 @@
|
||||
<!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">
|
||||
<title>Gestion du Personnel</title>
|
||||
<style>
|
||||
/* Ajout de styles pour la barre de recherche et le tri */
|
||||
.search-container {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.sort-container {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.sort-button {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.supprimerBouton{
|
||||
background-color: rgb(128, 0, 0);
|
||||
}
|
||||
|
||||
.voirDetailBouton{
|
||||
background-color: rgb(255, 140, 0);
|
||||
}
|
||||
|
||||
.modifierBouton{
|
||||
background-color: #28A745;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="header">
|
||||
<div class="logo-container">
|
||||
<img src="../../media/img/logoWhite.png" alt="Logo Accueil">
|
||||
</div>
|
||||
|
||||
<div class="categories">
|
||||
<a href="./rh.html">Accueil</a>
|
||||
<a href="./gestion_personnel.html">Gestion du personnel</a>
|
||||
<a href="./candidature.html">Candidatures</a>
|
||||
<a href="./mes-informations.html">Mes informations et documents</a>
|
||||
</div>
|
||||
|
||||
<div class="user-section">
|
||||
<div class="user-name">Alice BERGER</div>
|
||||
<div class="logout-container">
|
||||
<a href="../../index.html" title="Se déconnecter">
|
||||
<img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main>
|
||||
<section>
|
||||
<h2>Gestion du personnel</h2>
|
||||
<!-- Barre de recherche -->
|
||||
<div class="search-container">
|
||||
<input type="text" id="search-input" placeholder="Rechercher par nom" oninput="filterTable()">
|
||||
</div>
|
||||
|
||||
<!-- Conteneur de tri -->
|
||||
<div class="sort-container">
|
||||
<button class="sort-button" onclick="sortTable(0)">Trier par Nom</button>
|
||||
<button class="sort-button" onclick="sortTable(1)">Trier par Prénom</button>
|
||||
<button class="sort-button" onclick="sortTable(2)">Trier par Statut</button>
|
||||
<button class="sort-button" onclick="sortTable(3)">Trier par Dernière Intervention</button>
|
||||
</div>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Nom</th>
|
||||
<th>Prénom</th>
|
||||
<th>Statut</th>
|
||||
<th>Dernière Intervention</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="personnel-table">
|
||||
<tr>
|
||||
<td>Dupont</td>
|
||||
<td>Jean</td>
|
||||
<td>Professeur Vacataire</td>
|
||||
<td>01/10/2024</td>
|
||||
<td>
|
||||
<button class="modifierBouton" onclick="openModal('Dupont', 'Jean', 'Professeur Vacataire', '01/10/2024')">Modifier</button>
|
||||
<button class="supprimerBouton" onclick="supprimerPersonnel('Dupont', 'Jean')">Supprimer</button>
|
||||
<button class="voirDetailBouton" onclick="voirDetails('Dupont', 'Jean', 'Professeur Vacataire', '01/10/2024')">Voir Détails</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martin</td>
|
||||
<td>Sophie</td>
|
||||
<td>Professeur Vacataire</td>
|
||||
<td>15/09/2024</td>
|
||||
<td>
|
||||
<button class="modifierBouton" onclick="openModal('Martin', 'Sophie', 'Professeur Vacataire', '15/09/2024')">Modifier</button>
|
||||
<button class="supprimerBouton" onclick="supprimerPersonnel('Martin', 'Sophie')">Supprimer</button>
|
||||
<button class="voirDetailBouton" onclick="voirDetails('Martin', 'Sophie', 'Professeur Vacataire', '15/09/2024')">Voir Détails</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Ajoutez d'autres lignes ici -->
|
||||
</tbody>
|
||||
</table>
|
||||
<button onclick="ajouterPersonnel()">Ajouter un Personnel</button>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- Modal pour modifier le personnel -->
|
||||
<div id="myModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close" onclick="closeModal()">×</span>
|
||||
<h2>Modifier le Personnel</h2>
|
||||
<form id="edit-form">
|
||||
<label for="nom">Nom:</label>
|
||||
<input type="text" id="nom" required><br>
|
||||
<label for="prenom">Prénom:</label>
|
||||
<input type="text" id="prenom" required><br>
|
||||
<label for="statut">Statut:</label>
|
||||
<input type="text" id="statut" required><br>
|
||||
<label for="intervention">Dernière Intervention:</label>
|
||||
<input type="date" id="intervention" required><br>
|
||||
<button type="submit">Enregistrer</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal pour voir les détails du personnel -->
|
||||
<div id="detailModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close" onclick="closeDetailModal()">×</span>
|
||||
<h2>Détails de Personnel</h2>
|
||||
<p id="detail-info"></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>
|
||||
<h3>Historique des Heures</h3>
|
||||
<ul id="historique-list"></ul>
|
||||
<h3>Coordonnées</h3>
|
||||
<p id="coordonnees"></p>
|
||||
<button onclick="lancerProcedurePaiement()">Lancer la Procédure de Paiement</button>
|
||||
<button onclick="modifierHeures()">Modifier les Heures</button>
|
||||
|
||||
</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>
|
||||
let sortOrder = [true, true, true, true]; // Array to keep track of sort order for each column
|
||||
|
||||
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
|
||||
|
||||
rows.sort((a, b) => {
|
||||
const aText = a.cells[columnIndex].textContent.trim();
|
||||
const bText = b.cells[columnIndex].textContent.trim();
|
||||
|
||||
if (columnIndex === 3) { // Date column
|
||||
return direction * (new Date(aText) - new Date(bText));
|
||||
} else {
|
||||
return direction * aText.localeCompare(bText);
|
||||
}
|
||||
});
|
||||
|
||||
// Reattach sorted rows to the table
|
||||
rows.forEach(row => table.appendChild(row));
|
||||
}
|
||||
|
||||
function filterTable() {
|
||||
const input = document.getElementById("search-input").value.toLowerCase();
|
||||
const table = document.getElementById("personnel-table");
|
||||
const rows = Array.from(table.rows);
|
||||
|
||||
rows.forEach(row => {
|
||||
const cells = Array.from(row.cells);
|
||||
const match = cells[0].textContent.toLowerCase().includes(input) ||
|
||||
cells[1].textContent.toLowerCase().includes(input);
|
||||
row.style.display = match ? "" : "none";
|
||||
});
|
||||
}
|
||||
|
||||
function openModal(nom, prenom, statut, intervention) {
|
||||
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";
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
document.getElementById("myModal").style.display = "none";
|
||||
}
|
||||
|
||||
function supprimerPersonnel(nom, prenom) {
|
||||
if (confirm(`Êtes-vous sûr de vouloir supprimer ${prenom} ${nom} ?`)) {
|
||||
const row = event.target.closest("tr");
|
||||
row.parentNode.removeChild(row);
|
||||
}
|
||||
}
|
||||
|
||||
function voirDetails(nom, prenom, statut, intervention) {
|
||||
// Remplir les détails du personnel ici
|
||||
document.getElementById("detail-info").textContent = `Nom: ${nom}, Prénom: ${prenom}, Statut: ${statut}, Dernière Intervention: ${intervention}`;
|
||||
document.getElementById("heures-a-payer").textContent = "10 heures"; // Remplacer par les vraies données
|
||||
document.getElementById("corrections-list").innerHTML = "<li><a href=\"#\">Pas assez d'heures</a> : 19/10/2024</li>"; // Remplacer par les vraies données
|
||||
document.getElementById("documents-list").innerHTML = "<li><a href=\"#\">Contrat de travail</a></li><li><a href=\"#\">CV</a></li><li><a href=\"#\">Diplôme</a></li><li><a href=\"#\">Justificatif d'expérience</a></li>"; // Remplacer par les vraies données
|
||||
document.getElementById("statut-detail").textContent = statut;
|
||||
document.getElementById("historique-list").innerHTML = "<li>CM - SCR - 19/10/2024 - 12h30</li><li>TP - DEV - 19/10/2024 - 15h30</li>"; // Remplacer par les vraies données
|
||||
document.getElementById("coordonnees").textContent = `${prenom}.${nom}@u-pec.fr`;
|
||||
document.getElementById("detailModal").style.display = "block";
|
||||
}
|
||||
|
||||
function closeDetailModal() {
|
||||
document.getElementById("detailModal").style.display = "none";
|
||||
}
|
||||
|
||||
function ajouterPersonnel() {
|
||||
// Logic to add personnel goes here
|
||||
alert("Fonctionnalité à venir !");
|
||||
}
|
||||
|
||||
function lancerProcedurePaiement() {
|
||||
alert("Lancement de la procédure de paiement...");
|
||||
// Logic to launch payment process goes here
|
||||
}
|
||||
|
||||
function modifierHeures() {
|
||||
alert("Modification des heures...");
|
||||
// Logic to modify hours goes here
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
518
MaquetteWEB/html/RH/mes-informations.html
Normal file
518
MaquetteWEB/html/RH/mes-informations.html
Normal file
File diff suppressed because it is too large
Load Diff
130
MaquetteWEB/html/RH/rh.html
Normal file
130
MaquetteWEB/html/RH/rh.html
Normal file
@ -0,0 +1,130 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Dashboard Vacataire</title>
|
||||
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
|
||||
<link rel="stylesheet" href="../../css/VACATAIRE/vacataire.css">
|
||||
<style>
|
||||
.header {
|
||||
background-color: #0f431f;
|
||||
color: white;
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
}
|
||||
.section-header {
|
||||
background-color: #f8f8f8;
|
||||
padding: 10px;
|
||||
border-left: 5px solid #0f431f;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.summary, .upcoming-sessions, .important-documents, .feedback, .events {
|
||||
margin-bottom: 20px;
|
||||
padding: 15px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="header">
|
||||
<div class="logo-container">
|
||||
<img src="../../media/img/logoWhite.png" alt="Logo Accueil">
|
||||
</div>
|
||||
|
||||
<div class="categories">
|
||||
<a href="./rh.html">Accueil</a>
|
||||
<a href="./gestion_personnel.html">Gestion du personnel</a>
|
||||
<a href="./candidature.html">Candidatures</a>
|
||||
<a href="./mes-informations.html">Mes informations et documents</a>
|
||||
</div>
|
||||
|
||||
<div class="user-section">
|
||||
<div class="user-name">Alice BERGER</div>
|
||||
<div class="logout-container">
|
||||
<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">
|
||||
<!-- Alertes et Notifications -->
|
||||
<div class="section-header" id="notifications-section">
|
||||
<h2>Alertes et Notifications</h2>
|
||||
</div>
|
||||
<div id="notifications-container">
|
||||
<!-- Notifications -->
|
||||
<div class="alert">
|
||||
<span class="close" onclick="this.parentElement.style.display='none';">×</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="success">
|
||||
<span class="close" onclick="this.parentElement.style.display='none';">×</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>
|
||||
|
||||
<!-- Résumé des Heures -->
|
||||
<div class="section-header">
|
||||
<h2>Résumé des Heures</h2>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Événements à Venir -->
|
||||
<div class="section-header">
|
||||
<h2>Événements à Venir</h2>
|
||||
</div>
|
||||
<div class="events">
|
||||
<ul>
|
||||
<li>Réunion des RH : 30 Octobre 2024</li>
|
||||
<li>Formation sur l'Utilisation des Outils Numériques : 5 Novembre 2024</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Script pour gérer l'affichage des notifications -->
|
||||
<script>
|
||||
const notificationsContainer = document.getElementById('notifications-container');
|
||||
const notificationsSection = document.getElementById('notifications-section');
|
||||
|
||||
// Vérifiez si le conteneur des notifications est vide
|
||||
if (notificationsContainer.childElementCount === 0) {
|
||||
notificationsSection.style.display = 'none'; // Masquer la section si aucune notification
|
||||
}
|
||||
</script>
|
||||
</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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
474
MaquetteWEB/html/VACATAIRE/mes-heures.html
Normal file
474
MaquetteWEB/html/VACATAIRE/mes-heures.html
Normal file
@ -0,0 +1,474 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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">
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<link rel="stylesheet" href="../../css/VACATAIRE/mes-heures.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="header">
|
||||
<!-- Logo pour retourner à l'accueil -->
|
||||
<div class="logo-container">
|
||||
<img src="../../media/img/logoWhite.png" alt="Logo Accueil">
|
||||
</div>
|
||||
|
||||
<!-- 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="./mes-informations.html">Mes informations et documents</a>
|
||||
</div>
|
||||
|
||||
<!-- Section utilisateur avec déconnexion -->
|
||||
<div class="user-section">
|
||||
<div class="user-name">
|
||||
Maxime MENAULT
|
||||
</div>
|
||||
<div class="logout-container">
|
||||
<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">
|
||||
<h2>Offres de vacation</h2>
|
||||
</div>
|
||||
<div class="proposition-container">
|
||||
<table class="proposition-table" id="proposalTable">
|
||||
<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>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<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>
|
||||
<button class="accept-button" onclick="acceptProposal(this)">Postuler</button>
|
||||
<button class="refuse-button" onclick="confirmRefusal(this)">Refuser</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Janvier 2025</td>
|
||||
<td>BUT2</td>
|
||||
<td>SCR</td>
|
||||
<td>3</td>
|
||||
<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>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</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>
|
||||
|
||||
<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">
|
||||
<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">
|
||||
<!-- Rows will be generated dynamically with JavaScript -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Pagination Buttons -->
|
||||
<div id="pagination">
|
||||
<button onclick="prevPage()">Précédent</button>
|
||||
<span id="pageNumber"></span>
|
||||
<button onclick="nextPage()">Suivant</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-header">
|
||||
<h2>Graphique des Heures Travaillées</h2>
|
||||
</div>
|
||||
<div class="chart-container">
|
||||
<canvas id="hoursChart"></canvas>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="section-header">
|
||||
<h2>Signalement de problèmes d'heures</h2>
|
||||
</div>
|
||||
<div class="contact-form">
|
||||
<form id="contactForm">
|
||||
<label for="probleme">Type de problème :</label>
|
||||
<select id="probleme" name="probleme" 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="autre">Autre</option>
|
||||
</select>
|
||||
|
||||
<label for="commentaire">Commentaires :</label>
|
||||
<input type="text" id="commentaire" name="commentaire" placeholder="Décrivez votre problème" required>
|
||||
|
||||
<button type="submit">Soumettre</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Popup pour les détails du cours -->
|
||||
<div id="infoPopup" class="popup">
|
||||
<h4>Détails du la journée</h4>
|
||||
<p><strong>Promotion :</strong> <span id="promotion"></span></p>
|
||||
<p><strong>Groupe(s) :</strong> <span id="groupe"></span></p>
|
||||
<p><strong>Salle :</strong> <span id="salle"></span></p>
|
||||
<button onclick="closeInfoPopup()">Fermer</button>
|
||||
</div>
|
||||
|
||||
<!-- Popup pour succès de l'envoi du formulaire -->
|
||||
<div id="popup" class="popup">
|
||||
<img src="https://img.icons8.com/ios-filled/50/155724/checkmark.png" alt="Success Icon">
|
||||
<h4>Signalement Envoyé !</h4>
|
||||
<p>Merci pour votre signalement. Nous allons traiter votre demande dans les plus brefs délais.</p>
|
||||
<button onclick="closePopup()">Fermer</button>
|
||||
</div>
|
||||
|
||||
<!-- Popup de confirmation de refus -->
|
||||
<div id="confirmationPopup" class="confirmation-popup">
|
||||
<div class="confirmation-content">
|
||||
<h4>Confirmer le Refus</h4>
|
||||
<p>Êtes-vous sûr de vouloir refuser cette proposition d'heure ?</p>
|
||||
<button id="confirmRefusalButton" onclick="confirmRefusalAction()">Confirmer</button>
|
||||
<button onclick="closeConfirmationPopup()">Annuler</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="infoPopup" class="popup">
|
||||
<h4>Détails de l'intervention</h4>
|
||||
<p><strong>Promotion :</strong> <span id="popupPromotion"></span></p>
|
||||
<p><strong>Type de Cours :</strong> <span id="popupTypeCours"></span></p>
|
||||
<p><strong>ETD :</strong> <span id="popupETD"></span></p>
|
||||
<p><strong>Montant :</strong> <span id="popupMontant"></span></p>
|
||||
<p><strong>Matière :</strong> <span id="popupMatiere"></span></p>
|
||||
<button onclick="closeInfoPopup()">Fermer</button>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<p>© 2024 IUT de Fontainebleau. Tous droits réservés | <a href="html/mentions_legales.html" style="color: white;">Mentions légales</a></p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Données du graphique
|
||||
const ctx = document.getElementById('hoursChart').getContext('2d');
|
||||
const hoursChart = new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ['Semaine 1', 'Semaine 2', 'Semaine 3', 'Semaine 4'],
|
||||
datasets: [{
|
||||
label: 'Heures Travaillées',
|
||||
data: [5, 10, 7, 8],
|
||||
backgroundColor: 'rgba(75, 192, 192, 0.2)',
|
||||
borderColor: 'rgba(75, 192, 192, 1)',
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Heures'
|
||||
}
|
||||
},
|
||||
x: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Semaines'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
let proposalToRemove; // Variable pour stocker la proposition à supprimer
|
||||
|
||||
// Fonctions pour gérer l'acceptation et le refus
|
||||
function acceptProposal(button) {
|
||||
document.getElementById("justificatifForm").style.display = "block";
|
||||
proposalToRemove = button.closest('tr'); // Stocker la proposition à supprimer
|
||||
}
|
||||
|
||||
function confirmRefusal(button) {
|
||||
proposalToRemove = button.closest('tr');
|
||||
document.getElementById("confirmationPopup").style.display = "flex";
|
||||
}
|
||||
|
||||
function confirmRefusalAction() {
|
||||
proposalToRemove.remove();
|
||||
closeConfirmationPopup();
|
||||
}
|
||||
|
||||
function closeConfirmationPopup() {
|
||||
document.getElementById("confirmationPopup").style.display = "none";
|
||||
}
|
||||
|
||||
function submitJustificatif() {
|
||||
alert("Vos pièces justificatives ont été soumises avec succès.");
|
||||
closeJustificatifPopup(); // Cacher le formulaire
|
||||
|
||||
// Ajouter l'heure validée à la section des heures validées
|
||||
const validatedTableBody = document.getElementById("validatedTableBody");
|
||||
const newRow = document.createElement("tr");
|
||||
const periode = proposalToRemove.cells[0].innerText; // Récupérer la période
|
||||
const formation = proposalToRemove.cells[1].innerText; // Récupérer la formation
|
||||
const nomCours = proposalToRemove.cells[2].innerText; // Récupérer le nom du cours
|
||||
const semestre = proposalToRemove.cells[3].innerText; // Récupérer le semestre
|
||||
const typeIntervention = proposalToRemove.cells[4].innerText; // Récupérer le type d'intervention
|
||||
const volumePrevisionnel = proposalToRemove.cells[5].innerText; // Récupérer le volume prévisionnel
|
||||
|
||||
newRow.innerHTML = `<td>${periode}</td><td>${formation}</td><td>${nomCours}</td><td>${semestre}</td><td>${typeIntervention}</td><td>${volumePrevisionnel}</td><td class="status-attente">En attente de traitement</td> `;
|
||||
validatedTableBody.appendChild(newRow);
|
||||
proposalToRemove.remove(); // Supprimer la proposition de l'affichage
|
||||
}
|
||||
|
||||
function closeJustificatifPopup() {
|
||||
document.getElementById("justificatifForm").style.display = "none";
|
||||
}
|
||||
|
||||
function getRandomBUT() {
|
||||
return "BUT" + Math.floor(Math.random() * 3 + 1); // Génère un nombre aléatoire entre 1 et 3
|
||||
}
|
||||
|
||||
// Gestion des popups
|
||||
function showDetails(promotion, groupes, salle) {
|
||||
document.getElementById("promotion").innerText = promotion;
|
||||
document.getElementById("groupe").innerText = groupes;
|
||||
document.getElementById("salle").innerText = salle;
|
||||
document.getElementById("infoPopup").style.display = "block";
|
||||
}
|
||||
|
||||
function closeInfoPopup() {
|
||||
document.getElementById("infoPopup").style.display = "none";
|
||||
}
|
||||
|
||||
function closePopup() {
|
||||
document.getElementById("popup").style.display = "none";
|
||||
}
|
||||
|
||||
// Gestion de l'envoi du formulaire de contact
|
||||
document.getElementById('contactForm').addEventListener('submit', function(event) {
|
||||
event.preventDefault();
|
||||
document.getElementById("popup").style.display = "block";
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
// Exemple d'un grand nombre d'heures pour l'historique
|
||||
const hoursData = [
|
||||
{ date: '01/02/2024', matiere: 'SCR', type: 'CM', volume: '3 ETD', worked: '4h' },
|
||||
{ date: '05/02/2024', matiere: 'Web Dev', type: 'TP', volume: '2 ETD', worked: '3h' },
|
||||
{ date: '10/02/2024', matiere: 'Mathématiques', type: 'TD', volume: '4 ETD', worked: '5h' },
|
||||
{ date: '15/02/2024', matiere: 'IA', type: 'CM', volume: '2 ETD', worked: '2h' },
|
||||
{ date: '20/02/2024', matiere: 'Python', type: 'TP', volume: '5 ETD', worked: '7h' },
|
||||
// Ajoutez ici un grand nombre de données...
|
||||
{ date: '01/03/2024', matiere: 'Réseaux', type: 'TD', volume: '3 ETD', worked: '4h' },
|
||||
{ date: '10/03/2024', matiere: 'Big Data', type: 'CM', volume: '5 ETD', worked: '6h' },
|
||||
// Plusieurs lignes (simulons jusqu'à 50 lignes ou plus)...
|
||||
{ date: '01/04/2024', matiere: 'Dev Mobile', type: 'TP', volume: '2 ETD', worked: '3h' },
|
||||
{ date: '10/04/2024', matiere: 'Sécurité', type: 'CM', volume: '3 ETD', worked: '5h' },
|
||||
];
|
||||
|
||||
// Variables pour la pagination
|
||||
const rowsPerPage = 5;
|
||||
let currentPage = 1;
|
||||
const totalRows = hoursData.length;
|
||||
const totalPages = Math.ceil(totalRows / rowsPerPage);
|
||||
|
||||
// Fonction pour afficher la table avec pagination
|
||||
function displayTable(page) {
|
||||
const start = (page - 1) * rowsPerPage;
|
||||
const end = start + rowsPerPage;
|
||||
const tableBody = document.getElementById('hoursTableBody');
|
||||
tableBody.innerHTML = ''; // Clear existing rows
|
||||
|
||||
const pageData = hoursData.slice(start, end);
|
||||
pageData.forEach(row => {
|
||||
const tr = document.createElement('tr');
|
||||
tr.innerHTML = `<td>${row.date}</td>
|
||||
<td>${row.matiere}</td>
|
||||
<td>${row.type}</td>
|
||||
<td>${row.volume}</td>
|
||||
<td>${row.worked}</td>
|
||||
<td><span class="details-button" onclick="showDetails('BUT2', '1,2,3', '140')">Plus d'infos</span></td>`;
|
||||
tableBody.appendChild(tr);
|
||||
});
|
||||
|
||||
document.getElementById('pageNumber').innerText = `Page ${page} sur ${totalPages}`;
|
||||
}
|
||||
|
||||
// Fonctions pour naviguer dans la pagination
|
||||
function nextPage() {
|
||||
if (currentPage < totalPages) {
|
||||
currentPage++;
|
||||
displayTable(currentPage);
|
||||
}
|
||||
}
|
||||
|
||||
function prevPage() {
|
||||
if (currentPage > 1) {
|
||||
currentPage--;
|
||||
displayTable(currentPage);
|
||||
}
|
||||
}
|
||||
|
||||
// Fonction de tri pour les colonnes
|
||||
function sortTable(n) {
|
||||
const table = document.getElementById('hoursTable');
|
||||
let rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
|
||||
switching = true;
|
||||
dir = "asc"; // Set the sorting direction to ascending
|
||||
while (switching) {
|
||||
switching = false;
|
||||
rows = table.rows;
|
||||
for (i = 1; i < (rows.length - 1); i++) {
|
||||
shouldSwitch = false;
|
||||
x = rows[i].getElementsByTagName("TD")[n];
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (shouldSwitch) {
|
||||
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
|
||||
switching = true;
|
||||
switchcount++;
|
||||
} else {
|
||||
if (switchcount === 0 && dir === "asc") {
|
||||
dir = "desc";
|
||||
switching = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Initial load
|
||||
displayTable(currentPage);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
554
MaquetteWEB/html/VACATAIRE/mes-informations.html
Normal file
554
MaquetteWEB/html/VACATAIRE/mes-informations.html
Normal file
File diff suppressed because it is too large
Load Diff
402
MaquetteWEB/html/VACATAIRE/paiements.html
Normal file
402
MaquetteWEB/html/VACATAIRE/paiements.html
Normal file
@ -0,0 +1,402 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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">
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<link rel="stylesheet" href="../../css/VACATAIRE/paiements.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="header">
|
||||
<!-- Logo pour retourner à l'accueil -->
|
||||
<div class="logo-container">
|
||||
<img src="../../media/img/logoWhite.png" alt="Logo Accueil">
|
||||
</div>
|
||||
|
||||
<!-- 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="./mes-informations.html">Mes informations et documents</a>
|
||||
</div>
|
||||
|
||||
<!-- Section utilisateur avec déconnexion -->
|
||||
<div class="user-section">
|
||||
<div class="user-name">
|
||||
Maxime MENAULT
|
||||
</div>
|
||||
<div class="logout-container">
|
||||
<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">
|
||||
<!-- Historique des paiements -->
|
||||
<div class="section-header">
|
||||
<h2>Historique des Paiements</h2>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="table-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-sort="periode">Période</th>
|
||||
<th data-sort="heuresPayees">Heures Payées</th>
|
||||
<th data-sort="montantBrut">Montant Brut (€)</th>
|
||||
<th data-sort="montantNet">Montant Net (€)</th>
|
||||
<th data-sort="datePaiement">Date de Paiement</th>
|
||||
<th data-sort="modePaiement">Mode de Paiement</th>
|
||||
<th data-sort="compteBancaire">Compte Bancaire</th>
|
||||
<th data-sort="statut">Statut</th>
|
||||
<th>Bulletin de Paie</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Février 2024</td>
|
||||
<td>20h</td>
|
||||
<td>870,00</td>
|
||||
<td>700,00</td>
|
||||
<td>01/03/2024</td>
|
||||
<td>Virement Bancaire</td>
|
||||
<td>Compte XXXXXX1234</td>
|
||||
<td class="status-valide">Validé</td>
|
||||
<td><a href="https://ensap.gouv.fr" target="_blank" class="btn">Voir Bulletin</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Mars 2024</td>
|
||||
<td>25h</td>
|
||||
<td>1 087,50</td>
|
||||
<td>875,00</td>
|
||||
<td>01/04/2024</td>
|
||||
<td>Virement Bancaire</td>
|
||||
<td>Compte XXXXXX1234</td>
|
||||
<td class="status-valide">Validé</td>
|
||||
<td><a href="https://ensap.gouv.fr" target="_blank" class="btn">Voir Bulletin</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Avril 2024</td>
|
||||
<td>22h</td>
|
||||
<td>957,00</td>
|
||||
<td>760,00</td>
|
||||
<td>01/05/2024</td>
|
||||
<td>Virement Bancaire</td>
|
||||
<td>Compte XXXXXX1234</td>
|
||||
<td class="status-valide">Validé</td>
|
||||
<td><a href="https://ensap.gouv.fr" target="_blank" class="btn">Voir Bulletin</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Mai 2024</td>
|
||||
<td>20h</td>
|
||||
<td>870,00</td>
|
||||
<td>700,00</td>
|
||||
<td>01/06/2024</td>
|
||||
<td>Virement Bancaire</td>
|
||||
<td>Compte XXXXXX1234</td>
|
||||
<td class="status-valide">Validé</td>
|
||||
<td><a href="https://ensap.gouv.fr" target="_blank" class="btn">Voir Bulletin</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Juin 2024</td>
|
||||
<td>18h</td>
|
||||
<td>783,00</td>
|
||||
<td>625,00</td>
|
||||
<td>01/07/2024</td>
|
||||
<td>Virement Bancaire</td>
|
||||
<td>Compte XXXXXX1234</td>
|
||||
<td class="status-valide">Validé</td>
|
||||
<td><a href="https://ensap.gouv.fr" target="_blank" class="btn">Voir Bulletin</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Septembre 2024</td>
|
||||
<td>20h</td>
|
||||
<td>870,00</td>
|
||||
<td>700,00</td>
|
||||
<td>01/10/2024</td>
|
||||
<td>Virement Bancaire</td>
|
||||
<td>Compte XXXXXX1234</td>
|
||||
<td class="status-valide">Validé</td>
|
||||
<td><a href="https://ensap.gouv.fr" target="_blank" class="btn">Voir Bulletin</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Octobre 2024</td>
|
||||
<td>22h</td>
|
||||
<td>957,00</td>
|
||||
<td>760,00</td>
|
||||
<td>01/11/2024</td>
|
||||
<td>Virement Bancaire</td>
|
||||
<td>Compte XXXXXX1234</td>
|
||||
<td class="status-attente">En attente</td>
|
||||
<td><a href="https://ensap.gouv.fr" target="_blank" class="btn">Voir Bulletin</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p><strong>Prochain paiement prévu :</strong> Novembre 2024 (20h restantes)</p>
|
||||
</div>
|
||||
|
||||
<!-- Graphique des paiements (brut) -->
|
||||
<div class="section-header">
|
||||
<h2>Évolution de vos Paiements</h2>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="chart-container">
|
||||
<canvas id="paymentChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Formulaire pour signaler un problème -->
|
||||
<!-- Formulaire pour signaler un problème -->
|
||||
<div class="section-header">
|
||||
<h2>Signaler un problème de paye</h2>
|
||||
</div>
|
||||
<div class="card contact-form">
|
||||
<h3>Formulaire de signalement</h3>
|
||||
<form id="contactForm">
|
||||
<label for="probleme">Sélectionnez un problème :</label>
|
||||
<select id="probleme" required>
|
||||
<option value="">-- Sélectionner un problème --</option>
|
||||
<option value="noPayment">Je n'ai pas reçu de paiement</option>
|
||||
<option value="wrongAmount">Le montant de mon salaire est inférieur à ce qui était prévu.</option>
|
||||
<option value="duplicatePayment">J'ai reçu un paiement en double</option>
|
||||
<option value="latePayment">Mon paiement est en retard</option>
|
||||
<option value="unjustifiedWithholding">Il y a une retenue sur mon paiement que je ne comprends pas</option>
|
||||
<option value="technicalIssue">J'ai des difficultés à accéder à mes bulletins de salaire en ligne</option>
|
||||
</select>
|
||||
|
||||
<!-- Champs supplémentaires qui s'affichent selon le problème -->
|
||||
<div id="detailsSupplementaires" style="display: none;">
|
||||
<!-- Champ pour sélectionner le mois -->
|
||||
<div id="moisEnQuestion" style="display:none;">
|
||||
<label for="mois">Sélectionner le mois :</label>
|
||||
<select id="mois">
|
||||
<option value="">-- Sélectionner le mois --</option>
|
||||
<option value="fevrier">Février 2024</option>
|
||||
<option value="mars">Mars 2024</option>
|
||||
<option value="avril">Avril 2024</option>
|
||||
<option value="mai">Mai 2024</option>
|
||||
<option value="juin">Juin 2024</option>
|
||||
<option value="septembre">Septembre 2024</option>
|
||||
<option value="octobre">Octobre 2024</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Champ pour indiquer le montant reçu -->
|
||||
<div id="montantRecuSupplementaire" style="display:none;">
|
||||
<label for="montantRecu">Montant reçu (€) :</label>
|
||||
<input type="number" id="montantRecu" placeholder="Montant reçu" />
|
||||
</div>
|
||||
|
||||
<!-- Champ pour indiquer le montant attendu -->
|
||||
<div id="montantAttendu" style="display:none;">
|
||||
<label for="montantAttenduInput">Montant attendu (€) :</label>
|
||||
<input type="number" id="montantAttenduInput" placeholder="Montant attendu" />
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit">Envoyer</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<p>© 2024 IUT de Fontainebleau. Tous droits réservés |
|
||||
<a href="html/mentions_legales.html">Mentions légales</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Popup de confirmation -->
|
||||
<div class="popup" id="popup">
|
||||
<img src="https://img.icons8.com/ios-filled/50/155724/checkmark.png" alt="Coche">
|
||||
<h4>Message envoyé</h4>
|
||||
<p>Votre message a été transmis à la direction. Un email de confirmation vous a été envoyé.</p>
|
||||
<button onclick="fermerPopup()">Fermer</button>
|
||||
</div>
|
||||
|
||||
<!-- Script pour gérer le formulaire et le popup -->
|
||||
<script>
|
||||
document.getElementById('probleme').addEventListener('change', function() {
|
||||
var detailsSupplementaires = document.getElementById('detailsSupplementaires');
|
||||
var montantRecuSupplementaire = document.getElementById('montantRecuSupplementaire');
|
||||
var moisEnQuestion = document.getElementById('moisEnQuestion'); // Champ pour sélectionner le mois
|
||||
var montantAttendu = document.getElementById('montantAttendu'); // Champ pour indiquer le montant attendu
|
||||
|
||||
// Masquer tous les champs au départ
|
||||
detailsSupplementaires.style.display = 'none';
|
||||
montantRecuSupplementaire.style.display = 'none';
|
||||
moisEnQuestion.style.display = 'none';
|
||||
montantAttendu.style.display = 'none';
|
||||
|
||||
// Afficher les champs en fonction du problème sélectionné
|
||||
switch (this.value) {
|
||||
case 'noPayment':
|
||||
detailsSupplementaires.style.display = 'block';
|
||||
moisEnQuestion.style.display = 'block'; // Afficher le champ pour sélectionner le mois
|
||||
break;
|
||||
case 'wrongAmount':
|
||||
detailsSupplementaires.style.display = 'block';
|
||||
montantRecuSupplementaire.style.display = 'block'; // Afficher le montant
|
||||
moisEnQuestion.style.display = 'block'; // Afficher le champ pour sélectionner le mois
|
||||
break;
|
||||
case 'duplicatePayment':
|
||||
detailsSupplementaires.style.display = 'block';
|
||||
moisEnQuestion.style.display = 'block'; // Afficher le champ pour sélectionner le mois
|
||||
montantAttendu.style.display = 'block'; // Afficher le champ pour le montant attendu
|
||||
break;
|
||||
case 'latePayment':
|
||||
detailsSupplementaires.style.display = 'block';
|
||||
moisEnQuestion.style.display = 'block'; // Afficher le champ pour sélectionner le mois
|
||||
break;
|
||||
case 'unjustifiedWithholding':
|
||||
detailsSupplementaires.style.display = 'block';
|
||||
break;
|
||||
case 'technicalIssue':
|
||||
detailsSupplementaires.style.display = 'block';
|
||||
break;
|
||||
default:
|
||||
// Aucune action si aucune valeur valide n'est sélectionnée
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('contactForm').addEventListener('submit', function(event) {
|
||||
event.preventDefault();
|
||||
// Afficher le popup de confirmation
|
||||
document.getElementById('popup').style.display = 'block';
|
||||
});
|
||||
|
||||
function fermerPopup() {
|
||||
document.getElementById('popup').style.display = 'none';
|
||||
// Réinitialiser le formulaire après soumission
|
||||
document.getElementById('contactForm').reset();
|
||||
document.getElementById('detailsSupplementaires').style.display = 'none';
|
||||
}
|
||||
|
||||
// Configuration du graphique Chart.js
|
||||
const ctx = document.getElementById('paymentChart').getContext('2d');
|
||||
const paymentChart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Septembre', 'Octobre'],
|
||||
datasets: [{
|
||||
label: 'Montant Brut (€)',
|
||||
data: [870, 1087.5, 957, 870, 783, 870, 957],
|
||||
borderColor: 'rgba(75, 192, 192, 1)',
|
||||
backgroundColor: 'rgba(75, 192, 192, 0.2)',
|
||||
fill: true,
|
||||
tension: 0.3,
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
document.querySelectorAll('th[data-sort]').forEach(function (header) {
|
||||
header.addEventListener('click', function () {
|
||||
const table = header.closest('table');
|
||||
const tbody = table.querySelector('tbody');
|
||||
const rowsArray = Array.from(tbody.querySelectorAll('tr'));
|
||||
const index = Array.from(header.parentElement.children).indexOf(header);
|
||||
let order = header.dataset.order || 1;
|
||||
|
||||
// Retirer les classes de tri des autres colonnes
|
||||
document.querySelectorAll('th[data-sort]').forEach(function (th) {
|
||||
th.classList.remove('ascending', 'descending');
|
||||
});
|
||||
|
||||
// Appliquer la classe de tri
|
||||
if (order == 1) {
|
||||
header.classList.add('ascending');
|
||||
header.dataset.order = -1; // Inverser l'ordre pour la prochaine fois
|
||||
} else {
|
||||
header.classList.add('descending');
|
||||
header.dataset.order = 1; // Réinitialiser pour la prochaine fois
|
||||
}
|
||||
|
||||
// Trier les lignes du tableau
|
||||
rowsArray.sort(function (rowA, rowB) {
|
||||
let cellA = rowA.children[index].innerText.trim();
|
||||
let cellB = rowB.children[index].innerText.trim();
|
||||
|
||||
// Gérer les périodes (mois)
|
||||
if (header.dataset.sort === 'periode') {
|
||||
cellA = moisToNumero(cellA);
|
||||
cellB = moisToNumero(cellB);
|
||||
}
|
||||
|
||||
// Gérer les montants numériques avec des virgules
|
||||
else if (!isNaN(cellA.replace(',', '.')) && !isNaN(cellB.replace(',', '.'))) {
|
||||
return (parseFloat(cellA.replace(',', '.')) - parseFloat(cellB.replace(',', '.'))) * order;
|
||||
}
|
||||
|
||||
// Gérer les dates
|
||||
else if (isDate(cellA) && isDate(cellB)) {
|
||||
return (new Date(cellA) - new Date(cellB)) * order;
|
||||
}
|
||||
|
||||
// Gérer les textes (par défaut)
|
||||
else {
|
||||
return cellA.localeCompare(cellB) * order;
|
||||
}
|
||||
|
||||
return (cellA - cellB) * order;
|
||||
});
|
||||
|
||||
// Réorganiser les lignes dans le tableau
|
||||
rowsArray.forEach(function (row) {
|
||||
tbody.appendChild(row);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Fonction pour convertir les mois en numéros pour faciliter le tri
|
||||
function moisToNumero(mois) {
|
||||
const moisIndex = {
|
||||
"Janvier": 1,
|
||||
"Février": 2,
|
||||
"Mars": 3,
|
||||
"Avril": 4,
|
||||
"Mai": 5,
|
||||
"Juin": 6,
|
||||
"Juillet": 7,
|
||||
"Août": 8,
|
||||
"Septembre": 9,
|
||||
"Octobre": 10,
|
||||
"Novembre": 11,
|
||||
"Décembre": 12
|
||||
};
|
||||
|
||||
// Extraire le mois et l'année du texte (ex: "Février 2024")
|
||||
const [moisNom, annee] = mois.split(' ');
|
||||
return new Date(annee, moisIndex[moisNom] - 1); // Créer un objet Date
|
||||
}
|
||||
|
||||
// Fonction pour vérifier si un texte est une date valide
|
||||
function isDate(dateString) {
|
||||
return !isNaN(Date.parse(dateString));
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
237
MaquetteWEB/html/VACATAIRE/vacataire.html
Normal file
237
MaquetteWEB/html/VACATAIRE/vacataire.html
Normal file
@ -0,0 +1,237 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Dashboard Vacataire</title>
|
||||
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
|
||||
<link rel="stylesheet" href="../../css/VACATAIRE/vacataire.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="header">
|
||||
<!-- Logo pour retourner à l'accueil -->
|
||||
<div class="logo-container">
|
||||
<img src="../../media/img/logoWhite.png" alt="Logo Accueil">
|
||||
</div>
|
||||
|
||||
<!-- 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="./mes-informations.html">Mes informations et documents</a>
|
||||
</div>
|
||||
|
||||
<!-- Section utilisateur avec déconnexion -->
|
||||
<div class="user-section">
|
||||
<div class="user-name">
|
||||
Maxime MENAULT
|
||||
</div>
|
||||
<div class="logout-container">
|
||||
<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">
|
||||
<!-- Alertes et Notifications -->
|
||||
<div class="section-header" id="notifications-section">
|
||||
<h2>Alertes et Notifications</h2>
|
||||
</div>
|
||||
<div id="notifications-container">
|
||||
<!-- Notifications -->
|
||||
<div class="alert">
|
||||
<span class="close" onclick="this.parentElement.style.display='none';">×</span>
|
||||
<p><strong>Propositions d'heures en attente :</strong> Vous n'avez toujours pas validé les propositions d'heures. Ces dernières seront automatiquement acceptées dans 3 jours. Merci de le faire au plus vite dans : <a href="mes-heures.html">Mes heures</a>.</p>
|
||||
</div>
|
||||
<div class="success">
|
||||
<span class="close" onclick="this.parentElement.style.display='none';">×</span>
|
||||
<p><strong>Pièces justificatives :</strong> Vos pièces justificatives ont été validées par le responsable pédagogique et sont accessibles dans : <a href="mes-informations.html">Mes informations et documents</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Script pour gérer l'affichage des notifications -->
|
||||
<script>
|
||||
const notificationsContainer = document.getElementById('notifications-container');
|
||||
const notificationsSection = document.getElementById('notifications-section');
|
||||
|
||||
// Vérifiez si le conteneur des notifications est vide
|
||||
if (notificationsContainer.childElementCount === 0) {
|
||||
notificationsSection.style.display = 'none'; // Masquer la section si aucune notification
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Emploi du Temps avec navigation de semaines -->
|
||||
<div class="section-header">
|
||||
<h2>Mon Emploi du Temps</h2>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<!-- Navigation entre semaines -->
|
||||
<div class="week-navigation">
|
||||
<button>« Semaine précédente</button>
|
||||
<p><strong>Semaine du 18 au 24 Novembre 2024</strong></p>
|
||||
<button>Semaine suivante »</button>
|
||||
</div>
|
||||
|
||||
<div class="schedule-container">
|
||||
<table class="schedule-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Heures</th>
|
||||
<th>Lundi</th>
|
||||
<th>Mardi</th>
|
||||
<th>Mercredi</th>
|
||||
<th>Jeudi</th>
|
||||
<th>Vendredi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="time-slot">08:00 - 08:30</td>
|
||||
<td class="no-class"></td>
|
||||
<td class="no-class"></td>
|
||||
<td class="no-class"></td>
|
||||
<td class="no-class"></td>
|
||||
<td class="no-class"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="time-slot">08:30 - 09:00</td>
|
||||
<td class="class">TP - SCR<br><span>Salle 224 - BUT1 Groupe 3</span></td>
|
||||
<td class="no-class"></td>
|
||||
<td class="no-class"></td>
|
||||
<td class="no-class"></td>
|
||||
<td class="no-class"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="time-slot">09:00 - 09:30</td>
|
||||
<td class="class">TP - Mathématiques<br><span>Salle 101 - BUT2 Groupe 1</span></td>
|
||||
<td class="no-class"></td>
|
||||
<td class="no-class"></td>
|
||||
<td class="class">TD - SCR<br><span>Salle 305 - BUT1 Groupe 2</span></td>
|
||||
<td class="no-class"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="time-slot">09:30 - 10:00</td>
|
||||
<td class="no-class"></td>
|
||||
<td class="class">TP - DEV<br><span>Salle 202 - BUT1 Groupe 2</span></td>
|
||||
<td class="no-class"></td>
|
||||
<td class="no-class"></td>
|
||||
<td class="class">TP - DEV<br><span>Salle 202 - BUT1 Groupe 2</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="time-slot">10:00 - 10:30</td>
|
||||
<td class="no-class"></td>
|
||||
<td class="class">TP - DEV<br><span>Salle 202 - BUT1 Groupe 2</span></td>
|
||||
<td class="no-class"></td>
|
||||
<td class="class">TP - SCR<br><span>Salle 305 - BUT1 Groupe 2</span></td>
|
||||
<td class="no-class"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="time-slot">10:30 - 11:00</td>
|
||||
<td class="no-class"></td>
|
||||
<td class="class">TP - DEV<br><span>Salle 202 - BUT1 Groupe 4</span></td>
|
||||
<td class="no-class"></td>
|
||||
<td class="no-class"></td>
|
||||
<td class="no-class"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="time-slot">11:00 - 11:30</td>
|
||||
<td class="no-class"></td>
|
||||
<td class="no-class"></td>
|
||||
<td class="no-class"></td>
|
||||
<td class="no-class"></td>
|
||||
<td class="no-class"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="time-slot">13:00 - 13:30</td>
|
||||
<td class="no-class"></td>
|
||||
<td class="no-class"></td>
|
||||
<td class="no-class"></td>
|
||||
<td class="no-class"></td>
|
||||
<td class="class">TP - DEV<br><span>Salle 225 - BUT1 Groupe 1</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="time-slot">13:30 - 14:00</td>
|
||||
<td class="no-class"></td>
|
||||
<td class="no-class"></td>
|
||||
<td class="no-class"></td>
|
||||
<td class="no-class"></td>
|
||||
<td class="class">TP - DEV<br><span>Salle 225 - BUT1 Groupe 2</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="time-slot">14:00 - 14:30</td>
|
||||
<td class="no-class"></td>
|
||||
<td class="no-class"></td>
|
||||
<td class="no-class"></td>
|
||||
<td class="no-class"></td>
|
||||
<td class="class">TP - DEV<br><span>Salle 225 - BUT1 Groupe 3</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="time-slot">14:30 - 15:00</td>
|
||||
<td class="no-class"></td>
|
||||
<td class="no-class"></td>
|
||||
<td class="no-class"></td>
|
||||
<td class="no-class"></td>
|
||||
<td class="class">TP - DEV<br><span>Salle 225 - BUT1 Groupe 4</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Suivi des Paiements -->
|
||||
<div class="section-header">
|
||||
<h2>Suivi des Paiements</h2>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="table-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Période</th>
|
||||
<th>Heures Payées</th>
|
||||
<th>Montant Brut (€)</th>
|
||||
<th>Date de Paiement</th>
|
||||
<th>Bulletin de paie</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Septembre 2024</td>
|
||||
<td>20h</td>
|
||||
<td>870,00</td>
|
||||
<td>01/10/2024</td>
|
||||
<td><a href="https://ensap.gouv.fr" target="_blank" class="btn">Voir Bulletin</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Octobre 2024</td>
|
||||
<td>22h</td>
|
||||
<td>957,00</td>
|
||||
<td>En attente</td>
|
||||
<td><a href="https://ensap.gouv.fr" target="_blank" class="btn">Voir Bulletin</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p><strong>Prochain paiement prévu :</strong> Novembre 2024 (20h restantes)</p>
|
||||
|
||||
<div class="more-payments">
|
||||
<p><a href="./paiements.html" class="btn">Voir tous les paiements</a></p>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
49
MaquetteWEB/html/mentions_legales.html
Normal file
49
MaquetteWEB/html/mentions_legales.html
Normal file
@ -0,0 +1,49 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Mentions Légales</title>
|
||||
<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">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<h2>1. Présentation du Projet</h2>
|
||||
<p>
|
||||
Ce projet scolaire a été réalisé par six élèves de l'IUT de Fontainebleau dans le cadre de leur deuxième année de
|
||||
BUT Informatique en alternance. L'objectif de ce projet est de comprendre comment réaliser des interfaces
|
||||
humaines de qualité (IHM) et de développer un portail de gestion permettant aux différents utilisateurs de
|
||||
gérer leurs informations et leurs tâches de manière efficace.
|
||||
</p>
|
||||
|
||||
<h2>2. Informations sur l'éditeur du site</h2>
|
||||
<p>Adresse de l'école : IUT de Fontainebleau - Route Hurtault, 77300 Fontainebleau, France</p>
|
||||
|
||||
<h3>Étudiants du projet :</h3>
|
||||
<ul>
|
||||
<li>Moncef STITI - <span class="email">moncef.stiti@etu.u-pec.fr</span></li>
|
||||
<li>Louay DARDOURI - <span class="email">louay.dardouri@etu.u-pec.fr</span></li>
|
||||
<li>Khalid CHENOUNA - <span class="email">khalid.chenouna@etu.u-pec.fr</span></li>
|
||||
<li>Marwa HAFSATI - <span class="email">marwa.hafsati@etu.u-pec.fr</span></li>
|
||||
<li>Lenny FOULOU - <span class="email">lenny.foulou@etu.u-pec.fr</span></li>
|
||||
<li>Alistair VAISSE - <span class="email">alistair.vaisse@etu.u-pec.fr</span></li>
|
||||
</ul>
|
||||
|
||||
<h3>Chef de projet :</h3>
|
||||
<p>Moncef STITI - <span class="email">moncef.stiti@etu.u-pec.fr</span></p>
|
||||
|
||||
<h2>3. Hébergeur du site</h2>
|
||||
<p>Raison sociale : IUT de Fontainebleau</p>
|
||||
<p>Adresse : Route Hurtault, 77300 Fontainebleau, France</p>
|
||||
<p>Téléphone : +33 1 60 74 68 00</p>
|
||||
<p>E-mail : <span class="email">brouard@u-pec.fr</span></p>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
80
MaquetteWEB/index.html
Normal file
80
MaquetteWEB/index.html
Normal file
@ -0,0 +1,80 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Connexion - Sélection de profil</title>
|
||||
<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">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="w3-container w3-center">
|
||||
<!-- Titre et texte d'introduction -->
|
||||
<h1>Bienvenue sur le portail de gestion</h1>
|
||||
<p class="intro-text">Veuillez sélectionner votre profil pour accéder à votre espace personnel</p>
|
||||
|
||||
<!-- Conteneur des cartes de profil -->
|
||||
<div class="profile-container">
|
||||
<!-- Carte de Chef de département -->
|
||||
<div class="w3-card profile-card">
|
||||
<a href="./html/CHEF/chef_departement.html">
|
||||
<img src="media/img/chef.png" alt="Chef de département">
|
||||
<h3>Chef de département</h3>
|
||||
<p>Accédez à la gestion des heures et au pilotage budgétaire.</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Carte de Responsable des études -->
|
||||
<div class="w3-card profile-card">
|
||||
<a href="./html/RH/rh.html">
|
||||
<img src="media/img/rh.png" alt="Responsable des études">
|
||||
<h3>Responsable RH</h3>
|
||||
<p>Gérez les interventions, les contrats vacataires et plus encore.</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Carte de Responsable des études -->
|
||||
<div class="w3-card profile-card">
|
||||
<a href="./html/FINANCE/finance.html">
|
||||
<img src="media/img/financier.png" alt="Service financier">
|
||||
<h3>Service financier</h3>
|
||||
<p>Gérez les finances et transferez les informations aux comptables.</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Carte d'Enseignant permanent -->
|
||||
<div class="w3-card profile-card">
|
||||
<a href="./html/PROF/enseignant_permanent.html">
|
||||
<img src="media/img/prof1.png" alt="Enseignant permanent">
|
||||
<h3>Enseignant permanent</h3>
|
||||
<p>Validez vos heures complémentaires et consultez vos données.</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Carte de Vacataire -->
|
||||
<div class="w3-card profile-card">
|
||||
<a href="./html/VACATAIRE/vacataire.html">
|
||||
<img src="media/img/prof2.png" alt="Vacataire">
|
||||
<h3>Enseignant vacataire</h3>
|
||||
<p>Déclarez vos interventions et accédez à vos informations.</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer>
|
||||
<p>© 2024 IUT de Fontainebleau. Tous droits réservés |
|
||||
<a href="./html/mentions_legales.html">Mentions légales</a>
|
||||
</p>
|
||||
|
||||
<button id="dark-mode-toggle" class="w3-button">
|
||||
Activer le mode sombre
|
||||
</button>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script src="./js/dark-mode.js"></script> <!-- Mode sombre -->
|
||||
</body>
|
||||
</html>
|
||||
22
MaquetteWEB/js/dark-mode.js
Normal file
22
MaquetteWEB/js/dark-mode.js
Normal file
@ -0,0 +1,22 @@
|
||||
// dark-mode.js
|
||||
const toggleButton = document.getElementById('dark-mode-toggle');
|
||||
const body = document.body;
|
||||
|
||||
// Vérifie si le mode sombre est déjà activé
|
||||
if (localStorage.getItem('darkMode') === 'enabled') {
|
||||
body.classList.add('dark-mode');
|
||||
toggleButton.textContent = 'Désactiver le mode sombre';
|
||||
}
|
||||
|
||||
// Bascule entre mode sombre et clair
|
||||
toggleButton.addEventListener('click', () => {
|
||||
body.classList.toggle('dark-mode');
|
||||
|
||||
if (body.classList.contains('dark-mode')) {
|
||||
localStorage.setItem('darkMode', 'enabled');
|
||||
toggleButton.textContent = 'Désactiver le mode sombre';
|
||||
} else {
|
||||
localStorage.setItem('darkMode', 'disabled');
|
||||
toggleButton.textContent = 'Activer le mode sombre';
|
||||
}
|
||||
});
|
||||
BIN
MaquetteWEB/media/documents/VACATAIRE/CarteIdentite.pdf
Normal file
BIN
MaquetteWEB/media/documents/VACATAIRE/CarteIdentite.pdf
Normal file
Binary file not shown.
BIN
MaquetteWEB/media/documents/VACATAIRE/ContratDeTravail.pdf
Normal file
BIN
MaquetteWEB/media/documents/VACATAIRE/ContratDeTravail.pdf
Normal file
Binary file not shown.
BIN
MaquetteWEB/media/documents/VACATAIRE/JustificatifDomicile.pdf
Normal file
BIN
MaquetteWEB/media/documents/VACATAIRE/JustificatifDomicile.pdf
Normal file
Binary file not shown.
BIN
MaquetteWEB/media/img/LogOut.png
Normal file
BIN
MaquetteWEB/media/img/LogOut.png
Normal file
Binary file not shown.
|
After 
(image error) Size: 8.8 KiB |
BIN
MaquetteWEB/media/img/LogOutWhite.png
Normal file
BIN
MaquetteWEB/media/img/LogOutWhite.png
Normal file
Binary file not shown.
|
After 
(image error) Size: 9.4 KiB |
BIN
MaquetteWEB/media/img/chef.png
Normal file
BIN
MaquetteWEB/media/img/chef.png
Normal file
Binary file not shown.
|
After 
(image error) Size: 29 KiB |
BIN
MaquetteWEB/media/img/financier.png
Normal file
BIN
MaquetteWEB/media/img/financier.png
Normal file
Binary file not shown.
|
After 
(image error) Size: 42 KiB |
BIN
MaquetteWEB/media/img/logoDark.png
Normal file
BIN
MaquetteWEB/media/img/logoDark.png
Normal file
Binary file not shown.
|
After 
(image error) Size: 14 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user