update parts

public/userarea/load_photo.php

@@ -0,0 +1,29 @@
+<?php
+header('Content-Type: application/json');
+
+include('include/headscript.php');
+
+$dbHandler = DBHandlerSelect::getInstance();
+$pdo = $dbHandler->getConnection();
+
+$iddatadb = $_GET['iddatadb'] ?? null;
+
+if (!$iddatadb) {
+    echo json_encode(['success' => false, 'message' => 'ID TRF mancante']);
+    exit;
+}
+
+try {
+    $stmt = $pdo->prepare("SELECT file_path FROM datadb_photos WHERE iddatadb = :iddatadb LIMIT 1");
+    $stmt->execute([':iddatadb' => $iddatadb]);
+    $photo = $stmt->fetch(PDO::FETCH_ASSOC);
+
+    if ($photo && $photo['file_path']) {
+        $fullPath = '../photostrf/' . $photo['file_path']; // Assumi che le foto siano nella cartella photostrf
+        echo json_encode(['success' => true, 'file_path' => $fullPath]);
+    } else {
+        echo json_encode(['success' => false, 'message' => 'Nessuna foto trovata']);
+    }
+} catch (PDOException $e) {
+    echo json_encode(['success' => false, 'message' => 'Errore nel caricamento: ' . $e->getMessage()]);
+}

public/userarea/modal_parts.php

@@ -7,29 +7,47 @@
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <div class="modal-body">
-                <table class="table table-striped table-sm" id="partsTable">
-                    <thead>
-                        <tr>
-                            <th>Num. Parte</th>
-                            <th>Descrizione Parte</th>
-                            <th>Azioni</th>
-                        </tr>
-                    </thead>
-                    <tbody id="partsTableBody">
-                        <tr data-part-id="new">
-                            <td><input type="number" class="form-control form-control-sm part-number" value="1" style="width: 80px;"></td>
-                            <td><input type="text" class="form-control form-control-sm part-description" placeholder="Inserisci descrizione" style="width: 100%;"></td>
-                            <td>
-                                <button type="button" class="btn btn-success btn-sm add-row" style="padding: 0.1rem 0.3rem; font-size: 0.8rem;"><i class="fas fa-plus fa-xs"></i></button>
-                                <button type="button" class="btn btn-danger btn-sm remove-row" style="padding: 0.1rem 0.3rem; font-size: 0.8rem; display: none;"><i class="fas fa-trash fa-xs"></i></button>
-                                <span class="save-status text-success" style="display: none; margin-left: 5px;"><i class="fas fa-check fa-xs"></i></span>
-                                <span class="save-loading text-warning" style="display: none; margin-left: 5px;"><i class="fas fa-spinner fa-spin fa-xs"></i></span>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
+                <div class="row">
+                    <div class="col-md-6">
+                        <h6>Elenco Parti</h6>
+                        <ul id="partsList" class="list-group"></ul>
+                        <table class="table table-striped table-sm mt-3" id="partsTable">
+                            <thead>
+                                <tr>
+                                    <th>Num. Parte</th>
+                                    <th>Descrizione Parte</th>
+                                    <th>Azioni</th>
+                                </tr>
+                            </thead>
+                            <tbody id="partsTableBody">
+                                <tr data-part-id="new">
+                                    <td><input type="number" class="form-control form-control-sm part-number" value="1" style="width: 80px;"></td>
+                                    <td><input type="text" class="form-control form-control-sm part-description" placeholder="Inserisci descrizione" style="width: 100%;"></td>
+                                    <td>
+                                        <button type="button" class="btn btn-success btn-sm add-row" style="padding: 0.1rem 0.3rem; font-size: 0.8rem;"><i class="fas fa-plus fa-xs"></i></button>
+                                        <button type="button" class="btn btn-danger btn-sm remove-row" style="padding: 0.1rem 0.3rem; font-size: 0.8rem; display: none;"><i class="fas fa-trash fa-xs"></i></button>
+                                        <span class="save-status text-success" style="display: none; margin-left: 5px;"><i class="fas fa-check fa-xs"></i></span>
+                                        <span class="save-loading text-warning" style="display: none; margin-left: 5px;"><i class="fas fa-spinner fa-spin fa-xs"></i></span>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="col-md-6">
+                        <h6>Foto del Campione</h6>
+                        <div style="position: relative; width: 100%; min-height: 400px;">
+                            <img id="samplePhoto" src="" alt="Foto del campione" style="max-width: 100%; max-height: 100%; object-fit: contain; position: absolute; top: 0; left: 0;">
+                            <canvas id="photoCanvas" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></canvas>
+                            <div id="descriptionList" class="draggable-description" style="display: none;"></div>
+                            <div id="markerContainer"></div>
+                        </div>
+                    </div>
+                </div>
             </div>
             <div class="modal-footer">
