various fixing modal

2025-10-07 20:56:57 +02:00 · 2025-10-07 20:56:57 +02:00 · b51936f784
commit b51936f784
parent 15b6f38e8b
8 changed files with 2939 additions and 21 deletions
--- a/public/userarea/annotationsModal.js
+++ b/public/userarea/annotationsModal.js
--- a/public/userarea/customfield_values_response.json
+++ b/public/userarea/customfield_values_response.json
--- a/public/userarea/import_edit2.php
+++ b/public/userarea/import_edit2.php
@ -713,6 +713,7 @@ foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
                            </div>
                        </form>
                        <div id="partsModalContainer"></div>
+                        <div id="annotationsModalContainer"></div>
                        <?php include 'photos_functions.php'; ?>
                    </div>
                </div>
@ -728,7 +729,8 @@ foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
    <script src="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="photos.js"></script>
-    <script src="parts.js"></script>
+    <script src="annotationsModal.js"></script>
+    <script src="partsTable.js"></script>
    <script src="tracking.js"></script>
    <script src="export_to_lims.js"></script>
    <script>
@ -1191,16 +1193,13 @@ foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
                const description = $("table tbody tr").eq(rowIndex).find("td").eq(2).text() || "Sconosciuto";

                $.ajax({
-                    url: 'modal_parts.php',
+                    url: 'modal_partsTable.php',
                    method: 'GET',
                    data: {
                        iddatadb: iddatadb
                    },
                    success: function(response) {
-                        // Inserisci il modale nel container
                        $('#partsModalContainer').html(response);
-
-                        // Verifica che il modale esista
                        const modalElement = document.getElementById('partsModal');
                        if (!modalElement) {
                            console.error('Elemento modale non trovato: #partsModal');
@ -1212,11 +1211,9 @@ foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
                            return;
                        }

-                        // Imposta i dati del modale
                        $("#trfHeader").text(`${iddatadb || idquotations} - ${importRef} - ${description}`);
                        $("#partsModal").data("iddatadb", iddatadb).data("idquotations", idquotations);

-                        // Inizializza il modale con l'API nativa di Bootstrap
                        let modal = bootstrap.Modal.getInstance(modalElement);
                        if (!modal) {
                            modal = new bootstrap.Modal(modalElement, {
@ -1227,9 +1224,10 @@ foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
                        }
                        modal.show();

-                        // Carica i dati delle parti e delle foto
-                        if (typeof loadParts === 'function') {
-                            loadParts(iddatadb, idquotations);
+                        if (typeof window.loadParts === 'function') {
+                            window.loadParts(iddatadb, idquotations);
+                        } else {
+                            console.error('Funzione loadParts non definita. Verifica partsTable.js.');
                        }
                    },
                    error: function(xhr, status, error) {
@ -1243,7 +1241,6 @@ foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
                });
            });

-            // Pulizia completa alla chiusura del modale
            $(document).on('hidden.bs.modal', '#partsModal', function() {
                const modalElement = document.getElementById('partsModal');
                if (modalElement) {
@ -1257,6 +1254,20 @@ foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
                $('body').removeClass('modal-open').css('padding-right', '');
                $('.overlay.toggle-icon').css('display', 'none');
            });
+
+            $(document).on('hidden.bs.modal', '#annotationsModal', function() {
+                const modalElement = document.getElementById('annotationsModal');
+                if (modalElement) {
+                    const modal = bootstrap.Modal.getInstance(modalElement);
+                    if (modal) {
+                        modal.dispose();
+                    }
+                }
+                $('#annotationsModalContainer').empty();
+                $('.modal-backdrop').remove();
+                $('body').removeClass('modal-open').css('padding-right', '');
+                $('.overlay.toggle-icon').css('display', 'none');
+            });
        });
    </script>
    <!-- Modale di conferma per l'esportazione -->
--- a/public/userarea/modal_annotations.php
+++ b/public/userarea/modal_annotations.php
@ -0,0 +1,219 @@
+<!-- Modal per la gestione delle annotazioni -->
+<div class="modal fade" id="annotationsModal" tabindex="-1" aria-labelledby="annotationsModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-xl" style="max-width: 80% !important; width: 80% !important;">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="annotationsModalLabel">Annotazioni per TRF: <span id="trfHeaderAnnotations"></span></h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <div class="row">
+                    <div class="col-md-6">
+                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
+                            <h6 style="margin: 0;">Elenco Parti</h6>
+                            <div style="display: flex; align-items: center;">
+                                <input type="checkbox" id="showMixPartsAnnotations" name="showMixPartsAnnotations" style="margin-right: 5px;">
+                                <label for="showMixPartsAnnotations" style="font-size: 0.9rem;">Mix</label>
+                            </div>
+                        </div>
+                        <ul id="partsListAnnotations" class="list-group"></ul>
+                    </div>
+                    <div class="col-md-6">
+                        <h6>Foto del Campione</h6>
+                        <div style="display: flex; align-items: center; margin-bottom: 10px;">
+                            <button type="button" class="btn btn-primary btn-sm" id="downloadPhotoBtnAnnotations" style="padding: 0.1rem 0.5rem; font-size: 0.8rem; margin-right: 10px;"><i class="fas fa-download"></i></button>
+                            <div id="photoSelectorContainerAnnotations" style="display: none;"></div>
+                        </div>
+                        <div style="position: relative; width: 100%; min-height: 400px;">
+                            <img id="samplePhotoAnnotations" src="" alt="Foto del campione" style="max-width: 100%; max-height: 100%; object-fit: contain; position: absolute; top: 0; left: 0;">
+                            <canvas id="photoCanvasAnnotations" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></canvas>
+                            <canvas id="overlayCanvasAnnotations" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000;"></canvas>
+                            <div id="descriptionListAnnotations" class="draggable-description" style="display: none;"></div>
+                            <div id="markerContainerAnnotations"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-primary btn-sm" id="addDescriptionsBtnAnnotations" style="padding: 0.1rem 0.5rem; font-size: 0.8rem;">Aggiungi Lista Descrizioni</button>
+                <button type="button" class="btn btn-danger btn-sm" id="removeAnnotationsBtnAnnotations" style="padding: 0.1rem 0.5rem; font-size: 0.8rem;">Rimuovi Descrizioni</button>
+                <button type="button" class="btn btn-warning btn-sm" id="undoMarkerBtnAnnotations" style="padding: 0.1rem 0.5rem; font-size: 0.8rem;">Undo Marker</button>
+                <button type="button" class="btn btn-success btn-sm" id="savePhotoBtnAnnotations" style="padding: 0.1rem 0.5rem; font-size: 0.8rem;">Salva Foto con Nome</button>
+                <button type="button" class="btn btn-primary btn-sm" id="backToPartsBtnAnnotations" style="padding: 0.1rem 0.5rem; font-size: 0.8rem;">Torna alle Parti</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>
+    </div>
+</div>
+
+<style>
+    #annotationsModal {
+        z-index: 1070 !important;
+    }
+
+    #annotationsModal .modal-backdrop {
+        z-index: 1065 !important;
+    }
+
+    #annotationsModal .modal-content {
+        width: 100% !important;
+        max-width: 100% !important;
+    }
+
+    #partsListAnnotations .list-group-item {
+        cursor: pointer;
+        transition: background-color 0.2s;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 5px 10px;
+    }
+
+    #partsListAnnotations .list-group-item:hover {
+        background-color: #f5f5f5;
+    }
+
+    #partsListAnnotations .list-group-item.active {
+        background-color: #e9ecef;
+        border-color: #dee2e6;
+    }
+
+    .draggable-description {
+        position: absolute;
+        background: rgba(255, 255, 255, 0.8);
+        padding: 5px;
+        font-family: Arial, sans-serif;
+        color: #000000;
+        cursor: move;
+        user-select: none;
+        z-index: 1000;
+        min-width: 100px;
+        min-height: 50px;
+        overflow: visible;
+        border: 1px solid #ccc;
+    }
+
+    .draggable-description.active-interaction {
+        border: 2px dashed #000;
+    }
+
+    .draggable-description div {
+        white-space: nowrap;
+    }
+
+    .resize-handle {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        width: 10px;
+        height: 10px;
+        background: #888;
+        cursor: se-resize;
+    }
+
+    .draggable-marker {
+        position: absolute;
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        color: #ffffff;
+        text-align: center;
+        line-height: 24px;
+        font-size: 12px;
+        cursor: move;
+        user-select: none;
+        z-index: 1000;
+    }
+
+    #markerContainerAnnotations {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+
+    #savePhotoBtnAnnotations {
+        transition: all 0.3s ease-in-out;
+    }
+
+    #savePhotoBtnAnnotations.unsaved {
+        background-color: #dc3545 !important;
+        border-color: #dc3545 !important;
+        color: white !important;
+        animation: pulse 1.2s infinite;
+    }
+
+    @keyframes pulse {
+        0% {
+            box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
+        }
+
+        70% {
+            box-shadow: 0 0 10px 15px rgba(220, 53, 69, 0);
+        }
+
+        100% {
+            box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
+        }
+    }
+
+    .color-picker-container {
+        position: relative;
+        display: inline-block;
+        overflow: visible;
+        z-index: 2000;
+    }
+
+    .color-picker {
+        display: none;
+        position: absolute;
+        right: 0;
+        top: 25px;
+        background: #fff;
+        border: 1px solid #ccc;
+        padding: 5px;
+        z-index: 2000;
+        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+        flex-wrap: wrap;
+        width: 120px;
+    }
+
+    .color-option {
+        width: 24px;
+        height: 24px;
+        margin: 3px;
+        border: 1px solid #000;
+        cursor: pointer;
+        display: inline-block;
+        pointer-events: auto;
+    }
+
+    .color-option:hover {
+        border: 2px solid #000;
+        margin: 2px;
+    }
+
+    .selected-color {
+        width: 24px;
+        height: 24px;
+        margin-left: 5px;
+        border: 1px solid #000;
+        cursor: pointer;
+        display: inline-block;
+        pointer-events: auto;
+    }
+
+    .selected-color:hover {
+        border: 2px solid #000;
+        margin-left: 4px;
+    }
+
+    .temp-alert {
+        position: absolute;
+        top: 10px;
+        left: 50%;
+        transform: translateX(-50%);
+        z-index: 3000;
+    }
+</style>
--- a/public/userarea/modal_partsTable.php
+++ b/public/userarea/modal_partsTable.php
@ -0,0 +1,155 @@
+<div class="modal fade" id="partsModal" tabindex="-1" aria-labelledby="partsModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-xl" style="max-width: 80% !important;">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="partsModalLabel">Parti per TRF: <span id="trfHeader"></span></h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <div class="row">
+                    <div class="col-md-9">
+                        <!-- Prima riga: Elenco Parti, Mix, Rinumera, Voce -->
+                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
+                            <h6 style="margin: 0;">Elenco Parti</h6>
+                            <div style="display: flex; align-items: center;">
+                                <input type="checkbox" id="showMixParts" name="showMixParts" style="margin-right: 5px;">
+                                <label for="showMixParts" style="font-size: 0.9rem; margin-right: 10px;">Mix</label>
+                                <button type="button" class="btn btn-info btn-sm" id="renumberPartsBtn" style="padding: 0.1rem 0.5rem; font-size: 0.8rem;">Rinumera Parti</button>
+                                <button type="button" class="btn btn-secondary btn-sm ms-2" id="toggleVoiceBtn" style="padding: 0.1rem 0.5rem; font-size: 0.8rem;"><i class="fas fa-microphone"></i> Voce</button>
+                            </div>
+                        </div>
+                        <!-- Seconda riga: +, M, Matrice globale, Propaga -->
+                        <div style="display: flex; align-items: center; margin-bottom: 10px;">
+                            <button type="button" class="btn btn-success btn-sm add-row-global" style="padding: 0.1rem 0.3rem; font-size: 0.8rem; margin-right: 5px;"><i class="fas fa-plus fa-xs"></i></button>
+                            <button type="button" class="btn btn-primary btn-sm add-mix-global" style="padding: 0.1rem 0.3rem; font-size: 0.8rem; margin-right: 10px;">M</button>
+                            <select id="global-matrice" class="form-control form-control-sm" style="width: 350px !important; margin-right: 10px;"></select>
+                            <button type="button" class="btn btn-primary btn-sm propagate-all-btn" style="padding: 0.1rem 0.5rem; font-size: 0.8rem;"><i class="fas fa-arrow-right fa-xs"></i> Propaga a tutte</button>
+                        </div>
+                        <table class="table table-striped table-sm" id="partsTable">
+                            <thead>
+                                <tr>
+                                    <th>Num. Parte</th>
+                                    <th>Descrizione Parte</th>
+                                    <th>Matrice</th>
+                                    <th>Azioni</th>
+                                </tr>
+                            </thead>
+                            <tbody id="partsTableBody">
+                                <!-- Righe generate dinamicamente -->
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="col-md-3">
+                        <h6>Foto del Campione</h6>
+                        <div style="display: flex; align-items: center; margin-bottom: 10px;">
+                            <button type="button" class="btn btn-primary btn-sm" id="downloadPhotoBtn" style="padding: 0.1rem 0.5rem; font-size: 0.8rem; margin-right: 10px;"><i class="fas fa-download"></i></button>
+                            <div id="photoSelectorContainer" style="display: none;"></div>
+                        </div>
+                        <div style="position: relative; width: 100%; min-height: 400px;">
+                            <img id="samplePhoto" src="" alt="Foto del campione" style="max-width: 100%; max-height: 400px; object-fit: contain;">
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-primary btn-sm" id="openAnnotationsBtn">Apri Annotazioni</button>
+                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Chiudi</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<style>
+    #partsModal {
+        z-index: 1060 !important;
+    }
+
+    #partsModal .modal-backdrop {
+        z-index: 1055 !important;
+    }
+
+    #partsModal .modal-content {
+        width: 100% !important;
+        max-width: 100% !important;
+    }
+
+    #partsTable tr {
+        display: table-row !important;
+    }
+
+    #partsTable tr:hover {
+        background-color: #f5f5f5;
+        display: table-row !important;
+    }
+
+    #partsTable td,
+    #partsTable th {
+        padding: 0.2rem;
+        vertical-align: middle;
+    }
+
+    #partsTable input,
+    #partsTable select {
+        height: 24px;
+        padding: 0.1rem 0.3rem;
+    }
+
+    #partsTable button {
+        padding: 0.1rem 0.3rem;
+        margin: 0 2px;
+    }
+
+    #partsTable i {
+        font-size: 0.6rem !important;
+    }
+
+    #global-matrice,
+    .part-matrice {
+        width: 100% !important;
+        min-width: 100% !important;
+    }
+
+    .select2-container--default #global-matrice {
+        width: 350px !important;
+        /* Aumentato per dropdown più lungo */
+        min-width: 350px !important;
+    }
+
+    .select2-container--default .part-matrice {
+        width: 100% !important;
+        min-width: 100% !important;
+    }
+
+    .select2-container--default .select2-selection--single {
+        height: 24px !important;
+        padding: 0.1rem 0.3rem !important;
+        font-size: 0.8rem !important;
+        border: 1px solid #ced4da !important;
+    }
+
+    .select2-container--default .select2-selection__rendered {
+        line-height: 22px !important;
+        overflow: hidden !important;
+        text-overflow: ellipsis !important;
+        white-space: nowrap !important;
+    }
+
+    .select2-container--default .select2-selection__arrow {
+        height: 24px !important;
+    }
+
+    .select2-container--open .select2-dropdown {
+        z-index: 1061 !important;
+        border: 1px solid #aaa !important;
+        border-radius: 4px !important;
+        background: white !important;
+        overflow-y: auto !important;
+        max-height: 200px !important;
+    }
+
+    .propagate-matrice-btn,
+    .propagate-all-btn {
+        padding: 0.1rem 0.3rem !important;
+        font-size: 0.8rem !important;
+    }
+</style>
--- a/public/userarea/partsTable.js
+++ b/public/userarea/partsTable.js
--- a/public/userarea/save_matrice.php
+++ b/public/userarea/save_matrice.php
@ -0,0 +1,39 @@
+<?php
+header('Content-Type: application/json');
+include('include/headscript.php');
+
+$dbHandler = DBHandlerSelect::getInstance();
+$pdo = $dbHandler->getConnection();
+
+$data = json_decode(file_get_contents('php://input'), true);
+
+$iddatadb = $data['iddatadb'] ?? null;
+$parts = $data['parts'] ?? [];
+
+if (!$iddatadb || empty($parts)) {
+    echo json_encode(['success' => false, 'message' => 'Dati mancanti']);
+    exit;
+}
+
+$part = $parts[0];
+$partId = $part['id'] ?? null;
+$idmatrice = $part['idmatrice'] ?? null;
+
+if (!$partId) {
+    echo json_encode(['success' => false, 'message' => 'ID parte mancante']);
+    exit;
+}
+
+try {
+    $stmt = $pdo->prepare("UPDATE identification_parts
+        SET idmatrice = :idmatrice,
+            updated_at = NOW()
+        WHERE id = :id");
+    $stmt->execute([
+        ':id' => $partId,
+        ':idmatrice' => $idmatrice // Può essere NULL
+    ]);
+    echo json_encode(['success' => true, 'message' => 'Matrice aggiornata con successo']);
+} catch (PDOException $e) {
+    echo json_encode(['success' => false, 'message' => 'Errore nel salvataggio della matrice: ' . $e->getMessage()]);
+}
--- a/public/userarea/save_parts.php
+++ b/public/userarea/save_parts.php
@ -16,41 +16,45 @@ if (!$iddatadb || empty($parts)) {
 }

 $part = $parts[0];
-$partId = $part['id'] ?? null;   // part_id თუ არსებობს
+$partId = $part['id'] ?? null;
 $partNumber = $part['part_number'] ?? null;
 $partDescription = $part['part_description'] ?? '';
 $mix = $part['mix'] ?? 'N';
+$idmatrice = $part['idmatrice'] ?? null; // Nuovo campo idmatrice

 if ($partDescription) {
    try {
        if ($partId) {
-            // UPDATE თუ უკვე არსებობს part
+            // UPDATE se la parte esiste
            $stmt = $pdo->prepare("UPDATE identification_parts
                SET part_number = :part_number,
                    part_description = :part_description,
                    mix = :mix,
+                    idmatrice = :idmatrice,
                    updated_at = NOW()
                WHERE id = :id");
            $stmt->execute([
                ':id' => $partId,
                ':part_number' => $partNumber,
                ':part_description' => $partDescription,
-                ':mix' => $mix
+                ':mix' => $mix,
+                ':idmatrice' => $idmatrice // Può essere NULL
            ]);
-            echo json_encode(['success' => true, 'part_id' => $partId, 'part_number'=>$partNumber, 'message' => 'Parte aggiornata con successo']);
+            echo json_encode(['success' => true, 'part_id' => $partId, 'part_number' => $partNumber, 'message' => 'Parte aggiornata con successo']);
        } else {
-            // INSERT თუ ახალია
+            // INSERT per nuova parte
            $stmt = $pdo->prepare("INSERT INTO identification_parts
-                (iddatadb, part_number, part_description, mix, created_at, updated_at)
-                VALUES (:iddatadb, :part_number, :part_description, :mix, NOW(), NOW())");
+                (iddatadb, part_number, part_description, mix, idmatrice, created_at, updated_at)
+                VALUES (:iddatadb, :part_number, :part_description, :mix, :idmatrice, NOW(), NOW())");
            $stmt->execute([
                ':iddatadb' => $iddatadb,
                ':part_number' => $partNumber,
                ':part_description' => $partDescription,
-                ':mix' => $mix
+                ':mix' => $mix,
+                ':idmatrice' => $idmatrice // Può essere NULL
            ]);
            $newId = $pdo->lastInsertId();
-            echo json_encode(['success' => true, 'part_id' => $newId, 'part_number'=>$partNumber,  'message' => 'Parte salvata con successo']);
+            echo json_encode(['success' => true, 'part_id' => $newId, 'part_number' => $partNumber, 'message' => 'Parte salvata con successo']);
        }
    } catch (PDOException $e) {
        echo json_encode(['success' => false, 'message' => 'Errore nel salvataggio: ' . $e->getMessage()]);