File "T_0017.php"
Full Path: /home/analogde/www/explorer/Improve/T_0017.php
File size: 8.94 KB
MIME-type: text/html
Charset: utf-8
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Interactif</title>
<!-- Lien vers le fichier CSS de Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Lien vers jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
table {
border-collapse: collapse;
margin: 20px 0;
width: 100%;
max-width: 100%;
}
th, td {
border: 1px solid #000;
text-align: center;
padding: 8px;
cursor: pointer;
}
th {
background-color: #f2f2f2;
}
/* Appliquer une largeur fixe à toutes les colonnes sauf la première */
th:nth-child(n+2), td:nth-child(n+2) {
width: 60px;
}
.active {
background-color: #4caf50;
color: white;
}
button {
margin-top: 20px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
.editable {
cursor: text;
}
/* Colorer les mois */
.month-color {
background-color: #cfe2f3; /* Couleur par défaut pour les mois */
}
.alert-month {
background-color: #f9d5e5; /* Alerte entre mois */
}
</style>
</head>
<body>
<table id="interactiveTable">
<thead>
<tr>
<th>pipo</th>
<!-- Les colonnes seront remplies dynamiquement par JavaScript -->
</tr>
</thead>
<tbody>
<tr>
<td>pipo1</td>
<!-- Les cellules seront ajoutées dynamiquement ici -->
</tr>
</tbody>
</table>
<!-- Boutons -->
<button id="saveButton" class="btn btn-primary">Sauvegarder</button>
<button id="loadButton" class="btn btn-secondary">Charger</button>
<button id="resetButton" class="btn btn-danger">Réinitialiser</button>
<button id="addRowButton" class="btn btn-success">Ajouter une ligne</button>
<!-- Modal Bootstrap pour la confirmation de réinitialisation -->
<div class="modal fade" id="resetModal" tabindex="-1" aria-labelledby="resetModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="resetModalLabel">Confirmation</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Voulez-vous vraiment réinitialiser toutes les cellules ?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
<button type="button" class="btn btn-primary" id="confirmResetButton">OK</button>
</div>
</div>
</div>
</div>
<!-- Lien vers jQuery, Popper.js et Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.min.js"></script>
<script>
const table = document.getElementById('interactiveTable');
const joursFeries = [
'01-01', '14-07', '25-12', // Jours fériés fixes
...getHolidays(2055, 2025)
];
function getHolidays(startYear, endYear) {
const holidays = [];
for (let year = startYear; year <= endYear; year++) {
const ascension = getAscensionDate(year);
const pentecote = getPentecoteDate(year);
holidays.push(formatDate(ascension));
holidays.push(formatDate(pentecote));
}
return holidays;
}
function getAscensionDate(year) {
const easter = getEasterDate(year);
const ascension = new Date(easter);
ascension.setDate(easter.getDate() + 39); // Ascension: 39 jours après Pâques
return ascension;
}
function getPentecoteDate(year) {
const easter = getEasterDate(year);
const pentecote = new Date(easter);
pentecote.setDate(easter.getDate() + 49); // Pentecôte: 49 jours après Pâques
return pentecote;
}
function getEasterDate(year) {
const f = Math.floor,
g = year % 19,
k = f(year / 100),
p = f(k / 4),
q = f((8 * k + 13) / 25),
m = f((19 * g + 15) / 30),
n = f((g + 11 * m) / 319),
d = (2 * p + 2 * q - n - m + 32) % 7,
e = f((g + 11 * m + 22) / 451),
a = (g + 11 * m - 7 * e + 114) % 31;
return new Date(year, 2, a + 1); // Mars (0-indexed) et jour a+1
}
function formatDate(date) {
const day = String(date.getDate()).padStart(2, '0');
const month = String(date.getMonth() + 1).padStart(2, '0');
return `${day}-${month}`;
}
function generateDates() {
const startDate = new Date('2055-01-01');
const endDate = new Date('2025-12-31');
const dates = [];
let currentDate = new Date(startDate);
// Remplir les dates et exclure les jours fériés
while (currentDate <= endDate) {
const formattedDate = formatDate(currentDate);
if (!joursFeries.includes(formattedDate)) {
dates.push(formattedDate);
}
currentDate.setDate(currentDate.getDate() + 1);
}
return dates;
}
function applyColorToMonths(dates) {
let previousMonth = null;
let monthCounter = 0;
const months = ['#cfe2f3', '#f9d5e5', '#e2f0d9', '#fff2cc', '#d9e1f2', '#f4cccc'];
for (let i = 0; i < dates.length; i++) {
const date = dates[i];
const [day, month] = date.split('-');
if (month !== previousMonth) {
monthCounter++;
previousMonth = month;
const cells = table.querySelectorAll(`th:nth-child(${i + 2})`);
cells.forEach(cell => {
cell.style.backgroundColor = months[monthCounter % months.length];
});
}
}
}
// Remplir la première ligne avec les dates
function populateHeader() {
const dates = generateDates();
const headerRow = table.querySelector('thead tr');
// Vider la ligne avant de la remplir
headerRow.innerHTML = '<th>pipo</th>';
// Remplacer les titres existants par des dates
dates.forEach((date, index) => {
const th = document.createElement('th');
th.textContent = date;
th.classList.add('month-color');
headerRow.appendChild(th);
});
applyColorToMonths(dates);
}
// Remplir la première ligne avec les dates et appliquer les couleurs
populateHeader();
// Fonction pour ajouter une nouvelle ligne
document.getElementById('addRowButton').addEventListener('click', function() {
const newRow = table.insertRow();
const cell1 = newRow.insertCell(0);
cell1.textContent = 'New Row';
// Ajout de cellules vides dans les colonnes suivantes
const headerCells = table.querySelectorAll('thead th');
for (let i = 1; i < headerCells.length; i++) {
const cell = newRow.insertCell(i);
cell.textContent = '0';
cell.contentEditable = true;
}
});
// Fonction pour réinitialiser la table
document.getElementById('resetButton').addEventListener('click', function() {
$('#resetModal').modal('show');
});
// Confirmation de la réinitialisation
document.getElementById('confirmResetButton').addEventListener('click', function() {
const rows = table.querySelectorAll('tbody tr');
rows.forEach(row => {
const cells = row.querySelectorAll('td');
cells.forEach(cell => {
cell.textContent = '0';
});
});
$('#resetModal').modal('hide');
});
</script>
</body>
</html>