solocla/zibo-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed for matrici

Browse Source
This commit is contained in:
Claudio 2025-10-03 08:52:37 +02:00
parent 07ddcafd3f
commit a0b12463c0
3 changed files with 303 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/userarea/import_edit2.php
View File

@ -80,6 +80,7 @@ foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
<?php include('cssinclude.php'); ?>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2Lw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.css">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
<style>
.cell-changed {
background-color: #fff3b0 !important;
@ -725,6 +726,7 @@ foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"></script>
<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="tracking.js"></script>

70
public/userarea/modal_parts.php
View File

@ -1,4 +1,4 @@
<!-- Modal modificato con pulsante per riconoscimento vocale e download -->
<!-- Modal modificato con pulsante per riconoscimento vocale, download e selezione matrici -->
<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; width: 80% !important;">
<div class="modal-content">
@ -9,10 +9,12 @@
<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;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; min-width: 0;">
<h6 style="margin: 0; white-space: nowrap;">Elenco Parti</h6>
<div style="display: flex; align-items: center;">
<input type="checkbox" id="showMixParts" name="showMixParts" style="margin-right: 5px;">
<div style="display: flex; align-items: center; min-width: 0;">
<select id="global-matrice" class="ms-2" style="width: 250px !important; min-width: 250px !important;">
</select>
<input type="checkbox" id="showMixParts" name="showMixParts" style="margin-right: 5px; margin-left: 10px;">
<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>
@ -45,13 +47,14 @@
<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="downloadPhotoBtn" style="padding: 0.1rem 0.5rem; font-size: 0.8rem; margin-right: 10px;"><i class="fas fa-download"></i> </button>
<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: 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>
<canvas id="overlayCanvas" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000;"></canvas> <!-- Nuovo canvas per Fabric.js -->
<canvas id="overlayCanvas" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000;"></canvas>
<div id="descriptionList" class="draggable-description" style="display: none;"></div>
<div id="markerContainer"></div>
</div>
</div>
@ -249,4 +252,59 @@
border: 2px solid #000;
margin: 2px;
}
/* Stili per Select2 in #partsList e #global-matrice */
#partsList .select2-container,
.select2-container--default #global-matrice {
width: 250px !important;
min-width: 250px !important;
margin-left: 10px;
}
#partsList .select2-selection--single,
.select2-container--default #global-matrice .select2-selection--single {
height: 26px !important;
padding: 0.2rem 0.5rem !important;
font-size: 0.9rem !important;
border: 1px solid #ced4da !important;
background-color: #fff !important;
}
#partsList .select2-selection__rendered,
.select2-container--default #global-matrice .select2-selection__rendered {
line-height: 24px !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
#partsList .select2-selection__arrow,
.select2-container--default #global-matrice .select2-selection__arrow {
height: 26px !important;
}
#partsList .save-status,
#partsList .save-loading {
margin-left: 5px;
}
.select2-container--open .select2-dropdown {
z-index: 1051 !important;
border: 1px solid #aaa !important;
border-radius: 4px !important;
background: white !important;
overflow-y: auto !important;
max-height: 200px !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
width: 100% !important;
padding: 0.2rem !important;
}
.select2-container--default .part-matrice,
.select2-container--default #global-matrice {
width: 250px !important;
min-width: 250px !important;
}
</style>

241
public/userarea/parts.js
View File

