File "base_table001.html"
Full Path: /home/analogde/www/WORDPRESS/Dev tableau/base_table001.html
File size: 21.82 KB
MIME-type: text/html
Charset: utf-8
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tableau Dynamique</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<style>
table {
width: auto;
min-width: 1200px;
border-collapse: separate;
border-spacing: 0;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: center;
white-space: nowrap;
box-sizing: border-box;
}
thead th {
background: #f8f8f8;
position: sticky;
top: 0;
z-index: 2;
}
.table-container {
width: 100%;
overflow-x: auto;
position: relative;
margin-top: 20px;
border: 1px solid #ddd;
}
th:nth-child(n+1):nth-child(-n+3), td:nth-child(n+1):nth-child(-n+3) {
position: sticky;
z-index: 4;
background: white;
border-right: 2px solid black;
}
th:nth-child(1), td:nth-child(1) {
left: 0;
width: 210px;
min-width: 210px;
max-width: 210px;
}
th:nth-child(2), td:nth-child(2) {
left: 210px;
width: 80px;
min-width: 80px;
max-width: 80px;
}
th:nth-child(3), td:nth-child(3) {
left: 290px;
width: 100px;
min-width: 100px;
max-width: 100px;
}
td:first-child {
display: flex;
justify-content: center;
align-items: center;
}
select {
width: 100%;
max-width: 80px;
}
input[type="text"] {
width: calc(100% - 20px);
box-sizing: border-box;
}
button {
margin-top: 20px;
padding: 10px;
font-size: 16px;
}
.cell-active {
background-color: green;
}
th:nth-child(n+4), td:nth-child(n+4) {
width: 50px;
min-width: 50px;
max-width: 50px;
}
.unused-cell {
background-color: #cccccc;
}
.dragging {
opacity: 0.5;
}
.collapse-cell {
background-color: orange;
}
.special-cell {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
padding: 0;
}
.special-cell input {
width: calc(100% - 30px);
margin-right: 10px;
height: 20px;
}
.special-cell button {
width: 20px;
height: 20px;
background-color: orange;
border: none;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
}
.context-menu {
display: none;
position: absolute;
background-color: white;
border: 1px solid #ccc;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
z-index: 1000;
}
.context-menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.context-menu ul li {
padding: 8px 12px;
cursor: pointer;
display: flex;
align-items: center;
}
.context-menu ul li:hover {
background-color: #f0f0f0;
}
.context-menu ul li .color-box {
width: 15px;
height: 15px;
margin-right: 10px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.23/jspdf.plugin.autotable.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="table-container">
<table>
<thead>
<!--
<tr id="header-row">
<th colspan="3" style="position: sticky; left: 0; background: white; z-index: 5;">En-tête fusionné</th>
</tr>
<tr id="month-row">
<th colspan="3" style="position: sticky; left: 0; background: white; z-index: 5;">AAA</th>
</tr>
<tr id="day-row">
<th colspan="3" style="position: sticky; left: 0; background: white; z-index: 5;">BBB</th>
</tr>
<tr id="numero-row">
<th colspan="3" style="position: sticky; left: 0; background: white; z-index: 5;">CCC</th>
</tr>
-->
<!--
<tr id="header-row">
<th colspan="3" style="position: sticky; left: 0; background: white; z-index: 5;">En-tête fusionné</th>
</tr>
<tr id="month-row">
<th class="unused-cell">Non utilisé</th>
<th>Mois</th>
<th class="unused-cell">Non utilisé</th>
</tr>
<tr id="day-row">
<th class="unused-cell">Non utilisé</th>
<th>Jours</th>
<th class="unused-cell">Non utilisé</th>
</tr>
<tr id="numero-row">
<th class="unused-cell">Non utilisé</th>
<th>Semaine</th>
<th class="unused-cell">Non utilisé</th>
</tr>
-->
<tr id="header-row">
<th>plouf</th>
<th>Nom</th>
<th>Total</th>
</tr>
<tr id="month-row">
<th class="unused-cell">Non utilisé</th>
<th>Mois</th>
<th class="unused-cell">Non utilisé</th>
</tr>
<tr id="day-row">
<th class="unused-cell">Non utilisé</th>
<th>Jours</th>
<th class="unused-cell">Non utilisé</th>
</tr>
<tr id="numero-row">
<th class="unused-cell">Non utilisé</th>
<th>Semaine</th>
<th class="unused-cell">Non utilisé</th>
</tr>
</thead>
<tbody id="table-body"></tbody>
</table>
</div>
<button id="getDataButton">Récupérer les données du tableau</button>
<button id="sendDataButton">Envoyer les données</button>
<button id="readDataButton">Lire les données</button>
<button id="addRowButton">Ajouter une ligne</button>
<button id="addSpecialRowButton">Ajouter une ligne spéciale</button>
<button id="generatePDFButton">PDF</button>
<div id="contextMenu" class="context-menu">
<ul>
<li id="deleteRow">Supprimer</li>
<li id="addRowContext">Ajouter une ligne</li>
<li id="changeColorRed">Changer la couleur en rouge</li>
<li id="changeColorGreen">Changer la couleur en vert</li>
<li id="changeColorBlue">Changer la couleur en bleu</li>
<li id="changeColorNone">Pas de couleur</li>
<li id="changeValues">Changer</li>
</ul>
</div>
<div id="specialRowContextMenu" class="context-menu">
<ul>
<li id="deleteSpecialRow">Supprimer</li>
<li id="addRowAfterSpecial">Ajouter une ligne</li>
</ul>
</div>
<div id="cellContextMenu" class="context-menu">
<ul>
<li id="cellColorRed"><span class="color-box" style="background-color: red;"></span> Rouge</li>
<li id="cellColorGreen"><span class="color-box" style="background-color: green;"></span> Vert</li>
<li id="cellColorBlue"><span class="color-box" style="background-color: blue;"></span> Bleu</li>
<li id="cellColorYellow"><span class="color-box" style="background-color: yellow;"></span> Jaune</li>
<li id="cellColorPurple"><span class="color-box" style="background-color: purple;"></span> Violet</li>
</ul>
</div>
<!-- Modal de confirmation -->
<div class="modal fade" id="confirmationModal" tabindex="-1" role="dialog" aria-labelledby="confirmationModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="confirmationModalLabel">Confirmation</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Êtes-vous sûr de vouloir supprimer cette ligne ?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
<button type="button" class="btn btn-danger" id="confirmDeleteButton">Supprimer</button>
</div>
</div>
</div>
</div>
<script>
const numCols = 100;
const holidays = [
'2025-01-01',
'2025-04-21',
'2025-05-01',
'2025-05-08',
'2025-05-29',
'2025-06-09',
'2025-07-14',
'2025-08-15',
];
let targetRow = null;
let targetCell = null;
let currentContextRow = null;
function createTable() {
const theadRow = document.getElementById("header-row");
const monthRow = document.getElementById("month-row");
const dayRow = document.getElementById("day-row");
const numeroWeekRow = document.getElementById("numero-row");
let currentDate = new Date('2024-06-01');
const endDate = new Date('2025-06-30');
let lastMonth = "";
let currentColor = "#E0E0E0";
let weekNumber = getISOWeekNumber(currentDate);
let lastThMonth = null;
let colSpanMonth = 0;
let lastWeekNumber = null;
let weekTh = null;
let colSpanWeek = 0;
function getISOWeekNumber(date) {
const dateCopy = new Date(date.getTime());
dateCopy.setHours(0, 0, 0, 0);
dateCopy.setDate(dateCopy.getDate() + 3 - (dateCopy.getDay() + 6) % 7);
const firstThursday = new Date(dateCopy.getFullYear(), 0, 1);
return Math.ceil(((dateCopy - firstThursday) / 86400000 + 1) / 7);
}
while (currentDate <= endDate) {
const dayOfWeek = currentDate.getDay();
const dateString = currentDate.toISOString().split('T')[0];
if (dayOfWeek !== 0 && dayOfWeek !== 6 && !holidays.includes(dateString)) {
let th = document.createElement("th");
th.textContent = currentDate.getDate();
theadRow.appendChild(th);
let currentWeekNumber = getISOWeekNumber(currentDate);
let monthShort = currentDate.toLocaleString('default', { month: 'long' });
monthShort = monthShort.charAt(0).toUpperCase() + monthShort.slice(1);
if (monthShort === lastMonth) {
colSpanMonth++;
lastThMonth.colSpan = colSpanMonth;
} else {
lastMonth = monthShort;
colSpanMonth = 1;
lastThMonth = document.createElement("th");
lastThMonth.textContent = monthShort + " " + currentDate.getFullYear();
monthRow.appendChild(lastThMonth);
if (parseInt(currentDate.toLocaleString('default', { month: 'numeric' })) % 2 === 0) {
lastThMonth.style.backgroundColor = "#E0E0E0";
} else {
lastThMonth.style.backgroundColor = "#B0C4DE";
}
}
th.style.backgroundColor = (currentDate.getMonth() % 2 === 0) ? "#FFA500" : "#0000FF";
let dayTh = document.createElement("th");
dayTh.textContent = currentDate.toLocaleString('default', { weekday: 'short' }).charAt(0).toUpperCase();
dayRow.appendChild(dayTh);
if (dayOfWeek === 1) {
currentColor = (currentColor === "#E0E0E0") ? "#B0C4DE" : "#E0E0E0";
weekNumber = getISOWeekNumber(currentDate);
}
dayTh.style.backgroundColor = currentColor;
if (currentWeekNumber === lastWeekNumber) {
colSpanWeek++;
weekTh.colSpan = colSpanWeek;
} else {
weekTh = document.createElement("th");
weekTh.textContent = currentWeekNumber;
weekTh.colSpan = 1;
numeroWeekRow.appendChild(weekTh);
lastWeekNumber = currentWeekNumber;
colSpanWeek = 1;
}
}
currentDate.setDate(currentDate.getDate() + 1);
}
}
function addRow(event)
{
}
function addSpecialRow()
{
}
function toggleCollapse(row)
{
}
function handleDragStart(event)
{
}
function handleDragOver(event)
{
}
function handleDrop(event)
{
}
function handleCellClick(event)
{
}
function showContextMenu(event)
{
}
function showCellContextMenu(event)
{
}
function hideContextMenus()
{
}
function changeCellValues(row)
{
}
function generatePDF()
{
}
function showDeleteConfirmationModal() {
$('#confirmationModal').modal('show');
}
function deleteRow() {
if (currentContextRow) {
currentContextRow.remove();
hideContextMenus();
}
}
window.onload = function() {
createTable();
const addRowButton = document.getElementById('addRowButton');
addRowButton.addEventListener('click', addRow);
const addRowContextButton = document.getElementById('addRowContext');
addRowContextButton.addEventListener('click', function() {
addRow({ target: currentContextRow });
contextMenu.style.display = 'none';
});
const deleteRowButton = document.getElementById('deleteRow');
deleteRowButton.addEventListener('click', showDeleteConfirmationModal);
const deleteSpecialRowButton = document.getElementById('deleteSpecialRow');
deleteSpecialRowButton.addEventListener('click', showDeleteConfirmationModal);
const addRowAfterSpecialButton = document.getElementById('addRowAfterSpecial');
addRowAfterSpecialButton.addEventListener('click', function() {
addRow({ target: currentContextRow });
specialRowContextMenu.style.display = 'none';
});
const changeColorRedButton = document.getElementById('changeColorRed');
changeColorRedButton.addEventListener('click', function() {
if (currentContextRow) {
currentContextRow.style.backgroundColor = 'red';
contextMenu.style.display = 'none';
}
});
const changeColorGreenButton = document.getElementById('changeColorGreen');
changeColorGreenButton.addEventListener('click', function() {
if (currentContextRow) {
currentContextRow.style.backgroundColor = 'green';
contextMenu.style.display = 'none';
}
});
const changeColorBlueButton = document.getElementById('changeColorBlue');
changeColorBlueButton.addEventListener('click', function() {
if (currentContextRow) {
currentContextRow.style.backgroundColor = 'blue';
contextMenu.style.display = 'none';
}
});
const changeColorNoneButton = document.getElementById('changeColorNone');
changeColorNoneButton.addEventListener('click', function() {
if (currentContextRow) {
currentContextRow.style.backgroundColor = '';
contextMenu.style.display = 'none';
}
});
const changeValuesButton = document.getElementById('changeValues');
changeValuesButton.addEventListener('click', function() {
if (currentContextRow) {
changeCellValues(currentContextRow);
contextMenu.style.display = 'none';
}
});
const cellColorRedButton = document.getElementById('cellColorRed');
cellColorRedButton.addEventListener('click', function() {
if (targetCell && targetCell.textContent === "1") {
targetCell.style.backgroundColor = 'red';
cellContextMenu.style.display = 'none';
}
});
const cellColorGreenButton = document.getElementById('cellColorGreen');
cellColorGreenButton.addEventListener('click', function() {
if (targetCell && targetCell.textContent === "1") {
targetCell.style.backgroundColor = 'green';
cellContextMenu.style.display = 'none';
}
});
const cellColorBlueButton = document.getElementById('cellColorBlue');
cellColorBlueButton.addEventListener('click', function() {
if (targetCell && targetCell.textContent === "1") {
targetCell.style.backgroundColor = 'blue';
cellContextMenu.style.display = 'none';
}
});
const cellColorYellowButton = document.getElementById('cellColorYellow');
cellColorYellowButton.addEventListener('click', function() {
if (targetCell && targetCell.textContent === "1") {
targetCell.style.backgroundColor = 'yellow';
cellContextMenu.style.display = 'none';
}
});
const cellColorPurpleButton = document.getElementById('cellColorPurple');
cellColorPurpleButton.addEventListener('click', function() {
if (targetCell && targetCell.textContent === "1") {
targetCell.style.backgroundColor = 'purple';
cellContextMenu.style.display = 'none';
}
});
document.getElementById('getDataButton').addEventListener('click', logTableData);
document.getElementById('sendDataButton').addEventListener('click', sendTableData);
document.getElementById('readDataButton').addEventListener('click', readTableData);
document.getElementById('addSpecialRowButton').addEventListener('click', addSpecialRow);
document.getElementById('generatePDFButton').addEventListener('click', generatePDF);
// Add event listener for the Escape key
document.addEventListener('keydown', function(event) {
if (event.key === 'Escape') {
hideContextMenus();
}
});
// Add event listener for the confirmation button in the modal
document.getElementById('confirmDeleteButton').addEventListener('click', function() {
deleteRow();
$('#confirmationModal').modal('hide');
});
};
function getTableData() {
let rows = document.querySelectorAll('tbody tr');
let tableData = [];
rows.forEach(function(row) {
let rowData = [];
let cells = row.querySelectorAll('td');
cells.forEach(function(cell) {
if (cell.querySelector('select')) {
rowData.push(cell.querySelector('select').value);
} else if (cell.querySelector('input')) {
rowData.push(cell.querySelector('input').value);
} else {
rowData.push(cell.innerText);
}
});
tableData.push(rowData);
});
return tableData;
}
function logTableData() {
let data = getTableData();
console.log(data);
console.log(JSON.stringify(data, null, 2));
}
function sendTableData() {
let data = getTableData();
let jsonData = JSON.stringify(data);
fetch('insert.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: jsonData
})
.then(response => response.json())
.then(data => {
alert(data.message);
})
.catch(error => {
console.error('Erreur:', error);
});
}
function readTableData() {
fetch('lecture.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
}
})
.then(response => response.json())
.then(data => {
if (data.success) {
updateTable(data.data_json);
} else {
alert('Erreur lors de la récupération des données.');
}
})
.catch(error => {
console.error('Erreur:', error);
});
}
function updateTable(data)
{
}
</script>
</body>
</html>