+                <button type="button" class="btn btn-primary btn-sm" id="addDescriptionsBtn" style="padding: 0.1rem 0.5rem; font-size: 0.8rem;">Aggiungi Lista Descrizioni</button>
+                <button type="button" class="btn btn-danger btn-sm" id="removeAnnotationsBtn" style="padding: 0.1rem 0.5rem; font-size: 0.8rem;">Rimuovi Annotazioni</button>
+                <button type="button" class="btn btn-success btn-sm" id="savePhotoBtn" style="padding: 0.1rem 0.5rem; font-size: 0.8rem;">Salva Foto con Nome</button>
                 <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal" style="padding: 0.1rem 0.5rem; font-size: 0.8rem;">Chiudi</button>
             </div>
         </div>
@@ -50,7 +68,6 @@
     #partsTable th {
         padding: 0.2rem;
         vertical-align: middle;
-        /* Allinea verticalmente il contenuto */
     }
 
     #partsTable input {
@@ -71,4 +88,49 @@
         width: 100% !important;
         max-width: 100% !important;
     }
+
+    #partsList .list-group-item {
+        cursor: pointer;
+        transition: background-color 0.2s;
+    }
+
+    #partsList .list-group-item:hover {
+        background-color: #f5f5f5;
+    }
+
+    .draggable-description {
+        position: absolute;
+        background: rgba(255, 255, 255, 0.8);
+        padding: 5px;
+        font-size: 10px;
+        font-family: Arial, sans-serif;
+        color: #000000;
+        cursor: move;
+        user-select: none;
+        z-index: 1000;
+    }
+
+    .draggable-marker {
+        position: absolute;
+        width: 16px;
+        height: 16px;
+        background: rgba(255, 0, 0, 0.5);
+        border: 1px solid #ff0000;
+        border-radius: 50%;
+        color: #ffffff;
+        text-align: center;
+        line-height: 16px;
+        font-size: 8px;
+        cursor: move;
+        user-select: none;
+        z-index: 1000;
+    }
+
+    #markerContainer {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
 </style>

public/userarea/parts.js

@@ -17,11 +17,55 @@ $(document).ready(function () {
         $("#trfHeader").text(`${iddatadb} - ${importRef} - ${description}`);
         $("#partsModal").data("iddatadb", iddatadb);
 
+        loadPhoto(iddatadb);
         loadExistingParts(iddatadb);
 
         $("#partsModal").modal("show");
     });
 
