added logs

public/userarea/parts.js

@@ -1,28 +1,60 @@
 $(document).ready(function () {
     console.log("parts.js caricato correttamente");
 
-    $(".parts-btn").on("click", function () {
-        console.log("Pulsante Parts cliccato");
-        const iddatadb = $(this).data("iddatadb");
-        const rowIndex = $(this).data("row");
-        const importRef = $("table tbody tr")
-            .eq(rowIndex)
-            .find("td")
-            .eq(1)
-            .text();
-        const description =
-            $("table tbody tr").eq(rowIndex).find("td").eq(2).text() ||
-            "Sconosciuto";
+    // Gestione del popup per le parti
+    const partsButtons = document.querySelectorAll(".parts-btn");
+    const partsModal = document.getElementById("partsModal");
+    const closeBtn = document.querySelector("#partsModal .close-btn");
+    const overlay = document.querySelector(".overlay");
 
-        $("#trfHeader").text(`${iddatadb} - ${importRef} - ${description}`);
-        $("#partsModal").data("iddatadb", iddatadb);
+    partsButtons.forEach((button) => {
+        button.addEventListener("click", function () {
+            console.log("Pulsante Parts cliccato");
+            const iddatadb = $(this).data("iddatadb");
+            const rowIndex = $(this).data("row");
+            const importRef = $("table tbody tr")
+                .eq(rowIndex)
+                .find("td")
+                .eq(1)
+                .text();
+            const description =
+                $("table tbody tr").eq(rowIndex).find("td").eq(2).text() ||
+                "Sconosciuto";
 
-        loadPhoto(iddatadb);
-        loadExistingParts(iddatadb);
+            $("#trfHeader").text(`${iddatadb} - ${importRef} - ${description}`);
+            $("#partsModal").data("iddatadb", iddatadb);
 
-        $("#partsModal").modal("show");
+            loadPhoto(iddatadb);
+            loadExistingParts(iddatadb);
+
+            if (partsModal) {
+                partsModal.style.display = "block";
+                overlay.style.display = "none"; // Nascondi overlay
+            } else {
+                console.error("Modal Parts non trovato");
+            }
+        });
     });
 
+    // Gestione della chiusura del modal Parts
+    if (closeBtn) {
+        closeBtn.addEventListener("click", function () {
+            partsModal.style.display = "none";
+            overlay.style.display = "none"; // Nascondi overlay
+            document.body.style.pointerEvents = "auto"; // Riattiva la pagina
+        });
+    }
+
+    if (partsModal) {
+        window.addEventListener("click", function (event) {
+            if (event.target === partsModal) {
+                partsModal.style.display = "none";
+                overlay.style.display = "none"; // Nascondi overlay
+                document.body.style.pointerEvents = "auto"; // Riattiva la pagina
+            }
+        });
+    }
+
     function loadPhoto(iddatadb) {
         $.ajax({
             url: "load_photo.php",
@@ -287,11 +319,11 @@ $(document).ready(function () {
     const ctx = canvas.getContext("2d");
 
     $("#markerContainer").on("click", function (e) {
-        console.log("Click sul markerContainer rilevato"); // Debug
+        console.log("Click sul markerContainer rilevato");
         if (selectedPartNumber !== null) {
             const img = $("#samplePhoto");
             const canvas = document.getElementById("photoCanvas");
-            const rect = canvas.getBoundingClientRect();
+            const rect = canvas.getBoundingRect();
             const container = img.parent();
             const containerWidth = container.width();
             const containerHeight = container.height();
@@ -301,7 +333,7 @@ $(document).ready(function () {
             const x = (e.clientX - rect.left) / scale;
             const y = (e.clientY - rect.top) / scale;
 
-            console.log("Coordinate cliccate (x, y):", x, y); // Debug
+            console.log("Coordinate cliccate (x, y):", x, y);
 
             const existingMarker = markers.find(
                 (m) => m.partNumber == selectedPartNumber,
@@ -312,7 +344,7 @@ $(document).ready(function () {
             } else {
                 markers.push({ partNumber: selectedPartNumber, x, y });
             }
-            console.log("Markers aggiornati:", markers); // Debug
+            console.log("Markers aggiornati:", markers);
             updateMarkers();
             if (hasDescriptions) {
                 drawDescriptions(descriptionPosition.x, descriptionPosition.y);
@@ -320,9 +352,10 @@ $(document).ready(function () {
             selectedPartNumber = null;
             $("#partsList li").removeClass("active");
         } else {
-            console.log("Nessun part number selezionato"); // Debug
+            console.log("Nessun part number selezionato");
         }
     });
+
     function updateMarkers() {
         const img = $("#samplePhoto");
         const container = img.parent();
@@ -344,7 +377,7 @@ $(document).ready(function () {
                 "a posizione (scaledX, scaledY):",
                 scaledX,
                 scaledY,
-            ); // Debug
+            );
             const $marker = $(
                 `<div class="draggable-marker">${marker.partNumber}</div>`,
             ).css({
@@ -390,11 +423,9 @@ $(document).ready(function () {
                 });
 
                 if (item.partNumber) {
-                    // È un marker
                     item.x = (currentX + 8) / scale;
                     item.y = (currentY + 8) / scale;
                 } else {
-                    // È la lista
                     descriptionPosition.x = (currentX + 5) / scale;
                     descriptionPosition.y = (currentY + 5) / scale;
                 }