fixed color parts

public/userarea/modal_parts.php

@@ -190,4 +190,38 @@
             box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
         }
     }
+
+    /* Stile per il selettore personalizzato dei colori */
+    .color-picker-container {
+        position: relative;
+        display: inline-block;
+    }
+
+    .color-picker {
+        display: none;
+        position: absolute;
+        top: 25px;
+        left: 0;
+        background: #fff;
+        border: 1px solid #ccc;
+        padding: 5px;
+        z-index: 1002;
+        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;
+    }
+
+    .color-option:hover {
+        border: 2px solid #000;
+        margin: 2px;
+    }
 </style>

public/userarea/parts.js

@@ -457,14 +457,6 @@ $(document).ready(function () {
         }
     });
 
-    $(document).on("change", ".part-color", function () {
-        const partNumber = $(this).closest("li").data("part-number");
-        const partColor = $(this).val();
-        partColors[partNumber] = partColor;
-        updateMarkers();
-        markUnsaved();
-    });
-
     function loadExistingParts(iddatadb) {
         $.ajax({
             url: "load_parts.php",
@@ -517,6 +509,19 @@ $(document).ready(function () {
     function updatePartsList() {
         const showMixParts = $("#showMixParts").is(":checked");
         $("#partsList").empty();
+
+        // Definizione di 8 colori predefiniti
+        const predefinedColors = [
+            "#ff0000", // Rosso
+            "#0000ff", // Blu
+            "#00ff00", // Verde
+            "#01832cff", // Giallo
+            "#ff00ff", // Magenta
+            "#00ffff", // Ciano
+            "#800080", // Viola
+            "#ffa500", // Arancione
+        ];
+
         $("#partsTableBody tr").each(function () {
             const partNumber = $(this).find(".part-number").val();
             const partDescription = $(this).find(".part-description").val();
@@ -528,17 +533,56 @@ $(document).ready(function () {
                 partDescription &&
                 (showMixParts || !partDescription.startsWith("Mix"))
             ) {
+                const colorOptions = predefinedColors
+                    .map(
+                        (color) =>
+                            `<div class="color-option" style="background-color: ${color};" data-color="${color}"></div>`,
+                    )
+                    .join("");
+
                 const listItem = `
                 <li class="list-group-item" data-part-number="${partNumber}">
                     ${partNumber} - ${partDescription}
                     <div style="display: flex; align-items: center;">
                         <button type="button" class="btn btn-success btn-sm add-to-mix-btn" style="padding: 0.1rem 0.3rem; font-size: 0.8rem;"><i class="fas fa-plus fa-xs"></i></button>
-                            <input type="color" class="part-color" value="${partColor}" style="margin-left: 5px;">
+                        <div class="color-picker-container">
+                            <div class="color-option selected-color" style="background-color: ${partColor}; margin-left: 5px;"></div>
+                            <div class="color-picker">${colorOptions}</div>
+                        </div>
                     </div>
                 </li>`;
                 $("#partsList").append(listItem);
             }
         });
+
+        // Gestione del selettore colori personalizzato
+        $(".selected-color").on("click", function (e) {
+            e.stopPropagation();
+            const $picker = $(this).siblings(".color-picker");
+            $(".color-picker").not($picker).hide(); // Chiude altri selettori aperti
+            $picker.toggle();
+        });
+
+        $(".color-option").on("click", function (e) {
+            e.stopPropagation();
+            const $this = $(this);
+            const color = $this.data("color");
+            const $listItem = $this.closest("li");
+            const partNumber = $listItem.data("part-number");
+            partColors[partNumber] = color;
+            $listItem.find(".selected-color").css("background-color", color);
+            $this.closest(".color-picker").hide(); // Chiude il selettore dopo la scelta
+            updateMarkers();
+            markUnsaved();
+        });
+
+        // Chiude il selettore se si clicca fuori
+        $(document).on("click", function (e) {
+            if (!$(e.target).closest(".color-picker-container").length) {
+                $(".color-picker").hide();
+            }
+        });
+
         updateMarkers();
     }