+    function loadPhoto(iddatadb) {
+        $.ajax({
+            url: "load_photo.php",
+            method: "GET",
+            data: { iddatadb: iddatadb },
+            success: function (response) {
+                if (response.success && response.file_path) {
+                    const img = $("#samplePhoto");
+                    img.attr("src", response.file_path);
+                    img.on("load", function () {
+                        const container = img.parent();
+                        const canvas = document.getElementById("photoCanvas");
+                        const containerWidth = container.width();
+                        const containerHeight = container.height();
+                        const scaleX = containerWidth / img[0].naturalWidth;
+                        const scaleY = containerHeight / img[0].naturalHeight;
+                        const scale = Math.min(scaleX, scaleY);
+                        canvas.width = img[0].naturalWidth * scale;
+                        canvas.height = img[0].naturalHeight * scale;
+                        canvas.style.width = `${containerWidth}px`;
+                        canvas.style.height = `${containerHeight}px`;
+                        const ctx = canvas.getContext("2d");
+                        ctx.clearRect(0, 0, canvas.width, canvas.height);
+                        ctx.drawImage(
+                            img.get(0),
+                            0,
+                            0,
+                            canvas.width,
+                            canvas.height,
+                        );
+                        updateMarkers();
+                    });
+                } else {
+                    $("#samplePhoto").attr("src", "");
+                    alert("Nessuna foto trovata per questo TRF.");
+                }
+            },
+            error: function (xhr, status, error) {
+                alert("Errore nel caricamento della foto: " + error);
+            },
+        });
+    }
+
     function addNewRow(nextPartNumber) {
         const newRow = `
             <tr data-part-id="new">
@@ -62,6 +106,7 @@ $(document).ready(function () {
                 .get(),
         );
         addNewRow(maxPartNumber + 1);
+        updatePartsList();
     });
 
     $(document).on("click", ".remove-row", function (e) {
@@ -71,7 +116,8 @@ $(document).ready(function () {
         const partId = $row.data("part-id");
         console.log("ID parte da eliminare:", partId);
 
-        if (partId !== "new") {
+        if (partId !== "new" && partId !== undefined && partId !== null) {
+            console.log("Procedo con la cancellazione dal database");
             $.ajax({
                 url: "delete_part.php",
                 method: "POST",
@@ -88,6 +134,8 @@ $(document).ready(function () {
                     if (response.success) {
                         $row.remove();
                         updateRowButtons();
+                        updatePartsList();
+                        clearCanvasMarkers();
                     } else {
                         alert("Errore nell'eliminazione: " + response.message);
                     }
@@ -105,8 +153,12 @@ $(document).ready(function () {
                 },
             });
         } else {
+            console.log(
+                'Riga non salvata nel database (partId = "new" o non definito), rimuovo solo visivamente',
+            );
             $row.remove();
             updateRowButtons();
+            updatePartsList();
         }
     });
 
@@ -140,8 +192,16 @@ $(document).ready(function () {
                 contentType: "application/json",
                 success: function (response) {
                     if (response.success) {
+                        if (response.part_id) {
+                            $row.data("part-id", response.part_id);
+                            console.log(
+                                "Aggiornato partId della riga:",
+                                response.part_id,
+                            );
+                        }
                         $saveLoading.hide();
                         $saveStatus.show();
+                        updatePartsList();
                         setTimeout(() => $saveStatus.hide(), 2000);
                     } else {
                         alert("Errore nel salvataggio: " + response.message);
@@ -184,6 +244,7 @@ $(document).ready(function () {
                         addNewRow(1);
                     }
                     updateRowButtons();
+                    updatePartsList();
                 } else {
                     alert(
                         "Errore nel caricamento delle parti: " +
@@ -199,6 +260,308 @@ $(document).ready(function () {
         });
     }
 
+    function updatePartsList() {
+        $("#partsList").empty();
+        $("#partsTableBody tr").each(function () {
+            const partNumber = $(this).find(".part-number").val();
+            const partDescription = $(this).find(".part-description").val();
+            if (partNumber && partDescription) {
+                const listItem = `<li class="list-group-item" data-part-number="${partNumber}">${partNumber} - ${partDescription}</li>`;
+                $("#partsList").append(listItem);
+            }
+        });
+    }
+
+    let selectedPartNumber = null;
+    let markers = [];
+    let descriptionPosition = { x: 10, y: 10 };
+    let hasDescriptions = false;
+
+    $("#partsList").on("click", "li", function () {
+        selectedPartNumber = $(this).data("part-number");
+        console.log("Part number selezionato:", selectedPartNumber);
+        $(this).addClass("active").siblings().removeClass("active");
+    });
+
+    const canvas = document.getElementById("photoCanvas");
+    const ctx = canvas.getContext("2d");
+
+    $("#markerContainer").on("click", function (e) {
+        console.log("Click sul markerContainer rilevato"); // Debug
+        if (selectedPartNumber !== null) {
+            const img = $("#samplePhoto");
+            const canvas = document.getElementById("photoCanvas");
+            const rect = canvas.getBoundingClientRect();
+            const container = img.parent();
+            const containerWidth = container.width();
+            const containerHeight = container.height();
+            const scaleX = containerWidth / img.get(0).naturalWidth;
+            const scaleY = containerHeight / img.get(0).naturalHeight;
+            const scale = Math.min(scaleX, scaleY);
+            const x = (e.clientX - rect.left) / scale;
+            const y = (e.clientY - rect.top) / scale;
+
+            console.log("Coordinate cliccate (x, y):", x, y); // Debug
+
+            const existingMarker = markers.find(
+                (m) => m.partNumber == selectedPartNumber,
+            );
+            if (existingMarker) {
+                existingMarker.x = x;
+                existingMarker.y = y;
+            } else {
+                markers.push({ partNumber: selectedPartNumber, x, y });
+            }
+            console.log("Markers aggiornati:", markers); // Debug
+            updateMarkers();
+            if (hasDescriptions) {
+                drawDescriptions(descriptionPosition.x, descriptionPosition.y);
+            }
+            selectedPartNumber = null;
+            $("#partsList li").removeClass("active");
+        } else {
+            console.log("Nessun part number selezionato"); // Debug
+        }
+    });
+    function updateMarkers() {
+        const img = $("#samplePhoto");
+        const container = img.parent();
+        const containerWidth = container.width();
+        const containerHeight = container.height();
+        const scaleX = containerWidth / img.get(0).naturalWidth;
+        const scaleY = containerHeight / img.get(0).naturalHeight;
+        const scale = Math.min(scaleX, scaleY);
+
+        const markerContainer = $("#markerContainer");
+        markerContainer.empty();
+
+        markers.forEach((marker) => {
+            const scaledX = marker.x * scale;
+            const scaledY = marker.y * scale;
+            console.log(
+                "Aggiungo marker:",
+                marker.partNumber,
+                "a posizione (scaledX, scaledY):",
+                scaledX,
+                scaledY,
+            ); // Debug
+            const $marker = $(
+                `<div class="draggable-marker">${marker.partNumber}</div>`,
+            ).css({
+                left: scaledX - 8 + "px",
+                top: scaledY - 8 + "px",
+            });
+            markerContainer.append($marker);
+            makeDraggable($marker, marker, scale);
+        });
+    }
+
+    function makeDraggable($element, item, scale) {
+        let isDragging = false;
+        let currentX = parseFloat($element.css("left")) || 0;
+        let currentY = parseFloat($element.css("top")) || 0;
+        let initialX, initialY;
+
+        $element.on("mousedown", function (e) {
+            e.preventDefault();
+            isDragging = true;
+            initialX = e.clientX - currentX;
+            initialY = e.clientY - currentY;
+            $element.css("z-index", 1001);
+        });
+
+        $(document).on("mousemove", function (e) {
+            if (isDragging) {
+                e.preventDefault();
+                currentX = e.clientX - initialX;
+                currentY = e.clientY - initialY;
+                const container = $("#photoCanvas").parent();
+                const containerWidth = container.width();
+                const containerHeight = container.height();
+                const maxX = containerWidth - $element.width();
+                const maxY = containerHeight - $element.height();
+
+                currentX = Math.max(0, Math.min(currentX, maxX));
+                currentY = Math.max(0, Math.min(currentY, maxY));
+
+                $element.css({
+                    left: currentX + "px",
+                    top: currentY + "px",
+                });
+
+                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;
+                }
+            }
+        });
+
+        $(document).on("mouseup", function () {
+            isDragging = false;
+            $element.css("z-index", 1000);
+        });
+    }
+
+    function drawDescriptions(x, y) {
+        const img = $("#samplePhoto");
+        const container = img.parent();
+        const containerWidth = container.width();
+        const containerHeight = container.height();
+        const scaleX = containerWidth / img.get(0).naturalWidth;
+        const scaleY = containerHeight / img.get(0).naturalHeight;
+        const scale = Math.min(scaleX, scaleY);
+
+        const partsList = [];
+        $("#partsTableBody tr").each(function () {
+            const partNumber = $(this).find(".part-number").val();
+            const partDescription = $(this).find(".part-description").val();
+            if (partNumber && partDescription) {
+                partsList.push(`${partNumber} ${partDescription}`);
+            }
+        });
+
+        const descriptionList = $("#descriptionList");
+        descriptionList.empty();
+        descriptionList.css({
+            display: "block",
+            top: y * scale + "px",
+            left: x * scale + "px",
+            width: "200px",
+        });
+        partsList.forEach((part) => {
+            descriptionList.append(`<div>${part}</div>`);
+        });
+
+        updateMarkers();
+    }
+
+    function clearCanvasMarkers() {
+        markers = [];
+        hasDescriptions = false;
+        $("#descriptionList").css("display", "none");
+        $("#markerContainer").empty();
+        const canvas = document.getElementById("photoCanvas");
+        const img = $("#samplePhoto");
+        const ctx = canvas.getContext("2d");
+        const container = img.parent();
+        const containerWidth = container.width();
+        const containerHeight = container.height();
+        const scaleX = containerWidth / img.get(0).naturalWidth;
+        const scaleY = containerHeight / img.get(0).naturalHeight;
+        const scale = Math.min(scaleX, scaleY);
+
+        canvas.width = img.get(0).naturalWidth * scale;
+        canvas.height = img.get(0).naturalHeight * scale;
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.drawImage(img.get(0), 0, 0, canvas.width, canvas.height);
+    }
+
+    $("#addDescriptionsBtn").on("click", function () {
+        hasDescriptions = true;
+        descriptionPosition = { x: 10, y: 10 };
+        drawDescriptions(descriptionPosition.x, descriptionPosition.y);
+        makeDraggable(
+            $("#descriptionList"),
+            descriptionPosition,
+            Math.min(
+                $("#photoCanvas").parent().width() /
+                    $("#samplePhoto").get(0).naturalWidth,
+                $("#photoCanvas").parent().height() /
+                    $("#samplePhoto").get(0).naturalHeight,
+            ),
+        );
+    });
+
+    $("#removeAnnotationsBtn").on("click", function () {
+        clearCanvasMarkers();
+    });
+
+    $("#savePhotoBtn").on("click", function () {
+        const canvas = document.getElementById("photoCanvas");
+        const img = $("#samplePhoto");
+        const ctx = canvas.getContext("2d");
+
+        canvas.width = img.get(0).naturalWidth;
+        canvas.height = img.get(0).naturalHeight;
+        ctx.drawImage(img.get(0), 0, 0);
+
+        const partsList = [];
+        $("#partsTableBody tr").each(function () {
+            const partNumber = $(this).find(".part-number").val();
+            const partDescription = $(this).find(".part-description").val();
+            if (partNumber && partDescription) {
+                partsList.push(`${partNumber} ${partDescription}`);
+            }
+        });
+
+        if (hasDescriptions) {
+            ctx.fillStyle = "rgba(255, 255, 255, 0.8)";
+            ctx.fillRect(
+                descriptionPosition.x,
+                descriptionPosition.y,
+                200,
+                partsList.length * 12 + 10,
+            );
+            ctx.fillStyle = "#000000";
+            ctx.font = "10px Arial";
+            partsList.forEach((part, index) => {
+                ctx.fillText(
+                    part,
+                    descriptionPosition.x + 5,
+                    descriptionPosition.y + 12 + index * 12,
+                );
+            });
+        }
+
+        markers.forEach((marker) => {
+            ctx.beginPath();
+            ctx.arc(marker.x, marker.y, 8, 0, 2 * Math.PI);
+            ctx.fillStyle = "rgba(255, 0, 0, 0.5)";
+            ctx.fill();
+            ctx.strokeStyle = "#ff0000";
+            ctx.lineWidth = 1;
+            ctx.stroke();
+            ctx.fillStyle = "#ffffff";
+            ctx.font = "bold 8px Arial";
+            ctx.textAlign = "center";
+            ctx.textBaseline = "middle";
+            ctx.fillText(marker.partNumber, marker.x, marker.y);
+        });
+
+        const dataURL = canvas.toDataURL("image/png");
+        const timestamp = new Date().toISOString().replace(/[:.]/g, "-");
+        const defaultName = `photo_${$("#partsModal").data("iddatadb")}_${timestamp}.png`;
+        const newName = prompt(
+            "Inserisci il nome del file (senza estensione):",
+            defaultName.split(".png")[0],
+        );
+        if (newName) {
+            const finalName = newName + "_" + timestamp + ".png";
+            $.ajax({
+                url: "save_annotated_photo.php",
+                method: "POST",
+                data: { dataURL: dataURL, filename: finalName },
+                success: function (response) {
+                    if (response.success) {
+                        alert(
+                            "Foto salvata con successo: " + response.file_path,
+                        );
+                    } else {
+                        alert("Errore nel salvataggio: " + response.message);
+                    }
+                },
+                error: function (xhr, status, error) {
+                    alert("Errore nel salvataggio della foto: " + error);
+                },
+            });
+        }
+    });
+
     $(document).on("mouseenter", "tr", function () {
         console.log("Mouse entrato su riga");
     });

public/userarea/save_annotated_photo.php

@@ -0,0 +1,25 @@
+<?php
+header('Content-Type: application/json');
+
+include('include/headscript.php');
+
+$dataURL = $_POST['dataURL'] ?? null;
+$filename = $_POST['filename'] ?? null;
+
+if (!$dataURL || !$filename) {
+    echo json_encode(['success' => false, 'message' => 'Dati mancanti']);
+    exit;
+}
+
+try {
+    $data = explode(',', $dataURL)[1];
+    $decodedData = base64_decode($data);
+    $filePath = '../photostrf/annotated/' . $filename; // Crea una sottocartella 'annotated' per le foto modificate
+    if (!file_exists('../photostrf/annotated')) {
+        mkdir('../photostrf/annotated', 0777, true);
+    }
+    file_put_contents($filePath, $decodedData);
+    echo json_encode(['success' => true, 'file_path' => $filePath, 'message' => 'Foto salvata con successo']);
+} catch (Exception $e) {
+    echo json_encode(['success' => false, 'message' => 'Errore nel salvataggio: ' . $e->getMessage()]);
+}