File "main_003.php"
Full Path: /home/analogde/www/Chart burndown/main_003.php
File size: 15.9 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">
<title>Creating Basic Tabs in Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
</head>
<body>
<div class="m-4">
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="#saisie" class="nav-link active">Saisie planning</a>
</li>
<li class="nav-item">
<a href="#pointage" class="nav-link">Temps passé &&&</a>
</li>
<li class="nav-item">
<a href="#graphique1" class="nav-link">Courbes 1</a>
</li>
<li class="nav-item">
<a href="#graphique2" class="nav-link">Courbes 2</a>
</li>
</ul>
</div>
<div class="tab-content">
<div id="saisie" class="tab-pane fade show active">
<?php include 'table_001.php'; ?>
</div>
<div id="pointage" class="tab-pane fade mx-5">
<?php include 'mysql_inserer_tache_planning004.php'; ?>
</div>
<div id="graphique1" class="tab-pane fade mx-5">
<h2>Burndown en escalier</h2>
<?php include 'burndown_type01.php'; ?>
</div>
<div id="graphique2" class="tab-pane fade mx-5">
<h2>Burdown classique</h2>
<?php include 'traitement0019.php'; ?>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
const tabs = document.querySelectorAll(".nav-link");
const tabContents = document.querySelectorAll(".tab-pane");
tabs.forEach(tab => {
tab.addEventListener("click", function (event) {
event.preventDefault();
const target = document.querySelector(tab.getAttribute("href"));
tabs.forEach(t => t.classList.remove("active"));
tabContents.forEach(tc => tc.classList.remove("show", "active"));
tab.classList.add("active");
target.classList.add("show", "active");
// Initialiser les scripts lorsque l'onglet devient actif
if (target.id === "pointage") {
initializeTaskScripts();
}
});
});
// Initialiser les scripts pour l'onglet actif au chargement de la page
if (document.querySelector("#pointage.active")) {
initializeTaskScripts();
}
});
function initializeTaskScripts() {
// Votre code JavaScript pour initialiser les événements et les fonctionnalités
$(document).on("click", ".close", function () {
$(this).closest(".modal").modal("hide");
});
// Fonction pour afficher la modale en cas de champs manquants
function showMissingFieldsModal() {
$("#missingFieldsModal").modal("show");
}
// Fonction pour afficher la modale en cas de valeur invalide
function showInvalidValueModal() {
$("#invalidValueModal").modal("show");
}
let nextIndex = 1;
let rowToDelete = null;
$("#taskTableBody").sortable({
axis: "y",
helper: function (e, tr) {
let $helper = tr.clone();
let originalWidths = [];
// Sauvegarde les largeurs originales
tr.children().each(function (index) {
originalWidths[index] = $(this).outerWidth();
});
// Applique les largeurs aux cellules du clone
$helper.children().each(function (index) {
$(this).width(originalWidths[index]);
});
// Ajuste la largeur du clone à celle du tableau
$helper.width(tr.width());
// Ajoute une classe pour la personnalisation du clone
$helper.addClass("dragging-helper");
return $helper;
},
start: function (event, ui) {
let tableOffset = $("#dataTable").offset().left; // Récupère la position du tableau
let rowOffset = ui.helper.offset().left; // Position actuelle du clone
let leftOffset = tableOffset - rowOffset; // Calcul du décalage
ui.helper.css({
"position": "absolute",
"left": ui.helper.position().left + leftOffset + "px", // Corrige la position
"z-index": 1000
});
ui.placeholder.height(ui.helper.outerHeight());
// Ajuste les largeurs du placeholder
ui.placeholder.children().each(function (index) {
$(this).width(ui.helper.children().eq(index).width());
});
},
update: function (event, ui) {
updateIndices();
}
});
// Ajout d'un curseur "move" sur toutes les cellules
$("#taskTableBody tr td").css("cursor", "move");
$("#saveButton").click(function () {
let table = document.getElementById("dataTable");
let data = [];
// Parcourir les lignes en ignorant la première ligne (header)
for (let i = 1; i < table.rows.length; i++) {
let row = [];
let cells = table.rows[i].cells;
// Inclure toutes les cellules sauf la dernière (actions)
for (let j = 0; j < cells.length - 1; j++) {
row.push(cells[j].innerText);
}
data.push(row);
}
fetch('save.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data)
}).then(response => response.text()).then(data => {
alert("Données sauvegardées !");
});
});
$("#loadButton").click(function () {
fetch("load.php")
.then(response => {
if (!response.ok) {
throw new Error("Erreur réseau : " + response.status);
}
return response.json();
})
.then(data => {
console.log("Données reçues :", data);
$("#taskTableBody").empty(); // Vider le tableau avant de le remplir
data.forEach(task => {
var newRow = `<tr>
<td>${task[0]}</td>
<td>${task[1]}</td>
<td>${task[2]}</td>
<td>
<button class="btn btn-info btn-sm view-btn">Voir</button>
<button class="btn btn-warning btn-sm edit-btn">Modifier</button>
<button class="btn btn-danger btn-sm delete-btn">Supprimer</button>
</td>
</tr>`;
$("#taskTableBody").append(newRow);
});
// Mettre à jour nextIndex en fonction des données chargées
nextIndex = data.length > 0 ? parseInt(data[data.length - 1][0]) + 1 : 1;
})
.catch(error => {
console.error("Erreur lors du chargement des données :", error);
});
});
$("#addTaskButton").click(function () {
// Récupérer les valeurs des champs du formulaire
var taskName = $("#taskName").val().trim();
var estimatedTime = $("#estimatedTime").val().trim();
// Vérifier que les champs ne sont pas vides
if (taskName === "" || estimatedTime === "") {
showMissingFieldsModal();
return;
}
// Vérifier que le temps estimé est supérieur à zéro
if (estimatedTime <= 0) {
showInvalidValueModal();
return;
}
// Ajouter une nouvelle ligne dans le tableau avec l'indice
var newRow = `<tr>
<td>${nextIndex}</td>
<td>${taskName}</td>
<td>${estimatedTime}</td>
<td>
<button class="btn btn-info btn-sm view-btn">Voir</button>
<button class="btn btn-warning btn-sm edit-btn">Modifier</button>
<button class="btn btn-danger btn-sm delete-btn">Supprimer</button>
</td>
</tr>`;
$("#taskTableBody").append(newRow);
// Incrémenter l'indice pour la prochaine tâche
nextIndex++;
// Réinitialiser les champs du formulaire
$("#taskName").val("");
$("#estimatedTime").val("");
// Fermer la modale
$("#addTaskModal").modal('hide');
});
// Modification d'une tâche (remplissage du formulaire de modification)
$(document).on("click", ".edit-btn", function () {
var row = $(this).closest("tr");
var taskName = row.find("td:eq(1)").text();
var estimatedTime = row.find("td:eq(2)").text().replace(" h", "");
$("#editTaskName").val(taskName);
$("#editEstimatedTime").val(estimatedTime);
// Stocker la ligne en cours d'édition
$("#editTaskModal").data("editingRow", row);
// Afficher la modale d'édition
$("#editTaskModal").modal("show");
});
// Validation de la modification
$("#editTaskButton").click(function () {
var editedTaskName = $("#editTaskName").val().trim();
var editedEstimatedTime = $("#editEstimatedTime").val().trim();
if (editedTaskName === "" || editedEstimatedTime === "") {
showMissingFieldsModal();
return;
}
// Vérifier que le temps estimé est supérieur à zéro
if (editedEstimatedTime <= 0) {
showInvalidValueModal();
return;
}
// Récupérer la ligne en cours d'édition
var editingRow = $("#editTaskModal").data("editingRow");
// Mettre à jour les valeurs
editingRow.find("td:eq(1)").text(editedTaskName);
editingRow.find("td:eq(2)").text(editedEstimatedTime);
// Fermer la modale
$("#editTaskModal").modal("hide");
// Afficher un message dans la console
console.log("Tâche modifiée :", editedTaskName, editedEstimatedTime);
});
// Clic sur "Supprimer" => ouvrir la boîte de confirmation
$(document).on("click", ".delete-btn", function () {
rowToDelete = $(this).closest("tr"); // Stocke la ligne
$("#confirmDeleteModal").modal("show");
});
// Confirmation de suppression
$("#confirmDeleteButton").click(function () {
if (rowToDelete) {
rowToDelete.remove();
rowToDelete = null;
updateIndices();
}
$("#confirmDeleteModal").modal("hide");
});
// Clic sur "Voir" => afficher les détails de la tâche
$(document).on("click", ".view-btn", function () {
var row = $(this).closest("tr");
var taskName = row.find("td:eq(1)").text();
var estimatedTime = row.find("td:eq(2)").text();
$("#viewTaskName").val(taskName);
$("#viewEstimatedTime").val(estimatedTime);
// Afficher la modale de visualisation
$("#viewTaskModal").modal("show");
});
// Fonction pour mettre à jour les indices après le glisser-déposer
function updateIndices() {
$("#taskTableBody tr").each(function (index) {
$(this).find("td:first").text(index + 1); // Met à jour le premier TD de chaque ligne
});
}
// Gestionnaire d'événement pour le bouton "Fermer" dans la modale d'édition
$("#closeEditModalButton").click(function () {
console.log("Fermeture de la modale d'édition");
$("#editTaskModal").modal("hide");
});
// Gestionnaire d'événement pour le bouton "Fermer" dans la modale de visualisation
$("#closeVoirModalButton").click(function () {
console.log("Fermeture de la modale de visualisation");
$("#viewTaskModal").modal("hide");
});
// Gestionnaire d'événement pour le bouton "Fermer" dans la modale de visualisation
$("#closeCoonfirmationModalButton").click(function () {
console.log("Fermeture de la modale de visualisation");
$("#confirmDeleteModal").modal("hide");
});
$("#closeEcrireModalButton").click(function () {
console.log("Fermeture de la modale de visualisation");
$("#successModal").modal("show");
});
// Gestionnaire d'événement pour les boutons de fermeture des modales
$(".modal").on("hidden.bs.modal", function () {
console.log("Modale fermée");
});
// Gestionnaire d'événement pour le bouton "Écrire"
$("#writeButton").click(function () {
let table = document.getElementById("dataTable");
let tasks = [];
// Parcourir les lignes en ignorant la première ligne (header)
for (let i = 1; i < table.rows.length; i++) {
let row = [];
let cells = table.rows[i].cells;
// Inclure toutes les cellules sauf la dernière (actions)
for (let j = 0; j < cells.length - 1; j++) {
row.push(cells[j].innerText);
}
tasks.push(row);
}
fetch('store_taches_007.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(tasks)
})
.then(response => response.text())
.then(data => {
try {
const jsonData = JSON.parse(data); // Convertit la chaîne en JSON
console.log('Données JSON :', jsonData);
//alert("Checklist enregistrée !");
// Afficher la modale de succès
$("#successModal").modal("show");
} catch (e) {
console.error("Erreur lors du parsing JSON", e);
alert("Erreur lors de l'enregistrement de la checklist.");
}
})
.catch(error => {
console.error('Erreur :', error);
alert("Erreur de communication avec le serveur.");
});
});
// Gestionnaire d'événement pour le bouton "Lire"
$("#readButton").click(function () {
fetch("read001.php")
.then(response => {
if (!response.ok) {
throw new Error("Erreur réseau : " + response.status);
}
return response.json();
})
.then(data => {
console.log("Données reçues :", data);
$("#taskTableBody").empty(); // Vider le tableau avant de le remplir
data.forEach(task => {
var newRow = `<tr>
<td>${task.index}</td>
<td>${task.name}</td>
<td>${task.duration}</td>
<td>
<button class="btn btn-info btn-sm view-btn">Voir</button>
<button class="btn btn-warning btn-sm edit-btn">Modifier</button>
<button class="btn btn-danger btn-sm delete-btn">Supprimer</button>
</td>
</tr>`;
$("#taskTableBody").append(newRow);
});
// Mettre à jour nextIndex en fonction des données chargées
nextIndex = data.length > 0 ? parseInt(data[data.length - 1].index) + 1 : 1;
})
.catch(error => {
console.error("Erreur lors du chargement des données :", error);
});
});
// Initialisation de l'indexation au chargement
//updateIndices();
}
</script>
</body>
</html>