Tiny File Manager

Back Back Up Advanced Editor

<!DOCTYPE html>

<head>

<title>Table Interactif</title>

<style>

table {

border-collapse: collapse;

margin: 20px 0;

width: 100%;

max-width: 600px;

}

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>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

</tbody>

</table>

<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>

<h5 class="modal-title" id="resetModalLabel">Confirmation</h5>

<span aria-hidden="true">&times;</span>

</button>

</div>

Voulez-vous vraiment réinitialiser toutes les cellules ?

</div>

<button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>

</div>

const table = document.getElementById('interactiveTable');

const joursFeries = [

'01-01', '14-07', '25-12', // Jours fériés fixes

// Calcul des jours fériés mobiles (Ascension, Pentecôte)

...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];

});

alert(`Changement de mois: ${previousMonth}`);

}

// Remplir la première ligne avec les dates

function populateHeader() {

const dates = generateDates();

const headerRow = table.querySelector('thead tr');

// Remplacer les titres existants par des dates

dates.forEach((date, index) => {

if (headerRow.cells[index + 1]) {

headerRow.cells[index + 1].textContent = date;

headerRow.cells[index + 1].classList.add('month-color');

}

});

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

for (let i = 1; i < table.rows[0].cells.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>