solocla/theloftstore
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed color parts

Browse Source
This commit is contained in:
Claudio 2025-09-17 09:41:51 +02:00
parent 8b08969c69
commit 6e465e3010
2 changed files with 92 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
public/userarea/modal_parts.php
View File

@ -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>

72
public/userarea/parts.js
View File

@ -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;">
<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>
<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>
</li>`;
</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();
}