@ -12,11 +12,13 @@ $(document).ready(function () {
let photoAnnotations = {};
let partColors = {};
let partMatrice = {};
let selectedPartNumber = null;
let unsavedChanges = false;
let fabricCanvas = null;
let descriptionTextbox = null;
let markerObjects = {};
let matrici = [];
// ===================
// VOICE RECOGNITION SETUP
@ -137,8 +139,35 @@ $(document).ready(function () {
.data("iddatadb", iddatadb)
.data("idquotations", idquotations);
loadPhoto(iddatadb, idquotations);
loadExistingParts(iddatadb, idquotations);
// Precarica le matrici se iddatadb (assumendo matrici solo per iddatadb)
if (iddatadb) {
if (matrici.length === 0) {
$.ajax({
url: "get_matrice.php",
method: "GET",
dataType: "json",
success: function (data) {
matrici = data.value || [];
initializeGlobalSelect2();
loadPhoto(iddatadb, idquotations);
loadExistingParts(iddatadb, idquotations);
},
error: function (xhr, status, error) {
matrici = [];
initializeGlobalSelect2();
loadPhoto(iddatadb, idquotations);
loadExistingParts(iddatadb, idquotations);
},
});
} else {
initializeGlobalSelect2();
loadPhoto(iddatadb, idquotations);
loadExistingParts(iddatadb, idquotations);
}
} else {
loadPhoto(iddatadb, idquotations);
loadExistingParts(iddatadb, idquotations);
}
const modal = new bootstrap.Modal(
document.getElementById("partsModal"),
@ -175,6 +204,7 @@ $(document).ready(function () {
};
photoAnnotations = {};
partColors = {};
partMatrice = {};
selectedPartNumber = null;
unsavedChanges = false;
if (fabricCanvas) {
@ -184,10 +214,12 @@ $(document).ready(function () {
}
descriptionTextbox = null;
markerObjects = {};
matrici = [];
// Clear UI elements
$("#photoSelectorContainer").empty().hide();
$("#samplePhoto").attr("src", "");
$("#partsTableBody").empty();
$("#global-matrice").empty(); // Pulisci select globale se presente
// Remove any temporary messages
$(".temp-alert").remove();
});
@ -535,6 +567,7 @@ $(document).ready(function () {
if (response.success) {
$row.remove();
delete partColors[partNumber];
delete partMatrice[partNumber];
if (markerObjects[partNumber]) {
fabricCanvas.remove(markerObjects[partNumber]);
delete markerObjects[partNumber];
@ -576,6 +609,7 @@ $(document).ready(function () {
} else {
$row.remove();
delete partColors[partNumber];
delete partMatrice[partNumber];
if (markerObjects[partNumber]) {
fabricCanvas.remove(markerObjects[partNumber]);
delete markerObjects[partNumber];
@ -717,6 +751,9 @@ $(document).ready(function () {
</tr>`;
$("#partsTableBody").append(newRow);
partColors[part.part_number] = defaultColor;
if (part.idmatrice) {
partMatrice[part.part_number] = part.idmatrice;
}
});
} else {
addNewRow(1);
@ -743,6 +780,163 @@ $(document).ready(function () {
});
}
// Funzione per inizializzare Select2 sulle tendine delle matrici
function initializeSelect2($select, partNumber, partId, idmatrice) {
if (typeof $.fn.select2 === "undefined") {
$select.replaceWith(
'<input type="text" class="form-control form-control-sm" placeholder="Select2 non disponibile" disabled>',
);
return;
}
const options = matrici.map(function (matrice) {
return {
id: matrice.IdMatrice,
text: matrice.NomeMatriceTraduzione,
};
});
$select.select2({
placeholder: "Seleziona matrice",
allowClear: true,
data: options,
dropdownParent: $("#partsModal"),
matcher: function (params, data) {
if (!params.term || params.term.length < 3) {
return data;
}
const term = params.term.toUpperCase();
if (data.text.toUpperCase().indexOf(term) >= 0) {
return data;
}
return null;
},
});
if (partId && partId !== "new" && idmatrice) {
const matrice = matrici.find((m) => m.IdMatrice == idmatrice);
if (matrice) {
const option = new Option(
matrice.NomeMatriceTraduzione,
matrice.IdMatrice,
true,
true,
);
$select.append(option).trigger("change");
partMatrice[partNumber] = matrice.IdMatrice;
}
}
$select.on("change", function () {
const idmatrice = $(this).val();
const $listItem = $(this).closest("li");
const $saveStatus = $listItem.find(".save-status");
const $saveLoading = $listItem.find(".save-loading");
partMatrice[partNumber] = idmatrice || null;
if (partId && partId !== "new") {
$saveLoading.show();
$saveStatus.hide();
const iddatadb = $("#partsModal").data("iddatadb");
const idquotations = $("#partsModal").data("idquotations");
const endpoint = idquotations
? "save_matrice_quotation.php"
: "save_matrice.php"; // Assumendo esista per quotations, altrimenti adatta
const data = idquotations
? { idquotations: idquotations }
: { iddatadb: iddatadb };
$.ajax({
url: endpoint,
method: "POST",
data: JSON.stringify({
...data,
parts: [
{
id: partId,
idmatrice: idmatrice || null,
},
],
}),
contentType: "application/json",
success: function (response) {
if (response.success) {
$saveLoading.hide();
$saveStatus.show();
setTimeout(() => $saveStatus.hide(), 2000);
} else {
const errorMsg = $(
'<div class="alert alert-danger temp-alert" role="alert">Errore nel salvataggio della matrice: ' +
response.message +
"</div>",
);
$("#partsModal .modal-body").prepend(errorMsg);
setTimeout(function () {
errorMsg.fadeOut(500, function () {
$(this).remove();
});
}, 5000);
$saveLoading.hide();
}
},
error: function (xhr, status, error) {
const errorMsg = $(
'<div class="alert alert-danger temp-alert" role="alert">Errore nel salvataggio della matrice: ' +
error +
" (" +
xhr.status +
")</div>",
);
$("#partsModal .modal-body").prepend(errorMsg);
setTimeout(function () {
errorMsg.fadeOut(500, function () {
$(this).remove();
});
}, 5000);
$saveLoading.hide();
},
});
}
});
}
// Funzione per inizializzare Select2 sul dropdown globale
function initializeGlobalSelect2() {
const $select = $("#global-matrice");
if (typeof $.fn.select2 === "undefined") {
$select.replaceWith(
'<input type="text" class="form-control form-control-sm" placeholder="Select2 non disponibile" disabled>',
);
return;
}
const options = matrici.map(function (matrice) {
return {
id: matrice.IdMatrice,
text: matrice.NomeMatriceTraduzione,
};
});
$select.select2({
placeholder: "Seleziona matrice globale",
allowClear: true,
data: options,
dropdownParent: $("#partsModal"),
matcher: function (params, data) {
if (!params.term || params.term.length < 3) {
return data;
}
const term = params.term.toUpperCase();
if (data.text.toUpperCase().indexOf(term) >= 0) {
return data;
}
return null;
},
});
}
// ===================
// PARTS LIST
// ===================
@ -763,6 +957,7 @@ $(document).ready(function () {
$("#partsTableBody tr").each(function () {
const partNumber = $(this).find(".part-number").val();
const partDescription = $(this).find(".part-description").val();
const partId = $(this).data("part-id");
const partColor =
partColors[partNumber] ||
(partDescription.startsWith("Mix") ? "#0000ff" : "#ff0000");
@ -778,17 +973,30 @@ $(document).ready(function () {
)
.join("");
const listItem = `
<li class="list-group-item" data-part-number="${partNumber}">
<li class="list-group-item" data-part-number="${partNumber}" data-part-id="${partId}">
${partNumber} - ${partDescription}
<div style="display: flex; align-items: center;">
<button type="button" class="btn btn-primary btn-sm propagate-matrice-btn" style="padding: 0.1rem 0.3rem; font-size: 0.8rem; margin-right: 3px;"><i class="fas fa-arrow-right fa-xs"></i></button>
<select class="part-matrice" style="width: 250px !important; margin-right: 10px;"></select>
<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>
<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>
</div>
</li>`;
$("#partsList").append(listItem);
const $select = $("#partsList").find(
`li[data-part-number="${partNumber}"] .part-matrice`,
);
initializeSelect2(
$select,
partNumber,
partId,
partMatrice[partNumber],
);
}
});
@ -862,11 +1070,32 @@ $(document).ready(function () {
}
});
$(document).on("click", ".propagate-matrice-btn", function () {
const $listItem = $(this).closest("li");
const globalVal = $("#global-matrice").val();
if (globalVal) {
$listItem.find(".part-matrice").val(globalVal).trigger("change");
} else {
const errorMsg = $(
'<div class="alert alert-danger temp-alert" role="alert">Seleziona una matrice globale prima di propagare.</div>',
);
$("#partsModal .modal-body").prepend(errorMsg);
setTimeout(function () {
errorMsg.fadeOut(500, function () {
$(this).remove();
});
}, 5000);
}
});
$("#partsList").on("click", "li", function (e) {
if (
$(e.target).hasClass("add-to-mix-btn") ||
$(e.target).hasClass("color-option") ||
$(e.target).closest(".color-picker-container").length
$(e.target).closest(".color-picker-container").length ||
$(e.target).hasClass("part-matrice") ||
$(e.target).closest(".select2-container").length ||
$(e.target).hasClass("propagate-matrice-btn")
)
return;
selectedPartNumber = $(this).data("part-number");
@ -892,6 +1121,7 @@ $(document).ready(function () {
? { idquotations: idquotations }
: { iddatadb: iddatadb };
let newPartColors = {};
let newPartMatrice = {};
let newMarkerObjects = {};
let partsData = $rows
@ -908,6 +1138,7 @@ $(document).ready(function () {
partsData.forEach((part, index) => {
const newNumber = index + 1;
newPartColors[newNumber] = partColors[part.partNumber] || "#ff0000";
newPartMatrice[newNumber] = partMatrice[part.partNumber] || null;
if (markerObjects[part.partNumber]) {
newMarkerObjects[newNumber] = markerObjects[part.partNumber];
}
@ -934,6 +1165,7 @@ $(document).ready(function () {
}
partColors = newPartColors;
partMatrice = newPartMatrice;
markerObjects = newMarkerObjects;
const partsToSave = partsData.map((part) => ({
@ -941,6 +1173,7 @@ $(document).ready(function () {
part_number: part.partNumber,
part_description: part.partDescription,
mix: part.partDescription.startsWith("Mix") ? "Y" : "N",
idmatrice: partMatrice[part.partNumber] || null,
}));
$.ajax({